@pisell/materials 1.0.48 → 1.0.49

package/lib/components/table/Table/fields/text/index.js

@@ -0,0 +1,51 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Table/fields/text/index.tsx
+var text_exports = {};
+__export(text_exports, {
+  default: () => text_default
+});
+module.exports = __toCommonJS(text_exports);
+var import_Config = __toESM(require("./Config"));
+var import_Edit = __toESM(require("./Edit"));
+var import_Show = __toESM(require("./Show"));
+var import_Sort = __toESM(require("./Sort"));
+var field = {
+  field_icon: "pi-a-Property3Singlelinetext",
+  field_name: "Single line text",
+  field_type: "text",
+  default_value: "Text"
+};
+var text_default = {
+  field,
+  config: import_Config.default,
+  edit: import_Edit.default,
+  sort: import_Sort.default,
+  show: import_Show.default
+};

package/lib/components/table/Table/fields/types/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare type FieldPropsType = {
+    title: React.ReactNode;
+    editable: boolean;
+    dataIndex: string;
+    field_type: FieldType;
+    record: Record<string, any>;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    handleSave: () => void;
+};
+export declare type FieldType = 'text' | 'image';
+export declare type EditPropsType = {
+    value: any;
+    onChange: (v: any) => void;
+    onPressEnter: () => void;
+    onBlur: () => void;
+    style: React.CSSProperties;
+    bordered: boolean;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    [key: string]: any;
+};

package/lib/components/table/Table/fields/types/index.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Table/fields/types/index.tsx
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/table/Table/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./index.less";
+declare const GridViewTable: React.FC<any>;
+export default GridViewTable;

package/lib/components/table/Table/index.js

@@ -0,0 +1,143 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Table/index.tsx
+var Table_exports = {};
+__export(Table_exports, {
+  default: () => Table_default
+});
+module.exports = __toCommonJS(Table_exports);
+var import_hooks = require("../../../hooks");
+var import_react = __toESM(require("react"));
+var import_ahooks = require("ahooks");
+var import_model = require("../model");
+var import_index = require("./index.less");
+var import_BasicTable = __toESM(require("../BasicTable"));
+var import_SortRow = __toESM(require("./tableConfig/SortRow"));
+var import_body = __toESM(require("./tableConfig/body"));
+var import_header = __toESM(require("./tableConfig/header"));
+var import_Pagination = require("../../Pagination");
+var GridViewTable = ({ tableProps }) => {
+  const responsive = (0, import_hooks.useResponsive)();
+  const { state, dispatch } = (0, import_hooks.useSharedState)(import_model.Context);
+  const { dataSource, defaultColumns } = state;
+  const handleSave = (0, import_ahooks.useMemoizedFn)((row) => {
+    const newData = [...dataSource];
+    const index = newData.findIndex((item2) => row.key === item2.key);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      ...row
+    });
+    dispatch({
+      type: "setDataSource",
+      payload: newData
+    });
+  });
+  const handleResize = (index) => (e, { size }) => {
+    const nextColumns = [...defaultColumns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width
+    };
+    dispatch({
+      type: "setDefaultColumns",
+      payload: nextColumns
+    });
+  };
+  const columns = (0, import_react.useMemo)(() => {
+    return defaultColumns.map((col, index) => {
+      if (!col.editable) {
+        return col;
+      }
+      const item = {
+        editable: col.editable || true,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        field_type: col.field_type,
+        lock: col.lock,
+        width: col.width || 0
+      };
+      return {
+        ...col,
+        onCell: (record) => ({
+          record,
+          ...item,
+          handleSave
+        }),
+        onHeaderCell: (record) => ({
+          record,
+          ...item,
+          onResize: handleResize(index)
+        })
+      };
+    });
+  }, [defaultColumns]);
+  const showTotal = (0, import_react.useCallback)(
+    (total, range, pageSize) => {
+      let start = range[0] - 1;
+      let _current = start / pageSize + 1;
+      return `Page ${_current} of ${Math.ceil(total / pageSize)}`;
+    },
+    []
+  );
+  const _paginationConfig = (0, import_react.useMemo)(() => {
+    if (tableProps.pagination === false) {
+      return false;
+    }
+    return {
+      ...import_Pagination.paginationConfig,
+      ...tableProps.pagination,
+      showTotal
+    };
+  }, [responsive, tableProps.pagination]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-table-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_SortRow.default, null, /* @__PURE__ */ import_react.default.createElement(
+    import_BasicTable.default,
+    {
+      dataSource,
+      columns,
+      className: "grid-view-table",
+      components: {
+        header: {
+          row: import_header.default.Row,
+          cell: import_header.default.Cell
+        },
+        body: {
+          row: import_body.default.Row,
+          cell: import_body.default.Coll
+        }
+      },
+      ...tableProps,
+      scroll: {
+        x: "max-content"
+      },
+      pagination: _paginationConfig
+    }
+  )));
+};
+var Table_default = GridViewTable;

package/lib/components/table/Table/index.less

@@ -0,0 +1,15 @@
+.grid-view-table-wrap {
+  position: relative;
+  // flex: 1;
+  // display: flex;
+  // flex-direction: column;
+
+  .grid-view-table {
+    // margin-top: 20px;
+    // width: max-content;
+
+  }
+
+
+
+}

package/lib/components/table/Table/tableConfig/SortRow/index.d.ts

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

package/lib/components/table/Table/tableConfig/SortRow/index.js

@@ -0,0 +1,58 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Table/tableConfig/SortRow/index.tsx
+var SortRow_exports = {};
+__export(SortRow_exports, {
+  default: () => SortRow_default
+});
+module.exports = __toCommonJS(SortRow_exports);
+var import_hooks = require("../../../../../hooks");
+var import_model = require("../../../model");
+var import_index = require("./index.less");
+var import_react = __toESM(require("react"));
+var import_core = require("@dnd-kit/core");
+var import_modifiers = require("@dnd-kit/modifiers");
+var import_sortable = require("@dnd-kit/sortable");
+var SortRow = ({ children }) => {
+  const { state, dispatch } = (0, import_hooks.useSharedState)(import_model.Context);
+  const { dataSource } = state;
+  const onDragEnd = ({ active, over }) => {
+    if (active.id !== (over == null ? void 0 : over.id)) {
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "grid-view-table-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_core.DndContext, { modifiers: [import_modifiers.restrictToVerticalAxis], onDragEnd }, /* @__PURE__ */ import_react.default.createElement(
+    import_sortable.SortableContext,
+    {
+      items: dataSource.map((i) => i.key),
+      strategy: import_sortable.verticalListSortingStrategy
+    },
+    children
+  )));
+};
+var SortRow_default = SortRow;

package/lib/components/table/Table/tableConfig/body/CellContent/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./index.less";
+declare const CellProvider: React.FC<any>;
+export default CellProvider;

package/lib/components/table/Table/tableConfig/body/CellContent/index.js

@@ -0,0 +1,49 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Table/tableConfig/body/CellContent/index.tsx
+var CellContent_exports = {};
+__export(CellContent_exports, {
+  default: () => CellContent_default
+});
+module.exports = __toCommonJS(CellContent_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_index = require("./index.less");
+var CellProvider = ({ children }) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("cell-provider", {
+        ["focus"]: true
+      })
+    },
+    children
+  );
+};
+var CellContent_default = CellProvider;

package/lib/components/table/Table/tableConfig/body/CellContent/index.less

@@ -0,0 +1,16 @@
+.cell-provider {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 12px;
+
+  &.focus {
+    box-shadow: rgb(22, 110, 225) 0px 0px 0px 1px !important;
+  }
+
+
+}

package/lib/components/table/Table/tableConfig/body/CellProvider/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./index.less";
+declare const CellProvider: React.FC<any>;
+export default CellProvider;

package/lib/components/table/Table/tableConfig/body/CellProvider/index.js

@@ -0,0 +1,146 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/Table/tableConfig/body/CellProvider/index.tsx
+var CellProvider_exports = {};
+__export(CellProvider_exports, {
+  default: () => CellProvider_default
+});
+module.exports = __toCommonJS(CellProvider_exports);
+var import_hooks = require("../../../../../../hooks");
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_model = require("../../../../model");
+var import_fields = require("../../../fields");
+var import__ = require("../index");
+var import_index = require("./index.less");
+var CellProvider = (props) => {
+  var _a, _b;
+  const {
+    title,
+    editable,
+    children,
+    dataIndex,
+    field_type,
+    record,
+    handleSave
+  } = props;
+  const [editing, setEditing] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)(null);
+  const form = (0, import_hooks.useSharedState)(import__.EditableContext);
+  const { state, dispatch } = (0, import_hooks.useSharedState)(import_model.Context);
+  const KEY = `${dataIndex}-${record == null ? void 0 : record.key}`;
+  (0, import_react.useEffect)(() => {
+    var _a2, _b2;
+    if (editing) {
+      (_b2 = (_a2 = inputRef.current) == null ? void 0 : _a2.focus) == null ? void 0 : _b2.call(_a2);
+    }
+  }, [editing]);
+  const toggleEdit = () => {
+    if (!import_fields.fieldMaps[field_type]) {
+      return;
+    }
+    setEditing(!editing);
+    form.setFieldsValue({ [dataIndex]: record[dataIndex] });
+  };
+  const save = async () => {
+    try {
+      const values = await form.validateFields();
+      toggleEdit();
+      handleSave({ ...record, ...values });
+    } catch (errInfo) {
+      console.log("Save failed:", errInfo);
+    }
+  };
+  let childNode = children;
+  const Com = (_a = (0, import_fields.getFieldByType)(field_type)) == null ? void 0 : _a.show;
+  const EditCom = (_b = (0, import_fields.getFieldByType)(field_type)) == null ? void 0 : _b.edit;
+  const editComRender = (0, import_react.useMemo)(() => {
+    const NewEditCom = EditCom || import_antd.Input;
+    return /* @__PURE__ */ import_react.default.createElement(
+      NewEditCom,
+      {
+        ref: inputRef,
+        onBlur: save,
+        style: { height: "100%" },
+        bordered: false
+      }
+    );
+  }, [EditCom, save]);
+  if (editable) {
+    childNode = editing ? /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        style: { margin: 0 },
+        name: dataIndex,
+        rules: [
+          {
+            required: true,
+            message: `${title} is required.`
+          }
+        ]
+      },
+      editComRender
+    ) : /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("editable-cell-value-wrap") }, Com ? /* @__PURE__ */ import_react.default.createElement(Com, { ...props }) : children);
+  }
+  const focus = (0, import_react.useMemo)(() => {
+    return state.currentCell === KEY;
+  }, [KEY, state.currentCell]);
+  (0, import_react.useEffect)(() => {
+    if (!focus) {
+      setEditing(false);
+    }
+  }, [focus]);
+  const onFocus = () => {
+    if (!state.setting.data.edit) {
+      return;
+    }
+    if (record) {
+      if (!focus) {
+        dispatch({
+          type: "setCurrentCell",
+          payload: focus ? null : KEY
+        });
+      } else {
+        toggleEdit();
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("cell-provider", {
+        ["focus"]: focus
+      }),
+      onClick: onFocus
+    },
+    childNode
+  );
+};
+var CellProvider_default = CellProvider;

package/lib/components/table/Table/tableConfig/body/CellProvider/index.less

@@ -0,0 +1,15 @@
+.cell-provider {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 12px;
+
+  &.focus {
+    box-shadow: var(--theme-color) 0px 0px 0px 1px !important;
+  }
+
+
+}

package/lib/components/table/Table/tableConfig/body/index.d.ts

@@ -0,0 +1,30 @@
+import type { FormInstance } from "antd/es/form";
+import React from "react";
+import "./index.less";
+export declare const EditableContext: React.Context<FormInstance<any> | null>;
+interface Item {
+    key: string;
+    name: string;
+    age: string;
+    address: string;
+}
+interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    index: number;
+    "data-row-key": string;
+}
+interface EditableCellProps {
+    title: React.ReactNode;
+    editable: boolean;
+    children: React.ReactNode;
+    dataIndex: keyof Item;
+    record: Item;
+    field_type: string;
+    handleSave: (record: Item) => void;
+    className?: string;
+    lock?: any;
+}
+declare const _default: {
+    Row: React.FC<RowProps>;
+    Coll: React.FC<EditableCellProps>;
+};
+export default _default;