es-grid-template 1.9.57 → 1.9.59

package/es/grid-component/hooks/utils.d.ts

@@ -1,9 +1,9 @@
 import type * as React from "react";
 import dayjs from "dayjs";
-import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
+import type { TypeFilter } from "rc-master-ui";
 import type { Key } from "react";
 import type { ColumnsTable } from "./../index";
-import type { AnyObject, ColumnTable, GetRowKey, IFormat } from "../type";
+import type { AnyObject, ColumnTable, EditType, GetRowKey, IColumnType, IFormat } from "../type";
 export declare const newGuid: () => any;
 export declare const sumDataByField: (data: any[], field: string) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;

package/es/grid-component/hooks/utils.js

@@ -1,18 +1,10 @@
 import dayjs from "dayjs";
-// import type {ColumnTable, GetRowKey, IFormat, Presets} from "./../ type"
 import moment from "moment/moment";
-// import type {SelectionSettings} from "../type"
-// import type {AnyObject} from "../type"
 import { v4 as uuidv4 } from 'uuid';
 import { presetPalettes } from "@ant-design/colors";
-// import {Table} from "rc-master-ui"
-// import {flatColumns2} from "./columns"
-// import {SELECTION_COLUMN} from "./useColumns"
-
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return uuidv4();
   }
 };

package/es/grid-component/type.d.ts

@@ -94,10 +94,10 @@ export type IFormat = {
     yearFormat?: string;
 };
 export type RowSelectMethod = 'all' | 'none' | 'invert' | 'single' | 'multiple';
-export type EditType = 'text' | 'numeric' | 'asyncSelect' | 'date' | 'datetime' | 'time' | 'week' | 'month' | 'quarter' | 'year' | 'select' | 'checkbox' | 'currency' | 'image' | 'selectTable' | 'customSelect' | 'form' | 'color' | 'treeSelect' | 'file';
+export type EditType = 'text' | 'numeric' | 'asyncSelect' | 'date' | 'datetime' | 'time' | 'week' | 'month' | 'quarter' | 'year' | 'select' | 'checkbox' | 'currency' | 'image' | 'selectTable' | 'customSelect' | 'form' | 'color' | 'link' | 'treeSelect' | 'file';
 export type ITextAlign = 'center' | 'left' | 'right';
 export type TypeFilter = 'Text' | 'Date' | 'Time' | 'Datetime' | 'DateRange' | 'Month' | 'Quarter' | 'Year' | 'Week' | 'Number' | 'NumberRange' | 'Dropdown' | 'DropTree' | 'Checkbox' | 'CheckboxTree' | 'CheckboxDropdown';
-export type IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | null | undefined;
+export type IColumnType = 'number' | 'time' | 'date' | 'week' | 'month' | 'file' | 'quarter' | 'year' | 'datetime' | 'string' | 'boolean' | 'checkbox' | 'color' | 'link' | null | undefined;
 export type FilterOperator = 'equal' | 'notequal' | 'greaterthan' | 'greaterthanorequal' | 'lessthan' | 'lessthanorequal' | 'startswith' | 'endswith' | 'contains';
 export type FixedType = 'left' | 'right' | boolean;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
@@ -241,6 +241,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     textAlign?: ITextAlign;
     /** Template custom render cell */
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
+    linkTemplate?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
     /** Hiển thị tooltip cell */
     showTooltip?: boolean;
     /** Nội dung tooltip của cell */
@@ -811,6 +812,7 @@ export type RangeState = {
     endColIndex: number | undefined;
     rowIds: string[];
     colIds: string[];
+    type?: any;
 };
 export type Sorter = {
     columnKey: string;

package/es/group-component/body/EditableCell.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import type { EditType } from "rc-master-ui";
-import type { ColumnTable, IFormat } from "../../grid-component/type";
+import type { ColumnTable, EditType, IFormat } from "../../grid-component/type";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;
     dataIndex: string;

package/es/group-component/hook/utils.d.ts

@@ -189,15 +189,16 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
     template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    linkTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth">);
+    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "width" | "display" | "minWidth">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/body/EditableCell.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import type { EditType } from "rc-master-ui";
-import type { ColumnTable, IFormat } from "../../grid-component/type";
+import type { ColumnTable, EditType, IFormat } from "../../grid-component/type";
 import type { Column } from "@tanstack/react-table";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;

package/es/table-component/body/EditableCell.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from "react";
 import { DatePicker, TimePicker, ColorPicker, Input } from "rc-master-ui";
 import { Divider, Row, Col, Button } from "rc-master-ui";
+// import type { EditType } from "rc-master-ui"
+
 import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat, removeVietnameseTones, getDateValueType } from "../hook/utils";
 import classNames from "classnames";
 import { NumericFormat } from "react-numeric-component";
@@ -483,7 +485,7 @@ const EditableCell = props => {
             const formState = getValues();
             const formNewState = {
               ...getValues(),
-              [dataIndex]: formState[dataIndex] || undefined
+              [dataIndex]: !isNullOrUndefined(formState[dataIndex]) ? formState[dataIndex] : undefined
             };
             // @ts-ignore
             const prevState = record[dataIndex] ?? undefined;
@@ -629,7 +631,7 @@ const EditableCell = props => {
             const formState = getValues();
             const formNewState = {
               ...getValues(),
-              [dataIndex]: formState[dataIndex] || undefined
+              [dataIndex]: !isNullOrUndefined(formState[dataIndex]) ? formState[dataIndex] : undefined
             };
             // @ts-ignore
             const prevState = record[dataIndex] ?? undefined;
@@ -773,7 +775,7 @@ const EditableCell = props => {
             const formState = getValues();
             const formNewState = {
               ...getValues(),
-              [dataIndex]: formState[dataIndex] || undefined
+              [dataIndex]: !isNullOrUndefined(formState[dataIndex]) ? formState[dataIndex] : undefined
             };
             // @ts-ignore
             const prevState = record[dataIndex] ?? undefined;

package/es/table-component/body/TableBodyCell.js

@@ -6,6 +6,7 @@ import classNames from "classnames";
 import React from "react";
 import { TableContext } from "../useContext";
 import { getValueCellString, renderValueCell, toggleRowSelection } from "../hook/useColumns";
+import { Dropdown } from "rc-master-ui";
 const renderCellIndex = props => {
   const {
     parrents,
@@ -213,6 +214,18 @@ const TableBodyCell = props => {
   const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
   const cellFormat = getFormat(colFormat, format);
   const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
+  const cellContent = columnMeta?.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.template : fomatedValue;
+  const linkContent = columnMeta?.linkTemplate ? typeof columnMeta.linkTemplate === 'function' ? columnMeta.linkTemplate({
+    field: columnMeta.field,
+    index: cell.row.index,
+    rowData: cell.row.original,
+    value: cell.getValue()
+  }) : columnMeta.linkTemplate : cellContent;
   const valueCellString = getValueCellString(columnMeta, cellValue, record, rowIndex, colIndex, format);
   const tooltipContent = React.useMemo(() => {
     if (isOpenTooltip === false) {
@@ -375,7 +388,7 @@ const TableBodyCell = props => {
     "data-row-index": rowNumber,
     "data-col-key": cell.column.id,
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": tooltipContent
+    "data-tooltip-content": columnMeta?.type === 'link' ? '' : tooltipContent
     // data-tooltip-delay-show={500}
     ,
 
@@ -389,7 +402,8 @@ const TableBodyCell = props => {
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
       [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
-      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta?.type === 'number',
+      [`${prefix}-grid-cell-link`]: columnMeta?.type === 'link'
     }),
     style: {
       ...cellStyles,
@@ -487,6 +501,30 @@ const TableBodyCell = props => {
         }
       }
     }
+  }, cellContent && columnMeta?.type === 'link' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+    trigger: ['hover'],
+    menu: {
+      items: [{
+        key: '1',
+        label: ''
+      }]
+    },
+    dropdownRender: () => /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '1rem',
+        backgroundColor: '#ffffff',
+        borderRadius: 6,
+        boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05)'
+      }
+    }, linkContent && typeof linkContent === 'string' ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      href: linkContent,
+      target: "_blank",
+      rel: "noreferrer"
+    }, linkContent)) : linkContent ? linkContent : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+      href: typeof cellContent === 'string' ? cellContent : '',
+      target: "_blank",
+      rel: "noreferrer"
+    }, cellContent)))
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc_cell-content', {})
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
@@ -535,11 +573,42 @@ const TableBodyCell = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), columnMeta.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
-    field: columnMeta.field,
-    index: cell.row.index,
-    rowData: cell.row.original,
-    value: cell.getValue()
-  }) : columnMeta.template : fomatedValue));
+  }))), cellContent))) : /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc_cell-content', {})
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), cellContent));
 };
 export default TableBodyCell;