@zykj2024/much-library 1.1.7-beta.9 → 1.1.7

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

@@ -3,16 +3,15 @@ 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 "./index.css";
 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,
+    _onChange = props.onChange,
     className = props.className,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = useState(null),
@@ -22,19 +21,6 @@ var McInputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
   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 || ''),
@@ -43,7 +29,14 @@ var McInputNumber = /*#__PURE__*/forwardRef(function (props, ref) {
       children: label
     }),
     value: inputNumberValue,
-    onChange: handleChange,
+    onChange: function onChange(v) {
+      // 检查是否为数字，并格式化为最多保留precision位小数，否则清空
+      var _v = typeof v === 'number' ? parseFloat(v.toFixed(precision)) : null;
+      if (!props.hasOwnProperty('value')) {
+        setInputNumberValue(_v);
+      }
+      _onChange === null || _onChange === void 0 || _onChange(_v);
+    },
     placeholder: "\u8BF7\u8F93\u5165"
   }, rest));
 });

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;

package/dist/McLazyLoader/demo/hori.js

@@ -0,0 +1,39 @@
+/**
+ * title: grid布局用法
+ * 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',
+        display: 'flex',
+        flexWrap: 'wrap'
+      },
+      onItemVisible: function onItemVisible(index) {
+        console.log('visible', index);
+      },
+      itemMinHeight: 50,
+      itemMinWidth: 200,
+      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/table.d.ts

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

package/dist/McLazyLoader/demo/table.js

@@ -0,0 +1,73 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 在Antd Table翻页场景中使用
+ * description: 翻页后的数据会重新进入懒加载流程
+ */
+import { Table } from 'antd';
+import { McLazyLoader } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } 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(Table, {
+      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: 430,
+              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/{esm/McListSelect → McListSelect}/comps/ListSelect.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Button, Popover, Select } from 'antd';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import "../index.less";
+import "../index.css";
 import ListSelectPanel, { isLabelInValue } from "./ListSelectPanel";
 
 /**

package/dist/{esm/McListSelect → McListSelect}/comps/ListSelectPanel.js

@@ -11,7 +11,7 @@ import { Button, Checkbox, Empty, Pagination, Spin } from 'antd';
 import classNames from 'classnames';
 import { McEllipsis, McInput } from "../..";
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import "../index.less";
+import "../index.css";
 import SelectedItem from "./SelectedItem";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/dist/{esm/McListSelect → McListSelect}/comps/SelectedItem.js

@@ -1,10 +1,10 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useSortable } from '@dnd-kit/sortable';
 import { Button } from 'antd';
-import { MenuOutlined } from '@zykj2024/much-icons';
+import { MenuOutlined } from 'much-icons';
 import { McEllipsis, McIconFont } from "../..";
 import { memo } from 'react';
-import "../index.less";
+import "../index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SelectedItem = function SelectedItem(_ref) {

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

@@ -0,0 +1,6 @@
+/**
+ * title: 基本使用
+ * description: 通过 `options` 设置备选项<br>设置含有禁用项的备选项<br>通过 `fetchOptions` 实现远端异步分页查询<br>设置 `initOnOpen` 为 false 时，展开下拉菜单会保留上次查询结果
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McListSelect/demo/base.js

@@ -0,0 +1,125 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+/**
+ * title: 基本使用
+ * description: 通过 `options` 设置备选项<br>设置含有禁用项的备选项<br>通过 `fetchOptions` 实现远端异步分页查询<br>设置 `initOnOpen` 为 false 时，展开下拉菜单会保留上次查询结果
+ */
+
+import { McListSelect } from "../..";
+import { useEffect, useState } from 'react';
+import { mockList } from "../mock";
+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 fetchOptions = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+    var current, pageSize, keyword, _data$records, _yield$mockList, data;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          current = _ref.current, pageSize = _ref.pageSize, keyword = _ref.keyword;
+          _context.prev = 1;
+          _context.next = 4;
+          return mockList({
+            current: current,
+            pageSize: pageSize,
+            keyword: keyword
+          });
+        case 4:
+          _yield$mockList = _context.sent;
+          data = _yield$mockList.data;
+          return _context.abrupt("return", {
+            data: (data === null || data === void 0 || (_data$records = data.records) === null || _data$records === void 0 ? void 0 : _data$records.map(function (_ref3) {
+              var id = _ref3.id,
+                name = _ref3.name;
+              return {
+                value: id,
+                label: name
+              };
+            })) || [],
+            total: (data === null || data === void 0 ? void 0 : data.total) || 0
+          });
+        case 9:
+          _context.prev = 9;
+          _context.t0 = _context["catch"](1);
+          return _context.abrupt("return", {
+            data: [],
+            total: 0
+          });
+        case 12:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 9]]);
+  }));
+  return function fetchOptions(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasDisabledOptions = _useState4[0],
+    setHasDisabledOptions = _useState4[1];
+  var initOptions = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var _data$records2;
+      var _yield$mockList2, data, options, hasDisabledOptions;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return mockList({
+              current: 1,
+              pageSize: 999
+            });
+          case 2:
+            _yield$mockList2 = _context2.sent;
+            data = _yield$mockList2.data;
+            options = data === null || data === void 0 || (_data$records2 = data.records) === null || _data$records2 === void 0 ? void 0 : _data$records2.map(function (_ref5) {
+              var id = _ref5.id,
+                name = _ref5.name;
+              return {
+                value: id,
+                label: name
+              };
+            });
+            hasDisabledOptions = options === null || options === void 0 ? void 0 : options.map(function (item, index) {
+              return _objectSpread(_objectSpread({}, item), {}, {
+                disabled: (index + 1) % 3 === 0
+              });
+            });
+            setOptions(options);
+            setHasDisabledOptions(hasDisabledOptions);
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function initOptions() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    initOptions();
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(McListSelect, {
+      options: options
+    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(McListSelect, {
+      options: hasDisabledOptions
+    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(McListSelect, {
+      fetchOptions: fetchOptions
+    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(McListSelect, {
+      fetchOptions: fetchOptions,
+      initOnOpen: false
+    })]
+  });
+});

package/dist/McListSelect/demo/inexistent.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 不存在值的回显
+ * description: 设置 `inexistent` 为 true，执行不存在值的处理逻辑，若需保留原值，需设置 `reserveOriginalValue` 为 true，涉及回显场景时，建议将 `labelInValue` 设置为 true
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McListSelect/demo/inexistent.js

@@ -0,0 +1,111 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 不存在值的回显
+ * description: 设置 `inexistent` 为 true，执行不存在值的处理逻辑，若需保留原值，需设置 `reserveOriginalValue` 为 true，涉及回显场景时，建议将 `labelInValue` 设置为 true
+ */
+
+import { McListSelect } from "../..";
+import { useEffect, useState } from 'react';
+import { mockList } from "../mock";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[1];
+  var _useState3 = useState([{
+      value: 'xxx',
+      label: 'XXX'
+    }, {
+      value: 'v2',
+      label: '选项2'
+    }]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value1 = _useState4[0],
+    setValue1 = _useState4[1];
+  var _useState5 = useState([{
+      value: 'xxx',
+      label: 'XXX'
+    }, {
+      value: 'v2',
+      label: '选项2'
+    }]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    value2 = _useState6[0],
+    setValue2 = _useState6[1];
+  var initOptions = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _data$records;
+      var _yield$mockList, data;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return mockList({
+              current: 1,
+              pageSize: 999
+            });
+          case 2:
+            _yield$mockList = _context.sent;
+            data = _yield$mockList.data;
+            setOptions(data === null || data === void 0 || (_data$records = data.records) === null || _data$records === void 0 ? void 0 : _data$records.map(function (_ref2) {
+              var id = _ref2.id,
+                name = _ref2.name;
+              return {
+                value: id,
+                label: name
+              };
+            }));
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function initOptions() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    initOptions();
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        fontSize: 14,
+        marginBottom: 8
+      },
+      children: ["\u5F53\u524D\u503C\uFF08\u4E0D\u4FDD\u7559\u539F\u503C\uFF09\uFF1A", JSON.stringify(value1)]
+    }), /*#__PURE__*/_jsx(McListSelect, {
+      options: options,
+      labelInValue: true,
+      inexistent: true,
+      value: value1,
+      onChange: function onChange(v) {
+        console.log('onChange1~', v);
+        setValue1(v);
+      }
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        fontSize: 14,
+        marginBottom: 8
+      },
+      children: ["\u5F53\u524D\u503C\uFF08\u4FDD\u7559\u539F\u503C\uFF09\uFF1A", JSON.stringify(value2)]
+    }), /*#__PURE__*/_jsx(McListSelect, {
+      options: options,
+      labelInValue: true,
+      inexistent: {
+        reserveOriginalValue: true
+      },
+      value: value2,
+      onChange: function onChange(v) {
+        console.log('onChange2~', v);
+        setValue2(v);
+      }
+    })]
+  });
+});