tntd 3.0.0-beta.1 → 3.0.0-beta.2

package/es/tntd-layout/HeaderTabs.js

@@ -1,20 +1,17 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+import _get from "lodash/get";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
 import React, { useState, useEffect, useRef } from 'react';
 import styled, { withTheme } from 'styled-components';
 import cn from 'classnames';
-import { get } from 'lodash';
 import Icon from '../tntd-icon';
-const TabsContainer = styled.div `
+const TabsContainer = styled.div`
   display: flex;
   flex: 1;
   overflow: hidden;
@@ -57,7 +54,7 @@ const TabsContainer = styled.div `
     // }
     // 多签页的箭头样式
     // .tnt-themeS3 & {
-    //     background: ${(props) => `${props.theme.blueBgColor}`}; //#1D4295;
+    //     background: ${props => `${props.theme.blueBgColor}`}; //#1D4295;
     //     .tnt-icon {
     //         color: rgba(255, 255, 255, .5);
     //         &[disabled] {
@@ -69,7 +66,7 @@ const TabsContainer = styled.div `
     // }
   }
 `;
-const Tabs = styled.ul `
+const Tabs = styled.ul`
   margin: 14px 0 0;
   padding: 0;
   list-style: none;
@@ -82,13 +79,13 @@ const Tabs = styled.ul `
   transition: transform 0.25s linear;
   position: absolute;
 `;
-const TabItem = styled.li `
+const TabItem = styled.li`
   position: relative;
   margin: 0;
   padding: 0 20px 0 10px;
   cursor: pointer;
   display: inline-block;
-  line-height: ${(props) => (props.theme.size === 'large' ? '46px' : '36px')};
+  line-height: ${props => props.theme.size === 'large' ? '46px' : '36px'};
   /* transition: background-color .5; */
   width: 130px;
   color: rgba(255, 255, 255, 0.6);
@@ -130,7 +127,7 @@ const TabItem = styled.li `
 
   a {
     font-size: 14px;
-    color: ${(props) => props.theme.headerActionsColor}; //rgba(255,255,255,.6);
+    color: ${props => props.theme.headerActionsColor}; //rgba(255,255,255,.6);
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -145,7 +142,7 @@ const TabItem = styled.li `
     //     color: rgba(255,255,255,.8);
     // }
     // .tnt-themeS1 & {
-    //     color: ${(props) => props.theme.headerActionsColor};
+    //     color: ${props => props.theme.headerActionsColor};
     // }
   }
 
@@ -163,133 +160,172 @@ const TabItem = styled.li `
   &.active {
     background: #f1f2f5;
     border-radius: 2px 2px 0 0;
-    color: ${(props) => props.theme.primaryTextColor};
+    color: ${props => props.theme.primaryTextColor};
     font-weight: 600;
 
     a {
-      color: ${(props) => props.theme.primaryTextColor};
+      color: ${props => props.theme.primaryTextColor};
     }
   }
 `;
-export const HeaderTabs = withTheme((_a) => {
-    var { theme, className, tabs = [], onTabChange, onTabSelect, onTabClose, appListVisible, orgListVisible, orgAppListVisible, language } = _a, props = __rest(_a, ["theme", "className", "tabs", "onTabChange", "onTabSelect", "onTabClose", "appListVisible", "orgListVisible", "orgAppListVisible", "language"]);
-    const [selectedKey, setSelectedKey] = useState(props.selectedKey || get(tabs, '0.key'));
-    const [tabItems, setTabItems] = useState(tabs || []);
-    const [arrowVisible, setArrowVisible] = useState(false);
-    const [tabsPositionFlags, setTabsPositionFlags] = useState({ start: true, end: true });
-    const tabsRef = useRef();
-    const getTabsDom = () => tabsRef.current;
-    const onTabClick = (tab, index) => {
-        setSelectedKey(tab.key);
-        onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(tab);
-        if (selectedKey !== tab.key) {
-            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(tab);
-        }
-    };
-    const closeTabHandle = (tab, index, evt) => {
-        var _a, _b;
-        evt.stopPropagation();
-        const newTabItems = tabItems.filter(({ key }) => key !== tab.key);
-        let newSelectedKey = selectedKey;
-        setTabItems(newTabItems);
-        if (tab.key === selectedKey) {
-            newSelectedKey = index === 0 ? (_a = newTabItems[0]) === null || _a === void 0 ? void 0 : _a.key : (_b = newTabItems[index - 1]) === null || _b === void 0 ? void 0 : _b.key;
-            setSelectedKey(newSelectedKey);
-        }
-        onTabClose === null || onTabClose === void 0 ? void 0 : onTabClose(tab, newTabItems, newTabItems.find(({ key }) => key === newSelectedKey));
-    };
-    const onMoveToLeft = () => {
-        const tabsDom = getTabsDom();
-        const parentBBox = tabsDom.parentNode.getBoundingClientRect();
-        const parentWidth = parentBBox.width - 32;
-        let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ''));
-        const index = Math.ceil(x / 130);
-        const trueX = index * 130;
-        let newX = Math.min(0, -(trueX - parentWidth));
-        tabsDom.style.transform = `translateX(${newX}px)`;
-        const width = tabItems.length * 130;
-        setTabsPositionFlags({
-            start: newX < 0,
-            end: Math.abs(newX) < width - parentWidth,
-        });
-    };
-    const onMoveToRight = () => {
-        const tabsDom = getTabsDom();
-        const parentBBox = tabsDom.parentNode.getBoundingClientRect();
-        const parentWidth = parentBBox.width - 32;
-        const width = tabItems.length * 130;
-        let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ''));
-        const index = Math.floor(x / 130);
-        const trueX = index * 130;
-        let newX = Math.max(-(width - parentWidth), -(trueX + parentWidth));
-        tabsDom.style.transform = `translateX(${newX}px)`;
-        setTabsPositionFlags({
-            start: newX < 0,
-            end: Math.abs(newX) < width - parentWidth,
-        });
-    };
-    const translateTabsDom = (tabs, selectedKey) => {
-        if (!selectedKey)
-            return;
-        const index = tabs.indexOf(tabs.find(({ key }) => key === selectedKey));
-        if (index === -1)
-            return;
-        const tabsDom = getTabsDom();
-        let x = -+tabsDom.style.transform.replace(/[^\d.-]/g, '');
-        const bbox = {
-            left: index * 130,
-            right: (index + 1) * 130,
-        };
-        const parentBBox = tabsDom.parentNode.getBoundingClientRect();
-        const parentWidth = parentBBox.width - 36;
-        const width = tabItems.length * 130;
-        let tailX = x + parentWidth; //当前滑动窗口尾部坐标
-        let newX = -x;
-        if (bbox.left < x) {
-            newX = -bbox.left;
-        }
-        else if (bbox.right >= tailX) {
-            newX = parentWidth - bbox.right;
-        }
-        if (newX + width < parentWidth) {
-            newX = -(width - parentWidth);
-        }
-        newX = Math.min(0, newX);
-        tabsDom.style.transform = `translateX(${newX}px)`;
-        setTabsPositionFlags({
-            start: newX < 0,
-            end: Math.abs(newX) < width - parentWidth,
-        });
+export const HeaderTabs = withTheme(_a => {
+  var {
+      theme,
+      className,
+      tabs = [],
+      onTabChange,
+      onTabSelect,
+      onTabClose,
+      appListVisible,
+      orgListVisible,
+      orgAppListVisible,
+      language
+    } = _a,
+    props = __rest(_a, ["theme", "className", "tabs", "onTabChange", "onTabSelect", "onTabClose", "appListVisible", "orgListVisible", "orgAppListVisible", "language"]);
+  const [selectedKey, setSelectedKey] = useState(props.selectedKey || _get(tabs, '0.key'));
+  const [tabItems, setTabItems] = useState(tabs || []);
+  const [arrowVisible, setArrowVisible] = useState(false);
+  const [tabsPositionFlags, setTabsPositionFlags] = useState({
+    start: true,
+    end: true
+  });
+  const tabsRef = useRef();
+  const getTabsDom = () => tabsRef.current;
+  const onTabClick = (tab, index) => {
+    setSelectedKey(tab.key);
+    onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(tab);
+    if (selectedKey !== tab.key) {
+      onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(tab);
+    }
+  };
+  const closeTabHandle = (tab, index, evt) => {
+    var _a, _b;
+    evt.stopPropagation();
+    const newTabItems = tabItems.filter(({
+      key
+    }) => key !== tab.key);
+    let newSelectedKey = selectedKey;
+    setTabItems(newTabItems);
+    if (tab.key === selectedKey) {
+      newSelectedKey = index === 0 ? (_a = newTabItems[0]) === null || _a === void 0 ? void 0 : _a.key : (_b = newTabItems[index - 1]) === null || _b === void 0 ? void 0 : _b.key;
+      setSelectedKey(newSelectedKey);
+    }
+    onTabClose === null || onTabClose === void 0 ? void 0 : onTabClose(tab, newTabItems, newTabItems.find(({
+      key
+    }) => key === newSelectedKey));
+  };
+  const onMoveToLeft = () => {
+    const tabsDom = getTabsDom();
+    const parentBBox = tabsDom.parentNode.getBoundingClientRect();
+    const parentWidth = parentBBox.width - 32;
+    let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ''));
+    const index = Math.ceil(x / 130);
+    const trueX = index * 130;
+    let newX = Math.min(0, -(trueX - parentWidth));
+    tabsDom.style.transform = `translateX(${newX}px)`;
+    const width = tabItems.length * 130;
+    setTabsPositionFlags({
+      start: newX < 0,
+      end: Math.abs(newX) < width - parentWidth
+    });
+  };
+  const onMoveToRight = () => {
+    const tabsDom = getTabsDom();
+    const parentBBox = tabsDom.parentNode.getBoundingClientRect();
+    const parentWidth = parentBBox.width - 32;
+    const width = tabItems.length * 130;
+    let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ''));
+    const index = Math.floor(x / 130);
+    const trueX = index * 130;
+    let newX = Math.max(-(width - parentWidth), -(trueX + parentWidth));
+    tabsDom.style.transform = `translateX(${newX}px)`;
+    setTabsPositionFlags({
+      start: newX < 0,
+      end: Math.abs(newX) < width - parentWidth
+    });
+  };
+  const translateTabsDom = (tabs, selectedKey) => {
+    if (!selectedKey) return;
+    const index = tabs.indexOf(tabs.find(({
+      key
+    }) => key === selectedKey));
+    if (index === -1) return;
+    const tabsDom = getTabsDom();
+    let x = -+tabsDom.style.transform.replace(/[^\d.-]/g, '');
+    const bbox = {
+      left: index * 130,
+      right: (index + 1) * 130
     };
-    useEffect(() => {
-        setSelectedKey(props.selectedKey || get(tabs, '0.key'));
-        // const t = [{'code':'tagdata','enName':'tagdata','icon':'layer-color','menuName':'打标数据管理打标数据管理打标数据管理','path':'/orion/tag/datalist','key':'tagdata','name':'打标数据管理打标数据管理打标数据管理'},{'code':'taglist','enName':'taglist','icon':'home','menuName':'标签管理','path':'http://baidu.com/orion/tag/list','key':'taglist','name':'标签管理'},{'code':'relation1','enName':'dadicasesearch1','icon':'home','menuName':'案件检索1','path':'/orion/case/relation1','key':'relation1','name':'案件检索1'},{'code':'dadicasesearch-0','enName':'dadicasesearch','icon':'home','menuName':'案件检索-0','path':'/orion/case/relation0','key':'dadicasesearch-0','name':'案件检索-0'},{'code':'dadicasesearch-1','enName':'dadicasesearch','icon':'home','menuName':'案件检索-1','path':'/orion/case/relation1','key':'dadicasesearch-1','name':'案件检索-1'},{'code':'dadicasesearch-2','enName':'dadicasesearch','icon':'home','menuName':'案件检索-2','path':'/orion/case/relation2','key':'dadicasesearch-2','name':'案件检索-2'},{'code':'dadicasesearch-3','enName':'dadicasesearch','icon':'home','menuName':'案件检索-3','path':'/orion/case/relation3','key':'dadicasesearch-3','name':'案件检索-3'},{'code':'dadicasesearch-4','enName':'dadicasesearch','icon':'home','menuName':'案件检索-4','path':'/orion/case/relation4','key':'dadicasesearch-4','name':'案件检索-4'},{'code':'dadicasesearch-5','enName':'dadicasesearch','icon':'home','menuName':'案件检索-5','path':'/orion/case/relation5','key':'dadicasesearch-5','name':'案件检索-5'},{'code':'dadicasesearch-6','enName':'dadicasesearch','icon':'home','menuName':'案件检索-6','path':'/orion/case/relation6','key':'dadicasesearch-6','name':'案件检索-6'},{'code':'dadicasesearch-7','enName':'dadicasesearch','icon':'home','menuName':'案件检索-7','path':'/orion/case/relation7','key':'dadicasesearch-7','name':'案件检索-7'},{'code':'dadicasesearch-8','enName':'dadicasesearch','icon':'home','menuName':'案件检索-8','path':'/orion/case/relation8','key':'dadicasesearch-8','name':'案件检索-8'}] ;
-        setTabItems(tabs);
-    }, [tabs, props.selectedKey]);
-    useEffect(() => { }, [props.orgAppListVisible]);
-    useEffect(() => {
-        const tabsDom = getTabsDom();
-        setArrowVisible(tabsDom.offsetWidth - tabsDom.parentNode.offsetWidth > 0);
-    }, [tabItems]);
-    useEffect(() => {
-        translateTabsDom(tabItems, selectedKey);
-    }, [tabItems, selectedKey, appListVisible, orgListVisible, orgAppListVisible]);
-    return (React.createElement(TabsContainer, Object.assign({}, props, { className: cn('tnt-layout-header-tabs', { [className]: className }) }),
-        React.createElement(Tabs, { className: "tnt-layout-header-tabs-content", ref: tabsRef }, tabItems.map((tab, index) => {
-            var _a;
-            return (React.createElement(TabItem, { key: tab.key, theme: theme, className: cn({
-                    active: selectedKey === tab.key,
-                    activeTabPreSibling: ((_a = tabItems[index + 1]) === null || _a === void 0 ? void 0 : _a.key) === selectedKey,
-                }), onClick: () => onTabClick(tab, index) },
-                React.createElement("a", { href: tab.key, onClick: (evt) => evt.preventDefault() }, {
-                    cn: tab.name,
-                    en: tab.enName || tab.name,
-                }[language || 'cn']),
-                tab.closable !== false && tabItems.length > 1 && (React.createElement(Icon, { type: "close", onClick: closeTabHandle.bind(null, tab, index) }))));
-        })),
-        arrowVisible && (React.createElement("div", { className: "tnt-layout-header-tabs-arrows" },
-            React.createElement(Icon, { type: "left", onClick: onMoveToLeft, disabled: !tabsPositionFlags.start }),
-            React.createElement(Icon, { type: "right", onClick: onMoveToRight, disabled: !tabsPositionFlags.end })))));
+    const parentBBox = tabsDom.parentNode.getBoundingClientRect();
+    const parentWidth = parentBBox.width - 36;
+    const width = tabItems.length * 130;
+    let tailX = x + parentWidth; //当前滑动窗口尾部坐标
+    let newX = -x;
+    if (bbox.left < x) {
+      newX = -bbox.left;
+    } else if (bbox.right >= tailX) {
+      newX = parentWidth - bbox.right;
+    }
+    if (newX + width < parentWidth) {
+      newX = -(width - parentWidth);
+    }
+    newX = Math.min(0, newX);
+    tabsDom.style.transform = `translateX(${newX}px)`;
+    setTabsPositionFlags({
+      start: newX < 0,
+      end: Math.abs(newX) < width - parentWidth
+    });
+  };
+  useEffect(() => {
+    setSelectedKey(props.selectedKey || _get(tabs, '0.key'));
+    // const t = [{'code':'tagdata','enName':'tagdata','icon':'layer-color','menuName':'打标数据管理打标数据管理打标数据管理','path':'/orion/tag/datalist','key':'tagdata','name':'打标数据管理打标数据管理打标数据管理'},{'code':'taglist','enName':'taglist','icon':'home','menuName':'标签管理','path':'http://baidu.com/orion/tag/list','key':'taglist','name':'标签管理'},{'code':'relation1','enName':'dadicasesearch1','icon':'home','menuName':'案件检索1','path':'/orion/case/relation1','key':'relation1','name':'案件检索1'},{'code':'dadicasesearch-0','enName':'dadicasesearch','icon':'home','menuName':'案件检索-0','path':'/orion/case/relation0','key':'dadicasesearch-0','name':'案件检索-0'},{'code':'dadicasesearch-1','enName':'dadicasesearch','icon':'home','menuName':'案件检索-1','path':'/orion/case/relation1','key':'dadicasesearch-1','name':'案件检索-1'},{'code':'dadicasesearch-2','enName':'dadicasesearch','icon':'home','menuName':'案件检索-2','path':'/orion/case/relation2','key':'dadicasesearch-2','name':'案件检索-2'},{'code':'dadicasesearch-3','enName':'dadicasesearch','icon':'home','menuName':'案件检索-3','path':'/orion/case/relation3','key':'dadicasesearch-3','name':'案件检索-3'},{'code':'dadicasesearch-4','enName':'dadicasesearch','icon':'home','menuName':'案件检索-4','path':'/orion/case/relation4','key':'dadicasesearch-4','name':'案件检索-4'},{'code':'dadicasesearch-5','enName':'dadicasesearch','icon':'home','menuName':'案件检索-5','path':'/orion/case/relation5','key':'dadicasesearch-5','name':'案件检索-5'},{'code':'dadicasesearch-6','enName':'dadicasesearch','icon':'home','menuName':'案件检索-6','path':'/orion/case/relation6','key':'dadicasesearch-6','name':'案件检索-6'},{'code':'dadicasesearch-7','enName':'dadicasesearch','icon':'home','menuName':'案件检索-7','path':'/orion/case/relation7','key':'dadicasesearch-7','name':'案件检索-7'},{'code':'dadicasesearch-8','enName':'dadicasesearch','icon':'home','menuName':'案件检索-8','path':'/orion/case/relation8','key':'dadicasesearch-8','name':'案件检索-8'}] ;
+    setTabItems(tabs);
+  }, [tabs, props.selectedKey]);
+  useEffect(() => {}, [props.orgAppListVisible]);
+  useEffect(() => {
+    const tabsDom = getTabsDom();
+    setArrowVisible(tabsDom.offsetWidth - tabsDom.parentNode.offsetWidth > 0);
+  }, [tabItems]);
+  useEffect(() => {
+    translateTabsDom(tabItems, selectedKey);
+  }, [tabItems, selectedKey, appListVisible, orgListVisible, orgAppListVisible]);
+  return React.createElement(TabsContainer, Object.assign({}, props, {
+    className: cn('tnt-layout-header-tabs', {
+      [className]: className
+    })
+  }), React.createElement(Tabs, {
+    className: "tnt-layout-header-tabs-content",
+    ref: tabsRef
+  }, tabItems.map((tab, index) => {
+    var _a;
+    return React.createElement(TabItem, {
+      key: tab.key,
+      theme: theme,
+      className: cn({
+        active: selectedKey === tab.key,
+        activeTabPreSibling: ((_a = tabItems[index + 1]) === null || _a === void 0 ? void 0 : _a.key) === selectedKey
+      }),
+      onClick: () => onTabClick(tab, index)
+    }, React.createElement("a", {
+      href: tab.key,
+      onClick: evt => evt.preventDefault()
+    }, {
+      cn: tab.name,
+      en: tab.enName || tab.name
+    }[language || 'cn']), tab.closable !== false && tabItems.length > 1 && React.createElement(Icon, {
+      type: "close",
+      onClick: closeTabHandle.bind(null, tab, index)
+    }));
+  })), arrowVisible && React.createElement("div", {
+    className: "tnt-layout-header-tabs-arrows"
+  }, React.createElement(Icon, {
+    type: "left",
+    onClick: onMoveToLeft,
+    disabled: !tabsPositionFlags.start
+  }), React.createElement(Icon, {
+    type: "right",
+    onClick: onMoveToRight,
+    disabled: !tabsPositionFlags.end
+  })));
 });
-export default HeaderTabs;
-//# sourceMappingURL=HeaderTabs.js.map
+export default HeaderTabs;

package/es/tntd-layout/Iconfont.js

@@ -1,4 +1,3 @@
 import React from 'react';
 import Icon from '../tntd-icon';
-export default (props) => React.createElement(Icon, Object.assign({}, props));
-//# sourceMappingURL=Iconfont.js.map
+export default (props => React.createElement(Icon, Object.assign({}, props)));

package/es/tntd-layout/Language.js

@@ -1,26 +1,45 @@
+import _get from "lodash/get";
 import React, { useState } from 'react';
 import styled, { withTheme } from 'styled-components';
-import { get } from 'lodash';
 import Iconfont from './Iconfont';
 import { setLanguageStore, getLanguageStore } from './storage';
-const languages = [
-    { value: 'cn', name: '中文' },
-    { value: 'en', name: ' EN ' },
-];
+const languages = [{
+  value: 'cn',
+  name: '中文'
+}, {
+  value: 'en',
+  name: ' EN '
+}];
 const languagesMap = languages.reduce((acc, cur) => {
-    acc[cur.value] = cur;
-    return acc;
+  acc[cur.value] = cur;
+  return acc;
 }, {});
-const Language = styled.li `
-  font-size: ${({ theme: { size } }) => (size === 'large' ? '14px' : '12px')};
+const Language = styled.li`
+  font-size: ${({
+  theme: {
+    size
+  }
+}) => size === 'large' ? '14px' : '12px'};
   .tnt-icon {
-    font-size: ${({ theme: { size } }) => (size === 'large' ? '24px' : '20px')};
+    font-size: ${({
+  theme: {
+    size
+  }
+}) => size === 'large' ? '24px' : '20px'};
     margin-right: 4px;
   }
   span {
     position: relative;
-    font-size: ${({ theme: { size } }) => (size === 'large' ? '14px' : '12px')};
-    top: ${({ theme: { size } }) => (size === 'large' ? '-3px' : '-2px')};
+    font-size: ${({
+  theme: {
+    size
+  }
+}) => size === 'large' ? '14px' : '12px'};
+    top: ${({
+  theme: {
+    size
+  }
+}) => size === 'large' ? '-3px' : '-2px'};
     font-family: auto;
     .tnt-themeS1 & {
       /* color: rgba(255,255,255,.85); */
@@ -30,24 +49,27 @@ const Language = styled.li `
     display: none;
   }
 `;
-export default withTheme((props) => {
-    const { onChange } = props;
-    const getLanguage = () => {
-        let lang = getLanguageStore() || props.language;
-        if (!languagesMap[lang]) {
-            lang = get(languages, '0.value');
-        }
-        return lang;
-    };
-    const [language = 'cn', setLanguage] = useState(getLanguage());
-    const switchLanguage = () => {
-        const lang = language === 'cn' ? 'en' : 'cn';
-        setLanguage(lang);
-        setLanguageStore(lang);
-        onChange && onChange(lang);
-    };
-    return (React.createElement(Language, { onClick: switchLanguage },
-        React.createElement(Iconfont, { type: `flag-${language}` }),
-        React.createElement("span", null, get(languagesMap[language], 'name'))));
-});
-//# sourceMappingURL=Language.js.map
+export default withTheme(props => {
+  const {
+    onChange
+  } = props;
+  const getLanguage = () => {
+    let lang = getLanguageStore() || props.language;
+    if (!languagesMap[lang]) {
+      lang = _get(languages, '0.value');
+    }
+    return lang;
+  };
+  const [language = 'cn', setLanguage] = useState(getLanguage());
+  const switchLanguage = () => {
+    const lang = language === 'cn' ? 'en' : 'cn';
+    setLanguage(lang);
+    setLanguageStore(lang);
+    onChange && onChange(lang);
+  };
+  return React.createElement(Language, {
+    onClick: switchLanguage
+  }, React.createElement(Iconfont, {
+    type: `flag-${language}`
+  }), React.createElement("span", null, _get(languagesMap[language], 'name')));
+});