@pisell/materials 1.0.48 → 1.0.49

package/es/components/page/index.js

@@ -0,0 +1,172 @@
+var _excluded = ["children", "style"];
+var _theme$token;
+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 ConfigProvider from "../config-provider";
+import { AdapterDayjs } from '@pisell/date-picker/es/AdapterDayjs';
+import { LocalizationProvider, createTheme, ThemeProvider } from '@pisell/date-picker';
+var theme = {
+  "components": {
+    "Table": {
+      "colorFillContent": "#EAECF0",
+      "colorFillSecondary": "#F2F4F7",
+      "colorBorderSecondary": "#EAECF0",
+      "colorFillAlter": "#F9FAFB",
+      "controlItemBgHover": "#F9FAFB",
+      "colorTextHeading": "#475467",
+      "colorTextDescription": "#667085",
+      "colorText": "#101828",
+      "controlHeight": 32,
+      "padding": 24,
+      "margin": 16
+    },
+    "Button": {
+      "borderRadiusSM": 6,
+      "borderRadiusLG": 9,
+      "borderRadius": 8,
+      "controlHeight": 36,
+      "colorBgContainerDisabled": "#F2F4F7",
+      "colorBgTextHover": "#F9FAFB",
+      "colorBorder": "#D0D5DD",
+      "colorError": "#D92D20",
+      "colorErrorActive": "#D92D20",
+      "colorErrorHover": "#B42318",
+      "colorErrorBg": "#FEF3F2",
+      "colorErrorBorderHover": "#FDA29B",
+      "colorErrorOutline": "rgba(217, 45, 32, 0.06)",
+      "colorLink": "#175CD3",
+      "colorLinkActive": "#194185",
+      "colorLinkHover": "#1849A9",
+      "colorPrimaryActive": "#7f56d9",
+      "colorPrimaryBorder": "#E9D7FE",
+      "colorText": "#344054",
+      "colorTextDisabled": "#D0D5DD",
+      "colorTextLightSolid": "#fff",
+      "colorBgTextActive": "#D0D5DD",
+      "controlOutline": "rgba(127, 86, 217, 0.04)",
+      "controlTmpOutline": "#F9FAFB",
+      "paddingContentHorizontal": 14,
+      "marginXS": 8
+    },
+    "Divider": {
+      "colorSplit": "#EAECF0"
+    },
+    "Breadcrumb": {
+      "itemColor": "#475467",
+      "colorTextDescription": "#475467",
+      "lastItemColor": "#6941C6",
+      "separatorMargin": 12,
+      "separatorColor": "#D0D5DD",
+      "linkHoverColor": "#1D2939",
+      "linkColor": "#475467",
+      "colorBgTextHover": "#F9FAFB",
+      "paddingXXS": 8
+    },
+    "Dropdown": {
+      "borderRadiusLG": 8,
+      // "boxShadowPopoverArrow": "2px 2px 5px rgba(0, 0, 0, 0.05)",
+      "controlHeight": 42,
+      "fontSize": 14
+    },
+    "DatePicker": {
+      "borderRadius": 8,
+      "colorTextPlaceholder": "#667085",
+      "colorIcon": "#667085",
+      "colorTextQuaternary": "#D0D5DD",
+      "colorBgContainerDisabled": "#F9FAFB",
+      "colorTextDisabled": "#98A2B3"
+    }
+  },
+  "token": {
+    "colorPrimary": "#7F56D9",
+    "colorPrimaryBg": "#F9F5FF",
+    "colorPrimaryBgHover": "#F4EBFF",
+    "colorPrimaryBorder": "#E9D7FE",
+    "colorPrimaryBorderHover": "#D6BBFB",
+    "colorPrimaryHover": "#6941C6",
+    "colorPrimaryActive": "#53389E",
+    "colorPrimaryTextHover": "#53389E",
+    "colorPrimaryText": "#6941C6",
+    "colorPrimaryTextActive": "#42307D",
+    "colorSuccess": "#079455",
+    "colorSuccessBg": "#ECFDF3",
+    "colorSuccessBgHover": "#DCFAE6",
+    "colorSuccessBorder": "#ABEFC6",
+    "colorSuccessBorderHover": "#75E0A7",
+    "colorSuccessHover": "#067647",
+    "colorSuccessText": "#067647",
+    "colorSuccessActive": "#085D3A",
+    "colorSuccessTextHover": "#085D3A",
+    "colorSuccessTextActive": "#074D31",
+    "colorWarning": "#dc6803",
+    "colorWarningBg": "#FFFAEB",
+    "colorWarningBgHover": "#FEF0C7",
+    "colorWarningBorder": "#FEDF89",
+    "colorWarningBorderHover": "#FEC84B",
+    "colorWarningHover": "#B54708",
+    "colorWarningText": "#B54708",
+    "colorWarningActive": "#93370D",
+    "colorWarningTextHover": "#93370D",
+    "colorWarningTextActive": "#7A2E0E",
+    "colorError": "#d92d20",
+    "colorErrorBg": "#FEF3F2",
+    "colorErrorBgHover": "#FEE4E2",
+    "colorErrorBorder": "#FECDCA",
+    "colorErrorBorderHover": "#FDA29B",
+    "colorErrorHover": "#B42318",
+    "colorErrorText": "#B42318",
+    "colorErrorActive": "#912018",
+    "colorErrorTextHover": "#912018",
+    "colorErrorTextActive": "#7A271A",
+    "colorInfo": "#1570ef",
+    "colorInfoBg": "#EFF8FF",
+    "colorInfoBgHover": "#D1E9FF",
+    "colorInfoBorder": "#B2DDFF",
+    "colorInfoBorderHover": "#84CAFF",
+    "colorInfoHover": "#175CD3",
+    "colorInfoText": "#175CD3",
+    "colorInfoActive": "#1849A9",
+    "colorInfoTextHover": "#1849A9",
+    "colorInfoTextActive": "#194185",
+    "colorText": "#101828",
+    "colorTextSecondary": "#475467",
+    "colorTextTertiary": "#667085",
+    "colorTextQuaternary": "#D0D5DD",
+    "colorBorder": "#D0D5DD",
+    "colorBorderSecondary": "#EAECF0",
+    "colorFill": "#D0D5DD",
+    "colorFillSecondary": "#EAECF0",
+    "colorFillTertiary": "#F2F4F7",
+    "colorFillQuaternary": "#F9FAFB",
+    "colorBgLayout": "#F2F4F7",
+    "colorBgSpotlight": "#101828",
+    "colorBgMask": "rgba(0, 0, 0, 0.5)",
+    "wireframe": false,
+    "borderRadius": 8
+  }
+};
+var datePickerTheme = createTheme({
+  palette: {
+    primary: {
+      main: ((_theme$token = theme.token) === null || _theme$token === void 0 ? void 0 : _theme$token.colorPrimary) || "#7F56D9"
+    }
+  }
+});
+var Page = function Page(props) {
+  var children = props.children,
+    style = props.style,
+    others = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(ConfigProvider, _extends({}, others, {
+    prefixCls: props.prefixCls || "pisell-lowcode",
+    theme: props.theme || theme
+  }), /*#__PURE__*/React.createElement(LocalizationProvider, {
+    dateAdapter: AdapterDayjs
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: datePickerTheme
+  }, /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, children))));
+};
+export default Page;

package/es/components/radio/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Radio: import("react").ForwardRefExoticComponent<Omit<import("antd").RadioProps & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<any>>;
+export default Radio;

package/es/components/radio/index.js

@@ -0,0 +1,5 @@
+import { Radio as OriginalRadio } from 'antd';
+import { withWrap } from "../../utils/hoc";
+var Radio = withWrap(OriginalRadio);
+Radio.Group = OriginalRadio.Group;
+export default Radio;

package/es/components/select/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const Select: import("react").ForwardRefExoticComponent<Omit<import("antd").SelectProps<unknown, import("antd/es/select").DefaultOptionType | import("antd/es/select").BaseOptionType> & {
+    children?: import("react").ReactNode;
+} & {
+    ref?: import("react").Ref<import("antd").RefSelectProps> | undefined;
+}, "ref"> & import("react").RefAttributes<any>>;
+export default Select;

package/es/components/select/index.js

@@ -0,0 +1,4 @@
+import { Select as OriginalSelect } from 'antd';
+import { withWrap } from "../../utils/hoc";
+var Select = withWrap(OriginalSelect);
+export default Select;

package/es/components/skeleton/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Skeleton: (props: any) => JSX.Element;
+export default Skeleton;

package/es/components/skeleton/index.js

@@ -0,0 +1,4 @@
+import { Skeleton as OriginalSleleton } from 'antd';
+import { withSingleChild } from "../../utils/hoc";
+var Skeleton = withSingleChild(OriginalSleleton, ['children']);
+export default Skeleton;

package/es/components/slider/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SliderOuter: (props: any) => JSX.Element;
+export default SliderOuter;

package/es/components/slider/index.js

@@ -0,0 +1,16 @@
+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 { Slider } from 'antd';
+var SliderOuter = function SliderOuter(props) {
+  var range = props.range;
+  var defaultValue = props.defaultValue;
+  if (range) {
+    defaultValue = Array.isArray(defaultValue) ? defaultValue : [0, defaultValue];
+  } else {
+    defaultValue = Array.isArray(defaultValue) ? defaultValue[1] || defaultValue[0] : defaultValue;
+  }
+  return /*#__PURE__*/React.createElement(Slider, _extends({}, props, {
+    defaultValue: defaultValue
+  }));
+};
+export default SliderOuter;

package/es/components/table/Actions/Sort/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export declare type SortItemProps = {
+    type: "date" | "string" | "number";
+    label: string;
+    name: string;
+};
+declare type SortListProps = {
+    list: SortItemProps[];
+    onChange?: (val: string) => void;
+};
+declare const Sort: React.FC<SortListProps>;
+export default Sort;

package/es/components/table/Actions/Sort/index.js

@@ -0,0 +1,59 @@
+import React, { useMemo } from "react";
+import { Button, Dropdown } from "antd";
+import { SwitchVertical01 } from "@pisell/icon";
+var sortChildrenMap = {
+  date: function date(key) {
+    return [{
+      key: "".concat(key, ":desc"),
+      label: "Oldest to newest"
+    }, {
+      key: "".concat(key, ":asc"),
+      label: "Newest to oldest"
+    }];
+  },
+  string: function string(key) {
+    return [{
+      key: "".concat(key, ":asc"),
+      label: "A to Z"
+    }, {
+      key: "".concat(key, ":desc"),
+      label: "Z to A"
+    }];
+  },
+  number: function number(key) {
+    return [{
+      key: "".concat(key, ":asc"),
+      label: "Lowest to highest"
+    }, {
+      key: "".concat(key, ":desc"),
+      label: "Highest to lowest"
+    }];
+  }
+};
+var Sort = function Sort(_ref) {
+  var _ref$list = _ref.list,
+    list = _ref$list === void 0 ? [] : _ref$list,
+    onChange = _ref.onChange;
+  var sortItems = useMemo(function () {
+    return list.map(function (d) {
+      return {
+        key: d.name,
+        label: d.label,
+        children: sortChildrenMap[d.type](d.name)
+      };
+    });
+  }, [list]);
+  var onClick = function onClick(detail) {
+    var _detail$keyPath;
+    onChange === null || onChange === void 0 ? void 0 : onChange(detail === null || detail === void 0 ? void 0 : (_detail$keyPath = detail.keyPath) === null || _detail$keyPath === void 0 ? void 0 : _detail$keyPath[0]);
+  };
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    menu: {
+      items: sortItems,
+      onClick: onClick
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(SwitchVertical01, null)
+  }, "Sort"));
+};
+export default Sort;

package/es/components/table/Actions/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./index.less";
+declare const Actions: ({ filter, sort }: any) => JSX.Element | null;
+export default Actions;

package/es/components/table/Actions/index.js

@@ -0,0 +1,28 @@
+import React, { useMemo } from "react";
+import Filter from "../../filter";
+import { Form } from "antd";
+import Sort from "./Sort";
+import "./index.less";
+var Actions = function Actions(_ref) {
+  var filter = _ref.filter,
+    sort = _ref.sort;
+  var showActions = useMemo(function () {
+    return (filter === null || filter === void 0 ? void 0 : filter.show) || (sort === null || sort === void 0 ? void 0 : sort.show);
+  }, [filter === null || filter === void 0 ? void 0 : filter.show, sort === null || sort === void 0 ? void 0 : sort.show]);
+  return showActions ? /*#__PURE__*/React.createElement("div", {
+    className: "materials-grid-actions"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left-wrap"
+  }, /*#__PURE__*/React.createElement(Filter, {
+    filter: filter,
+    isRenderFormContent: false
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "right-wrap"
+  }, sort !== null && sort !== void 0 && sort.show ? /*#__PURE__*/React.createElement(Form.Item, {
+    name: "order_by",
+    noStyle: true
+  }, /*#__PURE__*/React.createElement(Sort, {
+    list: (sort === null || sort === void 0 ? void 0 : sort.list) || []
+  })) : null)) : null;
+};
+export default Actions;

package/es/components/table/Actions/index.less

@@ -0,0 +1,40 @@
+.materials-grid-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  gap: 16px;
+
+  .left-wrap {
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    .pisell-lowcode-form-item {
+      margin-bottom: 0;
+    }
+  }
+
+  .right-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .icon {
+      cursor: pointer;
+      transition: .2s;
+
+      &:hover {
+        color: var(--theme-color);
+      }
+    }
+
+    .button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      height: 28px;
+    }
+  }
+}

package/es/components/table/BasicTable/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TableProps } from "antd";
+declare const BasicTable: (props: TableProps<any>) => JSX.Element;
+export default BasicTable;

package/es/components/table/BasicTable/index.js

@@ -0,0 +1,58 @@
+var _excluded = ["dataSource", "pagination", "value"];
+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 { Table, Form } from "antd";
+import React, { useMemo, useCallback } from "react";
+import { FormPagination } from "../../Pagination";
+var BasicTable = function BasicTable(props) {
+  var _pagination$pageSizeO;
+  var dataSource = props.dataSource,
+    pagination = props.pagination,
+    value = props.value,
+    other = _objectWithoutProperties(props, _excluded);
+  var form = Form.useFormInstance();
+  var formPagination = Form.useWatch("pagination", form) || {
+    page: 1,
+    size: 10
+  };
+  var showTotal = pagination.showTotal;
+  var _showTotal = useCallback(function (total, range) {
+    var _size = formPagination.size;
+    return showTotal(total, range, _size);
+  }, [showTotal, formPagination === null || formPagination === void 0 ? void 0 : formPagination.page, formPagination === null || formPagination === void 0 ? void 0 : formPagination.size]);
+
+  // 分割数据源
+  var _dataSource = useMemo(function () {
+    var _page = formPagination.page;
+    var _size = formPagination.size;
+    var list = [];
+    var _total = total;
+    if (dataSource.length > _size) {
+      list = dataSource;
+      _total = list.length;
+      list = list.slice((_page - 1) * _size, _page * _size);
+    } else {
+      list = dataSource;
+    }
+    return {
+      list: list,
+      total: _total
+    };
+  }, [dataSource, formPagination === null || formPagination === void 0 ? void 0 : formPagination.page, formPagination === null || formPagination === void 0 ? void 0 : formPagination.size]);
+
+  // 总数
+  var total = useMemo(function () {
+    return (pagination === null || pagination === void 0 ? void 0 : pagination.total) || (_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.total) || 0;
+  }, [dataSource, pagination]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table, _extends({}, other, {
+    pagination: false,
+    dataSource: _dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.list
+  })), total > ((pagination === null || pagination === void 0 ? void 0 : (_pagination$pageSizeO = pagination.pageSizeOptions) === null || _pagination$pageSizeO === void 0 ? void 0 : _pagination$pageSizeO[0]) || 10) ? /*#__PURE__*/React.createElement(Form.Item, {
+    name: "pagination"
+  }, /*#__PURE__*/React.createElement(FormPagination, _extends({}, pagination, {
+    showTotal: _showTotal,
+    total: total
+  }))) : null);
+};
+export default BasicTable;

package/es/components/table/Header/Buttons/index.d.ts

@@ -0,0 +1,3 @@
+import "./index.less";
+declare const Buttons: ({ list }: any) => any;
+export default Buttons;

package/es/components/table/Header/Buttons/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { Button } from "antd";
+import "./index.less";
+var Buttons = function Buttons(_ref) {
+  var list = _ref.list;
+  return (list || []).map(function (d) {
+    return /*#__PURE__*/React.createElement(Button, d, d.title);
+  });
+};
+export default Buttons;

package/es/components/table/Header/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./index.less";
+declare const Header: ({ buttons, title }: any) => JSX.Element | null;
+export default Header;

package/es/components/table/Header/index.js

@@ -0,0 +1,20 @@
+import React, { useMemo } from "react";
+import Buttons from "./Buttons";
+import "./index.less";
+var Header = function Header(_ref) {
+  var buttons = _ref.buttons,
+    title = _ref.title;
+  var showHeader = useMemo(function () {
+    return title || (buttons === null || buttons === void 0 ? void 0 : buttons.length);
+  }, [buttons, title]);
+  return showHeader ? /*#__PURE__*/React.createElement("div", {
+    className: "materials-grid-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left-wrap"
+  }, title && title()), /*#__PURE__*/React.createElement("div", {
+    className: "right-wrap"
+  }, /*#__PURE__*/React.createElement(Buttons, {
+    list: buttons
+  }))) : null;
+};
+export default Header;

package/es/components/table/Header/index.less

@@ -0,0 +1,16 @@
+.materials-grid-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  .left-wrap {}
+
+  .right-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+
+  }
+}

package/es/components/table/Summary/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./index.less";
+declare const Summary: ({ summary }: any) => JSX.Element | null;
+export default Summary;

package/es/components/table/Summary/index.js

@@ -0,0 +1,12 @@
+import React, { useMemo } from "react";
+import "./index.less";
+var Summary = function Summary(_ref) {
+  var summary = _ref.summary;
+  var showSummary = useMemo(function () {
+    return !!summary;
+  }, [summary]);
+  return showSummary ? /*#__PURE__*/React.createElement("div", {
+    className: "materials-grid-summary"
+  }, summary()) : null;
+};
+export default Summary;

package/es/components/table/Summary/index.less

@@ -0,0 +1,5 @@
+.materials-grid-summary {
+
+  margin-bottom: 16px;
+
+}

package/es/components/table/Table/AddFieldModal/index.d.ts

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