@itwin/itwinui-react 3.0.3 → 3.0.5

package/cjs/core/Table/hooks/useColumnDragAndDrop.js

@@ -1,127 +1,112 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColumnDragAndDrop = void 0;
-const tslib_1 = require('tslib');
-const react_table_1 = require('react-table');
-const styles_js_1 = tslib_1.__importDefault(require('../../../styles.js'));
+const tslib_1 = require("tslib");
+const react_table_1 = require("react-table");
+const styles_js_1 = tslib_1.__importDefault(require("../../../styles.js"));
 const REORDER_ACTIONS = {
-  columnDragStart: 'columnDragStart',
-  columnDragEnd: 'columnDragEnd',
+    columnDragStart: 'columnDragStart',
+    columnDragEnd: 'columnDragEnd',
 };
 const useColumnDragAndDrop = (isEnabled) => (hooks) => {
-  hooks.getDragAndDropProps = [defaultGetDragAndDropProps(isEnabled)];
-  hooks.stateReducers.push(reducer);
-  hooks.useInstance.push(useInstance);
+    hooks.getDragAndDropProps = [defaultGetDragAndDropProps(isEnabled)];
+    hooks.stateReducers.push(reducer);
+    hooks.useInstance.push(useInstance);
 };
 exports.useColumnDragAndDrop = useColumnDragAndDrop;
-const defaultGetDragAndDropProps =
-  (isEnabled) =>
-  (props, { instance, header }) => {
+const defaultGetDragAndDropProps = (isEnabled) => (props, { instance, header, }) => {
     if (!isEnabled || header.disableReordering) {
-      return props;
+        return props;
     }
     const onDragStart = () => {
-      instance.dispatch({
-        type: REORDER_ACTIONS.columnDragStart,
-        columnIndex: instance.flatHeaders.indexOf(header),
-      });
+        instance.dispatch({
+            type: REORDER_ACTIONS.columnDragStart,
+            columnIndex: instance.flatHeaders.indexOf(header),
+        });
     };
     const setOnDragColumnStyle = (event, position) => {
-      const columnElement = event.currentTarget;
-      columnElement.classList.remove(
-        styles_js_1.default['iui-table-reorder-column-right'],
-      );
-      columnElement.classList.remove(
-        styles_js_1.default['iui-table-reorder-column-left'],
-      );
-      if (position === 'left') {
-        columnElement.classList.add(
-          styles_js_1.default['iui-table-reorder-column-left'],
-        );
-      } else if (position === 'right') {
-        columnElement.classList.add(
-          styles_js_1.default['iui-table-reorder-column-right'],
-        );
-      }
+        const columnElement = event.currentTarget;
+        columnElement.classList.remove(styles_js_1.default['iui-table-reorder-column-right']);
+        columnElement.classList.remove(styles_js_1.default['iui-table-reorder-column-left']);
+        if (position === 'left') {
+            columnElement.classList.add(styles_js_1.default['iui-table-reorder-column-left']);
+        }
+        else if (position === 'right') {
+            columnElement.classList.add(styles_js_1.default['iui-table-reorder-column-right']);
+        }
     };
     const reorderColumns = (tableColumns, srcIndex, dstIndex) => {
-      const newTableColumns = [...tableColumns];
-      const [removed] = newTableColumns.splice(srcIndex, 1);
-      newTableColumns.splice(dstIndex, 0, removed);
-      return newTableColumns;
+        const newTableColumns = [...tableColumns];
+        const [removed] = newTableColumns.splice(srcIndex, 1);
+        newTableColumns.splice(dstIndex, 0, removed);
+        return newTableColumns;
     };
     const onDragOver = (event) => {
-      event.preventDefault();
-      const headerIndex = instance.flatHeaders.indexOf(header);
-      if (instance.state.columnReorderStartIndex !== headerIndex) {
-        setOnDragColumnStyle(
-          event,
-          instance.state.columnReorderStartIndex > headerIndex
-            ? 'left'
-            : 'right',
-        );
-      }
+        event.preventDefault();
+        const headerIndex = instance.flatHeaders.indexOf(header);
+        if (instance.state.columnReorderStartIndex !== headerIndex) {
+            setOnDragColumnStyle(event, instance.state.columnReorderStartIndex > headerIndex
+                ? 'left'
+                : 'right');
+        }
     };
     const onDragLeave = (event) => {
-      setOnDragColumnStyle(event);
+        setOnDragColumnStyle(event);
     };
     const onDrop = (event) => {
-      event.preventDefault();
-      setOnDragColumnStyle(event);
-      const columnIds = instance.allColumns.map((x) => x.id);
-      const srcIndex = instance.state.columnReorderStartIndex;
-      const dstIndex = columnIds.findIndex((x) => x === header.id);
-      if (srcIndex === dstIndex || srcIndex === -1 || dstIndex === -1) {
-        return;
-      }
-      instance.setColumnOrder(reorderColumns(columnIds, srcIndex, dstIndex));
-      instance.dispatch({
-        type: REORDER_ACTIONS.columnDragEnd,
-        columnIndex: -1,
-      });
+        event.preventDefault();
+        setOnDragColumnStyle(event);
+        const columnIds = instance.allColumns.map((x) => x.id);
+        const srcIndex = instance.state.columnReorderStartIndex;
+        const dstIndex = columnIds.findIndex((x) => x === header.id);
+        if (srcIndex === dstIndex || srcIndex === -1 || dstIndex === -1) {
+            return;
+        }
+        instance.setColumnOrder(reorderColumns(columnIds, srcIndex, dstIndex));
+        instance.dispatch({
+            type: REORDER_ACTIONS.columnDragEnd,
+            columnIndex: -1,
+        });
     };
     return [
-      props,
-      {
-        draggable: true,
-        onDragStart,
-        onDragOver,
-        onDragLeave,
-        onDrop,
-      },
+        props,
+        {
+            draggable: true,
+            onDragStart,
+            onDragOver,
+            onDragLeave,
+            onDrop,
+        },
     ];
-  };
+};
 const reducer = (newState, action) => {
-  switch (action.type) {
-    case react_table_1.actions.init:
-      return {
-        ...newState,
-        columnReorderStartIndex: -1,
-      };
-    case REORDER_ACTIONS.columnDragStart:
-      return {
-        ...newState,
-        columnReorderStartIndex: action.columnIndex,
-      };
-    case REORDER_ACTIONS.columnDragEnd:
-      return {
-        ...newState,
-        columnReorderStartIndex: -1,
-      };
-    default:
-      return newState;
-  }
+    switch (action.type) {
+        case react_table_1.actions.init:
+            return {
+                ...newState,
+                columnReorderStartIndex: -1,
+            };
+        case REORDER_ACTIONS.columnDragStart:
+            return {
+                ...newState,
+                columnReorderStartIndex: action.columnIndex,
+            };
+        case REORDER_ACTIONS.columnDragEnd:
+            return {
+                ...newState,
+                columnReorderStartIndex: -1,
+            };
+        default:
+            return newState;
+    }
 };
 const useInstance = (instance) => {
-  const { flatHeaders, getHooks } = instance;
-  const getInstance = (0, react_table_1.useGetLatest)(instance);
-  flatHeaders.forEach((header) => {
-    header.getDragAndDropProps = (0, react_table_1.makePropGetter)(
-      getHooks().getDragAndDropProps,
-      {
-        instance: getInstance(),
-        header,
-      },
-    );
-  });
+    const { flatHeaders, getHooks } = instance;
+    const getInstance = (0, react_table_1.useGetLatest)(instance);
+    flatHeaders.forEach((header) => {
+        header.getDragAndDropProps = (0, react_table_1.makePropGetter)(getHooks().getDragAndDropProps, {
+            instance: getInstance(),
+            header,
+        });
+    });
 };

package/cjs/core/Table/hooks/useExpanderCell.js

@@ -1,43 +1,35 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExpanderCell = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../columns/index.js');
-const useExpanderCell =
-  (subComponent, expanderCell, isRowDisabled) => (hooks) => {
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../columns/index.js");
+const useExpanderCell = (subComponent, expanderCell, isRowDisabled) => (hooks) => {
     if (!subComponent) {
-      return;
+        return;
     }
     hooks.allColumns.push((columns) => {
-      const hasExpanderColumn = columns.find(
-        (c) => c.id === index_js_1.EXPANDER_CELL_ID,
-      );
-      if (hasExpanderColumn) {
-        return columns;
-      }
-      const expanderColumn = (0, index_js_1.ExpanderColumn)({
-        subComponent,
-        isDisabled: isRowDisabled,
-      });
-      return [
-        {
-          ...expanderColumn,
-          Cell: expanderCell
-            ? (cellProps) =>
-                React.createElement(
-                  React.Fragment,
-                  null,
-                  expanderCell(cellProps),
-                )
-            : expanderColumn.Cell,
-        },
-        ...columns,
-      ];
+        const hasExpanderColumn = columns.find((c) => c.id === index_js_1.EXPANDER_CELL_ID);
+        if (hasExpanderColumn) {
+            return columns;
+        }
+        const expanderColumn = (0, index_js_1.ExpanderColumn)({
+            subComponent,
+            isDisabled: isRowDisabled,
+        });
+        return [
+            {
+                ...expanderColumn,
+                Cell: expanderCell
+                    ? (cellProps) => React.createElement(React.Fragment, null, expanderCell(cellProps))
+                    : expanderColumn.Cell,
+            },
+            ...columns,
+        ];
     });
-  };
+};
 exports.useExpanderCell = useExpanderCell;