@zykj2024/much-library 1.0.9

package/dist/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.css";
+
+/* 快捷选择日期对应值的映射集合 */
+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 SHORTCUTprivateValue_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/McFonts/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    Regular: any;
+    Bold: any;
+    Light: any;
+    Medium: any;
+};
+export default _default;

package/dist/McFonts/index.js

@@ -0,0 +1,10 @@
+import { default as Bold } from "./public/SourceHanSansCN-Bold.otf";
+import { default as Light } from "./public/SourceHanSansCN-Light.otf";
+import { default as Medium } from "./public/SourceHanSansCN-Medium.otf";
+import { default as Regular } from "./public/SourceHanSansCN-Regular.otf";
+export default {
+  Regular: Regular,
+  Bold: Bold,
+  Light: Light,
+  Medium: Medium
+};

package/dist/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/McGroupPanel/comps/SelectedItem/index.js

@@ -0,0 +1,76 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useSortable } from '@dnd-kit/sortable';
+import { Button, Typography } from 'antd';
+import { McIconFont } from "../../..";
+import { memo, useMemo } from 'react';
+import "../../index.css";
+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(McIconFont, {
+        type: "icon-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/McGroupPanel/index.css

@@ -0,0 +1,162 @@
+.mc-group-panel {
+  width: 100%;
+  height: 329px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 8px;
+  -moz-column-gap: 8px;
+  column-gap: 8px;
+  position: relative;
+}
+.mc-group-panel__card-header {
+  height: 40px;
+  background: #fafafa;
+  padding: 0 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+.mc-group-panel__card-title {
+  color: rgba(0, 0, 0, 0.847);
+  font-weight: 600;
+}
+.mc-group-panel__card-body {
+  height: calc(100% - 40px);
+  padding: 8px;
+}
+.mc-group-panel__options {
+  border-radius: 4px;
+  border: 1px solid #ebebeb;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.mc-group-panel__options-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: calc(100% - 40px);
+}
+.mc-group-panel__options-groups {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 44%;
+  flex: 1 1 44%;
+}
+.mc-group-panel__options-items {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 56%;
+  flex: 1 1 56%;
+  border-left: 1px solid #ebebeb;
+  overflow: auto;
+}
+.mc-group-panel__options-list {
+  height: calc(100% - 40px);
+  overflow: auto;
+}
+.mc-group-panel__search-bar {
+  padding: 0 8px;
+}
+.mc-group-panel__checkbox-wrapper {
+  width: calc(100% - 24px);
+  height: 40px;
+  line-height: 40px;
+  padding: 0 12px;
+}
+.mc-group-panel__checkbox-wrapper .ant-checkbox-wrapper {
+  max-width: 100%;
+}
+.mc-group-panel__checkbox-wrapper .ant-checkbox-wrapper .ant-checkbox + span {
+  overflow: hidden;
+}
+.mc-group-panel__checkbox-wrapper:not(:first-child):hover {
+  background: #f6f6f6;
+  cursor: pointer;
+}
+.mc-group-panel__checkbox {
+  width: calc(100% - 24px);
+  height: 40px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 12px;
+}
+.mc-group-panel__checkbox .ant-checkbox + span {
+  overflow: hidden;
+}
+.mc-group-panel__checkbox:hover {
+  background: #f6f6f6;
+}
+.mc-group-panel__selected {
+  border-radius: 4px;
+  border: 1px solid #ebebeb;
+  overflow: hidden;
+  width: 240px;
+}
+.mc-group-panel__selected-item {
+  width: calc(100% - 16px);
+  height: 40px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 8px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+.mc-group-panel__selected-item:not(:first-child) {
+  margin-top: 8px;
+}
+.mc-group-panel__selected-item__drag {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  color: #8c8c8c;
+  padding: 5px 0 3px;
+}
+.mc-group-panel__selected-item__drag:hover {
+  background: rgba(38, 38, 38, 0.15) !important;
+  cursor: move;
+}
+.mc-group-panel__selected-item__remove {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  color: #8c8c8c;
+  margin-left: 8px;
+}
+.mc-group-panel__selected-item__remove:hover {
+  cursor: pointer;
+  color: #262626;
+}
+.mc-group-panel__selected-item--disabled {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9;
+  border-radius: 4px;
+  background: rgba(246, 246, 246, 0.66);
+  cursor: no-drop;
+}
+.mc-group-panel--disabled {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9;
+  border-radius: 4px;
+  background: rgba(228, 228, 228, 0.3);
+  cursor: no-drop;
+}

package/dist/McGroupPanel/index.d.ts

@@ -0,0 +1,29 @@
+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;
+    value?: any[];
+    onChange?: (value?: any[]) => void;
+    [key: string]: any;
+};
+declare const McGroupPanel: FC<PropsType>;
+export default McGroupPanel;