@blocklet/list 0.8.6

package/lib/components/empty.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoResultsTips = exports.NoResults = exports.EmptyTitle = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+
+var _store = require("../contexts/store");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const NoResults = () => {
+  const searchStore = (0, _store.useSearchContext)();
+  const {
+    t
+  } = searchStore;
+  return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    style: {
+      textAlign: 'center'
+    },
+    variant: "subtitle2"
+  }, t('blocklet.noResults'));
+};
+
+exports.NoResults = NoResults;
+
+const NoResultsTips = _ref => {
+  let {
+    filterTip,
+    keywordTip
+  } = _ref;
+  const searchStore = (0, _store.useSearchContext)();
+  const {
+    t,
+    locale
+  } = searchStore;
+
+  const getSplit = () => {
+    if (locale === 'zh') return '、';
+    return ' , ';
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    className: "tips"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginRight: '16px'
+    }
+  }, t('blocklet.emptyTip')), filterTip && /*#__PURE__*/_react.default.createElement("span", null, t('blocklet.filterTip')), filterTip && keywordTip && getSplit(), keywordTip && /*#__PURE__*/_react.default.createElement("span", null, t('blocklet.keywordTip')));
+};
+
+exports.NoResultsTips = NoResultsTips;
+NoResultsTips.propTypes = {
+  filterTip: _propTypes.default.bool,
+  keywordTip: _propTypes.default.bool
+};
+NoResultsTips.defaultProps = {
+  filterTip: false,
+  keywordTip: false
+};
+
+const EmptyTitle = _ref2 => {
+  let {
+    primaryStart,
+    primaryEnd,
+    search
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "subtitle2"
+  }, /*#__PURE__*/_react.default.createElement("span", null, primaryStart), /*#__PURE__*/_react.default.createElement("span", {
+    className: "primary"
+  }, " ", search, " "), /*#__PURE__*/_react.default.createElement("span", null, primaryEnd, " "));
+};
+
+exports.EmptyTitle = EmptyTitle;
+EmptyTitle.propTypes = {
+  primaryStart: _propTypes.default.string.isRequired,
+  primaryEnd: _propTypes.default.string.isRequired,
+  search: _propTypes.default.string.isRequired
+};

package/lib/components/filter-author.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _material = require("@mui/material");
+
+var _Face = _interopRequireDefault(require("@mui/icons-material/Face"));
+
+var _store = require("../contexts/store");
+
+const _excluded = ["user", "deleteUserTag"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
+
+const StyleDiv = _styledComponents.default.div.withConfig({
+  displayName: "filter-author__StyleDiv",
+  componentId: "sc-hnnc9f-0"
+})([".MuiChip-root{border-radius:4px;height:initial;text-transform:capitalize;}"]);
+
+const FilterAuthor = _ref => {
+  let {
+    user,
+    deleteUserTag
+  } = _ref,
+      containerProps = _objectWithoutProperties(_ref, _excluded);
+
+  const searchStore = (0, _store.useSearchContext)();
+  const {
+    t
+  } = searchStore;
+  if (!user) return null;
+  return /*#__PURE__*/_react.default.createElement(StyleDiv, containerProps, /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    icon: /*#__PURE__*/_react.default.createElement(_Face.default, null),
+    label: t('blocklet.owner', {
+      name: user
+    }),
+    onDelete: () => {
+      deleteUserTag();
+    }
+  }));
+};
+
+FilterAuthor.propTypes = {
+  user: _propTypes.default.string.isRequired,
+  deleteUserTag: _propTypes.default.func
+};
+FilterAuthor.defaultProps = {
+  deleteUserTag: () => {}
+};
+var _default = FilterAuthor;
+exports.default = _default;

package/lib/components/list.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletList;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+
+var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+
+var _empty = require("./empty");
+
+var _store = require("../contexts/store");
+
+var _utils = require("../tools/utils");
+
+const _excluded = ["blocklets"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 BlockletList(_ref) {
+  let {
+    blocklets
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    blockletRender,
+    errors,
+    loadings,
+    selectedCategory,
+    blockletList,
+    getCategoryLocale,
+    queryParams,
+    t
+  } = (0, _store.useSearchContext)();
+  const showFilterTip = !!selectedCategory || !!queryParams.price;
+
+  if (errors.fetchBlockletsError) {
+    return /*#__PURE__*/_react.default.createElement(_Alert.default, {
+      type: "error",
+      variant: "icon"
+    }, /*#__PURE__*/_react.default.createElement("div", null, (0, _utils.formatError)(errors.fetchBlockletsError)));
+  }
+
+  if (loadings.fetchBlockletsLoading) {
+    return /*#__PURE__*/_react.default.createElement(_Box.default, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }, /*#__PURE__*/_react.default.createElement(_CircularProgress.default, null));
+  }
+
+  if (queryParams.search && showFilterTip && blockletList.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(CustomEmpty, null, /*#__PURE__*/_react.default.createElement(_empty.EmptyTitle, {
+      primaryStart: t('blocklet.noBlockletPart1'),
+      primaryEnd: t('blocklet.noBlockletPart2'),
+      search: queryParams.search
+    }), /*#__PURE__*/_react.default.createElement(_empty.NoResultsTips, {
+      keywordTip: true,
+      filterTip: true
+    }));
+  }
+
+  if (queryParams.search && blockletList.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(CustomEmpty, null, /*#__PURE__*/_react.default.createElement(_empty.EmptyTitle, {
+      primaryStart: t('blocklet.noBlockletPart1'),
+      primaryEnd: t('blocklet.noBlockletPart2'),
+      search: queryParams.search
+    }), /*#__PURE__*/_react.default.createElement(_empty.NoResultsTips, {
+      keywordTip: true
+    }));
+  }
+
+  if (showFilterTip && blockletList.length === 0) {
+    const categoryLocale = getCategoryLocale(selectedCategory);
+    return /*#__PURE__*/_react.default.createElement(CustomEmpty, null, categoryLocale ? /*#__PURE__*/_react.default.createElement(_empty.EmptyTitle, {
+      primaryStart: t('blocklet.noCategoryResults1'),
+      primaryEnd: t('blocklet.noCategoryResults2'),
+      search: categoryLocale
+    }) : /*#__PURE__*/_react.default.createElement(_empty.NoResults, null), /*#__PURE__*/_react.default.createElement(_empty.NoResultsTips, {
+      filterTip: true
+    }));
+  }
+
+  if (blockletList.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(CustomEmpty, null, /*#__PURE__*/_react.default.createElement(_empty.NoResults, null));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Grid.default, Object.assign({
+    container: true,
+    spacing: 4
+  }, rest), blocklets.map(blocklet => /*#__PURE__*/_react.default.createElement(StyledGrid, {
+    item: true,
+    lg: 4,
+    md: 6,
+    sm: 6,
+    xs: 12,
+    key: blocklet.did,
+    "data-blocklet-did": blocklet.did
+  }, blockletRender(blocklet))));
+}
+
+BlockletList.propTypes = {
+  blocklets: _propTypes.default.array.isRequired
+};
+BlockletList.defaultProps = {};
+const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
+  displayName: "list__StyledGrid",
+  componentId: "sc-anbsot-0"
+})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;padding-left:16px;padding-right:4px;}}"], props => props.theme.breakpoints.values.sm);
+const CustomEmpty = (0, _styledComponents.default)(_Empty.default).withConfig({
+  displayName: "list__CustomEmpty",
+  componentId: "sc-anbsot-1"
+})(["text-align:center;.primary{color:", ";}.tips{margin-top:", ";}"], props => props.theme.palette.primary.main, props => props.theme.spacing(1));

package/lib/components/search.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _mdiMaterialUi = require("mdi-material-ui");
+
+var _material = require("@mui/material");
+
+var _ahooks = require("ahooks");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _store = require("../contexts/store");
+
+const _excluded = ["placeholder"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+const Search = _ref => {
+  let {
+    placeholder
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const searchStore = (0, _store.useSearchContext)();
+  const {
+    queryParams,
+    handleSearchKeyword
+  } = searchStore;
+  const [searchStr, setSearchStr] = (0, _react.useState)(queryParams.search || '');
+  const {
+    run: handleSearch
+  } = (0, _ahooks.useDebounceFn)(handleSearchKeyword, {
+    wait: 300
+  });
+
+  const handleChange = event => {
+    const {
+      value
+    } = event.target;
+    setSearchStr(value);
+    handleSearch(value);
+  };
+
+  const handleClose = () => {
+    setSearchStr('');
+    handleSearchKeyword();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(StyledSearch, Object.assign({
+    startAdornment: /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
+      position: "start"
+    }, /*#__PURE__*/_react.default.createElement(StyledMagnify, null)),
+    onChange: handleChange,
+    placeholder: placeholder,
+    value: searchStr,
+    title: placeholder,
+    endAdornment: searchStr && /*#__PURE__*/_react.default.createElement(_material.InputAdornment, {
+      onClick: handleClose,
+      position: "end"
+    }, /*#__PURE__*/_react.default.createElement(StyledClose, null))
+  }, rest));
+};
+
+Search.propTypes = {
+  placeholder: _propTypes.default.string
+};
+Search.defaultProps = {
+  placeholder: 'Type to search...'
+};
+const StyledSearch = (0, _styledComponents.default)(_material.OutlinedInput).withConfig({
+  displayName: "search__StyledSearch",
+  componentId: "sc-1ehlqka-0"
+})(["background-color:#fff;border-radius:12px;font-size:16px;margin:0 10px;.MuiInputBase-input{padding:12px 0px 12px 0px;}.MuiOutlinedInput-notchedOutline{border:none;}.Mui-focused{background-color:#f6f6f6;.MuiInputBase-input::placeholder{color:transparent;}}@media (max-width:", "px){font-size:14px;border-radius:6px;.MuiInputBase-input{padding:8px 0 8px 10px;}}"], props => props.theme.breakpoints.values.md);
+const StyledMagnify = (0, _styledComponents.default)(_mdiMaterialUi.Magnify).withConfig({
+  displayName: "search__StyledMagnify",
+  componentId: "sc-1ehlqka-1"
+})(["color:", ";font-size:28px;@media (max-width:", "px){font-size:24px;}"], props => props.theme.palette.grey[500], props => props.theme.breakpoints.values.md);
+const StyledClose = (0, _styledComponents.default)(_mdiMaterialUi.Close).withConfig({
+  displayName: "search__StyledClose",
+  componentId: "sc-1ehlqka-2"
+})(["color:", ";font-size:16px;cursor:pointer;"], props => props.theme.palette.grey[500]);
+var _default = Search;
+exports.default = _default;