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

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

@@ -6,12 +6,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import { DndContext } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { useAsync } from '@zykj2024/much-hooks';
+import { useAsync } from "../../../packages/hooks/src";
 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

@@ -4,7 +4,7 @@ import { Button } from 'antd';
 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);
+      }
+    })]
+  });
+});

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

@@ -0,0 +1,6 @@
+/**
+ * title: 已选项布局方式
+ * description: 设置 `selectedLayout` 展示不同的布局方式，若设置为 sortable，可实现拖拽排序功能
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McListSelect/demo/layout.js

@@ -0,0 +1,70 @@
+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: 设置 `selectedLayout` 展示不同的布局方式，若设置为 sortable，可实现拖拽排序功能
+ */
+
+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";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[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__*/_jsx(McListSelect, {
+      options: options,
+      label: "\u6BCF\u9879\u72EC\u5360\u4E00\u884C"
+    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(McListSelect, {
+      options: options,
+      label: "\u884C\u5185\u5E03\u5C40",
+      selectedLayout: "inline"
+    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(McListSelect, {
+      options: options,
+      label: "\u6BCF\u9879\u72EC\u5360\u4E00\u884C\u4E14\u53EF\u6392\u5E8F",
+      selectedLayout: "sortable"
+    })]
+  });
+});

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

@@ -0,0 +1,6 @@
+/**
+ * title: 常规属性
+ * description: 设置 `maxTagCount` 为 undefined 显示全部 tag<br>通过 `title` 设置标题<br>设置 `disabled` 为 true 禁用组件
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McListSelect/demo/other.js

@@ -0,0 +1,68 @@
+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: 设置 `maxTagCount` 为 undefined 显示全部 tag<br>通过 `title` 设置标题<br>设置 `disabled` 为 true 禁用组件
+ */
+
+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";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    options = _useState2[0],
+    setOptions = _useState2[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__*/_jsx(McListSelect, {
+      options: options,
+      maxTagCount: undefined
+    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(McListSelect, {
+      options: options,
+      title: "\u81EA\u5B9A\u4E49\u6807\u9898"
+    }), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx(McListSelect, {
+      options: options,
+      disabled: true
+    })]
+  });
+});

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

@@ -0,0 +1,6 @@
+/**
+ * title: 面板使用
+ * description: 下拉菜单面板可单独使用，其使用方法与 `McListSelect` 基本无异<br>注：`inexistent` 的配置项里没有 `reserveOriginalValue`，取而代之的是 `reserved`，设置为 true，则保留不存在的项并禁止其移除
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McListSelect/demo/panel-inexistent.js

@@ -0,0 +1,86 @@
+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: 下拉菜单面板可单独使用，其使用方法与 `McListSelect` 基本无异<br>注：`inexistent` 的配置项里没有 `reserveOriginalValue`，取而代之的是 `reserved`，设置为 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),
+    value = _useState4[0],
+    setValue = _useState4[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\uFF1A", JSON.stringify(value)]
+    }), /*#__PURE__*/_jsx(McListSelect.Panel, {
+      options: options,
+      labelInValue: true,
+      inexistent: {
+        reserved: true
+      },
+      value: value,
+      onChange: function onChange(v) {
+        console.log('onChange~', v);
+        setValue(v);
+      }
+    })]
+  });
+});