@blocklet/list 0.10.32 → 0.10.34

package/lib/libs/utils.js

@@ -4,24 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.urlStringify = exports.toColorRgb = exports.replaceTranslate = exports.removeUndefined = exports.isMobileScreen = exports.getStoreDetail = exports.getSortOptions = exports.getPrices = exports.getCurrentPage = exports.getCategoryOptions = exports.formatLogoPath = exports.formatError = exports.filterBlockletByPrice = exports.debounced = void 0;
-
 var _urlJoin = _interopRequireDefault(require("url-join"));
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _color = _interopRequireDefault(require("color"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const isFreeBlocklet = blocklet => {
   if (!blocklet.payment) {
     return true;
   }
-
   const priceList = (blocklet.payment.price || []).map(x => x.value || 0);
   return priceList.every(x => x === 0);
 };
-
 const getSortOptions = t => {
   return [{
     name: t('sort.popularity'),
@@ -37,9 +30,7 @@ const getSortOptions = t => {
     value: 'nameDesc'
   }];
 };
-
 exports.getSortOptions = getSortOptions;
-
 const getPrices = t => {
   return [{
     name: t('blocklet.free'),
@@ -49,9 +40,7 @@ const getPrices = t => {
     value: 'payment'
   }];
 };
-
 exports.getPrices = getPrices;
-
 const getCategoryOptions = function getCategoryOptions() {
   let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
@@ -60,66 +49,50 @@ const getCategoryOptions = function getCategoryOptions() {
     value: item._id
   }));
 };
+
 /**
  * 根据 是否付费 过滤 blocklet list
  * @param {*} list
  * @param {*} price
  * @returns
  */
-
-
 exports.getCategoryOptions = getCategoryOptions;
-
 const filterBlockletByPrice = function filterBlockletByPrice() {
   let list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let price = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let result = list;
   if (!price) return result;
-
   if (price === 'free') {
     result = list.filter(blocklet => isFreeBlocklet(blocklet));
   } else {
     result = list.filter(blocklet => !isFreeBlocklet(blocklet));
   }
-
   return result;
 };
-
 exports.filterBlockletByPrice = filterBlockletByPrice;
-
 const formatError = error => {
   if (Array.isArray(error.errors)) {
     return error.errors.map(x => x.message).join('\n');
   }
-
   return error.message;
 };
-
 exports.formatError = formatError;
-
 const getStoreDetail = (storeUrl, blocklet) => {
   return (0, _urlJoin.default)(storeUrl, "/blocklets/".concat(blocklet.did));
 };
-
 exports.getStoreDetail = getStoreDetail;
-
 const formatLogoPath = function formatLogoPath(did, asset) {
   let target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'assets';
-
   if (asset.startsWith(target)) {
     return asset;
   }
-
   return "".concat(target, "/").concat(did, "/").concat(asset);
 };
-
 exports.formatLogoPath = formatLogoPath;
-
-const replaceTranslate = (template, data) => // eslint-disable-next-line no-prototype-builtins
+const replaceTranslate = (template, data) =>
+// eslint-disable-next-line no-prototype-builtins
 template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
-
 exports.replaceTranslate = replaceTranslate;
-
 const removeUndefined = obj => {
   const clone = (0, _cloneDeep.default)(obj);
   Object.keys(clone).forEach(key => {
@@ -129,56 +102,42 @@ const removeUndefined = obj => {
   });
   return clone;
 };
-
 exports.removeUndefined = removeUndefined;
-
 const urlStringify = obj => {
   if (!obj) {
     throw new Error('obj is required in urlStringify ');
   }
-
   return new URLSearchParams(removeUndefined(obj)).toString();
 };
-
 exports.urlStringify = urlStringify;
-
 const isMobileScreen = () => {
   return window.innerWidth <= 600;
 };
-
 exports.isMobileScreen = isMobileScreen;
-
 const getCurrentPage = (length, pageSize) => {
   const page = (length + pageSize) / pageSize;
   if (page > 1) return page.toFixed();
   return 1;
 };
-
 exports.getCurrentPage = getCurrentPage;
-
 const toColorRgb = colorStr => {
   const color = (0, _color.default)(colorStr);
   return color.rgb().object();
 };
-
 exports.toColorRgb = toColorRgb;
-
 function debouncePromise(fn, time) {
   let timerId;
   return function debounced() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     if (timerId) {
       clearTimeout(timerId);
     }
-
     return new Promise(resolve => {
       timerId = setTimeout(() => resolve(fn(...args)), time);
     });
   };
 }
-
 const debounced = debouncePromise(items => Promise.resolve(items), 300);
 exports.debounced = debounced;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.10.32",
+  "version": "0.10.34",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -42,12 +42,11 @@
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
     "@algolia/autocomplete-theme-classic": "^1.7.1",
-    "@arcblock/ux": "^2.4.49",
+    "@arcblock/ux": "^2.4.52",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.8.4",
     "ahooks": "^3.7.0",
-    "algoliasearch": "^4.14.2",
     "axios": "^0.27.2",
     "color": "^4.2.3",
     "flat": "^5.0.2",
@@ -71,5 +70,5 @@
     "eslint": "^8.22.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "175ef1a333106105733fe3ac8d222a54fac91b8a"
+  "gitHead": "a937d5fcacee474b9f024440587a94975f8c0361"
 }

package/src/base.js

@@ -11,6 +11,7 @@ import { CustomChip, FilterIcon } from './components/filter';
 import { getSortOptions } from './libs/utils';
 import BlockletList from './components/list';
 import Aside from './components/aside';
+import BaseSearch from './components/base-search';
 import Autocomplete from './components/autocomplete';
 
 function ListBase() {
@@ -27,6 +28,7 @@ function ListBase() {
     getCategoryLocale,
     priceOptions,
     wrapChildren,
+    baseSearch,
   } = useFilterContext();
   const sortOptions = getSortOptions(t);
   const sortLocale = sortOptions.find((f) => f.value === filters.sortBy)?.name || t('sort.sort');
@@ -40,7 +42,12 @@ function ListBase() {
       <StyledMin>
         <FilterContainer>
           <Box className="filter-bar" display="flex" alignItems="center">
-            <Autocomplete onSelect={handleSearchSelect} wrapChildren={wrapChildren} />
+            {/* see: https://github.com/blocklet/blocklet-store/pull/852 */}
+            {baseSearch ? (
+              <BaseSearch className="bl-search-container" placeholder={t('common.searchStore')} />
+            ) : (
+              <Autocomplete onSelect={handleSearchSelect} wrapChildren={wrapChildren} />
+            )}
             <Box mt={0} ml="16px" className="filter-container">
               <Hidden mdUp>
                 {/* 小屏幕下类别 */}

package/src/components/base-search.js

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import SearchIcon from '@mui/icons-material/Search';
+import CloseIcon from '@mui/icons-material/Close';
+import { OutlinedInput, InputAdornment } from '@mui/material';
+import { useDebounceFn } from 'ahooks';
+import styled from '@emotion/styled';
+
+import { useFilterContext } from '../contexts/filter';
+
+function BaseSearch({ placeholder, ...rest }) {
+  const { filters, handleKeyword } = useFilterContext();
+  const [searchStr, setSearchStr] = useState(filters.keyword || '');
+
+  const debouncedSearch = useDebounceFn(handleKeyword, { wait: 300 });
+  const handleChange = (event) => {
+    const { value } = event.target;
+    setSearchStr(value);
+    debouncedSearch.run(value);
+  };
+  const handleClose = () => {
+    setSearchStr('');
+    handleKeyword();
+  };
+  useEffect(() => {
+    setSearchStr(filters.keyword || '');
+  }, [filters.keyword]);
+
+  return (
+    <StyledSearch
+      inputProps={{
+        'data-cy': 'search-blocklet',
+      }}
+      startAdornment={
+        <InputAdornment position="start">
+          <StyledSearchIcon />
+        </InputAdornment>
+      }
+      onChange={handleChange}
+      placeholder={placeholder}
+      value={searchStr}
+      title={placeholder}
+      data-cy="search"
+      endAdornment={
+        searchStr && (
+          <InputAdornment position="end">
+            <StyledCloseIcon data-cy="search-delete" onClick={handleClose} />
+          </InputAdornment>
+        )
+      }
+      {...rest}
+    />
+  );
+}
+BaseSearch.propTypes = {
+  placeholder: PropTypes.string,
+};
+BaseSearch.defaultProps = {
+  placeholder: 'Type to search...',
+};
+const StyledSearch = styled(OutlinedInput)`
+  background-color: ${(props) => props.theme.palette.grey[50]};
+  font-size: 14px;
+  border-radius: 6px;
+  .MuiInputBase-input {
+    padding: 8px 0 8px 10px;
+  }
+  .MuiOutlinedInput-notchedOutline {
+    border: none;
+  }
+  .Mui-focused {
+    background-color: #f6f6f6;
+    .MuiInputBase-input::placeholder {
+      color: transparent;
+    }
+  }
+`;
+
+const StyledSearchIcon = styled(SearchIcon)`
+  color: ${(props) => props.theme.palette.grey[500]};
+  font-size: 28px;
+  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
+    font-size: 24px;
+  }
+`;
+
+const StyledCloseIcon = styled(CloseIcon)`
+  color: ${(props) => props.theme.palette.grey[500]};
+  font-size: 16px;
+  cursor: pointer;
+`;
+
+export default BaseSearch;

package/src/contexts/filter.js

@@ -21,6 +21,7 @@ function FilterProvider({
   onSearchSelect,
   extraFilter,
   wrapChildren,
+  baseSearch,
 }) {
   const storeApi = useMemo(() => {
     return axios.create({
@@ -118,6 +119,7 @@ function FilterProvider({
     categoryOptions,
     priceOptions,
     storeApi,
+    baseSearch,
     hasNextPage: blockletsState.list.length < blockletsState.total,
     handleSort: (sort) => {
       const changeData = {

package/src/libs/prop-types.js

@@ -16,6 +16,7 @@ const propTypes = {
   onFilterChange: PropTypes.func,
   onSearchSelect: PropTypes.func,
   locale: PropTypes.oneOf(['zh', 'en']),
+  baseSearch: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -27,6 +28,7 @@ const defaultProps = {
   },
   wrapChildren: (children) => children,
   extraFilter: (list) => list,
+  baseSearch: false,
 };
 
 export { propTypes, defaultProps };