@blocklet/list 0.9.13 → 0.9.14

package/lib/components/autocomplete/index.js

@@ -44,7 +44,8 @@ function Autocomplete() {
     filters,
     endpoint,
     handleKeyword,
-    t
+    t,
+    serverUrl
   } = (0, _filter.useFilterContext)();
   const muiTheme = (0, _styles.useTheme)();
   const getResults = (0, _react.useCallback)(async params => {
@@ -55,6 +56,15 @@ function Autocomplete() {
     });
     return data.dataList || [];
   }, [storeApi]);
+  const getBlockletDetail = (0, _react.useCallback)(item => {
+    const blockletDetail = new URL((0, _urlJoin.default)(endpoint, "/blocklets/".concat(item.did)));
+
+    if (serverUrl) {
+      blockletDetail.searchParams.set('server-url', serverUrl);
+    }
+
+    return blockletDetail.href;
+  }, [endpoint, serverUrl]);
 
   const onClickItem = detailUrl => {
     window.location.href = detailUrl;
@@ -140,8 +150,8 @@ function Autocomplete() {
             let {
               item
             } = _ref4;
-            const detailUrl = (0, _urlJoin.default)(endpoint, 'blocklets', item.did);
-            return detailUrl;
+            const blockletDetail = getBlockletDetail(item);
+            return blockletDetail;
           },
 
           templates: {
@@ -151,7 +161,7 @@ function Autocomplete() {
                 item
               } = _ref5;
               const logoUrl = item.logo ? (0, _urlJoin.default)(endpoint, 'assets', item.did, item.logo) : null;
-              const detailUrl = (0, _urlJoin.default)(endpoint, 'blocklets', item.did);
+              const blockletDetail = getBlockletDetail(item);
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
                 theme: muiTheme,
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ThemeProvider, {
@@ -162,7 +172,7 @@ function Autocomplete() {
                     did: item.did,
                     description: item.description,
                     cover: logoUrl,
-                    onMainClick: () => onClickItem(detailUrl)
+                    onMainClick: () => onClickItem(blockletDetail)
                   })
                 })
               });
@@ -180,7 +190,7 @@ function Autocomplete() {
     return () => {
       search.destroy();
     };
-  }, [endpoint, filters, getResults, muiTheme, onReset, onSubmit, t]);
+  }, [endpoint, filters, getBlockletDetail, getResults, muiTheme, onReset, onSubmit, t]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "bl-search-container",
     ref: containerRef

package/lib/contexts/filter.js

@@ -50,7 +50,8 @@ function FilterProvider(_ref) {
     locale,
     blockletRender,
     onFilterChange,
-    extraFilter
+    extraFilter,
+    serverUrl
   } = _ref;
 
   const storeApi = _axios.default.create({
@@ -161,6 +162,7 @@ function FilterProvider(_ref) {
     categoryOptions,
     priceOptions,
     storeApi,
+    serverUrl,
     hasNextPage: blockletsState.list.length < blockletsState.total,
     handleSort: sort => {
       const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {

package/lib/libs/prop-types.js

@@ -22,13 +22,15 @@ const propTypes = {
   endpoint: _propTypes.default.string.isRequired,
   blockletRender: _propTypes.default.func.isRequired,
   onFilterChange: _propTypes.default.func,
-  locale: _propTypes.default.oneOf(['zh', 'en'])
+  locale: _propTypes.default.oneOf(['zh', 'en']),
+  serverUrl: _propTypes.default.string
 };
 exports.propTypes = propTypes;
 const defaultProps = {
   locale: 'zh',
   filters: {},
   onFilterChange: () => {},
-  extraFilter: list => list
+  extraFilter: list => list,
+  serverUrl: null
 };
 exports.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,5 @@
     "eslint": "^8.22.0",
     "prettier": "^2.7.1"
   },
-  "gitHead": "625cc8ef455af7575db51b29292db626e5cfd9ad"
+  "gitHead": "40d7cadfadce2b34158e5bf1c14d7504fae82d46"
 }

package/src/components/autocomplete/index.js

@@ -15,7 +15,7 @@ export default function Autocomplete() {
   const containerRef = useRef(null);
   const panelRootRef = useRef(null);
   const rootRef = useRef(null);
-  const { storeApi, filters, endpoint, handleKeyword, t } = useFilterContext();
+  const { storeApi, filters, endpoint, handleKeyword, t, serverUrl } = useFilterContext();
   const muiTheme = useTheme();
 
   const getResults = useCallback(
@@ -27,6 +27,17 @@ export default function Autocomplete() {
     [storeApi]
   );
 
+  const getBlockletDetail = useCallback(
+    (item) => {
+      const blockletDetail = new URL(joinUrl(endpoint, `/blocklets/${item.did}`));
+      if (serverUrl) {
+        blockletDetail.searchParams.set('server-url', serverUrl);
+      }
+      return blockletDetail.href;
+    },
+    [endpoint, serverUrl]
+  );
+
   const onClickItem = (detailUrl) => {
     window.location.href = detailUrl;
   };
@@ -90,14 +101,14 @@ export default function Autocomplete() {
               return item.title;
             },
             getItemUrl({ item }) {
-              const detailUrl = joinUrl(endpoint, 'blocklets', item.did);
-              return detailUrl;
+              const blockletDetail = getBlockletDetail(item);
+              return blockletDetail;
             },
             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 detailUrl = joinUrl(endpoint, 'blocklets', item.did);
+                const blockletDetail = getBlockletDetail(item);
                 return (
                   <MuiThemeProvider theme={muiTheme}>
                     <EmotionThemeProvider theme={muiTheme}>
@@ -107,7 +118,7 @@ export default function Autocomplete() {
                         did={item.did}
                         description={item.description}
                         cover={logoUrl}
-                        onMainClick={() => onClickItem(detailUrl)}
+                        onMainClick={() => onClickItem(blockletDetail)}
                       />
                     </EmotionThemeProvider>
                   </MuiThemeProvider>
@@ -125,7 +136,7 @@ export default function Autocomplete() {
     return () => {
       search.destroy();
     };
-  }, [endpoint, filters, getResults, muiTheme, onReset, onSubmit, t]);
+  }, [endpoint, filters, getBlockletDetail, getResults, muiTheme, onReset, onSubmit, t]);
 
   return <div className="bl-search-container" ref={containerRef} />;
 }

package/src/contexts/filter.js

@@ -11,7 +11,16 @@ import constant from '../libs/constant';
 const Filter = createContext({});
 const { Provider, Consumer } = Filter;
 
-function FilterProvider({ filters, children, endpoint, locale, blockletRender, onFilterChange, extraFilter }) {
+function FilterProvider({
+  filters,
+  children,
+  endpoint,
+  locale,
+  blockletRender,
+  onFilterChange,
+  extraFilter,
+  serverUrl,
+}) {
   const storeApi = axios.create({
     baseURL: endpoint,
   });
@@ -105,6 +114,7 @@ function FilterProvider({ filters, children, endpoint, locale, blockletRender, o
     categoryOptions,
     priceOptions,
     storeApi,
+    serverUrl,
     hasNextPage: blockletsState.list.length < blockletsState.total,
     handleSort: (sort) => {
       const changeData = {

package/src/libs/prop-types.js

@@ -14,6 +14,7 @@ const propTypes = {
   blockletRender: PropTypes.func.isRequired,
   onFilterChange: PropTypes.func,
   locale: PropTypes.oneOf(['zh', 'en']),
+  serverUrl: PropTypes.string,
 };
 
 const defaultProps = {
@@ -21,6 +22,7 @@ const defaultProps = {
   filters: {},
   onFilterChange: () => {},
   extraFilter: (list) => list,
+  serverUrl: null,
 };
 
 export { propTypes, defaultProps };