es-grid-template 0.0.4 → 0.0.7

package/lib/hooks/constant.d.ts

@@ -0,0 +1,48 @@
+export declare const defaultWidth: number;
+export declare const defaultRowHeight: number;
+export type IOperator = {
+    value: string;
+    label: string;
+    key: string;
+};
+export declare const numberOperator: IOperator[];
+export declare const stringOperator: IOperator[];
+export declare const dateOperator: IOperator[];
+export declare const dateTimeOperator: IOperator[];
+export declare const booleanOperator: IOperator[];
+export declare const translateOption: (options: IOperator[], t: any) => any[];
+export declare const transferFontSize: any;
+export declare const defaultDateFormat = "d/m/Y";
+export declare const defaultDateTimeFormat = "d/m/Y H:i";
+export declare const defaultTimeFormat = "H:i";
+export declare const defaultPageSizes: number[];
+export declare const alignToFlex: any;
+export declare const optionsSize: {
+    label: string;
+    value: string;
+    width: number;
+    height: number;
+}[];
+export declare const paperSize: {
+    a4: {
+        width: number;
+        height: number;
+    };
+    a3: {
+        width: number;
+        height: number;
+    };
+    letter: {
+        width: number;
+        height: number;
+    };
+};
+export declare const optionFont: {
+    value: string;
+    label: string;
+}[];
+export declare const optionsPaperOrientation: any[];
+export declare const optionFontSize: {
+    value: number;
+    label: string;
+}[];

package/lib/hooks/constant.js

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translateOption = exports.transferFontSize = exports.stringOperator = exports.paperSize = exports.optionsSize = exports.optionsPaperOrientation = exports.optionFontSize = exports.optionFont = exports.numberOperator = exports.defaultWidth = exports.defaultTimeFormat = exports.defaultRowHeight = exports.defaultPageSizes = exports.defaultDateTimeFormat = exports.defaultDateFormat = exports.dateTimeOperator = exports.dateOperator = exports.booleanOperator = exports.alignToFlex = void 0;
+const defaultWidth = exports.defaultWidth = 100;
+const defaultRowHeight = exports.defaultRowHeight = 35;
+const numberOperator = exports.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: '!='
+}];
+const stringOperator = exports.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'
+}];
+const dateOperator = exports.dateOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not Equal'
+}, {
+  value: 'greaterthan',
+  key: '>',
+  label: 'Greater Than'
+}, {
+  value: 'lessthan',
+  key: '<',
+  label: 'Less Than'
+}];
+const dateTimeOperator = exports.dateTimeOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not Equal'
+}, {
+  value: 'greaterthan',
+  key: '>',
+  label: 'Greater Than'
+}, {
+  value: 'lessthan',
+  key: '<',
+  label: 'Less Than'
+}];
+const booleanOperator = exports.booleanOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not Equal'
+}];
+const translateOption = (options, t) => {
+  if (!t) {
+    return options;
+  }
+  return options.map(it => ({
+    ...it,
+    label: t(it.label)
+  }));
+};
+exports.translateOption = translateOption;
+const transferFontSize = exports.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
+};
+const defaultDateFormat = exports.defaultDateFormat = 'd/m/Y';
+const defaultDateTimeFormat = exports.defaultDateTimeFormat = 'd/m/Y H:i';
+const defaultTimeFormat = exports.defaultTimeFormat = 'H:i';
+const defaultPageSizes = exports.defaultPageSizes = [20, 30, 50, 100];
+const alignToFlex = exports.alignToFlex = {
+  center: 'center',
+  left: 'start',
+  right: 'end'
+};
+const optionsSize = exports.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
+}];
+const paperSize = exports.paperSize = {
+  a4: {
+    width: 21,
+    height: 29.7
+  },
+  a3: {
+    width: 27.94,
+    height: 42
+  },
+  letter: {
+    width: 21.59,
+    height: 27.94
+  }
+};
+const optionFont = exports.optionFont = [{
+  value: 'Times New Roman',
+  label: 'Times New Roman'
+}, {
+  value: 'Calibri',
+  label: 'Calibri (Body)'
+}];
+// portrait' | 'landscape'
+const optionsPaperOrientation = exports.optionsPaperOrientation = [{
+  value: 'portrait',
+  label: 'portrait'
+}, {
+  value: 'landscape',
+  label: 'landscape'
+}];
+const optionFontSize = exports.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/lib/hooks/index.d.ts

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

package/lib/hooks/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _constant = require("./constant");
+Object.keys(_constant).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _constant[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _constant[key];
+    }
+  });
+});
+var _useIsOverflow = require("./useIsOverflow");
+Object.keys(_useIsOverflow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useIsOverflow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useIsOverflow[key];
+    }
+  });
+});
+var _useOnClickOutside = require("./useOnClickOutside");
+Object.keys(_useOnClickOutside).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useOnClickOutside[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useOnClickOutside[key];
+    }
+  });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});

package/lib/hooks/useColumns/index.d.ts

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

package/lib/hooks/useColumns/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flatColumns = flatColumns;
+// import * as React from 'react'
+
+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/lib/hooks/useIsOverflow.d.ts

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

package/lib/hooks/useIsOverflow.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsOverflow = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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;
+};
+exports.useIsOverflow = useIsOverflow;

package/lib/hooks/useOnClickOutside.d.ts

@@ -0,0 +1 @@
+export declare const useOnClickOutside: (ref: any, handler: any) => void;

package/lib/hooks/useOnClickOutside.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnClickOutside = void 0;
+var _react = require("react");
+//** React Imports
+
+const useOnClickOutside = (ref, handler) => {
+  (0, _react.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]);
+};
+exports.useOnClickOutside = useOnClickOutside;

package/lib/hooks/utils.d.ts

@@ -0,0 +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;
+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;
+export declare const isNameColor: (strColor: string) => boolean;
+export declare const isColor: (value: string) => boolean;
+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/lib/hooks/utils.js

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDatepickerFormat = exports.getAllVisibleKeys = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.checkThousandSeparator = exports.checkDecimalSeparator = void 0;
+exports.getHiddenParentKeys = getHiddenParentKeys;
+exports.updateColumns = exports.sumDataByField = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isColor = exports.getVisibleColumnKeys = exports.getTypeFilter = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+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;
+  }
+};
+exports.sumDataByField = sumDataByField;
+const checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
+  if (thousandSeparator) {
+    if (decimalSeparator) {
+      if (thousandSeparator === decimalSeparator) {
+        return ',';
+      } else {
+        return thousandSeparator;
+      }
+    } else {
+      return thousandSeparator;
+    }
+  } else {
+    return undefined;
+  }
+};
+exports.checkThousandSeparator = checkThousandSeparator;
+const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
+  if (decimalSeparator) {
+    if (thousandSeparator) {
+      if (thousandSeparator === decimalSeparator) {
+        return '.';
+      } else {
+        return decimalSeparator;
+      }
+    } else {
+      return decimalSeparator;
+    }
+  } else {
+    if (thousandSeparator && thousandSeparator === '.') {
+      return ',';
+    }
+    return '.';
+  }
+};
+exports.checkDecimalSeparator = checkDecimalSeparator;
+const isEmpty = d => {
+  if (d === null || d === undefined || d === '') {
+    return true;
+  }
+  return false;
+};
+exports.isEmpty = isEmpty;
+const isNullOrUndefined = d => {
+  if (d === null || d === undefined) {
+    return true;
+  }
+  return false;
+};
+exports.isNullOrUndefined = isNullOrUndefined;
+const convertDayjsToDate = (dateString, format) => {
+  const dayjsDate = (0, _dayjs.default)(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
+};
+exports.convertDayjsToDate = convertDayjsToDate;
+const convertDateToDayjs = (date, format) => {
+  const dateValue = date ? (0, _dayjs.default)(date).format(format) : null;
+  return dateValue ? (0, _dayjs.default)(dateValue, format) : null;
+};
+exports.convertDateToDayjs = convertDateToDayjs;
+const isNameColor = strColor => {
+  const s = new Option().style;
+  s.color = strColor;
+  return s.color === strColor;
+};
+exports.isNameColor = isNameColor;
+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);
+};
+exports.isColor = isColor;
+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;
+};
+exports.getAllVisibleKeys = getAllVisibleKeys;
+const getVisibleColumnKeys = columns => {
+  const allKeys = getAllVisibleKeys(columns);
+  const allParentKeys = getHiddenParentKeys(columns);
+  const rs = allKeys.filter(item => !allParentKeys.includes(item));
+  return rs;
+};
+exports.getVisibleColumnKeys = getVisibleColumnKeys;
+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);
+}
+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;
+  });
+};
+exports.updateColumns = updateColumns;
+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;
+  }
+};
+exports.getDatepickerFormat = getDatepickerFormat;
+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';
+  }
+};
+exports.getTypeFilter = getTypeFilter;

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _GridTable = _interopRequireDefault(require("./GridTable"));
+var _default = exports.default = _GridTable.default;