es-grid-template 1.4.7 → 1.4.8

package/es/grid-component/InternalTable.js

@@ -21,7 +21,7 @@ import withReactContent from "sweetalert2-react-content";
 import { Tooltip } from "react-tooltip";
 import classNames from "classnames";
 import HeaderContent from "./hooks/content/HeaderContent";
-import { ArrowDown, ArrowUp, FilterFill } from "becoxy-icons";
+import { ArrowDown, ArrowUp, FilterFill, SortCancel } from "becoxy-icons";
 import { Select } from "rc-master-ui";
 import { Button, Space } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
@@ -223,17 +223,17 @@ const InternalTable = props => {
   }, [dataSource]);
   const [columns, setColumns] = React.useState([]);
   React.useEffect(() => {
-    // setTimeout(() => {
-    const table = document.querySelector(`#${id}`);
-    const title = table?.querySelector(`.ui-rc-table-title`);
-    const header = table?.querySelector(`.ui-rc-table-header`);
-    const paginationE = table?.querySelector(`.ui-rc-pagination`);
-    const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
-    const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-    const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
-    const hhh = (propsHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
-    setHeight(hhh);
-    // })
+    if (propsHeight) {
+      const table = document.querySelector(`#${id}`);
+      const title = table?.querySelector(`.ui-rc-table-title`);
+      const header = table?.querySelector(`.ui-rc-table-header`);
+      const paginationE = table?.querySelector(`.ui-rc-pagination`);
+      const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
+      const summaryE = table?.querySelector(`.ui-rc-table-summary`);
+      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
+      const hhh = (propsHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+      setHeight(hhh > 0 ? hhh : 0);
+    }
   }, [id, propsHeight, columns, editAble]);
   const tableRef = React.useRef(null);
   React.useEffect(() => {
@@ -382,7 +382,8 @@ const InternalTable = props => {
           column: {
             ...column
           },
-          t: t
+          t: t,
+          id: id
         })),
         ellipsis: column.ellipsis !== false,
         align: column.textAlign ?? column.align,
@@ -440,7 +441,7 @@ const InternalTable = props => {
           const {
             sortOrder
           } = args;
-          return /*#__PURE__*/React.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(ArrowUp, {
+          return /*#__PURE__*/React.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(SortCancel, {
             fontSize: 15,
             style: {
               display: 'flex',
@@ -846,10 +847,14 @@ const InternalTable = props => {
     // scroll={{ y: 300 - 41 - 7 }} // scroll height auto, không quá  600
     // scroll={{ y: scrollHeight - (summary ? 0 : 7) }} // scroll height auto, không quá  600
     ,
-    scroll: {
+
+    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
+      y: 500
+    } : {
       y: scrollHeight - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
     ,
+
     height: propsHeight,
     scrollHeight: scrollHeight,
     components: {
@@ -873,12 +878,12 @@ const InternalTable = props => {
       fontWeight: 500
     }
   }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/React.createElement(Tooltip, {
-    id: "tooltip-form-error",
+    id: `${id}-tooltip-form-error`,
     style: {
       zIndex: 1999
     }
   }), /*#__PURE__*/React.createElement(Tooltip, {
-    id: "tooltip-cell-content",
+    id: `${id}-tooltip-cell-content`,
     style: {
       zIndex: 1999
     },

package/es/grid-component/TableGrid.js

@@ -131,6 +131,7 @@ const useStyle = createStyles(({
 const EMPTY_LIST = [];
 const TableGrid = props => {
   const {
+    id,
     columns,
     tableRef,
     dataSource,
@@ -517,7 +518,7 @@ const TableGrid = props => {
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination)), bottomToolbar?.(), /*#__PURE__*/React.createElement(Tooltip, {
-    id: "tooltip-header",
+    id: `${id}-tooltip-header`,
     style: {
       zIndex: 1999
     }

package/es/grid-component/hooks/content/HeaderContent.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import type { ColumnTable } from "../../type";
 type Props = {
     t?: any;
+    id?: string;
     content?: string;
     column?: ColumnTable;
     template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);

package/es/grid-component/hooks/content/HeaderContent.js

@@ -1,23 +1,10 @@
 import React, { Fragment } from "react";
 import classnames from "classnames";
-
-// import styled from "styled-components";
 import { getTemplate } from "../utils";
-// const TooltipStyle = styled.div`
-//   width: max-content;
-//   background-color: #444;
-//   color: white;
-//   font-size: 90%;
-//   padding: 4px 8px;
-//   border-radius: 4px;
-//   opacity: 0.9;
-//   z-index: 9999;
-//   max-width: 450px;
-// `
-
 const HeaderContent = props => {
   const {
-    t
+    t,
+    id
   } = props;
   const {
     headerTooltip,
@@ -31,43 +18,9 @@ const HeaderContent = props => {
   const tooltip = React.useMemo(() => {
     return headerTooltip ?? t ? t(columnGroupText ?? headerText) : columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip, t]);
-  //
-  //
-  // const [isOpen, setIsOpen] = useState(false)
-  //
-  // const { refs, floatingStyles, context } = useFloating({
-  //   open: isOpen,
-  //   onOpenChange: setIsOpen,
-  //   placement: "top",
-  //   whileElementsMounted: autoUpdate,
-  //   middleware: [
-  //     offset(5),
-  //     flip({
-  //       fallbackAxisSideDirection: "start"
-  //     }),
-  //     shift()
-  //   ]
-  // })
-  //
-  // const hover = useHover(context, { move: false })
-  // const focus = useFocus(context)
-  // const dismiss = useDismiss(context)
-  // const role = useRole(context, { role: "tooltip" })
-  //
-  // const { getReferenceProps, getFloatingProps } = useInteractions([
-  //   hover,
-  //   focus,
-  //   dismiss,
-  //   role
-  // ])
-
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    // ref={refs.setReference}
-    // tabIndex={-1}
-    // style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'keep-all'}}
-    // style={{flex: 1}}
     className: classnames('', {}),
-    "data-tooltip-id": "tooltip-header",
+    "data-tooltip-id": `${id}-tooltip-header`,
     "data-tooltip-content": tooltip,
     "data-tooltip-offset": 16
   }, headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text));

package/es/grid-component/styles.scss

@@ -294,6 +294,16 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
     .#{$prefix}-table-cell {
 
+      .ui-rc-table-column-sorter{
+        line-height: normal !important;
+      }
+
+      &:hover {
+        .ui-rc-table-column-sorter-up.active {
+          opacity: 1 !important;
+        }
+      }
+
       .ui-rc-table-cell-content {
         line-height: 22px;
       }

package/lib/grid-component/InternalTable.js

@@ -234,17 +234,17 @@ const InternalTable = props => {
   }, [dataSource]);
   const [columns, setColumns] = _react.default.useState([]);
   _react.default.useEffect(() => {
-    // setTimeout(() => {
-    const table = document.querySelector(`#${id}`);
-    const title = table?.querySelector(`.ui-rc-table-title`);
-    const header = table?.querySelector(`.ui-rc-table-header`);
-    const paginationE = table?.querySelector(`.ui-rc-pagination`);
-    const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
-    const summaryE = table?.querySelector(`.ui-rc-table-summary`);
-    const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
-    const hhh = (propsHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
-    setHeight(hhh);
-    // })
+    if (propsHeight) {
+      const table = document.querySelector(`#${id}`);
+      const title = table?.querySelector(`.ui-rc-table-title`);
+      const header = table?.querySelector(`.ui-rc-table-header`);
+      const paginationE = table?.querySelector(`.ui-rc-pagination`);
+      const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
+      const summaryE = table?.querySelector(`.ui-rc-table-summary`);
+      const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
+      const hhh = (propsHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+      setHeight(hhh > 0 ? hhh : 0);
+    }
   }, [id, propsHeight, columns, editAble]);
   const tableRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
@@ -393,7 +393,8 @@ const InternalTable = props => {
           column: {
             ...column
           },
-          t: t
+          t: t,
+          id: id
         })),
         ellipsis: column.ellipsis !== false,
         align: column.textAlign ?? column.align,
@@ -451,7 +452,7 @@ const InternalTable = props => {
           const {
             sortOrder
           } = args;
-          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !sortOrder && /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowUp, {
+          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !sortOrder && /*#__PURE__*/_react.default.createElement(_becoxyIcons.SortCancel, {
             fontSize: 15,
             style: {
               display: 'flex',
@@ -857,10 +858,14 @@ const InternalTable = props => {
     // scroll={{ y: 300 - 41 - 7 }} // scroll height auto, không quá  600
     // scroll={{ y: scrollHeight - (summary ? 0 : 7) }} // scroll height auto, không quá  600
     ,
-    scroll: {
+
+    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
+      y: 500
+    } : {
       y: scrollHeight - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
     ,
+
     height: propsHeight,
     scrollHeight: scrollHeight,
     components: {
@@ -884,12 +889,12 @@ const InternalTable = props => {
       fontWeight: 500
     }
   }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
-    id: "tooltip-form-error",
+    id: `${id}-tooltip-form-error`,
     style: {
       zIndex: 1999
     }
   }), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
-    id: "tooltip-cell-content",
+    id: `${id}-tooltip-cell-content`,
     style: {
       zIndex: 1999
     },

package/lib/grid-component/TableGrid.js

@@ -131,6 +131,7 @@ const useStyle = (0, _antdStyle.createStyles)(({
 const EMPTY_LIST = [];
 const TableGrid = props => {
   const {
+    id,
     columns,
     tableRef,
     dataSource,
@@ -517,7 +518,7 @@ const TableGrid = props => {
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination)), bottomToolbar?.(), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
-    id: "tooltip-header",
+    id: `${id}-tooltip-header`,
     style: {
       zIndex: 1999
     }

package/lib/grid-component/hooks/content/HeaderContent.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import type { ColumnTable } from "../../type";
 type Props = {
     t?: any;
+    id?: string;
     content?: string;
     column?: ColumnTable;
     template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);

package/lib/grid-component/hooks/content/HeaderContent.js

@@ -10,23 +10,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
 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; }
-// import styled from "styled-components";
-
-// const TooltipStyle = styled.div`
-//   width: max-content;
-//   background-color: #444;
-//   color: white;
-//   font-size: 90%;
-//   padding: 4px 8px;
-//   border-radius: 4px;
-//   opacity: 0.9;
-//   z-index: 9999;
-//   max-width: 450px;
-// `
-
 const HeaderContent = props => {
   const {
-    t
+    t,
+    id
   } = props;
   const {
     headerTooltip,
@@ -40,43 +27,9 @@ const HeaderContent = props => {
   const tooltip = _react.default.useMemo(() => {
     return headerTooltip ?? t ? t(columnGroupText ?? headerText) : columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip, t]);
-  //
-  //
-  // const [isOpen, setIsOpen] = useState(false)
-  //
-  // const { refs, floatingStyles, context } = useFloating({
-  //   open: isOpen,
-  //   onOpenChange: setIsOpen,
-  //   placement: "top",
-  //   whileElementsMounted: autoUpdate,
-  //   middleware: [
-  //     offset(5),
-  //     flip({
-  //       fallbackAxisSideDirection: "start"
-  //     }),
-  //     shift()
-  //   ]
-  // })
-  //
-  // const hover = useHover(context, { move: false })
-  // const focus = useFocus(context)
-  // const dismiss = useDismiss(context)
-  // const role = useRole(context, { role: "tooltip" })
-  //
-  // const { getReferenceProps, getFloatingProps } = useInteractions([
-  //   hover,
-  //   focus,
-  //   dismiss,
-  //   role
-  // ])
-
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    // ref={refs.setReference}
-    // tabIndex={-1}
-    // style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'keep-all'}}
-    // style={{flex: 1}}
     className: (0, _classnames.default)('', {}),
-    "data-tooltip-id": "tooltip-header",
+    "data-tooltip-id": `${id}-tooltip-header`,
     "data-tooltip-content": tooltip,
     "data-tooltip-offset": 16
   }, headerTemplate ? (0, _utils.getTemplate)(headerTemplate) : t ? t(text) : text));

package/lib/grid-component/styles.scss

@@ -294,6 +294,16 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
     .#{$prefix}-table-cell {
 
+      .ui-rc-table-column-sorter{
+        line-height: normal !important;
+      }
+
+      &:hover {
+        .ui-rc-table-column-sorter-up.active {
+          opacity: 1 !important;
+        }
+      }
+
       .ui-rc-table-cell-content {
         line-height: 22px;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "es-grid-template",
   "keywords": [
     "react",