@zykj2024/much-library 1.1.9 → 2.0.0-beta.1

package/dist/McDateRangePro/index.js

@@ -0,0 +1,418 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["style", "className", "label", "valueFormat", "dateType", "dynamic", "showTime", "disabled", "value", "onChange"];
+import { useEmotionCss } from '@ant-design/use-emotion-css';
+import { DatePicker, Tabs } from 'antd';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import ShortcutItem, { CODE_LABEL_MAP } from "./comps/ShortcutItem";
+import "./index.css";
+
+// 获取动态日期显示内容
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var getDynamicLabel = function getDynamicLabel(dynamicValue) {
+  // 'M_N'表示为一个不存在的值
+  var _dynamicValue = dynamicValue || 'M_N';
+  var _dynamicLabel = CODE_LABEL_MAP[_dynamicValue];
+  if (!_dynamicLabel) {
+    var _dynamicValue$split$m = _dynamicValue.split('_').map(function (v) {
+        return isNaN(+v) ? undefined : +v;
+      }),
+      _dynamicValue$split$m2 = _slicedToArray(_dynamicValue$split$m, 2),
+      n1 = _dynamicValue$split$m2[0],
+      n2 = _dynamicValue$split$m2[1];
+    if (n1 !== undefined && n2 !== undefined) {
+      if (n1 < 0 && n2 === 0) {
+        // 最近n日
+        _dynamicLabel = "\u6700\u8FD1".concat(-n1 + 1, "\u65E5");
+      } else if (n1 < 0 && n2 === -1) {
+        // 过去n日
+        _dynamicLabel = "\u8FC7\u53BB".concat(-n1, "\u65E5");
+      } else if (n1 === 0 && n2 > 0) {
+        // 今天 - 未来n日
+        _dynamicLabel = "\u4ECA\u5929 - \u672A\u6765".concat(n2, "\u65E5");
+      } else if (n1 > 0 && n2 > 0 && n1 <= n2) {
+        // 未来m日 - 未来n日
+        _dynamicLabel = "\u672A\u6765".concat(n1, "\u65E5 - \u672A\u6765").concat(n2, "\u65E5");
+      }
+    }
+  }
+  return _dynamicLabel;
+};
+var McDateRangePro = /*#__PURE__*/forwardRef(function (props, ref) {
+  /* 获取label宽度 */
+  var labelRef = useRef();
+  var _useState = useState(11),
+    _useState2 = _slicedToArray(_useState, 2),
+    paddingLeft = _useState2[0],
+    setPaddingLeft = _useState2[1];
+  useEffect(function () {
+    var labelResizeObserver = new ResizeObserver(function (entries) {
+      setPaddingLeft(entries[0].contentRect.width + 11);
+    });
+    labelRef.current && labelResizeObserver.observe(labelRef.current);
+    return function () {
+      return labelResizeObserver.disconnect();
+    };
+  }, []);
+
+  /* 基础数据 */
+  var style = props.style,
+    className = props.className,
+    label = props.label,
+    valueFormat = props.valueFormat,
+    dateType = props.dateType,
+    _props$dynamic = props.dynamic,
+    dynamic = _props$dynamic === void 0 ? false : _props$dynamic,
+    _props$showTime = props.showTime,
+    showTime = _props$showTime === void 0 ? false : _props$showTime,
+    disabled = props.disabled,
+    value = props.value,
+    onChange = props.onChange,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _valueFormat = valueFormat || (showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD');
+  var _dynamic = dateType && dynamic;
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _value = _useState4[0],
+    set_value = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var _useState7 = useState('static'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    type = _useState8[0],
+    setType = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    inActiveArea = _useState10[0],
+    setInActiveArea = _useState10[1];
+  var _useState11 = useState(),
+    _useState12 = _slicedToArray(_useState11, 2),
+    activeCode = _useState12[0],
+    setActiveCode = _useState12[1];
+  var _useState13 = useState(),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dynamicValue = _useState14[0],
+    setDynamicValue = _useState14[1];
+  var isInit = useRef(false);
+  var oldType = useRef('static');
+  var newType = useRef('static');
+  var oldActiveCode = useRef();
+  var oldValue = useRef();
+  var newValue = useRef();
+  var shortcutItemRefs = useRef({
+    '-n_0': useRef(),
+    '-n_-1': useRef(),
+    '0_n': useRef(),
+    m_n: useRef()
+  });
+  var dynamicWidth = dynamic || dateType === 'future' ? 208 : 120;
+  var rootClassName = useEmotionCss(function () {
+    return {
+      '.ant-picker-footer-extra': {
+        width: dynamicWidth
+      },
+      '.ant-picker-ranges': {
+        width: "calc(100% - ".concat(dynamicWidth, "px) !important")
+      }
+    };
+  });
+
+  // 快捷项集合
+  var shortcutItems = useMemo(function () {
+    return dateType === 'future' ? ['0_0', '0_n', 'm_n'] : ['0_0', '-1_-1', '-6_0', '-29_0', '-59_0', '-89_0', '-n_0', '-n_-1'];
+  }, [dateType]);
+
+  // 动态日期显示内容
+  var dynamicLabel = useMemo(function () {
+    return getDynamicLabel(dynamicValue);
+  }, [dynamicValue]);
+
+  // 异常数据抛出静态日期
+  var changeToStatic = function changeToStatic(v) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(v.map(function (i) {
+      return i === null || i === void 0 ? void 0 : i.format(_valueFormat);
+    }));
+  };
+
+  // 回显的方法
+  var echo = function echo() {
+    var _v = null,
+      _type = 'static',
+      _activeCode = undefined,
+      _dynamicValue = undefined;
+    if (value) {
+      if (typeof value === 'string') {
+        // 动态日期
+        _v = value.split('_').map(function (v) {
+          return isNaN(+v) ? undefined : dayjs().add(+v, 'd');
+        });
+        if (dateType === 'past') {
+          // 过去
+          if (['0_0', '-1_-1', '-6_0', '-29_0', '-59_0', '-89_0'].includes(value)) {
+            _type = 'dynamic';
+            _activeCode = value;
+            _dynamicValue = value;
+          } else {
+            var _value$split$map = value.split('_').map(function (v) {
+                return isNaN(+v) ? undefined : +v;
+              }),
+              _value$split$map2 = _slicedToArray(_value$split$map, 2),
+              n1 = _value$split$map2[0],
+              n2 = _value$split$map2[1];
+            if (n1 !== undefined && n2 !== undefined) {
+              if (n1 < 0 && n2 === 0) {
+                // 最近n日
+                _type = 'dynamic';
+                _activeCode = '-n_0';
+                _dynamicValue = value;
+              } else if (n1 < 0 && n2 === -1) {
+                // 过去n日
+                _type = 'dynamic';
+                _activeCode = '-n_-1';
+                _dynamicValue = value;
+              } else {
+                // 异常数据抛出静态日期
+                changeToStatic(_v);
+              }
+            } else {
+              // 异常数据抛出静态日期
+              changeToStatic(_v);
+            }
+          }
+        } else if (dateType === 'future') {
+          // 未来
+          var _value$split$map3 = value.split('_').map(function (v) {
+              return isNaN(+v) ? undefined : +v;
+            }),
+            _value$split$map4 = _slicedToArray(_value$split$map3, 2),
+            _n = _value$split$map4[0],
+            _n2 = _value$split$map4[1];
+          if (_n !== undefined && _n2 !== undefined) {
+            if (_n === 0 && _n2 === 0) {
+              // 今天
+              _type = 'dynamic';
+              _activeCode = '0_0';
+              _dynamicValue = value;
+            } else if (_n === 0 && _n2 > 0) {
+              // 今天 - 未来n日
+              _type = 'dynamic';
+              _activeCode = '0_n';
+              _dynamicValue = value;
+            } else if (_n > 0 && _n2 > 0 && _n <= _n2) {
+              // 未来m日 - 未来n日
+              _type = 'dynamic';
+              _activeCode = 'm_n';
+              _dynamicValue = value;
+            } else {
+              // 异常数据抛出静态日期
+              changeToStatic(_v);
+            }
+          } else {
+            // 异常数据抛出静态日期
+            changeToStatic(_v);
+          }
+        } else {
+          // 异常数据抛出静态日期
+          changeToStatic(_v);
+        }
+      } else {
+        // 静态日期
+        _v = value.map(function (i) {
+          return i && dayjs(i, _valueFormat);
+        });
+      }
+    }
+    set_value(_v);
+    setType(_type);
+    setActiveCode(_activeCode);
+    setDynamicValue(_dynamicValue);
+    oldType.current = _type;
+    newType.current = _type;
+    oldActiveCode.current = _activeCode;
+    oldValue.current = _v;
+    newValue.current = _v;
+  };
+
+  // 日期范围变化事件
+  var change = function change(dates) {
+    set_value(dates);
+    setDynamicValue(undefined);
+    newValue.current = dates;
+    // 清空时抛出undefined
+    dates === null && (onChange === null || onChange === void 0 ? void 0 : onChange(undefined));
+  };
+
+  // 快捷项取消激活事件
+  var inActiveHandle = function inActiveHandle() {
+    setInActiveArea(false);
+    setActiveCode(newType.current === 'dynamic' ? oldActiveCode.current : undefined);
+    props.hasOwnProperty('value') && set_value(oldValue.current);
+  };
+
+  // 初始化监听日历选择面板的鼠标移入移出事件
+  var initMouseEnterLeave = function initMouseEnterLeave() {
+    if (isInit.current) return;
+    setTimeout(function () {
+      var panelsEl = document.querySelector('.mc-date-range-pro__popup .ant-picker-panels');
+      panelsEl === null || panelsEl === void 0 || panelsEl.addEventListener('mouseenter', function () {
+        setInActiveArea(true);
+        setActiveCode(undefined);
+      });
+      panelsEl === null || panelsEl === void 0 || panelsEl.addEventListener('mouseleave', inActiveHandle);
+      isInit.current = true;
+    });
+  };
+
+  // 改变值的方法
+  var changeHandle = function changeHandle(newValue, code) {
+    if (newValue) {
+      var _oldValue$current;
+      var _new = newValue.map(function (i) {
+        return i === null || i === void 0 ? void 0 : i.format(_valueFormat);
+      });
+      var _old = (_oldValue$current = oldValue.current) === null || _oldValue$current === void 0 ? void 0 : _oldValue$current.map(function (i) {
+        return i === null || i === void 0 ? void 0 : i.format(_valueFormat);
+      });
+      var changeFn = function changeFn() {
+        var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+        return (force ? true : JSON.stringify(_new) !== JSON.stringify(_old)) && (code ? onChange === null || onChange === void 0 ? void 0 : onChange(code, _new) : onChange === null || onChange === void 0 ? void 0 : onChange(_new));
+      };
+      /**
+       * 无需判断新旧值是否相同，强制onChange的情况：
+       * 旧-静态日期 && 新-动态日期 && 新-快捷项有值
+       * 旧-动态日期 && 新-静态日期 && 新-快捷项有值
+       * 旧-动态日期 && 新-动态日期 && 新-快捷项无值
+       */
+      changeFn(oldType.current === 'static' && type === 'dynamic' && !!activeCode || oldType.current === 'dynamic' && (type === 'static' && !!activeCode || type === 'dynamic' && !activeCode));
+    }
+  };
+
+  // 日历面板显隐事件
+  var openChange = function openChange(open) {
+    setOpen(open);
+    initMouseEnterLeave();
+    if (open) {
+      // 显示时初始化左侧快捷栏
+      setType(oldType.current);
+      newType.current = oldType.current;
+      setActiveCode(oldActiveCode.current);
+      oldType.current === 'dynamic' && setTimeout(function () {
+        var _shortcutItemRefs$cur;
+        (_shortcutItemRefs$cur = shortcutItemRefs.current[oldActiveCode.current]) === null || _shortcutItemRefs$cur === void 0 || (_shortcutItemRefs$cur = _shortcutItemRefs$cur.current) === null || _shortcutItemRefs$cur === void 0 || _shortcutItemRefs$cur.resetNs(value);
+      });
+    } else {
+      // 隐藏时触发改变值的方法
+      changeHandle(newValue.current);
+    }
+  };
+
+  // 快捷项激活事件
+  var activeHandle = function activeHandle(code, dates) {
+    setInActiveArea(true);
+    setActiveCode(code);
+    set_value(dates.map(function (v, i) {
+      return v === undefined ? undefined : dayjs().add(v, 'd')[i ? 'endOf' : 'startOf']('day');
+    }));
+  };
+
+  // 快捷项选择事件
+  var selectHandle = function selectHandle(dates) {
+    var newValue = dates.map(function (v, i) {
+      return dayjs().add(v, 'd')[i ? 'endOf' : 'startOf']('day');
+    });
+    set_value(newValue);
+    setDynamicValue(newType.current === 'dynamic' ? dates.join('_') : undefined);
+    changeHandle(newValue, newType.current === 'dynamic' ? dates.join('_') : undefined);
+    setOpen(false);
+  };
+
+  // 监听value值变化，处理回显逻辑
+  useEffect(function () {
+    echo();
+  }, [value]);
+  return /*#__PURE__*/_jsxs("div", {
+    style: style,
+    className: "".concat(classNames('mc-date-range-pro', className)),
+    children: [label && /*#__PURE__*/_jsx("span", {
+      ref: labelRef,
+      className: classNames('mc-date-range-pro__label', disabled && 'mc-date-range-pro--disabled'),
+      children: label
+    }), /*#__PURE__*/_jsx(DatePicker.RangePicker, _objectSpread(_objectSpread({
+      ref: ref,
+      style: {
+        paddingLeft: paddingLeft
+      },
+      className: "mc-date-range-pro__content",
+      classNames: {
+        popup: {
+          root: classNames('mc-date-range-pro__popup', showTime && 'mc-date-range-pro__popup--time', dateType && 'mc-date-range-pro__popup--preset', rootClassName)
+        }
+      },
+      showTime: showTime,
+      disabled: disabled,
+      minDate: dateType === 'future' ? dayjs() : undefined,
+      maxDate: dateType === 'past' ? dayjs() : undefined
+    }, rest), {}, {
+      value: _value,
+      onChange: change,
+      open: open,
+      onOpenChange: openChange,
+      presets: undefined,
+      renderExtraFooter: function renderExtraFooter() {
+        return dateType ? /*#__PURE__*/_jsxs("div", {
+          className: "mc-date-range-pro__presets",
+          children: [_dynamic && /*#__PURE__*/_jsx(Tabs, {
+            className: "mc-date-range-pro__presets__types",
+            items: [{
+              key: 'static',
+              label: '静态日期'
+            }, {
+              key: 'dynamic',
+              label: '动态日期'
+            }],
+            activeKey: type,
+            onChange: function onChange(v) {
+              setType(v);
+              newType.current = v;
+              setActiveCode(v === 'dynamic' ? oldActiveCode.current : undefined);
+            }
+          }), /*#__PURE__*/_jsx("div", {
+            className: "mc-date-range-pro__presets__list",
+            style: {
+              top: _dynamic ? 41 : 0
+            },
+            children: shortcutItems.map(function (code) {
+              return /*#__PURE__*/_jsx(ShortcutItem, {
+                ref: shortcutItemRefs.current[code],
+                code: code,
+                inActiveArea: inActiveArea,
+                active: activeCode === code,
+                onActive: function onActive(dates) {
+                  return activeHandle(code, dates);
+                },
+                onInactive: inActiveHandle,
+                onSelected: selectHandle
+              }, code);
+            })
+          })]
+        }) : undefined;
+      }
+    })), dynamicLabel && /*#__PURE__*/_jsx("span", {
+      className: "mc-date-range-pro__dynamic-value",
+      style: {
+        left: paddingLeft + 1
+      },
+      onClick: function onClick() {
+        return openChange(true);
+      },
+      children: dynamicLabel
+    })]
+  });
+});
+export default McDateRangePro;

package/dist/McNumberRangeInput/demo/base.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 基础用法
+ * description: 数字区间输入框的基础用法
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McNumberRangeInput/demo/base.js

@@ -0,0 +1,84 @@
+/**
+ * title: 基础用法
+ * description: 数字区间输入框的基础用法
+ */
+
+import { Space } from 'antd';
+import { McNumberRangeInput } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs(Space, {
+    direction: "vertical",
+    size: 16,
+    children: [/*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: "\u5E38\u89C4"
+      }), /*#__PURE__*/_jsx(McNumberRangeInput, {
+        style: {
+          width: 300
+        }
+      })]
+    }), /*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: "\u7981\u7528"
+      }), /*#__PURE__*/_jsx(McNumberRangeInput, {
+        value: {
+          start: 1,
+          end: 10
+        },
+        style: {
+          width: 300
+        },
+        disabled: true
+      })]
+    }), /*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: "\u4E0D\u663E\u793A\u6E05\u9664\u6309\u94AE"
+      }), /*#__PURE__*/_jsx(McNumberRangeInput, {
+        style: {
+          width: 300
+        },
+        allowClear: false
+      })]
+    }), /*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: "\u6700\u591A\u4FDD\u75592\u4F4D\u5C0F\u6570"
+      }), /*#__PURE__*/_jsx(McNumberRangeInput, {
+        style: {
+          width: 300
+        },
+        precision: 2
+      })]
+    }), /*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: "\u81EA\u5B9A\u4E49\u5206\u9694\u7B26"
+      }), /*#__PURE__*/_jsx(McNumberRangeInput, {
+        style: {
+          width: 300
+        },
+        separator: "\u81F3"
+      })]
+    }), /*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: "\u81EA\u5B9A\u4E49\u5360\u4F4D\u7B26"
+      }), /*#__PURE__*/_jsx(McNumberRangeInput, {
+        style: {
+          width: 350
+        },
+        placeholders: ['自定义最小值占位符', '自定义最大值占位符']
+      })]
+    }), /*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: "\u81EA\u5B9A\u4E49\u6700\u5C0F\u503C\u3001\u6700\u5927\u503C"
+      }), /*#__PURE__*/_jsx(McNumberRangeInput, {
+        style: {
+          width: 300
+        },
+        min: 1,
+        max: 10,
+        placeholders: ['最小值为1', '最大值为10']
+      })]
+    })]
+  });
+});

package/dist/McNumberRangeInput/index.css

@@ -0,0 +1,87 @@
+.mc-number-range-input {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  width: 100%;
+  height: 32px;
+  padding: 0 10px;
+  overflow: hidden;
+  background: #f0f2f5;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.mc-number-range-input__label {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  color: #262626;
+  font-size: 14px;
+}
+.mc-number-range-input__label::after {
+  margin-left: 2px;
+  content: '\FF1A';
+}
+.mc-number-range-input__content {
+  position: relative;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.mc-number-range-input__wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.mc-number-range-input__number {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding: 0;
+  border-color: transparent !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+.mc-number-range-input__separator {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 8px;
+}
+.mc-number-range-input:hover {
+  border-color: #5c85ff;
+}
+.mc-number-range-input:focus-within {
+  border-color: #325cf7;
+  -webkit-box-shadow: 0 0 0 2px rgba(5, 105, 255, 0.06);
+  box-shadow: 0 0 0 2px rgba(5, 105, 255, 0.06);
+}
+.mc-number-range-input.mc-number-range-input--disabled {
+  background: rgba(240, 242, 245, 0.5);
+  border-color: transparent;
+  cursor: no-drop;
+}
+.mc-number-range-input.mc-number-range-input--disabled .mc-number-range-input__number {
+  background: transparent !important;
+}
+.mc-number-range-input.mc-number-range-input--disabled .mc-number-range-input__separator {
+  color: #b3b3b3;
+}
+.mc-container .mc-number-range-input {
+  width: 270px;
+}
+.ant-form-item-has-error .mc-number-range-input {
+  border-color: #ff4d4f;
+}

package/dist/McNumberRangeInput/index.d.ts

@@ -0,0 +1,37 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import './index.less';
+interface ValueType {
+    start?: number;
+    end?: number;
+}
+export interface McNumberRangeInputProps {
+    /**  查询项的字段名（配合McContainer组件的查询功能使用） */
+    name?: string;
+    /** 查询项的标签文字（若未设置，样式为表单项形态） */
+    label?: ReactNode;
+    /** 默认文本，默认['最小值', '最大值'] */
+    placeholders?: [string, string];
+    /** 最小值 */
+    min?: number;
+    /** 最大值 */
+    max?: number;
+    /** 最多保留多少位小数，默认0 */
+    precision?: number;
+    /** 分隔符，默认'~' */
+    separator?: ReactNode;
+    /** 是否可清除，默认true */
+    allowClear?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    value?: ValueType;
+    onChange?: (value?: ValueType) => void;
+    style?: CSSProperties;
+    className?: string;
+    ref?: any;
+}
+export type McNumberRangeInputRef = {
+    /** 校验大小值的方法 */
+    validate: (key?: 'start' | 'end') => boolean;
+};
+declare const McNumberRangeInput: FC<McNumberRangeInputProps>;
+export default McNumberRangeInput;