@pisell/materials 1.0.744 → 1.0.746

package/es/components/pisellList01/index.js

@@ -4,27 +4,13 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState, useEffect } from 'react';
-import { Input, Empty } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { SearchOutlined } from '@ant-design/icons';
+import PisellViewGrid from "../pisellViewGrid";
 import PisellAnchor from "../pisellAnchor";
-import classNames from 'classnames';
-import { isMobile } from '@pisell/utils';
+import PisellEmpty from "../pisellEmpty";
+import Input from "../input";
 import "./index.less";
-var Search = Input.Search;
-/**
- * 将dataSource格式化为PisellAnchor需要的格式
- * @param data 
- * @returns 
- */
-var formatOptions = function formatOptions() {
-  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return data.map(function (item) {
-    return {
-      id: item.key || item.id,
-      name: item.title || item.name
-    };
-  });
-};
 var PisellList01 = function PisellList01(_ref) {
   var showSearch = _ref.showSearch,
     showCategory = _ref.showCategory,
@@ -44,77 +30,76 @@ var PisellList01 = function PisellList01(_ref) {
     setCurrentAnchor = _useState2[1];
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    filteredData = _useState4[0],
-    setFilteredData = _useState4[1];
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    searchValue = _useState6[0],
-    setSearchValue = _useState6[1];
-  var platform = isMobile() ? 'h5' : 'pc';
+    products = _useState4[0],
+    setProducts = _useState4[1];
   useEffect(function () {
-    if (dataSource && dataSource.length > 0) {
-      setCurrentAnchor(dataSource[0].key || dataSource[0].id);
-      setFilteredData(dataSource);
-    }
-  }, [dataSource]);
-
-  // 处理搜索
-  var handleSearch = function handleSearch(value) {
-    setSearchValue(value);
-    if (onSearch) {
-      onSearch(value);
-      return;
+    // 不显示分类时，默认展示所有数据
+    if (!showCategory) {
+      return setProducts(dataSource !== null && dataSource !== void 0 ? dataSource : []);
     }
-    if (!value) {
-      setFilteredData(dataSource || []);
-      return;
+    if (currentAnchor) {
+      var _currentData$children;
+      var currentData = dataSource === null || dataSource === void 0 ? void 0 : dataSource.find(function (item) {
+        return item.href === currentAnchor;
+      });
+      setProducts((_currentData$children = currentData === null || currentData === void 0 ? void 0 : currentData.children) !== null && _currentData$children !== void 0 ? _currentData$children : []);
     }
-    var filtered = (dataSource || []).filter(function (item) {
-      return item.title && item.title.toLowerCase().includes(value.toLowerCase()) || item.name && item.name.toLowerCase().includes(value.toLowerCase());
-    });
-    setFilteredData(filtered);
-  };
+  }, [currentAnchor, dataSource, showCategory]);
+  useEffect(function () {
+    var _dataSource$0$href, _dataSource$;
+    setCurrentAnchor((_dataSource$0$href = dataSource === null || dataSource === void 0 || (_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.href) !== null && _dataSource$0$href !== void 0 ? _dataSource$0$href : '');
+  }, [dataSource]);
 
-  // 渲染列表项
-  var renderItems = function renderItems() {
-    if (!filteredData || filteredData.length === 0) {
-      if (isShowEmpty) {
-        return /*#__PURE__*/React.createElement(Empty, {
-          description: description || '暂无数据'
-        });
-      }
-      return null;
-    }
-    return filteredData.map(function (item, index) {
-      return renderItem ? renderItem(item, index) : null;
-    });
-  };
+  /**
+   * @title: 分类标题
+   * @description:
+   * @param {*} useMemo
+   * @return {*}
+   * @Author: WangHan
+   * @Date: 2025-01-13 16:21
+   */
+  var categoryTitle = useMemo(function () {
+    var _dataSource$find;
+    return dataSource === null || dataSource === void 0 || (_dataSource$find = dataSource.find(function (item) {
+      return item.href === currentAnchor;
+    })) === null || _dataSource$find === void 0 ? void 0 : _dataSource$find.title;
+  }, [currentAnchor, dataSource]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('pisell-list-01', className),
+    className: "pisell-list-01 ".concat(className),
     style: style
   }, showSearch ? /*#__PURE__*/React.createElement("div", {
     className: "pisell-list-01-search"
-  }, /*#__PURE__*/React.createElement(Search, {
-    placeholder: placeholder || '请输入搜索内容',
-    onSearch: handleSearch,
-    value: searchValue,
-    onChange: function onChange(e) {
-      return setSearchValue(e.target.value);
-    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: placeholder || 'Search',
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, {
+      style: {
+        color: '#667085'
+      }
+    }),
+    onChange: onSearch,
+    allowClear: true,
+    size: "large",
+    className: "pisell-list-01-search-input"
   })) : null, showCategory ? /*#__PURE__*/React.createElement("div", {
     className: "pisell-list-01-categories"
   }, /*#__PURE__*/React.createElement(PisellAnchor, {
-    options: formatOptions(dataSource),
-    tab: currentAnchor,
+    items: dataSource,
+    getCurrentAnchor: currentAnchor,
     onChange: function onChange(e) {
-      if (typeof e === 'string') {
-        _onChange === null || _onChange === void 0 || _onChange(e);
-      }
+      _onChange === null || _onChange === void 0 || _onChange(e);
       setCurrentAnchor(e);
-    },
-    platform: platform
+    }
   })) : null, /*#__PURE__*/React.createElement("div", {
-    className: "pisell-list-01-content"
-  }, renderItems()));
+    className: "pisell-list-01-products ".concat(!products.length && isShowEmpty ? 'pisell-list-01-products-empty' : '')
+  }, showCategory ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-list-01-products-title"
+  }, categoryTitle) : null, products.length > 0 ? /*#__PURE__*/React.createElement(PisellViewGrid, {
+    dataSource: products,
+    columns: 1,
+    verticalGap: 16,
+    renderItem: renderItem
+  }) : isShowEmpty ? /*#__PURE__*/React.createElement(PisellEmpty, {
+    description: description
+  }) : null));
 };
 export default PisellList01;

package/lib/components/pisellList01/index.js

@@ -33,18 +33,12 @@ __export(pisellList01_exports, {
 });
 module.exports = __toCommonJS(pisellList01_exports);
 var import_react = __toESM(require("react"));
-var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_pisellViewGrid = __toESM(require("../pisellViewGrid"));
 var import_pisellAnchor = __toESM(require("../pisellAnchor"));
-var import_classnames = __toESM(require("classnames"));
-var import_utils = require("@pisell/utils");
+var import_pisellEmpty = __toESM(require("../pisellEmpty"));
+var import_input = __toESM(require("../input"));
 var import_index = require("./index.less");
-var { Search } = import_antd.Input;
-var formatOptions = (data = []) => {
-  return data.map((item) => ({
-    id: item.key || item.id,
-    name: item.title || item.name
-  }));
-};
 var PisellList01 = ({
   showSearch,
   showCategory,
@@ -59,62 +53,61 @@ var PisellList01 = ({
   description
 }) => {
   const [currentAnchor, setCurrentAnchor] = (0, import_react.useState)("");
-  const [filteredData, setFilteredData] = (0, import_react.useState)([]);
-  const [searchValue, setSearchValue] = (0, import_react.useState)("");
-  const platform = (0, import_utils.isMobile)() ? "h5" : "pc";
+  const [products, setProducts] = (0, import_react.useState)([]);
   (0, import_react.useEffect)(() => {
-    if (dataSource && dataSource.length > 0) {
-      setCurrentAnchor(dataSource[0].key || dataSource[0].id);
-      setFilteredData(dataSource);
-    }
-  }, [dataSource]);
-  const handleSearch = (value) => {
-    setSearchValue(value);
-    if (onSearch) {
-      onSearch(value);
-      return;
+    if (!showCategory) {
+      return setProducts(dataSource ?? []);
     }
-    if (!value) {
-      setFilteredData(dataSource || []);
-      return;
-    }
-    const filtered = (dataSource || []).filter(
-      (item) => item.title && item.title.toLowerCase().includes(value.toLowerCase()) || item.name && item.name.toLowerCase().includes(value.toLowerCase())
-    );
-    setFilteredData(filtered);
-  };
-  const renderItems = () => {
-    if (!filteredData || filteredData.length === 0) {
-      if (isShowEmpty) {
-        return /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { description: description || "暂无数据" });
-      }
-      return null;
+    if (currentAnchor) {
+      const currentData = dataSource == null ? void 0 : dataSource.find(
+        (item) => item.href === currentAnchor
+      );
+      setProducts((currentData == null ? void 0 : currentData.children) ?? []);
     }
-    return filteredData.map((item, index) => {
-      return renderItem ? renderItem(item, index) : null;
-    });
-  };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-list-01", className), style }, showSearch ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-search" }, /* @__PURE__ */ import_react.default.createElement(
-    Search,
+  }, [currentAnchor, dataSource, showCategory]);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    setCurrentAnchor(((_a = dataSource == null ? void 0 : dataSource[0]) == null ? void 0 : _a.href) ?? "");
+  }, [dataSource]);
+  const categoryTitle = (0, import_react.useMemo)(() => {
+    var _a;
+    return (_a = dataSource == null ? void 0 : dataSource.find((item) => item.href === currentAnchor)) == null ? void 0 : _a.title;
+  }, [currentAnchor, dataSource]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-list-01 ${className}`, style }, showSearch ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-search" }, /* @__PURE__ */ import_react.default.createElement(
+    import_input.default,
     {
-      placeholder: placeholder || "请输入搜索内容",
-      onSearch: handleSearch,
-      value: searchValue,
-      onChange: (e) => setSearchValue(e.target.value)
+      placeholder: placeholder || "Search",
+      prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, { style: { color: "#667085" } }),
+      onChange: onSearch,
+      allowClear: true,
+      size: "large",
+      className: "pisell-list-01-search-input"
     }
   )) : null, showCategory ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-categories" }, /* @__PURE__ */ import_react.default.createElement(
     import_pisellAnchor.default,
     {
-      options: formatOptions(dataSource),
-      tab: currentAnchor,
+      items: dataSource,
+      getCurrentAnchor: currentAnchor,
       onChange: (e) => {
-        if (typeof e === "string") {
-          onChange == null ? void 0 : onChange(e);
-        }
+        onChange == null ? void 0 : onChange(e);
         setCurrentAnchor(e);
-      },
-      platform
+      }
     }
-  )) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-content" }, renderItems()));
+  )) : null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `pisell-list-01-products ${!products.length && isShowEmpty ? "pisell-list-01-products-empty" : ""}`
+    },
+    showCategory ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-products-title" }, categoryTitle) : null,
+    products.length > 0 ? /* @__PURE__ */ import_react.default.createElement(
+      import_pisellViewGrid.default,
+      {
+        dataSource: products,
+        columns: 1,
+        verticalGap: 16,
+        renderItem
+      }
+    ) : isShowEmpty ? /* @__PURE__ */ import_react.default.createElement(import_pisellEmpty.default, { description }) : null
+  ));
 };
 var pisellList01_default = PisellList01;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.744",
+  "version": "1.0.746",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -71,9 +71,9 @@
     "swiper": "^8.4.7",
     "react-barcode": "^1.5.3",
     "vod-js-sdk-v6": "^1.4.11",
-    "@pisell/date-picker": "1.0.115",
     "@pisell/icon": "0.0.10",
-    "@pisell/utils": "1.0.43"
+    "@pisell/utils": "1.0.43",
+    "@pisell/date-picker": "1.0.115"
   },
   "peerDependencies": {
     "react": "^18.0.0",