@blocklet/list 0.9.18 → 0.9.19

package/lib/base.js

@@ -50,6 +50,7 @@ function ListBase() {
     handleSort,
     handleCategory,
     handlePrice,
+    handleSearchSelect,
     t,
     getCategoryLocale,
     priceOptions
@@ -71,7 +72,9 @@ function ListBase() {
           className: "filter-bar",
           display: "flex",
           alignItems: "center",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_autocomplete.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_autocomplete.default, {
+            onSelect: handleSearchSelect
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
             mt: 0,
             ml: "16px",
             className: "filter-container",

package/lib/components/autocomplete/index.js

@@ -7,6 +7,8 @@ exports.default = Autocomplete;
 
 var _react = require("react");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _client = require("react-dom/client");
 
 var _autocompleteJs = require("@algolia/autocomplete-js");
@@ -35,7 +37,10 @@ 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; }
 
-function Autocomplete() {
+function Autocomplete(_ref) {
+  let {
+    onSelect
+  } = _ref;
   const containerRef = (0, _react.useRef)(null);
   const panelRootRef = (0, _react.useRef)(null);
   const rootRef = (0, _react.useRef)(null);
@@ -65,11 +70,6 @@ function Autocomplete() {
 
     return blockletDetail;
   }, [endpoint, serverUrl]);
-
-  const onClickItem = detailUrl => {
-    window.location.href = detailUrl;
-  };
-
   const onSubmit = (0, _react.useCallback)(e => {
     handleKeyword(e.state.query);
   }, [handleKeyword]);
@@ -89,10 +89,10 @@ function Autocomplete() {
         render: () => {}
       },
 
-      render(_ref, root) {
+      render(_ref2, root) {
         let {
           children
-        } = _ref;
+        } = _ref2;
 
         if (!panelRootRef.current || rootRef.current !== root) {
           var _panelRootRef$current;
@@ -119,10 +119,10 @@ function Autocomplete() {
       onSubmit,
       onReset,
 
-      getSources(_ref2) {
+      getSources(_ref3) {
         let {
           query
-        } = _ref2;
+        } = _ref3;
 
         const params = _objectSpread(_objectSpread({}, filters), {}, {
           sortBy: _constant.default[filters.sortBy],
@@ -139,29 +139,31 @@ function Autocomplete() {
           },
 
           // 选中后填充 搜索框中值
-          getItemInputValue(_ref3) {
+          getItemInputValue(_ref4) {
             let {
               item
-            } = _ref3;
+            } = _ref4;
             return item.title;
           },
 
-          getItemUrl(_ref4) {
+          onSelect(_ref5) {
             let {
               item
-            } = _ref4;
-            const blockletDetail = getBlockletDetail(item);
-            return blockletDetail;
+            } = _ref5;
+            onSelect({
+              blocklet: item,
+              detailUrl: getBlockletDetail(item),
+              storeUrl: endpoint
+            });
           },
 
           templates: {
             // eslint-disable-next-line react/no-unstable-nested-components
-            item(_ref5) {
+            item(_ref6) {
               let {
                 item
-              } = _ref5;
+              } = _ref6;
               const logoUrl = item.logo ? (0, _urlJoin.default)(endpoint, 'assets', item.did, item.logo) : null;
-              const blockletDetail = getBlockletDetail(item);
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
                 theme: muiTheme,
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
@@ -171,8 +173,7 @@ function Autocomplete() {
                     title: (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.name),
                     did: item.did,
                     description: item.description,
-                    cover: logoUrl,
-                    onMainClick: () => onClickItem(blockletDetail)
+                    cover: logoUrl
                   })
                 })
               });
@@ -190,9 +191,13 @@ function Autocomplete() {
     return () => {
       search.destroy();
     };
-  }, [endpoint, filters, getBlockletDetail, getResults, muiTheme, onReset, onSubmit, t]);
+  }, [endpoint, filters, getBlockletDetail, getResults, muiTheme, onReset, onSubmit, onSelect, t]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "bl-search-container",
     ref: containerRef
   });
-}
+}
+
+Autocomplete.propTypes = {
+  onSelect: _propTypes.default.func.isRequired
+};

package/lib/components/autocomplete/item.js

@@ -17,7 +17,7 @@ var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar")
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["cover", "onMainClick", "item", "className"];
+const _excluded = ["cover", "item", "className"];
 
 var _templateObject;
 
@@ -40,46 +40,22 @@ const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTem
 function Blocklet(_ref) {
   let {
     cover,
-    onMainClick,
     item,
     className
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const wrapHandler = function wrapHandler(handler) {
-    let stopFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => false;
-    return function (e) {
-      if (stopFn()) {
-        e.preventDefault();
-        e.stopPropagation();
-      } else if (handler instanceof Function) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
-        }
-
-        handler(...args);
-      }
-    };
-  };
-
-  const _onMainClick = wrapHandler(onMainClick);
-
   const {
     did,
     description,
     title,
     name
   } = item;
-  const blockletTitle = title || name;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, _objectSpread(_objectSpread({
     className: "".concat(className, " arcblock-blocklet")
   }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "arcblock-blocklet__content",
-      onClick: _onMainClick,
       children: [cover ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "arcblock-blocklet__cover",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
@@ -103,7 +79,7 @@ function Blocklet(_ref) {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShowAttributes, {
               item: item,
               attribute: "title",
-              value: blockletTitle
+              value: title || name
             })
           }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
             component: "div",
@@ -124,13 +100,11 @@ function Blocklet(_ref) {
 
 Blocklet.propTypes = {
   cover: _propTypes.default.string,
-  onMainClick: _propTypes.default.func,
   className: _propTypes.default.string,
   item: _propTypes.default.object.isRequired
 };
 Blocklet.defaultProps = {
   cover: null,
-  onMainClick: null,
   className: null
 };
 
@@ -140,13 +114,17 @@ function ShowAttributes(_ref2) {
     attribute,
     value
   } = _ref2;
-  // eslint-disable-next-line react/no-danger
-  if (item._formatted) return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    "data-cy": "bl-autocomplete-item",
-    dangerouslySetInnerHTML: {
-      __html: item._formatted[attribute]
-    }
-  });
+
+  if (item._formatted) {
+    // eslint-disable-next-line react/no-danger
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      "data-cy": "bl-autocomplete-item",
+      dangerouslySetInnerHTML: {
+        __html: item._formatted[attribute]
+      }
+    });
+  }
+
   return value;
 }
 

package/lib/contexts/filter.js

@@ -50,6 +50,7 @@ function FilterProvider(_ref) {
     locale,
     blockletRender,
     onFilterChange,
+    onSearchSelect,
     extraFilter,
     serverUrl
   } = _ref;
@@ -114,7 +115,7 @@ function FilterProvider(_ref) {
     const {
       data
     } = await storeApi.get(_constant.default.categoriesPath);
-    return data;
+    return Array.isArray(data) ? data : [];
   }, {
     initialData: []
   });
@@ -239,8 +240,9 @@ function FilterProvider(_ref) {
 
         return (blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$owner = blocklet.owner) === null || _blocklet$owner === void 0 ? void 0 : _blocklet$owner.did) === finalFilters.owner;
       })) === null || _blocklets$find === void 0 ? void 0 : (_blocklets$find$owner = _blocklets$find.owner) === null || _blocklets$find$owner === void 0 ? void 0 : _blocklets$find$owner.name) || '';
-    }
+    },
 
+    handleSearchSelect: onSearchSelect
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
     value: filterStore,

package/lib/libs/prop-types.js

@@ -22,6 +22,7 @@ const propTypes = {
   endpoint: _propTypes.default.string.isRequired,
   blockletRender: _propTypes.default.func.isRequired,
   onFilterChange: _propTypes.default.func,
+  onSearchSelect: _propTypes.default.func,
   locale: _propTypes.default.oneOf(['zh', 'en']),
   serverUrl: _propTypes.default.string
 };
@@ -30,6 +31,12 @@ const defaultProps = {
   locale: 'zh',
   filters: {},
   onFilterChange: () => {},
+  onSearchSelect: _ref => {
+    let {
+      detailUrl
+    } = _ref;
+    window.location.href = detailUrl;
+  },
   extraFilter: list => list,
   serverUrl: null
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.9.18",
+  "version": "0.9.19",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,5 @@
     "eslint": "^8.22.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "9147762302b31773e57a6ee2d569e346b4aa6a36"
+  "gitHead": "c166d6de848c0c1eecf38a65360ca75a56a8a020"
 }

package/src/base.js

@@ -21,6 +21,7 @@ function ListBase() {
     handleSort,
     handleCategory,
     handlePrice,
+    handleSearchSelect,
     t,
     getCategoryLocale,
     priceOptions,
@@ -38,7 +39,7 @@ function ListBase() {
       <StyledMin>
         <FilterContainer>
           <Box className="filter-bar" display="flex" alignItems="center">
-            <Autocomplete />
+            <Autocomplete onSelect={handleSearchSelect} />
             <Box mt={0} ml="16px" className="filter-container">
               <Hidden mdUp>
                 {/* 小屏幕下类别 */}

package/src/components/autocomplete/index.js

@@ -1,4 +1,5 @@
 import { createElement, Fragment, useEffect, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import { createRoot } from 'react-dom/client';
 import { autocomplete } from '@algolia/autocomplete-js';
 
@@ -11,7 +12,7 @@ import { debounced } from '../../libs/utils';
 import { useFilterContext } from '../../contexts/filter';
 import Blocklet from './item';
 
-export default function Autocomplete() {
+export default function Autocomplete({ onSelect }) {
   const containerRef = useRef(null);
   const panelRootRef = useRef(null);
   const rootRef = useRef(null);
@@ -38,9 +39,6 @@ export default function Autocomplete() {
     [endpoint, serverUrl]
   );
 
-  const onClickItem = (detailUrl) => {
-    window.location.href = detailUrl;
-  };
   const onSubmit = useCallback(
     (e) => {
       handleKeyword(e.state.query);
@@ -100,15 +98,13 @@ export default function Autocomplete() {
             getItemInputValue({ item }) {
               return item.title;
             },
-            getItemUrl({ item }) {
-              const blockletDetail = getBlockletDetail(item);
-              return blockletDetail;
+            onSelect({ item }) {
+              onSelect({ blocklet: item, detailUrl: getBlockletDetail(item), storeUrl: endpoint });
             },
             templates: {
               // eslint-disable-next-line react/no-unstable-nested-components
               item({ item }) {
                 const logoUrl = item.logo ? joinUrl(endpoint, 'assets', item.did, item.logo) : null;
-                const blockletDetail = getBlockletDetail(item);
                 return (
                   <MuiThemeProvider theme={muiTheme}>
                     <EmotionThemeProvider theme={muiTheme}>
@@ -118,7 +114,6 @@ export default function Autocomplete() {
                         did={item.did}
                         description={item.description}
                         cover={logoUrl}
-                        onMainClick={() => onClickItem(blockletDetail)}
                       />
                     </EmotionThemeProvider>
                   </MuiThemeProvider>
@@ -136,7 +131,11 @@ export default function Autocomplete() {
     return () => {
       search.destroy();
     };
-  }, [endpoint, filters, getBlockletDetail, getResults, muiTheme, onReset, onSubmit, t]);
+  }, [endpoint, filters, getBlockletDetail, getResults, muiTheme, onReset, onSubmit, onSelect, t]);
 
   return <div className="bl-search-container" ref={containerRef} />;
 }
+
+Autocomplete.propTypes = {
+  onSelect: PropTypes.func.isRequired,
+};

package/src/components/autocomplete/item.js

@@ -60,26 +60,12 @@ const Div = styled.div`
   }
 `;
 
-export default function Blocklet({ cover, onMainClick, item, className, ...rest }) {
-  const wrapHandler =
-    (handler, stopFn = () => false) =>
-    (e, ...args) => {
-      if (stopFn()) {
-        e.preventDefault();
-        e.stopPropagation();
-      } else if (handler instanceof Function) {
-        e.preventDefault();
-        e.stopPropagation();
-        handler(...args);
-      }
-    };
-  const _onMainClick = wrapHandler(onMainClick);
+export default function Blocklet({ cover, item, className, ...rest }) {
   const { did, description, title, name } = item;
-  const blockletTitle = title || name;
 
   return (
     <Div className={`${className} arcblock-blocklet`} {...rest}>
-      <div className="arcblock-blocklet__content" onClick={_onMainClick}>
+      <div className="arcblock-blocklet__content">
         {cover ? (
           <div className="arcblock-blocklet__cover">
             <Img src={cover} />
@@ -94,7 +80,7 @@ export default function Blocklet({ cover, onMainClick, item, className, ...rest
         <div className="arcblock-blocklet__info">
           <div className="arcblock-blocklet__text">
             <Typography component="h3" variant="h3" className="arcblock-blocklet__title" title={title}>
-              <ShowAttributes item={item} attribute="title" value={blockletTitle} />
+              <ShowAttributes item={item} attribute="title" value={title || name} />
             </Typography>
             {description && (
               <Typography component="div" variant="body2" className="arcblock-blocklet__describe" title={description}>
@@ -110,21 +96,21 @@ export default function Blocklet({ cover, onMainClick, item, className, ...rest
 
 Blocklet.propTypes = {
   cover: PropTypes.string,
-  onMainClick: PropTypes.func,
   className: PropTypes.string,
   item: PropTypes.object.isRequired,
 };
 
 Blocklet.defaultProps = {
   cover: null,
-  onMainClick: null,
   className: null,
 };
 
 function ShowAttributes({ item, attribute, value }) {
-  // eslint-disable-next-line react/no-danger
-  if (item._formatted)
+  if (item._formatted) {
+    // eslint-disable-next-line react/no-danger
     return <span data-cy="bl-autocomplete-item" dangerouslySetInnerHTML={{ __html: item._formatted[attribute] }} />;
+  }
+
   return value;
 }
 ShowAttributes.propTypes = {

package/src/contexts/filter.js

@@ -18,6 +18,7 @@ function FilterProvider({
   locale,
   blockletRender,
   onFilterChange,
+  onSearchSelect,
   extraFilter,
   serverUrl,
 }) {
@@ -72,7 +73,7 @@ function FilterProvider({
   } = useRequest(
     async () => {
       const { data } = await storeApi.get(constant.categoriesPath);
-      return data;
+      return Array.isArray(data) ? data : [];
     },
     { initialData: [] }
   );
@@ -169,6 +170,7 @@ function FilterProvider({
       const blocklets = blockletList;
       return blocklets.find((blocklet) => blocklet?.owner?.did === finalFilters.owner)?.owner?.name || '';
     },
+    handleSearchSelect: onSearchSelect,
   };
 
   return <Provider value={filterStore}>{children}</Provider>;

package/src/libs/prop-types.js

@@ -13,6 +13,7 @@ const propTypes = {
   endpoint: PropTypes.string.isRequired,
   blockletRender: PropTypes.func.isRequired,
   onFilterChange: PropTypes.func,
+  onSearchSelect: PropTypes.func,
   locale: PropTypes.oneOf(['zh', 'en']),
   serverUrl: PropTypes.string,
 };
@@ -21,6 +22,9 @@ const defaultProps = {
   locale: 'zh',
   filters: {},
   onFilterChange: () => {},
+  onSearchSelect: ({ detailUrl }) => {
+    window.location.href = detailUrl;
+  },
   extraFilter: (list) => list,
   serverUrl: null,
 };