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

package/dist/esm/McInput/demo/Search/search-base.js

@@ -0,0 +1,38 @@
+/**
+ * title: 基本使用
+ * description: 设置 `enterButton` 使 搜索按钮 为主按钮样式。注意：addonAfter、suffix、onPressEnter 失效不可用
+ */
+import { McInput } from "../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 8
+    },
+    children: [/*#__PURE__*/_jsx(McInput.Search, {
+      loading: true,
+      placeholder: "\u57FA\u672C\u4F7F\u7528",
+      count: {
+        show: true,
+        max: 10
+      }
+    }), /*#__PURE__*/_jsx(McInput.Search, {
+      placeholder: "\u57FA\u672C\u4F7F\u7528"
+    }), /*#__PURE__*/_jsx(McInput.Search, {
+      enterButton: true,
+      placeholder: "\u57FA\u672C\u4F7F\u7528",
+      style: {
+        width: 300
+      }
+    }), /*#__PURE__*/_jsx(McInput.Search, {
+      enterButton: "\u641C\u7D22",
+      placeholder: "\u57FA\u672C\u4F7F\u7528",
+      style: {
+        width: 300
+      }
+    })]
+  });
+});

package/dist/esm/McInput/demo/TextArea/text-area-base.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/esm/McInput/demo/TextArea/text-area-base.js

@@ -0,0 +1,38 @@
+/**
+ * title: 基本使用
+ * description: 支持两种方式的限制最大数字多行文本框，
+ */
+import { McInput } from "../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 8
+    },
+    children: [/*#__PURE__*/_jsx(McInput.TextArea, {
+      placeholder: "\u57FA\u672C\u4F7F\u7528\uFF0C\u4E0D\u4F1A\u6839\u636E\u5185\u5BB9\u53D8\u5316\u9AD8\u5EA6"
+    }), /*#__PURE__*/_jsx(McInput.TextArea, {
+      placeholder: "\u7B2C\u4E00\u79CD\u9650\u5236\u5B57\u6570\u65B9\u5F0F",
+      maxLength: 100,
+      showCount: true
+    }), /*#__PURE__*/_jsx(McInput.TextArea, {
+      placeholder: "\u7B2C\u4E8C\u79CD\u9650\u5236\u5B57\u6570\u65B9\u5F0F",
+      count: {
+        show: true,
+        max: 10
+      }
+    }), /*#__PURE__*/_jsx(McInput.TextArea, {
+      placeholder: "\u6839\u636E\u5185\u5BB9\u53D8\u5316\u9AD8\u5EA6",
+      autoSize: true
+    }), /*#__PURE__*/_jsx(McInput.TextArea, {
+      placeholder: "\u6700\u5C0F\u9AD8\u5EA6\u4E3A1\u884C\uFF0C\u6700\u5927\u9AD8\u5EA6\u4E3A5\u884C",
+      autoSize: {
+        minRows: 1,
+        maxRows: 5
+      }
+    })]
+  });
+});

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

@@ -0,0 +1,13 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { InputRef, McInputProps } from './Input';
+import Search from './Search';
+import TextArea from './TextArea';
+export type { InputRef, McInputProps } from './Input';
+export type { McSearchProps } from './Search';
+export type { McTextAreaProps } from './TextArea';
+type CompoundedComponent = ForwardRefExoticComponent<McInputProps & RefAttributes<InputRef>> & {
+    Search: typeof Search;
+    TextArea: typeof TextArea;
+};
+declare const McInput: CompoundedComponent;
+export default McInput;

package/dist/esm/McInput/index.js

@@ -0,0 +1,7 @@
+import Input from "./Input";
+import Search from "./Search";
+import TextArea from "./TextArea";
+var McInput = Input;
+McInput.Search = Search;
+McInput.TextArea = TextArea;
+export default McInput;

package/dist/esm/McInput/index.less

@@ -0,0 +1,62 @@
+@import '../styles/mixins.less';
+
+.mc-input,
+.mc-search {
+  .ant-input-suffix .ant-input-show-count-suffix {
+    color: #b3b3b3;
+    font-size: 12px;
+  }
+}
+
+.mc-input__label {
+  color: #262626;
+  font-size: 14px;
+  margin-right: -4px;
+
+  &::after {
+    content: '\FF1A';
+    margin-left: 2px;
+  }
+}
+
+.mc-search {
+  width: 280px;
+
+  .mc-search__icon {
+    width: auto;
+    height: 22px;
+    padding: 0;
+    color: #8c8c8c;
+  }
+
+  .ant-input-affix-wrapper + .ant-input-group-addon {
+    inset-inline-start: -1px;
+    padding: 0;
+    border: 0;
+
+    .mc-search__button {
+      width: auto;
+      border-radius: 0 4px 4px 0;
+      padding: 0 12px;
+      margin-right: -1px;
+      z-index: 1;
+    }
+  }
+}
+
+.mc-textarea .ant-input-suffix {
+  .ant-input-clear-icon {
+    z-index: 1;
+  }
+
+  .ant-input-data-count {
+    bottom: 0;
+    right: 11px;
+    color: #b3b3b3;
+    font-size: 12px;
+  }
+}
+
+.mc-input .ant-input-wrapper .ant-input-group-addon {
+  .input-vertical-line();
+}

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

@@ -0,0 +1,16 @@
+import { InputNumberProps } from 'antd';
+import { FC, ReactNode } from 'react';
+import './index.less';
+type McInputNumberProps = Omit<InputNumberProps, 'precision' | 'value' | 'onChange'> & {
+    /** 查询项的字段名（配合McContainer组件的查询功能使用） */
+    name?: string;
+    /** 查询项的标签文字（若未设置，样式为表单项形态） */
+    label?: ReactNode;
+    /** 最多保留多少位小数，默认0 */
+    precision?: number;
+    value?: number | null;
+    onChange?: (value?: number | null) => void;
+    [key: string]: any;
+};
+declare const McInputNumber: FC<McInputNumberProps>;
+export default McInputNumber;

package/dist/esm/McInputNumber/index.js

@@ -0,0 +1,50 @@
+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 = ["label", "precision", "value", "onChange", "className"];
+import { InputNumber } from 'antd';
+import NP from 'number-precision';
+import { forwardRef, useEffect, useState } from 'react';
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var McInputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
+  var label = props.label,
+    _props$precision = props.precision,
+    precision = _props$precision === void 0 ? 0 : _props$precision,
+    value = props.value,
+    onChange = props.onChange,
+    className = props.className,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputNumberValue = _useState2[0],
+    setInputNumberValue = _useState2[1];
+  useEffect(function () {
+    setInputNumberValue(typeof value === 'number' ? value : null);
+  }, [value]);
+  var handleChange = function handleChange(v) {
+    var formattedValue = null;
+    if (v !== null && v !== '') {
+      var num = typeof v === 'string' ? parseFloat(v) : v;
+      if (!isNaN(num)) {
+        formattedValue = NP.round(num, precision);
+      }
+    }
+    if (!props.hasOwnProperty('value')) {
+      setInputNumberValue(formattedValue);
+    }
+    onChange === null || onChange === void 0 || onChange(formattedValue);
+  };
+  return /*#__PURE__*/_jsx(InputNumber, _objectSpread({
+    ref: ref,
+    className: "mc-input-number ".concat(className || ''),
+    prefix: label && /*#__PURE__*/_jsx("span", {
+      className: "mc-input-number__label",
+      children: label
+    }),
+    value: inputNumberValue,
+    onChange: handleChange,
+    placeholder: "\u8BF7\u8F93\u5165"
+  }, rest));
+});
+export default McInputNumber;

package/dist/esm/McInputNumber/index.less

@@ -0,0 +1,18 @@
+@import '../styles/mixins.less';
+
+.mc-input-number {
+  &__label {
+    color: #262626;
+    font-size: 14px;
+    margin-right: -4px;
+
+    &::after {
+      content: '\FF1A';
+      margin-left: 2px;
+    }
+  }
+
+  .ant-input-number-wrapper .ant-input-number-group-addon {
+    .input-vertical-line();
+  }
+}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+interface ObserverInsertionWrapperProps {
+    children: React.ReactNode[];
+    /**
+     * @description 最小高度，不能为0。为0时懒加载可能会无效
+     * @default 20
+     */
+    itemMinHeight: number;
+    /**
+     * @description 最小宽度，水平排列时不能为0
+     * @default unset
+     */
+    itemMinWidth?: number;
+    /**
+     * @description 元素进入视图回调
+     */
+    onItemVisible?: (index: number, key: string) => void;
+    /**
+     * @description 距离视图多少像素时触发。出于用户体验考虑，建议设置一个正数
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * @description 重叠比例为多少时触发
+     * @default 0
+     */
+    threshold?: number;
+    /**
+     * @description 监听的根元素，不传则监听浏览器窗口
+     * @default null
+     */
+    root?: Element | Document | null;
+    /**
+     * @description 外层容器样式
+     */
+    style?: React.CSSProperties;
+}
+declare const ObserverInsertionWrapper: React.FC<ObserverInsertionWrapperProps>;
+export default ObserverInsertionWrapper;

package/dist/esm/McLazyLoader/index.js

@@ -0,0 +1,88 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var getKey = function getKey(child, index) {
+  var _child$key;
+  return /*#__PURE__*/React.isValidElement(child) ? String((_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index) : String(index);
+};
+var ObserverInsertionWrapper = function ObserverInsertionWrapper(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    _ref$threshold = _ref.threshold,
+    threshold = _ref$threshold === void 0 ? 0 : _ref$threshold,
+    _ref$root = _ref.root,
+    root = _ref$root === void 0 ? null : _ref$root,
+    _ref$itemMinHeight = _ref.itemMinHeight,
+    itemMinHeight = _ref$itemMinHeight === void 0 ? 20 : _ref$itemMinHeight,
+    itemMinWidth = _ref.itemMinWidth,
+    onItemVisible = _ref.onItemVisible;
+  var wrapperRef = useRef(null);
+
+  // 已经显示过的 key 列表
+  var _useState = useState(new Set()),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleItems = _useState2[0],
+    setVisibleItems = _useState2[1];
+
+  // 为避免 children 每次渲染变化导致 useEffect 重复执行，构建一个 keyList 哈希
+  var keyListHash = useMemo(function () {
+    var list = React.Children.toArray(children).map(function (child, index) {
+      return getKey(child, index);
+    });
+    return JSON.stringify(list);
+  }, [children]);
+
+  // 每次 keyList 变动重置显示列表
+  useEffect(function () {
+    setVisibleItems(new Set());
+  }, [keyListHash]);
+  useEffect(function () {
+    var _wrapperRef$current;
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var index = Number(entry.target.getAttribute('data-index'));
+        var key = String(entry.target.getAttribute('data-key'));
+        if (entry.isIntersecting && !visibleItems.has(key)) {
+          setVisibleItems(function (prev) {
+            var next = new Set(prev);
+            next.add(key);
+            onItemVisible === null || onItemVisible === void 0 || onItemVisible(index, key);
+            return next;
+          });
+        }
+      });
+    }, {
+      root: root,
+      rootMargin: "".concat(offset, "px"),
+      threshold: threshold
+    });
+    var elements = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.children;
+    elements && Array.from(elements).forEach(function (element) {
+      observer.observe(element);
+    });
+    return function () {
+      elements && Array.from(elements).forEach(function (element) {
+        observer.unobserve(element);
+      });
+    };
+  }, [offset, threshold, root, keyListHash, visibleItems]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: wrapperRef,
+    style: style,
+    children: React.Children.map(children, function (child, index) {
+      var key = getKey(child, index);
+      return /*#__PURE__*/_jsx("div", {
+        "data-key": key,
+        "data-index": index,
+        style: {
+          minHeight: itemMinHeight,
+          minWidth: itemMinWidth !== null && itemMinWidth !== void 0 ? itemMinWidth : 'unset'
+        },
+        children: visibleItems.has(key) ? child : null
+      }, key);
+    })
+  });
+};
+export default ObserverInsertionWrapper;

package/dist/esm/McListSelect/comps/ListSelect.d.ts

@@ -0,0 +1,67 @@
+import { FC } from 'react';
+import '../index.less';
+import { McListSelectPanelProps } from './ListSelectPanel';
+/**
+ * @author: wangzt
+ * @description: 下拉列表选择器-仅支持多选
+ */
+interface Inexistent {
+    /**
+     * 不存在值的文字描述
+     * @defaultValue '不存在'
+     */
+    text?: string;
+    /**
+     * 不存在值的文字颜色
+     * @defaultValue '#ff4d4f'
+     */
+    color?: string;
+    /**
+     * 是否保留原值
+     * @remarks 若为 true，则在执行不存在值的处理逻辑时，不向外抛出 undefined
+     * @defaultValue false
+     */
+    reserveOriginalValue?: boolean;
+}
+export type McListSelectProps = Omit<McListSelectPanelProps, 'PanelInexistent'> & {
+    /**
+     * 查询项的字段名
+     * @remarks 配合 McContainer 组件的查询功能使用
+     */
+    name?: string;
+    /**
+     * 查询项的标签文字
+     * @remarks 若未设置，样式为表单项形态
+     */
+    label?: React.ReactNode;
+    /**
+     * 选择框默认文本
+     * @defaultValue '请选择'
+     */
+    placeholder?: string;
+    /**
+     * 最多显示多少个 tag
+     * @remarks 响应式模式会对性能产生损耗
+     * @defaultValue 1
+     */
+    maxTagCount?: number | 'responsive';
+    /**
+     * 是否每次展开下拉菜单时都初始化（重置查询）
+     * @defaultValue true
+     */
+    initOnOpen?: boolean;
+    /**
+     * 是否执行不存在值的处理逻辑
+     * @remarks
+     * - 异步查询时无效
+     * - 为保证该属性的相关功能生效，options 无数据的情况下请配置为空数组 []
+     * @defaultValue false
+     */
+    inexistent?: boolean | Inexistent;
+};
+export type McListSelectRef = {
+    /** 初始化方法（显示下拉菜单并重置查询） */
+    init: () => void;
+};
+declare const McListSelect: FC<McListSelectProps>;
+export default McListSelect;