@zykj2024/much-library 1.0.9 → 1.0.10-beta.10

package/README.md

@@ -1,35 +1,35 @@
 # much-library
 
-## Usage
+基于 ant-design 和 web 端一体化设计标准 实现的 React 组件库，旨在提高 B 端平台开发效率以及通用组件标准化。
 
-TODO
+## 主要目录
 
-## Options
+- /src 组件开发目录
+- /script 组件构建脚本目录
+- /docs 文档目录
 
-TODO
+## 开发流程
 
-## Development
+- 从 `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 合并
 
-```bash
-# install dependencies
-$ yarn install
+## 发布流程
 
-# develop library by docs demo
-$ yarn start
+- 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/)
+- 相关账号配置联系 @陈书妍（一匠）
 
-# build library source code
-$ yarn run build
+## 问题反馈
 
-# build library source code in watch mode
-$ yarn run build:watch
+- 使用过程中有任何问题，可到对应仓库提交 [issue](http://gitlab.yunxiacn.com/data-group-front/much-library/-/issues)
+- 需添加使用场景，是否必现，复现路径等细节
+- 紧急情况下，可以自行进行实行，提交 MR 即可
 
-# build docs
-$ yarn run docs:build
+## 关联资源
 
-# check your project for potential problems
-$ yarn run doctor
-```
-
-## LICENSE
-
-MIT
+- [web 端一体化设计](https://mastergo.com/file/124592686063679?fileOpenFrom=project&page_id=116%3A9034) @张乐（卡卡）
+- [dumi 组件框架](https://d.umijs.org/)

package/dist/McContainer/index.css

@@ -2,17 +2,18 @@
   position: relative;
 }
 .mc-container__ceiling {
-  width: calc(100% - 48px);
+  width: calc(100% - 40px);
   height: 24px;
   position: absolute;
   top: 0;
-  left: 24px;
+  left: 16px;
   z-index: 9;
 }
 .mc-container__wrapper {
   height: 100%;
-  padding: 24px 24px 64px;
-  overflow: auto;
+  padding: 24px 24px 50px 16px;
+  overflow-y: auto;
+  border-top-right-radius: 12px;
 }
 .mc-container__query {
   display: -webkit-box;
@@ -27,7 +28,7 @@
 .mc-container__query .mc-select,
 .mc-container__query .mc-cascader,
 .mc-container__query .mc-input-number {
-  width: 280px;
+  width: 270px;
 }
 .mc-container__query .mc-date-range {
   width: 330px;
@@ -113,11 +114,11 @@
   transition: all 0.3s;
 }
 .mc-container__pagination {
-  padding: 16px 0 24px;
+  padding: 8px 0 16px;
   margin: 0 !important;
-  width: calc(100% - 48px);
+  width: calc(100% - 40px);
   position: absolute;
-  left: 24px;
+  left: 16px;
   bottom: 0;
   z-index: 9;
 }

package/dist/McContainer/index.d.ts

@@ -1,11 +1,15 @@
 import { TableProps } from 'antd';
 import { CSSProperties, FC, ReactElement, ReactNode } from 'react';
 import './index.less';
-export type PropsType = {
+export type McContainerPropsType = {
     style?: CSSProperties;
     className?: string;
     height?: string;
     backgroundColor?: string;
+    /**
+     * 是否展示头部遮罩，默认显示
+     */
+    showCell?: boolean;
     immediateQuery?: boolean;
     loading?: boolean;
     queryItems?: ReactElement;
@@ -30,6 +34,8 @@ export type PropsType = {
     onCancel?: () => void;
     tableProps?: TableProps<any>;
     tableRender?: ReactNode;
+    /** 折叠事件的回调 */
+    onCollapse?: (v: boolean) => void;
     [key: string]: any;
 };
 export type McContainerRef = {
@@ -45,5 +51,5 @@ export type McContainerRef = {
     getQueryParams: () => any;
     resetQueryParams: () => void;
 };
-declare const McContainer: FC<PropsType>;
+declare const McContainer: FC<McContainerPropsType>;
 export default McContainer;

package/dist/McContainer/index.js

@@ -15,6 +15,8 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     height = _props$height === void 0 ? 'calc(100vh - 88px)' : _props$height,
     _props$backgroundColo = props.backgroundColor,
     backgroundColor = _props$backgroundColo === void 0 ? '#ffffff' : _props$backgroundColo,
+    _props$showCell = props.showCell,
+    showCell = _props$showCell === void 0 ? true : _props$showCell,
     _props$immediateQuery = props.immediateQuery,
     immediateQuery = _props$immediateQuery === void 0 ? true : _props$immediateQuery,
     _props$loading = props.loading,
@@ -36,7 +38,8 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     batchBtns = props.batchBtns,
     onCancel = props.onCancel,
     tableProps = props.tableProps,
-    tableRender = props.tableRender;
+    tableRender = props.tableRender,
+    onCollapse = props.onCollapse;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     collapse = _useState2[0],
@@ -67,6 +70,9 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
       return actionBarResizeObserver.disconnect();
     };
   }, []);
+  useEffect(function () {
+    onCollapse === null || onCollapse === void 0 || onCollapse(collapse);
+  }, [collapse]);
 
   // 为设置过name属性的查询项添加value属性和onChange事件，从而收集查询项的值（查询项自身已绑定value属性的除外，需自行编写相关业务逻辑代码进行状态管理）
   var mapQuerys = function mapQuerys(items) {
@@ -265,7 +271,7 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
         height: height,
         backgroundColor: backgroundColor
       }, style),
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [showCell && /*#__PURE__*/_jsx("div", {
         className: "mc-container__ceiling",
         style: {
           backgroundColor: backgroundColor
@@ -273,7 +279,7 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
       }), /*#__PURE__*/_jsxs("div", {
         className: "mc-container__wrapper",
         style: {
-          paddingBottom: tableRender || tableRender === null || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) === false ? 24 : 64
+          paddingBottom: tableRender || tableRender === null || (tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) === false ? 16 : 50
         },
         children: [queryRender || queryRender === null ? queryRender : /*#__PURE__*/_jsxs("div", {
           className: "mc-container__query",
@@ -300,7 +306,8 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
               style: {
                 marginLeft: 16,
                 fontSize: 12,
-                padding: 0
+                padding: 0,
+                gap: 4
               },
               onClick: function onClick() {
                 return setCollapse(function (os) {
@@ -309,8 +316,7 @@ var McContainer = /*#__PURE__*/forwardRef(function (props, ref) {
               },
               children: [collapse ? '展开' : '收起', /*#__PURE__*/_jsx(DoubleLeftOutlined, {
                 style: {
-                  fontSize: 12,
-                  marginLeft: 2
+                  fontSize: 12
                 },
                 rotate: collapse ? -90 : 90
               })]

package/dist/McDateRange/index.d.ts

@@ -10,7 +10,7 @@ declare const shortcutValueMap: {
     last60days: string[];
     last90days: string[];
 };
-export declare const SHORTCUTprivateValue_MAP: typeof shortcutValueMap & {
+export declare const SHORTCUT_VALUE_MAP: typeof shortcutValueMap & {
     [key: string]: any;
 };
 export type McDateRangeProps = Omit<RangePickerProps, 'value' | 'onChange'> & {

package/dist/McDateRange/index.js

@@ -18,7 +18,7 @@ var shortcutValueMap = {
   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;
+export var SHORTCUT_VALUE_MAP = shortcutValueMap;
 var McDateRange = /*#__PURE__*/forwardRef(function (props, ref) {
   var style = props.style,
     className = props.className,

package/dist/McInput/index.css

@@ -42,3 +42,28 @@
   color: #b3b3b3;
   font-size: 12px;
 }
+.mc-input .ant-input-wrapper .ant-input-group-addon:nth-child(1)::after,
+.mc-input .ant-input-wrapper .ant-input-group-addon:nth-last-child(1)::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  /* 居中对齐 */
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  /* 垂直居中 */
+  height: 50%;
+  /* 竖线高度为输入框高度的 50% */
+  width: 1px;
+  /* 竖线宽度 */
+  background-color: #d8d8d8;
+  /* 竖线颜色 */
+}
+.mc-input .ant-input-wrapper .ant-input-group-addon:nth-child(1)::after {
+  right: 0;
+  /* 定位到右侧 */
+}
+.mc-input .ant-input-wrapper .ant-input-group-addon:nth-last-child(1)::before {
+  left: 0;
+  /* 定位到右侧 */
+}

package/dist/McLazyLoader/demo/basic.d.ts

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

package/dist/McLazyLoader/demo/basic.js

@@ -0,0 +1,33 @@
+/**
+ * title: 基本用法
+ * description: 元素出现在视窗时渲染, 日志见console.log。
+ */
+import { McLazyLoader } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+var textList = Array.from({
+  length: 100
+}, function (_, index) {
+  return index;
+});
+export default (function () {
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(McLazyLoader, {
+      style: {
+        height: 200,
+        overflow: 'auto'
+      },
+      itemMinHeight: 50,
+      children: textList.map(function (v) {
+        return /*#__PURE__*/_jsx("img", {
+          width: "auto",
+          height: 50,
+          onLoad: function onLoad() {
+            console.log('[window root: loaded]', new Date(), v);
+          },
+          src: "http://pre.data.muchcloud.com/static/img/logo-t.34c4816d.png",
+          alt: v.toString()
+        }, v);
+      })
+    })
+  });
+});

package/dist/McLazyLoader/demo/form.d.ts

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

package/dist/McLazyLoader/demo/form.js

@@ -0,0 +1,38 @@
+/**
+ * title: 基本用法 - 渲染表单项
+ * description: 元素出现在视窗时渲染, 日志见console.log。
+ */
+import { Form } from 'antd';
+import { McInput, McLazyLoader } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+var textList = Array.from({
+  length: 100
+}, function (_, index) {
+  return index;
+});
+var FormDemo = function FormDemo() {
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(Form, {
+      children: /*#__PURE__*/_jsx(McLazyLoader, {
+        style: {
+          height: 200,
+          overflow: 'auto'
+        },
+        itemMinHeight: 50,
+        children: textList.map(function (v) {
+          return /*#__PURE__*/_jsx(Form.Item, {
+            shouldUpdate: true,
+            children: function children() {
+              // 写成方法形式，是为了打日志。实际运用时正常写就行
+              console.log('[form item: loaded]', new Date(), v);
+              return /*#__PURE__*/_jsx(McInput, {
+                defaultValue: v
+              });
+            }
+          }, v);
+        })
+      })
+    })
+  });
+};
+export default FormDemo;

package/dist/McLazyLoader/demo/has-root.d.ts

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

package/dist/McLazyLoader/demo/has-root.js

@@ -0,0 +1,44 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 基本用法
+ * description: 元素出现在当前父组件(div)时渲染, 日志见console.log。和root=window不同的是，尽管元素没出现在浏览器视窗内，也会被render。
+ */
+import { McLazyLoader } from "../..";
+import { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var textList = Array.from({
+  length: 100
+}, function (_, index) {
+  return index;
+});
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    root = _useState2[0],
+    setRoot = _useState2[1];
+  useEffect(function () {
+    setRoot(document.getElementById('example1'));
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    id: "example1",
+    children: /*#__PURE__*/_jsx(McLazyLoader, {
+      style: {
+        height: 200,
+        overflow: 'auto'
+      },
+      itemMinHeight: 50,
+      root: root,
+      children: textList.map(function (v) {
+        return /*#__PURE__*/_jsx("img", {
+          width: "auto",
+          height: 50,
+          onLoad: function onLoad() {
+            console.log('[div root: loaded]', new Date(), v);
+          },
+          src: "http://pre.data.muchcloud.com/static/img/logo-t.34c4816d.png",
+          alt: v.toString()
+        }, v);
+      })
+    })
+  });
+});

package/dist/McLazyLoader/index.d.ts

@@ -0,0 +1,28 @@
+/** 监听容器内的list每个元素，当元素进入视图则展示，展示后不再消失 */
+import React from 'react';
+interface ObserverInsertionWrapperProps {
+    children: React.ReactNode[];
+    /**
+     * @description 最小高度，不能为0。为0时懒加载可能会无效
+     * @default 20
+     */
+    itemMinHeight?: number;
+    /**
+     * @description 距离视图多少像素时触发。出于用户体验考虑，建议设置一个正数
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * @description 重叠比例为多少时触发
+     * @default 0
+     */
+    threshold?: number;
+    /**
+     * @description 监听的根元素，不传则监听浏览器窗口
+     * @default null
+     */
+    root?: Element | Document | null;
+    style?: React.CSSProperties;
+}
+declare const ObserverInsertionWrapper: React.FC<ObserverInsertionWrapperProps>;
+export default ObserverInsertionWrapper;

package/dist/McLazyLoader/index.js

@@ -0,0 +1,69 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/** 监听容器内的list每个元素，当元素进入视图则展示，展示后不再消失 */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+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;
+  var wrapperRef = useRef(null);
+  var _useState = useState(new Array(children.length).fill(false)),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleItems = _useState2[0],
+    setVisibleItems = _useState2[1];
+  useEffect(function () {
+    var _wrapperRef$current;
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var index = Number(entry.target.getAttribute('data-index'));
+        if (entry.isIntersecting) {
+          observer.unobserve(entry.target);
+          setVisibleItems(function (prev) {
+            console.log('in:', index);
+            var newVisibleItems = _toConsumableArray(prev);
+            newVisibleItems[index] = true;
+            return newVisibleItems;
+          });
+        }
+      });
+    }, {
+      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, children.length]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: wrapperRef,
+    style: style,
+    children: React.Children.map(children, function (child, index) {
+      var key = /*#__PURE__*/React.isValidElement(child) ? child.key : index;
+      return /*#__PURE__*/_jsx("div", {
+        style: {
+          minHeight: itemMinHeight
+        },
+        "data-index": index,
+        children: visibleItems[index] ? child : null
+      }, key);
+    })
+  });
+};
+export default ObserverInsertionWrapper;

package/dist/McProSelect/demo/async.d.ts

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

package/dist/McProSelect/demo/async.js

@@ -0,0 +1,66 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+/**
+ * title: 远程请求 + 设置fieldNames
+ * description: 通过远程请求获取数据，同时支持通过fieldNames映射label、value字段。
+ */
+import { McProSelect } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+var mockDataList = {
+  total: 10,
+  pageSize: 1,
+  current: 1,
+  records: [{
+    id: 1,
+    name: '路由规则1'
+  }, {
+    id: 2,
+    name: '路由规则2'
+  }]
+};
+export default (function () {
+  var getRoutingList = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            return _context.abrupt("return", new Promise(function (resolve) {
+              console.log({
+                params: params
+              });
+              setTimeout(function () {
+                resolve(_objectSpread(_objectSpread({}, mockDataList), {}, {
+                  records: mockDataList.records.filter(function (item) {
+                    return !params.name || item.name.includes(params.name);
+                  })
+                }));
+              }, 200);
+            }));
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function getRoutingList(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_jsx(McProSelect, {
+    name: "routing",
+    label: "\u8DEF\u7531\u89C4\u5219",
+    searchKey: "name",
+    request: function request(params) {
+      return getRoutingList(_objectSpread(_objectSpread({}, params), {}, {
+        status: 1
+      }));
+    },
+    fieldNames: {
+      label: 'name',
+      value: 'id'
+    },
+    multiple: false,
+    required: true
+  });
+});

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

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

package/dist/McProSelect/demo/base.js

@@ -0,0 +1,29 @@
+/**
+ * title: 基本用法
+ * description: 增加name和label，原McSelect的属性放到fieldPros中
+ */
+import { McProSelect } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(McProSelect, {
+    name: "select1",
+    label: "select1",
+    fieldProps: {
+      defaultValue: 'lucy',
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }]
+    }
+  });
+});

package/dist/McProSelect/demo/exclusion-async-rename.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const App: React.FC;
+export default App;