es-grid-template 1.2.1 → 1.2.2

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

@@ -494,400 +494,6 @@ export const getRowsPasteIndex = pasteRows => {
   const result = Array.from(pasteRows).map(item => parseInt(item.split("-")[0]));
   return [...new Set(result)];
 };
-
-// export const fff = [
-//   [1,'1998-11-03T18:20:45+07:00', "Fadel Groves", "C", true],
-// ]
-//
-// export const oooo = [
-//   [1,'1998-11-03T18:20:45+07:00', "Fadel Groves", "C", true],
-//   [1,'1998-11-04T18:20:45+07:00', "Fadel Groves", "C", true],
-//   [1,'1998-11-05T18:20:45+07:00', "Fadel Groves", "C", true],
-//   [1,'1998-11-06T18:20:45+07:00', "Fadel Groves", "C", true],
-// ]
-//
-// export const iii = [
-//   [1,'1998-11-03T18:20:45+07:00', "Fadel Groves", "C", true],
-//   [2,'1998-11-07T18:20:45+07:00', "Fahey Roads", "C", true],
-//   [3,'1998-11-19T18:20:45+07:00', "tess", "C", true],
-// ]
-//
-// export const jjj = [
-//   [1,'1998-11-03T18:20:45+07:00', "Fadel Groves", "C", true],
-//   [2,'1998-11-07T18:20:45+07:00', "Fahey Roads", "C", true],
-//   [3,'1998-11-19T18:20:45+07:00', "tess", "C", true],
-//
-//   [4,'1998-11-03T18:20:45+07:00', "Fadel Groves", "C", true],
-//   [5,'1998-11-07T18:20:45+07:00', "Fahey Roads", "C", true],
-//   [6,'1998-11-19T18:20:45+07:00', "tess", "C", true],
-// ]
-//
-//
-export const mmm = [[1, '1998-11-03T18:20:45+07:00', "Fadel Groves", "C", true], [3, '1998-11-04T18:20:45+07:00', "Fahey Roads", "C", true], [5, '1998-11-05T18:20:45+07:00', "tess", "C", true]];
-//
-// export const nnn = [
-//   [1,'1998-11-03T18:20:45+07:00', "Fadel Groves", "C", true],
-//   [2,'1998-11-04T18:20:45+07:00', "Fahey Roads", "C", true],
-//   [3,'1998-11-05T18:20:45+07:00', "tess", "C", true],
-//
-//   [4,'1998-11-06T18:20:45+07:00', "Fadel Groves", "C", true],
-//   [5,'1998-11-07T18:20:45+07:00', "Fahey Roads", "C", true],
-//   [6,'1998-11-08T18:20:45+07:00', "tess", "C", true],
-// ]
-
-export function cloneRows(array, numRows) {
-  const result = [...array]; // Sao chép mảng ban đầu
-
-  for (let i = 0; i < numRows; i++) {
-    const lastId = result[result.length - 1][0]; // Lấy ID cuối cùng hiện có
-
-    for (let j = 0; j < array.length - 1; j++) {
-      // Nhân bản trừ dòng cuối
-      const newRow = [lastId + j + 1, array[j][1]]; // Tăng ID và giữ nguyên giá trị cột 2
-      result.push(newRow);
-    }
-  }
-  return result;
-}
-export function addRows1(arr, n) {
-  // const newArr = [...arr]; // Sao chép mảng gốc để không sửa đổi trực tiếp
-  // const baseIndex = arr[arr.length - 1][0]; // Lấy chỉ mục cuối cùng
-  //
-  // for (let i = 0; i < n; i++) {
-  //   const newIndex = baseIndex + 1 + i;
-  //   const newRow = [newIndex, ...arr[i % arr.length].slice(1)]; // Lặp lại các phần tử còn lại theo vòng tròn
-  //   newArr.push(newRow);
-  // }
-  //
-  // return newArr;
-
-  const newArr = [...arr]; // Sao chép mảng gốc để không sửa đổi trực tiếp
-
-  if (arr.length === 1) {
-    // Nếu chỉ có một phần tử, lặp lại phần tử đó n lần
-    for (let i = 0; i < n; i++) {
-      newArr.push([...arr[0]]);
-    }
-  } else {
-    const baseIndex = arr[arr.length - 1][0]; // Lấy chỉ mục cuối cùng
-
-    for (let i = 0; i < n; i++) {
-      const newIndex = baseIndex + 1 + i;
-      const newRow = [newIndex, ...arr[i % arr.length].slice(1)]; // Lặp lại các phần tử còn lại theo vòng tròn
-      newArr.push(newRow);
-    }
-  }
-  return newArr;
-}
-export function addRows2(arr, n) {
-  const newArr = [...arr]; // Sao chép mảng gốc để không sửa đổi trực tiếp
-  const addedRows = [];
-  if (arr.length === 1) {
-    // Nếu chỉ có một phần tử, lặp lại phần tử đó n lần
-    for (let i = 0; i < n; i++) {
-      newArr.push([...arr[0]]);
-      addedRows.push([...arr[0]]);
-    }
-  } else {
-    const differences = [];
-    for (let i = 1; i < arr.length; i++) {
-      differences.push(arr[i][0] - arr[i - 1][0]);
-    }
-    const step = differences.reduce((a, b) => a + b, 0) / differences.length; // Tính khoảng cách trung bình
-
-    for (let i = 0; i < n; i++) {
-      const newIndex = newArr[newArr.length - 1][0] + step;
-      const newRow = [newIndex, ...arr[i % arr.length].slice(1)]; // Lặp lại nội dung theo vòng tròn
-      newArr.push(newRow);
-      addedRows.push(newRow);
-    }
-  }
-  return {
-    newArr,
-    addedRows
-  };
-}
-export function addRows(arr, n) {
-  const newArr = [...arr]; // Sao chép mảng gốc để không sửa đổi trực tiếp
-  const addedRows = [];
-  if (arr.length === 1) {
-    for (let i = 0; i < n; i++) {
-      newArr.push([...arr[0]]);
-      addedRows.push([...arr[0]]);
-    }
-  } else {
-    const diffs = arr[0].map((_, colIndex) => {
-      if (typeof arr[0][colIndex] === 'number') {
-        return arr[1][colIndex] - arr[0][colIndex];
-      } else if (!isNaN(Date.parse(arr[0][colIndex]))) {
-        console.log('Date.parse(arr[0][colIndex])', Date.parse(arr[0][colIndex]));
-        console.log('arr[0][colIndex]', arr[0][colIndex]);
-        // @ts-ignore
-        return new Date(arr[1][colIndex]) - new Date(arr[0][colIndex]);
-      }
-      return null;
-    });
-    console.log('diffs', diffs);
-    for (let i = 0; i < n; i++) {
-      const lastRow = [...newArr[newArr.length - 1]];
-      const newRow = lastRow.map((value, colIndex) => {
-        if (typeof value === 'number' && diffs[colIndex] !== null) {
-          return value + diffs[colIndex];
-        } else if (!isNaN(Date.parse(value)) && diffs[colIndex] !== null) {
-          const lastDate = new Date(value);
-          return moment(new Date(lastDate.getTime() + diffs[colIndex])).format();
-        } else return arr[i % arr.length][colIndex]; // Lặp lại nội dung theo vòng tròn
-        // arr[i % arr.length].slice(1)
-        // return value;
-      });
-      newArr.push(newRow);
-      addedRows.push(newRow);
-    }
-  }
-  return {
-    newArr,
-    addedRows
-  };
-}
-export function addRows4(arr, n) {
-  const newArr = [...arr]; // Sao chép mảng gốc để không sửa đổi trực tiếp
-  const addedRows = [];
-  if (arr.length === 1) {
-    for (let i = 0; i < n; i++) {
-      newArr.push([...arr[0]]);
-      addedRows.push([...arr[0]]);
-    }
-  } else {
-    const diffs = arr[0].map((_, colIndex) => {
-      if (typeof arr[0][colIndex] === 'number') {
-        return arr[1][colIndex] - arr[0][colIndex];
-      } else if (!isNaN(Date.parse(arr[0][colIndex]))) {
-        // @ts-ignore
-        return new Date(arr[1][colIndex]) - new Date(arr[0][colIndex]);
-      }
-      return null;
-    });
-    for (let i = 0; i < n; i++) {
-      const lastRow = [...newArr[newArr.length - 1]];
-      const newRow = lastRow.map((value, colIndex) => {
-        if (typeof value === 'number' && diffs[colIndex] !== null) {
-          return value + diffs[colIndex];
-        } else if (!isNaN(Date.parse(value)) && diffs[colIndex] !== null) {
-          const lastDate = new Date(value);
-          return new Date(lastDate.getTime() + diffs[colIndex]).toISOString();
-        } else if (typeof value === 'string') {
-          return arr[(i + 1) % arr.length][colIndex]; // Lặp lại nội dung theo vòng tròn
-        }
-        return value;
-      });
-      newArr.push(newRow);
-      addedRows.push(newRow);
-    }
-  }
-  return {
-    newArr,
-    addedRows
-  };
-}
-export function addRows6(arr, n) {
-  // const newArr = [...arr]; // Sao chép mảng gốc để không sửa đổi trực tiếp
-  // const addedRows = [];
-  //
-  // if (arr.length === 1) {
-  //   for (let i = 0; i < n; i++) {
-  //     newArr.push([...arr[0]]);
-  //     addedRows.push([...arr[0]]);
-  //   }
-  // } else {
-  //   const diffs = arr[0].map((_: any, colIndex: number) => {
-  //     if (typeof arr[0][colIndex] === 'number') {
-  //       return arr[1][colIndex] - arr[0][colIndex];
-  //     } else if (!isNaN(Date.parse(arr[0][colIndex])) && arr.length === 2) {
-  //       // @ts-ignore
-  //       return new Date(arr[1][colIndex]) - new Date(arr[0][colIndex]);
-  //     }
-  //     return null;
-  //   });
-  //
-  //   for (let i = 0; i < n; i++) {
-  //     const lastRow = [...newArr[newArr.length - 1]];
-  //
-  //     const newRow = lastRow.map((value, colIndex) => {
-  //       if (typeof value === 'number' && diffs[colIndex] !== null) {
-  //         return value + diffs[colIndex];
-  //       } else if (!isNaN(Date.parse(value))) {
-  //         if (arr.length > 2) {
-  //           return arr[(i) % arr.length][colIndex]; // Lặp lại nội dung theo vòng tròn
-  //         } else if (diffs[colIndex] !== null) {
-  //           const lastDate = new Date(value);
-  //           return new Date(lastDate.getTime() + diffs[colIndex]).toISOString();
-  //         }
-  //       } else if (typeof value === 'string') {
-  //         return arr[(i) % arr.length][colIndex]; // Lặp lại nội dung theo vòng tròn
-  //       }
-  //       return value;
-  //     });
-  //
-  //     newArr.push(newRow);
-  //     addedRows.push(newRow);
-  //   }
-  // }
-  //
-  // return { newArr, addedRows };
-
-  const newArr = [...arr]; // Sao chép mảng gốc để không sửa đổi trực tiếp
-  const addedRows = [];
-  if (arr.length === 1) {
-    for (let i = 0; i < n; i++) {
-      newArr.push([...arr[0]]);
-      addedRows.push([...arr[0]]);
-    }
-  } else {
-    const diffs = arr[0].map((_, colIndex) => {
-      if (typeof arr[0][colIndex] === 'number') {
-        return arr[1][colIndex] - arr[0][colIndex];
-      } else if (!isNaN(Date.parse(arr[0][colIndex]))) {
-        // @ts-ignore
-        const dateDiffs = arr.slice(1).map((row, i) => new Date(row[colIndex]) - new Date(arr[i][colIndex]));
-        const avgDiff = dateDiffs.reduce((a, b) => a + b, 0) / dateDiffs.length;
-        return avgDiff || null;
-      }
-      return null;
-    });
-    for (let i = 0; i < n; i++) {
-      const lastRow = [...newArr[newArr.length - 1]];
-      const newRow = lastRow.map((value, colIndex) => {
-        if (typeof value === 'number' && diffs[colIndex] !== null) {
-          return value + diffs[colIndex];
-        } else if (!isNaN(Date.parse(value)) && diffs[colIndex] !== null) {
-          const lastDate = new Date(value);
-          return new Date(lastDate.getTime() + diffs[colIndex]).toISOString();
-        } else {
-          return arr[i % arr.length][colIndex]; // Lặp lại nội dung theo vòng tròn
-        }
-      });
-      newArr.push(newRow);
-      addedRows.push(newRow);
-    }
-  }
-  return {
-    newArr,
-    addedRows
-  };
-}
-export function addRows7(arr, n) {
-  if (!Array.isArray(arr) || arr.length === 0) return arr;
-  const m = arr.length;
-  const numCols = arr[0].length;
-  const newRows = [];
-
-  // Hàm kiểm tra kiểu date hợp lệ
-  const isValidDate = d => {
-    return !isNaN(Date.parse(d));
-  };
-
-  // Lấy giá trị mẫu của cột j từ hàng i (i thuộc [0, m-1])
-  const getSample = j => arr[0][j];
-
-  // Xác định cho mỗi cột chế độ xử lý:
-  // mode = 'number-stepping' | 'date-stepping' | 'cycle'
-  const modes = [];
-  const steps = []; // bước tăng, nếu có (cho number hoặc date)
-
-  for (let j = 0; j < numCols; j++) {
-    const sample = getSample(j);
-    if (m === 1) {
-      // Nếu mảng chỉ có 1 hàng: nếu là số thì giữ nguyên; nếu là date thì tăng 1 ngày; còn lại giữ nguyên.
-      if (typeof sample === "number") {
-        modes[j] = "number-constant";
-      } else if (isValidDate(sample)) {
-        modes[j] = "date-stepping";
-        steps[j] = 24 * 3600 * 1000; // 1 ngày = 86400000 ms
-      } else {
-        modes[j] = "cycle";
-      }
-    } else if (m === 2) {
-      // Nếu mảng có 2 hàng: nếu là số thì tính bước = row2 - row1, tương tự với date
-      const first = arr[0][j],
-        second = arr[1][j];
-      if (typeof first === "number" && typeof second === "number") {
-        modes[j] = "number-stepping";
-        steps[j] = second - first;
-      } else if (isValidDate(first) && isValidDate(second)) {
-        modes[j] = "date-stepping";
-        steps[j] = Date.parse(second) - Date.parse(first);
-      } else {
-        modes[j] = "cycle";
-      }
-    } else {
-      // mảng có >2 hàng
-      const first = arr[0][j],
-        second = arr[1][j],
-        third = arr[2][j];
-      if (typeof first === "number" && typeof second === "number" && typeof third === "number") {
-        const step1 = second - first;
-        const step2 = third - second;
-        if (step1 === step2) {
-          modes[j] = "number-stepping";
-          steps[j] = step1;
-        } else {
-          modes[j] = "cycle";
-        }
-      } else if (isValidDate(first) && isValidDate(second) && isValidDate(third)) {
-        const step1 = Date.parse(second) - Date.parse(first);
-        const step2 = Date.parse(third) - Date.parse(second);
-        if (step1 === step2) {
-          modes[j] = "date-stepping";
-          steps[j] = step1;
-        } else {
-          modes[j] = "cycle";
-        }
-      } else {
-        modes[j] = "cycle";
-      }
-    }
-  }
-
-  // Tạo các dòng mới (thêm n dòng)
-  // Với mỗi cột, nếu chế độ là stepping thì lấy giá trị cuối của mảng ban đầu, cộng thêm (i+1)*step
-  // Nếu chế độ là cycle thì dùng arr[i mod m][j]
-  for (let i = 0; i < n; i++) {
-    const newRow = [];
-    for (let j = 0; j < numCols; j++) {
-      let newValue;
-      switch (modes[j]) {
-        case "number-constant":
-          // mảng có 1 hàng, số giữ nguyên
-          newValue = arr[0][j];
-          break;
-        case "number-stepping":
-          {
-            // lấy giá trị cuối của cột j trong mảng ban đầu
-            const lastValue = arr[m - 1][j];
-            newValue = lastValue + (i + 1) * steps[j];
-          }
-          break;
-        case "date-stepping":
-          {
-            // lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, convert về ISO string giữ định dạng ban đầu (nếu cần giữ định dạng như cũ)
-            const lastDate = new Date(arr[m - 1][j]);
-            const newTime = lastDate.getTime() + (i + 1) * steps[j];
-            // Giữ định dạng ISO với timezone tương tự nếu cần.
-            newValue = new Date(newTime).toISOString();
-          }
-          break;
-        case "cycle":
-        default:
-          // Lặp lại nội dung theo vòng tròn: dùng hàng thứ (i mod m)
-          newValue = arr[i % m][j];
-          break;
-      }
-      newRow.push(newValue);
-    }
-    newRows.push(newRow);
-  }
-  return arr.concat(newRows);
-}
 export function addRows8(arr, n) {
   if (!Array.isArray(arr) || arr.length === 0) return {
     combined: arr,
@@ -1025,7 +631,7 @@ export const transformColumns = (cols, convertColumns, t) => {
       return {
         ...column,
         key: column.field ?? column.dataIndex ?? column.key,
-        title: t ? t(column.headerText ?? column.title) : column.headerText ?? column.title,
+        title: t ? t(column.headerText) : column.headerText,
         ellipsis: column.ellipsis !== false,
         align: column.textAlign ?? column.align,
         children: transformColumns(column.children, convertColumns)
@@ -1084,8 +690,6 @@ export const transformColumns1 = (cols, sortMultiple) => {
 };
 export const removeColumns = (columns, groupColumns) => {
   const ttt = [...columns];
-
-  // @ts-ignore
   return ttt.filter(column => !groupColumns.includes(column.field)).map(column => {
     const newCol = {
       ...column
@@ -1107,16 +711,4 @@ export const convertFlatColumn = array => {
     }
   });
   return result;
-};
-
-// export const getColumnsByKeys = (columns: ColumnsTable, keys: string[]) => {
-//   if (!columns || !keys) {
-//     return[]
-//   }
-//
-//   return flatColumns2(columns).filter((column) => keys.includes(column.field as string)).map((it) => {
-//     return {...it, value: it.field, label: it.headerText}
-//   })
-//
-//
-// }
+};

package/es/grid-component/styles.scss

@@ -36,6 +36,13 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     margin: 0;
   }
 
+  .ui-rc-table {
+    //font-family: $fontFamily;
+    color: #000000de;
+    //font-weight: 500;
+  }
+
+
 
   &.table-none-column-select {
     .#{$prefix}-table-cell {
@@ -178,12 +185,14 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
   }
 
   .#{$prefix}-table-thead {
+    //font-weight: 400;
 
     > tr {
       > th,
       > td {
         border-bottom: 1px solid $tableBorderColor;
-        background: #fff;
+        //background: #fff;
+        font-weight: 500;
       }
     }
 
@@ -326,6 +335,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       overflow: unset;
 
       display: flex;
+      //--------
       padding: 0;
 
       .#{$prefix}-table-row-expand-icon {
@@ -342,14 +352,26 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
           border-bottom: 1px solid $border-selected-color;
         }
 
+        &.cell-paste-border-bottom {
+          border-bottom: 1px dashed #949494;
+        }
+
         &.cell-border-left {
           border-inline-end: 1px solid $border-selected-color;
         }
 
+        &.cell-paste-border-left {
+          border-inline-end: 1px dashed #949494;
+        }
+
         &.cell-border-right {
           border-inline-end: 1px solid $border-selected-color;
         }
 
+        &.cell-paste-border-right {
+          border-inline-end: 1px dashed #949494;
+        }
+
         &.#{$prefix}-table-cell-fix-left {
           &:has(.ui-rc_cell-content.selected) {
           }
@@ -383,11 +405,23 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
             }
           }
 
+
+          &.next-cell-paste-border-left {
+            &::before {
+              border-inline-start: 1px dashed #949494;
+            }
+          }
+
           &.fixed-cell-border-left {
             &::before {
               border-inline-start: 1px solid $border-selected-color;
             }
           }
+          &.fixed-cell-paste-border-left {
+            &::before {
+              border-inline-start: 1px dashed #949494;
+            }
+          }
 
         }
 
@@ -493,14 +527,16 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     .#{$prefix}-table.#{$prefix}-table-small {
       .#{$prefix}-table-selection-column{
         //padding: 8px 8px;
+        padding: 6px 8px;
       }
     }
 
     .ui-rc_cell-content {
       //position: relative;
       user-select: none;
-      padding: 8px 8px;
-      min-height: 23px;
+      //padding: 8px 8px;
+      padding: 7px 8px;
+      //min-height: 23px;
       overflow: hidden;
 
       .ui-rc_content {
@@ -520,6 +556,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         cursor: crosshair;
         right: 0;
         bottom: 0;
+        //background: red;
 
         .dot-point {
           position: absolute;
@@ -627,7 +664,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         }
 
         &.cell-editing {
-          padding: 0 !important;
+          //padding: 0 !important;
           &:focus-visible {
             outline: none;
           }
@@ -965,7 +1002,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     tfoot > tr > th,
     tfoot > tr > td {
       //padding: 8px 8px;
-      font-size: 13px;
+      //font-size: 13px;
     }
   }
 }
@@ -1004,3 +1041,23 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after {
   border-inline-end: 1px solid $tableBorderColor;
 }
+
+
+// toolbar
+
+.ui-rc-toolbar-bottom {
+  .be-toolbar-item {
+    .toolbar-dropdown-button {
+      .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
+        border-color: #28c76f;
+      }
+      .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
+        border-color: #28c76f;
+        .ant-btn-icon {
+          color: #28c76f;
+        }
+      }
+    }
+
+  }
+}

package/es/grid-component/table/Grid.js

@@ -4,6 +4,9 @@ import { GridStyle } from "../GridStyle";
 import TableGrid from "../TableGrid";
 // import type {ColumnsTable} from "../type";
 
+import { ConfigProvider } from "rc-master-ui";
+// import {ConfigProvider} from "antd";
+
 const Grid = props => {
   const {
     height,
@@ -15,9 +18,22 @@ const Grid = props => {
     style: {
       position: 'relative'
     }
+  }, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619',
+          cellFontSize: 12,
+          cellFontSizeSM: 13,
+          headerBg: '#ffffff'
+        }
+      }
+    }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     // style={{...style, minHeight: height}}
     rowHoverable: rowHoverable ?? true
-  }))));
+  })))));
 };
 export default Grid;