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

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);
+      }
+    })]
+  });
+});

package/dist/McListSelect/index.css

@@ -0,0 +1,273 @@
+.mc-list-select {
+  width: 100%;
+}
+.mc-list-select__label {
+  position: absolute;
+  top: 0;
+  left: 11px;
+  z-index: 2;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  color: #262626;
+  font-size: 14px;
+}
+.mc-list-select__label::after {
+  margin-left: 2px;
+  content: '\FF1A';
+}
+.mc-list-select__label.mc-list-select--disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: no-drop;
+}
+.mc-list-select__content {
+  width: 100%;
+  height: 100%;
+}
+.mc-list-select__content.ant-select .ant-select-selector {
+  padding-left: var(--selector-pl);
+}
+.mc-list-select__content.ant-select .ant-select-selector .ant-select-selection-overflow-item-rest .ant-select-selection-item {
+  padding-left: 4px;
+  color: #fff;
+  background: #325cf7;
+}
+.mc-list-select__content.ant-select .ant-select-selector .ant-select-selection-overflow-item-rest .ant-select-selection-item .ant-select-selection-item-content {
+  margin-right: 0;
+}
+.mc-list-select__content.ant-select .ant-select-selector .ant-select-selection-item[title*='「'][title$='」'] {
+  color: var(--inexistent-color);
+}
+.mc-list-select__content.ant-select.ant-select-single .ant-select-selector .ant-select-selection-search {
+  left: var(--selector-pl);
+}
+.mc-list-select__content.ant-select.ant-select-multiple .ant-select-selector .ant-select-selection-placeholder {
+  left: var(--selector-pl);
+}
+.mc-list-select__content.ant-select.ant-select-multiple .ant-select-selector .ant-select-selection-search {
+  margin-left: 0;
+}
+.mc-list-select.mc-list-select--inline .ant-select-selection-overflow-item:not(
+      .ant-select-selection-overflow-item-rest,
+      .ant-select-selection-overflow-item-suffix
+    ) {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  min-width: 0;
+  margin-right: 4px;
+}
+.mc-list-select__dropdown-footer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  height: 48px;
+  -webkit-column-gap: 8px;
+  -moz-column-gap: 8px;
+  column-gap: 8px;
+}
+.mc-list-select-panel {
+  width: 560px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 400px;
+  -webkit-column-gap: 8px;
+  -moz-column-gap: 8px;
+  column-gap: 8px;
+  position: relative;
+}
+.mc-list-select-panel__title {
+  font-weight: 500;
+}
+.mc-list-select-panel__card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+.mc-list-select-panel__card__header {
+  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;
+  height: 40px;
+  padding: 0 12px;
+  background: #fafafa;
+}
+.mc-list-select-panel__card__search {
+  padding: 8px 12px;
+}
+.mc-list-select-panel__card__search .mc-search {
+  width: 100%;
+}
+.mc-list-select-panel__card__checkall {
+  height: 40px;
+}
+.mc-list-select-panel__card__checkall__inner {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: 0 12px;
+}
+.mc-list-select-panel__card__checkall__inner:hover {
+  background: #EAEEFE;
+}
+.mc-list-select-panel__card__checkall__inner .ant-checkbox + span {
+  width: calc(100% - 16px);
+  padding-right: 0;
+}
+.mc-list-select-panel__card__footer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  height: 40px;
+  padding: 0 7px 0 12px;
+}
+.mc-list-select-panel__card__footer .ant-pagination {
+  width: 100%;
+}
+.mc-list-select-panel__card__footer .ant-pagination .ant-pagination-total-text {
+  margin-right: auto;
+}
+.mc-list-select-panel__card__footer .ant-pagination .ant-pagination-item-link {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+.mc-list-select-panel__card__footer .ant-pagination .ant-pagination-simple-pager input {
+  background: #f0f2f5;
+}
+.mc-list-select-panel__card__footer .ant-pagination .ant-pagination-simple-pager input:not(:hover, :focus) {
+  border-color: #f0f2f5;
+}
+.mc-list-select-panel__card__left {
+  width: 312px;
+}
+.mc-list-select-panel__card__left .mc-list-select-panel__card__empty {
+  margin-top: 60px;
+}
+.mc-list-select-panel__card__right {
+  width: 240px;
+}
+.mc-list-select-panel__card__right .mc-list-select-panel__card__empty {
+  margin-top: 148px;
+}
+.mc-list-select-panel__options {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow: auto;
+}
+.mc-list-select-panel__option {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: 0 12px;
+}
+.mc-list-select-panel__option:hover {
+  background: #F5F5F5;
+}
+.mc-list-select-panel__option .ant-checkbox + span {
+  width: calc(100% - 16px);
+  padding-right: 0;
+}
+.mc-list-select-panel__selected-list-wrapper {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding: 8px;
+  overflow: auto;
+}
+.mc-list-select-panel__selected-list {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.mc-list-select-panel__selected-item {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: 0 8px;
+  overflow: hidden;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+.mc-list-select-panel__selected-item__drag {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: -4px;
+  color: #8c8c8c;
+}
+.mc-list-select-panel__selected-item__drag:hover {
+  background: rgba(38, 38, 38, 0.15) !important;
+  cursor: move;
+}
+.mc-list-select-panel__selected-item__remove {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 8px;
+  color: #8c8c8c;
+}
+.mc-list-select-panel__selected-item__remove:hover {
+  color: #262626;
+  cursor: pointer;
+}
+.mc-list-select-panel--disabled {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9;
+  background: rgba(228, 228, 228, 0.3);
+  border-radius: 4px;
+  cursor: no-drop;
+}

package/dist/McListSelect/index.d.ts

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { McListSelectProps, McListSelectRef } from './comps/ListSelect';
+import ListSelectPanel from './comps/ListSelectPanel';
+export type { McListSelectProps, McListSelectRef } from './comps/ListSelect';
+export type { McListSelectFetchOptions, McListSelectPanelProps, McListSelectPanelRef, } from './comps/ListSelectPanel';
+type CompoundedComponent = ForwardRefExoticComponent<McListSelectProps & RefAttributes<McListSelectRef>> & {
+    Panel: typeof ListSelectPanel;
+};
+declare const McListSelect: CompoundedComponent;
+export default McListSelect;

package/dist/McListSelect/index.js

@@ -0,0 +1,5 @@
+import ListSelect from "./comps/ListSelect";
+import ListSelectPanel from "./comps/ListSelectPanel";
+var McListSelect = ListSelect;
+McListSelect.Panel = ListSelectPanel;
+export default McListSelect;

package/dist/McListSelect/mock/index.d.ts

@@ -0,0 +1 @@
+export declare const mockList: ({ current, pageSize, keyword }: any) => Promise<unknown>;

package/dist/McListSelect/mock/index.js

@@ -0,0 +1,27 @@
+/* 获取备选数据 */
+export var mockList = function mockList(_ref) {
+  var current = _ref.current,
+    pageSize = _ref.pageSize,
+    keyword = _ref.keyword;
+  var list = [];
+  for (var i = 0; i < 1000; i++) {
+    list.push({
+      id: 'v' + i,
+      name: ((i + 1) % 7 === 0 ? '超长的文本选项一二三四五六七八九十一二三四五六七八九十' : '选项') + i
+    });
+  }
+  var _list = list.filter(function (_ref2) {
+    var name = _ref2.name;
+    return keyword ? name.includes(keyword) : true;
+  });
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      resolve({
+        data: {
+          records: _list.slice((current - 1) * pageSize, current * pageSize),
+          total: _list.length
+        }
+      });
+    }, 500);
+  });
+};