@itwin/components-react 4.0.0-dev.3 → 4.0.0-dev.6

package/lib/cjs/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.js

@@ -0,0 +1,184 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
+/** @packageDocumentation
+ * @module Table
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiValueFilter = void 0;
+require("./MultiValueFilter.scss");
+const react_1 = __importDefault(require("react"));
+const core_react_1 = require("@itwin/core-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const PopupButton_1 = require("../../../editors/PopupButton");
+const UiComponents_1 = require("../../../UiComponents");
+const ColumnFiltering_1 = require("../ColumnFiltering");
+function contains(valueA, valueB, caseSensitive) {
+    // istanbul ignore next
+    if (!valueA || !valueB || valueB.length > valueA.length)
+        return false;
+    if (caseSensitive)
+        return valueA.indexOf(valueB, 0) !== -1;
+    return valueA.toLocaleUpperCase().indexOf(valueB.toLocaleUpperCase(), 0) !== -1;
+}
+/** @internal */
+function MultiValueFilter(props) {
+    const [clearLabel] = react_1.default.useState(() => core_react_1.UiCore.translate("general.clear"));
+    const [filterLabel] = react_1.default.useState(() => UiComponents_1.UiComponents.translate("button.label.filter"));
+    const [cancelLabel] = react_1.default.useState(() => core_react_1.UiCore.translate("dialog.cancel"));
+    const [searchLabel] = react_1.default.useState(() => UiComponents_1.UiComponents.translate("button.label.search"));
+    const [selectAllLabel] = react_1.default.useState(() => UiComponents_1.UiComponents.translate("button.label.selectAll"));
+    const [distinctFilter] = react_1.default.useState(() => props.column.filterableColumn.columnFilterDescriptor.distinctFilter);
+    const [buttonLabel, setButtonLabel] = react_1.default.useState(undefined);
+    const [buttonTooltip, setButtonTooltip] = react_1.default.useState(undefined);
+    const [searchText, setSearchText] = react_1.default.useState("");
+    const [selectAllState, setSelectAllState] = react_1.default.useState(core_react_1.CheckBoxState.Off);
+    const [filterCaseSensitive] = react_1.default.useState(() => !!props.column.filterableColumn.filterCaseSensitive);
+    const [showDistinctValueFilters] = react_1.default.useState(() => !!props.column.filterableColumn.showDistinctValueFilters);
+    const popupButtonRef = react_1.default.useRef(null);
+    const distinctValues = react_1.default.useMemo(() => {
+        let options = props.getValidFilterValues(props.column.key);
+        options = options.map((o) => {
+            // istanbul ignore next
+            if (typeof o === "string") {
+                return { value: o, label: o };
+            }
+            return o;
+        });
+        return options;
+    }, [props]);
+    const checkedValues = react_1.default.useMemo(() => {
+        const values = new Array();
+        for (const distinctValue of distinctValues) {
+            if (distinctFilter.tryFindDescriptor(distinctValue.value) !== undefined)
+                values.push(distinctValue);
+        }
+        return values;
+    }, [distinctValues, distinctFilter]);
+    const [checkedDistinctValues, setCheckedDistinctValues] = react_1.default.useState(() => checkedValues);
+    react_1.default.useEffect(() => {
+        setCheckedDistinctValues(checkedValues);
+    }, [checkedValues]);
+    const handleClear = react_1.default.useCallback(() => {
+        checkedDistinctValues.length = 0;
+        const newValues = checkedDistinctValues.slice();
+        setCheckedDistinctValues(newValues);
+        setSelectAllState(core_react_1.CheckBoxState.Off);
+    }, [checkedDistinctValues]);
+    const closePopup = () => {
+        // istanbul ignore else
+        if (popupButtonRef.current)
+            popupButtonRef.current.closePopup();
+    };
+    const handleApplyFilter = react_1.default.useCallback(() => {
+        const filterData = {
+            distinctValues: new Array(),
+            fieldValues: new Array(),
+            fieldLogicalOperator: ColumnFiltering_1.FilterCompositionLogicalOperator.And,
+        };
+        for (const checkedDistinctValue of checkedDistinctValues) {
+            filterData.distinctValues.push(checkedDistinctValue);
+        }
+        closePopup();
+        setSearchText("");
+        let label;
+        if (checkedDistinctValues.length === 1)
+            label = checkedDistinctValues[0].label;
+        else if (checkedDistinctValues.length > 1)
+            label = `${checkedDistinctValues[0].label} (+${checkedDistinctValues.length - 1})`;
+        setButtonLabel(label);
+        let tooltip;
+        if (checkedDistinctValues.length > 1) {
+            const lineBreak = "\u000d\u000a";
+            const maxTooltipValues = 10;
+            const shownTooltipValues = Math.min(10, checkedDistinctValues.length);
+            tooltip = checkedDistinctValues[0].label;
+            for (let index = 1; index < shownTooltipValues; index++) {
+                tooltip += `${lineBreak}${checkedDistinctValues[index].label}`;
+            }
+            if (checkedDistinctValues.length > shownTooltipValues) {
+                tooltip += `${lineBreak}(+${checkedDistinctValues.length - maxTooltipValues})`;
+            }
+        }
+        setButtonTooltip(tooltip);
+        props.onChange({ filterTerm: filterData, column: props.column });
+    }, [props, checkedDistinctValues]);
+    const handleCancel = react_1.default.useCallback(() => {
+        closePopup();
+        setSearchText("");
+    }, []);
+    const handleSearchValueChanged = react_1.default.useCallback((value) => {
+        setSearchText(value);
+    }, []);
+    const handleSelectAllChanged = react_1.default.useCallback((_e) => {
+        let newState = core_react_1.CheckBoxState.On;
+        if (selectAllState === core_react_1.CheckBoxState.Off || selectAllState === core_react_1.CheckBoxState.Partial) {
+            const newValues = distinctValues.slice();
+            setCheckedDistinctValues(newValues);
+            newState = core_react_1.CheckBoxState.On;
+        }
+        else {
+            checkedDistinctValues.length = 0;
+            const newValues = checkedDistinctValues.slice();
+            setCheckedDistinctValues(newValues);
+            newState = core_react_1.CheckBoxState.Off;
+        }
+        setSelectAllState(newState);
+    }, [checkedDistinctValues, distinctValues, selectAllState]);
+    const handleCheckboxChanged = react_1.default.useCallback((e, distinctValue) => {
+        const index = checkedDistinctValues.indexOf(distinctValue);
+        const newCheckedValues = checkedDistinctValues.slice();
+        if (e.target.checked) {
+            // istanbul ignore else
+            if (index === -1)
+                newCheckedValues.push(distinctValue);
+        }
+        else {
+            // istanbul ignore else
+            if (index !== -1)
+                newCheckedValues.splice(index, 1);
+        }
+        setCheckedDistinctValues(newCheckedValues);
+        let newSelectAllState = core_react_1.CheckBoxState.Partial;
+        if (newCheckedValues.length === distinctValues.length)
+            newSelectAllState = core_react_1.CheckBoxState.On;
+        else if (newCheckedValues.length === 0)
+            newSelectAllState = core_react_1.CheckBoxState.Off;
+        setSelectAllState(newSelectAllState);
+    }, [checkedDistinctValues, distinctValues]);
+    const checkBoxItems = react_1.default.useMemo(() => {
+        const items = distinctValues
+            .filter((distinctValue) => {
+            return (searchText.length === 0 || contains(distinctValue.label, searchText, filterCaseSensitive));
+        })
+            .map((distinctValue, i) => {
+            const checked = checkedDistinctValues.find((checkedDistinctValue) => checkedDistinctValue.value === distinctValue.value) !== undefined;
+            return (react_1.default.createElement(core_react_1.CheckListBoxItem, { key: i, label: distinctValue.label, checked: checked, onChange: (e) => handleCheckboxChanged(e, distinctValue) }));
+        });
+        return items;
+    }, [checkedDistinctValues, distinctValues, handleCheckboxChanged, searchText, filterCaseSensitive]);
+    const disableSelectAll = checkBoxItems.length !== distinctValues.length;
+    return (react_1.default.createElement("div", { "data-testid": "components-multi-value-filter" },
+        react_1.default.createElement(PopupButton_1.PopupButton, { placeholder: props.placeholder || filterLabel, label: buttonLabel, title: buttonTooltip, closeOnEnter: false, setFocus: false, moveFocus: false, ref: popupButtonRef },
+            react_1.default.createElement(PopupButton_1.PopupContent, null,
+                showDistinctValueFilters &&
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: "components-multi-value-filter-searchbox" },
+                            react_1.default.createElement(core_react_1.SearchBox, { placeholder: searchLabel, onValueChanged: handleSearchValueChanged, valueChangedDelay: 250 })),
+                        react_1.default.createElement("div", { className: "components-multi-value-filter-selectAll" },
+                            react_1.default.createElement(itwinui_react_1.Checkbox, { label: selectAllLabel, checked: selectAllState === core_react_1.CheckBoxState.On, indeterminate: selectAllState === core_react_1.CheckBoxState.Partial, onChange: handleSelectAllChanged, disabled: disableSelectAll, "data-testid": "components-multi-value-filter-selectAll" })),
+                        react_1.default.createElement("div", { className: "components-multi-value-filter-distinct-values" },
+                            react_1.default.createElement(core_react_1.CheckListBox, null, checkBoxItems))),
+                react_1.default.createElement("div", { className: "components-multi-value-buttons" },
+                    react_1.default.createElement(itwinui_react_1.Button, { size: "small", onClick: handleClear, "data-testid": "components-multi-value-button-clear" }, clearLabel),
+                    react_1.default.createElement(itwinui_react_1.Button, { size: "small", styleType: "cta", onClick: handleApplyFilter, "data-testid": "components-multi-value-button-filter" }, filterLabel),
+                    react_1.default.createElement(itwinui_react_1.Button, { size: "small", onClick: handleCancel, "data-testid": "components-multi-value-button-cancel" }, cancelLabel))))));
+}
+exports.MultiValueFilter = MultiValueFilter;
+//# sourceMappingURL=MultiValueFilter.js.map

package/lib/cjs/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiValueFilter.js","sourceRoot":"","sources":["../../../../../../src/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Table\r\n */\r\n\r\nimport \"./MultiValueFilter.scss\";\r\nimport React from \"react\";\r\nimport { CheckBoxState, CheckListBox, CheckListBoxItem, SearchBox, UiCore } from \"@itwin/core-react\";\r\nimport { Button, Checkbox } from \"@itwin/itwinui-react\";\r\nimport { PopupButton, PopupContent } from \"../../../editors/PopupButton\";\r\nimport { ReactDataGridColumn } from \"../../component/TableColumn\";\r\nimport { UiComponents } from \"../../../UiComponents\";\r\nimport { FilterCompositionLogicalOperator, TableDistinctValue } from \"../ColumnFiltering\";\r\nimport { FieldFilterData, MultiValueFilterData } from \"../DataGridFilterParser\";\r\n\r\nfunction contains(valueA: string, valueB: string, caseSensitive: boolean): boolean {\r\n  // istanbul ignore next\r\n  if (!valueA || !valueB || valueB.length > valueA.length)\r\n    return false;\r\n\r\n  if (caseSensitive)\r\n    return valueA.indexOf(valueB, 0) !== -1;\r\n\r\n  return valueA.toLocaleUpperCase().indexOf(valueB.toLocaleUpperCase(), 0) !== -1;\r\n}\r\n\r\n/** @internal */\r\nexport interface MultiValueFilterProps {\r\n  onChange: (args: { filterTerm: any, column: ReactDataGridColumn }) => void;\r\n  column: ReactDataGridColumn;\r\n  getValidFilterValues: (key: string) => any[];\r\n  placeholder?: string;\r\n}\r\n\r\n/** @internal */\r\nexport function MultiValueFilter(props: MultiValueFilterProps) {\r\n  const [clearLabel] = React.useState(() => UiCore.translate(\"general.clear\"));\r\n  const [filterLabel] = React.useState(() => UiComponents.translate(\"button.label.filter\"));\r\n  const [cancelLabel] = React.useState(() => UiCore.translate(\"dialog.cancel\"));\r\n  const [searchLabel] = React.useState(() => UiComponents.translate(\"button.label.search\"));\r\n  const [selectAllLabel] = React.useState(() => UiComponents.translate(\"button.label.selectAll\"));\r\n  const [distinctFilter] = React.useState(() => props.column.filterableColumn!.columnFilterDescriptor.distinctFilter);\r\n  const [buttonLabel, setButtonLabel] = React.useState<string | undefined>(undefined);\r\n  const [buttonTooltip, setButtonTooltip] = React.useState<string | undefined>(undefined);\r\n  const [searchText, setSearchText] = React.useState(\"\");\r\n  const [selectAllState, setSelectAllState] = React.useState(CheckBoxState.Off);\r\n  const [filterCaseSensitive] = React.useState(() => !!props.column.filterableColumn!.filterCaseSensitive);\r\n  const [showDistinctValueFilters] = React.useState(() => !!props.column.filterableColumn!.showDistinctValueFilters);\r\n  const popupButtonRef = React.useRef<PopupButton>(null);\r\n\r\n  const distinctValues = React.useMemo((): TableDistinctValue[] => {\r\n    let options = props.getValidFilterValues(props.column.key);\r\n    options = options.map((o: any) => {\r\n      // istanbul ignore next\r\n      if (typeof o === \"string\") {\r\n        return { value: o, label: o };\r\n      }\r\n      return o;\r\n    });\r\n    return options;\r\n  }, [props]);\r\n\r\n  const checkedValues = React.useMemo((): TableDistinctValue[] => {\r\n    const values = new Array<TableDistinctValue>();\r\n    for (const distinctValue of distinctValues) {\r\n      if (distinctFilter.tryFindDescriptor(distinctValue.value) !== undefined)\r\n        values.push(distinctValue);\r\n    }\r\n    return values;\r\n  }, [distinctValues, distinctFilter]);\r\n\r\n  const [checkedDistinctValues, setCheckedDistinctValues] = React.useState<TableDistinctValue[]>(() => checkedValues);\r\n\r\n  React.useEffect(() => {\r\n    setCheckedDistinctValues(checkedValues);\r\n  }, [checkedValues]);\r\n\r\n  const handleClear = React.useCallback(() => {\r\n    checkedDistinctValues.length = 0;\r\n    const newValues = checkedDistinctValues.slice();\r\n    setCheckedDistinctValues(newValues);\r\n    setSelectAllState(CheckBoxState.Off);\r\n  }, [checkedDistinctValues]);\r\n\r\n  const closePopup = () => {\r\n    // istanbul ignore else\r\n    if (popupButtonRef.current)\r\n      popupButtonRef.current.closePopup();\r\n  };\r\n\r\n  const handleApplyFilter = React.useCallback(() => {\r\n    const filterData: MultiValueFilterData = {\r\n      distinctValues: new Array<TableDistinctValue>(),\r\n      fieldValues: new Array<FieldFilterData>(),\r\n      fieldLogicalOperator: FilterCompositionLogicalOperator.And,\r\n    };\r\n\r\n    for (const checkedDistinctValue of checkedDistinctValues) {\r\n      filterData.distinctValues.push(checkedDistinctValue);\r\n    }\r\n\r\n    closePopup();\r\n    setSearchText(\"\");\r\n\r\n    let label: string | undefined;\r\n    if (checkedDistinctValues.length === 1)\r\n      label = checkedDistinctValues[0].label;\r\n    else if (checkedDistinctValues.length > 1)\r\n      label = `${checkedDistinctValues[0].label} (+${checkedDistinctValues.length - 1})`;\r\n    setButtonLabel(label);\r\n\r\n    let tooltip: string | undefined;\r\n    if (checkedDistinctValues.length > 1) {\r\n      const lineBreak = \"\\u000d\\u000a\";\r\n      const maxTooltipValues = 10;\r\n      const shownTooltipValues = Math.min(10, checkedDistinctValues.length);\r\n      tooltip = checkedDistinctValues[0].label;\r\n      for (let index = 1; index < shownTooltipValues; index++) {\r\n        tooltip += `${lineBreak}${checkedDistinctValues[index].label}`;\r\n      }\r\n      if (checkedDistinctValues.length > shownTooltipValues) {\r\n        tooltip += `${lineBreak}(+${checkedDistinctValues.length - maxTooltipValues})`;\r\n      }\r\n    }\r\n    setButtonTooltip(tooltip);\r\n\r\n    props.onChange({ filterTerm: filterData, column: props.column });\r\n  }, [props, checkedDistinctValues]);\r\n\r\n  const handleCancel = React.useCallback(() => {\r\n    closePopup();\r\n    setSearchText(\"\");\r\n  }, []);\r\n\r\n  const handleSearchValueChanged = React.useCallback((value: string): void => {\r\n    setSearchText(value);\r\n  }, []);\r\n\r\n  const handleSelectAllChanged = React.useCallback((_e: React.ChangeEvent<HTMLInputElement>) => {\r\n    let newState = CheckBoxState.On;\r\n    if (selectAllState === CheckBoxState.Off || selectAllState === CheckBoxState.Partial) {\r\n      const newValues = distinctValues.slice();\r\n      setCheckedDistinctValues(newValues);\r\n      newState = CheckBoxState.On;\r\n    } else {\r\n      checkedDistinctValues.length = 0;\r\n      const newValues = checkedDistinctValues.slice();\r\n      setCheckedDistinctValues(newValues);\r\n      newState = CheckBoxState.Off;\r\n    }\r\n    setSelectAllState(newState);\r\n  }, [checkedDistinctValues, distinctValues, selectAllState]);\r\n\r\n  const handleCheckboxChanged = React.useCallback((e: React.ChangeEvent<HTMLInputElement>, distinctValue: TableDistinctValue) => {\r\n    const index = checkedDistinctValues.indexOf(distinctValue);\r\n    const newCheckedValues = checkedDistinctValues.slice();\r\n    if (e.target.checked) {\r\n      // istanbul ignore else\r\n      if (index === -1)\r\n        newCheckedValues.push(distinctValue);\r\n    } else {\r\n      // istanbul ignore else\r\n      if (index !== -1)\r\n        newCheckedValues.splice(index, 1);\r\n    }\r\n    setCheckedDistinctValues(newCheckedValues);\r\n\r\n    let newSelectAllState = CheckBoxState.Partial;\r\n    if (newCheckedValues.length === distinctValues.length)\r\n      newSelectAllState = CheckBoxState.On;\r\n    else if (newCheckedValues.length === 0)\r\n      newSelectAllState = CheckBoxState.Off;\r\n    setSelectAllState(newSelectAllState);\r\n  }, [checkedDistinctValues, distinctValues]);\r\n\r\n  const checkBoxItems = React.useMemo((): JSX.Element[] => {\r\n    const items = distinctValues\r\n      .filter((distinctValue: TableDistinctValue) => {\r\n        return (searchText.length === 0 || contains(distinctValue.label, searchText, filterCaseSensitive));\r\n      })\r\n      .map((distinctValue: TableDistinctValue, i: number) => {\r\n        const checked = checkedDistinctValues.find((checkedDistinctValue) => checkedDistinctValue.value === distinctValue.value) !== undefined;\r\n        return (\r\n          <CheckListBoxItem key={i} label={distinctValue.label} checked={checked}\r\n            onChange={(e) => handleCheckboxChanged(e, distinctValue)} />\r\n        );\r\n      });\r\n    return items;\r\n  }, [checkedDistinctValues, distinctValues, handleCheckboxChanged, searchText, filterCaseSensitive]);\r\n\r\n  const disableSelectAll = checkBoxItems.length !== distinctValues.length;\r\n\r\n  return (\r\n    <div data-testid=\"components-multi-value-filter\">\r\n      <PopupButton placeholder={props.placeholder || filterLabel}\r\n        label={buttonLabel}\r\n        title={buttonTooltip}\r\n        closeOnEnter={false}\r\n        setFocus={false}\r\n        moveFocus={false}\r\n        ref={popupButtonRef}\r\n      >\r\n        <PopupContent>\r\n          {showDistinctValueFilters &&\r\n            <div>\r\n              <div className=\"components-multi-value-filter-searchbox\">\r\n                <SearchBox placeholder={searchLabel} onValueChanged={handleSearchValueChanged} valueChangedDelay={250} />\r\n              </div>\r\n              <div className=\"components-multi-value-filter-selectAll\">\r\n                <Checkbox\r\n                  label={selectAllLabel} checked={selectAllState === CheckBoxState.On} indeterminate={selectAllState === CheckBoxState.Partial}\r\n                  onChange={handleSelectAllChanged} disabled={disableSelectAll}\r\n                  data-testid=\"components-multi-value-filter-selectAll\" />\r\n              </div>\r\n              <div className=\"components-multi-value-filter-distinct-values\">\r\n                <CheckListBox>\r\n                  {checkBoxItems}\r\n                </CheckListBox>\r\n              </div>\r\n            </div>\r\n          }\r\n          <div className=\"components-multi-value-buttons\">\r\n            <Button size=\"small\" onClick={handleClear} data-testid=\"components-multi-value-button-clear\">{clearLabel}</Button>\r\n            <Button size=\"small\" styleType=\"cta\" onClick={handleApplyFilter} data-testid=\"components-multi-value-button-filter\">{filterLabel}</Button>\r\n            <Button size=\"small\" onClick={handleCancel} data-testid=\"components-multi-value-button-cancel\">{cancelLabel}</Button>\r\n          </div>\r\n        </PopupContent>\r\n      </PopupButton>\r\n    </div>\r\n  );\r\n}\r\n"]}

package/lib/cjs/components-react/table/columnfiltering/multi-value-filter/MultiValueFilter.scss

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/base/base";
+@import "~@itwin/itwinui-css/scss/style/space";
+
+.components-multi-value-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: $iui-s;
+  margin-top: $iui-s;
+}
+
+.components-multi-value-filter-selectAll {
+  margin-bottom: $iui-xs;
+}
+
+.components-multi-value-filter-searchbox {
+  margin-bottom: $iui-s;
+
+  >.core-searchbox {
+    width: 100%;
+  }
+}
+
+.components-multi-value-filter-distinct-values {
+  @include uicore-scrollview;
+
+  border: 1px solid $buic-background-panel-stroke;
+  border-radius: 2px;
+  box-sizing: border-box;
+
+  max-height: 250px;
+  padding-left: 2px;
+}

package/lib/cjs/components-react/table/component/ColumnDragLayer.d.ts

@@ -0,0 +1,15 @@
+/** @packageDocumentation
+ * @module Table
+ */
+import * as React from "react";
+import { DragLayerProps } from "./dragdrop/DragDropDef";
+/**
+ * React component used to portray a column being dragged during Table column reordering.
+ * @deprecated in 2.x. Use the Table component in @itwin/itwinui-react instead, which does not use this class.
+ * @public
+ */
+export declare class ColumnDragLayer extends React.Component<DragLayerProps> {
+    constructor(props: DragLayerProps);
+    render(): React.ReactNode;
+}
+//# sourceMappingURL=ColumnDragLayer.d.ts.map

package/lib/cjs/components-react/table/component/ColumnDragLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnDragLayer.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/table/component/ColumnDragLayer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD;;;;GAIG;AACH,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;gBACtD,KAAK,EAAE,cAAc;IAIjB,MAAM,IAAI,KAAK,CAAC,SAAS;CA6B1C"}

package/lib/cjs/components-react/table/component/ColumnDragLayer.js

@@ -0,0 +1,66 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Table
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnDragLayer = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+/**
+ * React component used to portray a column being dragged during Table column reordering.
+ * @deprecated in 2.x. Use the Table component in @itwin/itwinui-react instead, which does not use this class.
+ * @public
+ */
+class ColumnDragLayer extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        if (this.props.args === undefined)
+            return null;
+        const args = this.props.args;
+        const spos = args.sourceClientOffset || { x: -1000, y: -1000 };
+        const ispos = args.initialSourceClientOffset || { x: -1000, y: -1000 };
+        const data = args.dataObject || /* istanbul ignore next */ {};
+        const column = data.column || {};
+        const width = column.width || {};
+        const x = spos.x + (column && column.left);
+        const y = ispos.y;
+        const translate = `translate(${x}px, ${y}px)`;
+        const dragLayerStyle = {
+            transform: translate,
+            WebkitTransform: translate,
+            width,
+            ...this.props.style,
+        };
+        return (React.createElement("div", { className: (0, classnames_1.default)("components-column-drag-layer", this.props.className), style: dragLayerStyle }, column.name));
+    }
+}
+exports.ColumnDragLayer = ColumnDragLayer;
+//# sourceMappingURL=ColumnDragLayer.js.map

package/lib/cjs/components-react/table/component/ColumnDragLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnDragLayer.js","sourceRoot":"","sources":["../../../../../src/components-react/table/component/ColumnDragLayer.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4DAAoC;AACpC,6CAA+B;AAG/B;;;;GAIG;AACH,MAAa,eAAgB,SAAQ,KAAK,CAAC,SAAyB;IAClE,YAAY,KAAqB;QAC/B,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS;YAC/B,OAAO,IAAI,CAAC;QAEd,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;QAC/D,MAAM,KAAK,GAAG,IAAI,CAAC,yBAAyB,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;QAEvE,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,IAAI,0BAA0B,CAAC,EAAE,CAAC;QAC9D,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;QACjC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;QAEjC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;QAElB,MAAM,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC;QAE9C,MAAM,cAAc,GAAwB;YAC1C,SAAS,EAAE,SAAS;YACpB,eAAe,EAAE,SAAS;YAC1B,KAAK;YACL,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;SACpB,CAAC;QACF,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,8BAA8B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,cAAc,IACpG,MAAM,CAAC,IAAI,CACR,CACP,CAAC;IACJ,CAAC;CACF;AAlCD,0CAkCC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Table\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { DragLayerProps } from \"./dragdrop/DragDropDef\";\r\n\r\n/**\r\n * React component used to portray a column being dragged during Table column reordering.\r\n * @deprecated in 2.x. Use the Table component in @itwin/itwinui-react instead, which does not use this class.\r\n * @public\r\n */\r\nexport class ColumnDragLayer extends React.Component<DragLayerProps> { // eslint-disable-line deprecation/deprecation\r\n  constructor(props: DragLayerProps) { // eslint-disable-line deprecation/deprecation\r\n    super(props);\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    if (this.props.args === undefined)\r\n      return null;\r\n\r\n    const args = this.props.args;\r\n    const spos = args.sourceClientOffset || { x: -1000, y: -1000 };\r\n    const ispos = args.initialSourceClientOffset || { x: -1000, y: -1000 };\r\n\r\n    const data = args.dataObject || /* istanbul ignore next */ {};\r\n    const column = data.column || {};\r\n    const width = column.width || {};\r\n\r\n    const x = spos.x + (column && column.left);\r\n    const y = ispos.y;\r\n\r\n    const translate = `translate(${x}px, ${y}px)`;\r\n\r\n    const dragLayerStyle: React.CSSProperties = {\r\n      transform: translate,\r\n      WebkitTransform: translate,\r\n      width,\r\n      ...this.props.style,\r\n    };\r\n    return (\r\n      <div className={classnames(\"components-column-drag-layer\", this.props.className)} style={dragLayerStyle}>\r\n        {column.name}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/components-react/table/component/DragDropHeaderCell.d.ts

@@ -0,0 +1,27 @@
+/** @packageDocumentation
+ * @module Table
+ */
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+import { DropTargetArguments } from "./dragdrop/DragDropDef";
+/** @internal */
+export interface DragDropHeaderCellProps extends CommonProps {
+    onHeaderDrop?: (source: string, target: string) => void;
+    column: any;
+}
+interface HeaderWrapperProps extends CommonProps {
+    item?: DropTargetArguments;
+    type?: string;
+    isDragging?: boolean;
+    isOver?: boolean;
+    canDrag?: boolean;
+    canDrop?: boolean;
+}
+/** @internal */
+export declare const DragDropHeaderWrapper: import("react-dnd").DndComponentClass<typeof React.Component, HeaderWrapperProps & import("./dragdrop/withDropTarget").WithDropTargetProps<any> & import("./dragdrop/withDragSource").WithDragSourceProps<any>>;
+/** @internal */
+export declare class DragDropHeaderCell extends React.Component<DragDropHeaderCellProps> {
+    render(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=DragDropHeaderCell.d.ts.map

package/lib/cjs/components-react/table/component/DragDropHeaderCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropHeaderCell.d.ts","sourceRoot":"","sources":["../../../../../src/components-react/table/component/DragDropHeaderCell.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAuB,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAOlF,gBAAgB;AAChB,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,GAAG,CAAC;CACb;AAED,UAAU,kBAAmB,SAAQ,WAAW;IAC9C,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAgCD,gBAAgB;AAChB,eAAO,MAAM,qBAAqB,iNAAgD,CAAC;AAGnF,gBAAgB;AAChB,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9D,MAAM,IAAI,KAAK,CAAC,SAAS;CAyC1C"}

package/lib/cjs/components-react/table/component/DragDropHeaderCell.js

@@ -0,0 +1,102 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Table
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragDropHeaderCell = exports.DragDropHeaderWrapper = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const RDG = __importStar(require("react-data-grid"));
+const ColumnDragLayer_1 = require("./ColumnDragLayer");
+const withDragSource_1 = require("./dragdrop/withDragSource");
+const withDropTarget_1 = require("./dragdrop/withDropTarget");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const HeaderCell = (RDG && RDG.HeaderCell); // react-data-grid @types does not support the HeaderCell export, but it is exported in the js-only library.
+class HeaderWrapper extends React.Component {
+    render() {
+        const { type, item, isOver, isDragging, canDrag, canDrop, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        let mode = 0;
+        if (item && item.clientOffset && item.initialClientOffset) {
+            // istanbul ignore next
+            if (item.clientOffset.x > item.initialClientOffset.x)
+                mode = 1;
+            else
+                mode = -1;
+        }
+        const classes = (0, classnames_1.default)("components-table-header-drag-drop", {
+            left: canDrop && !isDragging && isOver && /* istanbul ignore next */ mode === -1,
+            right: canDrop && !isDragging && isOver && /* istanbul ignore next */ mode === 1,
+            dragging: isDragging,
+        }, this.props.className);
+        return (React.createElement("div", { className: classes, style: this.props.style },
+            React.createElement(HeaderCell, { ...props })));
+    }
+}
+/** @internal */
+exports.DragDropHeaderWrapper = (0, withDragSource_1.withDragSource)((0, withDropTarget_1.withDropTarget)(HeaderWrapper)); // eslint-disable-line deprecation/deprecation
+// Used only internally in ./Table.tsx
+/** @internal */
+class DragDropHeaderCell extends React.Component {
+    render() {
+        const { column } = this.props;
+        /* istanbul ignore next */
+        const dropTargetProps = {
+            onDropTargetDrop: (args) => {
+                const sourceKey = args.dataObject.key || "";
+                const sourceXpos = args.dataObject.xpos || 0;
+                const targetKey = (column && column.key) || "";
+                const targetXpos = (column && column.left) || 0;
+                args.dataObject = { sourceKey, targetKey, sourceXpos, targetXpos };
+                return args;
+            },
+            objectTypes: ["Column"],
+        };
+        const dragSourceProps = {
+            onDragSourceBegin: (args) => {
+                args.dataObject = {
+                    key: (column && column.key) || /* istanbul ignore next */ "",
+                    xpos: (column && column.left) || /* istanbul ignore next */ "",
+                    column,
+                };
+                return args;
+            },
+            onDragSourceEnd: (args) => {
+                const { sourceKey, targetKey } = args.dataObject;
+                this.props.onHeaderDrop && this.props.onHeaderDrop(sourceKey, targetKey);
+            },
+            objectType: () => {
+                return "Column";
+            },
+            defaultDragLayer: ColumnDragLayer_1.ColumnDragLayer, // eslint-disable-line deprecation/deprecation
+        };
+        return (React.createElement(exports.DragDropHeaderWrapper, { ...this.props, dragProps: dragSourceProps, dropProps: dropTargetProps, shallow: false }));
+    }
+}
+exports.DragDropHeaderCell = DragDropHeaderCell;
+//# sourceMappingURL=DragDropHeaderCell.js.map

package/lib/cjs/components-react/table/component/DragDropHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropHeaderCell.js","sourceRoot":"","sources":["../../../../../src/components-react/table/component/DragDropHeaderCell.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Table\r\n */\r\n\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport * as RDG from \"react-data-grid\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { ColumnDragLayer } from \"./ColumnDragLayer\";\r\nimport { DragSourceArguments, DropTargetArguments } from \"./dragdrop/DragDropDef\";\r\nimport { withDragSource } from \"./dragdrop/withDragSource\";\r\nimport { withDropTarget } from \"./dragdrop/withDropTarget\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nconst HeaderCell = (RDG && (RDG as any).HeaderCell); // react-data-grid @types does not support the HeaderCell export, but it is exported in the js-only library.\r\n\r\n/** @internal */\r\nexport interface DragDropHeaderCellProps extends CommonProps {\r\n  onHeaderDrop?: (source: string, target: string) => void; // inherited by parent\r\n  column: any; // inherited by parent\r\n}\r\n\r\ninterface HeaderWrapperProps extends CommonProps {\r\n  item?: DropTargetArguments; // eslint-disable-line deprecation/deprecation\r\n  type?: string;\r\n  isDragging?: boolean;\r\n  isOver?: boolean;\r\n  canDrag?: boolean;\r\n  canDrop?: boolean;\r\n}\r\n\r\nclass HeaderWrapper extends React.Component<HeaderWrapperProps> {\r\n  public override render(): React.ReactNode {\r\n    const { type, item, isOver, isDragging, canDrag, canDrop, ...props } = this.props as HeaderWrapperProps; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n\r\n    let mode = 0;\r\n    if (item && item.clientOffset && item.initialClientOffset) {\r\n      // istanbul ignore next\r\n      if (item.clientOffset.x > item.initialClientOffset.x)\r\n        mode = 1;\r\n      else\r\n        mode = -1;\r\n    }\r\n\r\n    const classes = classnames(\r\n      \"components-table-header-drag-drop\",\r\n      {\r\n        left: canDrop && !isDragging && isOver && /* istanbul ignore next */ mode === -1,\r\n        right: canDrop && !isDragging && isOver && /* istanbul ignore next */ mode === 1,\r\n        dragging: isDragging,\r\n      },\r\n      this.props.className,\r\n    );\r\n    return (\r\n      <div className={classes} style={this.props.style}>\r\n        <HeaderCell {...props} />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** @internal */\r\nexport const DragDropHeaderWrapper = withDragSource(withDropTarget(HeaderWrapper)); // eslint-disable-line deprecation/deprecation\r\n\r\n// Used only internally in ./Table.tsx\r\n/** @internal */\r\nexport class DragDropHeaderCell extends React.Component<DragDropHeaderCellProps> {\r\n  public override render(): React.ReactNode {\r\n    const { column } = this.props;\r\n    /* istanbul ignore next */\r\n    const dropTargetProps = {\r\n      onDropTargetDrop: (args: DropTargetArguments): DropTargetArguments => { // eslint-disable-line deprecation/deprecation\r\n        const sourceKey = args.dataObject.key || \"\";\r\n        const sourceXpos = args.dataObject.xpos || 0;\r\n        const targetKey = (column && column.key) || \"\";\r\n        const targetXpos = (column && column.left) || 0;\r\n        args.dataObject = { sourceKey, targetKey, sourceXpos, targetXpos };\r\n        return args;\r\n      },\r\n      objectTypes: [\"Column\"],\r\n    };\r\n    const dragSourceProps = {\r\n      onDragSourceBegin: (args: DragSourceArguments) => { // eslint-disable-line deprecation/deprecation\r\n        args.dataObject = {\r\n          key: (column && column.key) || /* istanbul ignore next */ \"\",\r\n          xpos: (column && column.left) || /* istanbul ignore next */ \"\",\r\n          column,\r\n        };\r\n        return args;\r\n      },\r\n      onDragSourceEnd: (args: DragSourceArguments) => { // eslint-disable-line deprecation/deprecation\r\n        const { sourceKey, targetKey } = args.dataObject;\r\n        this.props.onHeaderDrop && this.props.onHeaderDrop(sourceKey, targetKey);\r\n      },\r\n      objectType: () => {\r\n        return \"Column\";\r\n      },\r\n      defaultDragLayer: ColumnDragLayer, // eslint-disable-line deprecation/deprecation\r\n    };\r\n    return (\r\n      <DragDropHeaderWrapper\r\n        {...this.props}\r\n        dragProps={dragSourceProps}\r\n        dropProps={dropTargetProps}\r\n        shallow={false}\r\n      />\r\n    );\r\n  }\r\n}\r\n"]}