@zykj2024/much-library 1.1.7-beta.8 → 1.1.7

package/dist/McSelect/index.css

@@ -0,0 +1,60 @@
+.mc-select__label {
+  color: #262626;
+  font-size: 14px;
+  position: absolute;
+  top: 0;
+  left: 11px;
+  z-index: 2;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.mc-select__label::after {
+  content: '\FF1A';
+  margin-left: 2px;
+}
+.mc-select__label.mc-select--disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: no-drop;
+}
+.mc-select__content {
+  width: 100%;
+  height: 100%;
+}
+.mc-select__content.ant-select .ant-select-selector {
+  padding-left: var(--selector-pl);
+}
+.mc-select__content.ant-select .ant-select-selector .ant-select-selection-overflow-item-rest .ant-select-selection-item {
+  color: #fff;
+  background: #325cf7;
+  padding-left: 4px;
+}
+.mc-select__content.ant-select .ant-select-selector .ant-select-selection-overflow-item-rest .ant-select-selection-item .ant-select-selection-item-content {
+  margin-right: 0;
+}
+.mc-select__content.ant-select .ant-select-selector .ant-select-selection-item[title*='「'][title$='」'] {
+  color: var(--inexistent-color);
+}
+.mc-select__content.ant-select.ant-select-single .ant-select-selector .ant-select-selection-search {
+  left: var(--selector-pl);
+}
+.mc-select__content.ant-select.ant-select-multiple .ant-select-selector .ant-select-selection-placeholder {
+  left: var(--selector-pl);
+}
+.mc-select__content.ant-select.ant-select-multiple .ant-select-selector .ant-select-selection-search {
+  margin-left: 0;
+}
+.mc-select.mc-select--inline .ant-select-selection-overflow-item:not(
+      .ant-select-selection-overflow-item-rest,
+      .ant-select-selection-overflow-item-suffix
+    ) {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  min-width: 0;
+  margin-right: 4px;
+}

package/dist/{esm/McSelect → McSelect}/index.d.ts

@@ -1,15 +1,6 @@
 import { SelectProps } from 'antd';
 import { CSSProperties, FC, ReactNode } from 'react';
 import './index.less';
-export type FetchOptions = (params: {
-    current: number;
-    pageSize: number;
-    keyword?: string;
-    extra?: any;
-}) => Promise<{
-    data: Option[];
-    total: number;
-}>;
 export interface Option {
     value: string | number;
     label?: React.ReactNode;
@@ -18,39 +9,34 @@ export interface Option {
     [key: string]: any;
 }
 type Inexistent = {
-    /** 不存在值的文字描述，默认'不存在' */
     inexistentText?: string;
-    /** 不存在值的文字颜色，默认'#ff4d4f' */
     inexistentColor?: string;
-    /** 是否保留原值，默认false（若为true，则在执行不存在值的判断逻辑时，不向外抛出undefined） */
     reserveOriginalValue?: boolean;
 };
-export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames' | 'prefix'> & {
+export type FetchOptions = (params: {
+    current: number;
+    pageSize: number;
+    keyword?: string;
+    extra?: any;
+}) => Promise<{
+    data: Option[];
+    total: number;
+}>;
+export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames'> & {
     style?: CSSProperties;
     className?: string;
     /** 外部控制展示的options */
     toFilterOptions?: (options: Option[]) => Option[];
-    /** 查询项的字段名（配合McContainer组件的查询功能使用） */
     name?: string;
-    /** 查询项的标签文字（若未设置，样式为表单项形态） */
     label?: ReactNode;
-    /** label是否显示冒号，默认true显示 */
-    colon?: boolean;
-    /** 是否多选，默认false */
     multiple?: boolean;
-    /** 下拉列表隐藏时触发onChange事件，默认false（多选时生效） */
     changeOnHidden?: boolean;
-    /** 是否执行不存在值的判断逻辑，默认false */
     inexistent?: boolean | Inexistent;
-    /** 异步分页查询备选项的方法（设置了该项，则原options无效，且不执行不存在值的判断逻辑） */
     fetchOptions?: FetchOptions;
-    /** 分页大小，默认20 */
     pageSize?: number;
-    /** 分页查询的的额外参数（当额外参数变化时会触发重置查询） */
     extra?: any;
-    /** 备选项 */
     options?: Option[];
-    /** 仅多选生效。默认为false，在下拉框中展示搜索框，会影响回车生成新标签等功能  */
+    /** 仅多选生效。默认为false，在下拉框中展示搜索框，会影响回车生成新标签等功能 */
     searchInPanel?: boolean;
     /** 搜索框提示文字 */
     searchInPanelPlaceholder?: string;

package/dist/{esm/McSelect → McSelect}/index.js

@@ -1,17 +1,16 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
-var _excluded = ["style", "className", "label", "colon", "multiple", "changeOnHidden", "inexistent", "fetchOptions", "pageSize", "extra", "value", "onChange", "labelInValue", "options", "disabled", "maxTagCount", "onSearch", "onPopupScroll", "onBlur", "onDropdownVisibleChange", "toFilterOptions", "searchInPanel", "pinSelectedOptions", "searchInPanelPlaceholder"];
-import { useAsync } from '@zykj2024/much-hooks';
+var _excluded = ["style", "className", "label", "multiple", "changeOnHidden", "inexistent", "fetchOptions", "pageSize", "extra", "value", "onChange", "labelInValue", "options", "disabled", "maxTagCount", "onSearch", "onPopupScroll", "onBlur", "onDropdownVisibleChange", "toFilterOptions", "searchInPanel", "pinSelectedOptions", "searchInPanelPlaceholder"];
 import { Empty, Popover, Select, Spin } from 'antd';
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { debounce } from "../Utils";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import PanelSearchInput from "./components/PanelSearchInput";
-import "./index.less";
+import "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,8 +46,6 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   var style = props.style,
     className = props.className,
     label = props.label,
-    _props$colon = props.colon,
-    colon = _props$colon === void 0 ? true : _props$colon,
     multiple = props.multiple,
     changeOnHidden = props.changeOnHidden,
     _props$inexistent = props.inexistent,
@@ -74,7 +71,6 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
     pinSelectedOptions = _props$pinSelectedOpt === void 0 ? false : _props$pinSelectedOpt,
     searchInPanelPlaceholder = props.searchInPanelPlaceholder,
     rest = _objectWithoutProperties(props, _excluded);
-  // 不存在值默认值处理
   var _ref = typeof inexistent === 'boolean' ? {} : inexistent,
     _ref$inexistentText = _ref.inexistentText,
     inexistentText = _ref$inexistentText === void 0 ? '不存在' : _ref$inexistentText,
@@ -82,25 +78,45 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
     inexistentColor = _ref$inexistentColor === void 0 ? '#ff4d4f' : _ref$inexistentColor,
     _ref$reserveOriginalV = _ref.reserveOriginalValue,
     reserveOriginalValue = _ref$reserveOriginalV === void 0 ? false : _ref$reserveOriginalV;
-  /** 设置最大标签数，默认1 */
-  var curMaxTagCount = useMemo(function () {
+  var _maxTagCount = useMemo(function () {
     return props.hasOwnProperty('maxTagCount') ? maxTagCount : 1;
   }, [maxTagCount]);
-  /* 基础数据 */
-  var _useState = useState(),
+
+  /* 获取label宽度 */
+  var labelRef = useRef();
+  var _useState = useState(11),
     _useState2 = _slicedToArray(_useState, 2),
-    selectValue = _useState2[0],
-    setSelectValue = _useState2[1];
-  var _selectValue = useRef();
-  var _useState3 = useState([]),
+    paddingLeft = _useState2[0],
+    setPaddingLeft = _useState2[1];
+  var labelResizeObserver = new ResizeObserver(function (entries) {
+    setPaddingLeft(entries[0].contentRect.width + 11);
+  });
+  useEffect(function () {
+    labelRef.current && labelResizeObserver.observe(labelRef.current);
+    return function () {
+      return labelResizeObserver.disconnect();
+    };
+  }, []);
+
+  /* 基础数据 */
+  var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    selectOptions = _useState4[0],
-    setSelectOptions = _useState4[1];
-  var _selectOptions = useRef([]);
-  var _useState5 = useState(''),
+    selectValue = _useState4[0],
+    setSelectValue = _useState4[1];
+  var _selectValue = useRef();
+  var _useState5 = useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
-    searchValue = _useState6[0],
-    setSearchValue = _useState6[1];
+    selectOptions = _useState6[0],
+    setSelectOptions = _useState6[1];
+  var _selectOptions = useRef([]);
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchValue = _useState8[0],
+    setSearchValue = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    fetching = _useState10[0],
+    setFetching = _useState10[1];
   var _extra = useRef(null);
   var _current = useRef(1);
   var _maxPage = useRef(1);
@@ -111,76 +127,16 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   var _inexistent = useRef(false);
   var panelSearchInputRef = useRef(null);
   var useDefaultSearch = !(multiple && searchInPanel);
-  var _useAsync = useAsync( /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(keyword, current) {
-        var _yield$fetchOptions, data, total, newOptions;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!fetchOptions) {
-                _context.next = 20;
-                break;
-              }
-              _context.prev = 1;
-              _current.current = current;
-              if (current === 1) {
-                setSelectOptions([]);
-                _selectOptions.current = [];
-                setRemoteOptions([]);
-              }
-              _context.next = 6;
-              return fetchOptions({
-                current: current,
-                pageSize: pageSize,
-                keyword: keyword,
-                extra: extra
-              });
-            case 6:
-              _yield$fetchOptions = _context.sent;
-              data = _yield$fetchOptions.data;
-              total = _yield$fetchOptions.total;
-              newOptions = (current === 1 ? [] : _selectOptions.current || []).concat(data || []);
-              _maxPage.current = Math.ceil(total / pageSize) || 1;
-              // 下拉列表滚动至最新数据的位置
-              if (_listEl.current) {
-                _listEl.current.target.scrollTop = (_selectOptions.current || []).length * 32;
-              }
-              setSelectOptions(newOptions);
-              _selectOptions.current = newOptions;
-              return _context.abrupt("return", newOptions);
-            case 17:
-              _context.prev = 17;
-              _context.t0 = _context["catch"](1);
-              return _context.abrupt("return", []);
-            case 20:
-              return _context.abrupt("return", []);
-            case 21:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[1, 17]]);
-      }));
-      return function (_x, _x2) {
-        return _ref2.apply(this, arguments);
-      };
-    }(), {
-      manual: true
-    }),
-    remoteOptions = _useAsync.data,
-    _loadOptions = _useAsync.run,
-    fetching = _useAsync.loading,
-    setRemoteOptions = _useAsync.mutate;
   var optionWithPriority = useMemo(function () {
-    var curSelectOptions = fetchOptions && remoteOptions ? remoteOptions : selectOptions;
     if (pinSelectedOptions && multiple) {
       if (fetchOptions && !labelInValue) {
         console.warn('远程搜索下，pinSelectedOptions只支持labelInValue模式,建议修改');
       } else {
-        return createPinedSelectedOptions(curSelectOptions, selectValue);
+        return createPinedSelectedOptions(selectOptions, selectValue);
       }
     }
-    return curSelectOptions;
-  }, [selectOptions, selectValue, remoteOptions]);
+    return selectOptions;
+  }, [selectOptions, selectValue]);
   var filteredOptions = toFilterOptions ? toFilterOptions(optionWithPriority) : optionWithPriority; // 只要有render就需要重新生成options
 
   // 监听值和备选项的变化（赋值备选项，执行不存在值的判断逻辑）
@@ -255,7 +211,52 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 
   /* 异步分页查询 */
   // 异步加载备选项的方法
-  var loadOptions = useCallback(_loadOptions, [fetchOptions, pageSize, extra, multiple]);
+  var loadOptions = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(keyword, current) {
+      var _yield$fetchOptions, data, total, newOptions;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!fetchOptions) {
+              _context.next = 15;
+              break;
+            }
+            _current.current = current;
+            if (current === 1) {
+              setSelectOptions([]);
+              _selectOptions.current = [];
+            }
+            setFetching(true);
+            _context.next = 6;
+            return fetchOptions({
+              current: current,
+              pageSize: pageSize,
+              keyword: keyword,
+              extra: extra
+            });
+          case 6:
+            _yield$fetchOptions = _context.sent;
+            data = _yield$fetchOptions.data;
+            total = _yield$fetchOptions.total;
+            newOptions = (current === 1 ? [] : _selectOptions.current || []).concat(data || []);
+            _maxPage.current = Math.ceil(total / pageSize) || 1;
+            // 下拉列表滚动至最新数据的位置
+            if (_listEl.current) {
+              _listEl.current.target.scrollTop = (_selectOptions.current || []).length * 32;
+            }
+            setSelectOptions(newOptions);
+            _selectOptions.current = newOptions;
+            setFetching(false);
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [fetchOptions, pageSize, extra, multiple]);
 
   // 搜索防抖函数
   var debounceSearcher = useMemo(function () {
@@ -362,13 +363,19 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
       })]
     });
   };
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     style: _objectSpread({
+      position: label ? 'relative' : 'static',
       height: multiple ? 'auto' : 32,
+      '--selector-pl': "".concat(paddingLeft, "px"),
       '--inexistent-color': inexistentColor
     }, style),
-    className: "mc-select ".concat(multiple && curMaxTagCount === 1 ? 'mc-select--inline' : '', " ").concat(className || ''),
-    children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
+    className: "mc-select ".concat(multiple && _maxTagCount === 1 ? 'mc-select--inline' : '', " ").concat(className || ''),
+    children: [label && /*#__PURE__*/_jsx("span", {
+      ref: labelRef,
+      className: "mc-select__label ".concat(disabled ? 'mc-select--disabled' : ''),
+      children: label
+    }), /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
       ref: ref,
       className: "mc-select__content",
       value: selectValue,
@@ -376,26 +383,16 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
       labelInValue: labelInValue,
       options: filteredOptions,
       disabled: disabled,
-      prefix: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [label, label && colon && /*#__PURE__*/_jsx("span", {
-          style: {
-            marginLeft: 2
-          },
-          children: "\uFF1A"
-        })]
-      }),
       placeholder: "\u8BF7\u9009\u62E9",
       showSearch: useDefaultSearch // 否则会和panel中的search冲突
       ,
       optionFilterProp: "label",
       allowClear: true,
-      maxTagCount: curMaxTagCount,
+      maxTagCount: _maxTagCount,
       maxTagPlaceholder: function maxTagPlaceholder(v) {
         return /*#__PURE__*/_jsx(Popover, {
-          styles: {
-            root: {
-              maxWidth: 300
-            }
+          overlayStyle: {
+            maxWidth: 300
           },
           content: v.map(function (_ref3, index) {
             var _ref4;
@@ -433,7 +430,7 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
     }, rest), {}, {
       mode: multiple ? 'multiple' : undefined,
       fieldNames: undefined
-    }))
+    }))]
   });
 });
 export default McSelect;

package/dist/McTag/demo/demo1.d.ts

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

package/dist/McTag/demo/demo1.js

@@ -0,0 +1,18 @@
+/**
+ * title: 设置本身宽度以支持ellipsis
+ * description: 在McTag上设置宽度，以支持ellipsis。同时支持复制
+ */
+import McTag from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var uri = '/recommend/page/123/page/123/page/123';
+  return /*#__PURE__*/_jsx(McTag, {
+    style: {
+      maxWidth: 150
+    },
+    ellipsis: true,
+    color: "blue",
+    copyable: true,
+    children: uri
+  });
+});

package/dist/McTag/demo/demo2.d.ts

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

package/dist/McTag/demo/demo2.js

@@ -0,0 +1,20 @@
+/**
+ * title: 设置父组件宽度以支持ellipsis
+ * description: 在McTag上设置宽度，以支持ellipsis。同时支持复制
+ */
+import McTag from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var uri = '/recommend/page/123/page/123/page/123';
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: 200
+    },
+    children: /*#__PURE__*/_jsx(McTag, {
+      color: "blue",
+      copyable: true,
+      ellipsis: true,
+      children: uri
+    })
+  });
+});

package/dist/McTag/demo/demo3.d.ts

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

package/dist/McTag/demo/demo3.js

@@ -0,0 +1,19 @@
+/**
+ * title: 支持复制
+ * description: 普通McTag模式也支持复制
+ */
+import { ExclamationCircleOutlined } from 'much-icons';
+import McTag from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(McTag, {
+    style: {
+      maxWidth: 150
+    },
+    ellipsis: true,
+    color: "warning",
+    icon: /*#__PURE__*/_jsx(ExclamationCircleOutlined, {}),
+    copyable: true,
+    children: "click me to copy"
+  });
+});

package/dist/McTag/demo/demo4.d.ts

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

package/dist/McTag/demo/demo4.js

@@ -0,0 +1,22 @@
+/**
+ * title: 自定义ellipsis属性
+ */
+import McTag from "../index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var uri = '/recommend/page/123/page/123/page/123';
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: 200
+    },
+    children: /*#__PURE__*/_jsx(McTag, {
+      color: "blue",
+      copyable: true,
+      ellipsis: {
+        tooltip: true,
+        suffix: '等'
+      },
+      children: uri
+    })
+  });
+});

package/dist/McThemeConfig/demo/button.d.ts

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