@arcblock/ux 2.1.67 → 2.1.70

package/lib/CodeBlock/index.js

@@ -17,7 +17,7 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 
 var _useMountedState = _interopRequireDefault(require("react-use/lib/useMountedState"));
 
-var _highlight = _interopRequireDefault(require("highlight.js/lib/highlight"));
+var _core = _interopRequireDefault(require("highlight.js/lib/core"));
 
 var _javascript = _interopRequireDefault(require("highlight.js/lib/languages/javascript"));
 
@@ -71,57 +71,57 @@ 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; }
 
-_highlight.default.registerLanguage('javascript', _javascript.default);
+_core.default.registerLanguage('javascript', _javascript.default);
 
-_highlight.default.registerLanguage('js', _javascript.default);
+_core.default.registerLanguage('js', _javascript.default);
 
-_highlight.default.registerLanguage('jsx', _javascript.default);
+_core.default.registerLanguage('jsx', _javascript.default);
 
-_highlight.default.registerLanguage('typescript', _typescript.default);
+_core.default.registerLanguage('typescript', _typescript.default);
 
-_highlight.default.registerLanguage('ts', _typescript.default);
+_core.default.registerLanguage('ts', _typescript.default);
 
-_highlight.default.registerLanguage('tsx', _typescript.default);
+_core.default.registerLanguage('tsx', _typescript.default);
 
-_highlight.default.registerLanguage('json', _json.default);
+_core.default.registerLanguage('json', _json.default);
 
-_highlight.default.registerLanguage('elixir', _elixir.default);
+_core.default.registerLanguage('elixir', _elixir.default);
 
-_highlight.default.registerLanguage('java', _java.default);
+_core.default.registerLanguage('java', _java.default);
 
-_highlight.default.registerLanguage('kotlin', _kotlin.default);
+_core.default.registerLanguage('kotlin', _kotlin.default);
 
-_highlight.default.registerLanguage('kt', _kotlin.default);
+_core.default.registerLanguage('kt', _kotlin.default);
 
-_highlight.default.registerLanguage('protobuf', _protobuf.default);
+_core.default.registerLanguage('protobuf', _protobuf.default);
 
-_highlight.default.registerLanguage('protobuffer', _protobuf.default);
+_core.default.registerLanguage('protobuffer', _protobuf.default);
 
-_highlight.default.registerLanguage('python', _python.default);
+_core.default.registerLanguage('python', _python.default);
 
-_highlight.default.registerLanguage('py', _python.default);
+_core.default.registerLanguage('py', _python.default);
 
-_highlight.default.registerLanguage('yaml', _yaml.default);
+_core.default.registerLanguage('yaml', _yaml.default);
 
-_highlight.default.registerLanguage('yml', _yaml.default);
+_core.default.registerLanguage('yml', _yaml.default);
 
-_highlight.default.registerLanguage('shell', _shell.default);
+_core.default.registerLanguage('shell', _shell.default);
 
-_highlight.default.registerLanguage('sh', _shell.default);
+_core.default.registerLanguage('sh', _shell.default);
 
-_highlight.default.registerLanguage('plaintext', _plaintext.default);
+_core.default.registerLanguage('plaintext', _plaintext.default);
 
-_highlight.default.registerLanguage('text', _plaintext.default);
+_core.default.registerLanguage('text', _plaintext.default);
 
-_highlight.default.registerLanguage('patch', _diff.default);
+_core.default.registerLanguage('patch', _diff.default);
 
-_highlight.default.registerLanguage('diff', _diff.default);
+_core.default.registerLanguage('diff', _diff.default);
 
-_highlight.default.registerLanguage('swift', _swift.default);
+_core.default.registerLanguage('swift', _swift.default);
 
-_highlight.default.registerLanguage('objectivec', _objectivec.default);
+_core.default.registerLanguage('objectivec', _objectivec.default);
 
-_highlight.default.registerLanguage('oc', _objectivec.default);
+_core.default.registerLanguage('oc', _objectivec.default);
 
 function CodeBlock(_ref) {
   let {
@@ -152,7 +152,7 @@ function CodeBlock(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
         className: "hljs ".concat(language),
         dangerouslySetInnerHTML: {
-          __html: _highlight.default.highlightAuto(source, [language]).value
+          __html: _core.default.highlightAuto(source, [language]).value
         }
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_IconButton.default, {

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.67",
+  "version": "2.1.70",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -48,10 +48,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "8ddd255811bd315b42695071763152e0cd489c9a",
+  "gitHead": "f8a19c44fc1814f7c191023297b38ef9af21efc6",
   "dependencies": {
-    "@arcblock/icons": "^2.1.67",
-    "@arcblock/react-hooks": "^2.1.67",
+    "@arcblock/icons": "^2.1.70",
+    "@arcblock/react-hooks": "^2.1.70",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -66,7 +66,7 @@
     "d3-geo": "^1.11.6",
     "dayjs": "^1.11.2",
     "devices.css": "^0.1.15",
-    "highlight.js": "^9.15.8",
+    "highlight.js": "^11.6.0",
     "is-svg": "^4.3.1",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.21",

package/src/CodeBlock/index.js

@@ -6,7 +6,7 @@ import Copy from 'copy-to-clipboard';
 import Button from '@mui/material/IconButton';
 import useMountedState from 'react-use/lib/useMountedState';
 
-import hljs from 'highlight.js/lib/highlight';
+import hljs from 'highlight.js/lib/core';
 import javascript from 'highlight.js/lib/languages/javascript';
 import typescript from 'highlight.js/lib/languages/typescript';
 import json from 'highlight.js/lib/languages/json';

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: {},