@zykj2024/much-library 1.1.7-beta.3 → 1.1.7-beta.5

package/dist/McSelect/demo/exclusion.js

@@ -0,0 +1,64 @@
+/**
+ * title: 两个互斥的select
+ * description: select1中选择的选项会在select2中被排除，反之亦然。此方法同样支持远程select。
+ */
+import { Form } from 'antd';
+import { McSelect } from "../..";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var options = [{
+  value: 'gold'
+}, {
+  value: 'lime'
+}, {
+  value: 'green'
+}, {
+  value: 'cyan'
+}];
+var App = function App() {
+  return /*#__PURE__*/_jsxs(Form, {
+    name: "exclusion1",
+    children: [/*#__PURE__*/_jsx(Form.Item, {
+      noStyle: true,
+      dependencies: ['select2'],
+      children: function children(_ref) {
+        var getFieldValue = _ref.getFieldValue;
+        return /*#__PURE__*/_jsx(Form.Item, {
+          name: "select1",
+          children: /*#__PURE__*/_jsx(McSelect, {
+            options: options,
+            label: "select1",
+            toFilterOptions: function toFilterOptions(options) {
+              return options.filter(function (option) {
+                return option.value !== getFieldValue('select2');
+              });
+            }
+          })
+        });
+      }
+    }), /*#__PURE__*/_jsx(Form.Item, {
+      noStyle: true,
+      dependencies: ['select1'],
+      children: function children(_ref2) {
+        var getFieldValue = _ref2.getFieldValue;
+        return /*#__PURE__*/_jsx(Form.Item, {
+          label: "select2",
+          name: "select2",
+          children: /*#__PURE__*/_jsx(McSelect, {
+            style: {
+              width: '100%'
+            },
+            options: options,
+            toFilterOptions: function toFilterOptions(options) {
+              return options.filter(function (option) {
+                return option.value !== getFieldValue('select1');
+              });
+            }
+          })
+        });
+      }
+    })]
+  });
+};
+export default App;

package/dist/McSelect/demo/fetchOptions.d.ts

@@ -0,0 +1,7 @@
+/**
+ * title: 远程分页查询
+ * description: 使用`extra`额外参数属性时，一定要使用状态useState，禁止直接使用对象绑定在属性上。
+ */
+export declare const fetchMockData: ({ current, pageSize, keyword }: any) => Promise<unknown>;
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McSelect/demo/fetchOptions.js

@@ -0,0 +1,211 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 远程分页查询
+ * description: 使用`extra`额外参数属性时，一定要使用状态useState，禁止直接使用对象绑定在属性上。
+ */
+
+import { McSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var generateMockData = function generateMockData(totalItems) {
+  var mockData = [];
+  for (var i = 1; i <= totalItems; i++) {
+    mockData.push({
+      value: i,
+      label: "Item ".concat(i)
+    });
+  }
+  return mockData;
+};
+var mockData = generateMockData(1000);
+export var fetchMockData = function fetchMockData(_ref) {
+  var current = _ref.current,
+    pageSize = _ref.pageSize,
+    keyword = _ref.keyword;
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      var start = (current - 1) * pageSize;
+      var end = start + pageSize;
+      var _mockData = keyword ? mockData.filter(function (item) {
+        return item.label.includes(keyword);
+      }) : mockData;
+      var data = _mockData.slice(start, end);
+      var total = _mockData.length;
+      resolve({
+        data: data,
+        total: total
+      });
+    }, 500); // 模拟网络延迟500ms
+  });
+};
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    multipleValue = _useState4[0],
+    setMultipleValue = _useState4[1];
+  var _useState5 = useState({
+      extra1: '请求需要的额外参数1',
+      extra2: '请求需要的额外参数2'
+    }),
+    _useState6 = _slicedToArray(_useState5, 1),
+    extra = _useState6[0];
+  var handleChange = function handleChange(value) {
+    setValue(value);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 4
+    },
+    children: [/*#__PURE__*/_jsx(McSelect, {
+      label: "\u5355\u9009",
+      value: value,
+      style: {
+        width: 200
+      },
+      fetchOptions: ( /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
+          var _yield$fetchMockData, data, total;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return fetchMockData(params);
+              case 2:
+                _yield$fetchMockData = _context.sent;
+                data = _yield$fetchMockData.data;
+                total = _yield$fetchMockData.total;
+                return _context.abrupt("return", {
+                  data: data,
+                  total: total
+                });
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }()),
+      onChange: handleChange
+    }), /*#__PURE__*/_jsx(McSelect, {
+      label: "\u591A\u9009",
+      value: multipleValue,
+      style: {
+        width: 200
+      },
+      fetchOptions: ( /*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(params) {
+          var _yield$fetchMockData2, data, total;
+          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return fetchMockData(params);
+              case 2:
+                _yield$fetchMockData2 = _context2.sent;
+                data = _yield$fetchMockData2.data;
+                total = _yield$fetchMockData2.total;
+                return _context2.abrupt("return", {
+                  data: data,
+                  total: total
+                });
+              case 6:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function (_x2) {
+          return _ref3.apply(this, arguments);
+        };
+      }()),
+      searchInPanel: true,
+      multiple: true,
+      onChange: setMultipleValue
+    }), /*#__PURE__*/_jsx(McSelect, {
+      label: "\u989D\u5916\u53C2\u6570",
+      value: multipleValue,
+      style: {
+        width: 200
+      },
+      extra: extra,
+      fetchOptions: ( /*#__PURE__*/function () {
+        var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(params) {
+          var _yield$fetchMockData3, data, total;
+          return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return fetchMockData(params);
+              case 2:
+                _yield$fetchMockData3 = _context3.sent;
+                data = _yield$fetchMockData3.data;
+                total = _yield$fetchMockData3.total;
+                return _context3.abrupt("return", {
+                  data: data,
+                  total: total
+                });
+              case 6:
+              case "end":
+                return _context3.stop();
+            }
+          }, _callee3);
+        }));
+        return function (_x3) {
+          return _ref4.apply(this, arguments);
+        };
+      }()),
+      multiple: true,
+      onChange: setMultipleValue
+    }), /*#__PURE__*/_jsx(McSelect, {
+      label: "\u9519\u8BEF\u6848\u4F8B",
+      value: multipleValue,
+      style: {
+        width: 200
+      },
+      extra: {
+        extra1: '额外参数1',
+        extra2: '额外参数2'
+      },
+      fetchOptions: ( /*#__PURE__*/function () {
+        var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(params) {
+          var _yield$fetchMockData4, data, total;
+          return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+            while (1) switch (_context4.prev = _context4.next) {
+              case 0:
+                _context4.next = 2;
+                return fetchMockData(params);
+              case 2:
+                _yield$fetchMockData4 = _context4.sent;
+                data = _yield$fetchMockData4.data;
+                total = _yield$fetchMockData4.total;
+                return _context4.abrupt("return", {
+                  data: data,
+                  total: total
+                });
+              case 6:
+              case "end":
+                return _context4.stop();
+            }
+          }, _callee4);
+        }));
+        return function (_x4) {
+          return _ref5.apply(this, arguments);
+        };
+      }()),
+      multiple: true,
+      onChange: setMultipleValue
+    })]
+  });
+});

package/dist/McSelect/demo/inexistent.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McSelect/demo/inexistent.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 显示不存在
+ */
+import { Space } from 'antd';
+import { McSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(['1']),
+    _useState2 = _slicedToArray(_useState, 2),
+    value1 = _useState2[0],
+    setValue1 = _useState2[1];
+  return /*#__PURE__*/_jsxs(Space, {
+    wrap: true,
+    children: [/*#__PURE__*/_jsx(McSelect, {
+      value: value1,
+      onChange: setValue1,
+      inexistent: true,
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }]
+    }), /*#__PURE__*/_jsx(McSelect, {
+      value: value1,
+      onChange: setValue1,
+      inexistent: {
+        inexistentText: '已关闭'
+      },
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }]
+    }), /*#__PURE__*/_jsx(McSelect, {
+      value: value1,
+      onChange: setValue1,
+      inexistent: {
+        inexistentColor: 'skyblue',
+        inexistentText: '已关闭',
+        reserveOriginalValue: true
+      },
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }]
+    })]
+  });
+});

package/dist/McSelect/demo/labelInValue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McSelect/demo/labelInValue.js

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: value值为对象
+ */
+import { McSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    allowCreateValue = _useState4[0],
+    setAllowCreateValue = _useState4[1];
+  var handleChange = function handleChange(value) {
+    setValue(value);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(McSelect, {
+      label: "\u5355\u9009",
+      labelInValue: true,
+      value: value,
+      style: {
+        width: 200
+      },
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }],
+      onChange: handleChange
+    }), value && JSON.stringify(value), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(McSelect, {
+        label: "\u591A\u9009",
+        labelInValue: true,
+        value: allowCreateValue,
+        style: {
+          width: 200
+        },
+        options: [{
+          value: 'jack',
+          label: 'Jack'
+        }, {
+          value: 'lucy',
+          label: 'Lucy'
+        }, {
+          value: 'Yiminghe',
+          label: 'yiminghe'
+        }, {
+          value: 'disabled',
+          label: 'Disabled',
+          disabled: true
+        }],
+        onChange: setAllowCreateValue,
+        multiple: true
+      }), (allowCreateValue === null || allowCreateValue === void 0 ? void 0 : allowCreateValue.length) > 0 && JSON.stringify(allowCreateValue)]
+    })]
+  });
+});

package/dist/McSelect/demo/maxTagCount.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/dist/McSelect/demo/maxTagCount.js

@@ -0,0 +1,51 @@
+/**
+ * title: 多选时显示tag的个数
+ * description: 多选下通过响应式布局让选项自动收缩。该功能对性能有所消耗，不推荐在大表单场景下使用。
+ */
+
+import { Tag } from 'antd';
+import { McSelect } from "../..";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var options = [{
+  value: 'gold'
+}, {
+  value: 'lime'
+}, {
+  value: 'green'
+}, {
+  value: 'cyan'
+}];
+var tagRender = function tagRender(props) {
+  var label = props.label,
+    value = props.value,
+    closable = props.closable,
+    onClose = props.onClose;
+  var onPreventMouseDown = function onPreventMouseDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return /*#__PURE__*/_jsx(Tag, {
+    color: value,
+    onMouseDown: onPreventMouseDown,
+    closable: closable,
+    onClose: onClose,
+    style: {
+      marginInlineEnd: 4
+    },
+    children: label
+  });
+};
+var App = function App() {
+  return /*#__PURE__*/_jsx(McSelect, {
+    multiple: true,
+    maxTagCount: undefined,
+    tagRender: tagRender,
+    defaultValue: ['gold', 'cyan'],
+    style: {
+      width: '100%'
+    },
+    options: options
+  });
+};
+export default App;

package/dist/McSelect/demo/multiple.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McSelect/demo/multiple.js

@@ -0,0 +1,46 @@
+/**
+ * title: 多选
+ * description: 与antd的不同：属性不同McSelect多选使用multiple属性，且不再支持mode属性
+ */
+import { Space } from 'antd';
+import { McSelect } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs(Space, {
+    wrap: true,
+    children: [/*#__PURE__*/_jsx(McSelect, {
+      defaultValue: "lucy",
+      style: {
+        width: 120
+      },
+      maxCount: 2,
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }],
+      multiple: true
+    }), /*#__PURE__*/_jsx(McSelect, {
+      defaultValue: "lucy",
+      style: {
+        width: 120
+      },
+      loading: true,
+      options: [{
+        value: 'lucy',
+        label: 'Lucy'
+      }],
+      multiple: true
+    })]
+  });
+});

package/dist/McSelect/demo/optionRender.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/dist/McSelect/demo/optionRender.js

@@ -0,0 +1,51 @@
+/**
+ * title: 自定义下拉选项
+ * description: 使用 `optionRender` 自定义渲染下拉选项。
+ */
+import { Space } from 'antd';
+import { McSelect } from "../..";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var options = [{
+  label: 'China',
+  value: 'china',
+  emoji: '🇨🇳',
+  desc: 'China (中国)'
+}, {
+  label: 'USA',
+  value: 'usa',
+  emoji: '🇺🇸',
+  desc: 'USA (美国)'
+}, {
+  label: 'Japan',
+  value: 'japan',
+  emoji: '🇯🇵',
+  desc: 'Japan (日本)'
+}, {
+  label: 'Korea',
+  value: 'korea',
+  emoji: '🇰🇷',
+  desc: 'Korea (韩国)'
+}];
+var App = function App() {
+  return /*#__PURE__*/_jsx(McSelect, {
+    multiple: true,
+    style: {
+      width: '100%'
+    },
+    placeholder: "select one country",
+    defaultValue: ['china'],
+    options: options,
+    optionRender: function optionRender(option) {
+      return /*#__PURE__*/_jsxs(Space, {
+        children: [/*#__PURE__*/_jsx("span", {
+          role: "img",
+          "aria-label": option.data.label,
+          children: option.data.emoji
+        }), option.data.desc]
+      });
+    }
+  });
+};
+export default App;

package/dist/McSelect/demo/panelInSearch.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McSelect/demo/panelInSearch.js

@@ -0,0 +1,47 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 搜索框下移+已选中的优先展示
+ * description: 默认都为false，仅支持多选
+ */
+import { Space } from 'antd';
+import { McSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var options = [{
+  value: 'jack',
+  label: 'Jack'
+}, {
+  value: 'lucy',
+  label: 'Lucy'
+}, {
+  value: 'Yiminghe',
+  label: 'yiminghe'
+}, {
+  value: 'disabled',
+  label: 'Disabled',
+  disabled: true
+}];
+export default (function () {
+  var _useState = useState(options),
+    _useState2 = _slicedToArray(_useState, 2),
+    finalOptions = _useState2[0],
+    setFinalOptions = _useState2[1];
+  return /*#__PURE__*/_jsx(Space, {
+    wrap: true,
+    children: /*#__PURE__*/_jsx(McSelect, {
+      style: {
+        width: 240
+      },
+      searchInPanel: true,
+      pinSelectedOptions: true,
+      searchInPanelPlaceholder: "\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u63D0\u793A\u6587\u5B57",
+      options: finalOptions,
+      onSearch: function onSearch(v) {
+        return setFinalOptions(options.filter(function (item) {
+          return item.value.includes(v);
+        }));
+      },
+      multiple: true
+    })
+  });
+});

package/dist/McSelect/demo/tagRender.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;