es-grid-template 0.0.4 → 0.0.7

package/es/hooks/constant.js

@@ -0,0 +1,214 @@
+export const defaultWidth = 100;
+export const defaultRowHeight = 35;
+export const numberOperator = [{
+  value: 'equal',
+  label: 'Equal',
+  key: '=='
+}, {
+  value: 'greaterthan',
+  label: 'Greater than',
+  key: '>'
+}, {
+  value: 'greaterthan',
+  label: 'Greater Than or Equal',
+  key: '>='
+}, {
+  value: 'lessthan',
+  label: 'Less Than',
+  key: '<'
+}, {
+  value: 'lessthanorequal',
+  label: 'Less Than Or Equal',
+  key: '<='
+}, {
+  value: 'notequal',
+  label: 'Not Equal',
+  key: '!='
+}];
+export const stringOperator = [{
+  value: 'startswith',
+  key: '_=',
+  label: 'Starts With'
+}, {
+  value: 'endswith',
+  key: '|=',
+  label: 'Ends With'
+}, {
+  value: 'contains',
+  key: '~=',
+  label: 'Contains'
+}, {
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not Equal'
+}];
+export const dateOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not Equal'
+}, {
+  value: 'greaterthan',
+  key: '>',
+  label: 'Greater Than'
+}, {
+  value: 'lessthan',
+  key: '<',
+  label: 'Less Than'
+}];
+export const dateTimeOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not Equal'
+}, {
+  value: 'greaterthan',
+  key: '>',
+  label: 'Greater Than'
+}, {
+  value: 'lessthan',
+  key: '<',
+  label: 'Less Than'
+}];
+export const booleanOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not Equal'
+}];
+export const translateOption = (options, t) => {
+  if (!t) {
+    return options;
+  }
+  return options.map(it => ({
+    ...it,
+    label: t(it.label)
+  }));
+};
+export const transferFontSize = {
+  6: 8,
+  7: 9,
+  8: 11,
+  9: 12,
+  10: 13,
+  11: 15,
+  12: 16,
+  13: 17,
+  14: 19,
+  15: 20,
+  16: 21,
+  17: 23,
+  18: 24,
+  19: 25,
+  20: 27,
+  21: 28,
+  22: 29,
+  24: 32,
+  26: 35,
+  27: 36,
+  28: 37
+};
+export const defaultDateFormat = 'd/m/Y';
+export const defaultDateTimeFormat = 'd/m/Y H:i';
+export const defaultTimeFormat = 'H:i';
+export const defaultPageSizes = [20, 30, 50, 100];
+export const alignToFlex = {
+  center: 'center',
+  left: 'start',
+  right: 'end'
+};
+export const optionsSize = [{
+  label: 'letter',
+  value: 'letter',
+  width: 21.59,
+  height: 27.94
+}, {
+  label: 'A3',
+  value: 'a3',
+  width: 27.94,
+  height: 42
+}, {
+  label: 'A4',
+  value: 'a4',
+  width: 21,
+  height: 29.7
+}];
+export const paperSize = {
+  a4: {
+    width: 21,
+    height: 29.7
+  },
+  a3: {
+    width: 27.94,
+    height: 42
+  },
+  letter: {
+    width: 21.59,
+    height: 27.94
+  }
+};
+export const optionFont = [{
+  value: 'Times New Roman',
+  label: 'Times New Roman'
+}, {
+  value: 'Calibri',
+  label: 'Calibri (Body)'
+}];
+// portrait' | 'landscape'
+export const optionsPaperOrientation = [{
+  value: 'portrait',
+  label: 'portrait'
+}, {
+  value: 'landscape',
+  label: 'landscape'
+}];
+export const optionFontSize = [{
+  value: 8,
+  label: '8'
+}, {
+  value: 9,
+  label: '9'
+}, {
+  value: 10,
+  label: '10'
+}, {
+  value: 11,
+  label: '11'
+}, {
+  value: 12,
+  label: '12'
+}, {
+  value: 13,
+  label: '13'
+}, {
+  value: 14,
+  label: '14'
+}, {
+  value: 16,
+  label: '16'
+}, {
+  value: 18,
+  label: '18'
+}, {
+  value: 24,
+  label: '24'
+}, {
+  value: 36,
+  label: '36'
+}, {
+  value: 48,
+  label: '48'
+}];

package/es/hooks/index.js

@@ -0,0 +1,5 @@
+export * from "./constant";
+// export * from './isNullOrUndefined'
+export * from "./useIsOverflow";
+export * from "./useOnClickOutside";
+export * from "./utils";

package/{dist → es}/hooks/useColumns/index.d.ts

@@ -1,2 +1,2 @@
-import { ColumnsType, ColumnType } from "../../type";
+import type { ColumnsType, ColumnType } from "../../type";
 export declare function flatColumns<RecordType>(columns: ColumnsType<RecordType>, parentKey?: string): ColumnType<RecordType>[];

package/es/hooks/useColumns/index.js

@@ -0,0 +1,25 @@
+// import * as React from 'react'
+
+export function flatColumns(columns, parentKey = 'key') {
+  // @ts-ignore
+  return columns.filter(column => column && typeof column === 'object').reduce((list, column, index) => {
+    const {
+      fixed
+    } = column;
+    // Convert `fixed='true'` to `fixed='left'` instead
+    const parsedFixed = fixed === true ? 'left' : fixed;
+    const mergedKey = `${parentKey}-${index}`;
+    const subColumns = column.children;
+    if (subColumns && subColumns.length > 0) {
+      return [...list, ...flatColumns(subColumns, mergedKey).map(subColum => ({
+        fixed: parsedFixed,
+        ...subColum
+      }))];
+    }
+    return [...list, {
+      key: mergedKey,
+      ...column,
+      fixed: parsedFixed
+    }];
+  }, []);
+}

package/{dist → es}/hooks/useIsOverflow.d.ts

@@ -1 +1 @@
-export declare const useIsOverflow: (ref: any, callback?: any) => boolean | undefined;
+export declare const useIsOverflow: (ref: any, callback?: any) => boolean;

package/es/hooks/useIsOverflow.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export const useIsOverflow = (ref, callback) => {
+  const [isOverflow, setIsOverflow] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const trigger = () => {
+      const hasOverflow = ref?.current?.scrollWidth > ref?.current?.clientWidth;
+      setIsOverflow(hasOverflow);
+      if (callback) {
+        callback(hasOverflow);
+      }
+    };
+    if (ref) {
+      trigger();
+    }
+  }, [callback, ref]);
+  return isOverflow;
+};

package/es/hooks/useOnClickOutside.js

@@ -0,0 +1,28 @@
+//** React Imports
+import { useEffect } from 'react';
+export const useOnClickOutside = (ref, handler) => {
+  useEffect(() => {
+    const listener = event => {
+      // ** Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      // ** Call passed function on click outside
+      handler(event);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  },
+  // ** Add ref and handler to effect dependencies
+  // ** It's worth noting that because passed in handler is a new ...
+  // ** ... function on every render that will cause this effect ...
+  // ** ... callback/cleanup to run every render. It's not a big deal ...
+  // ** ... but to optimize you can wrap handler in useCallback before ...
+  // ** ... passing it into this hook.
+  [ref, handler]);
+};

package/{dist → es}/hooks/utils.d.ts

@@ -1,14 +1,18 @@
 import dayjs from "dayjs";
+import type { EditType, IColumnType, TypeFilter } from "ui-rc";
+import type { ColumnType } from "../type";
 export declare const sumDataByField: (data: any[], field: string) => any;
-export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string | undefined;
+export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const isEmpty: (d: any) => boolean;
 export declare const isNullOrUndefined: (d: any) => boolean;
 export declare const convertDayjsToDate: (dateString: string, format: string) => Date;
-export declare const convertDateToDayjs: (date: Date | undefined, format: string) => dayjs.Dayjs | null;
+export declare const convertDateToDayjs: (date: Date | undefined, format: string) => dayjs.Dayjs;
 export declare const isNameColor: (strColor: string) => boolean;
 export declare const isColor: (value: string) => boolean;
-export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare const getAllVisibleKeys: (columns: any[]) => any[];
+export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
 export declare const updateColumns: (columns: any[], includes: string[]) => any[];
+export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, col: ColumnType<any>) => string;
+export declare const getTypeFilter: (col: ColumnType<any>) => TypeFilter;

package/es/hooks/utils.js

@@ -0,0 +1,192 @@
+import dayjs from "dayjs";
+export const sumDataByField = (data, field) => {
+  if (data && data.length > 0) {
+    return data.reduce((accumulator, currentValue) => {
+      const val = typeof currentValue[field] === 'number' || !isNaN(currentValue[field]) ? Number(currentValue[field]) : 0;
+      return accumulator + val;
+    }, 0);
+  } else {
+    return 0;
+  }
+};
+export const checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
+  if (thousandSeparator) {
+    if (decimalSeparator) {
+      if (thousandSeparator === decimalSeparator) {
+        return ',';
+      } else {
+        return thousandSeparator;
+      }
+    } else {
+      return thousandSeparator;
+    }
+  } else {
+    return undefined;
+  }
+};
+export const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
+  if (decimalSeparator) {
+    if (thousandSeparator) {
+      if (thousandSeparator === decimalSeparator) {
+        return '.';
+      } else {
+        return decimalSeparator;
+      }
+    } else {
+      return decimalSeparator;
+    }
+  } else {
+    if (thousandSeparator && thousandSeparator === '.') {
+      return ',';
+    }
+    return '.';
+  }
+};
+export const isEmpty = d => {
+  if (d === null || d === undefined || d === '') {
+    return true;
+  }
+  return false;
+};
+export const isNullOrUndefined = d => {
+  if (d === null || d === undefined) {
+    return true;
+  }
+  return false;
+};
+export const convertDayjsToDate = (dateString, format) => {
+  const dayjsDate = dayjs(dateString, format); // Parse using the provided format
+  if (!dayjsDate.isValid()) {
+    throw new Error('Invalid date or format');
+  }
+  // return moment(dayjsDate.toDate()).format() // Convert to JavaScript Date
+  return dayjsDate.toDate(); // Convert to JavaScript Date
+};
+export const convertDateToDayjs = (date, format) => {
+  const dateValue = date ? dayjs(date).format(format) : null;
+  return dateValue ? dayjs(dateValue, format) : null;
+};
+export const isNameColor = strColor => {
+  const s = new Option().style;
+  s.color = strColor;
+  return s.color === strColor;
+};
+export const isColor = value => {
+  const hexRegex = /^#([0-9A-F]{3}){1,2}$/i;
+  const rgbRegex = /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/;
+  const rgbaRegex = /^rgba\((\d{1,3}), (\d{1,3}), (\d{1,3}), (0|1|0?\.\d+)\)$/;
+  const hslRegex = /^hsl\(\d{1,3}, \d{1,3}%, \d{1,3}%\)$/;
+  const hslaRegex = /^hsla\(\d{1,3}, \d{1,3}%, \d{1,3}%, (0|1|0?\.\d+)\)$/;
+  const namedColors = /^(?:aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow)$/i;
+  return hexRegex.test(value) || rgbRegex.test(value) || rgbaRegex.test(value) || hslRegex.test(value) || hslaRegex.test(value) || namedColors.test(value) || isNameColor(value);
+};
+export const getAllVisibleKeys = columns => {
+  const keys = [];
+  const traverse = (cols, parentHidden = false) => {
+    for (const col of cols) {
+      if (col.hidden || parentHidden) {
+        continue;
+      }
+      if (col.key) {
+        keys.push(col.key);
+      }
+      if (col.children) {
+        traverse(col.children, col.hidden);
+      }
+    }
+  };
+  traverse(columns);
+  return keys;
+};
+export const getVisibleColumnKeys = columns => {
+  const allKeys = getAllVisibleKeys(columns);
+  const allParentKeys = getHiddenParentKeys(columns);
+  const rs = allKeys.filter(item => !allParentKeys.includes(item));
+  return rs;
+};
+export function getHiddenParentKeys(columns, parentKeys = []) {
+  const hiddenParents = new Set();
+  for (const column of columns) {
+    if (column.children) {
+      const currentPath = column.key ? [...parentKeys, column.key] : [...parentKeys];
+      const childHiddenParents = getHiddenParentKeys(column.children, currentPath);
+      if (childHiddenParents.length > 0) {
+        childHiddenParents.forEach(key => hiddenParents.add(key));
+        currentPath.forEach(key => hiddenParents.add(key));
+      }
+    } else if (column.hidden) {
+      parentKeys.forEach(key => hiddenParents.add(key));
+    }
+  }
+  return Array.from(hiddenParents);
+}
+export const updateColumns = (columns, includes) => {
+  return columns.map(column => {
+    const newColumn = {
+      ...column
+    };
+    let hasVisibleChild = false;
+    if (newColumn.children) {
+      newColumn.children = updateColumns(newColumn.children, includes);
+      hasVisibleChild = newColumn.children.some(child => !child.hidden);
+    }
+    if (newColumn.key && !includes.includes(newColumn.key)) {
+      newColumn.hidden = true;
+    } else {
+      newColumn.hidden = false;
+    }
+    if (newColumn.children && newColumn.children.length > 0) {
+      newColumn.hidden = !hasVisibleChild;
+    }
+    return newColumn;
+  });
+};
+export const getDatepickerFormat = (type, col) => {
+  const typeFormat = type ? type.toLowerCase() : '';
+  switch (typeFormat) {
+    case "date":
+    case "daterange":
+      return col.format?.dateFormat ? col.format?.dateFormat : 'DD/MM/YYYY';
+    case "datetime":
+      return col.format?.datetimeFormat ? col.format?.datetimeFormat : 'DD/MM/YYYY HH:mm';
+    case "week":
+      return col.format?.weekFormat ? col.format?.weekFormat : 'DD/MM';
+    case "month":
+      return col.format?.monthFormat ? col.format?.monthFormat : 'MM/YYYY';
+    case "quarter":
+      return col.format?.dateFormat ? col.format?.dateFormat : 'DD/MM/YYYY';
+    case "year":
+      return col.format?.yearFormat ? col.format?.yearFormat : 'YYYY';
+    case "time":
+      return col.format?.timeFormat ? col.format?.timeFormat : 'HH:mm';
+    default:
+      return undefined;
+  }
+};
+export const getTypeFilter = col => {
+  if (col.typeFilter) {
+    return col.typeFilter;
+  }
+  const type = col.type ?? '';
+  switch (type) {
+    case "number":
+      return 'Number';
+    case "date":
+      return 'Date';
+    case "datetime":
+      return 'Datetime';
+    case "boolean":
+      return 'Checkbox';
+    case "checkbox":
+      return 'Checkbox';
+
+    // case "week": return ''
+    // case "month": return col.format?.monthFormat ? col.format?.monthFormat : 'MM/YYYY'
+    // case "quarter": return col.format?.dateFormat ? col.format?.dateFormat : 'DD/MM/YYYY'
+    // case "year": return col.format?.yearFormat ? col.format?.yearFormat : 'YYYY'
+    // case "time": return col.format?.timeFormat ? col.format?.timeFormat : 'HH:mm'
+    case "string":
+    default:
+      return 'Text';
+  }
+};

package/es/index.d.ts

@@ -0,0 +1,2 @@
+import GridTable from './GridTable';
+export default GridTable;

package/es/index.js

@@ -0,0 +1,2 @@
+import GridTable from "./GridTable";
+export default GridTable;

package/es/styles.scss

@@ -0,0 +1,30 @@
+$prefix : 'ui-rc'!default;
+.popup-context-menu {
+  min-width: 200px;
+}
+
+.ui-rc-table-wrapper{
+&.table-none-column-select {
+  .#{$prefix}-table-cell {
+    &.#{$prefix}-table-selection-column {
+      padding: 0!important;
+      overflow: hidden !important;
+      border-inline-end: 0 !important;
+      //flex: 0 0 0 !important;
+      //width: 0 !important;
+    }
+  }
+}
+}
+
+//
+//.ui-rc-table-wrapper {
+//  &.table-none-column-select {
+//    .ui-rc-table-cell {
+//      &.ui-rc-table-selection-column {
+//        padding: 0!important;
+//        overflow: hidden !important;
+//      }
+//    }
+//  }
+//}

package/es/type.d.ts

@@ -0,0 +1,88 @@
+import type { TableProps, TableColumnType as RcColumnType } from "ui-rc";
+import type { Key, ReactElement, ReactNode } from "react";
+import type React from "react";
+import type { IOperator } from "./hooks";
+import type { FilterOperator, TableRowSelection } from "ui-rc/dist/table/interface";
+import type { ToolbarItem } from "ui-rc/dist/toolbar";
+import type { ItemType } from "ui-rc/dist/menu/interface";
+export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
+export type AnyObject = Record<PropertyKey, any>;
+export interface ColumnGroupType<RecordType = AnyObject> extends Omit<ColumnType<RecordType>, 'dataIndex'> {
+    children: ColumnsType<RecordType>;
+}
+export type ColumnType<RecordType> = RcColumnType<RecordType> & {
+    type?: IColumnType;
+    isSummary?: boolean;
+    summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
+    maxWidth?: string | number;
+    format?: IFormat;
+    allowFiltering?: boolean;
+    operator?: FilterOperator;
+    placeholder?: string;
+    showInColumnChoose?: boolean;
+};
+export type ColumnsType<RecordType = AnyObject> = (ColumnGroupType<RecordType> | ColumnType<RecordType>)[];
+export interface GridTableProps<RecordType> extends Omit<TableProps<RecordType>, 'columns' | 'rowSelection'> {
+    columns?: ColumnsType<RecordType>;
+    format?: IFormat;
+    t?: any;
+    lang?: string;
+    contextMenuItems?: any[];
+    contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
+    contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
+    contextMenuClick?: (args: ContextInfo<RecordType>) => void;
+    recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
+    toolbarItems?: ToolbarItem[];
+    showColumnChoose?: boolean;
+    onFilter?: (query: {
+        field: string;
+        key: string;
+        operator: IOperator;
+        predicate: 'and' | 'or';
+        value: any;
+    }[]) => void;
+    selectionSettings?: SelectionSettings;
+    rowKey?: string;
+    rowSelection?: RowSelection<RecordType>;
+    rowSelected?: (args: {
+        type: string;
+        rowData: RecordType;
+        selected: RecordType | RecordType[];
+    }) => void;
+}
+export type RowSelection<RecordType> = Omit<TableRowSelection<RecordType>, 'type' | 'columnWidth' | 'hideSelectAll' | 'defaultSelectedRowKeys'>;
+export type SelectionSettings = {
+    mode?: 'checkbox' | 'radio';
+    type?: 'single' | 'multiple';
+    checkboxOnly?: boolean;
+    hideSelectAll?: boolean;
+    columnWidth?: number | string;
+    defaultSelectedRowKeys?: Key[];
+};
+export type RecordDoubleClickEventArgs<RecordType> = {
+    rowData: RecordType;
+    rowIndex: number | undefined;
+    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+};
+export type ContextInfo<RecordType> = {
+    rowInfo: {
+        rowData: RecordType | null;
+    };
+    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+    item: ItemType;
+};
+export type IFormat = {
+    thousandSeparator?: string;
+    decimalSeparator?: string;
+    decimalScale?: number | undefined;
+    allowNegative?: boolean;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    fixedDecimalScale?: boolean;
+    dateFormat?: string;
+    datetimeFormat?: string;
+    timeFormat?: string;
+    weekFormat?: string;
+    monthFormat?: string;
+    yearFormat?: string;
+};

package/es/type.js

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

package/lib/CheckboxFilter.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { TableLocale } from "ui-rc/dist/table/interface";
+type Props = {
+    options: any[];
+    filterSearch?: boolean;
+    open?: boolean;
+    tablePrefixCls?: string;
+    prefixCls?: string;
+    dropdownPrefixCls?: string;
+    filterMultiple: boolean;
+    onSelect?: (value: any) => void;
+    selectedKeys: string[];
+    locale: TableLocale;
+    filterMode?: 'menu' | 'tree';
+    searchValue: string;
+    setSearchValue: (value: any) => void;
+};
+declare const CheckboxFilter: (props: Props) => React.JSX.Element;
+export default CheckboxFilter;