@zykj2024/much-library 1.0.9 → 1.0.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/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,75 @@
+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);
+  console.log({
+    itemMinHeight: itemMinHeight
+  });
+  var _useState = useState(new Array(children.length).fill(false)),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleItems = _useState2[0],
+    setVisibleItems = _useState2[1];
+  console.log({
+    root: root
+  }, document.getElementById('example1'));
+  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;

package/dist/McProSelect/demo/exclusion-async-rename.js

@@ -0,0 +1,103 @@
+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: 动态option + 两个互斥的select + 设置fieldNames
+ * description: 基于远程请求，其他同上一个demo
+ */
+import { Form } from 'antd';
+import { McProSelect } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var mockDataList = {
+  total: 10,
+  pageSize: 1,
+  current: 1,
+  records: [{
+    id: 1,
+    name: '路由规则1'
+  }, {
+    id: 2,
+    name: '路由规则2'
+  }]
+};
+var App = function App() {
+  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__*/_jsxs(Form, {
+    name: "exclusion3",
+    children: [/*#__PURE__*/_jsx(Form.Item, {
+      noStyle: true,
+      dependencies: ['select2'],
+      children: function children(_ref2) {
+        var _getFieldValue;
+        var getFieldValue = _ref2.getFieldValue;
+        return /*#__PURE__*/_jsx(McProSelect, {
+          label: "select1",
+          name: "select1",
+          searchKey: "name",
+          request: function request(params) {
+            return getRoutingList(_objectSpread(_objectSpread({}, params), {}, {
+              status: 1
+            }));
+          },
+          fieldNames: {
+            label: 'name',
+            value: 'id'
+          },
+          tooltip: "\u7531JAVA spring\u6846\u67B6\u7BA1\u7406\u7684bean\u5B9E\u4F8B\u540D\u79F0",
+          excludeIds: [(_getFieldValue = getFieldValue('select2')) === null || _getFieldValue === void 0 ? void 0 : _getFieldValue.id]
+        });
+      }
+    }), /*#__PURE__*/_jsx(Form.Item, {
+      noStyle: true,
+      dependencies: ['select1'],
+      children: function children(_ref3) {
+        var _getFieldValue2;
+        var getFieldValue = _ref3.getFieldValue;
+        return /*#__PURE__*/_jsx(McProSelect, {
+          label: "select2",
+          name: "select2",
+          searchKey: "name",
+          request: function request(params) {
+            return getRoutingList(_objectSpread(_objectSpread({}, params), {}, {
+              status: 1
+            }));
+          },
+          fieldNames: {
+            label: 'name',
+            value: 'id'
+          },
+          tooltip: "\u7531JAVA spring\u6846\u67B6\u7BA1\u7406\u7684bean\u5B9E\u4F8B\u540D\u79F02",
+          excludeIds: [(_getFieldValue2 = getFieldValue('select1')) === null || _getFieldValue2 === void 0 ? void 0 : _getFieldValue2.id]
+        });
+      }
+    })]
+  });
+};
+export default App;

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

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

package/dist/McProSelect/demo/exclusion-rename.js

@@ -0,0 +1,74 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 静态option + 两个互斥的select + 设置fieldNames
+ * description: 上两种情况的组合
+ */
+import { Form } from 'antd';
+import { useForm } from 'antd/es/form/Form';
+import { McProSelect } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var options = [{
+  name: 'goldLabel',
+  id: 'gold'
+}, {
+  name: 'limeLabel',
+  id: 'lime'
+}, {
+  name: 'greenLabel',
+  id: 'green'
+}, {
+  name: 'cyanLabel',
+  id: 'cyan'
+}];
+var App = function App() {
+  var _useForm = useForm(),
+    _useForm2 = _slicedToArray(_useForm, 1),
+    form = _useForm2[0];
+  return /*#__PURE__*/_jsxs(Form, {
+    form: form,
+    name: "exclusion2",
+    children: [/*#__PURE__*/_jsx(Form.Item, {
+      noStyle: true,
+      dependencies: ['select2'],
+      children: function children(_ref) {
+        var _getFieldValue;
+        var getFieldValue = _ref.getFieldValue;
+        return /*#__PURE__*/_jsx(McProSelect, {
+          label: "select1",
+          name: "select1",
+          tooltip: "\u7531JAVA spring\u6846\u67B6\u7BA1\u7406\u7684bean\u5B9E\u4F8B\u540D\u79F0",
+          excludeIds: [(_getFieldValue = getFieldValue('select2')) === null || _getFieldValue === void 0 ? void 0 : _getFieldValue.id],
+          fieldNames: {
+            label: 'name',
+            value: 'id'
+          },
+          fieldProps: {
+            options: options
+          }
+        });
+      }
+    }), /*#__PURE__*/_jsx(Form.Item, {
+      noStyle: true,
+      dependencies: ['select1'],
+      children: function children(_ref2) {
+        var _getFieldValue2;
+        var getFieldValue = _ref2.getFieldValue;
+        return /*#__PURE__*/_jsx(McProSelect, {
+          label: "select2",
+          name: "select2",
+          tooltip: "\u7531JAVA spring\u6846\u67B6\u7BA1\u7406\u7684bean\u5B9E\u4F8B\u540D\u79F02",
+          excludeIds: [(_getFieldValue2 = getFieldValue('select1')) === null || _getFieldValue2 === void 0 ? void 0 : _getFieldValue2.id],
+          fieldNames: {
+            label: 'name',
+            value: 'id'
+          },
+          fieldProps: {
+            options: options
+          }
+        });
+      }
+    })]
+  });
+};
+export default App;

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

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

package/dist/McProSelect/demo/exclusion.js

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 静态option + 两个互斥的select
+ * description: select1中选择的选项会在select2中被排除，反之亦然。此方法同样支持远程select。
+ */
+import { Form } from 'antd';
+import { useForm } from 'antd/es/form/Form';
+import { McProSelect } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var options = [{
+  label: 'goldLabel',
+  value: 'gold'
+}, {
+  label: 'limeLabel',
+  value: 'lime'
+}, {
+  label: 'greenLabel',
+  value: 'green'
+}, {
+  label: 'cyanLabel',
+  value: 'cyan'
+}];
+var App = function App() {
+  var _useForm = useForm(),
+    _useForm2 = _slicedToArray(_useForm, 1),
+    form = _useForm2[0];
+  return /*#__PURE__*/_jsxs(Form, {
+    form: form,
+    name: "exclusion2",
+    children: [/*#__PURE__*/_jsx(Form.Item, {
+      noStyle: true
+      // 也可以用dependencies
+      ,
+      shouldUpdate: function shouldUpdate(prev, next) {
+        return prev['select2'] !== next['select2'];
+      },
+      children: function children(_ref) {
+        var _getFieldValue;
+        var getFieldValue = _ref.getFieldValue;
+        return /*#__PURE__*/_jsx(McProSelect, {
+          label: "select1",
+          name: "select1",
+          tooltip: "\u7531JAVA spring\u6846\u67B6\u7BA1\u7406\u7684bean\u5B9E\u4F8B\u540D\u79F0",
+          excludeIds: [(_getFieldValue = getFieldValue('select2')) === null || _getFieldValue === void 0 ? void 0 : _getFieldValue.value],
+          fieldProps: {
+            options: options
+          }
+        });
+      }
+    }), /*#__PURE__*/_jsx(Form.Item, {
+      noStyle: true,
+      dependencies: ['select1'],
+      children: function children(_ref2) {
+        var _getFieldValue2;
+        var getFieldValue = _ref2.getFieldValue;
+        return /*#__PURE__*/_jsx(McProSelect, {
+          label: "select2",
+          name: "select2",
+          tooltip: "\u7531JAVA spring\u6846\u67B6\u7BA1\u7406\u7684bean\u5B9E\u4F8B\u540D\u79F02",
+          excludeIds: [(_getFieldValue2 = getFieldValue('select1')) === null || _getFieldValue2 === void 0 ? void 0 : _getFieldValue2.value],
+          fieldProps: {
+            options: options
+          }
+        });
+      }
+    })]
+  });
+};
+export default App;

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

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