@blocklet/list 0.9.8 → 0.9.11

package/lib/base.js

@@ -128,9 +128,7 @@ function ListBase() {
   });
 }
 
-const StyledMin = _styled.default.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  .filter-bar {\n    justify-content: space-between;\n    margin-bottom: ", ";\n  }\n  .sort-button {\n    white-space: nowrap;\n  }\n  .search-container {\n    flex: 2;\n    margin-left: 0px;\n  }\n\n  .filter-container {\n    flex: 1;\n    display: flex;\n    justify-content: flex-end;\n  }\n  @media (max-width: ", "px) {\n    .search-container {\n      width: 100%;\n      margin-bottom: ", ";\n    }\n    .filter-container {\n      margin-left: 0;\n      display: flex;\n      justify-content: flex-start;\n    }\n    .filter-bar {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n  @media (max-width: ", "px) {\n    .sort-button {\n      font-size: 12px;\n    }\n  }\n"])), props => {
-  return props.theme.spacing(2);
-}, props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
+const StyledMin = _styled.default.main(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  .filter-bar {\n    justify-content: space-between;\n    margin-bottom: ", ";\n  }\n  .sort-button {\n    white-space: nowrap;\n  }\n  .bl-search-container {\n    flex: 2;\n    margin-left: 0px;\n  }\n\n  .filter-container {\n    flex: 1;\n    display: flex;\n    justify-content: flex-end;\n  }\n  @media (max-width: ", "px) {\n    .bl-search-container {\n      width: 100%;\n      margin-bottom: ", ";\n    }\n    .filter-container {\n      margin-left: 0;\n      display: flex;\n      justify-content: flex-start;\n    }\n    .filter-bar {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n  @media (max-width: ", "px) {\n    .sort-button {\n      font-size: 12px;\n    }\n  }\n"])), props => props.theme.spacing(2), props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
 
 const FilterContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  z-index: 9;\n  background-color: white;\n"])));
 

package/lib/components/autocomplete/index.js

@@ -19,12 +19,12 @@ var _urlJoin = _interopRequireDefault(require("url-join"));
 
 var _constant = _interopRequireDefault(require("../../libs/constant"));
 
+var _utils = require("../../libs/utils");
+
 var _filter = require("../../contexts/filter");
 
 var _item = _interopRequireDefault(require("./item"));
 
-require("@algolia/autocomplete-theme-classic");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,8 +35,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const cachePool = new Map();
-
 function Autocomplete() {
   const containerRef = (0, _react.useRef)(null);
   const panelRootRef = (0, _react.useRef)(null);
@@ -50,22 +48,11 @@ function Autocomplete() {
   } = (0, _filter.useFilterContext)();
   const muiTheme = (0, _styles.useTheme)();
   const getResults = (0, _react.useCallback)(async params => {
-    const key = JSON.stringify(params);
-    const target = cachePool.get(key);
-    if (target) return target.data;
     const {
       data
     } = await storeApi.get(_constant.default.blockletsPath, {
       params
     });
-
-    if (cachePool.size > _constant.default.cacheSize) {
-      cachePool.clear();
-    }
-
-    cachePool.set(key, {
-      data: data.dataList
-    });
     return data.dataList || [];
   }, [storeApi]);
 
@@ -109,9 +96,11 @@ function Autocomplete() {
       },
 
       classNames: {
-        panel: 'blocklet-list-panel',
-        label: 'blocklet-list-label',
-        form: 'blocklet-list-form'
+        panel: 'bl-autocomplete-panel',
+        label: 'bl-autocomplete-label',
+        form: 'bl-autocomplete-form',
+        input: 'bl-autocomplete-input',
+        clearButton: 'bl-autocomplete-clear'
       },
       placeholder: t('common.searchStore'),
       initialState: {
@@ -132,7 +121,7 @@ function Autocomplete() {
           keyword: query
         });
 
-        return [{
+        return (0, _utils.debounced)([{
           sourceId: 'blocklets',
 
           getItems() {
@@ -180,11 +169,11 @@ function Autocomplete() {
             },
 
             noResults() {
-              return 'No results.';
+              return t('blocklet.noResults');
             }
 
           }
-        }];
+        }]);
       }
 
     });
@@ -193,7 +182,7 @@ function Autocomplete() {
     };
   }, [endpoint, filters, getResults, muiTheme, onReset, onSubmit, t]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "search-container",
+    className: "bl-search-container",
     ref: containerRef
   });
 }

package/lib/index.js

@@ -17,7 +17,7 @@ var _propTypes = require("./libs/prop-types");
 
 var _utils = require("./libs/utils");
 
-require("@algolia/autocomplete-theme-classic");
+require("@algolia/autocomplete-theme-classic/dist/theme.css");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -37,7 +37,7 @@ function BlockletList(props) {
   const muiTheme = (0, _styles.useTheme)();
   const primaryColor = (0, _utils.toColorRgb)(muiTheme.palette.primary.main);
   const globalStyles = {
-    autocomplete: theme => (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      :root {\n        --aa-detached-media-query: (max-width: ", "px) !important;\n        --aa-detached-modal-media-query: (min-width: ", "px) !important;\n        --aa-detached-modal-max-width: ", "px !important;\n        --aa-selected-color-rgb: ", ", ", ", ", " !important;\n        --aa-primary-color-rgb: ", ", ", ", ", " !important;\n        --aa-input-background-color-rgb: 250, 250, 250 !important;\n      }\n      .blocklet-list-panel {\n        z-index: ", " !important;\n      }\n      .blocklet-list-label {\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n      .blocklet-list-form {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !important;\n        }\n      }\n      .aa-DetachedSearchButton {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !important;\n        }\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n    "])), theme.breakpoints.values.md, theme.breakpoints.values.md, theme.breakpoints.values.md, primaryColor.r, primaryColor.g, primaryColor.b, primaryColor.r, primaryColor.g, primaryColor.b, theme.zIndex.modal + 1, theme.palette.grey[500], theme.palette.grey[500])
+    autocomplete: theme => (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      :root {\n        --aa-detached-media-query: (max-width: ", "px) !important;\n        --aa-detached-modal-media-query: (min-width: ", "px) !important;\n        --aa-detached-modal-max-width: ", "px !important;\n        --aa-selected-color-rgb: ", ", ", ", ", " !important;\n        --aa-primary-color-rgb: ", ", ", ", ", " !important;\n        --aa-input-background-color-rgb: 250, 250, 250 !important;\n      }\n      .bl-autocomplete-panel {\n        z-index: ", " !important;\n      }\n      .bl-autocomplete-label {\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n      .bl-autocomplete-form {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !important;\n        }\n      }\n      .aa-DetachedSearchButton {\n        border: none !important;\n        &:focus-within {\n          box-shadow: none !important;\n        }\n        .aa-SubmitIcon {\n          color: ", " !important;\n        }\n      }\n    "])), theme.breakpoints.values.md, theme.breakpoints.values.md, theme.breakpoints.values.md, primaryColor.r, primaryColor.g, primaryColor.b, primaryColor.r, primaryColor.g, primaryColor.b, theme.zIndex.modal + 1, theme.palette.grey[500], theme.palette.grey[500])
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_filter.FilterProvider, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Global, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.9.8",
+  "version": "0.9.11",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
     "@algolia/autocomplete-theme-classic": "^1.7.1",
-    "@arcblock/ux": "^2.4.0",
+    "@arcblock/ux": "^2.4.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.8.4",
@@ -65,8 +65,8 @@
     "@babel/preset-react": "^7.18.6",
     "@emotion/babel-plugin": "^11.10.0",
     "babel-plugin-inline-react-svg": "^2.0.1",
-    "eslint": "^8.21.0",
+    "eslint": "^8.22.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "ba3bddff0fbbcf7f9a79c9a346dcf1810c0435fc"
+  "gitHead": "816aadb1ee96d04ab7a0752d8c41a2da5238d333"
 }

package/src/base.js

@@ -96,14 +96,12 @@ const StyledMin = styled.main`
   height: 100%;
   .filter-bar {
     justify-content: space-between;
-    margin-bottom: ${(props) => {
-      return props.theme.spacing(2);
-    }};
+    margin-bottom: ${(props) => props.theme.spacing(2)};
   }
   .sort-button {
     white-space: nowrap;
   }
-  .search-container {
+  .bl-search-container {
     flex: 2;
     margin-left: 0px;
   }
@@ -114,7 +112,7 @@ const StyledMin = styled.main`
     justify-content: flex-end;
   }
   @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
-    .search-container {
+    .bl-search-container {
       width: 100%;
       margin-bottom: ${(props) => props.theme.spacing(2)};
     }

package/src/components/autocomplete/index.js

@@ -7,13 +7,10 @@ import { ThemeProvider as MuiThemeProvider, useTheme } from '@mui/material/style
 import joinUrl from 'url-join';
 
 import constant from '../../libs/constant';
+import { debounced } from '../../libs/utils';
 import { useFilterContext } from '../../contexts/filter';
 import Blocklet from './item';
 
-import '@algolia/autocomplete-theme-classic';
-
-const cachePool = new Map();
-
 export default function Autocomplete() {
   const containerRef = useRef(null);
   const panelRootRef = useRef(null);
@@ -23,20 +20,8 @@ export default function Autocomplete() {
 
   const getResults = useCallback(
     async (params) => {
-      const key = JSON.stringify(params);
-      const target = cachePool.get(key);
-
-      if (target) return target.data;
-
       const { data } = await storeApi.get(constant.blockletsPath, { params });
 
-      if (cachePool.size > constant.cacheSize) {
-        cachePool.clear();
-      }
-
-      cachePool.set(key, {
-        data: data.dataList,
-      });
       return data.dataList || [];
     },
     [storeApi]
@@ -74,9 +59,11 @@ export default function Autocomplete() {
         panelRootRef.current.render(children);
       },
       classNames: {
-        panel: 'blocklet-list-panel',
-        label: 'blocklet-list-label',
-        form: 'blocklet-list-form',
+        panel: 'bl-autocomplete-panel',
+        label: 'bl-autocomplete-label',
+        form: 'bl-autocomplete-form',
+        input: 'bl-autocomplete-input',
+        clearButton: 'bl-autocomplete-clear',
       },
       placeholder: t('common.searchStore'),
       initialState: {
@@ -92,7 +79,7 @@ export default function Autocomplete() {
           pageSize: 10,
           keyword: query,
         };
-        return [
+        return debounced([
           {
             sourceId: 'blocklets',
             getItems() {
@@ -127,11 +114,11 @@ export default function Autocomplete() {
                 );
               },
               noResults() {
-                return 'No results.';
+                return t('blocklet.noResults');
               },
             },
           },
-        ];
+        ]);
       },
     });
 
@@ -140,5 +127,5 @@ export default function Autocomplete() {
     };
   }, [endpoint, filters, getResults, muiTheme, onReset, onSubmit, t]);
 
-  return <div className="search-container" ref={containerRef} />;
+  return <div className="bl-search-container" ref={containerRef} />;
 }

package/src/index.js

@@ -4,8 +4,8 @@ import SelectBase from './base';
 import { FilterProvider } from './contexts/filter';
 import { propTypes, defaultProps } from './libs/prop-types';
 import { toColorRgb } from './libs/utils';
-
-import '@algolia/autocomplete-theme-classic';
+// 不知道为什么引入 theme.min.css 话，blocklet-store 打包就会报错
+import '@algolia/autocomplete-theme-classic/dist/theme.css';
 
 export default function BlockletList(props) {
   const muiTheme = useTheme();
@@ -21,15 +21,15 @@ export default function BlockletList(props) {
         --aa-primary-color-rgb: ${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b} !important;
         --aa-input-background-color-rgb: 250, 250, 250 !important;
       }
-      .blocklet-list-panel {
+      .bl-autocomplete-panel {
         z-index: ${theme.zIndex.modal + 1} !important;
       }
-      .blocklet-list-label {
+      .bl-autocomplete-label {
         .aa-SubmitIcon {
           color: ${theme.palette.grey[500]} !important;
         }
       }
-      .blocklet-list-form {
+      .bl-autocomplete-form {
         border: none !important;
         &:focus-within {
           box-shadow: none !important;