@zykj2024/much-library 1.0.9

package/dist/McSelect/demo/inexistent.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: 显示不存在
+ */
+import { Space } from 'antd';
+import { McSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(['1']),
+    _useState2 = _slicedToArray(_useState, 2),
+    value1 = _useState2[0],
+    setValue1 = _useState2[1];
+  return /*#__PURE__*/_jsxs(Space, {
+    wrap: true,
+    children: [/*#__PURE__*/_jsx(McSelect, {
+      value: value1,
+      onChange: setValue1,
+      inexistent: true,
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }]
+    }), /*#__PURE__*/_jsx(McSelect, {
+      value: value1,
+      onChange: setValue1,
+      inexistent: {
+        inexistentText: '已关闭'
+      },
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }]
+    }), /*#__PURE__*/_jsx(McSelect, {
+      value: value1,
+      onChange: setValue1,
+      inexistent: {
+        inexistentColor: 'skyblue',
+        inexistentText: '已关闭',
+        reserveOriginalValue: true
+      },
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }]
+    })]
+  });
+});

package/dist/McSelect/demo/labelInValue.d.ts

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

package/dist/McSelect/demo/labelInValue.js

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/**
+ * title: value值为对象
+ */
+import { McSelect } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default (function () {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    allowCreateValue = _useState4[0],
+    setAllowCreateValue = _useState4[1];
+  var handleChange = function handleChange(value) {
+    setValue(value);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(McSelect, {
+      label: "\u5355\u9009",
+      labelInValue: true,
+      value: value,
+      style: {
+        width: 200
+      },
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }],
+      onChange: handleChange
+    }), value && JSON.stringify(value), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(McSelect, {
+        label: "\u591A\u9009",
+        labelInValue: true,
+        value: allowCreateValue,
+        style: {
+          width: 200
+        },
+        options: [{
+          value: 'jack',
+          label: 'Jack'
+        }, {
+          value: 'lucy',
+          label: 'Lucy'
+        }, {
+          value: 'Yiminghe',
+          label: 'yiminghe'
+        }, {
+          value: 'disabled',
+          label: 'Disabled',
+          disabled: true
+        }],
+        onChange: setAllowCreateValue,
+        multiple: true
+      }), (allowCreateValue === null || allowCreateValue === void 0 ? void 0 : allowCreateValue.length) > 0 && JSON.stringify(allowCreateValue)]
+    })]
+  });
+});

package/dist/McSelect/demo/maxTagCount.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/dist/McSelect/demo/maxTagCount.js

@@ -0,0 +1,51 @@
+/**
+ * title: 多选时显示tag的个数
+ * description: 多选下通过响应式布局让选项自动收缩。该功能对性能有所消耗，不推荐在大表单场景下使用。
+ */
+
+import { Tag } from 'antd';
+import { McSelect } from "../..";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var options = [{
+  value: 'gold'
+}, {
+  value: 'lime'
+}, {
+  value: 'green'
+}, {
+  value: 'cyan'
+}];
+var tagRender = function tagRender(props) {
+  var label = props.label,
+    value = props.value,
+    closable = props.closable,
+    onClose = props.onClose;
+  var onPreventMouseDown = function onPreventMouseDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return /*#__PURE__*/_jsx(Tag, {
+    color: value,
+    onMouseDown: onPreventMouseDown,
+    closable: closable,
+    onClose: onClose,
+    style: {
+      marginInlineEnd: 4
+    },
+    children: label
+  });
+};
+var App = function App() {
+  return /*#__PURE__*/_jsx(McSelect, {
+    multiple: true,
+    maxTagCount: undefined,
+    tagRender: tagRender,
+    defaultValue: ['gold', 'cyan'],
+    style: {
+      width: '100%'
+    },
+    options: options
+  });
+};
+export default App;

package/dist/McSelect/demo/multiple.d.ts

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

package/dist/McSelect/demo/multiple.js

@@ -0,0 +1,46 @@
+/**
+ * title: 多选
+ * description: 与antd的不同：属性不同McSelect多选使用multiple属性，且不再支持mode属性
+ */
+import { Space } from 'antd';
+import { McSelect } from "../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs(Space, {
+    wrap: true,
+    children: [/*#__PURE__*/_jsx(McSelect, {
+      defaultValue: "lucy",
+      style: {
+        width: 120
+      },
+      maxCount: 2,
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'Yiminghe',
+        label: 'yiminghe'
+      }, {
+        value: 'disabled',
+        label: 'Disabled',
+        disabled: true
+      }],
+      multiple: true
+    }), /*#__PURE__*/_jsx(McSelect, {
+      defaultValue: "lucy",
+      style: {
+        width: 120
+      },
+      loading: true,
+      options: [{
+        value: 'lucy',
+        label: 'Lucy'
+      }],
+      multiple: true
+    })]
+  });
+});

package/dist/McSelect/demo/optionRender.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/dist/McSelect/demo/optionRender.js

@@ -0,0 +1,51 @@
+/**
+ * title: 自定义下拉选项
+ * description: 使用 `optionRender` 自定义渲染下拉选项。
+ */
+import { Space } from 'antd';
+import { McSelect } from "../..";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var options = [{
+  label: 'China',
+  value: 'china',
+  emoji: '🇨🇳',
+  desc: 'China (中国)'
+}, {
+  label: 'USA',
+  value: 'usa',
+  emoji: '🇺🇸',
+  desc: 'USA (美国)'
+}, {
+  label: 'Japan',
+  value: 'japan',
+  emoji: '🇯🇵',
+  desc: 'Japan (日本)'
+}, {
+  label: 'Korea',
+  value: 'korea',
+  emoji: '🇰🇷',
+  desc: 'Korea (韩国)'
+}];
+var App = function App() {
+  return /*#__PURE__*/_jsx(McSelect, {
+    multiple: true,
+    style: {
+      width: '100%'
+    },
+    placeholder: "select one country",
+    defaultValue: ['china'],
+    options: options,
+    optionRender: function optionRender(option) {
+      return /*#__PURE__*/_jsxs(Space, {
+        children: [/*#__PURE__*/_jsx("span", {
+          role: "img",
+          "aria-label": option.data.label,
+          children: option.data.emoji
+        }), option.data.desc]
+      });
+    }
+  });
+};
+export default App;

package/dist/McSelect/demo/tagRender.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/dist/McSelect/demo/tagRender.js

@@ -0,0 +1,51 @@
+/**
+ * title: 自定义选择标签
+ * description: 允许自定义选择标签的样式。
+ */
+
+import { Tag } from 'antd';
+import { McSelect } from "../..";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var options = [{
+  value: 'gold'
+}, {
+  value: 'lime'
+}, {
+  value: 'green'
+}, {
+  value: 'cyan'
+}];
+var tagRender = function tagRender(props) {
+  var label = props.label,
+    value = props.value,
+    closable = props.closable,
+    onClose = props.onClose;
+  var onPreventMouseDown = function onPreventMouseDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return /*#__PURE__*/_jsx(Tag, {
+    color: value,
+    onMouseDown: onPreventMouseDown,
+    closable: closable,
+    onClose: onClose,
+    style: {
+      marginInlineEnd: 4
+    },
+    children: label
+  });
+};
+var App = function App() {
+  return /*#__PURE__*/_jsx(McSelect, {
+    multiple: true,
+    maxTagCount: undefined,
+    tagRender: tagRender,
+    defaultValue: ['gold', 'cyan'],
+    style: {
+      width: '100%'
+    },
+    options: options
+  });
+};
+export default App;

package/dist/McSelect/index.css

@@ -0,0 +1,60 @@
+.mc-select__label {
+  color: #262626;
+  font-size: 14px;
+  position: absolute;
+  top: 0;
+  left: 11px;
+  z-index: 2;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.mc-select__label::after {
+  content: '：';
+  margin-left: 2px;
+}
+.mc-select__label.mc-select--disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: no-drop;
+}
+.mc-select__content {
+  width: 100%;
+  height: 100%;
+}
+.mc-select__content.ant-select .ant-select-selector {
+  padding-left: var(--selector-pl);
+}
+.mc-select__content.ant-select .ant-select-selector .ant-select-selection-overflow-item-rest .ant-select-selection-item {
+  color: #fff;
+  background: #325cf7;
+  padding-left: 4px;
+}
+.mc-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-select__content.ant-select .ant-select-selector .ant-select-selection-item[title*='「'][title$='」'] {
+  color: var(--inexistent-color);
+}
+.mc-select__content.ant-select.ant-select-single .ant-select-selector .ant-select-selection-search {
+  left: var(--selector-pl);
+}
+.mc-select__content.ant-select.ant-select-multiple .ant-select-selector .ant-select-selection-placeholder {
+  left: var(--selector-pl);
+}
+.mc-select__content.ant-select.ant-select-multiple .ant-select-selector .ant-select-selection-search {
+  margin-left: 0;
+}
+.mc-select.mc-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;
+}

package/dist/McSelect/index.d.ts

@@ -0,0 +1,40 @@
+import { SelectProps } from 'antd';
+import { CSSProperties, FC, ReactNode } from 'react';
+import './index.less';
+interface Option {
+    value: string | number;
+    label?: React.ReactNode;
+    title?: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+type Inexistent = {
+    inexistentText?: string;
+    inexistentColor?: string;
+    reserveOriginalValue?: boolean;
+};
+export type FetchOptions = (params: {
+    current: number;
+    pageSize: number;
+    keyword?: string;
+    extra?: any;
+}) => Promise<{
+    data: Option[];
+    total: number;
+}>;
+export type McSelectProps = Omit<SelectProps, 'mode' | 'fieldNames'> & {
+    style?: CSSProperties;
+    className?: string;
+    name?: string;
+    label?: ReactNode;
+    multiple?: boolean;
+    changeOnHidden?: boolean;
+    inexistent?: boolean | Inexistent;
+    fetchOptions?: FetchOptions;
+    pageSize?: number;
+    extra?: any;
+    options?: Option[];
+    [key: string]: any;
+};
+declare const McSelect: FC<McSelectProps>;
+export default McSelect;