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

package/README.md

@@ -1,35 +1,23 @@
-# much-library
+# much-library-hooks
 
-基于 ant-design 和 web 端一体化设计标准 实现的 React 组件库，旨在提高 B 端平台开发效率以及通用组件标准化。
+[![NPM version](https://img.shields.io/npm/v/much-library-hooks.svg?style=flat)](https://npmjs.com/package/much-library-hooks)
+[![NPM downloads](http://img.shields.io/npm/dm/much-library-hooks.svg?style=flat)](https://npmjs.com/package/much-library-hooks)
 
-## 主要目录
+## Install
 
-- /src 组件开发目录
-- /script 组件构建脚本目录
-- /docs 文档目录
+```bash
+$ yarn install
+```
 
-## 开发流程
+```bash
+$ npm run dev
+$ npm run build
+```
 
-- 从 `main` 分支拉取组件分支 `feature/*`，例如：McInput 组件分支`feature/tree_panel`，若多人维护则增加个人标识`feature/tree_panel-csy`
-- 在 /src 中新建对应组件目录，书写组件.tsx 以及 文档.md，可执行 `npm run dev` 在文档 demo 上直接调试
-- css 采用约定命名规则，使用 less 语法，遵守 BEM 规范，给组件一个外层类名 `.mc-*`
-- /src/index.ts 导入组件，组件库支持按需引入
-- 更新 `log.md` 文件
-- 本地开发完毕后执行`npm run doctor` 校验，校验通过后可提交`develop`分支 MR，指向对应同学进行 Review 合并
+## Options
 
-## 发布流程
+TODO
 
-- npm 包发布，更新 version 版本号，执行`npm publish`即可。[much-library](https://www.npmjs.com/package/much-library)
-- docs 发布，执行`npm run docs:build`，通过 ssh 部署 docs-dist。[much-docs](http://frontend.yunxiacn.com/much-docs/)
-- 相关账号配置联系 @陈书妍（一匠）
+## LICENSE
 
-## 问题反馈
-
-- 使用过程中有任何问题，可到对应仓库提交 [issue](http://gitlab.yunxiacn.com/data-group-front/much-library/-/issues)
-- 需添加使用场景，是否必现，复现路径等细节
-- 紧急情况下，可以自行进行实行，提交 MR 即可
-
-## 关联资源
-
-- [web 端一体化设计](https://mastergo.com/file/124592686063679?fileOpenFrom=project&page_id=116%3A9034) @张乐（卡卡）
-- [dumi 组件框架](https://d.umijs.org/)
+MIT

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

@@ -11,6 +11,8 @@ export type McCascaderProps = CascaderProps & {
     className?: string;
     name?: string;
     label?: ReactNode;
+    /** label是否显示冒号，默认true显示 */
+    colon?: boolean;
     inexistent?: boolean | Inexistent;
     city?: boolean;
     [key: string]: any;

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

@@ -2,17 +2,20 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "className", "label", "inexistent", "city", "value", "onChange", "options", "multiple", "disabled", "fieldNames", "maxTagCount"];
-import { Cascader, Divider, Popover } from 'antd';
+var _excluded = ["style", "className", "label", "colon", "inexistent", "city", "value", "onChange", "options", "multiple", "disabled", "fieldNames", "maxTagCount"];
+import { Cascader, Popover } from 'antd';
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { cityData } from "./city";
-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";
 var McCascader = /*#__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,
     _props$inexistent = props.inexistent,
     inexistent = _props$inexistent === void 0 ? false : _props$inexistent,
     _props$city = props.city,
@@ -48,27 +51,11 @@ var McCascader = /*#__PURE__*/forwardRef(function (props, ref) {
     } : fieldNames;
   }, [city, fieldNames]);
 
-  /* 获取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();
-    };
-  }, []);
-
   /* 判断value值是否存在于options中 */
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    cascaderValue = _useState4[0],
-    setCascaderValue = _useState4[1];
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    cascaderValue = _useState2[0],
+    setCascaderValue = _useState2[1];
   var _inexistent = useRef(false);
   // 获取所有备选项的值列表
   var _values = useMemo(function () {
@@ -145,37 +132,13 @@ var McCascader = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     onChange === null || onChange === void 0 || onChange(_v, _selectedOptions);
   };
-  // 扩展全选功能 (继承原有插槽)
-  var dropdownRender = function dropdownRender(menus, _dropdownRender) {
-    return /*#__PURE__*/_jsxs("div", {
-      children: [menus, _dropdownRender, /*#__PURE__*/_jsx(Divider, {
-        style: {
-          margin: 0
-        }
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          padding: 8
-        },
-        onClick: function onClick() {
-          // console.log(ref)
-        },
-        children: "\u5168\u9009"
-      })]
-    });
-  };
-  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-cascader ".concat(multiple && _maxTagCount === 1 ? 'mc-cascader--inline' : '', " ").concat(className || ''),
-    children: [label && /*#__PURE__*/_jsx("span", {
-      ref: labelRef,
-      className: "mc-cascader__label ".concat(disabled ? 'mc-cascader--disabled' : ''),
-      children: label
-    }), /*#__PURE__*/_jsx(Cascader, _objectSpread({
+    children: /*#__PURE__*/_jsx(Cascader, _objectSpread({
       ref: ref,
       className: "mc-cascader__content",
       value: cascaderValue,
@@ -183,9 +146,15 @@ var McCascader = /*#__PURE__*/forwardRef(function (props, ref) {
       options: _options,
       multiple: multiple,
       disabled: disabled,
-      fieldNames: _fieldNames
-      // dropdownRender={dropdownRender}
-      ,
+      fieldNames: _fieldNames,
+      prefix: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [label, label && colon && /*#__PURE__*/_jsx("span", {
+          style: {
+            marginLeft: 2
+          },
+          children: "\uFF1A"
+        })]
+      }),
       placeholder: "\u8BF7\u9009\u62E9",
       showSearch: true,
       allowClear: true,
@@ -215,7 +184,7 @@ var McCascader = /*#__PURE__*/forwardRef(function (props, ref) {
           })
         });
       }
-    }, rest))]
+    }, rest))
   });
 });
 export default McCascader;

package/dist/esm/McCascader/index.less

@@ -0,0 +1,38 @@
+.mc-cascader {
+  &__content {
+    width: 100%;
+    height: 100%;
+
+    &.ant-cascader.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-cascader--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;
+  }
+}

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

@@ -2,11 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useUpdateEffect } from '@zykj2024/much-hooks';
+import { CaretDownFilled, DoubleLeftOutlined } from '@zykj2024/much-icons';
 import { Button, Spin, Table } from 'antd';
 import { isNumber } from 'lodash';
-import { CaretDownFilled, DoubleLeftOutlined } from 'much-icons';
 import { Children, cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import "./index.css";
+import "./index.less";
 
 /** 请求参数 */
 

package/dist/esm/McContainer/index.less

@@ -0,0 +1,132 @@
+@wrapper-width: calc(100% - 40px);
+
+.mc-container {
+  position: relative;
+
+  &__ceiling {
+    width: @wrapper-width;
+    height: 24px;
+    position: absolute;
+    left: 16px;
+    z-index: 9;
+  }
+
+  &__wrapper {
+    height: 100%;
+    padding: 24px 24px 50px 16px;
+    overflow-y: auto;
+    border-top-right-radius: 12px;
+  }
+
+  &__query {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    .mc-input,
+    .mc-search,
+    .mc-select,
+    .mc-cascader,
+    .mc-input-number {
+      width: 270px;
+    }
+
+    .mc-date-range {
+      width: 330px;
+    }
+  }
+
+  &__divider {
+    height: 1px;
+    margin: 24px 0;
+    background: #ebebeb;
+  }
+
+  &__action-bar {
+    position: sticky;
+    top: -24px;
+    z-index: 9;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: center;
+    padding: 24px 0 16px;
+    margin-top: -24px;
+    overflow: hidden;
+  }
+
+  &__batch-bar {
+    position: sticky;
+    z-index: 9;
+    padding-bottom: 8px;
+
+    &__inner {
+      display: flex;
+      align-items: center;
+      height: 40px;
+      padding: 0 16px;
+      background: #325cf7;
+      border-radius: 4px;
+
+      button.ant-btn {
+        background: transparent;
+        color: #fff;
+        border-color: transparent;
+        padding: 4px;
+        margin-left: 16px;
+
+        &:hover {
+          background-color: transparent !important;
+          color: #fff !important;
+          border-color: transparent !important;
+        }
+      }
+    }
+  }
+
+  &__batch-num {
+    color: #fff;
+    font-size: 14px;
+    opacity: 0.8;
+  }
+
+  &__batch-btns {
+    position: relative;
+    margin-left: 16px;
+
+    &::before {
+      position: absolute;
+      top: calc(50% - 12px);
+      left: 0;
+      display: block;
+      width: 1px;
+      height: 24px;
+      background: rgba(255, 255, 255, 30%);
+      content: '';
+    }
+  }
+
+  &__table {
+    .ant-spin-nested-loading {
+      position: static;
+
+      .ant-spin-container {
+        position: static;
+      }
+    }
+
+    &__expand-icon > svg {
+      transition: all 0.3s;
+    }
+  }
+
+  &__pagination {
+    padding: 8px 0 16px;
+    margin: 0 !important;
+    width: @wrapper-width;
+    position: absolute;
+    left: 16px;
+    bottom: 0;
+    z-index: 9;
+  }
+}

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

@@ -13,13 +13,15 @@ declare const shortcutValueMap: {
 export declare const SHORTCUT_VALUE_MAP: typeof shortcutValueMap & {
     [key: string]: any;
 };
-export type McDateRangeProps = Omit<RangePickerProps, 'value' | 'onChange'> & {
+export type McDateRangeProps = Omit<RangePickerProps, 'value' | 'onChange' | 'prefix'> & {
     style?: CSSProperties;
     className?: string;
     name?: string;
     label?: ReactNode;
     valueFormat?: string;
     value?: string[];
+    /** label是否显示冒号，默认true显示 */
+    colon?: boolean;
     onChange?: (value?: string[] | null, dayjsValue?: [dayjs.Dayjs, dayjs.Dayjs] | null) => void;
     onShortcut?: (value?: 'today' | 'yesterday' | 'last7days' | 'last30days' | 'last60days' | 'last90days') => void;
     [key: string]: any;

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

@@ -1,14 +1,15 @@
 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"];
+var _excluded = ["style", "className", "label", "colon", "valueFormat", "value", "onChange", "onShortcut", "disabled"];
 import { DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-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";
 var shortcutValueMap = {
   today: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
@@ -23,6 +24,8 @@ var McDateRange = /*#__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,
     _props$valueFormat = props.valueFormat,
     valueFormat = _props$valueFormat === void 0 ? 'YYYY-MM-DD' : _props$valueFormat,
     value = props.value,
@@ -30,28 +33,10 @@ var McDateRange = /*#__PURE__*/forwardRef(function (props, ref) {
     onShortcut = props.onShortcut,
     disabled = props.disabled,
     rest = _objectWithoutProperties(props, _excluded);
-
-  /* 获取label宽度 */
-  var labelRef = useRef();
-  var _useState = useState(11),
+  var _useState = useState(),
     _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];
+    privateValue = _useState2[0],
+    setPrivateValue = _useState2[1];
   var currentRef = useRef();
   var oldRef = useRef();
   var isShortcutRef = useRef(false);
@@ -98,21 +83,21 @@ var McDateRange = /*#__PURE__*/forwardRef(function (props, ref) {
     isShortcutRef.current = true;
     onShortcut === null || onShortcut === void 0 || onShortcut(type);
   };
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("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({
+    children: /*#__PURE__*/_jsx(DatePicker.RangePicker, _objectSpread({
       ref: ref,
-      style: {
-        paddingLeft: paddingLeft
-      },
+      prefix: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [label, label && colon && /*#__PURE__*/_jsx("span", {
+          style: {
+            marginLeft: 2
+          },
+          children: "\uFF1A"
+        })]
+      }),
       className: "mc-date-range__content",
       value: privateValue,
       onChange: change,
@@ -161,7 +146,7 @@ var McDateRange = /*#__PURE__*/forwardRef(function (props, ref) {
         }),
         value: [dayjs().add(-89, 'd'), dayjs()]
       }]
-    }, rest))]
+    }, rest))
   });
 });
 export default McDateRange;

package/dist/esm/McDateRange/index.less

@@ -0,0 +1,15 @@
+.mc-date-range {
+  &__content {
+    width: 100%;
+    height: 100%;
+
+    .ant-picker-prefix {
+      margin-right: 0;
+    }
+  }
+
+  &__preset-label {
+    margin: -1px -8px;
+    padding: 1px 8px;
+  }
+}

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

@@ -2,10 +2,10 @@ 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 { McIconFont } from "./..";
 import { Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
-import { McIconFont } from "./..";
-import "./index.css";
+import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Paragraph = Typography.Paragraph,
   Text = Typography.Text;

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/{McEllipsisMiddle → esm/McEllipsisMiddle}/index.js

@@ -2,7 +2,7 @@ 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.css";
+import "./index.less";
 
 /** 中间省略 */
 import { jsx as _jsx } from "react/jsx-runtime";

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/{McGroupPanel → esm/McGroupPanel}/comps/SelectedItem/index.js

@@ -1,10 +1,10 @@
 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 { MenuOutlined } from '@zykj2024/much-icons';
 import { McIconFont } from "../../..";
+import { Button, Typography } from 'antd';
 import { memo, useMemo } from 'react';
-import "../../index.css";
+import "../../index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SelectedItem = function SelectedItem(_ref) {

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

@@ -3,12 +3,12 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SearchOutlined } from '@zykj2024/much-icons';
 import { Button, Checkbox, Empty, Input, Typography } from 'antd';
 import debounce from 'lodash/debounce';
-import { SearchOutlined } from 'much-icons';
 import { useEffect, useMemo, useState } from 'react';
 import SelectedItem from "./comps/SelectedItem";
-import "./index.css";
+import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";