@arcblock/ux 2.1.66 → 2.1.69

package/lib/Datatable/TableSearch.js

@@ -44,14 +44,13 @@ function TableSearch(_ref) {
     searchAlwaysOpen
   } = options;
   const [inputExpand, setInputExpand] = (0, _react.useState)(!!searchText || searchOpen || false);
-  const [innerSearchText, setInnerSearchText] = (0, _react.useState)('');
+  const [innerSearchText, setInnerSearchText] = (0, _react.useState)(searchText);
   const inputTimer = (0, _react.useRef)(null);
   const {
     loading
   } = (0, _DatatableContext.useDatatableContext)();
   const {
-    searchDebounceTime,
-    onOutSelfSearch
+    searchDebounceTime
   } = options;
   const searchExpand = searchAlwaysOpen || inputExpand;
 
@@ -69,14 +68,8 @@ function TableSearch(_ref) {
       clearTimeout(inputTimer.current);
       setInnerSearchText(value);
       inputTimer.current = setTimeout(() => {
-        if (onOutSelfSearch) {
-          onOutSelfSearch(value);
-        } else {
-          searchTextUpdate(value);
-        }
+        searchTextUpdate(value);
       }, searchDebounceTime);
-    } else if (onOutSelfSearch) {
-      onOutSelfSearch(value);
     } else {
       searchTextUpdate(value);
     }
@@ -87,10 +80,6 @@ function TableSearch(_ref) {
     searchClose();
     setInnerSearchText('');
     onSearchOpen(false);
-
-    if (onOutSelfSearch) {
-      onOutSelfSearch('');
-    }
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
@@ -116,14 +105,14 @@ function TableSearch(_ref) {
         variant: "standard",
         spacing: 2,
         onChange: onChange,
-        value: searchDebounceTime ? innerSearchText : searchText || '',
+        value: searchDebounceTime ? innerSearchText : searchText,
         placeholder: searchPlaceholder || '',
         autoFocus: !searchAlwaysOpen
       }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
         disabled: true,
         variant: "standard",
         spacing: 2,
-        value: searchDebounceTime ? innerSearchText : searchText || ''
+        value: searchDebounceTime ? innerSearchText : searchText
       })]
     }), !searchAlwaysOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "toolbar-search-close ".concat(searchExpand ? 'toolbar-btn-show' : ''),

package/lib/Locale/selector.js

@@ -31,17 +31,15 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 
+var _Globe = _interopRequireDefault(require("@arcblock/icons/lib/Globe"));
+
 var _Util = require("../Util");
 
 var _context = require("./context");
 
-var _globeDark = _interopRequireDefault(require("./images/globe-dark.png"));
-
-var _globeLight = _interopRequireDefault(require("./images/globe-light.png"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["dark", "showText", "popperProps", "popperType", "icon"];
+const _excluded = ["showText", "popperProps", "popperType", "icon"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -56,8 +54,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 function LocaleSelector(props) {
+  var _theme$palette, _theme$palette2, _theme$palette2$text;
+
   const {
-    dark,
     showText,
     popperProps,
     popperType,
@@ -72,6 +71,7 @@ function LocaleSelector(props) {
   const anchorEl = (0, _react.useRef)(null);
   const [open, setOpen] = (0, _react.useState)(false);
   const theme = (0, _styles.useTheme)();
+  const dark = (theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.mode) === 'dark';
 
   const onSelect = newLocale => {
     changeLocale(newLocale);
@@ -107,12 +107,14 @@ function LocaleSelector(props) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {});
     }
 
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-      src: dark ? _globeDark.default : _globeLight.default,
-      className: "trigger-image",
-      alt: "globe"
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Globe.default, {
+      style: {
+        width: 26,
+        height: 24.76,
+        color: theme.palette.text.secondary
+      }
     });
-  }, [Icon, dark]);
+  }, [Icon, theme === null || theme === void 0 ? void 0 : (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : (_theme$palette2$text = _theme$palette2.text) === null || _theme$palette2$text === void 0 ? void 0 : _theme$palette2$text.secondary]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread(_objectSpread({
     component: "div",
     dark: dark,
@@ -162,7 +164,6 @@ function LocaleSelector(props) {
 }
 
 LocaleSelector.propTypes = {
-  dark: _propTypes.default.bool,
   size: _propTypes.default.number,
   showText: _propTypes.default.bool,
   popperProps: _propTypes.default.object,
@@ -171,7 +172,6 @@ LocaleSelector.propTypes = {
   icon: _propTypes.default.any
 };
 LocaleSelector.defaultProps = {
-  dark: false,
   showText: true,
   size: 24,
   popperProps: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.66",
+  "version": "2.1.69",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -11,10 +11,6 @@
   "homepage": "https://github.com/ArcBlock/ux#readme",
   "license": "Apache-2.0",
   "main": "lib/index.js",
-  "files": [
-    "lib",
-    "src"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ArcBlock/ux.git"
@@ -52,10 +48,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "a2265116a3ca54ae0c36d5d5414f86e68c37ea2e",
+  "gitHead": "84373c9197af46cc11f69940e31163e11d55fe6f",
   "dependencies": {
-    "@arcblock/icons": "^2.1.66",
-    "@arcblock/react-hooks": "^2.1.66",
+    "@arcblock/icons": "^2.1.69",
+    "@arcblock/react-hooks": "^2.1.69",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Datatable/TableSearch.js

@@ -12,11 +12,11 @@ import { useDatatableContext } from './DatatableContext';
 export default function TableSearch({ search, options, searchText, searchTextUpdate, searchClose, onSearchOpen }) {
   const { searchOpen, searchPlaceholder, searchAlwaysOpen } = options;
   const [inputExpand, setInputExpand] = useState(!!searchText || searchOpen || false);
-  const [innerSearchText, setInnerSearchText] = useState('');
+  const [innerSearchText, setInnerSearchText] = useState(searchText);
   const inputTimer = useRef(null);
   const { loading } = useDatatableContext();
 
-  const { searchDebounceTime, onOutSelfSearch } = options;
+  const { searchDebounceTime } = options;
 
   const searchExpand = searchAlwaysOpen || inputExpand;
 
@@ -31,14 +31,8 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
       clearTimeout(inputTimer.current);
       setInnerSearchText(value);
       inputTimer.current = setTimeout(() => {
-        if (onOutSelfSearch) {
-          onOutSelfSearch(value);
-        } else {
-          searchTextUpdate(value);
-        }
+        searchTextUpdate(value);
       }, searchDebounceTime);
-    } else if (onOutSelfSearch) {
-      onOutSelfSearch(value);
     } else {
       searchTextUpdate(value);
     }
@@ -49,9 +43,6 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
     searchClose();
     setInnerSearchText('');
     onSearchOpen(false);
-    if (onOutSelfSearch) {
-      onOutSelfSearch('');
-    }
   };
 
   return (
@@ -81,7 +72,7 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
             variant="standard"
             spacing={2}
             onChange={onChange}
-            value={searchDebounceTime ? innerSearchText : searchText || ''}
+            value={searchDebounceTime ? innerSearchText : searchText}
             placeholder={searchPlaceholder || ''}
             autoFocus={!searchAlwaysOpen}
           />
@@ -92,7 +83,7 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
             disabled
             variant="standard"
             spacing={2}
-            value={searchDebounceTime ? innerSearchText : searchText || ''}
+            value={searchDebounceTime ? innerSearchText : searchText}
           />
         )}
       </div>

package/src/Locale/selector.js

@@ -13,20 +13,19 @@ import MenuItem from '@mui/material/MenuItem';
 import MenuList from '@mui/material/MenuList';
 import Box from '@mui/material/Box';
 import CheckIcon from '@mui/icons-material/Check';
+import GlobeIcon from '@arcblock/icons/lib/Globe';
 
 import { getColor, getBackground } from '../Util';
 
 import { LocaleContext, languages } from './context';
 
-import globeDark from './images/globe-dark.png';
-import globeLight from './images/globe-light.png';
-
 function LocaleSelector(props) {
-  const { dark, showText, popperProps, popperType, icon: Icon, ...rest } = props;
+  const { showText, popperProps, popperType, icon: Icon, ...rest } = props;
   const { locale, changeLocale } = useContext(LocaleContext);
   const anchorEl = useRef(null);
   const [open, setOpen] = useState(false);
   const theme = useTheme();
+  const dark = theme?.palette?.mode === 'dark';
 
   const onSelect = (newLocale) => {
     changeLocale(newLocale);
@@ -64,8 +63,8 @@ function LocaleSelector(props) {
       return <Icon />;
     }
 
-    return <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />;
-  }, [Icon, dark]);
+    return <GlobeIcon style={{ width: 26, height: 24.76, color: theme.palette.text.secondary }} />;
+  }, [Icon, theme?.palette?.text?.secondary]);
 
   return (
     <Div component="div" dark={dark} theme={theme} {...rest} {...handleEventProps}>
@@ -105,7 +104,6 @@ function LocaleSelector(props) {
 }
 
 LocaleSelector.propTypes = {
-  dark: PropTypes.bool,
   size: PropTypes.number,
   showText: PropTypes.bool,
   popperProps: PropTypes.object,
@@ -115,7 +113,6 @@ LocaleSelector.propTypes = {
 };
 
 LocaleSelector.defaultProps = {
-  dark: false,
   showText: true,
   size: 24,
   popperProps: {},

package/src/ActionButton/ActionButton.stories.js

@@ -1,63 +0,0 @@
-import { ThemeProvider } from '@mui/material/styles';
-
-import { create } from '../Theme';
-import ActionButton from '.';
-
-export default {
-  title: 'Deprecated/ActionButton',
-
-  parameters: {
-    readme: {
-      sidebar: '<!-- PROPS -->',
-    },
-  },
-};
-
-export function WithDifferentColor() {
-  return (
-    <ThemeProvider theme={create()}>
-      <div>
-        <ActionButton href="/" theme="inherit">
-          Default Button
-        </ActionButton>
-        <ActionButton href="/" theme="primary">
-          Primary Button
-        </ActionButton>
-        <ActionButton href="/" theme="secondary">
-          Secondary Button
-        </ActionButton>
-        <ActionButton href="/" theme="reverse">
-          Reverse Button
-        </ActionButton>
-      </div>
-    </ThemeProvider>
-  );
-}
-
-WithDifferentColor.storyName = 'with different color';
-
-export function WithDifferentVariant() {
-  return (
-    <ThemeProvider theme={create()}>
-      <div>
-        <ActionButton href="/" variant="text">
-          Text Button
-        </ActionButton>
-        <ActionButton href="/" variant="outlined">
-          Outlined Button
-        </ActionButton>
-        <ActionButton href="/" variant="contained">
-          Contained Button
-        </ActionButton>
-
-        <div style={{ background: '#222', padding: 12, marginTop: 24 }}>
-          <ActionButton href="/" variant="contained" theme="reverse">
-            Contained Reverse Button
-          </ActionButton>
-        </div>
-      </div>
-    </ThemeProvider>
-  );
-}
-
-WithDifferentVariant.storyName = 'with different variant';

package/src/ActivityIndicator/ActivityIndicator.stories.js

@@ -1,9 +0,0 @@
-import ActivityIndicator from '.';
-
-export { default as Basic } from './demo/basic';
-export { default as WithCustomMessages } from './demo/with-custom-messages';
-
-export default {
-  title: 'UX/ActivityIndicator',
-  component: ActivityIndicator,
-};

package/src/ActivityIndicator/demo/basic.js

@@ -1,5 +0,0 @@
-import ActivityIndicator from '..';
-
-export default function Basic() {
-  return <ActivityIndicator />;
-}

package/src/ActivityIndicator/demo/with-custom-messages.js

@@ -1,5 +0,0 @@
-import ActivityIndicator from '..';
-
-export default function Basic(props) {
-  return <ActivityIndicator messages={['Loading message 1', 'Loading message2']} interval={1000} {...props} />;
-}

package/src/Alert/Alert.stories.js

@@ -1,100 +0,0 @@
-import Alert from '.';
-
-export default {
-  title: 'Deprecated/Alert',
-
-  parameters: {
-    readme: {
-      sidebar: '<!-- PROPS -->',
-    },
-  },
-};
-
-export function WithDifferentType() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '300px',
-        justifyContent: 'space-between',
-      }}>
-      <Alert type="error">Error message</Alert>
-      <Alert type="warning">Warning message</Alert>
-      <Alert type="success">Success message</Alert>
-      <Alert type="tip">Default tip</Alert>
-    </div>
-  );
-}
-
-WithDifferentType.storyName = 'with different type';
-
-export function WithDifferentVariant() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '300px',
-        justifyContent: 'space-between',
-      }}>
-      <Alert type="error" variant="icon">
-        Error message
-      </Alert>
-      <Alert type="warning" variant="border">
-        Warning message
-      </Alert>
-    </div>
-  );
-}
-
-WithDifferentVariant.storyName = 'with different variant';
-
-export function WithIcon() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '300px',
-        justifyContent: 'space-between',
-      }}>
-      <Alert type="error" showIcon>
-        Error message
-      </Alert>
-      <Alert type="warning" showIcon>
-        Warning message
-      </Alert>
-      <Alert type="success" showIcon>
-        Success message
-      </Alert>
-      <Alert type="tip" showIcon>
-        Default tip
-      </Alert>
-    </div>
-  );
-}
-
-WithIcon.storyName = 'with icon';
-
-export function WithDifferentMessage() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '300px',
-        justifyContent: 'space-between',
-      }}>
-      <Alert type="error">Error message</Alert>
-      <Alert type="error">
-        <ul>
-          <li>Error message 1</li>
-          <li>Error message 2</li>
-        </ul>
-      </Alert>
-    </div>
-  );
-}
-
-WithDifferentMessage.storyName = 'with different message';

package/src/AnimationWaiter/AnimationWaiter.stories.js

@@ -1,22 +0,0 @@
-import AnimationWaiter from '.';
-
-export { default as Basic } from './demo/basic';
-export { default as WithCustomMessages } from './demo/with-custom-messages';
-export { default as WithMoreMessages } from './demo/with-more-messages';
-export { default as Sizes } from './demo/sizes';
-export { default as WithTips } from './demo/with-tips';
-export { default as WithSpeed } from './demo/with-speed';
-export { default as WithMaybeDuration } from './demo/with-maybe-duration';
-
-export default {
-  title: 'UX/AnimationWaiter',
-  component: AnimationWaiter,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'AnimationWaiter is a loading component that provides feedback when the user is waiting for a long time to perform an operation.',
-      },
-    },
-  },
-};

package/src/AnimationWaiter/demo/basic.js

@@ -1,5 +0,0 @@
-import AnimationWaiter from '..';
-
-export default function Basic() {
-  return <AnimationWaiter />;
-}

package/src/AnimationWaiter/demo/sizes.js

@@ -1,11 +0,0 @@
-import AnimationWaiter from '..';
-
-export default function Sizes() {
-  return (
-    <div>
-      <AnimationWaiter message="I am default size" />
-      <AnimationWaiter message="I am size 100" size={100} />
-      <AnimationWaiter message="I am size 400" size={500} />
-    </div>
-  );
-}

package/src/AnimationWaiter/demo/with-custom-messages.js

@@ -1,5 +0,0 @@
-import AnimationWaiter from '..';
-
-export default function WithCustomMessages() {
-  return <AnimationWaiter message="I am message" />;
-}

package/src/AnimationWaiter/demo/with-maybe-duration.js

@@ -1,11 +0,0 @@
-import AnimationWaiter from '..';
-
-export default function WithMaybeDuration() {
-  return (
-    <AnimationWaiter
-      message="Increase to 5x speed in 10 seconds"
-      maybeDuration={10000}
-      increaseSpeed={4} // 1+4
-    />
-  );
-}

package/src/AnimationWaiter/demo/with-more-messages.js

@@ -1,22 +0,0 @@
-import AnimationWaiter from '..';
-
-export default function WithMoreMessages() {
-  return (
-    <div>
-      <AnimationWaiter message={['Message 1', 'Message 2', 'Message 3']} messageDuration={2000} />
-      <AnimationWaiter
-        message={[
-          'Message 1',
-          <div style={{ color: 'red' }}>
-            Custom Element Message More More More Desc More Desc More Desc More Desc More
-            <br />
-            Desc More Desc More Desc
-          </div>,
-          'Message 3',
-        ]}
-        messageDuration={2000}
-      />
-      <AnimationWaiter message={['Message 1', 'Message 2', 'Message 3']} messageDuration={2000} messageLoop={false} />
-    </div>
-  );
-}

package/src/AnimationWaiter/demo/with-speed.js

@@ -1,18 +0,0 @@
-import AnimationWaiter from '..';
-
-export default function WithSpeed() {
-  return (
-    <div>
-      <AnimationWaiter
-        increaseSpeed={0.2} // 1+0.2
-        message="Initial speed 1x, increasing to 1.2x in two minute"
-      />
-      <AnimationWaiter speed={0.5} message="Evening animation 0.5x" />
-      <AnimationWaiter
-        speed={0.5}
-        increaseSpeed={0.2} // 0.5+0.2
-        message="Initial speed 0.5x, increasing to 0.7x in two minute"
-      />
-    </div>
-  );
-}

package/src/AnimationWaiter/demo/with-tips.js

@@ -1,22 +0,0 @@
-import AnimationWaiter from '..';
-
-export default function WithTips() {
-  const tips = [
-    <div style={{ color: 'red', paddingBottom: 14 }}>I am tips 1</div>,
-    <div style={{ color: 'green', paddingBottom: 14 }}>I am tips 2</div>,
-    <div style={{ color: 'blue', paddingBottom: 14 }}>I am tips 3</div>,
-  ];
-
-  return (
-    <div
-      style={{
-        width: 375,
-        height: 667,
-        backgroundColor: '#eee',
-        color: '#1dc1c7',
-        textAlign: 'center',
-      }}>
-      <AnimationWaiter message="I am message" tips={tips} tipsDuration={1000} />
-    </div>
-  );
-}

package/src/Badge/Badge.stories.js

@@ -1,41 +0,0 @@
-import Badge from '.';
-
-export default {
-  title: 'Deprecated/Badge',
-
-  parameters: {
-    readme: {
-      sidebar: '<!-- PROPS -->',
-    },
-  },
-};
-
-export function WithDifferentType() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '300px',
-        justifyContent: 'space-between',
-      }}>
-      <Badge type="error" style={{ marginBottom: 16 }}>
-        Error message
-      </Badge>
-      <Badge type="warning" style={{ marginBottom: 16 }}>
-        Warning message
-      </Badge>
-      <Badge type="success" style={{ marginBottom: 16 }}>
-        Success message
-      </Badge>
-      <Badge type="primary" style={{ marginBottom: 16 }}>
-        Default tip
-      </Badge>
-      <Badge type="reverse" style={{ marginBottom: 16 }}>
-        Reverse styling
-      </Badge>
-    </div>
-  );
-}
-
-WithDifferentType.storyName = 'with different type';

package/src/Blocklet/Blocklet.stories.js

@@ -1,17 +0,0 @@
-import Basic from './demo/basic';
-
-export default {
-  title: 'UX/Blocklet',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'Blocklet component is used to display Blocklet Information',
-      },
-    },
-  },
-};
-
-Basic.storyName = 'Blocklet';
-
-export { Basic };