@pisell/materials 1.0.215 → 1.0.217

package/es/components/table/Gallery/components/VirtualGrid/useGapSize.d.ts

@@ -0,0 +1,5 @@
+declare const useGapSize: (gap: number | number[]) => {
+    horizontal: number;
+    vertical: number;
+};
+export default useGapSize;

package/es/components/table/Gallery/components/VirtualGrid/useGapSize.js

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import { isArr } from "@pisell/utils";
+var useGapSize = function useGapSize(gap) {
+  return useMemo(function () {
+    if (isArr(gap)) {
+      return {
+        horizontal: gap[0],
+        vertical: gap[1]
+      };
+    } else {
+      return {
+        horizontal: gap,
+        vertical: gap
+      };
+    }
+  }, [gap]);
+};
+export default useGapSize;

package/es/components/table/Gallery/components/VirtualGrid/useGenGridProps.d.ts

@@ -0,0 +1,14 @@
+declare type UseGenGridProps = {
+    itemMinWidth: number;
+    itemMaxWidth: number;
+    width: number;
+    dataSource: Record<string, any>[];
+    horizontal: number;
+    vertical: number;
+};
+declare const useGenGridProps: (params: UseGenGridProps) => {
+    columnCount: number;
+    columnWidth: number;
+    rowCount: number;
+};
+export default useGenGridProps;

package/es/components/table/Gallery/components/VirtualGrid/useGenGridProps.js

@@ -0,0 +1,26 @@
+import { useMemo } from "react";
+var useGenGridProps = function useGenGridProps(params) {
+  var itemMaxWidth = params.itemMaxWidth,
+    itemMinWidth = params.itemMinWidth,
+    width = params.width,
+    dataSource = params.dataSource,
+    horizontal = params.horizontal,
+    vertical = params.vertical;
+  var columnCount = useMemo(function () {
+    var minCount = Math.floor(width / itemMinWidth);
+    var maxCount = Math.floor(width / itemMaxWidth);
+    return Math.floor((minCount + maxCount) / 2);
+  }, [width, itemMinWidth, itemMaxWidth]);
+  var columnWidth = useMemo(function () {
+    return (width - horizontal * (columnCount - 1) - 17) / columnCount;
+  }, [width, horizontal, columnCount]);
+  var rowCount = useMemo(function () {
+    return Math.ceil(dataSource.length / columnCount);
+  }, [dataSource.length, columnCount]);
+  return {
+    columnCount: columnCount,
+    columnWidth: columnWidth,
+    rowCount: rowCount
+  };
+};
+export default useGenGridProps;

package/es/components/table/Gallery/constant.d.ts

@@ -0,0 +1,4 @@
+export declare const FIELD_VALUE_HEIGHT = 46;
+export declare const FIELD_LABEL_HEIGHT = 26;
+export declare const TITLE_LENE_HEIGHT = 32;
+export declare const TITLE_VERTICAL_SPACING = 18;

package/es/components/table/Gallery/constant.js

@@ -0,0 +1,4 @@
+export var FIELD_VALUE_HEIGHT = 46;
+export var FIELD_LABEL_HEIGHT = 26;
+export var TITLE_LENE_HEIGHT = 32;
+export var TITLE_VERTICAL_SPACING = 18;

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { GalleryProps } from "./types";
+import "./index.less";
+declare const _default: React.MemoExoticComponent<(props: GalleryProps) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,120 @@
+import React, { memo, useCallback, useMemo } from "react";
+import { Form, Spin } from "antd";
+import { isFunction } from "@pisell/utils";
+import useTransDataSource from "../hooks/useTransDataSource";
+import { useSharedState } from "../../../hooks";
+import { Context } from "../model";
+import VirtualGrid from "./components/VirtualGrid";
+import GalleryItem from "./components/GalleryItem";
+import { FIELD_LABEL_HEIGHT, FIELD_VALUE_HEIGHT, TITLE_LENE_HEIGHT, TITLE_VERTICAL_SPACING } from "./constant";
+import "./index.less";
+var prefix = "pisell-lowcode-";
+var Gallery = function Gallery(props) {
+  var gallery = props.gallery,
+    filter = props.filter,
+    pagination = props.pagination,
+    rowKey = props.rowKey,
+    loading = props.loading;
+  var _ref = gallery || {},
+    horizontalGutter = _ref.horizontalGutter,
+    verticalGutter = _ref.verticalGutter,
+    cardMinWidth = _ref.cardMinWidth,
+    cardMaxWidth = _ref.cardMaxWidth,
+    cardHeight = _ref.cardHeight,
+    fixedHeight = _ref.fixedHeight,
+    cover = _ref.cover,
+    title = _ref.title,
+    header = _ref.header,
+    footer = _ref.footer,
+    onItem = _ref.onItem;
+  var _useSharedState = useSharedState(Context),
+    state = _useSharedState.state;
+  var form = Form.useFormInstance();
+  var column_setting = Form.useWatch("column_setting", {
+    form: form,
+    preserve: true
+  }) || [];
+  var gallery_setting = Form.useWatch(["gallery_setting"], {
+    form: form,
+    preserve: true
+  }) || {};
+  var originDataSource = state.originDataSource,
+    originColumns = state.originColumns;
+  var dataSource = useTransDataSource({
+    dataSource: originDataSource,
+    form: form,
+    localPagination: !!(pagination !== null && pagination !== void 0 && pagination.localPagination),
+    rowKey: rowKey,
+    filter: filter
+  });
+  var columnsMap = useMemo(function () {
+    return new Map(originColumns.map(function (item) {
+      return [item.key, item];
+    }));
+  }, [originColumns]);
+  var renderItem = useCallback(function (record, index) {
+    return /*#__PURE__*/React.createElement(GalleryItem, {
+      onClick: function onClick() {
+        return onItem === null || onItem === void 0 ? void 0 : onItem(record, index);
+      },
+      columns: column_setting,
+      gallerySetting: gallery_setting,
+      record: record,
+      gallery: gallery,
+      columnsMap: columnsMap,
+      index: index
+    });
+  }, [gallery_setting, gallery, columnsMap, column_setting]);
+  var gap = useMemo(function () {
+    return [horizontalGutter, verticalGutter];
+  }, [horizontalGutter, verticalGutter]);
+  var rowHeight = useMemo(function () {
+    var _header$fields;
+    if (fixedHeight) {
+      return cardHeight;
+    }
+    var coverHeight = 0;
+    var titleHeight = 0;
+    var headerFieldHeight = 0;
+    var contentHeight = 0;
+    var footerHeight = 0;
+    if (cover.show && (gallery_setting === null || gallery_setting === void 0 ? void 0 : gallery_setting.coverField) !== "noCover") {
+      coverHeight = cover.height;
+    }
+    if (title.field) {
+      titleHeight = TITLE_LENE_HEIGHT * title.line + TITLE_VERTICAL_SPACING * 2;
+    }
+    if (header !== null && header !== void 0 && (_header$fields = header.fields) !== null && _header$fields !== void 0 && _header$fields.show) {
+      headerFieldHeight = (FIELD_LABEL_HEIGHT + FIELD_VALUE_HEIGHT) * header.fields.list.length;
+    }
+    if (column_setting) {
+      var fieldCount = column_setting.filter(function (item) {
+        return item.isShow;
+      }).length;
+      var itemHeight = gallery_setting.isShowLabel && gallery_setting.compactMode !== "compact" ? FIELD_LABEL_HEIGHT + FIELD_VALUE_HEIGHT : FIELD_VALUE_HEIGHT;
+      contentHeight = itemHeight * fieldCount;
+      if (gallery_setting.compactMode === "compact") {
+        contentHeight = contentHeight * 0.8;
+      }
+    }
+    if (isFunction(footer === null || footer === void 0 ? void 0 : footer.render)) {
+      footerHeight = footer.height;
+    }
+    return coverHeight + titleHeight + headerFieldHeight + contentHeight + footerHeight;
+  }, [cardHeight, fixedHeight, cover, title, gallery_setting, column_setting, header, footer]);
+  return /*#__PURE__*/React.createElement(Spin, {
+    spinning: loading,
+    wrapperClassName: "".concat(prefix, "gallery-spin")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefix, "gallery-wrap")
+  }, /*#__PURE__*/React.createElement(VirtualGrid, {
+    paddingTop: 4,
+    itemMinWidth: cardMinWidth,
+    itemMaxWidth: cardMaxWidth,
+    dataSource: dataSource,
+    renderItem: renderItem,
+    gap: gap,
+    rowHeight: rowHeight
+  })));
+};
+export default /*#__PURE__*/memo(Gallery);

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

@@ -0,0 +1,26 @@
+@pisell-prefix: pisell-lowcode;
+
+.@{pisell-prefix} {
+  &-gallery-spin {
+    flex: 1 1 auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  &-spin-container {
+    flex: 1 1 auto;
+  }
+  &-gallery-wrap {
+    flex: 1 1 auto;
+    height: 100%;
+  }
+  &-gallery-item-wrap {
+    cursor: pointer;
+    height: 100%;
+    border-radius: 12px;
+    border: 2px solid var(--Gray-true-100, #f5f5f5);
+    background: var(--Base-White, #fff);
+    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
+      0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+  }
+}

package/es/components/table/Gallery/types.d.ts

@@ -0,0 +1,9 @@
+import { GallerySettingType } from "../types";
+import { FilterType } from "../../filter/types";
+export declare type GalleryProps = {
+    gallery: GallerySettingType;
+    filter: FilterType;
+    pagination: any;
+    rowKey: ((record: Record<string, any>) => string) | string;
+    loading: boolean;
+};

package/es/components/table/Gallery/types.js

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

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

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

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

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

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const SelectField: () => JSX.Element;
+import React from "react";
+declare const SelectField: () => React.JSX.Element;
 export default SelectField;

package/es/components/table/Table/fields/date/Config/index.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Config: () => JSX.Element;
+import React from "react";
+declare const Config: () => React.JSX.Element;
 export default Config;

package/es/components/table/Table/fields/date/Config/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 var Config = function Config() {
   return /*#__PURE__*/React.createElement("div", null);
 };

package/es/components/table/Table/fields/date/Edit/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { EditPropsType } from "../../types";
-declare const _default: import("react").ForwardRefExoticComponent<Omit<EditPropsType, "ref"> & import("react").RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<EditPropsType, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/es/components/table/Table/fields/date/Edit/index.js

@@ -2,6 +2,7 @@ var _excluded = ["value", "onChange", "onPressEnter", "onBlur", "style", "border
 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 { isString } from "@pisell/utils";
 import dayjs from "dayjs";
 import { forwardRef, useMemo } from "react";

package/es/components/table/Table/fields/date/Show/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
 import { FieldPropsType } from "../../types";
-declare const Show: (props: FieldPropsType) => JSX.Element;
+import React from "react";
+declare const Show: (props: FieldPropsType) => React.JSX.Element;
 export default Show;

package/es/components/table/Table/fields/date/Show/index.js

@@ -3,6 +3,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 { formatDate } from "@pisell/utils";
+import { getValueByKeys } from "../../utils";
 var Show = function Show(props) {
   var title = props.title,
     editable = props.editable,
@@ -13,6 +14,6 @@ var Show = function Show(props) {
     restProps = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement("div", {
     className: ""
-  }, formatDate(record[dataIndex]));
+  }, formatDate(getValueByKeys(record, dataIndex)));
 };
 export default Show;

package/es/components/table/Table/fields/date/Sort/index.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Sort: () => JSX.Element;
+import React from "react";
+declare const Sort: () => React.JSX.Element;
 export default Sort;

package/es/components/table/Table/fields/date/Sort/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 var Sort = function Sort() {
   return /*#__PURE__*/React.createElement("div", null);
 };

package/es/components/table/Table/fields/date/filterUtil/index.d.ts

@@ -0,0 +1,13 @@
+import { Dayjs } from "dayjs";
+/**
+ * 判断filters和dataSource日期是否为同一天
+ * @param value 日期字符串或Dayjs对象
+ * @param key 键名
+ * @param item 对象
+ * @returns 若两个日期为同一天则返回true，否则返回false
+ */
+export default function ({ value, key, item, }: {
+    value: string | Dayjs;
+    key: string | string[];
+    item: Record<string, any>;
+}): boolean;

package/es/components/table/Table/fields/date/filterUtil/index.js

@@ -0,0 +1,26 @@
+import dayjs from "dayjs";
+import { isUndefined } from "@pisell/utils";
+import { getValueByKeys } from "../../utils";
+
+/**
+ * 判断filters和dataSource日期是否为同一天
+ * @param value 日期字符串或Dayjs对象
+ * @param key 键名
+ * @param item 对象
+ * @returns 若两个日期为同一天则返回true，否则返回false
+ */
+export default function (_ref) {
+  var value = _ref.value,
+    key = _ref.key,
+    item = _ref.item;
+  if (!value) return true;
+  var valueDayjsObj = dayjs(value);
+  if (!valueDayjsObj.isValid()) {
+    return true;
+  }
+  var dataValue = getValueByKeys(item, key);
+  if (isUndefined(dataValue)) return false;
+  var dataDayjsObj = dayjs(dataValue);
+  if (!dataDayjsObj.isValid()) return false;
+  return dataDayjsObj.isSame(valueDayjsObj, "day");
+}

package/es/components/table/Table/fields/date/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import filter from "./filterUtil";
 declare const _default: {
     field: {
         field_icon: string;
@@ -6,9 +7,10 @@ declare const _default: {
         field_type: string;
         default_value: string;
     };
-    config: () => JSX.Element;
+    config: () => import("react").JSX.Element;
     edit: import("react").ForwardRefExoticComponent<Omit<import("../types").EditPropsType, "ref"> & import("react").RefAttributes<any>>;
-    sort: () => JSX.Element;
-    show: (props: import("../types").FieldPropsType) => JSX.Element;
+    sort: () => import("react").JSX.Element;
+    show: (props: import("../types").FieldPropsType) => import("react").JSX.Element;
+    filterFn: typeof filter;
 };
 export default _default;

package/es/components/table/Table/fields/date/index.js

@@ -2,6 +2,7 @@ import Config from "./Config";
 import Edit from "./Edit";
 import Show from "./Show";
 import Sort from "./Sort";
+import filter from "./filterUtil";
 var field = {
   field_icon: 'pi-a-Property3Singlelinetext',
   field_name: 'Date',
@@ -13,5 +14,6 @@ export default {
   config: Config,
   edit: Edit,
   sort: Sort,
-  show: Show
+  show: Show,
+  filterFn: filter
 };

package/es/components/table/Table/fields/image/Config/index.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Config: () => JSX.Element;
+import React from "react";
+declare const Config: () => React.JSX.Element;
 export default Config;

package/es/components/table/Table/fields/image/Config/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 var Config = function Config() {
   return /*#__PURE__*/React.createElement("div", null);
 };

package/es/components/table/Table/fields/image/Edit/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { EditPropsType } from "../../types";
-declare const _default: import("react").ForwardRefExoticComponent<Omit<EditPropsType, "ref"> & import("react").RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<EditPropsType, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/es/components/table/Table/fields/image/Edit/index.js

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import React, { forwardRef } from "react";
 import Input from "../../../../../input";
 var Edit = function Edit(props, ref) {
   var value = props.value,

package/es/components/table/Table/fields/image/Show/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { FieldPropsType } from "../../types";
-declare const Show: (props: FieldPropsType) => JSX.Element;
+declare const Show: (props: FieldPropsType) => React.JSX.Element;
 export default Show;

package/es/components/table/Table/fields/image/Show/index.js

@@ -1,6 +1,8 @@
 var _excluded = ["title", "editable", "dataIndex", "field_type", "record", "handleSave"];
 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 { getValueByKeys } from "../../utils";
 var Show = function Show(props) {
   var title = props.title,
     editable = props.editable,
@@ -12,7 +14,7 @@ var Show = function Show(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: ""
   }, /*#__PURE__*/React.createElement("img", {
-    src: record[dataIndex],
+    src: getValueByKeys(record, dataIndex),
     alt: ""
   }));
 };

package/es/components/table/Table/fields/image/Sort/index.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Sort: () => JSX.Element;
+import React from "react";
+declare const Sort: () => React.JSX.Element;
 export default Sort;

package/es/components/table/Table/fields/image/Sort/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 var Sort = function Sort() {
   return /*#__PURE__*/React.createElement("div", null);
 };

package/es/components/table/Table/fields/image/index.d.ts

@@ -6,9 +6,9 @@ declare const _default: {
         field_type: string;
         default_value: string;
     };
-    config: () => JSX.Element;
+    config: () => import("react").JSX.Element;
     edit: import("react").ForwardRefExoticComponent<Omit<import("../types").EditPropsType, "ref"> & import("react").RefAttributes<any>>;
-    sort: () => JSX.Element;
-    show: (props: import("../types").FieldPropsType) => JSX.Element;
+    sort: () => import("react").JSX.Element;
+    show: (props: import("../types").FieldPropsType) => import("react").JSX.Element;
 };
 export default _default;