@zykj2024/much-library 1.1.7-beta.2 → 1.1.7-beta.4

package/dist/esm/McDateRange/index.js

@@ -0,0 +1,167 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "className", "label", "valueFormat", "value", "onChange", "onShortcut", "disabled"];
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import "./index.less";
+
+/* 快捷选择日期对应值的映射集合 */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var shortcutValueMap = {
+  today: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
+  yesterday: [dayjs().add(-1, 'd').format('YYYY-MM-DD'), dayjs().add(-1, 'd').format('YYYY-MM-DD')],
+  last7days: [dayjs().add(-6, 'd').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
+  last30days: [dayjs().add(-29, 'd').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
+  last60days: [dayjs().add(-59, 'd').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
+  last90days: [dayjs().add(-89, 'd').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
+};
+export var SHORTCUT_VALUE_MAP = shortcutValueMap;
+var McDateRange = /*#__PURE__*/forwardRef(function (props, ref) {
+  var style = props.style,
+    className = props.className,
+    label = props.label,
+    _props$valueFormat = props.valueFormat,
+    valueFormat = _props$valueFormat === void 0 ? 'YYYY-MM-DD' : _props$valueFormat,
+    value = props.value,
+    onChange = props.onChange,
+    onShortcut = props.onShortcut,
+    disabled = props.disabled,
+    rest = _objectWithoutProperties(props, _excluded);
+
+  /* 获取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 () {
+    if (labelRef.current) {
+      labelResizeObserver.observe(labelRef.current);
+    }
+    return function () {
+      return labelResizeObserver.disconnect();
+    };
+  }, []);
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    privateValue = _useState4[0],
+    setPrivateValue = _useState4[1];
+  var currentRef = useRef();
+  var oldRef = useRef();
+  var isShortcutRef = useRef(false);
+  useEffect(function () {
+    var tempValue = value ? value === null || value === void 0 ? void 0 : value.map(function (i) {
+      return dayjs(i, valueFormat);
+    }) : null;
+    setPrivateValue(tempValue);
+    currentRef.current = tempValue;
+  }, [value]);
+  var change = function change(dates) {
+    if (!props.hasOwnProperty('value')) {
+      setPrivateValue(dates);
+    }
+    currentRef.current = dates;
+    // 当清空时
+    if (dates === null) {
+      if (props.hasOwnProperty('value')) {
+        setPrivateValue(value ? value === null || value === void 0 ? void 0 : value.map(function (i) {
+          return dayjs(i, valueFormat);
+        }) : null);
+      }
+      onChange === null || onChange === void 0 || onChange(null);
+      onShortcut === null || onShortcut === void 0 || onShortcut(undefined);
+      isShortcutRef.current = false;
+    }
+  };
+  var openChange = function openChange(open) {
+    if (open) {
+      oldRef.current = privateValue;
+    } else {
+      if (currentRef.current && currentRef.current !== oldRef.current) {
+        onChange === null || onChange === void 0 || onChange(currentRef.current.map(function (i) {
+          return i.format(valueFormat);
+        }), currentRef.current);
+        if (!isShortcutRef.current) {
+          onShortcut === null || onShortcut === void 0 || onShortcut(undefined);
+        }
+        isShortcutRef.current = false;
+      }
+    }
+  };
+  var shortcut = function shortcut(type) {
+    isShortcutRef.current = true;
+    onShortcut === null || onShortcut === void 0 || onShortcut(type);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    style: _objectSpread({
+      position: label ? 'relative' : 'static',
+      height: 32
+    }, style),
+    className: "mc-date-range ".concat(className || ''),
+    children: [label && /*#__PURE__*/_jsx("span", {
+      ref: labelRef,
+      className: "mc-date-range__label ".concat(disabled ? 'mc-date-range--disabled' : ''),
+      children: label
+    }), /*#__PURE__*/_jsx(DatePicker.RangePicker, _objectSpread({
+      ref: ref,
+      style: {
+        paddingLeft: paddingLeft
+      },
+      className: "mc-date-range__content",
+      value: privateValue,
+      onChange: change,
+      onOpenChange: openChange,
+      disabled: disabled,
+      presets: [{
+        label: /*#__PURE__*/_jsx("div", {
+          className: "mc-date-range__preset-label",
+          onClick: shortcut.bind(null, 'today'),
+          children: "\u4ECA\u5929"
+        }),
+        value: [dayjs(), dayjs()]
+      }, {
+        label: /*#__PURE__*/_jsx("div", {
+          className: "mc-date-range__preset-label",
+          onClick: shortcut === null || shortcut === void 0 ? void 0 : shortcut.bind(null, 'yesterday'),
+          children: "\u6628\u5929"
+        }),
+        value: [dayjs().add(-1, 'd'), dayjs().add(-1, 'd')]
+      }, {
+        label: /*#__PURE__*/_jsx("div", {
+          className: "mc-date-range__preset-label",
+          onClick: shortcut === null || shortcut === void 0 ? void 0 : shortcut.bind(null, 'last7days'),
+          children: "\u6700\u8FD17\u5929"
+        }),
+        value: [dayjs().add(-6, 'd'), dayjs()]
+      }, {
+        label: /*#__PURE__*/_jsx("div", {
+          className: "mc-date-range__preset-label",
+          onClick: shortcut === null || shortcut === void 0 ? void 0 : shortcut.bind(null, 'last30days'),
+          children: "\u6700\u8FD130\u5929"
+        }),
+        value: [dayjs().add(-29, 'd'), dayjs()]
+      }, {
+        label: /*#__PURE__*/_jsx("div", {
+          className: "mc-date-range__preset-label",
+          onClick: shortcut === null || shortcut === void 0 ? void 0 : shortcut.bind(null, 'last60days'),
+          children: "\u6700\u8FD160\u5929"
+        }),
+        value: [dayjs().add(-59, 'd'), dayjs()]
+      }, {
+        label: /*#__PURE__*/_jsx("div", {
+          className: "mc-date-range__preset-label",
+          onClick: shortcut === null || shortcut === void 0 ? void 0 : shortcut.bind(null, 'last90days'),
+          children: "\u6700\u8FD190\u5929"
+        }),
+        value: [dayjs().add(-89, 'd'), dayjs()]
+      }]
+    }, rest))]
+  });
+});
+export default McDateRange;

package/dist/esm/McDateRange/index.less

@@ -0,0 +1,33 @@
+.mc-date-range {
+  &__label {
+    color: #262626;
+    font-size: 14px;
+    position: absolute;
+    top: 0;
+    left: 11px;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    &::after {
+      content: '\FF1A';
+      margin-left: 2px;
+    }
+
+    &.mc-date-range--disabled {
+      color: rgba(0, 0, 0, 25%);
+      cursor: no-drop;
+    }
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__preset-label {
+    margin: -1px -8px;
+    padding: 1px 8px;
+  }
+}

package/dist/esm/McEllipsis/index.d.ts

@@ -0,0 +1,40 @@
+import { TooltipProps } from 'antd';
+import { ParagraphProps } from 'antd/es/typography/Paragraph';
+import { CSSProperties, FC, ReactNode } from 'react';
+import './index.less';
+export type McEllipsisProps = ParagraphProps & {
+    /** 要显示的文字内容 */
+    text?: string;
+    /**
+     * 文字行数，默认1
+     * @remarks 中间省略时无效，仅支持1行文字
+     */
+    rows?: number;
+    /** 是否使用中间省略，默认false */
+    middle?: boolean;
+    /**
+     * 使用中间省略时，结尾显示的字个数
+     * @defaultValue 4
+     */
+    suffixCount?: number;
+    /**
+     * 自定义提示内容（默认展示text）
+     * @remarks 若设置为false则无论省略与否都不展示（此时alwaysTooltip无效）
+     */
+    tooltip?: ReactNode | TooltipProps;
+    /**
+     * 是否无论省略与否都展示提示信息
+     * @remarks 默认为省略时展示
+     * @defaultValue false
+     */
+    alwaysTooltip?: boolean;
+    /** tooltip提示框最大宽度，默认800 */
+    tooltipMaxWidth?: number;
+    /** tooltip提示框最大高度，默认不限 */
+    tooltipMaxHeight?: number;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+};
+export declare const McEllipsis: FC<McEllipsisProps>;

package/dist/esm/McEllipsis/index.js

@@ -0,0 +1,115 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["text", "rows", "middle", "suffixCount", "tooltip", "alwaysTooltip", "tooltipMaxWidth", "tooltipMaxHeight", "copyable", "style", "className"];
+import { Tooltip, Typography } from 'antd';
+import classNames from 'classnames';
+import { McIconFont } from "./..";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Paragraph = Typography.Paragraph,
+  Text = Typography.Text;
+export var McEllipsis = function McEllipsis(props) {
+  var text = props.text,
+    _props$rows = props.rows,
+    rows = _props$rows === void 0 ? 1 : _props$rows,
+    _props$middle = props.middle,
+    middle = _props$middle === void 0 ? false : _props$middle,
+    _props$suffixCount = props.suffixCount,
+    suffixCount = _props$suffixCount === void 0 ? 4 : _props$suffixCount,
+    tooltip = props.tooltip,
+    _props$alwaysTooltip = props.alwaysTooltip,
+    alwaysTooltip = _props$alwaysTooltip === void 0 ? false : _props$alwaysTooltip,
+    _props$tooltipMaxWidt = props.tooltipMaxWidth,
+    tooltipMaxWidth = _props$tooltipMaxWidt === void 0 ? 800 : _props$tooltipMaxWidt,
+    _props$tooltipMaxHeig = props.tooltipMaxHeight,
+    tooltipMaxHeight = _props$tooltipMaxHeig === void 0 ? 'auto' : _props$tooltipMaxHeig,
+    _props$copyable = props.copyable,
+    copyable = _props$copyable === void 0 ? false : _props$copyable,
+    style = props.style,
+    className = props.className,
+    rest = _objectWithoutProperties(props, _excluded);
+  var alwaysTooltip0 = tooltip === false ? false : alwaysTooltip;
+  var copyable0 = copyable && !!text ? _objectSpread({
+    icon: /*#__PURE__*/_jsx(McIconFont, {
+      type: "icon-CopyOutlined"
+    })
+  }, copyable === true ? {} : copyable) : false;
+
+  /* 提示信息相关逻辑 */
+  // 提示框基础样式
+  var overlayBaseStyles = {
+    overlayStyle: {
+      maxWidth: tooltipMaxWidth,
+      maxHeight: tooltipMaxHeight
+    },
+    overlayInnerStyle: {
+      maxHeight: tooltipMaxHeight,
+      overflow: 'auto'
+    }
+  };
+  var tooltip0 = _objectSpread({
+    title: text
+  }, overlayBaseStyles);
+  if (props.hasOwnProperty('tooltip')) {
+    if (tooltip === false) {
+      tooltip0 = false;
+    } else {
+      if (_typeof(tooltip) === 'object' && tooltip !== null && tooltip !== void 0 && tooltip.hasOwnProperty('title')) {
+        tooltip0 = _objectSpread(_objectSpread({}, tooltip), {}, {
+          overlayStyle: _objectSpread(_objectSpread({}, overlayBaseStyles.overlayStyle), tooltip.overlayStyle || {}),
+          overlayInnerStyle: _objectSpread(_objectSpread({}, overlayBaseStyles.overlayInnerStyle), tooltip.overlayInnerStyle || {})
+        });
+      } else {
+        tooltip0 = _objectSpread({
+          title: tooltip
+        }, overlayBaseStyles);
+      }
+    }
+  }
+
+  /* 中间省略相关逻辑 */
+  // 为单行展示时使用中间省略且尾缀0的逻辑，以保布局样式不错位
+  var middle0 = middle || rows === 1 ? true : false;
+  var suffixCount0 = middle ? suffixCount : 0;
+  var start = '',
+    suffix = '';
+  if (middle0) {
+    var textStr = String(text || '').trim();
+    var isBeyond = textStr.length > suffixCount0;
+    start = isBeyond ? textStr.slice(0, textStr.length - suffixCount0) : textStr;
+    suffix = isBeyond && suffixCount0 ? textStr.slice(-suffixCount0).trim() : '';
+  }
+
+  /* 渲染函数 */
+  var innerRender = function innerRender() {
+    return middle0 ? /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
+      style: _objectSpread({
+        width: '100%'
+      }, style),
+      className: classNames('mc-ellipsis', className),
+      ellipsis: {
+        suffix: suffix,
+        tooltip: alwaysTooltip0 ? false : tooltip0
+      },
+      copyable: copyable0
+    }, rest), {}, {
+      children: start
+    }), text) : /*#__PURE__*/_jsx(Paragraph, _objectSpread(_objectSpread({
+      style: _objectSpread({
+        marginBottom: 0
+      }, style),
+      className: classNames('mc-ellipsis', className),
+      ellipsis: {
+        rows: rows,
+        tooltip: alwaysTooltip0 ? false : tooltip0
+      },
+      copyable: copyable0
+    }, rest), {}, {
+      children: text
+    }), text);
+  };
+  return alwaysTooltip0 ? /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltip0), {}, {
+    children: innerRender()
+  })) : innerRender();
+};

package/dist/esm/McEllipsis/index.less

@@ -0,0 +1,9 @@
+.mc-ellipsis {
+  &,
+  * {
+    // 公司字体计算字体长度会有问题
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  }
+}

package/dist/esm/McEllipsisMiddle/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TextProps } from 'antd/es/typography/Text';
+import './index.less';
+export interface McEllipsisMiddleProps extends TextProps {
+    text: string;
+    /** 自定义tooltip时, 无论是否省略都会展示 */
+    tooltip?: string;
+    /** 省略号结尾显示的字个数 */
+    suffixCount: number;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const McEllipsisMiddle: ({ text, tooltip, suffixCount, style, className, ...rest }: McEllipsisMiddleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/McEllipsisMiddle/index.js

@@ -0,0 +1,42 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["text", "tooltip", "suffixCount", "style", "className"];
+import { Tooltip, Typography } from 'antd';
+import "./index.less";
+
+/** 中间省略 */
+import { jsx as _jsx } from "react/jsx-runtime";
+var Text = Typography.Text;
+export var McEllipsisMiddle = function McEllipsisMiddle(_ref) {
+  var text = _ref.text,
+    tooltip = _ref.tooltip,
+    suffixCount = _ref.suffixCount,
+    style = _ref.style,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var labelStr = String(text || '').trim();
+  var isBeyond = labelStr.length > suffixCount;
+  var start = isBeyond ? labelStr.slice(0, labelStr.length - suffixCount) : labelStr;
+  var suffix = isBeyond ? labelStr.slice(-suffixCount).trim() : '';
+  var renderText = function renderText(noTooltip) {
+    return /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
+      className: ['mc-ellipsis-middle', className].filter(Boolean).join(' '),
+      style: _objectSpread({
+        width: '100%'
+      }, style),
+      ellipsis: {
+        tooltip: !noTooltip && labelStr ? labelStr : false,
+        suffix: suffix
+      }
+    }, rest), {}, {
+      children: start
+    }));
+  };
+  if (tooltip) {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      title: tooltip,
+      children: renderText(true)
+    });
+  }
+  return renderText(false);
+};

package/dist/esm/McEllipsisMiddle/index.less

@@ -0,0 +1,9 @@
+.mc-ellipsis-middle {
+  &,
+  * {
+    // 公司字体计算字体长度会有问题
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  }
+}

package/dist/esm/McFonts/index.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    Regular: string;
+    Bold: string;
+    Light: string;
+    Medium: string;
+    Alphanumeric: string;
+};
+export default _default;

package/dist/esm/McFonts/index.js

@@ -0,0 +1,7 @@
+export default {
+  Regular: 'https://orchardplanet.oss-cn-shenzhen.aliyuncs.com/fonts/SourceHanSansCN-Regular.otf',
+  Bold: 'https://orchardplanet.oss-cn-shenzhen.aliyuncs.com/fonts/SourceHanSansCN-Bold.otf',
+  Light: 'https://orchardplanet.oss-cn-shenzhen.aliyuncs.com/fonts/SourceHanSansCN-Light.otf',
+  Medium: 'https://orchardplanet.oss-cn-shenzhen.aliyuncs.com/fonts/SourceHanSansCN-Medium.otf',
+  Alphanumeric: 'https://orchardplanet.oss-cn-shenzhen.aliyuncs.com/fonts/FF-DIN-Pro-Bold.otf'
+};

package/dist/esm/McGroupPanel/comps/SelectedItem/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import '../../index.less';
+declare const _default: import("react").MemoExoticComponent<({ sortable, itemMap, inexistent, text, color, reserved, inexistentItemMap, value, onRemove, }: any) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/esm/McGroupPanel/comps/SelectedItem/index.js

@@ -0,0 +1,75 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useSortable } from '@dnd-kit/sortable';
+import { Button, Typography } from 'antd';
+import { MenuOutlined } from 'much-icons';
+import { McIconFont } from "../../..";
+import { memo, useMemo } from 'react';
+import "../../index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SelectedItem = function SelectedItem(_ref) {
+  var sortable = _ref.sortable,
+    itemMap = _ref.itemMap,
+    inexistent = _ref.inexistent,
+    text = _ref.text,
+    color = _ref.color,
+    reserved = _ref.reserved,
+    inexistentItemMap = _ref.inexistentItemMap,
+    value = _ref.value,
+    onRemove = _ref.onRemove;
+  var _label = useMemo(function () {
+    var _itemMap$value, _inexistentItemMap$va;
+    var label = ((_itemMap$value = itemMap[value]) === null || _itemMap$value === void 0 ? void 0 : _itemMap$value.label) || "".concat((_inexistentItemMap$va = inexistentItemMap[value]) === null || _inexistentItemMap$va === void 0 ? void 0 : _inexistentItemMap$va.label).concat(inexistent && !reserved ? "\u300C".concat(text, "\u300D") : '');
+    var fn = function fn() {
+      var isTooltip = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          color: !itemMap[value] && inexistent && !reserved ? color : isTooltip ? '#ffffff' : '#262626'
+        },
+        children: label
+      });
+    };
+    return fn;
+  }, [itemMap, inexistent, text, color, reserved, inexistentItemMap, value]);
+  var _useSortable = useSortable({
+      id: value
+    }),
+    setNodeRef = _useSortable.setNodeRef,
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging;
+  var style = transform ? {
+    transform: "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0)"),
+    transition: isDragging ? 'unset' : transition
+  } : {
+    transition: 'unset'
+  };
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    ref: setNodeRef,
+    style: style
+  }, attributes), {}, {
+    className: "mc-group-panel__selected-item",
+    children: [sortable && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, listeners), {}, {
+      className: "mc-group-panel__selected-item__drag",
+      type: "text",
+      icon: /*#__PURE__*/_jsx(MenuOutlined, {})
+    })), /*#__PURE__*/_jsx(Typography.Paragraph, {
+      style: {
+        margin: '0 auto 0 4px'
+      },
+      ellipsis: {
+        tooltip: _label(true)
+      },
+      children: _label()
+    }), /*#__PURE__*/_jsx(McIconFont, {
+      className: "mc-group-panel__selected-item__remove",
+      type: "icon-CloseOutlined",
+      onClick: onRemove
+    }), !itemMap[value] && reserved && /*#__PURE__*/_jsx("div", {
+      className: "mc-group-panel__selected-item--disabled"
+    })]
+  }));
+};
+export default /*#__PURE__*/memo(SelectedItem);

package/dist/esm/McGroupPanel/index.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties, FC } from 'react';
+import './index.less';
+type Option = {
+    value: any;
+    label: string;
+    [key: string]: any;
+};
+type Options = Array<Option & {
+    children: Option[];
+}>;
+type Inexistent = {
+    text?: string;
+    color?: string;
+    reserved?: boolean;
+};
+type PropsType = {
+    style?: CSSProperties;
+    className?: string;
+    options?: Options;
+    disabled?: boolean;
+    labelInValue?: boolean;
+    inexistent?: boolean | Inexistent;
+    sortable?: boolean;
+    title?: string;
+    value?: any[];
+    onChange?: (value?: any[]) => void;
+    [key: string]: any;
+};
+declare const McGroupPanel: FC<PropsType>;
+export default McGroupPanel;