@blocklet/list 0.10.33 → 0.10.34

package/lib/base.js

@@ -16,6 +16,7 @@ var _filter2 = require("./components/filter");
 var _utils = require("./libs/utils");
 var _list = _interopRequireDefault(require("./components/list"));
 var _aside = _interopRequireDefault(require("./components/aside"));
+var _baseSearch = _interopRequireDefault(require("./components/base-search"));
 var _autocomplete = _interopRequireDefault(require("./components/autocomplete"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
@@ -35,7 +36,8 @@ function ListBase() {
     t,
     getCategoryLocale,
     priceOptions,
-    wrapChildren
+    wrapChildren,
+    baseSearch
   } = (0, _filter.useFilterContext)();
   const sortOptions = (0, _utils.getSortOptions)(t);
   const sortLocale = ((_sortOptions$find = sortOptions.find(f => f.value === filters.sortBy)) === null || _sortOptions$find === void 0 ? void 0 : _sortOptions$find.name) || t('sort.sort');
@@ -54,7 +56,10 @@ function ListBase() {
           className: "filter-bar",
           display: "flex",
           alignItems: "center",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_autocomplete.default, {
+          children: [baseSearch ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseSearch.default, {
+            className: "bl-search-container",
+            placeholder: t('common.searchStore')
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_autocomplete.default, {
             onSelect: handleSearchSelect,
             wrapChildren: wrapChildren
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {

package/lib/components/base-search.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _filter = require("../contexts/filter");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+const _excluded = ["placeholder"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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 BaseSearch(_ref) {
+  let {
+      placeholder
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    filters,
+    handleKeyword
+  } = (0, _filter.useFilterContext)();
+  const [searchStr, setSearchStr] = (0, _react.useState)(filters.keyword || '');
+  const debouncedSearch = (0, _ahooks.useDebounceFn)(handleKeyword, {
+    wait: 300
+  });
+  const handleChange = event => {
+    const {
+      value
+    } = event.target;
+    setSearchStr(value);
+    debouncedSearch.run(value);
+  };
+  const handleClose = () => {
+    setSearchStr('');
+    handleKeyword();
+  };
+  (0, _react.useEffect)(() => {
+    setSearchStr(filters.keyword || '');
+  }, [filters.keyword]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearch, _objectSpread({
+    inputProps: {
+      'data-cy': 'search-blocklet'
+    },
+    startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+      position: "start",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearchIcon, {})
+    }),
+    onChange: handleChange,
+    placeholder: placeholder,
+    value: searchStr,
+    title: placeholder,
+    "data-cy": "search",
+    endAdornment: searchStr && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+      position: "end",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCloseIcon, {
+        "data-cy": "search-delete",
+        onClick: handleClose
+      })
+    })
+  }, rest));
+}
+BaseSearch.propTypes = {
+  placeholder: _propTypes.default.string
+};
+BaseSearch.defaultProps = {
+  placeholder: 'Type to search...'
+};
+const StyledSearch = (0, _styled.default)(_material.OutlinedInput)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: 14px;\n  border-radius: 6px;\n  .MuiInputBase-input {\n    padding: 8px 0 8px 10px;\n  }\n  .MuiOutlinedInput-notchedOutline {\n    border: none;\n  }\n  .Mui-focused {\n    background-color: #f6f6f6;\n    .MuiInputBase-input::placeholder {\n      color: transparent;\n    }\n  }\n"])), props => props.theme.palette.grey[50]);
+const StyledSearchIcon = (0, _styled.default)(_Search.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  @media (max-width: ", "px) {\n    font-size: 24px;\n  }\n"])), props => props.theme.palette.grey[500], props => props.theme.breakpoints.values.md);
+const StyledCloseIcon = (0, _styled.default)(_Close.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  cursor: pointer;\n"])), props => props.theme.palette.grey[500]);
+var _default = BaseSearch;
+exports.default = _default;

package/lib/contexts/filter.js

@@ -36,7 +36,8 @@ function FilterProvider(_ref) {
     onFilterChange,
     onSearchSelect,
     extraFilter,
-    wrapChildren
+    wrapChildren,
+    baseSearch
   } = _ref;
   const storeApi = (0, _react.useMemo)(() => {
     return _axios.default.create({
@@ -140,6 +141,7 @@ function FilterProvider(_ref) {
     categoryOptions,
     priceOptions,
     storeApi,
+    baseSearch,
     hasNextPage: blockletsState.list.length < blockletsState.total,
     handleSort: sort => {
       const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {

package/lib/libs/prop-types.js

@@ -21,7 +21,8 @@ const propTypes = {
   blockletRender: _propTypes.default.func.isRequired,
   onFilterChange: _propTypes.default.func,
   onSearchSelect: _propTypes.default.func,
-  locale: _propTypes.default.oneOf(['zh', 'en'])
+  locale: _propTypes.default.oneOf(['zh', 'en']),
+  baseSearch: _propTypes.default.bool
 };
 exports.propTypes = propTypes;
 const defaultProps = {
@@ -35,6 +36,7 @@ const defaultProps = {
     window.location.href = detailUrl;
   },
   wrapChildren: children => children,
-  extraFilter: list => list
+  extraFilter: list => list,
+  baseSearch: false
 };
 exports.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.10.33",
+  "version": "0.10.34",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -47,7 +47,6 @@
     "@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": "d5fb6c10f6e9920d854d5116bc089e63b3260b7f"
+  "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 };