@zykj2024/much-library 1.1.7-beta.1 → 1.1.7-beta.10

package/dist/esm/McPeriodSelect/index.less

@@ -0,0 +1,187 @@
+.mc-period-select {
+  width: 960px;
+  background: #fff;
+  border: 1px solid #ebebeb;
+  border-radius: 4px;
+
+  &__header {
+    display: flex;
+    height: 68px;
+    color: rgba(0, 0, 0, 84.7%);
+    font-weight: bold;
+    font-size: 14px;
+    border-bottom: 1px solid #ebebeb;
+  }
+
+  &__title {
+    flex-shrink: 0;
+    width: 95px;
+    line-height: 68px;
+    text-align: center;
+    border-right: 1px solid #ebebeb;
+  }
+
+  &__subtitle-box {
+    flex: 1;
+  }
+
+  &__time-bar {
+    display: flex;
+    border-bottom: 1px solid #ebebeb;
+
+    div {
+      flex: 1;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+
+      &:last-child {
+        border-left: 1px solid #ebebeb;
+      }
+    }
+  }
+
+  &__hour-bar {
+    display: flex;
+
+    div {
+      width: 36px;
+      height: 27px;
+      color: rgba(0, 0, 0, 65%);
+      font-weight: normal;
+      font-size: 12px;
+      line-height: 27px;
+      text-align: center;
+    }
+  }
+
+  &__body {
+    display: flex;
+  }
+
+  &__side-bar {
+    width: 95px;
+    border-right: 1px solid #ebebeb;
+
+    div {
+      height: 52px;
+      color: rgba(0, 0, 0, 65%);
+      line-height: 52px;
+      text-align: center;
+      background: #f9f9f9;
+      border-bottom: 1px solid #ebebeb;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  &__wrapper {
+    flex: 1;
+  }
+
+  &__day {
+    display: flex;
+
+    &:last-child .mc-period-select__item {
+      border-bottom: 0;
+    }
+  }
+
+  &__item {
+    position: relative;
+    flex: 1;
+    height: 52px;
+    background: #f9f9f9;
+    border-right: 1px solid #ebebeb;
+    border-bottom: 1px solid #ebebeb;
+
+    &__mask {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: none;
+      background: #91caff;
+      opacity: 0.5;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    &.mc-period-select__item--selected {
+      background: #325cf7;
+    }
+
+    &.mc-period-select__item--active .mc-period-select__item__mask {
+      display: block;
+    }
+  }
+
+  &__footer {
+    padding: 24px;
+    border-top: 1px solid #ebebeb;
+  }
+
+  &__action-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: rgba(0, 0, 0, 42.8%);
+  }
+
+  &__selected-item {
+    display: flex;
+    margin-top: 16px;
+    padding: 5px 8px;
+    color: rgba(0, 0, 0, 85%);
+    line-height: 22px;
+    background: #f5f5f5;
+    border-radius: 4px;
+
+    &__title {
+      flex-shrink: 0;
+      margin-right: 8px;
+    }
+
+    &__content {
+      flex: 1;
+      margin-right: 16px;
+    }
+
+    &__remove {
+      height: 22px;
+      margin-left: auto;
+      color: #8c8c8c;
+
+      &:hover {
+        color: #262626;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.mc-period-select.mc-period-select--disabled {
+  position: relative;
+  user-select: none;
+  // pointer-events: none;
+}
+
+.mc-period-select.mc-period-select--disabled::before {
+  position: absolute;
+  display: block;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 4%);
+  cursor: not-allowed;
+  content: '';
+  // pointer-events: none;
+}

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

@@ -1,8 +1,8 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["title", "description", "btnText", "btnProps", "children", "placement", "disabled", "onConfirm"];
+import { WarningFilled } from '@zykj2024/much-icons';
 import { Button, Popconfirm } from 'antd';
-import { WarningFilled } from 'much-icons';
 import React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var McPopoverButton = function McPopoverButton(_ref) {

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

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useMemo } from 'react';
 import { DEFAULT_MAP } from "./default";
 import Icon from "./icon";
-import "./index.css";
+import "./index.less";
 
 // UI设计稿：https://mastergo.com/file/124592686063679?fileOpenFrom=project
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/esm/McResult/index.less

@@ -0,0 +1,18 @@
+.mc-result {
+  display: flex;
+  justify-content: center;
+  column-gap: 20px;
+
+  .mc-result-main {
+    .status {
+      margin-bottom: 8px;
+    }
+
+    .title {
+      margin-bottom: 16px;
+      color: #262626;
+      font-weight: bold;
+      font-size: 20px;
+    }
+  }
+}

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

@@ -1,7 +1,7 @@
-import { SearchOutlined } from 'much-icons';
+import { SearchOutlined } from '@zykj2024/much-icons';
 import { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';
 import McInput from "../../../McInput";
-import "./index.css";
+import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 var PanelSearchInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var placeholder = _ref.placeholder,

package/dist/{McSelect/components/PanelSearchInput/index.css → esm/McSelect/components/PanelSearchInput/index.less}

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

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

@@ -1,6 +1,15 @@
 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;
@@ -9,34 +18,39 @@ export interface Option {
     [key: string]: any;
 }
 type Inexistent = {
+    /** 不存在值的文字描述，默认'不存在' */
     inexistentText?: string;
+    /** 不存在值的文字颜色，默认'#ff4d4f' */
     inexistentColor?: string;
+    /** 是否保留原值，默认false（若为true，则在执行不存在值的判断逻辑时，不向外抛出undefined） */
     reserveOriginalValue?: boolean;
 };
-export type FetchOptions = (params: {
-    current: number;
-    pageSize: number;
-    keyword?: string;
-    extra?: any;
-}) => Promise<{
-    data: Option[];
-    total: number;
-}>;
-export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames'> & {
+export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames' | 'prefix'> & {
     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/{McSelect → esm/McSelect}/index.js

@@ -1,16 +1,17 @@
+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", "multiple", "changeOnHidden", "inexistent", "fetchOptions", "pageSize", "extra", "value", "onChange", "labelInValue", "options", "disabled", "maxTagCount", "onSearch", "onPopupScroll", "onBlur", "onDropdownVisibleChange", "toFilterOptions", "searchInPanel", "pinSelectedOptions", "searchInPanelPlaceholder"];
+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';
 import { Empty, Popover, Select, Spin } from 'antd';
-import { debounce } from "../Utils";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { debounce } from "../Utils";
 import PanelSearchInput from "./components/PanelSearchInput";
-import "./index.css";
+import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,6 +47,8 @@ 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,
@@ -71,6 +74,7 @@ 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,
@@ -78,45 +82,25 @@ 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;
-  var _maxTagCount = useMemo(function () {
+  /** 设置最大标签数，默认1 */
+  var curMaxTagCount = useMemo(function () {
     return props.hasOwnProperty('maxTagCount') ? maxTagCount : 1;
   }, [maxTagCount]);
-
-  /* 获取label宽度 */
-  var labelRef = useRef();
-  var _useState = useState(11),
-    _useState2 = _slicedToArray(_useState, 2),
-    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),
-    selectValue = _useState4[0],
-    setSelectValue = _useState4[1];
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectValue = _useState2[0],
+    setSelectValue = _useState2[1];
   var _selectValue = useRef();
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectOptions = _useState6[0],
-    setSelectOptions = _useState6[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectOptions = _useState4[0],
+    setSelectOptions = _useState4[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 _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchValue = _useState6[0],
+    setSearchValue = _useState6[1];
   var _extra = useRef(null);
   var _current = useRef(1);
   var _maxPage = useRef(1);
@@ -127,16 +111,76 @@ 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(selectOptions, selectValue);
+        return createPinedSelectedOptions(curSelectOptions, selectValue);
       }
     }
-    return selectOptions;
-  }, [selectOptions, selectValue]);
+    return curSelectOptions;
+  }, [selectOptions, selectValue, remoteOptions]);
   var filteredOptions = toFilterOptions ? toFilterOptions(optionWithPriority) : optionWithPriority; // 只要有render就需要重新生成options
 
   // 监听值和备选项的变化（赋值备选项，执行不存在值的判断逻辑）
@@ -211,52 +255,7 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 
   /* 异步分页查询 */
   // 异步加载备选项的方法
-  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 loadOptions = useCallback(_loadOptions, [fetchOptions, pageSize, extra, multiple]);
 
   // 搜索防抖函数
   var debounceSearcher = useMemo(function () {
@@ -363,19 +362,13 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
       })]
     });
   };
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("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 && _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({
+    className: "mc-select ".concat(multiple && curMaxTagCount === 1 ? 'mc-select--inline' : '', " ").concat(className || ''),
+    children: /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
       ref: ref,
       className: "mc-select__content",
       value: selectValue,
@@ -383,16 +376,26 @@ 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: _maxTagCount,
+      maxTagCount: curMaxTagCount,
       maxTagPlaceholder: function maxTagPlaceholder(v) {
         return /*#__PURE__*/_jsx(Popover, {
-          overlayStyle: {
-            maxWidth: 300
+          styles: {
+            root: {
+              maxWidth: 300
+            }
           },
           content: v.map(function (_ref3, index) {
             var _ref4;
@@ -430,7 +433,7 @@ var McSelect = /*#__PURE__*/forwardRef(function (props, ref) {
     }, rest), {}, {
       mode: multiple ? 'multiple' : undefined,
       fieldNames: undefined
-    }))]
+    }))
   });
 });
 export default McSelect;

package/dist/esm/McSelect/index.less

@@ -0,0 +1,38 @@
+.mc-select {
+  &__content {
+    width: 100%;
+    height: 100%;
+
+    &.ant-select {
+      .ant-select-selector {
+        .ant-select-prefix {
+          margin-right: 0;
+        }
+
+        .ant-select-selection-overflow-item-rest .ant-select-selection-item {
+          color: #fff;
+          background: #325cf7;
+          padding-left: 4px;
+
+          .ant-select-selection-item-content {
+            margin-right: 0;
+          }
+        }
+
+        .ant-select-selection-item[title*='「'][title$='」'] {
+          color: var(--inexistent-color);
+        }
+      }
+    }
+  }
+
+  &.mc-select--inline
+    .ant-select-selection-overflow-item:not(
+      .ant-select-selection-overflow-item-rest,
+      .ant-select-selection-overflow-item-suffix
+    ) {
+    flex: 1;
+    min-width: 0;
+    margin-right: 4px;
+  }
+}