@blocklet/list 0.8.13 → 0.8.16

package/lib/contexts/{store.js → filter.js}

@@ -3,30 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SearchConsumer = void 0;
-exports.SearchProvider = SearchProvider;
-exports.useSearchContext = useSearchContext;
+exports.FilterConsumer = void 0;
+exports.FilterProvider = FilterProvider;
+exports.useFilterContext = useFilterContext;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactRouterDom = require("react-router-dom");
-
 var _ahooks = require("ahooks");
 
-var _orderBy = _interopRequireDefault(require("lodash-es/orderBy"));
+var _orderBy = _interopRequireDefault(require("lodash/orderBy"));
 
 var _axios = _interopRequireDefault(require("axios"));
 
-var _urlJoin = _interopRequireDefault(require("url-join"));
-
-var _pageState = _interopRequireDefault(require("../hooks/page-state"));
-
-var _utils = require("../tools/utils");
+var _utils = require("../libs/utils");
 
 var _locale = _interopRequireDefault(require("../assets/locale"));
 
+var _propTypes2 = require("../libs/prop-types");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -39,34 +35,29 @@ 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 axiosInstance = _axios.default.create();
-
-const Search = /*#__PURE__*/(0, _react.createContext)({});
+const Filter = /*#__PURE__*/(0, _react.createContext)({});
 const {
   Provider,
   Consumer
-} = Search;
-exports.SearchConsumer = Consumer;
+} = Filter;
+exports.FilterConsumer = Consumer;
 
-function SearchProvider(_ref) {
+function FilterProvider(_ref) {
   let {
+    onSelectBlocklet,
+    selectedBlocklets,
+    filters,
     children,
     baseUrl,
-    type,
     endpoint,
     locale,
-    blockletRender
+    blockletRender,
+    onFilterChange
   } = _ref;
-  const {
-    location
-  } = window;
-  const history = (0, _reactRouterDom.useHistory)();
-  const pathParams = (0, _reactRouterDom.useParams)();
-  const isPageMode = type === 'page';
-
-  if (isPageMode && !baseUrl) {
-    throw new Error('baseUrl is required when type is page');
-  }
+
+  const storeApi = _axios.default.create({
+    baseURL: endpoint
+  });
 
   const {
     data: allBlocklets,
@@ -76,7 +67,7 @@ function SearchProvider(_ref) {
   } = (0, _ahooks.useRequest)(async () => {
     const {
       data: list
-    } = await axiosInstance.get((0, _urlJoin.default)(endpoint, '/api/blocklets.json'));
+    } = await storeApi.get('/api/blocklets.json');
     return list;
   }, {
     initialData: [],
@@ -90,58 +81,21 @@ function SearchProvider(_ref) {
   } = (0, _ahooks.useRequest)(async () => {
     const {
       data: list
-    } = await axiosInstance.get("".concat((0, _urlJoin.default)(endpoint, '/api/blocklets/categories')));
+    } = await storeApi.get('/api/blocklets/categories');
     return list;
   }, {
     initialData: [],
     manual: true
   });
-  const [memoryParams, setMemoryParams] = (0, _react.useState)({
-    sortBy: 'popularity',
-    sortDirection: 'desc'
-  });
-  const queryParams = (0, _react.useMemo)(() => {
-    return isPageMode ? new URLSearchParams(location.search) : new Map(Object.entries(memoryParams));
-  }, [memoryParams, location.search]);
-  let sortParams; // 当作页面使用时 sort 数据比较特殊, 默认取 localStorge 中的值，如果 url query 中有sort值则优先使用
-
-  if (isPageMode) {
-    const localSortParams = (0, _pageState.default)({
-      sort: 'popularity',
-      direction: 'desc'
-    }, baseUrl);
-    const urlSortParams = {
-      sort: queryParams.get('sortBy'),
-      direction: queryParams.get('sortDirection')
-    };
-    sortParams = urlSortParams.sort && urlSortParams.direction ? urlSortParams : localSortParams;
-  } else {
-    sortParams = (0, _react.useMemo)(() => {
-      return {
-        sort: memoryParams.sortBy,
-        direction: memoryParams.sortDirection
-      };
-    }, [memoryParams]);
-  }
-
-  const isSearchPage = location.pathname === (0, _urlJoin.default)(baseUrl, '/search');
-  const selectedCategory = (0, _react.useMemo)(() => {
-    let result = null;
-
-    if (isPageMode) {
-      result = !isSearchPage ? pathParams.category : queryParams.get('category');
-    } else {
-      result = queryParams.get('category');
-    }
-
-    return result;
-  }, [isPageMode, pathParams, queryParams]);
-  const hasDeveloperFilter = !!queryParams.get('developer');
-  const categoryState = !hasDeveloperFilter ? {
-    data: allCategories
-  } : (0, _utils.getCategories)(allBlocklets, queryParams.get('developer'));
+  const selectedCategory = filters.category;
+  const hasDeveloperFilter = !!filters.developer;
+  const categoryState = (0, _react.useMemo)(() => {
+    return !hasDeveloperFilter ? {
+      data: allCategories
+    } : (0, _utils.getCategories)(allBlocklets, filters.developer);
+  }, [hasDeveloperFilter, allCategories]);
   const blockletList = (0, _react.useMemo)(() => {
-    var _queryParams$search;
+    var _filters$keyword;
 
     const sortByName = x => {
       var _x$title, _x$name;
@@ -164,7 +118,7 @@ function SearchProvider(_ref) {
     };
     let result = allBlocklets || []; // 按照付费/免费筛选
 
-    result = (0, _utils.filterBlockletByPrice)(result, queryParams.get('price')); // 按照分类筛选
+    result = (0, _utils.filterBlockletByPrice)(result, filters.price); // 按照分类筛选
 
     result = result.filter(item => {
       var _item$category;
@@ -172,8 +126,8 @@ function SearchProvider(_ref) {
       return selectedCategory ? (item === null || item === void 0 ? void 0 : (_item$category = item.category) === null || _item$category === void 0 ? void 0 : _item$category.name) === selectedCategory : true;
     }); // 按照作者筛选
 
-    result = result.filter(item => queryParams !== null && queryParams !== void 0 && queryParams.developer ? item.owner.did === queryParams.get('developer') : true);
-    const lowerSearch = (queryParams === null || queryParams === void 0 ? void 0 : (_queryParams$search = queryParams.search) === null || _queryParams$search === void 0 ? void 0 : _queryParams$search.toLocaleLowerCase()) || ''; // 按照搜索筛选
+    result = result.filter(item => filters !== null && filters !== void 0 && filters.developer ? item.owner.did === filters.developer : true);
+    const lowerSearch = (filters === null || filters === void 0 ? void 0 : (_filters$keyword = filters.keyword) === null || _filters$keyword === void 0 ? void 0 : _filters$keyword.toLocaleLowerCase()) || ''; // 按照搜索筛选
 
     result = result.filter(item => {
       var _ref2, _item$description, _item$version;
@@ -181,8 +135,8 @@ function SearchProvider(_ref) {
       return ((_ref2 = (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.name)) === null || _ref2 === void 0 ? void 0 : _ref2.toLocaleLowerCase().includes(lowerSearch)) || ((_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.toLocaleLowerCase().includes(lowerSearch)) || (item === null || item === void 0 ? void 0 : (_item$version = item.version) === null || _item$version === void 0 ? void 0 : _item$version.toLocaleLowerCase().includes(lowerSearch));
     }); // 排序
 
-    return (0, _orderBy.default)(result, [sortMap[sortParams.sort]], [sortParams.direction]);
-  }, [allBlocklets, queryParams, sortParams]);
+    return (0, _orderBy.default)(result, [sortMap[filters.sortBy]], [filters.sortDirection]);
+  }, [allBlocklets, filters]);
   const categoryList = (0, _react.useMemo)(() => {
     const list = categoryState.data || []; // 分类按照名称排序
 
@@ -198,7 +152,7 @@ function SearchProvider(_ref) {
     return (0, _utils.replaceTranslate)(_locale.default[locale][key], data);
   };
 
-  const searchStore = {
+  const filterStore = {
     errors: {
       fetchBlockletsError,
       fetchCategoriesError
@@ -208,58 +162,67 @@ function SearchProvider(_ref) {
       fetchCategoriesLoading
     },
     endpoint,
-    sortParams,
-    history,
     blockletList,
     t: translate,
-    queryParams,
+    filters: _objectSpread({
+      sortBy: 'popularity',
+      sortDirection: 'desc'
+    }, filters),
     selectedCategory,
-    isSearchPage,
     categoryList,
-    isPageMode,
     baseUrl,
     blockletRender,
     locale,
-    handleSort: value => {
-      const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
-        sortBy: value,
-        sortDirection: value === 'nameAsc' ? 'asc' : 'desc'
+    selectedBlocklets,
+    onSelectBlocklet,
+    handleSort: sort => {
+      const changeData = _objectSpread(_objectSpread({}, filters), {}, {
+        sortBy: sort,
+        sortDirection: sort === 'nameAsc' ? 'asc' : 'desc'
       });
 
-      if (isPageMode) {
-        sortParams.sort = changData.sortBy;
-        sortParams.direction = changData.sortDirection;
-        history.push("".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
-      } else {
-        setMemoryParams(changData);
-      }
+      onFilterChange(changeData);
     },
-    handleSearchKeyword: value => {
-      const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
-        search: value || undefined
+    handleKeyword: keyWord => {
+      const changeData = _objectSpread(_objectSpread({}, filters), {}, {
+        keyword: keyWord || undefined
       });
 
-      if (isPageMode) {
-        history.push("".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
-      } else {
-        setMemoryParams(changData);
-      }
+      onFilterChange(changeData);
     },
-    handlePriceFilter: value => {
-      const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
-        price: value === queryParams.get('price') ? undefined : value
+    handlePrice: price => {
+      const changeData = _objectSpread(_objectSpread({}, filters), {}, {
+        price: price === filters.price ? undefined : price
       });
 
-      if (isPageMode) {
-        history.push("".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
+      onFilterChange(changeData);
+    },
+    handleCategory: category => {
+      if (category === 'all') {
+        const changeData = _objectSpread(_objectSpread({}, filters), {}, {
+          category: undefined
+        });
+
+        onFilterChange(changeData);
       } else {
-        setMemoryParams(changData);
+        const changeData = _objectSpread(_objectSpread({}, filters), {}, {
+          category
+        });
+
+        onFilterChange(changeData);
       }
     },
-    getCategoryLocale: name => {
-      if (!name) return null;
+    handleDeveloper: developer => {
+      const changeData = _objectSpread(_objectSpread({}, filters), {}, {
+        developer: developer || undefined
+      });
+
+      onFilterChange(changeData);
+    },
+    getCategoryLocale: category => {
+      if (!category) return null;
       let result = null;
-      const find = categoryState.data.find(item => item.name === name);
+      const find = categoryState.data.find(item => item.name === category);
 
       if (find) {
         result = find.locales[locale];
@@ -267,34 +230,11 @@ function SearchProvider(_ref) {
 
       return result;
     },
-    handleCategorySelect: value => {
-      if (value === 'all') {
-        const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
-          category: undefined
-        });
-
-        if (isPageMode) {
-          history.push(!isSearchPage ? baseUrl : "".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
-        } else {
-          setMemoryParams(changData);
-        }
-      } else {
-        const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
-          category: value
-        });
-
-        if (isPageMode) {
-          history.push(!isSearchPage ? "".concat((0, _urlJoin.default)(baseUrl, 'category', value)) : "".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
-        } else {
-          setMemoryParams(changData);
-        }
-      }
-    },
 
     get developerName() {
       var _allBlocklets$find, _allBlocklets$find$ow;
 
-      return ((_allBlocklets$find = allBlocklets.find(i => i.owner.did === queryParams.get('developer'))) === null || _allBlocklets$find === void 0 ? void 0 : (_allBlocklets$find$ow = _allBlocklets$find.owner) === null || _allBlocklets$find$ow === void 0 ? void 0 : _allBlocklets$find$ow.name) || '';
+      return ((_allBlocklets$find = allBlocklets.find(i => i.owner.did === filters.developer)) === null || _allBlocklets$find === void 0 ? void 0 : (_allBlocklets$find$ow = _allBlocklets$find.owner) === null || _allBlocklets$find$ow === void 0 ? void 0 : _allBlocklets$find$ow.name) || '';
     }
 
   };
@@ -307,30 +247,21 @@ function SearchProvider(_ref) {
     fetchBlocklets();
   }, [endpoint]);
   return /*#__PURE__*/_react.default.createElement(Provider, {
-    value: searchStore
+    value: filterStore
   }, children);
 }
 
-SearchProvider.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  baseUrl: _propTypes.default.string,
-  endpoint: _propTypes.default.string.isRequired,
-  // 组件的类型： page 单独作为页面使用 持久化数据将存储在 url 和 localstorage，select 作为选择器组件使用 数据在存储在内存中
-  type: _propTypes.default.oneOf(['select', 'page']).isRequired,
-  locale: _propTypes.default.oneOf(['zh', 'en']),
-  blockletRender: _propTypes.default.func.isRequired
-};
-SearchProvider.defaultProps = {
-  baseUrl: null,
-  locale: 'zh'
-};
-
-function useSearchContext() {
-  const searchStore = (0, _react.useContext)(Search);
-
-  if (!searchStore) {
+FilterProvider.propTypes = _objectSpread(_objectSpread({}, _propTypes2.propTypes), {}, {
+  children: _propTypes.default.any.isRequired
+});
+FilterProvider.defaultProps = _propTypes2.defaultProps;
+
+function useFilterContext() {
+  const filterStore = (0, _react.useContext)(Filter);
+
+  if (!filterStore) {
     return {};
   }
 
-  return searchStore;
+  return filterStore;
 }

package/lib/index.js

@@ -7,27 +7,17 @@ exports.default = BlockletList;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _base = _interopRequireDefault(require("./base"));
 
-var _store = require("./contexts/store");
+var _filter = require("./contexts/filter");
+
+var _propTypes = require("./libs/prop-types");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function BlockletList(props) {
-  return /*#__PURE__*/_react.default.createElement(_store.SearchProvider, props, /*#__PURE__*/_react.default.createElement(_base.default, null));
+  return /*#__PURE__*/_react.default.createElement(_filter.FilterProvider, props, /*#__PURE__*/_react.default.createElement(_base.default, null));
 }
 
-BlockletList.propTypes = {
-  baseUrl: _propTypes.default.string,
-  endpoint: _propTypes.default.string.isRequired,
-  // 组件的类型： page 单独作为页面使用 持久化数据将存储在 url 和 localstorage，select 作为选择器组件使用 数据在存储在内存中
-  type: _propTypes.default.oneOf(['select', 'page']).isRequired,
-  locale: _propTypes.default.oneOf(['zh', 'en']),
-  blockletRender: _propTypes.default.func.isRequired
-};
-BlockletList.defaultProps = {
-  baseUrl: null,
-  locale: 'zh'
-};
+BlockletList.propTypes = _propTypes.propTypes;
+BlockletList.defaultProps = _propTypes.defaultProps;

package/lib/libs/prop-types.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const propTypes = {
+  filters: _propTypes.default.shape({
+    keyword: _propTypes.default.string,
+    sortBy: _propTypes.default.string,
+    sortDirection: _propTypes.default.string,
+    price: _propTypes.default.string,
+    category: _propTypes.default.string,
+    developer: _propTypes.default.string
+  }),
+  endpoint: _propTypes.default.string.isRequired,
+  blockletRender: _propTypes.default.func.isRequired,
+  onFilterChange: _propTypes.default.func,
+  baseUrl: _propTypes.default.string,
+  locale: _propTypes.default.oneOf(['zh', 'en'])
+};
+exports.propTypes = propTypes;
+const defaultProps = {
+  baseUrl: null,
+  locale: 'zh',
+  filters: {},
+  onFilterChange: () => {}
+};
+exports.defaultProps = defaultProps;

package/lib/{tools → libs}/utils.js

@@ -7,7 +7,7 @@ exports.urlStringify = exports.replaceTranslate = exports.removeUndefined = expo
 
 var _urlJoin = _interopRequireDefault(require("url-join"));
 
-var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -127,13 +127,13 @@ template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] :
 exports.replaceTranslate = replaceTranslate;
 
 const removeUndefined = obj => {
-  const innerObj = (0, _cloneDeep.default)(obj);
-  Object.keys(innerObj).forEach(key => {
-    if (innerObj[key] === undefined) {
-      delete innerObj[key];
+  const clone = (0, _cloneDeep.default)(obj);
+  Object.keys(clone).forEach(key => {
+    if (clone[key] === undefined) {
+      delete clone[key];
     }
   });
-  return innerObj;
+  return clone;
 };
 
 exports.removeUndefined = removeUndefined;

package/package.json

@@ -1,66 +1,62 @@
 {
-    "name": "@blocklet/list",
-    "version": "0.8.13",
-    "description": "Common ux components of blocklet",
-    "publishConfig": {
-        "access": "public"
-    },
-    "author": "machao <machao@arcblock.io>",
-    "homepage": "https://github.com/blocklet/blocklet-store#readme",
-    "license": "ISC",
-    "main": "lib/index.js",
-    "files": [
-        "lib",
-        "src",
-        "LICENSE",
-        "package.json",
-        "README.md"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git@github.com:blocklet/blocklet-store.git"
-    },
-    "scripts": {
-        "lint": "eslint src",
-        "build": "rm -rf lib && babel src --out-dir lib --copy-files",
-        "watch": "babel src --out-dir lib -w --copy-files",
-        "precommit": "CI=1 yarn test",
-        "prepush": "CI=1 yarn test",
-        "prepublish": "npm run build"
-    },
-    "bugs": {
-        "url": "https://github.com/blocklet/blocklet-store/issues"
-    },
-    "peerDependencies": {
-        "react": ">=16.12.0"
-    },
-    "dependencies": {
-        "@arcblock/ux": "^2.1.3",
-        "@emotion/react": "^11.9.0",
-        "@emotion/styled": "^11.8.1",
-        "@mui/icons-material": "^5.6.2",
-        "@mui/material": "^5.7.0",
-        "@mui/styles": "^5.7.0",
-        "ahooks": "^2.10.12",
-        "axios": "^0.27.2",
-        "flat": "^5.0.2",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "mdi-material-ui": "^7.3.0",
-        "prop-types": "^15.7.2",
-        "qs": "^6.10.2",
-        "react-router-dom": "^5.3.0",
-        "styled-components": "5.3.5",
-        "url-join": "^4.0.1"
-    },
-    "devDependencies": {
-        "@babel/cli": "^7.8.4",
-        "@babel/core": "^7.8.4",
-        "@babel/preset-env": "^7.8.4",
-        "@babel/preset-react": "^7.8.3",
-        "@emotion/babel-plugin": "^11.9.2",
-        "babel-plugin-inline-react-svg": "^2.0.1",
-        "babel-plugin-styled-components": "^1.10.7"
-    },
-    "gitHead": "966ec885a8c7a68eb84be25bd138be696f3b09f4"
+  "name": "@blocklet/list",
+  "version": "0.8.16",
+  "description": "Common ux components of blocklet",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "machao <machao@arcblock.io>",
+  "homepage": "https://github.com/blocklet/blocklet-store#readme",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "src",
+    "LICENSE",
+    "package.json",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:blocklet/blocklet-store.git"
+  },
+  "scripts": {
+    "lint": "eslint src",
+    "build": "rm -rf lib && babel src --out-dir lib --copy-files",
+    "watch": "babel src --out-dir lib -w --copy-files",
+    "precommit": "CI=1 yarn test",
+    "prepush": "CI=1 yarn test",
+    "prepublish": "npm run build"
+  },
+  "bugs": {
+    "url": "https://github.com/blocklet/blocklet-store/issues"
+  },
+  "peerDependencies": {
+    "@mui/material": ">=5.6.4",
+    "@mui/styles": ">=5.6.2",
+    "react": ">=18.1.0"
+  },
+  "dependencies": {
+    "@arcblock/ux": "^2.1.3",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "ahooks": "^2.10.12",
+    "axios": "^0.27.2",
+    "flat": "^5.0.2",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.7.2",
+    "styled-components": "5.3.5",
+    "url-join": "^4.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.8.3",
+    "@emotion/babel-plugin": "^11.9.2",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "babel-plugin-styled-components": "^1.10.7"
+  },
+  "gitHead": "5f5a20003947fadab688b32a18ba38826d8c3369"
 }