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

package/dist/McGroupPanel/index.css

@@ -0,0 +1,169 @@
+.mc-group-panel {
+  width: 100%;
+  height: 341px;
+  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 8px;
+  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;
+  font-size: 14px;
+}
+.mc-group-panel__card-icon {
+  color: #8c8c8c;
+}
+.mc-group-panel__card-body {
+  height: calc(100% - 40px);
+  overflow: auto;
+  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%;
+  overflow: auto;
+}
+.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;
+  padding-bottom: 20px;
+}
+.mc-group-panel__options-list {
+  height: calc(100% - 40px);
+  overflow: auto;
+}
+.mc-group-panel__search-bar {
+  padding: 0 12px;
+}
+.mc-group-panel__checkbox-wrapper {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 12px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.mc-group-panel__checkbox-wrapper:not(.mc-group-panel__check-all):hover {
+  background: #f6f6f6;
+  cursor: pointer;
+}
+.mc-group-panel__checkbox {
+  width: 100%;
+  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: 100%;
+  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/{esm/McGroupPanel → McGroupPanel}/index.js

@@ -8,7 +8,7 @@ import debounce from 'lodash/debounce';
 import { SearchOutlined } from 'much-icons';
 import { useEffect, useMemo, useState } from 'react';
 import SelectedItem from "./comps/SelectedItem";
-import "./index.less";
+import "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/dist/McIcons/index.css

@@ -0,0 +1,33 @@
+.icons-row-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.icons-row-item .abc {
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  transition: -webkit-transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+}
+.icons-row-item:hover {
+  background-color: #1677ff !important;
+  color: #fff !important;
+}
+.icons-row-item:hover .abc {
+  -webkit-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+}

package/dist/{esm/McInput → McInput}/Input.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["label", "isTrim", "value", "onChange", "onPressEnter", "className"];
 import { Input } from 'antd';
 import { forwardRef, useEffect, useState } from 'react';
-import "./index.less";
+import "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 var McInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,

package/dist/{esm/McInput → McInput}/Search.js

@@ -5,7 +5,7 @@ var _excluded = ["isTrim", "enterButton", "loading", "value", "onChange", "onSea
 import { Button, Input } from 'antd';
 import { SearchOutlined } from 'much-icons';
 import { forwardRef, useEffect, useMemo, useState } from 'react';
-import "./index.less";
+import "./index.css";
 
 /* 该组件不支持原antd组件的 suffix 属性 */
 import { jsx as _jsx } from "react/jsx-runtime";

package/dist/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/McInput/index.css

@@ -0,0 +1,71 @@
+/** 给input和input number用的， 增加竖线 **/
+/** 最后一个formitem没有底部空白 */
+.mc-input .ant-input-suffix .ant-input-show-count-suffix,
+.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;
+}
+.mc-input__label::after {
+  content: '\FF1A';
+  margin-left: 2px;
+}
+.mc-search {
+  width: 280px;
+}
+.mc-search .mc-search__icon {
+  width: auto;
+  height: 22px;
+  padding: 0;
+  color: #8c8c8c;
+}
+.mc-search .ant-input-affix-wrapper + .ant-input-group-addon {
+  inset-inline-start: -1px;
+  padding: 0;
+  border: 0;
+}
+.mc-search .ant-input-affix-wrapper + .ant-input-group-addon .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;
+}
+.mc-textarea .ant-input-suffix .ant-input-data-count {
+  bottom: 0;
+  right: 11px;
+  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/McInputNumber/demo/index.d.ts

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

package/dist/McInputNumber/demo/index.js

@@ -0,0 +1,34 @@
+/**
+ * title: 基本用法
+ * description: 数字输入框
+ */
+import { Space } from 'antd';
+import { McInputNumber } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs(Space, {
+    direction: "vertical",
+    size: 16,
+    children: [/*#__PURE__*/_jsx(McInputNumber, {
+      style: {
+        width: 200
+      }
+    }), /*#__PURE__*/_jsx(McInputNumber, {
+      addonBefore: "\u65E7\u7D20\u6750",
+      addonAfter: "%",
+      style: {
+        width: 200
+      }
+    }), /*#__PURE__*/_jsxs(Space, {
+      children: [/*#__PURE__*/_jsx("span", {
+        children: "\u7981\u7528"
+      }), /*#__PURE__*/_jsx(McInputNumber, {
+        disabled: true,
+        style: {
+          width: 200
+        }
+      })]
+    })]
+  });
+});

package/dist/McInputNumber/demo/label.d.ts

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

package/dist/McInputNumber/demo/label.js

@@ -0,0 +1,26 @@
+/**
+ * title: 前缀
+ * description: label属性，配置label属性后会多一个冒号（主要用于McContainer查询区），antd原生属性prefix会覆盖label属性
+ */
+import { Space } from 'antd';
+import { McInputNumber } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs(Space, {
+    direction: "vertical",
+    size: 16,
+    children: [/*#__PURE__*/_jsx(McInputNumber, {
+      label: "\u6570\u5B57",
+      style: {
+        width: 200
+      }
+    }), /*#__PURE__*/_jsx(McInputNumber, {
+      label: "\u6570\u5B57",
+      prefix: "\u524D\u7F00\u8986\u76D6",
+      style: {
+        width: 200
+      }
+    })]
+  });
+});

package/dist/McInputNumber/demo/precision.d.ts

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

package/dist/McInputNumber/demo/precision.js

@@ -0,0 +1,20 @@
+/**
+ * title: 数值精度
+ * description: precision属性，默认为0即整数。不够精度时，不自动补0；超出精度，自动四舍五入。
+ */
+import { Space } from 'antd';
+import { McInputNumber } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Space, {
+    direction: "vertical",
+    size: 16,
+    children: /*#__PURE__*/_jsx(McInputNumber, {
+      defaultValue: 1.1,
+      precision: 2,
+      style: {
+        width: 200
+      }
+    })
+  });
+});

package/dist/McInputNumber/index.css

@@ -0,0 +1,36 @@
+/** 给input和input number用的， 增加竖线 **/
+/** 最后一个formitem没有底部空白 */
+.mc-input-number__label {
+  color: #262626;
+  font-size: 14px;
+  margin-right: -4px;
+}
+.mc-input-number__label::after {
+  content: '\FF1A';
+  margin-left: 2px;
+}
+.mc-input-number .ant-input-number-wrapper .ant-input-number-group-addon:nth-child(1)::after,
+.mc-input-number .ant-input-number-wrapper .ant-input-number-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-number .ant-input-number-wrapper .ant-input-number-group-addon:nth-child(1)::after {
+  right: 0;
+  /* 定位到右侧 */
+}
+.mc-input-number .ant-input-number-wrapper .ant-input-number-group-addon:nth-last-child(1)::before {
+  left: 0;
+  /* 定位到右侧 */
+}

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

@@ -5,7 +5,7 @@ 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 "./index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 var McInputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
   var label = props.label,

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/container.d.ts

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

package/dist/McLazyLoader/demo/container.js

@@ -0,0 +1,83 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: McContainer+自定义table body场景中使用
+ * description: 翻页后的数据会重新进入懒加载流程,比如天玑-素材管理
+ */
+import { McLazyLoader } from "../..";
+import { useState } from 'react';
+import McContainer from "../../McContainer";
+import McInput from "../../McInput";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var getTextList = function getTextList(cur) {
+  return Array.from({
+    length: 40
+  }, function (_, index) {
+    return {
+      key: index + cur,
+      value: index
+    };
+  });
+};
+export default (function () {
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    cur = _useState2[0],
+    setCur = _useState2[1];
+  console.log(cur);
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(McContainer, {
+      queryItems: /*#__PURE__*/_jsx(_Fragment, {
+        children: /*#__PURE__*/_jsx(McInput, {
+          label: "\u59D3\u540D",
+          name: "name",
+          style: {
+            width: 270
+          }
+        })
+      }),
+      height: "500px",
+      tableProps: {
+        dataSource: getTextList(cur),
+        // scroll: {y: 200},
+        pagination: {
+          pageSize: 40,
+          current: cur,
+          total: 120
+        },
+        onChange: function onChange(info) {
+          var _info$current;
+          setCur((_info$current = info === null || info === void 0 ? void 0 : info.current) !== null && _info$current !== void 0 ? _info$current : 1);
+        },
+        components: {
+          body: function body(data) {
+            return /*#__PURE__*/_jsx(McLazyLoader, {
+              style: {
+                height: 200,
+                width: 500,
+                overflow: 'auto',
+                display: 'flex',
+                flexWrap: 'wrap'
+              },
+              onItemVisible: function onItemVisible(index) {
+                console.log('visible', index);
+              },
+              itemMinHeight: 50,
+              itemMinWidth: 200,
+              children: data.map(function (x) {
+                return /*#__PURE__*/_jsx("img", {
+                  width: "auto",
+                  height: 50,
+                  onLoad: function onLoad() {
+                    console.log('[window root: loaded]', new Date(), x.key, cur);
+                  },
+                  src: "http://pre.data.muchcloud.com/static/img/logo-t.34c4816d.png"
+                }, x.key + '_' + cur);
+              })
+            });
+          }
+        }
+      }
+    })
+  });
+});

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/demo/hori.d.ts

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