@arim-aisdc/public-components 0.0.73 → 0.0.75

package/dist/components/BaseInfo/BaseInfo.d.ts

@@ -17,7 +17,7 @@ export declare const foramtBaseInfoField: (data: any, dataField: BaseInfoFieldTy
     value: any;
     field: string;
     label?: string;
-    text: string | Element | JSX.Element;
+    text: string | JSX.Element | Element;
     units?: string;
     width?: string;
     labelWidth?: string;

package/dist/components/ColorSelector/ColorSelector.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './ColorSelector.less';
+export interface ColorSelectorProps {
+    /**
+     * 默认颜色值
+     */
+    defaultValue?: string;
+    /**
+     * 颜色值
+     */
+    value?: string;
+    /**
+     * 修改时的回调函数
+     * @param color 修改后的颜色
+     * @returns
+     */
+    onChange?: (color: string) => void;
+}
+declare const ColorSelector: React.FC<ColorSelectorProps>;
+export default ColorSelector;

package/dist/components/ColorSelector/ColorSelector.js

@@ -0,0 +1,54 @@
+import "antd/es/popover/style";
+import _Popover from "antd/es/popover";
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useCallback, useEffect, useState } from 'react';
+import { SketchPicker } from 'react-color';
+import "./ColorSelector.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ColorSelector = function ColorSelector(props) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    onChange = props.onChange;
+  var _useState = useState(value || defaultValue || '#ffffff'),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
+  useEffect(function () {
+    if (value && color !== value) {
+      setColor(value);
+    }
+  }, [value]);
+  var handleChange = useCallback(function (color) {
+    // console.log('color :>> ', color);
+    var hex = color.hex || '';
+    var hexUpperCase = hex.toLocaleUpperCase();
+    setColor(hexUpperCase);
+    onChange === null || onChange === void 0 || onChange(hexUpperCase);
+  }, []);
+  return /*#__PURE__*/_jsx(_Popover, {
+    content: /*#__PURE__*/_jsx(SketchPicker, {
+      color: color,
+      disableAlpha: true,
+      onChangeComplete: handleChange,
+      width: 220,
+      presetColors: []
+    }),
+    title: null,
+    overlayClassName: "colorSelectorPopover",
+    children: /*#__PURE__*/_jsx("div", {
+      className: 'colorSelectorContent',
+      children: /*#__PURE__*/_jsx("div", {
+        className: 'colorBox',
+        style: {
+          backgroundColor: color
+        }
+      })
+    })
+  });
+};
+export default ColorSelector;

package/dist/components/ColorSelector/ColorSelector.less

@@ -0,0 +1,33 @@
+.colorSelectorContent {
+  width: 100%;
+  height: 32px;
+  padding: 4px;
+  background: @global-curd-input-background-color;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  .colorBox {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.colorSelectorPopover {
+  .sketch-picker {
+    background: transparent !important;
+
+    input {
+      background-color: @global-curd-input-background-color;
+      border: 1px solid @tableColor2 !important;
+      box-shadow: none;
+      border-radius: 2px;
+      color: @tableColor1 !important;
+    }
+
+    label {
+      color: @tableColor1 !important;
+    }
+  }
+}

package/dist/components/ColorSelector/index.d.ts

@@ -0,0 +1,3 @@
+import ColorSelector from './ColorSelector';
+export type { ColorSelectorProps } from './ColorSelector';
+export default ColorSelector;

package/dist/components/ColorSelector/index.js

@@ -0,0 +1,2 @@
+import ColorSelector from "./ColorSelector";
+export default ColorSelector;

package/dist/components/CustomForm/CustomForm.js

@@ -45,6 +45,7 @@ import TextArea from 'antd/lib/input/TextArea';
 import { debounce } from 'lodash';
 import moment from 'moment';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import ColorSelector from "../ColorSelector";
 import "./index.less";
 import { CustomFormItemType } from "./type";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -122,7 +123,10 @@ var CustomForm = function CustomForm(_ref) {
     _ref$submitLoading = _ref.submitLoading,
     submitLoading = _ref$submitLoading === void 0 ? false : _ref$submitLoading,
     _ref$buttonRender = _ref.buttonRender,
-    buttonRender = _ref$buttonRender === void 0 ? null : _ref$buttonRender;
+    buttonRender = _ref$buttonRender === void 0 ? null : _ref$buttonRender,
+    _ref$labelAlign = _ref.labelAlign,
+    labelAlign = _ref$labelAlign === void 0 ? 'left' : _ref$labelAlign,
+    btnSpan = _ref.btnSpan;
   var _Form$useForm = _Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
@@ -599,6 +603,8 @@ var CustomForm = function CustomForm(_ref) {
           defaultValue: item.defaultValue
         });
         break;
+      case CustomFormItemType.Color:
+        element = /*#__PURE__*/_jsx(ColorSelector, {});
     }
     return element;
   };
@@ -613,7 +619,7 @@ var CustomForm = function CustomForm(_ref) {
         span: labelCol
       },
       initialValues: initialValues,
-      labelAlign: "left",
+      labelAlign: labelAlign,
       autoComplete: "off",
       onFinish: onFinish,
       children: /*#__PURE__*/_jsxs(_Row, {
@@ -626,6 +632,7 @@ var CustomForm = function CustomForm(_ref) {
         // justify="space-between"
         ,
         children: [data.map(function (item, index) {
+          var _item$required;
           var _elementData = getElement(item);
           return /*#__PURE__*/_jsx(_Col, {
             span: (item === null || item === void 0 ? void 0 : item.span) || spanSize.span,
@@ -635,20 +642,17 @@ var CustomForm = function CustomForm(_ref) {
               colon: false,
               initialValue: item.defaultValue,
               rules: [{
-                required: item.is_null === 1 ? true : false,
-                message: "".concat(item.inputTips)
+                required: ((_item$required = item.required) !== null && _item$required !== void 0 ? _item$required : item.is_null === 1) ? true : false,
+                message: "".concat(item.inputTips || '此项不可为空')
               }],
               labelCol: {
                 span: (item === null || item === void 0 ? void 0 : item.labelCol) || labelCol
-              }
-              // required={item.is_null == 1}
-              // labelCol={{ span: "auto" }}
-              ,
+              },
               children: _elementData
             }, "".concat(index, "Row"))
           }, "".concat(index, "-Col"));
         }), /*#__PURE__*/_jsx(_Col, {
-          span: spanSize.span,
+          span: btnSpan !== null && btnSpan !== void 0 ? btnSpan : spanSize.span,
           offset: offset,
           children: /*#__PURE__*/_jsx(_Form.Item, {
             children: showButton ? /*#__PURE__*/_jsxs("div", {

package/dist/components/CustomForm/type.d.ts

@@ -1,4 +1,5 @@
 import { FormProps } from 'antd';
+import { FormLabelAlign } from 'antd/es/form/interface';
 import { MouseEventHandler, ReactNode } from 'react';
 export interface fieldType {
     field: string;
@@ -34,7 +35,8 @@ export declare enum CustomFormItemType {
     StartEnd = "start-end",
     AutoComplete = "autoComplete",
     MinMax = "min-max",
-    CheckBox = "checkbox"
+    CheckBox = "checkbox",
+    Color = "color"
 }
 export type SpanConfig = number | {
     xs: number;
@@ -83,6 +85,7 @@ export type CustomSearchFieldType = {
     maxTagCount?: number | 'responsive';
     span?: number;
     is_null?: number;
+    required?: boolean;
     labelCol?: number;
 };
 export interface CustomFormProps {
@@ -115,4 +118,9 @@ export interface CustomFormProps {
     usage?: string;
     submitLoading?: boolean;
     buttonRender?: any;
+    /** label位置
+     * @default 'left'
+     */
+    labelAlign?: FormLabelAlign;
+    btnSpan?: number;
 }

package/dist/components/CustomForm/type.js

@@ -13,6 +13,7 @@ export var CustomFormItemType = /*#__PURE__*/function (CustomFormItemType) {
   CustomFormItemType["AutoComplete"] = "autoComplete";
   CustomFormItemType["MinMax"] = "min-max";
   CustomFormItemType["CheckBox"] = "checkbox";
+  CustomFormItemType["Color"] = "color";
   return CustomFormItemType;
 }({});
 export var PickerType = /*#__PURE__*/function (PickerType) {

package/dist/components/GlobalTip/ModalTip/type.d.ts

@@ -12,7 +12,7 @@ export interface ModalTipTypes extends ModalTipType {
 }
 export type ModalDeleteType = {
     handlerConfirm: () => void;
-    handlerCancel: () => void;
+    handlerCancel?: () => void;
     title?: string;
     icon?: string;
     content?: string;

package/dist/components/TableMax/TableMax.js

@@ -172,7 +172,9 @@ var TableMax = function TableMax(_ref) {
     getRowHoverTipConfig = _ref.getRowHoverTipConfig,
     defaultHighLightRowId = _ref.defaultHighLightRowId,
     _ref$tooltip = _ref.tooltip,
-    tableTooltip = _ref$tooltip === void 0 ? true : _ref$tooltip;
+    tableTooltip = _ref$tooltip === void 0 ? true : _ref$tooltip,
+    _ref$showLessItems = _ref.showLessItems,
+    showLessItems = _ref$showLessItems === void 0 ? false : _ref$showLessItems;
   var columns = useMemo(function () {
     // 给columns配置默认的过滤函数、排序函数
     return operationColumnNoTooltips(setDefaultSortFn(setDefaultFilterFn(cloneDeep(originColumns))));
@@ -209,6 +211,9 @@ var TableMax = function TableMax(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     tableColumns = _useState4[0],
     setTableColumns = _useState4[1];
+  // useEffect(() => {
+  //   console.log('tableColumns :>> ', tableColumns);
+  // }, [tableColumns]);
   // const [initTableSizeColumns, setInitTableSizeColumns] = useState([...columns]);
   /**列显隐 */
   var _useState5 = useState(),
@@ -299,6 +304,7 @@ var TableMax = function TableMax(_ref) {
   var _Form$useForm = _Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
+
   /**正在编辑的行id*/
   var _useState33 = useState(''),
     _useState34 = _slicedToArray(_useState33, 2),
@@ -326,6 +332,7 @@ var TableMax = function TableMax(_ref) {
     columns: tableColumns,
     // 自定义的过滤函数
     filterFns: customFilterFns,
+    // 自定义的排序函数
     sortingFns: customSortFns,
     // 自定义Row.id
     getRowId: function getRowId(originalRow, index) {
@@ -408,7 +415,7 @@ var TableMax = function TableMax(_ref) {
     table.toggleAllRowsExpanded(false);
   }, [datas]);
 
-  // 单选多选-控制选中行
+  // 设置默认选中行
   useEffect(function () {
     if (canSelection) {
       setRowSelection(defaultSelectedRowIds.reduce(function (accumulator, currentValue) {
@@ -601,7 +608,7 @@ var TableMax = function TableMax(_ref) {
     setColumnSizing(columnsWidthMap);
   }, [columnSizeInfo]);
 
-  // // 添加空白列
+  // 添加 or 删除 空白列
   useEffect(function () {
     if ((tableColumns === null || tableColumns === void 0 ? void 0 : tableColumns.length) <= 0 || !tableContainerWidth) return;
     var placeholderColumn = table.getAllColumns().some(function (item) {
@@ -1155,7 +1162,7 @@ var TableMax = function TableMax(_ref) {
           children: tableMaxNewPagination ? /*#__PURE__*/_jsx(PaginationV2, {
             total: totalCount,
             pageSize: pageSize,
-            defaultPageSize: pageSize,
+            showLessItems: showLessItems,
             showSizeChanger: showSizeChanger,
             curPageDataNum: tableDatas.length,
             current: (skipCount || skipCount === 0) && pageSize ? skipCount / pageSize + 1 : 0,

package/dist/components/TableMax/components/ColumnSetting/index.less

@@ -9,7 +9,7 @@
   border-radius: 4px;
   width: 240px;
   box-shadow: 0 4px 10px 0 rgba(1, 3, 5, 9%);
-  background: @globalColor7;
+  background: @tableSettingModalBgc;
 
   .column-filtering {
     display: flex;

package/dist/components/TableMax/components/ColumnSort/customSortFns.d.ts

@@ -1,13 +1,13 @@
 import { TableMaxColumnType } from "../../type";
-export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
-export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
-export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
-export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
+export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
+export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
+export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
+export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
 declare const customSortFns: {
-    numberSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
-    stringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
-    timeSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
-    numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
+    numberSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
+    stringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
+    timeSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
+    numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 1 | 0 | -1;
 };
 export default customSortFns;
 export type SortFnType = keyof typeof customSortFns | undefined;

package/dist/components/TableMax/components/PaginationV2/index.js

@@ -1,8 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import "antd/es/pagination/style";
 import _Pagination from "antd/es/pagination";
-import "antd/es/button/style";
-import _Button from "antd/es/button";
 import "antd/es/select/style";
 import _Select from "antd/es/select";
 var _excluded = ["showSizeChanger", "curPageDataNum"];
@@ -35,11 +33,11 @@ var PaginationV2 = function PaginationV2(props) {
     className: "table-max-pagination-wrapper",
     children: [/*#__PURE__*/_jsx("div", {
       className: "total-info",
-      children: "\u5F53\u524D\u663E\u793A".concat(curPageDataNum, "\u6761/\u5171").concat(rest.total, "\u6761")
+      children: "".concat(curPageDataNum, "\u6761/\u5171").concat(rest.total, "\u6761")
     }), showSizeChanger && /*#__PURE__*/_jsxs("div", {
       className: "size-changer-wrapper",
       children: [/*#__PURE__*/_jsx("span", {
-        children: "\u6BCF\u9875\u663E\u793A"
+        children: "\u6BCF\u9875"
       }), /*#__PURE__*/_jsx(_Select, {
         className: "size-changer",
         options: pageSizeOptions,
@@ -47,41 +45,12 @@ var PaginationV2 = function PaginationV2(props) {
         onChange: handleChangePageSize,
         value: rest.pageSize
       }), /*#__PURE__*/_jsx("span", {
-        children: "\u884C"
+        children: "\u6761"
       })]
     }), /*#__PURE__*/_jsx(_Pagination, _objectSpread(_objectSpread({
       className: "table-max-pagination"
     }, rest), {}, {
-      showSizeChanger: false,
-      itemRender: function itemRender(page, type, originalElement) {
-        if (type === 'prev') {
-          return /*#__PURE__*/_jsxs(_Button, {
-            style: {
-              display: 'flex',
-              alignItems: 'center'
-            },
-            children: [/*#__PURE__*/_jsx("span", {
-              className: "iconfont-other icon-other-back prev-btn-icon"
-            }), /*#__PURE__*/_jsx("span", {
-              children: "\u4E0A\u4E00\u9875"
-            })]
-          });
-        }
-        if (type === 'next') {
-          return /*#__PURE__*/_jsxs(_Button, {
-            style: {
-              display: 'flex',
-              alignItems: 'center'
-            },
-            children: [/*#__PURE__*/_jsx("span", {
-              children: "\u4E0B\u4E00\u9875"
-            }), /*#__PURE__*/_jsx("span", {
-              className: "iconfont-other icon-other-back next-btn-icon"
-            })]
-          });
-        }
-        return originalElement;
-      }
+      showSizeChanger: false
     }))]
   });
 };

package/dist/components/TableMax/components/PaginationV2/index.less

@@ -5,10 +5,13 @@
 
   .total-info {
     flex: 1;
+    white-space: nowrap;
+    margin-right: 12px;
   }
 
   .size-changer-wrapper {
     margin-right: 16px;
+    white-space: nowrap;
 
     .size-changer {
       display: inline-block;
@@ -23,14 +26,14 @@
     align-items: center;
 
     .prev-btn-icon {
-      margin-right: 4px;
       transform: rotate(180deg);
       font-size: 12px;
+      margin-right: 4px;
     }
 
     .next-btn-icon {
-      margin-left: 4px;
       font-size: 12px;
+      margin-left: 4px;
     }
 
     .custom-dark-pagination-item,
@@ -49,6 +52,10 @@
       }
     }
 
+    li:not(:last-child) {
+      margin-right: 4px;
+    }
+
     .custom-dark-pagination-prev,
     .custom-dark-pagination-next,
     .custom-light-pagination-prev,
@@ -57,6 +64,7 @@
     .ant-pagination-next {
       button {
         border-color: @global-desc-text-disabled-color;
+        background-color: transparent;
       }
 
       button[disabled],
@@ -72,6 +80,7 @@
         button:not([disabled]) {
           border-color: @tableColor8;
           background-color: @tableColor8;
+          color: @globalColor1;
         }
       }
     }

package/dist/components/TableMax/tableMax.less

@@ -15,7 +15,6 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
-    // background: @globalColor7;
 
     .tableTitle {
       font-size: 16px;

package/dist/components/TableMax/type.d.ts

@@ -221,6 +221,8 @@ export type TableMaxProps = {
     };
     /**所有的单元格是否展示tooltip,优先级小于列配置中的tooltip.默认值：true */
     tooltip?: boolean;
+    /** 翻页组件配置:是否显示更少的页码，table宽度较小翻页组件显示不下时可配置 */
+    showLessItems?: boolean;
 };
 export type TableContextType = {
     table: any;

package/dist/index.d.ts

@@ -27,6 +27,8 @@ export { default as TableMax } from './components/TableMax';
 export * from './components/ConfigProvider';
 export * from './components/Filter';
 export { default as SchemaForm } from './components/SchemaForm';
+export * from './components/ColorSelector';
+export { default as ColorSelector } from './components/ColorSelector';
 export * from './hooks/useEventBus';
 export { default as useEventBus } from './hooks/useEventBus';
 export { default as usePageCacheState } from './hooks/usePageCacheState';

package/dist/index.js

@@ -28,6 +28,8 @@ export { default as TableMax } from "./components/TableMax";
 export * from "./components/ConfigProvider";
 export * from "./components/Filter";
 export { default as SchemaForm } from "./components/SchemaForm";
+export * from "./components/ColorSelector";
+export { default as ColorSelector } from "./components/ColorSelector";
 
 // hooks
 export * from "./hooks/useEventBus";

package/dist/themes/variables.less

@@ -43,3 +43,4 @@
 @tableColor7: var(--tableColor7, #1a1d2eff); // 表格列设置区-【显示筛选】下边框颜色
 @tableColor8: var(--tableColor8, #f5f6f7); // 表格列设置区-列表元素hover背景色
 @tableTooltipBgc: var(--tableTooltipBgc, #f5f6f7); // 表格tooltip背景色
+@tableSettingModalBgc: var(--tableSettingModalBgc, #ffffff); // 表格的body的背景底色

package/dist/themes/variablesConfig.js

@@ -59,7 +59,9 @@ export var PublicThemeVariablesConfig = {
     // 表格列设置区列表元素-hover背景色
     '--tableTooltipBgc': '#000000bf',
     // 表格tooltip背景色
-    '--global-desc-text-disabled-color': '#d3e7fa3f' // 全局默认 禁用/选中 字体颜色
+    '--global-desc-text-disabled-color': '#d3e7fa3f',
+    // 全局默认 禁用/选中 字体颜色
+    '--tableSettingModalBgc': '#FFFFFF' // 表格的body的背景底色
   },
   dark: {
     '--global-curd-input-background-color': '#494c5dff',
@@ -122,6 +124,8 @@ export var PublicThemeVariablesConfig = {
     // 表格列设置区列表元素-hover背景色
     '--tableTooltipBgc': '#5e6175',
     // 表格tooltip背景色
-    '--global-desc-text-disabled-color': '#d3e7fa3f' // 全局默认 禁用/选中 字体颜色
+    '--global-desc-text-disabled-color': '#d3e7fa3f',
+    // 全局默认 禁用/选中 字体颜色
+    '--tableSettingModalBgc': '#05081A' // 表格的body的背景底色
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arim-aisdc/public-components",
-  "version": "0.0.73",
+  "version": "0.0.75",
   "description": "前端组件库",
   "license": "MIT",
   "main": "dist/index.js",