@zykj2024/much-library 1.0.9 → 1.0.10-beta.2

package/dist/McProSelect/demo/exclusion.js

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 静态option + 两个互斥的select
+ * description: select1中选择的选项会在select2中被排除，反之亦然。此方法同样支持远程select。
+ */
+import { Form } from 'antd';
+import { useForm } from 'antd/es/form/Form';
+import { McProSelect } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var options = [{
+  label: 'goldLabel',
+  value: 'gold'
+}, {
+  label: 'limeLabel',
+  value: 'lime'
+}, {
+  label: 'greenLabel',
+  value: 'green'
+}, {
+  label: 'cyanLabel',
+  value: 'cyan'
+}];
+var App = function App() {
+  var _useForm = useForm(),
+    _useForm2 = _slicedToArray(_useForm, 1),
+    form = _useForm2[0];
+  return /*#__PURE__*/_jsxs(Form, {
+    form: form,
+    name: "exclusion2",
+    children: [/*#__PURE__*/_jsx(Form.Item, {
+      noStyle: true
+      // 也可以用dependencies
+      ,
+      shouldUpdate: function shouldUpdate(prev, next) {
+        return prev['select2'] !== next['select2'];
+      },
+      children: function children(_ref) {
+        var _getFieldValue;
+        var getFieldValue = _ref.getFieldValue;
+        return /*#__PURE__*/_jsx(McProSelect, {
+          label: "select1",
+          name: "select1",
+          tooltip: "\u7531JAVA spring\u6846\u67B6\u7BA1\u7406\u7684bean\u5B9E\u4F8B\u540D\u79F0",
+          excludeIds: [(_getFieldValue = getFieldValue('select2')) === null || _getFieldValue === void 0 ? void 0 : _getFieldValue.value],
+          fieldProps: {
+            options: options
+          }
+        });
+      }
+    }), /*#__PURE__*/_jsx(Form.Item, {
+      noStyle: true,
+      dependencies: ['select1'],
+      children: function children(_ref2) {
+        var _getFieldValue2;
+        var getFieldValue = _ref2.getFieldValue;
+        return /*#__PURE__*/_jsx(McProSelect, {
+          label: "select2",
+          name: "select2",
+          tooltip: "\u7531JAVA spring\u6846\u67B6\u7BA1\u7406\u7684bean\u5B9E\u4F8B\u540D\u79F02",
+          excludeIds: [(_getFieldValue2 = getFieldValue('select1')) === null || _getFieldValue2 === void 0 ? void 0 : _getFieldValue2.value],
+          fieldProps: {
+            options: options
+          }
+        });
+      }
+    })]
+  });
+};
+export default App;

package/dist/McProSelect/demo/require.d.ts

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

package/dist/McProSelect/demo/require.js

@@ -0,0 +1,82 @@
+/**
+ * title: 内置为空校验
+ * description: 为空校验。required为true时，会自动校验是否为空。可通过设置required为string类型，自定义提示信息。
+ */
+import { Flex, Form } from 'antd';
+import { McProSelect } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var requireDemo = function requireDemo() {
+  return /*#__PURE__*/_jsx(Form, {
+    children: /*#__PURE__*/_jsxs(Flex, {
+      gap: "middle",
+      justify: "space-between",
+      children: [/*#__PURE__*/_jsx(McProSelect, {
+        name: "select1",
+        label: "select1",
+        fieldProps: {
+          defaultValue: 'lucy',
+          options: [{
+            value: 'jack',
+            label: 'Jack'
+          }, {
+            value: 'lucy',
+            label: 'Lucy'
+          }, {
+            value: 'Yiminghe',
+            label: 'yiminghe'
+          }, {
+            value: 'disabled',
+            label: 'Disabled',
+            disabled: true
+          }]
+        },
+        required: "\u8BF7\u9009\u62E9select1"
+      }), /*#__PURE__*/_jsx(McProSelect, {
+        name: "select2",
+        label: "select2",
+        fieldProps: {
+          defaultValue: 'lucy',
+          options: [{
+            value: 'jack',
+            label: 'Jack'
+          }, {
+            value: 'lucy',
+            label: 'Lucy'
+          }, {
+            value: 'Yiminghe',
+            label: 'yiminghe'
+          }, {
+            value: 'disabled',
+            label: 'Disabled',
+            disabled: true
+          }]
+        },
+        required: true
+      }), /*#__PURE__*/_jsx(McProSelect, {
+        name: "select3",
+        label: "select3",
+        multiple: true,
+        fieldProps: {
+          defaultValue: 'lucy',
+          options: [{
+            value: 'jack',
+            label: 'Jack'
+          }, {
+            value: 'lucy',
+            label: 'Lucy'
+          }, {
+            value: 'Yiminghe',
+            label: 'yiminghe'
+          }, {
+            value: 'disabled',
+            label: 'Disabled',
+            disabled: true
+          }]
+        },
+        required: true
+      })]
+    })
+  });
+};
+export default requireDemo;

package/dist/McProSelect/index.d.ts

@@ -0,0 +1,35 @@
+import { FormItemProps } from 'antd/es/form/FormItem';
+import { McSelectProps, Option } from '../McSelect';
+type McProselectOptions<T> = (T & Partial<Pick<Option, 'title' | 'disabled'>> & {
+    extra?: T;
+})[] | undefined;
+type McProSelectProps<T = {
+    label: string;
+    value: string;
+}> = Omit<FormItemProps, 'required'> & {
+    multiple?: boolean;
+    /** 默认为keyword */
+    searchKey?: string;
+    /** 为string时表示未填写时的提示文案 */
+    required?: boolean | string;
+    disabled?: boolean;
+    excludeIds?: (string | number)[];
+    fieldNames?: {
+        label?: keyof T;
+        value?: keyof T;
+    };
+    fieldProps?: Omit<McSelectProps, 'multiple' | 'fetchOption' | 'toFilterOptions' | 'options'> & {
+        options: McProselectOptions<T>;
+    };
+    request?: (params: {
+        current: number;
+        pageSize: number;
+        [key: string]: number | string;
+    }) => Promise<{
+        records: T[];
+        total: number;
+        [key: string]: any;
+    }>;
+};
+declare const McProSelect: <T extends Record<string, any>>({ label, name, fieldNames, required, request, multiple, disabled, searchKey, excludeIds, fieldProps, ...restProps }: McProSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default McProSelect;

package/dist/McProSelect/index.js

@@ -0,0 +1,152 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["label", "name", "fieldNames", "required", "request", "multiple", "disabled", "searchKey", "excludeIds", "fieldProps"],
+  _excluded2 = ["options"],
+  _excluded3 = ["getValueFromEvent", "getValueProps", "rules"],
+  _excluded4 = ["current", "keyword"];
+import { Form } from 'antd';
+import { useMemo } from 'react';
+import McSelect from "../McSelect";
+import { isEmpty, isNil } from "../Utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+var McProSelect = function McProSelect(_ref) {
+  var label = _ref.label,
+    name = _ref.name,
+    fieldNames = _ref.fieldNames,
+    required = _ref.required,
+    request = _ref.request,
+    multiple = _ref.multiple,
+    disabled = _ref.disabled,
+    _ref$searchKey = _ref.searchKey,
+    searchKey = _ref$searchKey === void 0 ? 'keyword' : _ref$searchKey,
+    excludeIds = _ref.excludeIds,
+    fieldProps = _ref.fieldProps,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var labelKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label';
+  var valueKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || 'value';
+  var _ref2 = fieldProps !== null && fieldProps !== void 0 ? fieldProps : {},
+    optionsFromFieldProps = _ref2.options,
+    restFieldProps = _objectWithoutProperties(_ref2, _excluded2);
+  var customGetValueFromEvent = restProps.getValueFromEvent,
+    customGetValueProps = restProps.getValueProps,
+    rules = restProps.rules,
+    restFormItemProps = _objectWithoutProperties(restProps, _excluded3);
+
+  // 生成用fieldNames映射后的options
+  var createReflectedOptions = function createReflectedOptions(options) {
+    if (!options) return undefined;
+    return options.map(function (item) {
+      var _item$title;
+      return {
+        label: item[labelKey !== null && labelKey !== void 0 ? labelKey : 'label'],
+        value: item[valueKey !== null && valueKey !== void 0 ? valueKey : 'value'],
+        title: (_item$title = item.title) !== null && _item$title !== void 0 ? _item$title : '',
+        disabled: !!item.disabled,
+        extra: item
+      };
+    });
+  };
+
+  // 静态option
+  var staticOption = useMemo(function () {
+    // 非异步请求时，根据fieldNames转换为label&value格式
+    if (optionsFromFieldProps && optionsFromFieldProps.length > 0) {
+      return createReflectedOptions(optionsFromFieldProps);
+    }
+    return undefined;
+  }, [optionsFromFieldProps]);
+  var getValueProps = function getValueProps(value) {
+    var _label$value;
+    if (customGetValueProps) {
+      return customGetValueProps(value);
+    }
+    if (isNil(value)) return {
+      value: value
+    };
+    return {
+      value: multiple ? (value === null || value === void 0 ? void 0 : value.map(function (x) {
+        return {
+          label: x[labelKey],
+          value: x[valueKey]
+        };
+      })) || [] : (_label$value = {
+        label: value === null || value === void 0 ? void 0 : value[labelKey],
+        value: value === null || value === void 0 ? void 0 : value[valueKey]
+      }) !== null && _label$value !== void 0 ? _label$value : undefined
+    };
+  };
+  var getValueFromEvent = function getValueFromEvent(_selectedValues, options) {
+    var _options$map, _options$extra;
+    if (customGetValueFromEvent) return customGetValueFromEvent(_selectedValues, options);
+    if (!_selectedValues) return undefined;
+    // 如果其他业务要的value是number[], 不是option，需要修改这里。用到的时候再修改吧
+    if (multiple) return (_options$map = options === null || options === void 0 ? void 0 : options.map(function (item) {
+      var _item$extra;
+      return (_item$extra = item.extra) !== null && _item$extra !== void 0 ? _item$extra : item;
+    })) !== null && _options$map !== void 0 ? _options$map : [];
+    return (_options$extra = options === null || options === void 0 ? void 0 : options.extra) !== null && _options$extra !== void 0 ? _options$extra : options;
+  };
+  var requiredMsg = typeof required === 'string' ? required : '请选择';
+  return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({
+    label: label,
+    name: name,
+    getValueProps: getValueProps,
+    getValueFromEvent: getValueFromEvent,
+    rules: required ? [{
+      required: true,
+      message: requiredMsg,
+      validator: function validator(_, value) {
+        if (isNil(value) || isEmpty(value)) return Promise.reject(new Error(requiredMsg));
+        return Promise.resolve();
+      }
+    }].concat(_toConsumableArray(restProps.rules || [])) : rules
+  }, restFormItemProps), {}, {
+    children: /*#__PURE__*/_jsx(McSelect, _objectSpread(_objectSpread({
+      multiple: multiple,
+      showSearch: true,
+      maxTagCount: undefined,
+      toFilterOptions: function toFilterOptions(options) {
+        if (!excludeIds || excludeIds.filter(Boolean).length === 0) return options;
+        return options.filter(function (option) {
+          return !excludeIds.includes(option.value);
+        });
+      },
+      fetchOptions: request ? ( /*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
+          var _createReflectedOptio, _result$total;
+          var current, keyword, rest, result;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                current = params.current, keyword = params.keyword, rest = _objectWithoutProperties(params, _excluded4);
+                _context.next = 3;
+                return request(_objectSpread(_objectSpread({}, rest), {}, _defineProperty({
+                  current: current !== null && current !== void 0 ? current : 1
+                }, searchKey, keyword)));
+              case 3:
+                result = _context.sent;
+                return _context.abrupt("return", {
+                  data: (_createReflectedOptio = createReflectedOptions(result === null || result === void 0 ? void 0 : result.records)) !== null && _createReflectedOptio !== void 0 ? _createReflectedOptio : [],
+                  total: (_result$total = result === null || result === void 0 ? void 0 : result.total) !== null && _result$total !== void 0 ? _result$total : 0
+                });
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x) {
+          return _ref3.apply(this, arguments);
+        };
+      }()) : undefined,
+      options: staticOption
+    }, restFieldProps), {}, {
+      disabled: disabled
+    }))
+  }));
+};
+export default McProSelect;

package/dist/McSelect/components/PanelSearchInput/index.css

@@ -0,0 +1,6 @@
+.mc-search-input__container {
+  margin: 8px;
+}
+.mc-search-input {
+  width: '100%';
+}

package/dist/McSelect/components/PanelSearchInput/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import './index.less';
+interface PanelSearchInputProps {
+    placeholder: string | undefined;
+    searchValue: string | undefined;
+    onSearch: (e: string | undefined) => void;
+}
+export interface PanelSearchInputRef {
+    focus: () => void;
+}
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<PanelSearchInputProps & import("react").RefAttributes<PanelSearchInputRef>>>;
+export default _default;

package/dist/McSelect/components/PanelSearchInput/index.js

@@ -0,0 +1,45 @@
+import { SearchOutlined } from 'much-icons';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
+import McInput from "../../../McInput";
+import "./index.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+var PanelSearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var placeholder = _ref.placeholder,
+    onSearch = _ref.onSearch,
+    searchValue = _ref.searchValue;
+  var inputRef = useRef(null);
+  var focus = function focus() {
+    if (inputRef.current) {
+      setTimeout(function () {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus({
+          cursor: 'all'
+        });
+      }, 200);
+    }
+  };
+  useEffect(focus, []);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: focus
+    };
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: "mc-search-input__container",
+    children: /*#__PURE__*/_jsx(McInput, {
+      ref: inputRef,
+      className: "mc-search-input",
+      placeholder: placeholder || '请输入搜索内容',
+      value: searchValue,
+      onKeyDown: function onKeyDown(e) {
+        // 避免触发原select的keydown，比如删除选项等不符预期的操作
+        if (['Backspace', 'Delete', 'Enter'].includes(e.key)) {
+          e.stopPropagation();
+        }
+      },
+      onChange: onSearch,
+      suffix: /*#__PURE__*/_jsx(SearchOutlined, {})
+    })
+  });
+});
+export default /*#__PURE__*/memo(PanelSearchInput);

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

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

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.js

@@ -130,6 +130,7 @@ export default (function () {
           return _ref3.apply(this, arguments);
         };
       }()),
+      searchInPanel: true,
       multiple: true,
       onChange: setMultipleValue
     }), /*#__PURE__*/_jsx(McSelect, {

package/dist/McSelect/index.d.ts

@@ -1,7 +1,7 @@
 import { SelectProps } from 'antd';
 import { CSSProperties, FC, ReactNode } from 'react';
 import './index.less';
-interface Option {
+export interface Option {
     value: string | number;
     label?: React.ReactNode;
     title?: string;
@@ -25,6 +25,8 @@ export type FetchOptions = (params: {
 export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames'> & {
     style?: CSSProperties;
     className?: string;
+    /** 外部控制展示的options */
+    toFilterOptions?: (options: Option[]) => Option[];
     name?: string;
     label?: ReactNode;
     multiple?: boolean;
@@ -34,7 +36,12 @@ export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames'> & {
     pageSize?: number;
     extra?: any;
     options?: Option[];
-    [key: string]: any;
+    /** 仅多选生效。默认为false，在下拉框中展示搜索框，会影响回车生成新标签等功能 */
+    searchInPanel?: boolean;
+    /** 搜索框提示文字 */
+    searchInPanelPlaceholder?: string;
+    /** 仅多选+("非远程"或"远程+labelvalue"")生效。默认为false，将选中项置顶。 */
+    pinSelectedOptions?: boolean;
 };
 declare const McSelect: FC<McSelectProps>;
 export default McSelect;