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

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

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

@@ -0,0 +1,6 @@
+/**
+ * title: 基础用法
+ * description: 通过 `value` 属性设置默认值，通过 `onChange` 事件获取当前值。
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McPeriodSelect/demo/base.js

@@ -0,0 +1,19 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 基础用法
+ * description: 通过 `value` 属性设置默认值，通过 `onChange` 事件获取当前值。
+ */
+
+import { McPeriodSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(McPeriodSelect, {
+    value: value,
+    onChange: setValue
+  });
+});

package/dist/McPeriodSelect/demo/half.d.ts

@@ -0,0 +1,6 @@
+/**
+ * title: 改变单位时间长度为半小时
+ * description: 通过设置half属性为true，可以使选择的时间段的单位长度变为半小时。
+ */
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/McPeriodSelect/demo/half.js

@@ -0,0 +1,20 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 改变单位时间长度为半小时
+ * description: 通过设置half属性为true，可以使选择的时间段的单位长度变为半小时。
+ */
+
+import { McPeriodSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/_jsx(McPeriodSelect, {
+    value: value,
+    half: true,
+    onChange: setValue
+  });
+});

package/dist/McPeriodSelect/index.css

@@ -0,0 +1,189 @@
+.mc-period-select {
+  width: 960px;
+  background: #fff;
+  border: 1px solid #ebebeb;
+  border-radius: 4px;
+}
+.mc-period-select__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 68px;
+  color: rgba(0, 0, 0, 0.847);
+  font-weight: bold;
+  font-size: 14px;
+  border-bottom: 1px solid #ebebeb;
+}
+.mc-period-select__title {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 95px;
+  line-height: 68px;
+  text-align: center;
+  border-right: 1px solid #ebebeb;
+}
+.mc-period-select__subtitle-box {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.mc-period-select__time-bar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  border-bottom: 1px solid #ebebeb;
+}
+.mc-period-select__time-bar div {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+}
+.mc-period-select__time-bar div:last-child {
+  border-left: 1px solid #ebebeb;
+}
+.mc-period-select__hour-bar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mc-period-select__hour-bar div {
+  width: 36px;
+  height: 27px;
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 27px;
+  text-align: center;
+}
+.mc-period-select__body {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mc-period-select__side-bar {
+  width: 95px;
+  border-right: 1px solid #ebebeb;
+}
+.mc-period-select__side-bar div {
+  height: 52px;
+  color: rgba(0, 0, 0, 0.65);
+  line-height: 52px;
+  text-align: center;
+  background: #f9f9f9;
+  border-bottom: 1px solid #ebebeb;
+}
+.mc-period-select__side-bar div:last-child {
+  border-bottom: 0;
+}
+.mc-period-select__wrapper {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.mc-period-select__day {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mc-period-select__day:last-child .mc-period-select__item {
+  border-bottom: 0;
+}
+.mc-period-select__item {
+  position: relative;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height: 52px;
+  background: #f9f9f9;
+  border-right: 1px solid #ebebeb;
+  border-bottom: 1px solid #ebebeb;
+}
+.mc-period-select__item__mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: none;
+  background: #91caff;
+  opacity: 0.5;
+}
+.mc-period-select__item:last-child {
+  border-right: 0;
+}
+.mc-period-select__item.mc-period-select__item--selected {
+  background: #325cf7;
+}
+.mc-period-select__item.mc-period-select__item--active .mc-period-select__item__mask {
+  display: block;
+}
+.mc-period-select__footer {
+  padding: 24px;
+  border-top: 1px solid #ebebeb;
+}
+.mc-period-select__action-bar {
+  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;
+  color: rgba(0, 0, 0, 0.428);
+}
+.mc-period-select__selected-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-top: 16px;
+  padding: 5px 8px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 22px;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+.mc-period-select__selected-item__title {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+.mc-period-select__selected-item__content {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin-right: 16px;
+}
+.mc-period-select__selected-item__remove {
+  height: 22px;
+  margin-left: auto;
+  color: #8c8c8c;
+}
+.mc-period-select__selected-item__remove:hover {
+  color: #262626;
+  cursor: pointer;
+}
+.mc-period-select.mc-period-select--disabled {
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.mc-period-select.mc-period-select--disabled::before {
+  position: absolute;
+  display: block;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.04);
+  cursor: not-allowed;
+  content: '';
+}

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

@@ -6,7 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Button } from 'antd';
 import { McIconFont } from "./..";
 import { useEffect, useMemo, useRef, useState } 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 getHours = function getHours() {

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;