@blocklet/list 0.8.43 → 0.8.46

package/lib/components/custom-select/custom-select.js

@@ -15,21 +15,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _material = require("@mui/material");
 
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-
 var _KeyboardArrowDown = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowDown"));
 
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
 var _button = _interopRequireDefault(require("./button"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["title", "value", "icon", "prepend", "options", "multiple", "onClose", "onShow", "onChange", "onInput", "itemRender"];
+const _excluded = ["title", "value", "icon", "prepend", "options", "onChange", "itemRender"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,62 +44,37 @@ function CustomSelect(_ref) {
     icon,
     prepend,
     options,
-    multiple,
-    onClose,
-    onShow,
     onChange,
-    onInput,
     itemRender
   } = _ref,
       buttonProps = _objectWithoutProperties(_ref, _excluded);
 
   const anchorRef = (0, _react.useRef)(null);
   const theme = (0, _useTheme.default)();
-  const [open, setOpen] = (0, _react.useState)(false); // eslint-disable-next-line no-nested-ternary
-
-  const [currentValue, setCurrentValue] = (0, _react.useState)(value !== null ? value : multiple ? [] : '');
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [currentValue, setCurrentValue] = (0, _react.useState)(value !== null ? value : '');
   const isSm = (0, _material.useMediaQuery)(theme.breakpoints.down('sm'));
   (0, _react.useEffect)(() => {
-    // eslint-disable-next-line no-nested-ternary
-    setCurrentValue(value !== null ? value : multiple ? [] : '');
+    setCurrentValue(value !== null ? value : '');
   }, [value]);
-
-  function closeMenu() {
-    (0, _isEqual.default)(value, currentValue) || onInput(currentValue);
-    onClose();
+  const closeMenu = (0, _react.useCallback)(() => {
     setOpen(false);
-  }
-
-  function openMenu() {
+  }, []);
+  const openMenu = (0, _react.useCallback)(() => {
     setOpen(true);
-    onShow();
-  }
+  }, []);
 
   function toggle(option) {
-    if (multiple) {
-      const copyValue = (0, _cloneDeep.default)(currentValue);
-      const index = copyValue.indexOf(option.value);
-
-      if (index >= 0) {
-        copyValue.splice(index, 1);
-      } else {
-        copyValue.push(option.value);
-      }
+    setCurrentValue(option.value);
+    onChange(option.value);
 
-      setCurrentValue(copyValue);
-      onChange(copyValue);
-    } else {
-      setCurrentValue(option.value);
-      onChange(option.value);
-
-      if (isSm) {
-        closeMenu();
-      }
+    if (isSm) {
+      closeMenu();
     }
   }
 
   function containsValue(optionValue) {
-    return multiple ? currentValue.includes(optionValue) : optionValue === currentValue;
+    return optionValue === currentValue;
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -119,7 +88,7 @@ function CustomSelect(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "my-select__icon",
         children: icon
-      }), title, multiple && currentValue.length > 1 && " (".concat(currentValue.length, ")"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
+      }), title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
         className: "my-select__arrowdown",
         component: _KeyboardArrowDown.default,
         fontSize: "small"
@@ -152,13 +121,10 @@ function CustomSelect(_ref) {
                     return itemRender(option);
                   }
 
-                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
                     onClick: () => toggle(option),
                     className: ['my-select__option', containsValue(option.value) ? 'my-select__option--active' : ''].join(' '),
-                    children: [multiple && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
-                      component: _Check.default,
-                      className: ['my-select__option__icon', containsValue(option.value) ? 'my-select__option__icon--active' : ''].join(' ')
-                    }), option.name]
+                    children: option.name
                   }, option.value);
                 })]
               })
@@ -172,11 +138,7 @@ function CustomSelect(_ref) {
 
 CustomSelect.propTypes = {
   options: _propTypes.default.array.isRequired,
-  multiple: _propTypes.default.bool,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
-  onShow: _propTypes.default.func,
-  onClose: _propTypes.default.func,
-  onInput: _propTypes.default.func,
   onChange: _propTypes.default.func,
   itemRender: _propTypes.default.func,
   title: _propTypes.default.string.isRequired,
@@ -184,14 +146,10 @@ CustomSelect.propTypes = {
   prepend: _propTypes.default.any
 };
 CustomSelect.defaultProps = {
-  multiple: false,
   value: null,
   icon: null,
   prepend: null,
   itemRender: null,
-  onShow: () => {},
-  onClose: () => {},
-  onInput: () => {},
   onChange: () => {}
 };
 const StyledButton = (0, _styledComponents.default)(_button.default).withConfig({

package/lib/contexts/filter.js

@@ -99,7 +99,8 @@ function FilterProvider(_ref) {
     currentPage: 1,
     pageSize: (0, _utils.isMobileScreen)() ? 10 : 18,
     defaultCurrentPage: 1
-  });
+  }); // TODO: 这里如果用 useMemo 包裹，滚动分页会异常
+  // eslint-disable-next-line react-hooks/exhaustive-deps
 
   const finalFilters = _objectSpread({
     sortBy: 'popularity',
@@ -113,7 +114,7 @@ function FilterProvider(_ref) {
     return !hasDeveloperFilter ? {
       data: allCategories
     } : (0, _utils.getCategoriesByAuthor)(allBlocklets, finalFilters.developer);
-  }, [hasDeveloperFilter, allCategories, allBlocklets]);
+  }, [hasDeveloperFilter, allCategories, allBlocklets, finalFilters.developer]);
   const blockletList = (0, _react.useMemo)(() => {
     var _finalFilters$keyword;
 
@@ -158,7 +159,7 @@ function FilterProvider(_ref) {
     blocklets = extraFilter(blocklets); // 排序
 
     return (0, _orderBy.default)(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
-  }, [allBlocklets, finalFilters]);
+  }, [allBlocklets, finalFilters, selectedCategory, extraFilter]);
   const finalBlockletList = (0, _react.useMemo)(() => {
     // 前端分页 currentPage 当前页数  pageSize 每页条数
     return blockletList.slice((paginateState.defaultCurrentPage - 1) * paginateState.pageSize, paginateState.currentPage * paginateState.pageSize);
@@ -281,11 +282,12 @@ function FilterProvider(_ref) {
   (0, _react.useEffect)(() => {
     if (!hasDeveloperFilter) {
       fetchCategories();
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [hasDeveloperFilter]);
   (0, _react.useEffect)(() => {
     fetchBlocklets();
-    fetchCategories();
+    fetchCategories(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [endpoint]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
     value: filterStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.43",
+  "version": "0.8.46",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -38,7 +38,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.37",
+    "@arcblock/ux": "^2.1.38",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -64,5 +64,5 @@
     "eslint": "^8.16.0",
     "prettier": "^2.6.2"
   },
-  "gitHead": "092de42814fb2c3930edba71145f4e7a634e8cd0"
+  "gitHead": "caf5f978210ea33249edd11182d5b1898ac2b732"
 }

package/src/components/custom-select/custom-select.js

@@ -1,74 +1,41 @@
 /* eslint-disable no-unused-expressions */
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import useTheme from '@mui/styles/useTheme';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { ClickAwayListener, Grow, MenuItem, MenuList, Paper, Popper, SvgIcon, useMediaQuery } from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import cloneDeep from 'lodash/cloneDeep';
 import isEmpty from 'lodash/isEmpty';
-import isEqual from 'lodash/isEqual';
 
 import Button from './button';
 
-function CustomSelect({
-  title,
-  value,
-  icon,
-  prepend,
-  options,
-  multiple,
-  onClose,
-  onShow,
-  onChange,
-  onInput,
-  itemRender,
-  ...buttonProps
-}) {
+function CustomSelect({ title, value, icon, prepend, options, onChange, itemRender, ...buttonProps }) {
   const anchorRef = useRef(null);
   const theme = useTheme();
   const [open, setOpen] = useState(false);
-  // eslint-disable-next-line no-nested-ternary
-  const [currentValue, setCurrentValue] = useState(value !== null ? value : multiple ? [] : '');
+  const [currentValue, setCurrentValue] = useState(value !== null ? value : '');
   const isSm = useMediaQuery(theme.breakpoints.down('sm'));
 
   useEffect(() => {
-    // eslint-disable-next-line no-nested-ternary
-    setCurrentValue(value !== null ? value : multiple ? [] : '');
+    setCurrentValue(value !== null ? value : '');
   }, [value]);
 
-  function closeMenu() {
-    isEqual(value, currentValue) || onInput(currentValue);
-    onClose();
+  const closeMenu = useCallback(() => {
     setOpen(false);
-  }
-  function openMenu() {
+  }, []);
+  const openMenu = useCallback(() => {
     setOpen(true);
-    onShow();
-  }
+  }, []);
 
   function toggle(option) {
-    if (multiple) {
-      const copyValue = cloneDeep(currentValue);
-      const index = copyValue.indexOf(option.value);
-      if (index >= 0) {
-        copyValue.splice(index, 1);
-      } else {
-        copyValue.push(option.value);
-      }
-      setCurrentValue(copyValue);
-      onChange(copyValue);
-    } else {
-      setCurrentValue(option.value);
-      onChange(option.value);
-      if (isSm) {
-        closeMenu();
-      }
+    setCurrentValue(option.value);
+    onChange(option.value);
+    if (isSm) {
+      closeMenu();
     }
   }
   function containsValue(optionValue) {
-    return multiple ? currentValue.includes(optionValue) : optionValue === currentValue;
+    return optionValue === currentValue;
   }
 
   return (
@@ -82,7 +49,6 @@ function CustomSelect({
         {...buttonProps}>
         <div className="my-select__icon">{icon}</div>
         {title}
-        {multiple && currentValue.length > 1 && ` (${currentValue.length})`}
         <SvgIcon className="my-select__arrowdown" component={KeyboardArrowDownIcon} fontSize="small" />
       </StyledButton>
       <Popper open={open} anchorEl={anchorRef.current} transition style={{ zIndex: '9999' }}>
@@ -106,15 +72,6 @@ function CustomSelect({
                           'my-select__option',
                           containsValue(option.value) ? 'my-select__option--active' : '',
                         ].join(' ')}>
-                        {multiple && (
-                          <SvgIcon
-                            component={CheckIcon}
-                            className={[
-                              'my-select__option__icon',
-                              containsValue(option.value) ? 'my-select__option__icon--active' : '',
-                            ].join(' ')}
-                          />
-                        )}
                         {option.name}
                       </MenuItem>
                     );
@@ -131,11 +88,7 @@ function CustomSelect({
 
 CustomSelect.propTypes = {
   options: PropTypes.array.isRequired,
-  multiple: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
-  onShow: PropTypes.func,
-  onClose: PropTypes.func,
-  onInput: PropTypes.func,
   onChange: PropTypes.func,
   itemRender: PropTypes.func,
   title: PropTypes.string.isRequired,
@@ -143,14 +96,10 @@ CustomSelect.propTypes = {
   prepend: PropTypes.any,
 };
 CustomSelect.defaultProps = {
-  multiple: false,
   value: null,
   icon: null,
   prepend: null,
   itemRender: null,
-  onShow: () => {},
-  onClose: () => {},
-  onInput: () => {},
   onChange: () => {},
 };
 

package/src/contexts/filter.js

@@ -55,13 +55,16 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
   );
 
   const paginateState = useReactive({ currentPage: 1, pageSize: isMobileScreen() ? 10 : 18, defaultCurrentPage: 1 });
+  // TODO: 这里如果用 useMemo 包裹，滚动分页会异常
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const finalFilters = { sortBy: 'popularity', sortDirection: 'desc', ...filters };
+
   const selectedCategory = finalFilters.category;
   const hasDeveloperFilter = !!finalFilters.developer;
   const categoryState = useMemo(() => {
     // 当按作者过滤时，需要从所有blocklets中找出属于作者的分类
     return !hasDeveloperFilter ? { data: allCategories } : getCategoriesByAuthor(allBlocklets, finalFilters.developer);
-  }, [hasDeveloperFilter, allCategories, allBlocklets]);
+  }, [hasDeveloperFilter, allCategories, allBlocklets, finalFilters.developer]);
 
   const blockletList = useMemo(() => {
     const sortByName = (x) => x?.title?.toLocaleLowerCase() || x?.name?.toLocaleLowerCase(); // 按名称排序
@@ -95,7 +98,7 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     blocklets = extraFilter(blocklets);
     // 排序
     return orderBy(blocklets, [sortMap[finalFilters.sortBy]], [finalFilters.sortDirection]);
-  }, [allBlocklets, finalFilters]);
+  }, [allBlocklets, finalFilters, selectedCategory, extraFilter]);
 
   const finalBlockletList = useMemo(() => {
     // 前端分页 currentPage 当前页数  pageSize 每页条数
@@ -197,11 +200,13 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     if (!hasDeveloperFilter) {
       fetchCategories();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasDeveloperFilter]);
 
   useEffect(() => {
     fetchBlocklets();
     fetchCategories();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [endpoint]);
 
   return <Provider value={filterStore}>{children}</Provider>;