@blocklet/list 0.12.86 → 0.12.88

package/lib/assets/locale.js

@@ -9,6 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const en = {
   common: {
     searchStore: 'Search the store',
+    showResources: 'Show resources',
     price: 'Price',
     category: 'Category',
     resourceType: 'Resource Type',
@@ -48,6 +49,7 @@ const en = {
 const zh = {
   common: {
     searchStore: '搜索商店内应用',
+    showResources: '显示资源型应用',
     price: '价格',
     category: '类别',
     resourceType: '资源类型',

package/lib/base.js

@@ -10,6 +10,7 @@ var _material = require("@mui/material");
 var _Face = _interopRequireDefault(require("@mui/icons-material/Face"));
 var _reactErrorBoundary = require("react-error-boundary");
 var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+var _react = require("react");
 var _filter = require("./contexts/filter");
 var _customSelect = _interopRequireDefault(require("./components/custom-select"));
 var _filter2 = require("./components/filter");
@@ -18,12 +19,13 @@ 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 _showResourcesSwitch = _interopRequireDefault(require("./components/show-resources-switch"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
 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 ListBase() {
-  var _sortOptions$find, _priceOptions$find;
+  var _sortOptions$find, _priceOptions$find, _filters$keyword;
   const {
     handleDeveloper,
     blockletList,
@@ -37,6 +39,7 @@ function ListBase() {
     getCategoryLocale,
     priceOptions,
     wrapChildren,
+    showResourcesSwitch,
     baseSearch
   } = (0, _filter.useFilterContext)();
   const sortOptions = (0, _utils.getSortOptions)(t);
@@ -46,6 +49,9 @@ function ListBase() {
     resourceType
   } = filters || {};
   const priceLocale = (_priceOptions$find = priceOptions.find(price => price.value === filters.price)) === null || _priceOptions$find === void 0 ? void 0 : _priceOptions$find.name;
+  const [searchFocused, setSearchFocused] = (0, _react.useState)(false);
+  const isMobile = (0, _material.useMediaQuery)(theme => theme.breakpoints.down('md'));
+  const showFullSearch = !baseSearch || searchFocused || isMobile || (filters === null || filters === void 0 || (_filters$keyword = filters.keyword) === null || _filters$keyword === void 0 ? void 0 : _filters$keyword.length);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",
     alignItems: "flex-start",
@@ -59,17 +65,42 @@ function ListBase() {
           className: "filter-bar",
           display: "flex",
           alignItems: "center",
-          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
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
+            className: "search-form",
+            style: showFullSearch ? {
+              flex: 1,
+              width: '100%'
+            } : {},
+            onSubmit: e => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            onFocus: () => {
+              setSearchFocused(true);
+            },
+            onBlur: () => {
+              setSearchFocused(false);
+            },
+            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, {
             mt: 0,
             ml: "16px",
             className: "filter-container",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Hidden, {
+            display: "flex",
+            alignItems: "center",
+            children: [!isMobile && showResourcesSwitch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+              ml: 1,
+              mr: 1,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_showResourcesSwitch.default, {
+                t: t
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Hidden, {
               mdUp: true,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.FilterIcon, {})
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelect.default, {
@@ -123,6 +154,6 @@ function ListBase() {
     })]
   });
 }
-const StyledMin = (0, _Theme.styled)('main')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  .filter-bar {\n    justify-content: space-between;\n    margin-bottom: ", ";\n  }\n  .sort-button {\n    white-space: nowrap;\n  }\n  .bl-search-container {\n    flex: 2;\n    margin-left: 0px;\n  }\n\n  .filter-container {\n    flex: 1;\n    display: flex;\n    justify-content: flex-end;\n  }\n  @media (max-width: ", "px) {\n    .bl-search-container {\n      width: 100%;\n      margin-bottom: ", ";\n    }\n    .filter-container {\n      margin-left: 0;\n      display: flex;\n      justify-content: flex-start;\n    }\n    .filter-bar {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n  @media (max-width: ", "px) {\n    .sort-button {\n      font-size: 12px;\n    }\n  }\n"])), props => props.theme.spacing(2), props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
+const StyledMin = (0, _Theme.styled)('main')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  .filter-bar {\n    justify-content: space-between;\n    margin-bottom: ", ";\n  }\n  .sort-button {\n    white-space: nowrap;\n  }\n  .bl-search-container {\n    margin-left: 0px;\n  }\n  .filter-container {\n    display: flex;\n    justify-content: flex-end;\n  }\n  @media (max-width: ", "px) {\n    .search-form {\n      flex: 1;\n    }\n    .bl-search-container {\n      width: 100%;\n      margin-bottom: ", ";\n    }\n    .filter-container {\n      margin-left: 0;\n      display: flex;\n      justify-content: flex-start;\n    }\n    .filter-bar {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n    }\n  }\n  @media (max-width: ", "px) {\n    .sort-button {\n      font-size: 12px;\n    }\n  }\n"])), props => props.theme.spacing(2), props => props.theme.breakpoints.values.md, props => props.theme.spacing(2), props => props.theme.breakpoints.values.md);
 const FilterContainer = (0, _Theme.styled)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  z-index: 9;\n  background-color: white;\n"])));
 var _default = exports.default = ListBase;

package/lib/components/base-search.js

@@ -79,7 +79,7 @@ BaseSearch.propTypes = {
 BaseSearch.defaultProps = {
   placeholder: 'Type to search...'
 };
-const StyledSearch = (0, _Theme.styled)(_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 StyledSearch = (0, _Theme.styled)(_material.OutlinedInput)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-size: 14px;\n  border-radius: 6px;\n  width: 100%;\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, _Theme.styled)(_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, _Theme.styled)(_Close.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  cursor: pointer;\n"])), props => props.theme.palette.grey[500]);
 var _default = exports.default = BaseSearch;

package/lib/components/show-resources-switch.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Switch = _interopRequireDefault(require("@arcblock/ux/lib/Switch"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _filter = require("../contexts/filter");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ShowResourcesSwitch(_ref) {
+  let {
+    t
+  } = _ref;
+  const {
+    filters,
+    handleSwitchShowResources
+  } = (0, _filter.useFilterContext)();
+  const handleChange = () => {
+    filters.showResources = !filters.showResources;
+    handleSwitchShowResources();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, {
+    checked: filters.showResources,
+    onChange: handleChange,
+    labelProps: {
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        marginLeft: "8px",
+        fontSize: "small",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('common.showResources')
+        })
+      })
+    }
+  });
+}
+ShowResourcesSwitch.propTypes = {
+  t: _propTypes.default.func.isRequired
+};
+ShowResourcesSwitch.defaultProps = {};
+var _default = exports.default = ShowResourcesSwitch;

package/lib/contexts/filter.js

@@ -43,7 +43,8 @@ function FilterProvider(_ref) {
     baseSearch,
     serverVersion,
     storeVersion,
-    fetchCategoryDelay
+    fetchCategoryDelay,
+    showResourcesSwitch
   } = _ref;
   const requestHeaders = {};
   if (serverVersion) {
@@ -158,6 +159,7 @@ function FilterProvider(_ref) {
     priceOptions,
     storeApi,
     baseSearch,
+    showResourcesSwitch,
     hasNextPage: blockletsState.list.length < blockletsState.total,
     handleSort: sort => {
       const changeData = _objectSpread(_objectSpread({}, finalFilters), {}, {
@@ -200,6 +202,10 @@ function FilterProvider(_ref) {
       });
       onFilterChange(changeData);
     },
+    handleSwitchShowResources: () => {
+      const changeData = _objectSpread({}, finalFilters);
+      onFilterChange(changeData);
+    },
     loadMore: () => {
       _loadMore();
     },