@pisell/materials 3.0.62 → 6.0.1

package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableQuery.js

@@ -0,0 +1,80 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+var useTableQuery = function useTableQuery(props) {
+  var _tabs$items, _tabs$items$, _tabs$items2, _tabs$items2$;
+  var filterBy = props.filterBy,
+    sortBy = props.sortBy,
+    tabs = props.tabs;
+
+  // 分页配置
+  var _useState = useState({
+      page: 1,
+      pageSize: 10,
+      filter: (tabs === null || tabs === void 0 ? void 0 : (_tabs$items = tabs.items) === null || _tabs$items === void 0 ? void 0 : (_tabs$items$ = _tabs$items[0]) === null || _tabs$items$ === void 0 ? void 0 : _tabs$items$.filterBy) || filterBy || {},
+      sort: (tabs === null || tabs === void 0 ? void 0 : (_tabs$items2 = tabs.items) === null || _tabs$items2 === void 0 ? void 0 : (_tabs$items2$ = _tabs$items2[0]) === null || _tabs$items2$ === void 0 ? void 0 : _tabs$items2$.sortBy) || sortBy
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    queryPageConfig = _useState2[0],
+    setQueryPageConfig = _useState2[1];
+
+  // 分页变化
+  var handleValuesChange = useMemoizedFn(function (params, allParams) {
+    var _ref = params.pagination || {},
+      page = _ref.page,
+      size = _ref.size;
+    setQueryPageConfig(function (prev) {
+      var sort = prev.sort || sortBy;
+      var filter = prev.filter;
+      if ("tabs" in params) {
+        var _params$tabs, _params$tabs2;
+        sort = ((_params$tabs = params.tabs) === null || _params$tabs === void 0 ? void 0 : _params$tabs.sortBy) || sortBy || "";
+        filter = ((_params$tabs2 = params.tabs) === null || _params$tabs2 === void 0 ? void 0 : _params$tabs2.filterBy) || {};
+      }
+      if ("order_by" in params) {
+        var _allParams$tabs;
+        sort = params.order_by || ((_allParams$tabs = allParams.tabs) === null || _allParams$tabs === void 0 ? void 0 : _allParams$tabs.sortBy) || sortBy;
+      }
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        page: size !== prev.pageSize ? 1 : page !== null && page !== void 0 ? page : prev.page,
+        pageSize: size !== null && size !== void 0 ? size : prev.pageSize,
+        sort: sort,
+        filter: filter
+      });
+    });
+  });
+  var handleFilterChange = useMemoizedFn(function (changedFields, allFields) {
+    setQueryPageConfig(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        page: 1,
+        filter: _objectSpread(_objectSpread({}, allFields), filterBy || {})
+      });
+    });
+  });
+  var refreshData = useMemoizedFn(function () {
+    setQueryPageConfig(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        page: 1
+      });
+    });
+  });
+  return {
+    queryPageConfig: queryPageConfig,
+    setQueryPageConfig: setQueryPageConfig,
+    handleValuesChange: handleValuesChange,
+    refreshData: refreshData,
+    handleFilterChange: handleFilterChange
+  };
+};
+export default useTableQuery;

package/es/components/dataSourceComponents/dataSourceTable/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.less';
+import { DataSourceTableProps } from './type';
+declare const DataSourceTable: (props: DataSourceTableProps) => React.JSX.Element;
+export default DataSourceTable;

package/es/components/dataSourceComponents/dataSourceTable/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import BaseTable from "./BaseTable";
+import DataSourceProvider from "../provider/dataSource/DataSourceProvider";
+import "./index.less";
+var DataSourceTable = function DataSourceTable(props) {
+  var dataSource = props.dataSource,
+    __designMode = props.__designMode;
+  return /*#__PURE__*/React.createElement(DataSourceProvider, {
+    dataSource: dataSource,
+    __designMode: __designMode
+  }, /*#__PURE__*/React.createElement(BaseTable, props));
+};
+export default DataSourceTable;

package/es/components/dataSourceComponents/dataSourceTable/index.less

@@ -0,0 +1,5 @@
+.data-source-table-title {
+  color: #101828;
+  font-weight: 600;
+  font-size: 20px;
+}

package/es/components/dataSourceComponents/dataSourceTable/provider/tableSetting/TableSettingContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface TableSettingContextType {
+    dataSource?: string;
+    children?: React.ReactNode;
+}
+export declare const TableSettingContext: import("react").Context<TableSettingContextType>;
+export default TableSettingContext;

package/es/components/dataSourceComponents/dataSourceTable/provider/tableSetting/TableSettingContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+var initialContext = {};
+export var TableSettingContext = /*#__PURE__*/createContext(initialContext);
+export default TableSettingContext;

package/es/components/dataSourceComponents/dataSourceTable/provider/tableSetting/TableSettingProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TableSettingContextType } from './TableSettingContext';
+/**
+ * @title: 表单设置Provider
+ * @description: 提供表单设置信息
+ */
+declare const TableSettingProvider: React.FC<TableSettingContextType>;
+export default TableSettingProvider;

package/es/components/dataSourceComponents/dataSourceTable/provider/tableSetting/TableSettingProvider.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import TableSettingContext from "./TableSettingContext";
+
+/**
+ * @title: 表单设置Provider
+ * @description: 提供表单设置信息
+ */
+var TableSettingProvider = function TableSettingProvider(props) {
+  var children = props.children,
+    dataSource = props.dataSource;
+  var value = React.useMemo(function () {
+    return {
+      dataSource: dataSource
+    };
+  }, [dataSource]);
+  return /*#__PURE__*/React.createElement(TableSettingContext.Provider, {
+    value: value
+  }, children);
+};
+export default TableSettingProvider;

package/es/components/dataSourceComponents/dataSourceTable/type.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import { ColumnType } from 'antd/es/table';
+import { DataSourceType } from '../provider/dataSource/DataSourceContext';
+export declare type OperationItem = {
+    label?: string;
+    openMode: 'modal' | 'drawer';
+    openContentSize: 'small' | 'middle' | 'large';
+    openTitle: string;
+    actionType: 'detail' | 'edit' | 'delete' | 'custom';
+    key: string;
+    buttonProps?: any;
+};
+export interface DataSourceTableProps {
+    title?: string | React.ReactNode | (() => React.ReactNode);
+    subTitle?: string | React.ReactNode | (() => React.ReactNode);
+    titleButtons?: {
+        show: boolean;
+        maxCount: number;
+        items: OperationItem[];
+    };
+    buttons?: any[];
+    operation?: {
+        show: boolean;
+        title: string;
+        width: number;
+        align: 'left' | 'center' | 'right';
+        fixed: 'left' | 'right' | false;
+        type: 'link' | 'button';
+        items: OperationItem[];
+    };
+    operationContent?: {
+        [key: string]: React.ReactNode;
+    };
+    dataSource: DataSourceType;
+    columns: ColumnType<any>[];
+    filter: any;
+    search?: {
+        show: boolean;
+        placeholder: string;
+    };
+    __designMode: string;
+    componentId: string;
+    clickToDetail?: {
+        show: boolean;
+        useCustomAction: boolean;
+        actionType: string;
+        openMode: 'modal' | 'drawer';
+        openContentSize: 'small' | 'middle' | 'large';
+        openTitle: string;
+        key: string;
+    };
+    onRow?: any;
+    filterBy?: Record<string, any>;
+    sortBy: string;
+    tabs?: {
+        show: boolean;
+        type: string;
+        items: {
+            name: string;
+            filterBy: Record<string, any>;
+            sortBy: string;
+        }[];
+    };
+}

package/es/components/dataSourceComponents/dataSourceTable/type.js

@@ -0,0 +1 @@
+export {};

package/es/components/dataSourceComponents/dataSourceWrapper/BaseWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface BaseWrapperProps {
+    children: React.ReactNode;
+    [key: string]: any;
+}
+declare const BaseWrapper: (props: BaseWrapperProps) => React.JSX.Element;
+export default BaseWrapper;

package/es/components/dataSourceComponents/dataSourceWrapper/BaseWrapper.js

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import useDataSource from "../hooks/useDataSource";
+import useVariables from "../hooks/useVariables";
+import useComponentId from "../hooks/useComponentId";
+var BaseWrapper = function BaseWrapper(props) {
+  var children = props.children;
+  var componentId = useComponentId(props);
+  var _useDataSource = useDataSource(),
+    get = _useDataSource.get,
+    list = _useDataSource.list;
+  var _useVariables = useVariables(),
+    registerValueVariable = _useVariables.registerValueVariable;
+  useEffect(function () {
+    if (componentId) {
+      registerValueVariable === null || registerValueVariable === void 0 ? void 0 : registerValueVariable(componentId, {
+        get: get,
+        list: list
+      });
+    }
+  }, [get, list, componentId]);
+  return /*#__PURE__*/React.createElement("div", null, children);
+};
+export default BaseWrapper;

package/es/components/dataSourceComponents/dataSourceWrapper/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DataSourceContextProps } from '../provider/dataSource/DataSourceContext';
+declare const DataSourceWrapper: (props: DataSourceContextProps) => React.JSX.Element;
+export default DataSourceWrapper;

package/es/components/dataSourceComponents/dataSourceWrapper/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import DataSourceProvider from "../provider/dataSource/DataSourceProvider";
+import BaseWrapper from "./BaseWrapper";
+
+// 数据源包装器
+var DataSourceWrapper = function DataSourceWrapper(props) {
+  var children = props.children,
+    dataSource = props.dataSource,
+    overrideData = props.overrideData,
+    autoRun = props.autoRun,
+    actions = props.actions,
+    currentValue = props.currentValue,
+    __designMode = props.__designMode;
+  return /*#__PURE__*/React.createElement(DataSourceProvider, {
+    dataSource: dataSource,
+    overrideData: overrideData,
+    actions: actions,
+    autoRun: autoRun,
+    currentValue: currentValue,
+    __designMode: __designMode
+  }, /*#__PURE__*/React.createElement(BaseWrapper, props, children));
+};
+export default DataSourceWrapper;

package/es/components/dataSourceComponents/fields/Checkbox/ReadPretty.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CheckboxProps, CheckboxGroupProps } from './type';
+import './ReadPretty.less';
+declare type CheckboxReadPrettyType = React.FC<CheckboxProps> & {
+    Group: React.FC<CheckboxGroupProps>;
+};
+declare const CheckboxReadPretty: CheckboxReadPrettyType;
+export default CheckboxReadPretty;

package/es/components/dataSourceComponents/fields/Checkbox/ReadPretty.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import useValueMap from "../../hooks/useValueMap";
+import { renderValueWithMap } from "../../dataSourceForm/utils";
+import "./ReadPretty.less";
+import Iconfont from "../../../iconfont";
+var CheckboxReadPretty = function CheckboxReadPretty(props) {
+  var value = props.value;
+  return value ? /*#__PURE__*/React.createElement(Iconfont, {
+    type: "pisell2-check",
+    style: {
+      color: 'var(--theme-color)',
+      fontSize: 20
+    }
+  }) : null;
+};
+var CheckboxGroupReadPretty = function CheckboxGroupReadPretty(props) {
+  var value = props.value,
+    options = props.options,
+    renderMode = props.renderMode;
+  var valueMap = useValueMap(options || []);
+  return renderValueWithMap(value, valueMap, renderMode);
+};
+CheckboxReadPretty.Group = CheckboxGroupReadPretty;
+export default CheckboxReadPretty;

package/es/components/dataSourceComponents/fields/Checkbox/WithMode.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type CheckboxComponent = React.FC & {
+    Group: typeof CheckboxGroupWithMode;
+};
+declare const CheckboxWithMode: CheckboxComponent;
+declare const CheckboxGroupWithMode: import("react").FC<import("./type").CheckboxGroupProps & import("../../dataSourceForm/utils").WithModeProps>;
+export default CheckboxWithMode;

package/es/components/dataSourceComponents/fields/Checkbox/WithMode.js

@@ -0,0 +1,7 @@
+import { withMode } from "../../dataSourceForm/utils";
+import AntCheckbox from "../../../checkbox";
+import ReadPretty from "./ReadPretty";
+var CheckboxWithMode = withMode(AntCheckbox, ReadPretty);
+var CheckboxGroupWithMode = withMode(AntCheckbox.Group, ReadPretty.Group);
+CheckboxWithMode.Group = CheckboxGroupWithMode;
+export default CheckboxWithMode;

package/es/components/dataSourceComponents/fields/Checkbox/index.d.ts

@@ -0,0 +1,6 @@
+import CheckboxWithMode from './WithMode';
+declare type CheckboxComponent = typeof CheckboxWithMode & {
+    Group: typeof CheckboxWithMode.Group;
+};
+declare const Checkbox: CheckboxComponent;
+export default Checkbox;

package/es/components/dataSourceComponents/fields/Checkbox/index.js

@@ -0,0 +1,18 @@
+import CheckboxWithMode from "./WithMode";
+import { withFormItem, withDataSource, withOptions } from "../../dataSourceForm/utils";
+var Checkbox = withFormItem(CheckboxWithMode, {
+  otherFormItemProps: {
+    valuePropName: 'checked'
+  }
+});
+
+// 包装formItem层
+var CheckboxGroupWithFormItem = withFormItem(CheckboxWithMode.Group);
+
+// 包装Options层
+var CheckboxGroupWithOptions = withOptions(CheckboxGroupWithFormItem);
+
+// 包装dataSource层
+var CheckboxGroupWithDataSource = withDataSource(CheckboxGroupWithOptions);
+Checkbox.Group = CheckboxGroupWithDataSource;
+export default Checkbox;

package/es/components/dataSourceComponents/fields/Checkbox/type.d.ts

@@ -0,0 +1,9 @@
+import { CheckboxProps as AntCheckboxProps } from 'antd';
+import { CheckboxGroupProps as AntCheckboxGroupProps } from 'antd/es/checkbox';
+import { ModeType } from "../../dataSourceForm/type";
+export interface CheckboxProps extends AntCheckboxProps {
+    renderMode: ModeType;
+}
+export interface CheckboxGroupProps extends AntCheckboxGroupProps {
+    renderMode: ModeType;
+}

package/es/components/dataSourceComponents/fields/Checkbox/type.js

@@ -0,0 +1 @@
+export {};

package/es/components/dataSourceComponents/fields/ColorPicker/ReadPretty.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ColorPickerProps } from './type';
+import './ReadPretty.less';
+declare const ColorPickerReadPretty: (props: ColorPickerProps) => React.JSX.Element;
+export default ColorPickerReadPretty;

package/es/components/dataSourceComponents/fields/ColorPicker/ReadPretty.js

@@ -0,0 +1,11 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import { ColorPicker } from 'antd';
+import "./ReadPretty.less";
+var ColorPickerReadPretty = function ColorPickerReadPretty(props) {
+  return /*#__PURE__*/React.createElement(ColorPicker, _extends({}, props, {
+    open: false,
+    className: "pisell-color-picker-read-pretty"
+  }));
+};
+export default ColorPickerReadPretty;

package/es/components/dataSourceComponents/fields/ColorPicker/WithMode.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorPickerProps } from './type';
+declare const ColorPickerWithMode: React.FC<ColorPickerProps & import("../../dataSourceForm/utils").WithModeProps>;
+export default ColorPickerWithMode;

package/es/components/dataSourceComponents/fields/ColorPicker/WithMode.js

@@ -0,0 +1,23 @@
+var _excluded = ["renderMode"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import { ColorPicker as AntColorPicker } from 'antd';
+import { red, volcano, orange, gold, yellow, lime, green, cyan, blue, geekblue, purple, magenta } from '@ant-design/colors';
+import { getText } from "../../../../locales";
+import ReadPretty from "./ReadPretty";
+import { withMode } from "../../dataSourceForm/utils";
+var ColorPicker = function ColorPicker(props) {
+  var presets = [{
+    label: getText('pisell-color-picker-default'),
+    colors: [red.primary || red[5], volcano.primary || volcano[5], orange.primary || orange[5], gold.primary || gold[5], yellow.primary || yellow[5], lime.primary || lime[5], green.primary || green[5], cyan.primary || cyan[5], blue.primary || blue[5], geekblue.primary || geekblue[5], purple.primary || purple[5], magenta.primary || magenta[5]]
+  }];
+  var renderMode = props.renderMode,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(AntColorPicker, _extends({}, restProps, {
+    presets: presets
+  }));
+};
+var ColorPickerWithMode = withMode(ColorPicker, ReadPretty);
+export default ColorPickerWithMode;

package/es/components/dataSourceComponents/fields/ColorPicker/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ColorPicker: React.FC<import("./type").ColorPickerProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps>;
+export default ColorPicker;

package/es/components/dataSourceComponents/fields/ColorPicker/index.js

@@ -0,0 +1,4 @@
+import { withFormItem } from "../../dataSourceForm/utils";
+import ColorPickerWithMode from "./WithMode";
+var ColorPicker = withFormItem(ColorPickerWithMode);
+export default ColorPicker;

package/es/components/dataSourceComponents/fields/ColorPicker/type.d.ts

@@ -0,0 +1,5 @@
+import { ColorPickerProps as AntColorPickerProps } from 'antd';
+import { ModeType } from "../../dataSourceForm/type";
+export interface ColorPickerProps extends AntColorPickerProps {
+    renderMode: ModeType;
+}

package/es/components/dataSourceComponents/fields/ColorPicker/type.js

@@ -0,0 +1 @@
+export {};

package/es/components/dataSourceComponents/fields/DatePicker/ReadPretty.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DatePickerProps } from './type';
+import './ReadPretty.less';
+declare const DatePickerReadPretty: (props: DatePickerProps) => React.JSX.Element;
+export default DatePickerReadPretty;

package/es/components/dataSourceComponents/fields/DatePicker/ReadPretty.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import "./ReadPretty.less";
+var DatePickerReadPretty = function DatePickerReadPretty(props) {
+  var value = props.value,
+    renderMode = props.renderMode;
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames('pisell-date-picker-read-pretty', {
+      'pisell-date-picker-read-pretty-table-view': renderMode === 'tableView'
+    })
+  }, value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '');
+};
+export default DatePickerReadPretty;

package/es/components/dataSourceComponents/fields/DatePicker/ReadPretty.less

@@ -0,0 +1,11 @@
+.pisell-date-picker-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}
+
+.pisell-date-picker-read-pretty-table-view {
+  font-size: 14px;
+  font-weight: 400;
+}

package/es/components/dataSourceComponents/fields/DatePicker/WithMode.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DatePickerProps } from 'antd';
+declare const DatePickerWithMode: import("react").FC<DatePickerProps & import("../../dataSourceForm/utils").WithModeProps>;
+export default DatePickerWithMode;

package/es/components/{productCard/components/MultiDay/utils.js → dataSourceComponents/fields/DatePicker/WithMode.js}

@@ -5,50 +5,13 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import dayjs from 'dayjs';
-
-// 定义输入数据的接口
-
-export function formatDateRanges(list) {
-  var result = [];
-  var currentGroup = null;
-  list.forEach(function (item, index) {
-    // Convert string dates using dayjs
-    var currentStartDate = dayjs(item.start_date);
-    var currentEndDate = dayjs(item.end_date);
-    var currentTotal = item.total;
-    var currentNum = item.num;
-    if (!currentGroup) {
-      // Start a new group
-      currentGroup = _objectSpread(_objectSpread({}, item), {}, {
-        start_date: currentStartDate.format('YYYY-MM-DD'),
-        end_date: currentEndDate.format('YYYY-MM-DD'),
-        total: currentTotal,
-        num: currentNum
-      });
-    } else {
-      var prevEndDate = dayjs(currentGroup.end_date);
-
-      // Check if current item can be merged with current group
-      if (currentTotal === currentGroup.total && prevEndDate.isSame(currentStartDate, 'day')) {
-        // Update end date and add up num
-        currentGroup.end_date = currentEndDate.format('YYYY-MM-DD');
-        currentGroup.num += currentNum;
-      } else {
-        // Push current group and start a new one
-        result.push(currentGroup);
-        currentGroup = _objectSpread(_objectSpread({}, item), {}, {
-          start_date: currentStartDate.format('YYYY-MM-DD'),
-          end_date: currentEndDate.format('YYYY-MM-DD'),
-          total: currentTotal,
-          num: currentNum
-        });
-      }
-    }
-
-    // Push the last group
-    if (index === list.length - 1 && currentGroup) {
-      result.push(currentGroup);
-    }
+import { isString } from '@pisell/utils';
+import DatePickerCpt from "../../../date-picker/datePickerCpt";
+import ReadPretty from "./ReadPretty";
+import { withMode } from "../../dataSourceForm/utils";
+var DatePickerWithMode = withMode(DatePickerCpt, ReadPretty, function (props) {
+  return _objectSpread(_objectSpread({}, props), {}, {
+    value: isString(props.value) ? dayjs(props.value) : props.value
   });
-  return result;
-}
+});
+export default DatePickerWithMode;

package/es/components/dataSourceComponents/fields/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const DatePicker: React.FC<(import("antd").DatePickerProps & import("../../dataSourceForm/utils").WithModeProps) & import("../../dataSourceForm/utils").WithFormItemProps>;
+export default DatePicker;

package/es/components/dataSourceComponents/fields/DatePicker/index.js

@@ -0,0 +1,10 @@
+import { withFormItem } from "../../dataSourceForm/utils";
+import DatePickerWithMode from "./WithMode";
+var DatePicker = withFormItem(DatePickerWithMode, {
+  innerProps: {
+    style: {
+      width: '100%'
+    }
+  }
+});
+export default DatePicker;

package/es/components/dataSourceComponents/fields/DatePicker/type.d.ts

@@ -0,0 +1,5 @@
+import { DatePickerProps as AntDatePickerProps } from 'antd';
+import { ModeType } from '../../dataSourceForm/type';
+export interface DatePickerProps extends Omit<AntDatePickerProps, 'renderMode'> {
+    renderMode: ModeType;
+}

package/es/components/dataSourceComponents/fields/DatePicker/type.js

@@ -0,0 +1 @@
+export {};

package/es/components/dataSourceComponents/fields/DateRangePicker/ReadPretty.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DateRangePickerProps } from './type';
+import './ReadPretty.less';
+declare const DateRangePickerReadPretty: (props: DateRangePickerProps) => React.JSX.Element;
+export default DateRangePickerReadPretty;

package/es/components/dataSourceComponents/fields/DateRangePicker/ReadPretty.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import "./ReadPretty.less";
+var DateRangePickerReadPretty = function DateRangePickerReadPretty(props) {
+  var value = props.value,
+    renderMode = props.renderMode;
+  return /*#__PURE__*/React.createElement("span", {
+    className: classNames('pisell-date-range-picker-read-pretty', {
+      'pisell-date-range-picker-read-pretty-table-view': renderMode === 'tableView'
+    })
+  }, value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '');
+};
+export default DateRangePickerReadPretty;

package/es/components/dataSourceComponents/fields/DateRangePicker/ReadPretty.less

@@ -0,0 +1,11 @@
+.pisell-date-range-picker-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}
+
+.pisell-date-range-picker-read-pretty-table-view {
+  font-size: 14px;
+  font-weight: 400;
+}

package/es/components/dataSourceComponents/fields/DateRangePicker/WithMode.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DateRangePickerProps } from './type';
+declare const DateRangePickerWithMode: import("react").FC<DateRangePickerProps & import("../../dataSourceForm/utils").WithModeProps>;
+export default DateRangePickerWithMode;

package/es/components/dataSourceComponents/fields/DateRangePicker/WithMode.js

@@ -0,0 +1,5 @@
+import DatePicker from "../../../date-picker";
+import ReadPretty from "./ReadPretty";
+import { withMode } from "../../dataSourceForm/utils";
+var DateRangePickerWithMode = withMode(DatePicker.RangePicker, ReadPretty);
+export default DateRangePickerWithMode;