Merge pull request #1 from jeven2016/0.4

0.4

package.json

@@ -53,6 +53,7 @@
     "react-dev-utils": "^10.2.1",
     "react-dom": "^16.13.1",
     "react-hook-form": "^6.8.6",
+    "react-live": "^2.2.3",
     "resolve": "1.16.1",
     "resolve-url-loader": "3.1.1",
     "sass-loader": "8.0.2",

src/components/src/Icons.js

@@ -421,3 +421,14 @@ export const IconFilter = React.forwardRef((props, ref) => {
   </svg>;
 });
 
+export const IconEdit = React.forwardRef((props, ref) => {
+  const [clsName, otherProps] = useIcon(props);
+  return <svg ref={ref} className={clsName} xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24" {...otherProps}>
+    <path d="M0 0h24v24H0V0z" fill="none"/>
+    <path
+        d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/>
+  </svg>;
+});
+
+

src/components/src/index.js

@@ -81,6 +81,7 @@ export {
   IconQuestion,
   IconAccount,
   IconLock,
+  IconEdit
 } from './Icons';
 
 export {

src/docs/DocHome.js

@@ -1,11 +1,17 @@
-import React, {useState} from 'react';
-import {HashRouter as Router, Route, Switch} from 'react-router-dom';
-import {RouteLoader, initStore, StoreContext} from 'react-windy-ui';
+import React, {useCallback, useEffect, useState} from 'react';
+import {Route, Switch} from 'react-router-dom';
+import {initStore, RouteLoader, StoreContext} from 'react-windy-ui';
+import intl from 'react-intl-universal';
+
+// locale data
+const locales = {
+  'zh_CN': require('./common/doc_zh_CN.json'),
+  'en_US': require('./common/doc_en_US.json'),
+};
 
 //Async modules to import
 const Home = React.lazy(() => import(`./home/Home`));
 const DocCenter = React.lazy(() => import('./main/DocCenter'));
-const Loading = () => null;//no need this feature
 
 const progressStyle = {
   top: '0', height: '3px', zIndex: '1000',
@@ -15,16 +21,44 @@ const barStyle = {
   background: '#27AE60',
 };
 
+const Loading = () => {
+  return 'Loading the page...';
+};
+
 export default function DocHome() {
-   const [language, setLanguage] = useState('zh_CN');
+  const [lang, setLang] = useState({initDone: false, currentLocale: 'zh_CN'});
 
   const [store] = useState(() =>
       initStore('init'),
   );
 
+  const switchLocale = useCallback((lc) => {
+    return intl.init({
+      locales,
+      currentLocale: lc,
+    });
+  }, []);
+
+  useEffect(() => {
+    // init method will load CLDR locale data according to currentLocale
+    // react-intl-universal is singleton, so you should init it only once in your app
+    switchLocale(lang.currentLocale);
+  }, [lang.currentLocale, switchLocale]);
+
+  const changeLocale = useCallback((nextLang) => {
+    switchLocale(nextLang).
+        then(() => setLang(pre => ({...pre, currentLocale: nextLang})));
+  }, [switchLocale]);
+
   return <>
     <React.Suspense fallback={<Loading/>}>
-      <StoreContext.Provider value={{language, store}}>
+      <StoreContext.Provider
+          value={{
+            supportLocals: Object.keys(locales),
+            locale: lang.currentLocale,
+            changeLocale,
+            store,
+          }}>
         <Switch>
           <RouteLoader
               route={Route}
@@ -40,7 +74,6 @@ export default function DocHome() {
               render={() => <Home/>}
               progressStyle={progressStyle}
               barStyle={barStyle}>
-            <Home/>
           </RouteLoader>
 
           <RouteLoader route={Route} render={() => <div>404, 页面不存在~~</div>}>

src/docs/common/doc.js

@@ -0,0 +1,3 @@
+{
+
+}

src/docs/common/doc_en_US.json

@@ -0,0 +1,15 @@
+{
+  "locale.zh_CN": "中文简体",
+  "locale.en_US": "English",
+  "global.home.title": "Windy UI",
+  "global.home.link.documentation": "Documentation",
+  "global.home.link.template": "Template",
+  "global.home.link.contribute": "Contribute",
+  "global.home.link.language": "Language",
+  "global.home.content": "A responsive design system built with React, Wui.",
+  "global.home.button.start": "Get Started",
+  "global.home.button.github": "Github",
+  "global.home.current.release": "Current release",
+  "global.home.current.release.version": "0.3.2",
+  "global.home.desc1": "Design for more user-friendly websites, compatible with various of devices"
+}

src/docs/common/doc_zh_CN.json

@@ -0,0 +1,16 @@
+{
+  "locale.zh_CN": "中文简体",
+  "locale.en_US": "English",
+  "global.home.title": "Windy UI",
+  "global.home.link.documentation": "文 档",
+  "global.home.link.template": "模 板",
+  "global.home.link.contribute": "贡献力量",
+  "global.home.link.language": "语 言",
+  "global.home.content": "基于React, Wui并支持响应式布局的UI框架",
+  "global.home.button.start": "快速开始",
+  "global.home.button.github": "Github",
+  "global.home.current.release": "当前版本",
+  "global.home.current.release.version": "0.3.2",
+
+  "global.home.desc1": "设计更友好的站点，兼容各类显示设备"
+}

src/docs/home/HomeContent.js

@@ -51,17 +51,21 @@ export default function HomeContent() {
             </animated.div>
           </div>
           <div className="content">
-            A responsive design system built with React, Wui.
+            {intl.get("global.home.content")}
           </div>
 
           <div className="line">
-            <Button type="green" hasMinWidth>Get Started</Button>
-            <Button type="purple" hasMinWidth>Github</Button>
+            <Button type="green" hasMinWidth>
+              {intl.get("global.home.button.start")}
+            </Button>
+            <Button type="purple" hasMinWidth>
+              {intl.get("global.home.button.github")}
+            </Button>
           </div>
           <div className="line">
-            <span>Current release</span>
+            <span> {intl.get("global.home.current.release")}</span>
             <Badge type="tag" color="error" style={{marginLeft: '1rem'}}>
-              v0.5.0
+              {intl.get("global.home.current.release.version")}
             </Badge>
           </div>
           <div className="line">&nbsp;</div>

src/docs/home/HomeHeader.js

@@ -1,9 +1,16 @@
-import React, {useState} from 'react';
-import {Affix, Button, Dropdown, IconList, Navbar} from 'react-windy-ui';
+import React, {useCallback, useContext, useState} from 'react';
+import {Affix, Dropdown, IconList, Navbar, Popover} from 'react-windy-ui';
 import {Link} from 'react-router-dom';
+import {StoreContext} from '../../components/src';
+import intl from 'react-intl-universal';
 
 export default function HomeHeader({transparent = false}) {
   const [barExtraCls, setBarExtraCls] = useState(null);
+  const {supportLocals, locale, changeLocale} = useContext(StoreContext);
+
+  const setLocale = useCallback((id) => {
+    id !== locale && changeLocale(id);
+  }, [changeLocale, locale]);
 
   return <>
     <Affix block top={0} onChange={affixed => {
@@ -21,23 +28,36 @@ export default function HomeHeader({transparent = false}) {
               fontSize: '1rem',
               marginRight: '1rem',
             }}/>*/}
-            <Link to="/">Windy UI</Link>
+            <Link to="/">{intl.get('global.home.title')}</Link>
           </Navbar.Title>
           <Navbar.List align='right'>
             <Navbar.Item hasBar>
-              <Link to="/docs">Documentation</Link>
+              <Link to="/docs">{intl.get(
+                  'global.home.link.documentation')}</Link>
             </Navbar.Item>
             <Navbar.Item hasBar>
-              Templates
+              {intl.get('global.home.link.template')}
             </Navbar.Item>
-            <Navbar.Item hasBar>
-              Contribute
+            <Navbar.Item>
+              <Popover body="current Contributor" activeBy="hover" position="bottomRight">
+                <span style={{color: '#fff'}}>{intl.get('global.home.link.contribute')}</span>
+              </Popover>
             </Navbar.Item>
             <Navbar.Item>
-              <Dropdown activeBy="hover" title={<span>Language</span>}>
+              <Dropdown activeBy="hover"
+                        title={<span>{intl.get(
+                            'global.home.link.language')}</span>}
+                        onSelect={setLocale}>
                 <Dropdown.Menu>
-                  <Dropdown.Item id="English">English</Dropdown.Item>
-                  <Dropdown.Item id="chinese">中文简体</Dropdown.Item>
+                  {
+                    supportLocals.map(
+                        sl => <Dropdown.Item id={sl} key={sl}
+                                             extraClassName={sl === locale
+                                                 ? 'doc selected-item'
+                                                 : null}>
+                          {intl.get(`locale.${sl}`)}
+                        </Dropdown.Item>)
+                  }
                 </Dropdown.Menu>
               </Dropdown>
             </Navbar.Item>

src/docs/home/MobileContent.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import DeviceImage from '../images/home-device.png';
 import {Col, Row} from 'react-windy-ui';
+import intl from 'react-intl-universal';
 
 export default function MobileContent() {
 
@@ -14,7 +15,7 @@ export default function MobileContent() {
                justifyContent: 'center',
                flexDirection: 'column',
              }}>
-          <h2>设计更友好的站点，兼容各类显示设备</h2>
+          <h2>{intl.get('global.home.desc1')}</h2>
           <img src={DeviceImage} width='100%' onClick={() => false}/>
         </Col>
       </Row>

src/docs/main/DocCenter.js

@@ -8,7 +8,7 @@ import {
   RouteLoader,
   Row,
   Affix,
-  StoreContext,
+  initStore,
   useMediaQuery,
 } from 'react-windy-ui';
 import DocMenu from './DocMenu';
@@ -47,8 +47,9 @@ import DatePickerIndex from '../pages/datepicker/DatePickerIndex';
 import PcIndex from '../pages/popconfirm/PcIndex';
 import FormIndex from '../pages/form/FormIndex';
 import HooksIndex from '../pages/hooks/HooksIndex';
-import NavMenu from './NavMenu';
 import AffixIndex from '../pages/affix/AffixIndex';
+import QuickManu from './QuickManu';
+import {QuickManuContext} from '../utils/DocUtils';
 
 function DocCenter(props) {
   // The `path` lets us build <Route> paths that are
@@ -79,11 +80,15 @@ function DocCenter(props) {
     containerStyle = {padding: '16px 2%'};
   }
 
+  const [store] = useState(() =>
+      initStore({list: []}), /**{list:  [{id: xx, text: xxx}]} **/
+  );
+
   const [activeDrawer, setActive] = useState(false);
   const menu = <DocMenu hasBox={isMinLg}
                         onSelectMenuItem={() => setActive(false)}/>;
 
-  return <>
+  return <QuickManuContext.Provider value={{quickManuStore: store}}>
     <HomeHeader/>
     <div style={containerStyle}>
       {
@@ -102,7 +107,7 @@ function DocCenter(props) {
           isMinLg &&
           <Col col={2}>
             <Affix top={80} name='left'>
-                {menu}
+              {menu}
             </Affix>
           </Col>
         }
@@ -226,12 +231,12 @@ function DocCenter(props) {
         </Col>
         {isMinXg && <Col col={2}>
           <Affix top={80}>
-            <NavMenu/>
+            <QuickManu/>
           </Affix>
         </Col>}
       </Row>
     </div>
-  </>;
+  </QuickManuContext.Provider>;
 
 }