@vuu-ui/vuu-table 0.9.2 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/CellFocusState.js +1 -1
- package/cjs/CellFocusState.js.map +1 -1
- package/cjs/Row.js +3 -1
- package/cjs/Row.js.map +1 -1
- package/cjs/Table.css.js +1 -1
- package/cjs/Table.js +32 -0
- package/cjs/Table.js.map +1 -1
- package/cjs/VirtualColSpan.js.map +1 -1
- package/cjs/bulk-edit/{BulkEditPanelDialog.js → BulkEditDialog.js} +13 -8
- package/cjs/bulk-edit/BulkEditDialog.js.map +1 -0
- package/cjs/bulk-edit/BulkEditPanel.js.map +1 -1
- package/cjs/bulk-edit/BulkEditRow.js.map +1 -1
- package/cjs/bulk-edit/useBulkEditPanel.js +12 -8
- package/cjs/bulk-edit/useBulkEditPanel.js.map +1 -1
- package/cjs/bulk-edit/useBulkEditRow.js +1 -1
- package/cjs/bulk-edit/useBulkEditRow.js.map +1 -1
- package/cjs/cell-block/CellBlock.js.map +1 -1
- package/cjs/cell-block/cellblock-utils.js.map +1 -1
- package/cjs/cell-block/useCellBlockSelection.js.map +1 -1
- package/cjs/cell-renderers/checkbox-cell/CheckboxCell.js.map +1 -1
- package/cjs/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +1 -1
- package/cjs/cell-renderers/input-cell/InputCell.js.map +1 -1
- package/cjs/cell-renderers/toggle-cell/ToggleCell.js.map +1 -1
- package/cjs/column-header-pill/ColumnHeaderPill.css.js +1 -1
- package/cjs/column-header-pill/ColumnHeaderPill.js.map +1 -1
- package/cjs/column-header-pill/GroupColumnPill.js.map +1 -1
- package/cjs/column-header-pill/SortIndicator.js.map +1 -1
- package/cjs/column-menu/ColumnMenu.js.map +1 -1
- package/cjs/column-resizing/ColumnResizer.js.map +1 -1
- package/cjs/column-resizing/useTableColumnResize.js.map +1 -1
- package/cjs/context-menu/buildContextMenuDescriptors.js.map +1 -1
- package/cjs/context-menu/useHandleTableContextMenu.js.map +1 -1
- package/cjs/header-cell/GroupHeaderCell.js.map +1 -1
- package/cjs/header-cell/HeaderCell.js.map +1 -1
- package/cjs/index.js +4 -2
- package/cjs/index.js.map +1 -1
- package/cjs/moving-window.js +1 -1
- package/cjs/moving-window.js.map +1 -1
- package/cjs/pagination/PaginationControl.js.map +1 -1
- package/cjs/pagination/usePagination.js.map +1 -1
- package/cjs/table-cell/TableCell.js +8 -3
- package/cjs/table-cell/TableCell.js.map +1 -1
- package/cjs/table-cell/TableGroupCell.css.js +1 -1
- package/cjs/table-cell/TableGroupCell.js +5 -2
- package/cjs/table-cell/TableGroupCell.js.map +1 -1
- package/cjs/table-config.js.map +1 -1
- package/cjs/table-dom-utils.js.map +1 -1
- package/cjs/table-header/HeaderProvider.js.map +1 -1
- package/cjs/table-header/TableHeader.js +6 -9
- package/cjs/table-header/TableHeader.js.map +1 -1
- package/cjs/table-header/useTableHeader.js.map +1 -1
- package/cjs/useCell.js.map +1 -1
- package/cjs/useCellEditing.js.map +1 -1
- package/cjs/useCellFocus.js.map +1 -1
- package/cjs/useControlledTableNavigation.js.map +1 -1
- package/cjs/useDataSource.js +29 -3
- package/cjs/useDataSource.js.map +1 -1
- package/cjs/useEditableCell.js.map +1 -1
- package/cjs/useHighlighting.js +33 -0
- package/cjs/useHighlighting.js.map +1 -0
- package/cjs/useKeyboardNavigation.js.map +1 -1
- package/cjs/useMeasuredHeight.js.map +1 -1
- package/cjs/useRowClassNameGenerators.js.map +1 -1
- package/cjs/useSelection.js +2 -1
- package/cjs/useSelection.js.map +1 -1
- package/cjs/useTable.js +28 -12
- package/cjs/useTable.js.map +1 -1
- package/cjs/useTableAndColumnSettings.js.map +1 -1
- package/cjs/useTableContextMenu.js.map +1 -1
- package/cjs/useTableModel.js +14 -6
- package/cjs/useTableModel.js.map +1 -1
- package/cjs/useTableScroll.js.map +1 -1
- package/cjs/useTableViewport.js.map +1 -1
- package/esm/CellFocusState.js +1 -1
- package/esm/CellFocusState.js.map +1 -1
- package/esm/Row.js +3 -1
- package/esm/Row.js.map +1 -1
- package/esm/Table.css.js +1 -1
- package/esm/Table.js +33 -1
- package/esm/Table.js.map +1 -1
- package/esm/VirtualColSpan.js.map +1 -1
- package/esm/bulk-edit/{BulkEditPanelDialog.js → BulkEditDialog.js} +14 -9
- package/esm/bulk-edit/BulkEditDialog.js.map +1 -0
- package/esm/bulk-edit/BulkEditPanel.js.map +1 -1
- package/esm/bulk-edit/BulkEditRow.js.map +1 -1
- package/esm/bulk-edit/useBulkEditPanel.js +12 -8
- package/esm/bulk-edit/useBulkEditPanel.js.map +1 -1
- package/esm/bulk-edit/useBulkEditRow.js +1 -1
- package/esm/bulk-edit/useBulkEditRow.js.map +1 -1
- package/esm/cell-block/CellBlock.js.map +1 -1
- package/esm/cell-block/cellblock-utils.js.map +1 -1
- package/esm/cell-block/useCellBlockSelection.js.map +1 -1
- package/esm/cell-renderers/checkbox-cell/CheckboxCell.js.map +1 -1
- package/esm/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js.map +1 -1
- package/esm/cell-renderers/input-cell/InputCell.js.map +1 -1
- package/esm/cell-renderers/toggle-cell/ToggleCell.js.map +1 -1
- package/esm/column-header-pill/ColumnHeaderPill.css.js +1 -1
- package/esm/column-header-pill/ColumnHeaderPill.js.map +1 -1
- package/esm/column-header-pill/GroupColumnPill.js.map +1 -1
- package/esm/column-header-pill/SortIndicator.js.map +1 -1
- package/esm/column-menu/ColumnMenu.js.map +1 -1
- package/esm/column-resizing/ColumnResizer.js.map +1 -1
- package/esm/column-resizing/useTableColumnResize.js.map +1 -1
- package/esm/context-menu/buildContextMenuDescriptors.js.map +1 -1
- package/esm/context-menu/useHandleTableContextMenu.js.map +1 -1
- package/esm/header-cell/GroupHeaderCell.js.map +1 -1
- package/esm/header-cell/HeaderCell.js.map +1 -1
- package/esm/index.js +2 -1
- package/esm/index.js.map +1 -1
- package/esm/moving-window.js +1 -1
- package/esm/moving-window.js.map +1 -1
- package/esm/pagination/PaginationControl.js.map +1 -1
- package/esm/pagination/usePagination.js.map +1 -1
- package/esm/table-cell/TableCell.js +8 -3
- package/esm/table-cell/TableCell.js.map +1 -1
- package/esm/table-cell/TableGroupCell.css.js +1 -1
- package/esm/table-cell/TableGroupCell.js +5 -2
- package/esm/table-cell/TableGroupCell.js.map +1 -1
- package/esm/table-config.js.map +1 -1
- package/esm/table-dom-utils.js.map +1 -1
- package/esm/table-header/HeaderProvider.js.map +1 -1
- package/esm/table-header/TableHeader.js +6 -9
- package/esm/table-header/TableHeader.js.map +1 -1
- package/esm/table-header/useTableHeader.js.map +1 -1
- package/esm/useCell.js.map +1 -1
- package/esm/useCellEditing.js.map +1 -1
- package/esm/useCellFocus.js.map +1 -1
- package/esm/useControlledTableNavigation.js.map +1 -1
- package/esm/useDataSource.js +29 -3
- package/esm/useDataSource.js.map +1 -1
- package/esm/useEditableCell.js.map +1 -1
- package/esm/useHighlighting.js +31 -0
- package/esm/useHighlighting.js.map +1 -0
- package/esm/useKeyboardNavigation.js.map +1 -1
- package/esm/useMeasuredHeight.js.map +1 -1
- package/esm/useRowClassNameGenerators.js.map +1 -1
- package/esm/useSelection.js +2 -1
- package/esm/useSelection.js.map +1 -1
- package/esm/useTable.js +28 -12
- package/esm/useTable.js.map +1 -1
- package/esm/useTableAndColumnSettings.js.map +1 -1
- package/esm/useTableContextMenu.js.map +1 -1
- package/esm/useTableModel.js +14 -6
- package/esm/useTableModel.js.map +1 -1
- package/esm/useTableScroll.js.map +1 -1
- package/esm/useTableViewport.js.map +1 -1
- package/package.json +12 -12
- package/types/Row.d.ts +2 -3
- package/types/Table.d.ts +46 -3
- package/types/VirtualColSpan.d.ts +0 -1
- package/types/bulk-edit/BulkEditDialog.d.ts +9 -0
- package/types/bulk-edit/BulkEditRow.d.ts +1 -1
- package/types/bulk-edit/index.d.ts +1 -1
- package/types/bulk-edit/useBulkEditRow.d.ts +1 -1
- package/types/cell-renderers/checkbox-cell/CheckboxCell.d.ts +1 -2
- package/types/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.d.ts +0 -1
- package/types/cell-renderers/input-cell/InputCell.d.ts +1 -2
- package/types/cell-renderers/toggle-cell/ToggleCell.d.ts +0 -1
- package/types/column-header-pill/ColumnHeaderPill.d.ts +1 -1
- package/types/column-header-pill/GroupColumnPill.d.ts +1 -2
- package/types/column-header-pill/SortIndicator.d.ts +1 -2
- package/types/column-menu/ColumnMenu.d.ts +1 -1
- package/types/column-resizing/ColumnResizer.d.ts +1 -2
- package/types/header-cell/GroupHeaderCell.d.ts +1 -2
- package/types/header-cell/HeaderCell.d.ts +1 -2
- package/types/index.d.ts +1 -0
- package/types/table-cell/TableCell.d.ts +1 -2
- package/types/table-cell/TableGroupCell.d.ts +1 -2
- package/types/table-header/HeaderProvider.d.ts +4 -2
- package/types/table-header/TableHeader.d.ts +1 -2
- package/types/table-header/useTableHeader.d.ts +0 -1
- package/types/useCell.d.ts +0 -1
- package/types/useControlledTableNavigation.d.ts +1 -1
- package/types/useDataSource.d.ts +4 -6
- package/types/useHighlighting.d.ts +1 -0
- package/types/useSelection.d.ts +3 -4
- package/types/useTable.d.ts +13 -13
- package/types/useTableModel.d.ts +13 -7
- package/cjs/bulk-edit/BulkEditPanelDialog.js.map +0 -1
- package/esm/bulk-edit/BulkEditPanelDialog.js.map +0 -1
- package/types/bulk-edit/BulkEditPanelDialog.d.ts +0 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxRowSelectorCell.js","sources":["../../../src/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { isRowSelected, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxRowSelectorCss from \"./CheckboxRowSelectorCell.css\";\n\nexport const CheckboxRowSelectorCell: React.FC<TableCellRendererProps> = ({\n row,\n}) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-checkbox-row-selector-cell\",\n css: checkboxRowSelectorCss,\n window: targetWindow,\n });\n\n const isChecked = isRowSelected(row);\n\n return <Checkbox checked={isChecked} className=\"vuuCheckboxRowSelector\" />;\n};\nCheckboxRowSelectorCell.displayName = \"CheckboxCell\";\n\nregisterComponent(\n \"checkbox-row-selector-cell\",\n CheckboxRowSelectorCell,\n \"cell-renderer\",\n {\n serverDataType: \"boolean\",\n },\n);\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,0BAA4D,CAAC;AAAA,EACxE
|
|
1
|
+
{"version":3,"file":"CheckboxRowSelectorCell.js","sources":["../../../src/cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { isRowSelected, registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Checkbox } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport checkboxRowSelectorCss from \"./CheckboxRowSelectorCell.css\";\n\nexport const CheckboxRowSelectorCell: React.FC<TableCellRendererProps> = ({\n row,\n}) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-checkbox-row-selector-cell\",\n css: checkboxRowSelectorCss,\n window: targetWindow,\n });\n\n const isChecked = isRowSelected(row);\n\n return <Checkbox checked={isChecked} className=\"vuuCheckboxRowSelector\" />;\n};\nCheckboxRowSelectorCell.displayName = \"CheckboxCell\";\n\nregisterComponent(\n \"checkbox-row-selector-cell\",\n CheckboxRowSelectorCell,\n \"cell-renderer\",\n {\n serverDataType: \"boolean\",\n },\n);\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,0BAA4D,CAAC;AAAA,EACxE;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gCAAA;AAAA,IACR,GAAK,EAAA,sBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,cAAc,GAAG,CAAA;AAEnC,EAAA,uBAAQ,GAAA,CAAA,QAAA,EAAA,EAAS,OAAS,EAAA,SAAA,EAAW,WAAU,wBAAyB,EAAA,CAAA;AAC1E;AACA,uBAAA,CAAwB,WAAc,GAAA,cAAA;AAEtC,iBAAA;AAAA,EACE,4BAAA;AAAA,EACA,uBAAA;AAAA,EACA,eAAA;AAAA,EACA;AAAA,IACE,cAAgB,EAAA;AAAA;AAEpB,CAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputCell.js","sources":["../../../src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input-cell\",\n css: inputCellCss,\n window: targetWindow,\n });\n\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as number | string;\n const { align = \"left\", clientSideEditValidationCheck } = column;\n\n const { warningMessage, ...editProps } = useEditableText({\n value: dataValue,\n onEdit,\n clientSideEditValidationCheck,\n });\n\n const endAdornment =\n warningMessage && align === \"left\" ? (\n <span className={`${classBase}-icon`} data-icon=\"error\" />\n ) : undefined;\n\n const startAdornment =\n warningMessage && align === \"right\" ? (\n <span className={`${classBase}-icon`} data-icon=\"error\" />\n ) : undefined;\n\n return (\n <Input\n {...editProps}\n className={cx(classBase, {\n [`${classBase}-error`]: warningMessage !== undefined,\n })}\n endAdornment={endAdornment}\n startAdornment={startAdornment}\n />\n );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":[],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,mBAAA
|
|
1
|
+
{"version":3,"file":"InputCell.js","sources":["../../../src/cell-renderers/input-cell/InputCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useEditableText } from \"@vuu-ui/vuu-ui-controls\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport inputCellCss from \"./InputCell.css\";\n\nconst classBase = \"vuuTableInputCell\";\n\nexport const InputCell = ({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input-cell\",\n css: inputCellCss,\n window: targetWindow,\n });\n\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as number | string;\n const { align = \"left\", clientSideEditValidationCheck } = column;\n\n const { warningMessage, ...editProps } = useEditableText({\n value: dataValue,\n onEdit,\n clientSideEditValidationCheck,\n });\n\n const endAdornment =\n warningMessage && align === \"left\" ? (\n <span className={`${classBase}-icon`} data-icon=\"error\" />\n ) : undefined;\n\n const startAdornment =\n warningMessage && align === \"right\" ? (\n <span className={`${classBase}-icon`} data-icon=\"error\" />\n ) : undefined;\n\n return (\n <Input\n {...editProps}\n className={cx(classBase, {\n [`${classBase}-error`]: warningMessage !== undefined,\n })}\n endAdornment={endAdornment}\n startAdornment={startAdornment}\n />\n );\n};\n\nregisterComponent(\"input-cell\", InputCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":[],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,mBAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA;AAC7B,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAQ,EAAA,6BAAA,EAAkC,GAAA,MAAA;AAE1D,EAAA,MAAM,EAAE,cAAA,EAAgB,GAAG,SAAA,KAAc,eAAgB,CAAA;AAAA,IACvD,KAAO,EAAA,SAAA;AAAA,IACP,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,MAAA,mBACzB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EAAA,MAAM,cACJ,GAAA,cAAA,IAAkB,KAAU,KAAA,OAAA,mBACzB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EAAS,WAAU,EAAA,OAAA,EAAQ,CACtD,GAAA,KAAA,CAAA;AAEN,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,QACvB,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,cAAmB,KAAA,KAAA;AAAA,OAC5C,CAAA;AAAA,MACD,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAEA,iBAAkB,CAAA,YAAA,EAAc,WAAW,eAAiB,EAAA;AAAA,EAC1D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleCell.js","sources":["../../../src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n isTypeDescriptor,\n isValueListRenderer,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport toggleCellCss from \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n return type.renderer.values;\n } else {\n throw Error(\n `useLookupValues column ${name} has not been configured with a values list`,\n );\n }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-toggle-cell\",\n css: toggleCellCss,\n window: targetWindow,\n });\n\n const values = getValueList(column);\n const dataIdx = columnMap[column.name];\n const value = row[dataIdx] as string;\n\n const handleCommit = useCallback(\n async (evt, newValue) => {\n const res = await onEdit?.(\n { previousValue: value, value: newValue },\n \"commit\",\n );\n if (res === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n return res;\n },\n [onEdit, value],\n );\n\n return (\n <CycleStateButton\n className={cx(classBase, `${classBase}-${column.name}`)}\n onCommit={handleCommit}\n value={value}\n values={values}\n variant=\"cta\"\n >\n {value}\n </CycleStateButton>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["ToggleCell"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ToggleCell.js","sources":["../../../src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n CommitHandler,\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n isTypeDescriptor,\n isValueListRenderer,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport toggleCellCss from \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n return type.renderer.values;\n } else {\n throw Error(\n `useLookupValues column ${name} has not been configured with a values list`,\n );\n }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-toggle-cell\",\n css: toggleCellCss,\n window: targetWindow,\n });\n\n const values = getValueList(column);\n const dataIdx = columnMap[column.name];\n const value = row[dataIdx] as string;\n\n const handleCommit = useCallback<CommitHandler<HTMLButtonElement>>(\n async (evt, newValue) => {\n const res = await onEdit?.(\n { previousValue: value, value: newValue },\n \"commit\",\n );\n if (res === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n return res;\n },\n [onEdit, value],\n );\n\n return (\n <CycleStateButton\n className={cx(classBase, `${classBase}-${column.name}`)}\n onCommit={handleCommit}\n value={value}\n values={values}\n variant=\"cta\"\n >\n {value}\n </CycleStateButton>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["ToggleCell"],"mappings":";;;;;;;;;AAqBA,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAI,iBAAiB,IAAI,CAAA,IAAK,mBAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA;AAAA,KAChC;AAAA;AAEJ,CAAA;AAEa,MAAA,UAAA,GAAa,IAAK,CAAA,SAASA,WAAW,CAAA;AAAA,EACjD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA;AAClC,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA;AAEzB,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,OAAO,KAAK,QAAa,KAAA;AACvB,MAAA,MAAM,MAAM,MAAM,MAAA;AAAA,QAChB,EAAE,aAAA,EAAe,KAAO,EAAA,KAAA,EAAO,QAAS,EAAA;AAAA,QACxC;AAAA,OACF;AACA,MAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,QAAoB,mBAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAE7D,MAAO,OAAA,GAAA;AAAA,KACT;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,GAChB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,MACtD,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAQ,EAAA,KAAA;AAAA,MAEP,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAA,EAAG,yBAAyB;AAE5B,iBAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var columnHeaderPillCss = ".vuuColumnHeaderPill {\n
|
|
1
|
+
var columnHeaderPillCss = ".vuuColumnHeaderPill {\n --vuu-icon-size: 14px;\n --menu-item-icon-color: black;\n --vuu-icon-color: var(--salt-actionable-bold-foreground);\n --vuu-icon-height: 12px;\n --vuu-icon-width: 12px;\n align-items: center;\n background: var(--salt-actionable-bold-background);\n color: var(--salt-actionable-bold-foreground);\n border-radius: 4px;\n flex: var(--vuuColumnHeaderPill-flex, none);\n font-size: 11px;\n gap: 4px;\n height: 16px;\n display: flex;\n margin: var(--vuuColumnHeaderPill-margin, 0);\n padding: 0 6px;\n position: relative;\n}\n\n.vuuColumnHeaderPill:hover {\n --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n background-color: var(--salt-actionable-bold-background-hover);\n color: var(--salt-actionable-bold-foreground-hover);\n}\n\n.vuuColumnHeaderPill-removeButton {\n cursor: pointer;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { columnHeaderPillCss as default };
|
|
4
4
|
//# sourceMappingURL=ColumnHeaderPill.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnHeaderPill.js","sources":["../../src/column-header-pill/ColumnHeaderPill.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, MouseEvent, useCallback } from \"react\";\n\nimport columnHeaderPillCss from \"./ColumnHeaderPill.css\";\n\nexport interface ColumnHeaderPillProps extends HTMLAttributes<HTMLDivElement> {\n column: RuntimeColumnDescriptor;\n removable?: boolean;\n onRemove?: (column: RuntimeColumnDescriptor) => void;\n}\n\nconst classBase = \"vuuColumnHeaderPill\";\n\nexport const ColumnHeaderPill = ({\n children,\n className,\n column,\n onRemove,\n removable,\n ...htmlAttributes\n}: ColumnHeaderPillProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-header-pill\",\n css: columnHeaderPillCss,\n window: targetWindow,\n });\n\n if (removable && typeof onRemove !== \"function\") {\n throw Error(\n \"ColumnHeaderPill onRemove prop must be provided if Pill is removable\",\n );\n }\n\n const handleClickRemove = useCallback(\n (evt: MouseEvent<HTMLSpanElement>) => {\n evt.preventDefault();\n evt.stopPropagation();\n onRemove?.(column);\n },\n [column, onRemove],\n );\n\n return (\n <div {...htmlAttributes} className={cx(classBase, className)} tabIndex={-1}>\n {children}\n {removable ? (\n <span\n className={`${classBase}-removeButton`}\n role=\"button\"\n data-icon=\"cross\"\n onClick={handleClickRemove}\n />\n ) : null}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,SAAY,GAAA,qBAAA
|
|
1
|
+
{"version":3,"file":"ColumnHeaderPill.js","sources":["../../src/column-header-pill/ColumnHeaderPill.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, MouseEvent, useCallback } from \"react\";\n\nimport columnHeaderPillCss from \"./ColumnHeaderPill.css\";\n\nexport interface ColumnHeaderPillProps extends HTMLAttributes<HTMLDivElement> {\n column: RuntimeColumnDescriptor;\n removable?: boolean;\n onRemove?: (column: RuntimeColumnDescriptor) => void;\n}\n\nconst classBase = \"vuuColumnHeaderPill\";\n\nexport const ColumnHeaderPill = ({\n children,\n className,\n column,\n onRemove,\n removable,\n ...htmlAttributes\n}: ColumnHeaderPillProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-header-pill\",\n css: columnHeaderPillCss,\n window: targetWindow,\n });\n\n if (removable && typeof onRemove !== \"function\") {\n throw Error(\n \"ColumnHeaderPill onRemove prop must be provided if Pill is removable\",\n );\n }\n\n const handleClickRemove = useCallback(\n (evt: MouseEvent<HTMLSpanElement>) => {\n evt.preventDefault();\n evt.stopPropagation();\n onRemove?.(column);\n },\n [column, onRemove],\n );\n\n return (\n <div {...htmlAttributes} className={cx(classBase, className)} tabIndex={-1}>\n {children}\n {removable ? (\n <span\n className={`${classBase}-removeButton`}\n role=\"button\"\n data-icon=\"cross\"\n onClick={handleClickRemove}\n />\n ) : null}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,SAAY,GAAA,qBAAA;AAEX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,SAAA,IAAa,OAAO,QAAA,KAAa,UAAY,EAAA;AAC/C,IAAM,MAAA,KAAA;AAAA,MACJ;AAAA,KACF;AAAA;AAGF,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,GAAqC,KAAA;AACpC,MAAA,GAAA,CAAI,cAAe,EAAA;AACnB,MAAA,GAAA,CAAI,eAAgB,EAAA;AACpB,MAAA,QAAA,GAAW,MAAM,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,QAAQ,QAAQ;AAAA,GACnB;AAEA,EACE,uBAAA,IAAA,CAAC,KAAK,EAAA,EAAA,GAAG,cAAgB,EAAA,SAAA,EAAW,GAAG,SAAW,EAAA,SAAS,CAAG,EAAA,QAAA,EAAU,CACrE,CAAA,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SACC,mBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,QACvB,IAAK,EAAA,QAAA;AAAA,QACL,WAAU,EAAA,OAAA;AAAA,QACV,OAAS,EAAA;AAAA;AAAA,KAET,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupColumnPill.js","sources":["../../src/column-header-pill/GroupColumnPill.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { ColumnHeaderPill, ColumnHeaderPillProps } from \"./ColumnHeaderPill\";\n\nimport groupColumnPillCss from \"./GroupColumnPill.css\";\n\nexport interface GroupColumnPillProps extends ColumnHeaderPillProps {\n column: RuntimeColumnDescriptor;\n}\n\nexport const GroupColumnPill = ({\n column,\n ...columnHeaderProps\n}: GroupColumnPillProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-group-column-pill\",\n css: groupColumnPillCss,\n window: targetWindow,\n });\n\n const { name, sorted } = column;\n const icon =\n typeof sorted === \"number\"\n ? sorted < 0\n ? \"arrow-down\"\n : \"arrow-up\"\n : sorted === \"A\"\n ? \"arrow-up\"\n : sorted === \"D\"\n ? \"arrow-down\"\n : undefined;\n\n return (\n <ColumnHeaderPill {...columnHeaderProps} column={column}>\n <span className=\"vuuGroupColumnPill-label\">{name}</span>\n {icon !== undefined ? <span data-icon={icon} /> : null}\n {typeof sorted === \"number\" ? (\n <span className={\"vuuSortPosition\"}>{Math.abs(sorted)}</span>\n ) : null}\n </ColumnHeaderPill>\n );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,MAAA;AAAA,EACA,GAAG
|
|
1
|
+
{"version":3,"file":"GroupColumnPill.js","sources":["../../src/column-header-pill/GroupColumnPill.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { ColumnHeaderPill, ColumnHeaderPillProps } from \"./ColumnHeaderPill\";\n\nimport groupColumnPillCss from \"./GroupColumnPill.css\";\n\nexport interface GroupColumnPillProps extends ColumnHeaderPillProps {\n column: RuntimeColumnDescriptor;\n}\n\nexport const GroupColumnPill = ({\n column,\n ...columnHeaderProps\n}: GroupColumnPillProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-group-column-pill\",\n css: groupColumnPillCss,\n window: targetWindow,\n });\n\n const { name, sorted } = column;\n const icon =\n typeof sorted === \"number\"\n ? sorted < 0\n ? \"arrow-down\"\n : \"arrow-up\"\n : sorted === \"A\"\n ? \"arrow-up\"\n : sorted === \"D\"\n ? \"arrow-down\"\n : undefined;\n\n return (\n <ColumnHeaderPill {...columnHeaderProps} column={column}>\n <span className=\"vuuGroupColumnPill-label\">{name}</span>\n {icon !== undefined ? <span data-icon={icon} /> : null}\n {typeof sorted === \"number\" ? (\n <span className={\"vuuSortPosition\"}>{Math.abs(sorted)}</span>\n ) : null}\n </ColumnHeaderPill>\n );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,MAAA;AAAA,EACA,GAAG;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,IAAM,EAAA,MAAA,EAAW,GAAA,MAAA;AACzB,EAAA,MAAM,IACJ,GAAA,OAAO,MAAW,KAAA,QAAA,GACd,MAAS,GAAA,CAAA,GACP,YACA,GAAA,UAAA,GACF,MAAW,KAAA,GAAA,GACT,UACA,GAAA,MAAA,KAAW,MACT,YACA,GAAA,KAAA,CAAA;AAEV,EAAA,uBACG,IAAA,CAAA,gBAAA,EAAA,EAAkB,GAAG,iBAAA,EAAmB,MACvC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,0BAAA,EAA4B,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,IAChD,SAAS,KAAY,CAAA,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAW,MAAM,CAAK,GAAA,IAAA;AAAA,IACjD,OAAO,MAAW,KAAA,QAAA,mBAChB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAM,CAAA,EAAE,CACpD,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortIndicator.js","sources":["../../src/column-header-pill/SortIndicator.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnHeaderPill } from \"./ColumnHeaderPill\";\n\nimport sortIndicatorCss from \"./SortIndicator.css\";\n\nexport interface SortIndicatorProps {\n column: RuntimeColumnDescriptor;\n}\n\nexport const SortIndicator = ({ column }: SortIndicatorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-sort-indicator\",\n css: sortIndicatorCss,\n window: targetWindow,\n });\n\n if (!column.sorted) {\n return null;\n }\n\n const icon =\n typeof column.sorted === \"number\"\n ? column.sorted < 0\n ? \"arrow-down\"\n : \"arrow-up\"\n : column.sorted === \"A\"\n ? \"arrow-up\"\n : \"arrow-down\";\n\n return (\n <ColumnHeaderPill column={column}>\n <span data-icon={icon} />\n {typeof column.sorted === \"number\" ? (\n <span className={\"vuuSortPosition\"}>{Math.abs(column.sorted)}</span>\n ) : null}\n </ColumnHeaderPill>\n );\n};\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAiC,KAAA;AAC/D,EAAA,MAAM,eAAe,SAAU,EAAA
|
|
1
|
+
{"version":3,"file":"SortIndicator.js","sources":["../../src/column-header-pill/SortIndicator.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnHeaderPill } from \"./ColumnHeaderPill\";\n\nimport sortIndicatorCss from \"./SortIndicator.css\";\n\nexport interface SortIndicatorProps {\n column: RuntimeColumnDescriptor;\n}\n\nexport const SortIndicator = ({ column }: SortIndicatorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-sort-indicator\",\n css: sortIndicatorCss,\n window: targetWindow,\n });\n\n if (!column.sorted) {\n return null;\n }\n\n const icon =\n typeof column.sorted === \"number\"\n ? column.sorted < 0\n ? \"arrow-down\"\n : \"arrow-up\"\n : column.sorted === \"A\"\n ? \"arrow-up\"\n : \"arrow-down\";\n\n return (\n <ColumnHeaderPill column={column}>\n <span data-icon={icon} />\n {typeof column.sorted === \"number\" ? (\n <span className={\"vuuSortPosition\"}>{Math.abs(column.sorted)}</span>\n ) : null}\n </ColumnHeaderPill>\n );\n};\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,aAAgB,GAAA,CAAC,EAAE,MAAA,EAAiC,KAAA;AAC/D,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,CAAC,OAAO,MAAQ,EAAA;AAClB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,IACJ,GAAA,OAAO,MAAO,CAAA,MAAA,KAAW,QACrB,GAAA,MAAA,CAAO,MAAS,GAAA,CAAA,GACd,YACA,GAAA,UAAA,GACF,MAAO,CAAA,MAAA,KAAW,MAChB,UACA,GAAA,YAAA;AAER,EACE,uBAAA,IAAA,CAAC,oBAAiB,MAChB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,aAAW,IAAM,EAAA,CAAA;AAAA,IACtB,OAAO,MAAA,CAAO,MAAW,KAAA,QAAA,mBACvB,GAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,iBAAA,EAAoB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,MAAO,CAAA,MAAM,GAAE,CAC3D,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n column: RuntimeColumnDescriptor;\n}\n\nexport const ColumnMenu = ({ className, column }: ColumnMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-menu\",\n css: columnMenuCss,\n window: targetWindow,\n });\n\n return (\n <PopupMenu\n className={cx(classBase, className)}\n data-embedded\n menuLocation=\"column-menu\"\n menuOptions={{ column }}\n tabIndex={-1}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,eAAA
|
|
1
|
+
{"version":3,"file":"ColumnMenu.js","sources":["../../src/column-menu/ColumnMenu.tsx"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { PopupMenu } from \"@vuu-ui/vuu-popups\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport columnMenuCss from \"./ColumnMenu.css\";\n\nconst classBase = \"vuuColumnMenu\";\nexport interface ColumnMenuProps extends HTMLAttributes<HTMLSpanElement> {\n column: RuntimeColumnDescriptor;\n}\n\nexport const ColumnMenu = ({ className, column }: ColumnMenuProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-menu\",\n css: columnMenuCss,\n window: targetWindow,\n });\n\n return (\n <PopupMenu\n className={cx(classBase, className)}\n data-embedded\n menuLocation=\"column-menu\"\n menuOptions={{ column }}\n tabIndex={-1}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,eAAA;AAKX,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAW,QAA8B,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,eAAa,EAAA,IAAA;AAAA,MACb,YAAa,EAAA,aAAA;AAAA,MACb,WAAA,EAAa,EAAE,MAAO,EAAA;AAAA,MACtB,QAAU,EAAA,CAAA;AAAA;AAAA,GACZ;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnResizer.js","sources":["../../src/column-resizing/ColumnResizer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useRef } from \"react\";\n\nimport columnResizerCss from \"./ColumnResizer.css\";\n\nconst NOOP = () => undefined;\n\nconst baseClass = \"vuuColumnResizer\";\nexport interface TableColumnResizerProps {\n onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n onDragEnd: (evt: MouseEvent, totalDistanceMoved: number) => void;\n onDragStart: (evt: React.MouseEvent) => void;\n}\n\nexport const ColumnResizer = ({\n onDrag,\n onDragEnd = NOOP,\n onDragStart = NOOP,\n}: TableColumnResizerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-resizer\",\n css: columnResizerCss,\n window: targetWindow,\n });\n\n const positionRef = useRef({ start: 0, now: 0 });\n\n const onMouseMove = useCallback(\n (e: MouseEvent) => {\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n\n if (e.preventDefault) {\n e.preventDefault();\n }\n\n const { current: position } = positionRef;\n\n const x = Math.round(e.clientX);\n const moveBy = x - position.now;\n const distanceMoved = position.now - position.start;\n\n positionRef.current.now = x;\n\n if (moveBy !== 0) {\n onDrag(e, moveBy, distanceMoved);\n }\n },\n [onDrag]\n );\n\n const onMouseUp = useCallback(\n (e: MouseEvent) => {\n window.removeEventListener(\"mouseup\", onMouseUp);\n window.removeEventListener(\"mousemove\", onMouseMove);\n\n const { current: position } = positionRef;\n const distanceMoved = position.now - position.start;\n onDragEnd(e, distanceMoved);\n },\n [onDragEnd, onMouseMove]\n );\n\n const handleMouseDown = useCallback(\n (e: React.MouseEvent) => {\n const { current: position } = positionRef;\n onDragStart(e);\n position.now = position.start = Math.round(e.clientX);\n\n window.addEventListener(\"mouseup\", onMouseUp);\n window.addEventListener(\"mousemove\", onMouseMove);\n\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n\n if (e.preventDefault) {\n e.preventDefault();\n }\n },\n [onDragStart, onMouseMove, onMouseUp]\n );\n\n return <div className={baseClass} onMouseDown={handleMouseDown} />;\n};\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,OAAO,MAAM,KAAA,CAAA
|
|
1
|
+
{"version":3,"file":"ColumnResizer.js","sources":["../../src/column-resizing/ColumnResizer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useRef } from \"react\";\n\nimport columnResizerCss from \"./ColumnResizer.css\";\n\nconst NOOP = () => undefined;\n\nconst baseClass = \"vuuColumnResizer\";\nexport interface TableColumnResizerProps {\n onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n onDragEnd: (evt: MouseEvent, totalDistanceMoved: number) => void;\n onDragStart: (evt: React.MouseEvent) => void;\n}\n\nexport const ColumnResizer = ({\n onDrag,\n onDragEnd = NOOP,\n onDragStart = NOOP,\n}: TableColumnResizerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-resizer\",\n css: columnResizerCss,\n window: targetWindow,\n });\n\n const positionRef = useRef({ start: 0, now: 0 });\n\n const onMouseMove = useCallback(\n (e: MouseEvent) => {\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n\n if (e.preventDefault) {\n e.preventDefault();\n }\n\n const { current: position } = positionRef;\n\n const x = Math.round(e.clientX);\n const moveBy = x - position.now;\n const distanceMoved = position.now - position.start;\n\n positionRef.current.now = x;\n\n if (moveBy !== 0) {\n onDrag(e, moveBy, distanceMoved);\n }\n },\n [onDrag]\n );\n\n const onMouseUp = useCallback(\n (e: MouseEvent) => {\n window.removeEventListener(\"mouseup\", onMouseUp);\n window.removeEventListener(\"mousemove\", onMouseMove);\n\n const { current: position } = positionRef;\n const distanceMoved = position.now - position.start;\n onDragEnd(e, distanceMoved);\n },\n [onDragEnd, onMouseMove]\n );\n\n const handleMouseDown = useCallback(\n (e: React.MouseEvent) => {\n const { current: position } = positionRef;\n onDragStart(e);\n position.now = position.start = Math.round(e.clientX);\n\n window.addEventListener(\"mouseup\", onMouseUp);\n window.addEventListener(\"mousemove\", onMouseMove);\n\n if (e.stopPropagation) {\n e.stopPropagation();\n }\n\n if (e.preventDefault) {\n e.preventDefault();\n }\n },\n [onDragStart, onMouseMove, onMouseUp]\n );\n\n return <div className={baseClass} onMouseDown={handleMouseDown} />;\n};\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,OAAO,MAAM,KAAA,CAAA;AAEnB,MAAM,SAAY,GAAA,kBAAA;AAOX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,MAAA;AAAA,EACA,SAAY,GAAA,IAAA;AAAA,EACZ,WAAc,GAAA;AAChB,CAA+B,KAAA;AAC7B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAc,MAAO,CAAA,EAAE,OAAO,CAAG,EAAA,GAAA,EAAK,GAAG,CAAA;AAE/C,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,CAAkB,KAAA;AACjB,MAAA,IAAI,EAAE,eAAiB,EAAA;AACrB,QAAA,CAAA,CAAE,eAAgB,EAAA;AAAA;AAGpB,MAAA,IAAI,EAAE,cAAgB,EAAA;AACpB,QAAA,CAAA,CAAE,cAAe,EAAA;AAAA;AAGnB,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA;AAE9B,MAAA,MAAM,CAAI,GAAA,IAAA,CAAK,KAAM,CAAA,CAAA,CAAE,OAAO,CAAA;AAC9B,MAAM,MAAA,MAAA,GAAS,IAAI,QAAS,CAAA,GAAA;AAC5B,MAAM,MAAA,aAAA,GAAgB,QAAS,CAAA,GAAA,GAAM,QAAS,CAAA,KAAA;AAE9C,MAAA,WAAA,CAAY,QAAQ,GAAM,GAAA,CAAA;AAE1B,MAAA,IAAI,WAAW,CAAG,EAAA;AAChB,QAAO,MAAA,CAAA,CAAA,EAAG,QAAQ,aAAa,CAAA;AAAA;AACjC,KACF;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,CAAkB,KAAA;AACjB,MAAO,MAAA,CAAA,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAC/C,MAAO,MAAA,CAAA,mBAAA,CAAoB,aAAa,WAAW,CAAA;AAEnD,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA;AAC9B,MAAM,MAAA,aAAA,GAAgB,QAAS,CAAA,GAAA,GAAM,QAAS,CAAA,KAAA;AAC9C,MAAA,SAAA,CAAU,GAAG,aAAa,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,WAAW,WAAW;AAAA,GACzB;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,CAAwB,KAAA;AACvB,MAAM,MAAA,EAAE,OAAS,EAAA,QAAA,EAAa,GAAA,WAAA;AAC9B,MAAA,WAAA,CAAY,CAAC,CAAA;AACb,MAAA,QAAA,CAAS,MAAM,QAAS,CAAA,KAAA,GAAQ,IAAK,CAAA,KAAA,CAAM,EAAE,OAAO,CAAA;AAEpD,MAAO,MAAA,CAAA,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC5C,MAAO,MAAA,CAAA,gBAAA,CAAiB,aAAa,WAAW,CAAA;AAEhD,MAAA,IAAI,EAAE,eAAiB,EAAA;AACrB,QAAA,CAAA,CAAE,eAAgB,EAAA;AAAA;AAGpB,MAAA,IAAI,EAAE,cAAgB,EAAA;AACpB,QAAA,CAAA,CAAE,cAAe,EAAA;AAAA;AACnB,KACF;AAAA,IACA,CAAC,WAAa,EAAA,WAAA,EAAa,SAAS;AAAA,GACtC;AAEA,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,aAAa,eAAiB,EAAA,CAAA;AAClE;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableColumnResize.js","sources":["../../src/column-resizing/useTableColumnResize.tsx"],"sourcesContent":["import {\n Heading,\n ResizePhase,\n RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { RefObject, useCallback, useRef, useState } from \"react\";\n\nexport type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;\nexport interface CellResizeHookProps {\n column: RuntimeColumnDescriptor | Heading;\n onResize?: (phase: ResizePhase, columnName: string, width?: number) => void;\n rootRef: RefObject<HTMLDivElement>;\n}\n\nexport interface CellResizeHookResult {\n isResizing: boolean;\n onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n onDragStart: (evt: React.MouseEvent) => void;\n onDragEnd: (evt: MouseEvent) => void;\n}\n\nexport const useTableColumnResize = ({\n column,\n onResize,\n rootRef,\n}: CellResizeHookProps): CellResizeHookResult => {\n const widthRef = useRef({ start: 0, now: 0 });\n\n const [isResizing, setResizing] = useState(false);\n const { name } = column;\n\n const handleResizeStart = useCallback(() => {\n if (onResize && rootRef.current) {\n const { current: width } = widthRef;\n const { width: measuredWidth } = rootRef.current.getBoundingClientRect();\n width.start = width.now = Math.round(measuredWidth);\n setResizing(true);\n onResize?.(\"begin\", name);\n }\n }, [name, onResize, rootRef]);\n\n const handleResize = useCallback(\n (_evt: MouseEvent, moveBy: number, totalDistanceMoved) => {\n if (rootRef.current) {\n if (onResize) {\n const { current: width } = widthRef;\n const newWidth = width.start + totalDistanceMoved;\n if (newWidth !== width.now && newWidth > 0) {\n onResize(\"resize\", name, newWidth);\n width.now = newWidth;\n }\n }\n }\n },\n [name, onResize, rootRef],\n );\n\n const handleResizeEnd = useCallback(() => {\n if (onResize) {\n const { current: width } = widthRef;\n onResize(\"end\", name, width.now);\n setTimeout(() => {\n // clickHandler in HeaderCell checks isResizing before firing. Because onMouseUp\n // fires before click, we need to delay setting isResizing back to false, just\n // long enough that the click ghandler will have fired.\n setResizing(false);\n }, 80);\n }\n }, [name, onResize]);\n\n return {\n isResizing,\n onDrag: handleResize,\n onDragStart: handleResizeStart,\n onDragEnd: handleResizeEnd,\n };\n};\n"],"names":[],"mappings":";;AAqBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA,QAAA;AAAA,EACA
|
|
1
|
+
{"version":3,"file":"useTableColumnResize.js","sources":["../../src/column-resizing/useTableColumnResize.tsx"],"sourcesContent":["import {\n Heading,\n ResizePhase,\n RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { RefObject, useCallback, useRef, useState } from \"react\";\n\nexport type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;\nexport interface CellResizeHookProps {\n column: RuntimeColumnDescriptor | Heading;\n onResize?: (phase: ResizePhase, columnName: string, width?: number) => void;\n rootRef: RefObject<HTMLDivElement>;\n}\n\nexport interface CellResizeHookResult {\n isResizing: boolean;\n onDrag: (evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => void;\n onDragStart: (evt: React.MouseEvent) => void;\n onDragEnd: (evt: MouseEvent) => void;\n}\n\nexport const useTableColumnResize = ({\n column,\n onResize,\n rootRef,\n}: CellResizeHookProps): CellResizeHookResult => {\n const widthRef = useRef({ start: 0, now: 0 });\n\n const [isResizing, setResizing] = useState(false);\n const { name } = column;\n\n const handleResizeStart = useCallback(() => {\n if (onResize && rootRef.current) {\n const { current: width } = widthRef;\n const { width: measuredWidth } = rootRef.current.getBoundingClientRect();\n width.start = width.now = Math.round(measuredWidth);\n setResizing(true);\n onResize?.(\"begin\", name);\n }\n }, [name, onResize, rootRef]);\n\n const handleResize = useCallback(\n (_evt: MouseEvent, moveBy: number, totalDistanceMoved: number) => {\n if (rootRef.current) {\n if (onResize) {\n const { current: width } = widthRef;\n const newWidth = width.start + totalDistanceMoved;\n if (newWidth !== width.now && newWidth > 0) {\n onResize(\"resize\", name, newWidth);\n width.now = newWidth;\n }\n }\n }\n },\n [name, onResize, rootRef],\n );\n\n const handleResizeEnd = useCallback(() => {\n if (onResize) {\n const { current: width } = widthRef;\n onResize(\"end\", name, width.now);\n setTimeout(() => {\n // clickHandler in HeaderCell checks isResizing before firing. Because onMouseUp\n // fires before click, we need to delay setting isResizing back to false, just\n // long enough that the click ghandler will have fired.\n setResizing(false);\n }, 80);\n }\n }, [name, onResize]);\n\n return {\n isResizing,\n onDrag: handleResize,\n onDragStart: handleResizeStart,\n onDragEnd: handleResizeEnd,\n };\n};\n"],"names":[],"mappings":";;AAqBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAiD,KAAA;AAC/C,EAAA,MAAM,WAAW,MAAO,CAAA,EAAE,OAAO,CAAG,EAAA,GAAA,EAAK,GAAG,CAAA;AAE5C,EAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA;AAEjB,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAI,IAAA,QAAA,IAAY,QAAQ,OAAS,EAAA;AAC/B,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,MAAA,MAAM,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,OAAA,CAAQ,QAAQ,qBAAsB,EAAA;AACvE,MAAA,KAAA,CAAM,KAAQ,GAAA,KAAA,CAAM,GAAM,GAAA,IAAA,CAAK,MAAM,aAAa,CAAA;AAClD,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,QAAA,GAAW,SAAS,IAAI,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,IAAM,EAAA,QAAA,EAAU,OAAO,CAAC,CAAA;AAE5B,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,IAAkB,EAAA,MAAA,EAAgB,kBAA+B,KAAA;AAChE,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,IAAI,QAAU,EAAA;AACZ,UAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,UAAM,MAAA,QAAA,GAAW,MAAM,KAAQ,GAAA,kBAAA;AAC/B,UAAA,IAAI,QAAa,KAAA,KAAA,CAAM,GAAO,IAAA,QAAA,GAAW,CAAG,EAAA;AAC1C,YAAS,QAAA,CAAA,QAAA,EAAU,MAAM,QAAQ,CAAA;AACjC,YAAA,KAAA,CAAM,GAAM,GAAA,QAAA;AAAA;AACd;AACF;AACF,KACF;AAAA,IACA,CAAC,IAAM,EAAA,QAAA,EAAU,OAAO;AAAA,GAC1B;AAEA,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,IAAI,QAAU,EAAA;AACZ,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA;AAC3B,MAAS,QAAA,CAAA,KAAA,EAAO,IAAM,EAAA,KAAA,CAAM,GAAG,CAAA;AAC/B,MAAA,UAAA,CAAW,MAAM;AAIf,QAAA,WAAA,CAAY,KAAK,CAAA;AAAA,SAChB,EAAE,CAAA;AAAA;AACP,GACC,EAAA,CAAC,IAAM,EAAA,QAAQ,CAAC,CAAA;AAEnB,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,MAAQ,EAAA,YAAA;AAAA,IACR,WAAa,EAAA,iBAAA;AAAA,IACb,SAAW,EAAA;AAAA,GACb;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buildContextMenuDescriptors.js","sources":["../../src/context-menu/buildContextMenuDescriptors.ts"],"sourcesContent":["import {\n ContextMenuItemDescriptor,\n DataSource,\n MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { RuntimeColumnDescriptor, PinLocation } from \"@vuu-ui/vuu-table-types\";\nimport { isNumericColumn } from \"@vuu-ui/vuu-utils\";\n\nexport type ContextMenuLocation = \"header\" | \"filter\" | \"grid\";\n\ntype MaybeColumn = { column?: RuntimeColumnDescriptor };\n\nexport const buildContextMenuDescriptors =\n (dataSource?: DataSource): MenuBuilder =>\n (location, options) => {\n const descriptors: ContextMenuItemDescriptor[] = [];\n if (dataSource === undefined) {\n return descriptors;\n }\n //TODO which should it be ?\n if (location === \"header\" || location === \"column-menu\") {\n descriptors.push(\n ...buildSortMenuItems(options as MaybeColumn, dataSource),\n );\n descriptors.push(\n ...buildGroupMenuItems(options as MaybeColumn, dataSource),\n );\n descriptors.push(\n ...buildAggregationMenuItems(options as MaybeColumn, dataSource),\n );\n descriptors.push(...buildColumnDisplayMenuItems(options as MaybeColumn));\n descriptors.push({\n action: \"column-settings\",\n icon: \"settings\",\n label: `Column Settings ...`,\n options,\n });\n descriptors.push({\n action: \"table-settings\",\n icon: \"settings\",\n label: `DataGrid Settings ...`,\n options,\n });\n }\n\n // if (options?.selectedRowCount){\n // // TODO pass the table name\n // const rpcActions = getRpcActions();\n // for (let {label, method} of rpcActions){\n // descriptors.push({action: Action.RpcCall, label, options: {method}})\n // }\n // }\n\n return descriptors;\n };\n\nfunction buildSortMenuItems(\n options: MaybeColumn,\n { sort: { sortDefs } }: DataSource,\n): ContextMenuItemDescriptor[] {\n const { column } = options;\n const menuItems: ContextMenuItemDescriptor[] = [];\n if (column === undefined) {\n return menuItems;\n }\n\n const hasSort = sortDefs.length > 0;\n\n if (column.sorted === \"A\") {\n menuItems.push({\n label: \"Reverse Sort (DSC)\",\n action: \"sort-dsc\",\n options,\n });\n } else if (column.sorted === \"D\") {\n menuItems.push({\n label: \"Reverse Sort (ASC)\",\n action: \"sort-asc\",\n options,\n });\n } else if (typeof column.sorted === \"number\") {\n if (column.sorted > 0) {\n menuItems.push({\n label: \"Reverse Sort (DSC)\",\n action: \"sort-add-dsc\",\n options,\n });\n } else {\n menuItems.push({\n label: \"Reverse Sort (ASC)\",\n action: \"sort-add-asc\",\n options,\n });\n }\n\n // removing the last column from a sort would be a no-op, so pointless\n if (hasSort && Math.abs(column.sorted) < sortDefs.length) {\n menuItems.push({\n label: \"Remove from sort\",\n action: \"sort-remove\",\n options,\n });\n }\n\n menuItems.push({\n label: \"New Sort\",\n children: [\n { label: \"Ascending\", action: \"sort-asc\", options },\n { label: \"Descending\", action: \"sort-dsc\", options },\n ],\n });\n } else if (hasSort) {\n menuItems.push({\n label: \"Add to sort\",\n children: [\n { label: \"Ascending\", action: \"sort-add-asc\", options },\n { label: \"Descending\", action: \"sort-add-dsc\", options },\n ],\n });\n menuItems.push({\n label: \"New Sort\",\n children: [\n { label: \"Ascending\", action: \"sort-asc\", options },\n { label: \"Descending\", action: \"sort-dsc\", options },\n ],\n });\n } else {\n menuItems.push({\n label: \"Sort\",\n children: [\n { label: \"Ascending\", action: \"sort-asc\", options },\n { label: \"Descending\", action: \"sort-dsc\", options },\n ],\n });\n }\n return menuItems;\n}\n\nfunction buildAggregationMenuItems(\n options: MaybeColumn,\n dataSource: DataSource,\n): ContextMenuItemDescriptor[] {\n const { column } = options;\n if (column === undefined || dataSource.groupBy?.length === 0) {\n return [];\n }\n const { name, label = name } = column;\n\n return [\n {\n label: `Aggregate ${label}`,\n children: [\n { label: \"Count\", action: \"agg-count\", options },\n { label: \"Distinct\", action: \"agg-distinct\", options },\n ].concat(\n isNumericColumn(column)\n ? [\n { label: \"Sum\", action: \"agg-sum\", options },\n { label: \"Avg\", action: \"agg-avg\", options },\n { label: \"High\", action: \"agg-high\", options },\n { label: \"Low\", action: \"agg-low\", options },\n ]\n : [],\n ),\n },\n ];\n}\n\nconst pinColumn = (options: unknown, pinLocation: PinLocation) =>\n ({\n label: `Pin ${pinLocation}`,\n action: `column-pin-${pinLocation}`,\n options,\n }) as ContextMenuItemDescriptor;\n\nconst pinLeft = (options: unknown) => pinColumn(options, \"left\");\nconst pinFloating = (options: unknown) => pinColumn(options, \"floating\");\nconst pinRight = (options: unknown) => pinColumn(options, \"right\");\n\nfunction buildColumnDisplayMenuItems(\n options: MaybeColumn,\n): ContextMenuItemDescriptor[] {\n const { column } = options;\n if (column === undefined) {\n return [];\n }\n const { pin } = column;\n\n const menuItems: ContextMenuItemDescriptor[] = [\n {\n label: `Hide column`,\n action: \"column-hide\",\n options,\n },\n {\n label: `Remove column`,\n action: \"column-remove\",\n options,\n },\n ];\n\n if (pin === undefined) {\n menuItems.push({\n label: `Pin column`,\n children: [pinLeft(options), pinFloating(options), pinRight(options)],\n });\n } else if (pin === \"left\") {\n menuItems.push(\n { label: \"Unpin column\", action: \"column-unpin\", options },\n {\n label: `Pin column`,\n children: [pinFloating(options), pinRight(options)],\n },\n );\n } else if (pin === \"right\") {\n menuItems.push(\n { label: \"Unpin column\", action: \"column-unpin\", options },\n {\n label: `Pin column`,\n children: [pinLeft(options), pinFloating(options)],\n },\n );\n } else if (pin === \"floating\") {\n menuItems.push(\n { label: \"Unpin column\", action: \"column-unpin\", options },\n {\n label: `Pin column`,\n children: [pinLeft(options), pinRight(options)],\n },\n );\n }\n\n return menuItems;\n}\n\nfunction buildGroupMenuItems(\n options: MaybeColumn,\n { groupBy }: DataSource,\n): ContextMenuItemDescriptor[] {\n const { column } = options;\n const menuItems: ContextMenuItemDescriptor[] = [];\n if (column === undefined) {\n return menuItems;\n }\n\n const { name, label = name } = column;\n\n if (groupBy?.length === 0) {\n menuItems.push({\n label: `Group by ${label}`,\n action: \"group\",\n options,\n });\n } else {\n menuItems.push({\n label: `Add ${label} to group by`,\n action: \"group-add\",\n options,\n });\n }\n\n return menuItems;\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"buildContextMenuDescriptors.js","sources":["../../src/context-menu/buildContextMenuDescriptors.ts"],"sourcesContent":["import {\n ContextMenuItemDescriptor,\n DataSource,\n MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { RuntimeColumnDescriptor, PinLocation } from \"@vuu-ui/vuu-table-types\";\nimport { isNumericColumn } from \"@vuu-ui/vuu-utils\";\n\nexport type ContextMenuLocation = \"header\" | \"filter\" | \"grid\";\n\ntype MaybeColumn = { column?: RuntimeColumnDescriptor };\n\nexport const buildContextMenuDescriptors =\n (dataSource?: DataSource): MenuBuilder =>\n (location, options) => {\n const descriptors: ContextMenuItemDescriptor[] = [];\n if (dataSource === undefined) {\n return descriptors;\n }\n //TODO which should it be ?\n if (location === \"header\" || location === \"column-menu\") {\n descriptors.push(\n ...buildSortMenuItems(options as MaybeColumn, dataSource),\n );\n descriptors.push(\n ...buildGroupMenuItems(options as MaybeColumn, dataSource),\n );\n descriptors.push(\n ...buildAggregationMenuItems(options as MaybeColumn, dataSource),\n );\n descriptors.push(...buildColumnDisplayMenuItems(options as MaybeColumn));\n descriptors.push({\n action: \"column-settings\",\n icon: \"settings\",\n label: `Column Settings ...`,\n options,\n });\n descriptors.push({\n action: \"table-settings\",\n icon: \"settings\",\n label: `DataGrid Settings ...`,\n options,\n });\n }\n\n // if (options?.selectedRowCount){\n // // TODO pass the table name\n // const rpcActions = getRpcActions();\n // for (let {label, method} of rpcActions){\n // descriptors.push({action: Action.RpcCall, label, options: {method}})\n // }\n // }\n\n return descriptors;\n };\n\nfunction buildSortMenuItems(\n options: MaybeColumn,\n { sort: { sortDefs } }: DataSource,\n): ContextMenuItemDescriptor[] {\n const { column } = options;\n const menuItems: ContextMenuItemDescriptor[] = [];\n if (column === undefined) {\n return menuItems;\n }\n\n const hasSort = sortDefs.length > 0;\n\n if (column.sorted === \"A\") {\n menuItems.push({\n label: \"Reverse Sort (DSC)\",\n action: \"sort-dsc\",\n options,\n });\n } else if (column.sorted === \"D\") {\n menuItems.push({\n label: \"Reverse Sort (ASC)\",\n action: \"sort-asc\",\n options,\n });\n } else if (typeof column.sorted === \"number\") {\n if (column.sorted > 0) {\n menuItems.push({\n label: \"Reverse Sort (DSC)\",\n action: \"sort-add-dsc\",\n options,\n });\n } else {\n menuItems.push({\n label: \"Reverse Sort (ASC)\",\n action: \"sort-add-asc\",\n options,\n });\n }\n\n // removing the last column from a sort would be a no-op, so pointless\n if (hasSort && Math.abs(column.sorted) < sortDefs.length) {\n menuItems.push({\n label: \"Remove from sort\",\n action: \"sort-remove\",\n options,\n });\n }\n\n menuItems.push({\n label: \"New Sort\",\n children: [\n { label: \"Ascending\", action: \"sort-asc\", options },\n { label: \"Descending\", action: \"sort-dsc\", options },\n ],\n });\n } else if (hasSort) {\n menuItems.push({\n label: \"Add to sort\",\n children: [\n { label: \"Ascending\", action: \"sort-add-asc\", options },\n { label: \"Descending\", action: \"sort-add-dsc\", options },\n ],\n });\n menuItems.push({\n label: \"New Sort\",\n children: [\n { label: \"Ascending\", action: \"sort-asc\", options },\n { label: \"Descending\", action: \"sort-dsc\", options },\n ],\n });\n } else {\n menuItems.push({\n label: \"Sort\",\n children: [\n { label: \"Ascending\", action: \"sort-asc\", options },\n { label: \"Descending\", action: \"sort-dsc\", options },\n ],\n });\n }\n return menuItems;\n}\n\nfunction buildAggregationMenuItems(\n options: MaybeColumn,\n dataSource: DataSource,\n): ContextMenuItemDescriptor[] {\n const { column } = options;\n if (column === undefined || dataSource.groupBy?.length === 0) {\n return [];\n }\n const { name, label = name } = column;\n\n return [\n {\n label: `Aggregate ${label}`,\n children: [\n { label: \"Count\", action: \"agg-count\", options },\n { label: \"Distinct\", action: \"agg-distinct\", options },\n ].concat(\n isNumericColumn(column)\n ? [\n { label: \"Sum\", action: \"agg-sum\", options },\n { label: \"Avg\", action: \"agg-avg\", options },\n { label: \"High\", action: \"agg-high\", options },\n { label: \"Low\", action: \"agg-low\", options },\n ]\n : [],\n ),\n },\n ];\n}\n\nconst pinColumn = (options: unknown, pinLocation: PinLocation) =>\n ({\n label: `Pin ${pinLocation}`,\n action: `column-pin-${pinLocation}`,\n options,\n }) as ContextMenuItemDescriptor;\n\nconst pinLeft = (options: unknown) => pinColumn(options, \"left\");\nconst pinFloating = (options: unknown) => pinColumn(options, \"floating\");\nconst pinRight = (options: unknown) => pinColumn(options, \"right\");\n\nfunction buildColumnDisplayMenuItems(\n options: MaybeColumn,\n): ContextMenuItemDescriptor[] {\n const { column } = options;\n if (column === undefined) {\n return [];\n }\n const { pin } = column;\n\n const menuItems: ContextMenuItemDescriptor[] = [\n {\n label: `Hide column`,\n action: \"column-hide\",\n options,\n },\n {\n label: `Remove column`,\n action: \"column-remove\",\n options,\n },\n ];\n\n if (pin === undefined) {\n menuItems.push({\n label: `Pin column`,\n children: [pinLeft(options), pinFloating(options), pinRight(options)],\n });\n } else if (pin === \"left\") {\n menuItems.push(\n { label: \"Unpin column\", action: \"column-unpin\", options },\n {\n label: `Pin column`,\n children: [pinFloating(options), pinRight(options)],\n },\n );\n } else if (pin === \"right\") {\n menuItems.push(\n { label: \"Unpin column\", action: \"column-unpin\", options },\n {\n label: `Pin column`,\n children: [pinLeft(options), pinFloating(options)],\n },\n );\n } else if (pin === \"floating\") {\n menuItems.push(\n { label: \"Unpin column\", action: \"column-unpin\", options },\n {\n label: `Pin column`,\n children: [pinLeft(options), pinRight(options)],\n },\n );\n }\n\n return menuItems;\n}\n\nfunction buildGroupMenuItems(\n options: MaybeColumn,\n { groupBy }: DataSource,\n): ContextMenuItemDescriptor[] {\n const { column } = options;\n const menuItems: ContextMenuItemDescriptor[] = [];\n if (column === undefined) {\n return menuItems;\n }\n\n const { name, label = name } = column;\n\n if (groupBy?.length === 0) {\n menuItems.push({\n label: `Group by ${label}`,\n action: \"group\",\n options,\n });\n } else {\n menuItems.push({\n label: `Add ${label} to group by`,\n action: \"group-add\",\n options,\n });\n }\n\n return menuItems;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHandleTableContextMenu.js","sources":["../../src/context-menu/useHandleTableContextMenu.ts"],"sourcesContent":["/* eslint-disable no-sequences */\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { removeColumnFromFilter } from \"@vuu-ui/vuu-utils\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n DataSource,\n DataSourceFilter,\n MenuActionHandler,\n} from \"@vuu-ui/vuu-data-types\";\nimport { PersistentColumnAction } from \"../useTableModel\";\nimport {\n addGroupColumn,\n addSortColumn,\n AggregationType,\n setAggregations,\n setSortColumn,\n} from \"@vuu-ui/vuu-utils\";\n\nexport interface ContextMenuOptions {\n column?: RuntimeColumnDescriptor;\n filter?: Filter;\n sort?: VuuFilter;\n}\nexport interface ContextMenuHookProps {\n dataSource?: DataSource;\n /**\n * A persistent Column Operation is any manipulation of a table column that should be\n * persisted across user sessions. e.g. if user pins a column, column should still be\n * pinned next time user opens app.\n */\n onPersistentColumnOperation: (action: PersistentColumnAction) => void;\n}\n\nconst removeFilterColumn = (\n dataSourceFilter: DataSourceFilter,\n column: RuntimeColumnDescriptor,\n) => {\n if (dataSourceFilter.filterStruct && column) {\n const [filterStruct, filter] = removeColumnFromFilter(\n column,\n dataSourceFilter.filterStruct,\n );\n return {\n filter,\n filterStruct,\n };\n } else {\n return dataSourceFilter;\n }\n};\n\nconst { Average, Count, Distinct, High, Low, Sum } = AggregationType;\n\nexport const useHandleTableContextMenu = ({\n dataSource,\n onPersistentColumnOperation,\n}: ContextMenuHookProps) => {\n /** return {boolean} used by caller to determine whether to forward to additional installed context menu handlers */\n const handleContextMenuAction: MenuActionHandler = (action): boolean => {\n const gridOptions = action.options as ContextMenuOptions;\n if (gridOptions.column && dataSource) {\n const { column } = gridOptions;\n // prettier-ignore\n switch(action.menuId){\n case \"sort-asc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-dsc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"D\")), true;\n case \"sort-add-asc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-add-dsc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"D\")), true;\n case \"group\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"group-add\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"column-hide\": return onPersistentColumnOperation({type: \"hideColumns\", columns: [column]}), true;\n case \"column-remove\": return (dataSource.columns = dataSource.columns.filter(name => name !== column.name)), true\n case \"filter-remove-column\": return (dataSource.filter = removeFilterColumn(dataSource.filter, column)), true;\n case \"remove-filters\": return (dataSource.filter = {filter:\"\"}), true;\n case \"agg-avg\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Average)), true;\n case \"agg-high\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, High)), true;\n case \"agg-low\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Low)), true;\n case \"agg-count\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Count)), true;\n case \"agg-distinct\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Distinct)), true;\n case \"agg-sum\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Sum)), true;\n case \"column-pin-floating\": return onPersistentColumnOperation({type: \"pinColumn\", column, pin: \"floating\"}), true;\n case \"column-pin-left\": return onPersistentColumnOperation({type: \"pinColumn\", column, pin: \"left\"}), true;\n case \"column-pin-right\": return onPersistentColumnOperation({type: \"pinColumn\", column, pin: \"right\"}), true;\n case \"column-unpin\": return onPersistentColumnOperation({type: \"pinColumn\", column, pin: undefined}), true\n case \"column-settings\": return onPersistentColumnOperation({type: \"columnSettings\", column}), true\n case \"table-settings\": return onPersistentColumnOperation({type: \"tableSettings\"}), true\n default:\n }\n }\n return false;\n };\n\n return handleContextMenuAction;\n};\n"],"names":[],"mappings":";;AAkCA,MAAM,kBAAA,GAAqB,CACzB,gBAAA,EACA,MACG,KAAA;AACH,EAAI,IAAA,gBAAA,CAAiB,gBAAgB,MAAQ,EAAA;AAC3C,IAAM,MAAA,CAAC,YAAc,EAAA,MAAM,CAAI,GAAA,sBAAA;AAAA,MAC7B,MAAA;AAAA,MACA,gBAAiB,CAAA
|
|
1
|
+
{"version":3,"file":"useHandleTableContextMenu.js","sources":["../../src/context-menu/useHandleTableContextMenu.ts"],"sourcesContent":["/* eslint-disable no-sequences */\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { removeColumnFromFilter } from \"@vuu-ui/vuu-utils\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n DataSource,\n DataSourceFilter,\n MenuActionHandler,\n} from \"@vuu-ui/vuu-data-types\";\nimport { PersistentColumnAction } from \"../useTableModel\";\nimport {\n addGroupColumn,\n addSortColumn,\n AggregationType,\n setAggregations,\n setSortColumn,\n} from \"@vuu-ui/vuu-utils\";\n\nexport interface ContextMenuOptions {\n column?: RuntimeColumnDescriptor;\n filter?: Filter;\n sort?: VuuFilter;\n}\nexport interface ContextMenuHookProps {\n dataSource?: DataSource;\n /**\n * A persistent Column Operation is any manipulation of a table column that should be\n * persisted across user sessions. e.g. if user pins a column, column should still be\n * pinned next time user opens app.\n */\n onPersistentColumnOperation: (action: PersistentColumnAction) => void;\n}\n\nconst removeFilterColumn = (\n dataSourceFilter: DataSourceFilter,\n column: RuntimeColumnDescriptor,\n) => {\n if (dataSourceFilter.filterStruct && column) {\n const [filterStruct, filter] = removeColumnFromFilter(\n column,\n dataSourceFilter.filterStruct,\n );\n return {\n filter,\n filterStruct,\n };\n } else {\n return dataSourceFilter;\n }\n};\n\nconst { Average, Count, Distinct, High, Low, Sum } = AggregationType;\n\nexport const useHandleTableContextMenu = ({\n dataSource,\n onPersistentColumnOperation,\n}: ContextMenuHookProps) => {\n /** return {boolean} used by caller to determine whether to forward to additional installed context menu handlers */\n const handleContextMenuAction: MenuActionHandler = (action): boolean => {\n const gridOptions = action.options as ContextMenuOptions;\n if (gridOptions.column && dataSource) {\n const { column } = gridOptions;\n // prettier-ignore\n switch(action.menuId){\n case \"sort-asc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-dsc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"D\")), true;\n case \"sort-add-asc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-add-dsc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"D\")), true;\n case \"group\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"group-add\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"column-hide\": return onPersistentColumnOperation({type: \"hideColumns\", columns: [column]}), true;\n case \"column-remove\": return (dataSource.columns = dataSource.columns.filter(name => name !== column.name)), true\n case \"filter-remove-column\": return (dataSource.filter = removeFilterColumn(dataSource.filter, column)), true;\n case \"remove-filters\": return (dataSource.filter = {filter:\"\"}), true;\n case \"agg-avg\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Average)), true;\n case \"agg-high\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, High)), true;\n case \"agg-low\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Low)), true;\n case \"agg-count\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Count)), true;\n case \"agg-distinct\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Distinct)), true;\n case \"agg-sum\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Sum)), true;\n case \"column-pin-floating\": return onPersistentColumnOperation({type: \"pinColumn\", column, pin: \"floating\"}), true;\n case \"column-pin-left\": return onPersistentColumnOperation({type: \"pinColumn\", column, pin: \"left\"}), true;\n case \"column-pin-right\": return onPersistentColumnOperation({type: \"pinColumn\", column, pin: \"right\"}), true;\n case \"column-unpin\": return onPersistentColumnOperation({type: \"pinColumn\", column, pin: undefined}), true\n case \"column-settings\": return onPersistentColumnOperation({type: \"columnSettings\", column}), true\n case \"table-settings\": return onPersistentColumnOperation({type: \"tableSettings\"}), true\n default:\n }\n }\n return false;\n };\n\n return handleContextMenuAction;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupHeaderCell.js","sources":["../../src/header-cell/GroupHeaderCell.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n GroupColumnDescriptor,\n HeaderCellProps,\n RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { OverflowContainer } from \"@vuu-ui/vuu-ui-controls\";\nimport { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { ColumnHeaderPill, GroupColumnPill } from \"../column-header-pill\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./GroupHeaderCell.css\";\n\nconst classBase = \"vuuTableGroupHeaderCell\";\n\nconst switchIfChanged = (\n columns: RuntimeColumnDescriptor[],\n newColumns: RuntimeColumnDescriptor[],\n) => {\n if (columns === newColumns) {\n return columns;\n } else {\n return newColumns;\n }\n};\n\nexport interface GroupHeaderCellProps\n extends Omit<HeaderCellProps, \"onDragStart\" | \"onDrag\" | \"onDragEnd\"> {\n column: GroupColumnDescriptor;\n onMoveColumn?: (columns: ColumnDescriptor[]) => void;\n onRemoveColumn: (column: RuntimeColumnDescriptor) => void;\n}\n\nexport const GroupHeaderCell = ({\n column: groupColumn,\n className: classNameProp,\n onMoveColumn,\n onRemoveColumn,\n onResize,\n ...htmlAttributes\n}: GroupHeaderCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-group-header-cell\",\n css: headerCellCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLTableCellElement>(null);\n const { isResizing, ...resizeProps } = useTableColumnResize({\n column: groupColumn,\n onResize,\n rootRef,\n });\n\n const [columns, setColumns] = useState(groupColumn.columns);\n const { className, style } = useCell(groupColumn, classBase, true);\n const columnPillProps =\n columns.length > 1\n ? {\n removable: true,\n onRemove: onRemoveColumn,\n }\n : undefined;\n\n const handleMoveItem = useCallback(\n (fromIndex, toIndex) => {\n setColumns((cols) => {\n const newCols = cols.slice();\n const [tab] = newCols.splice(fromIndex, 1);\n if (toIndex === -1) {\n const result = newCols.concat(tab);\n requestAnimationFrame(() => onMoveColumn?.(result));\n return result;\n } else {\n newCols.splice(toIndex, 0, tab);\n requestAnimationFrame(() => onMoveColumn?.(newCols));\n return newCols;\n }\n });\n },\n [onMoveColumn],\n );\n\n useLayoutEffectSkipFirst(() => {\n setColumns((cols) => switchIfChanged(cols, groupColumn.columns));\n }, [groupColumn.columns]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(() => {\n console.log(\"click\");\n }, []);\n const handleKeyDown = useCallback<\n KeyboardEventHandler<HTMLSpanElement>\n >(() => {\n console.log(\"keydown\");\n }, []);\n\n return (\n <div\n {...htmlAttributes}\n aria-colindex={groupColumn.ariaColIndex}\n className={cx(className, classNameProp, {\n [`${classBase}-pending`]: groupColumn.groupConfirmed === false,\n })}\n ref={rootRef}\n role=\"columnheader\"\n style={style}\n >\n <OverflowContainer\n allowDragDrop\n className={`${classBase}-inner`}\n onMoveItem={handleMoveItem}\n overflowPosition=\"start\"\n >\n {columns.map((column) => {\n return (\n <GroupColumnPill\n {...columnPillProps}\n column={column}\n key={column.name}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n />\n );\n })}\n </OverflowContainer>\n <ColumnHeaderPill\n className={`${classBase}-removeAll`}\n column={groupColumn}\n removable\n onRemove={onRemoveColumn}\n />\n\n {groupColumn.resizeable !== false ? (\n <ColumnResizer {...resizeProps} />\n ) : null}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,yBAAA
|
|
1
|
+
{"version":3,"file":"GroupHeaderCell.js","sources":["../../src/header-cell/GroupHeaderCell.tsx"],"sourcesContent":["import {\n ColumnDescriptor,\n GroupColumnDescriptor,\n HeaderCellProps,\n RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport { OverflowContainer } from \"@vuu-ui/vuu-ui-controls\";\nimport { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { ColumnHeaderPill, GroupColumnPill } from \"../column-header-pill\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./GroupHeaderCell.css\";\n\nconst classBase = \"vuuTableGroupHeaderCell\";\n\nconst switchIfChanged = (\n columns: RuntimeColumnDescriptor[],\n newColumns: RuntimeColumnDescriptor[],\n) => {\n if (columns === newColumns) {\n return columns;\n } else {\n return newColumns;\n }\n};\n\nexport interface GroupHeaderCellProps\n extends Omit<HeaderCellProps, \"onDragStart\" | \"onDrag\" | \"onDragEnd\"> {\n column: GroupColumnDescriptor;\n onMoveColumn?: (columns: ColumnDescriptor[]) => void;\n onRemoveColumn: (column: RuntimeColumnDescriptor) => void;\n}\n\nexport const GroupHeaderCell = ({\n column: groupColumn,\n className: classNameProp,\n onMoveColumn,\n onRemoveColumn,\n onResize,\n ...htmlAttributes\n}: GroupHeaderCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-group-header-cell\",\n css: headerCellCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLTableCellElement>(null);\n const { isResizing, ...resizeProps } = useTableColumnResize({\n column: groupColumn,\n onResize,\n rootRef,\n });\n\n const [columns, setColumns] = useState(groupColumn.columns);\n const { className, style } = useCell(groupColumn, classBase, true);\n const columnPillProps =\n columns.length > 1\n ? {\n removable: true,\n onRemove: onRemoveColumn,\n }\n : undefined;\n\n const handleMoveItem = useCallback(\n (fromIndex: number, toIndex: number) => {\n setColumns((cols) => {\n const newCols = cols.slice();\n const [tab] = newCols.splice(fromIndex, 1);\n if (toIndex === -1) {\n const result = newCols.concat(tab);\n requestAnimationFrame(() => onMoveColumn?.(result));\n return result;\n } else {\n newCols.splice(toIndex, 0, tab);\n requestAnimationFrame(() => onMoveColumn?.(newCols));\n return newCols;\n }\n });\n },\n [onMoveColumn],\n );\n\n useLayoutEffectSkipFirst(() => {\n setColumns((cols) => switchIfChanged(cols, groupColumn.columns));\n }, [groupColumn.columns]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(() => {\n console.log(\"click\");\n }, []);\n const handleKeyDown = useCallback<\n KeyboardEventHandler<HTMLSpanElement>\n >(() => {\n console.log(\"keydown\");\n }, []);\n\n return (\n <div\n {...htmlAttributes}\n aria-colindex={groupColumn.ariaColIndex}\n className={cx(className, classNameProp, {\n [`${classBase}-pending`]: groupColumn.groupConfirmed === false,\n })}\n ref={rootRef}\n role=\"columnheader\"\n style={style}\n >\n <OverflowContainer\n allowDragDrop\n className={`${classBase}-inner`}\n onMoveItem={handleMoveItem}\n overflowPosition=\"start\"\n >\n {columns.map((column) => {\n return (\n <GroupColumnPill\n {...columnPillProps}\n column={column}\n key={column.name}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n />\n );\n })}\n </OverflowContainer>\n <ColumnHeaderPill\n className={`${classBase}-removeAll`}\n column={groupColumn}\n removable\n onRemove={onRemoveColumn}\n />\n\n {groupColumn.resizeable !== false ? (\n <ColumnResizer {...resizeProps} />\n ) : null}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.js","sources":["../../src/header-cell/HeaderCell.tsx"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { HeaderCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\nimport { SortIndicator } from \"../column-header-pill\";\nimport { ColumnMenu } from \"../column-menu\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./HeaderCell.css\";\n\nconst classBase = \"vuuTableHeaderCell\";\n\nexport const HeaderCell = ({\n className: classNameProp,\n column,\n onClick,\n onResize,\n showMenu = true,\n ...htmlAttributes\n}: HeaderCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-header-cell\",\n css: headerCellCss,\n window: targetWindow,\n });\n\n const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;\n const rootRef = useRef<HTMLDivElement>(null);\n const { isResizing, ...resizeProps } = useTableColumnResize({\n column,\n onResize,\n rootRef,\n });\n\n const [showContextMenu] = useContextMenu();\n\n const handleContextMenu = useMemo(() => {\n if (showMenu) {\n return undefined;\n } else {\n return (e: MouseEvent) => showContextMenu(e, \"column-menu\", { column });\n }\n }, [column, showContextMenu, showMenu]);\n\n const headerItems = useMemo(() => {\n const sortIndicator = <SortIndicator column={column} />;\n const columnLabel = HeaderCellLabelRenderer ? (\n <HeaderCellLabelRenderer\n className={`${classBase}-label`}\n column={column}\n />\n ) : (\n <div className={`${classBase}-label`}>{column.label ?? column.name}</div>\n );\n const columnContent = HeaderCellContentRenderer\n ? [<HeaderCellContentRenderer column={column} key=\"content\" />]\n : [];\n\n if (showMenu) {\n const columnMenu = <ColumnMenu column={column} />;\n\n if (column.align === \"right\") {\n return [sortIndicator, columnLabel, columnContent, columnMenu];\n } else {\n return [columnMenu, columnLabel, sortIndicator, columnContent];\n }\n } else {\n if (column.align === \"right\") {\n return [sortIndicator, columnLabel, columnContent];\n } else {\n return [columnLabel, sortIndicator, columnContent];\n }\n }\n }, [HeaderCellContentRenderer, HeaderCellLabelRenderer, column, showMenu]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (evt) => {\n !isResizing && onClick?.(evt);\n },\n [isResizing, onClick],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n onClick?.(evt);\n }\n },\n [onClick],\n );\n\n const { className, style } = useCell(column, classBase, true);\n\n return (\n <div\n {...htmlAttributes}\n aria-colindex={column.ariaColIndex}\n className={cx(className, classNameProp, {\n [`${classBase}-resizing`]: isResizing,\n [`${classBase}-noMenu`]: showMenu === false,\n })}\n onClick={handleClick}\n onContextMenu={handleContextMenu}\n onKeyDown={handleKeyDown}\n ref={rootRef}\n role=\"columnheader\"\n style={style}\n >\n {...headerItems}\n {column.resizeable !== false ? <ColumnResizer {...resizeProps} /> : null}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,oBAAA
|
|
1
|
+
{"version":3,"file":"HeaderCell.js","sources":["../../src/header-cell/HeaderCell.tsx"],"sourcesContent":["import { useContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { HeaderCellProps } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\nimport { SortIndicator } from \"../column-header-pill\";\nimport { ColumnMenu } from \"../column-menu\";\nimport { ColumnResizer, useTableColumnResize } from \"../column-resizing\";\nimport { useCell } from \"../useCell\";\n\nimport headerCellCss from \"./HeaderCell.css\";\n\nconst classBase = \"vuuTableHeaderCell\";\n\nexport const HeaderCell = ({\n className: classNameProp,\n column,\n onClick,\n onResize,\n showMenu = true,\n ...htmlAttributes\n}: HeaderCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-header-cell\",\n css: headerCellCss,\n window: targetWindow,\n });\n\n const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;\n const rootRef = useRef<HTMLDivElement>(null);\n const { isResizing, ...resizeProps } = useTableColumnResize({\n column,\n onResize,\n rootRef,\n });\n\n const [showContextMenu] = useContextMenu();\n\n const handleContextMenu = useMemo(() => {\n if (showMenu) {\n return undefined;\n } else {\n return (e: MouseEvent) => showContextMenu(e, \"column-menu\", { column });\n }\n }, [column, showContextMenu, showMenu]);\n\n const headerItems = useMemo(() => {\n const sortIndicator = <SortIndicator column={column} />;\n const columnLabel = HeaderCellLabelRenderer ? (\n <HeaderCellLabelRenderer\n className={`${classBase}-label`}\n column={column}\n />\n ) : (\n <div className={`${classBase}-label`}>{column.label ?? column.name}</div>\n );\n const columnContent = HeaderCellContentRenderer\n ? [<HeaderCellContentRenderer column={column} key=\"content\" />]\n : [];\n\n if (showMenu) {\n const columnMenu = <ColumnMenu column={column} />;\n\n if (column.align === \"right\") {\n return [sortIndicator, columnLabel, columnContent, columnMenu];\n } else {\n return [columnMenu, columnLabel, sortIndicator, columnContent];\n }\n } else {\n if (column.align === \"right\") {\n return [sortIndicator, columnLabel, columnContent];\n } else {\n return [columnLabel, sortIndicator, columnContent];\n }\n }\n }, [HeaderCellContentRenderer, HeaderCellLabelRenderer, column, showMenu]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (evt) => {\n !isResizing && onClick?.(evt);\n },\n [isResizing, onClick],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n onClick?.(evt);\n }\n },\n [onClick],\n );\n\n const { className, style } = useCell(column, classBase, true);\n\n return (\n <div\n {...htmlAttributes}\n aria-colindex={column.ariaColIndex}\n className={cx(className, classNameProp, {\n [`${classBase}-resizing`]: isResizing,\n [`${classBase}-noMenu`]: showMenu === false,\n })}\n onClick={handleClick}\n onContextMenu={handleContextMenu}\n onKeyDown={handleKeyDown}\n ref={rootRef}\n role=\"columnheader\"\n style={style}\n >\n {...headerItems}\n {column.resizeable !== false ? <ColumnResizer {...resizeProps} /> : null}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
export { BulkEditDialog } from './bulk-edit/BulkEditDialog.js';
|
|
1
2
|
export { BulkEditPanel } from './bulk-edit/BulkEditPanel.js';
|
|
2
|
-
export { BulkEditPanelDialog } from './bulk-edit/BulkEditPanelDialog.js';
|
|
3
3
|
export { useBulkEditPanel } from './bulk-edit/useBulkEditPanel.js';
|
|
4
4
|
export { useBulkEditRow } from './bulk-edit/useBulkEditRow.js';
|
|
5
5
|
export { CheckboxCell } from './cell-renderers/checkbox-cell/CheckboxCell.js';
|
|
@@ -16,6 +16,7 @@ export { HeaderProvider, useHeaderProps } from './table-header/HeaderProvider.js
|
|
|
16
16
|
export { TableHeader } from './table-header/TableHeader.js';
|
|
17
17
|
export { isRowSelectionKey, useControlledTableNavigation } from './useControlledTableNavigation.js';
|
|
18
18
|
export { useEditableCell } from './useEditableCell.js';
|
|
19
|
+
export { useHighlighting } from './useHighlighting.js';
|
|
19
20
|
export { isNavigationKey, isPagingKey, useKeyboardNavigation } from './useKeyboardNavigation.js';
|
|
20
21
|
export { isShowColumnSettings, isShowTableSettings, useTableModel } from './useTableModel.js';
|
|
21
22
|
export { noScrolling, useTableScroll } from './useTableScroll.js';
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
|
package/esm/moving-window.js
CHANGED
|
@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
|
|
|
9
9
|
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
10
10
|
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
11
11
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
12
|
-
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"),
|
|
12
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
13
13
|
var _range;
|
|
14
14
|
const { SELECTED } = metadataKeys;
|
|
15
15
|
class MovingWindow {
|
package/esm/moving-window.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n isRowSelectedLast,\n metadataKeys,\n WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n public data: DataSourceRow[];\n public rowCount = 0;\n #range: WindowRange;\n\n constructor({ from, to }: VuuRange) {\n this.#range = new WindowRange(from, to);\n //internal data is always 0 based, we add range.from to determine an offset\n this.data = new Array(Math.max(0, to - from));\n this.rowCount = 0;\n }\n\n setRowCount = (rowCount: number) => {\n if (rowCount < this.data.length) {\n this.data.length = rowCount;\n }\n\n this.rowCount = rowCount;\n };\n\n add(data: DataSourceRow) {\n const [index] = data;\n if (this.isWithinRange(index)) {\n const internalIndex = index - this.#range.from;\n this.data[internalIndex] = data;\n\n // Hack until we can deal with this more elegantly. When we have a block\n // select operation, first row is selected (and updated via server), then\n // remaining rows are selected when we select the block-end row. We get an\n // update for all rows except first. Because we're extending the select status\n // on the client, we have to adjust the first row selected (its still selected\n // but is no longer the 'last selected row in block')\n // Maybe answer is to apply ALL the selection status code here, not in Viewport\n if (data[SELECTED]) {\n const previousRow = this.data[internalIndex - 1];\n if (isRowSelectedLast(previousRow)) {\n this.data[internalIndex - 1] = previousRow.slice() as DataSourceRow;\n this.data[internalIndex - 1][SELECTED] -= 4;\n }\n }\n }\n }\n\n getAtIndex(index: number) {\n return this.#range.isWithin(index) &&\n this.data[index - this.#range.from] != null\n ? this.data[index - this.#range.from]\n : undefined;\n }\n\n isWithinRange(index: number) {\n return this.#range.isWithin(index);\n }\n\n setRange({ from, to }: VuuRange) {\n if (from !== this.#range.from || to !== this.#range.to) {\n const [overlapFrom, overlapTo] = this.#range.overlap(from, to);\n const newData = new Array(Math.max(0, to - from));\n for (let i = overlapFrom; i < overlapTo; i++) {\n const data = this.getAtIndex(i);\n if (data) {\n const index = i - from;\n newData[index] = data;\n }\n }\n this.data = newData;\n this.#range.from = from;\n this.#range.to = to;\n }\n }\n\n getSelectedRows() {\n return this.data.filter((row) => row[SELECTED] !== 0);\n }\n\n get range() {\n return this.#range;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAAA,IAAA,MAAA
|
|
1
|
+
{"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n isRowSelectedLast,\n metadataKeys,\n WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n public data: DataSourceRow[];\n public rowCount = 0;\n #range: WindowRange;\n\n constructor({ from, to }: VuuRange) {\n this.#range = new WindowRange(from, to);\n //internal data is always 0 based, we add range.from to determine an offset\n this.data = new Array(Math.max(0, to - from));\n this.rowCount = 0;\n }\n\n setRowCount = (rowCount: number) => {\n if (rowCount < this.data.length) {\n this.data.length = rowCount;\n }\n\n this.rowCount = rowCount;\n };\n\n add(data: DataSourceRow) {\n const [index] = data;\n if (this.isWithinRange(index)) {\n const internalIndex = index - this.#range.from;\n this.data[internalIndex] = data;\n\n // Hack until we can deal with this more elegantly. When we have a block\n // select operation, first row is selected (and updated via server), then\n // remaining rows are selected when we select the block-end row. We get an\n // update for all rows except first. Because we're extending the select status\n // on the client, we have to adjust the first row selected (its still selected\n // but is no longer the 'last selected row in block')\n // Maybe answer is to apply ALL the selection status code here, not in Viewport\n if (data[SELECTED]) {\n const previousRow = this.data[internalIndex - 1];\n if (isRowSelectedLast(previousRow)) {\n this.data[internalIndex - 1] = previousRow.slice() as DataSourceRow;\n this.data[internalIndex - 1][SELECTED] -= 4;\n }\n }\n }\n }\n\n getAtIndex(index: number) {\n return this.#range.isWithin(index) &&\n this.data[index - this.#range.from] != null\n ? this.data[index - this.#range.from]\n : undefined;\n }\n\n isWithinRange(index: number) {\n return this.#range.isWithin(index);\n }\n\n setRange({ from, to }: VuuRange) {\n if (from !== this.#range.from || to !== this.#range.to) {\n const [overlapFrom, overlapTo] = this.#range.overlap(from, to);\n const newData = new Array(Math.max(0, to - from));\n for (let i = overlapFrom; i < overlapTo; i++) {\n const data = this.getAtIndex(i);\n if (data) {\n const index = i - from;\n newData[index] = data;\n }\n }\n this.data = newData;\n this.#range.from = from;\n this.#range.to = to;\n }\n }\n\n getSelectedRows() {\n return this.data.filter((row) => row[SELECTED] !== 0);\n }\n\n get range() {\n return this.#range;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationControl.js","sources":["../../src/pagination/PaginationControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { GoToInput, Pagination, Paginator } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { usePagination } from \"./usePagination\";\n\nimport paginationControlCss from \"./PaginationControl.css\";\nimport { HtmlHTMLAttributes, forwardRef } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nconst classBase = \"vuuPaginationControl\";\n\nexport interface PaginationControlProps\n extends HtmlHTMLAttributes<HTMLDivElement> {\n dataSource: DataSource;\n}\n\nexport const PaginationControl = forwardRef<\n HTMLDivElement,\n PaginationControlProps\n>(function PaginationControl(\n { className, dataSource, ...htmlAttributes },\n forwardedRef,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table\",\n css: paginationControlCss,\n window: targetWindow,\n });\n\n const { onPageChange, pageCount } = usePagination({\n dataSource,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n ref={forwardedRef}\n >\n <Pagination count={pageCount} onPageChange={onPageChange}>\n <GoToInput />\n <Paginator />\n </Pagination>\n </div>\n );\n});\n"],"names":["PaginationControl"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,sBAAA
|
|
1
|
+
{"version":3,"file":"PaginationControl.js","sources":["../../src/pagination/PaginationControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { GoToInput, Pagination, Paginator } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { usePagination } from \"./usePagination\";\n\nimport paginationControlCss from \"./PaginationControl.css\";\nimport { HtmlHTMLAttributes, forwardRef } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nconst classBase = \"vuuPaginationControl\";\n\nexport interface PaginationControlProps\n extends HtmlHTMLAttributes<HTMLDivElement> {\n dataSource: DataSource;\n}\n\nexport const PaginationControl = forwardRef<\n HTMLDivElement,\n PaginationControlProps\n>(function PaginationControl(\n { className, dataSource, ...htmlAttributes },\n forwardedRef,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table\",\n css: paginationControlCss,\n window: targetWindow,\n });\n\n const { onPageChange, pageCount } = usePagination({\n dataSource,\n });\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className)}\n ref={forwardedRef}\n >\n <Pagination count={pageCount} onPageChange={onPageChange}>\n <GoToInput />\n <Paginator />\n </Pagination>\n </div>\n );\n});\n"],"names":["PaginationControl"],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,sBAAA;AAOL,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA,EAAE,WAAW,UAAY,EAAA,GAAG,cAAe,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAI,aAAc,CAAA;AAAA,IAChD;AAAA,GACD,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,MAEL,QAAC,kBAAA,IAAA,CAAA,UAAA,EAAA,EAAW,KAAO,EAAA,SAAA,EAAW,YAC5B,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,4BACV,SAAU,EAAA,EAAA;AAAA,OACb,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","sources":["../../src/pagination/usePagination.ts"],"sourcesContent":["import { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface PaginationHookProps {\n dataSource: DataSource;\n}\n\nconst getPageCount = (dataSource: DataSource) => {\n const { range, size } = dataSource;\n const pageSize = range.to - range.from;\n if (pageSize > 0) {\n return Math.ceil(size / pageSize);\n } else {\n return 0;\n }\n};\n\nexport const usePagination = ({ dataSource }: PaginationHookProps) => {\n const [pageCount, setPageCount] = useState<number>(getPageCount(dataSource));\n\n useMemo(() => {\n dataSource.on(\"page-count\", (n: number) => setPageCount(n));\n }, [dataSource]);\n\n const handlePageChange = useCallback(\n (_evt: SyntheticEvent, page: number) => {\n const { range } = dataSource;\n const pageSize = range.to - range.from;\n const firstRow = pageSize * (page - 1);\n console.log(\n `set range ${JSON.stringify({ from: firstRow, to: firstRow + pageSize })}`,\n );\n dataSource.range = { from: firstRow, to: firstRow + pageSize };\n },\n [dataSource],\n );\n\n return {\n onPageChange: handlePageChange,\n pageCount,\n };\n};\n"],"names":[],"mappings":";;AAOA,MAAM,YAAA,GAAe,CAAC,UAA2B,KAAA;AAC/C,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,UAAA
|
|
1
|
+
{"version":3,"file":"usePagination.js","sources":["../../src/pagination/usePagination.ts"],"sourcesContent":["import { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface PaginationHookProps {\n dataSource: DataSource;\n}\n\nconst getPageCount = (dataSource: DataSource) => {\n const { range, size } = dataSource;\n const pageSize = range.to - range.from;\n if (pageSize > 0) {\n return Math.ceil(size / pageSize);\n } else {\n return 0;\n }\n};\n\nexport const usePagination = ({ dataSource }: PaginationHookProps) => {\n const [pageCount, setPageCount] = useState<number>(getPageCount(dataSource));\n\n useMemo(() => {\n dataSource.on(\"page-count\", (n: number) => setPageCount(n));\n }, [dataSource]);\n\n const handlePageChange = useCallback(\n (_evt: SyntheticEvent, page: number) => {\n const { range } = dataSource;\n const pageSize = range.to - range.from;\n const firstRow = pageSize * (page - 1);\n console.log(\n `set range ${JSON.stringify({ from: firstRow, to: firstRow + pageSize })}`,\n );\n dataSource.range = { from: firstRow, to: firstRow + pageSize };\n },\n [dataSource],\n );\n\n return {\n onPageChange: handlePageChange,\n pageCount,\n };\n};\n"],"names":[],"mappings":";;AAOA,MAAM,YAAA,GAAe,CAAC,UAA2B,KAAA;AAC/C,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,UAAA;AACxB,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA;AAClC,EAAA,IAAI,WAAW,CAAG,EAAA;AAChB,IAAO,OAAA,IAAA,CAAK,IAAK,CAAA,IAAA,GAAO,QAAQ,CAAA;AAAA,GAC3B,MAAA;AACL,IAAO,OAAA,CAAA;AAAA;AAEX,CAAA;AAEO,MAAM,aAAgB,GAAA,CAAC,EAAE,UAAA,EAAsC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,IAAI,QAAiB,CAAA,YAAA,CAAa,UAAU,CAAC,CAAA;AAE3E,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,UAAA,CAAW,GAAG,YAAc,EAAA,CAAC,CAAc,KAAA,YAAA,CAAa,CAAC,CAAC,CAAA;AAAA,GAC5D,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,MAAsB,IAAiB,KAAA;AACtC,MAAM,MAAA,EAAE,OAAU,GAAA,UAAA;AAClB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA;AAClC,MAAM,MAAA,QAAA,GAAW,YAAY,IAAO,GAAA,CAAA,CAAA;AACpC,MAAQ,OAAA,CAAA,GAAA;AAAA,QACN,CAAA,UAAA,EAAa,IAAK,CAAA,SAAA,CAAU,EAAE,IAAA,EAAM,UAAU,EAAI,EAAA,QAAA,GAAW,QAAS,EAAC,CAAC,CAAA;AAAA,OAC1E;AACA,MAAA,UAAA,CAAW,QAAQ,EAAE,IAAA,EAAM,QAAU,EAAA,EAAA,EAAI,WAAW,QAAS,EAAA;AAAA,KAC/D;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAO,OAAA;AAAA,IACL,YAAc,EAAA,gBAAA;AAAA,IACd;AAAA,GACF;AACF;;;;"}
|
|
@@ -4,6 +4,7 @@ import { useComponentCssInjection } from '@salt-ds/styles';
|
|
|
4
4
|
import { useWindow } from '@salt-ds/window';
|
|
5
5
|
import { useState, useCallback } from 'react';
|
|
6
6
|
import { useCell } from '../useCell.js';
|
|
7
|
+
import { useHighlighting } from '../useHighlighting.js';
|
|
7
8
|
import tableCellCss from './TableCell.css.js';
|
|
8
9
|
|
|
9
10
|
const classBase = "vuuTableCell";
|
|
@@ -12,7 +13,8 @@ const TableCell = ({
|
|
|
12
13
|
columnMap,
|
|
13
14
|
onClick,
|
|
14
15
|
onDataEdited,
|
|
15
|
-
row
|
|
16
|
+
row,
|
|
17
|
+
searchPattern = ""
|
|
16
18
|
}) => {
|
|
17
19
|
const targetWindow = useWindow();
|
|
18
20
|
useComponentCssInjection({
|
|
@@ -63,6 +65,8 @@ const TableCell = ({
|
|
|
63
65
|
},
|
|
64
66
|
[column, onClick]
|
|
65
67
|
);
|
|
68
|
+
const value = valueFormatter(row[dataIdx]);
|
|
69
|
+
const valueWithHighlighting = useHighlighting(value, searchPattern);
|
|
66
70
|
return /* @__PURE__ */ jsx(
|
|
67
71
|
"div",
|
|
68
72
|
{
|
|
@@ -77,9 +81,10 @@ const TableCell = ({
|
|
|
77
81
|
column,
|
|
78
82
|
columnMap,
|
|
79
83
|
onEdit: handleDataItemEdited,
|
|
80
|
-
row
|
|
84
|
+
row,
|
|
85
|
+
searchPattern
|
|
81
86
|
}
|
|
82
|
-
) :
|
|
87
|
+
) : valueWithHighlighting
|
|
83
88
|
}
|
|
84
89
|
);
|
|
85
90
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../src/table-cell/TableCell.tsx"],"sourcesContent":["import type {\n DataItemEditHandler,\n TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MouseEventHandler, useCallback, useState } from \"react\";\nimport { useCell } from \"../useCell\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n column,\n columnMap,\n onClick,\n onDataEdited,\n row,\n}: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-cell\",\n css: tableCellCss,\n window: targetWindow,\n });\n\n const [hasError, setHasError] = useState(false);\n\n const { className, style } = useCell(column, classBase, false, hasError);\n const { ariaColIndex, CellRenderer, valueFormatter } = column;\n const dataIdx = columnMap[column.name];\n\n const handleDataItemEdited = useCallback<DataItemEditHandler>(\n (editState, editPhase) => {\n if (editPhase === \"commit\") {\n const { serverDataType = \"string\" } = column;\n if (onDataEdited) {\n const typedValue = getTypedValue(\n String(editState.value),\n serverDataType,\n true,\n );\n return onDataEdited({\n ...editState,\n row,\n columnName: column.name,\n value: typedValue,\n });\n } else {\n throw Error(\n \"TableCell onDataEdited prop not supplied for an editable cell\",\n );\n }\n } else {\n setHasError(editState.isValid === false);\n onDataEdited({\n ...editState,\n row,\n columnName: column.name,\n });\n return undefined;\n }\n },\n [column, onDataEdited, row],\n );\n\n const handleClick = useCallback<MouseEventHandler>(\n (evt) => {\n onClick?.(evt, column);\n },\n [column, onClick],\n );\n\n return (\n <div\n aria-colindex={ariaColIndex}\n className={className}\n onClick={onClick ? handleClick : undefined}\n role=\"cell\"\n style={style}\n >\n {CellRenderer ? (\n <CellRenderer\n column={column}\n columnMap={columnMap}\n onEdit={handleDataItemEdited}\n row={row}\n />\n ) : (\n
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../src/table-cell/TableCell.tsx"],"sourcesContent":["import type {\n DataItemEditHandler,\n TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MouseEventHandler, useCallback, useState } from \"react\";\nimport { useCell } from \"../useCell\";\nimport { useHighlighting } from \"../useHighlighting\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n column,\n columnMap,\n onClick,\n onDataEdited,\n row,\n searchPattern = \"\",\n}: TableCellProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-cell\",\n css: tableCellCss,\n window: targetWindow,\n });\n\n const [hasError, setHasError] = useState(false);\n\n const { className, style } = useCell(column, classBase, false, hasError);\n const { ariaColIndex, CellRenderer, valueFormatter } = column;\n const dataIdx = columnMap[column.name];\n\n const handleDataItemEdited = useCallback<DataItemEditHandler>(\n (editState, editPhase) => {\n if (editPhase === \"commit\") {\n const { serverDataType = \"string\" } = column;\n if (onDataEdited) {\n const typedValue = getTypedValue(\n String(editState.value),\n serverDataType,\n true,\n );\n return onDataEdited({\n ...editState,\n row,\n columnName: column.name,\n value: typedValue,\n });\n } else {\n throw Error(\n \"TableCell onDataEdited prop not supplied for an editable cell\",\n );\n }\n } else {\n setHasError(editState.isValid === false);\n onDataEdited({\n ...editState,\n row,\n columnName: column.name,\n });\n return undefined;\n }\n },\n [column, onDataEdited, row],\n );\n\n const handleClick = useCallback<MouseEventHandler>(\n (evt) => {\n onClick?.(evt, column);\n },\n [column, onClick],\n );\n\n const value = valueFormatter(row[dataIdx]);\n const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n return (\n <div\n aria-colindex={ariaColIndex}\n className={className}\n onClick={onClick ? handleClick : undefined}\n role=\"cell\"\n style={style}\n >\n {CellRenderer ? (\n <CellRenderer\n column={column}\n columnMap={columnMap}\n onEdit={handleDataItemEdited}\n row={row}\n searchPattern={searchPattern}\n />\n ) : (\n valueWithHighlighting\n )}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,EAAE,WAAW,KAAM,EAAA,GAAI,QAAQ,MAAQ,EAAA,SAAA,EAAW,OAAO,QAAQ,CAAA;AACvE,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,cAAA,EAAmB,GAAA,MAAA;AACvD,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AAErC,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,WAAW,SAAc,KAAA;AACxB,MAAA,IAAI,cAAc,QAAU,EAAA;AAC1B,QAAM,MAAA,EAAE,cAAiB,GAAA,QAAA,EAAa,GAAA,MAAA;AACtC,QAAA,IAAI,YAAc,EAAA;AAChB,UAAA,MAAM,UAAa,GAAA,aAAA;AAAA,YACjB,MAAA,CAAO,UAAU,KAAK,CAAA;AAAA,YACtB,cAAA;AAAA,YACA;AAAA,WACF;AACA,UAAA,OAAO,YAAa,CAAA;AAAA,YAClB,GAAG,SAAA;AAAA,YACH,GAAA;AAAA,YACA,YAAY,MAAO,CAAA,IAAA;AAAA,YACnB,KAAO,EAAA;AAAA,WACR,CAAA;AAAA,SACI,MAAA;AACL,UAAM,MAAA,KAAA;AAAA,YACJ;AAAA,WACF;AAAA;AACF,OACK,MAAA;AACL,QAAY,WAAA,CAAA,SAAA,CAAU,YAAY,KAAK,CAAA;AACvC,QAAa,YAAA,CAAA;AAAA,UACX,GAAG,SAAA;AAAA,UACH,GAAA;AAAA,UACA,YAAY,MAAO,CAAA;AAAA,SACpB,CAAA;AACD,QAAO,OAAA,KAAA,CAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,YAAA,EAAc,GAAG;AAAA,GAC5B;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EAAA,MAAM,KAAQ,GAAA,cAAA,CAAe,GAAI,CAAA,OAAO,CAAC,CAAA;AACzC,EAAM,MAAA,qBAAA,GAAwB,eAAgB,CAAA,KAAA,EAAO,aAAa,CAAA;AAElE,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAQ,EAAA,oBAAA;AAAA,UACR,GAAA;AAAA,UACA;AAAA;AAAA,OAGF,GAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var tableGroupCellCss = ".vuuTableGroupCell.vuuTableCell {\n --group-cell-spacer-width: 20px;\n align-items: center;\n border-right-color: var(\n --vuuTableGroupCell-borderColor,\n var(--salt-separable-tertiary-borderColor)\n );\n border-right-style: solid;\n border-right-width: 1px;\n\n cursor: pointer;\n display: inline-flex;\n line-height: 16px;\n\n .vuuIcon {\n --vuu-icon-height: 20px;\n --vuu-icon-width: 20px;\n margin-right: var(--salt-spacing-100);\n }\n\n .vuuTableGroupCell-toggle {\n --vuu-icon-height: 16px;\n --vuu-icon-size: 7px;\n --vuu-icon-width: 8px;\n margin-right: 4px;\n transition: transform 0.25s;\n transform: var(--toggle-icon-transform);\n }\n}\n\n[aria-level=\"2\"] {\n --indent: 1;\n}\n[aria-level=\"3\"] {\n --indent: 2;\n}\n[aria-level=\"4\"] {\n --indent: 3;\n}\n[aria-level=\"5\"] {\n --indent: 4;\n}\n[aria-level=\"6\"] {\n --indent: 5;\n}\n[aria-level=\"7\"] {\n --indent: 6;\n}\n[aria-level=\"8\"] {\n --indent: 7;\n}\n[aria-level=\"9\"] {\n --indent: 8;\n}\n[aria-level=\"10\"] {\n --indent: 9;\n}\n\n.vuuTableGroupCell-spacer {\n display: inline-block;\n width: calc(var(--indent, 0) * var(--group-cell-spacer-width));\n}\n";
|
|
1
|
+
var tableGroupCellCss = ".vuuTableGroupCell.vuuTableCell {\n --group-cell-spacer-width: 20px;\n align-items: center;\n border-right-color: var(\n --vuuTableGroupCell-borderColor,\n var(--salt-separable-tertiary-borderColor)\n );\n border-right-style: solid;\n border-right-width: 1px;\n\n cursor: pointer;\n display: inline-flex;\n line-height: 16px;\n\n .vuuIcon {\n --vuu-icon-height: 20px;\n --vuu-icon-width: 20px;\n margin-right: var(--salt-spacing-100);\n min-width: 20px;\n }\n\n .vuuTableGroupCell-toggle {\n --vuu-icon-height: 16px;\n --vuu-icon-size: 7px;\n --vuu-icon-width: 8px;\n margin-right: 4px;\n transition: transform 0.25s;\n transform: var(--toggle-icon-transform);\n }\n\n .vuuTableGroupCell-label {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n}\n\n[aria-level=\"2\"] {\n --indent: 1;\n}\n[aria-level=\"3\"] {\n --indent: 2;\n}\n[aria-level=\"4\"] {\n --indent: 3;\n}\n[aria-level=\"5\"] {\n --indent: 4;\n}\n[aria-level=\"6\"] {\n --indent: 5;\n}\n[aria-level=\"7\"] {\n --indent: 6;\n}\n[aria-level=\"8\"] {\n --indent: 7;\n}\n[aria-level=\"9\"] {\n --indent: 8;\n}\n[aria-level=\"10\"] {\n --indent: 9;\n}\n\n.vuuTableGroupCell-spacer {\n display: inline-block;\n min-width: calc(var(--indent, 0) * var(--group-cell-spacer-width));\n}\n\n.vuuTreeTable {\n .vuuTableGroupCell.vuuTableCell {\n border-right: none;\n } \n}";
|
|
2
2
|
|
|
3
3
|
export { tableGroupCellCss as default };
|
|
4
4
|
//# sourceMappingURL=TableGroupCell.css.js.map
|
|
@@ -8,6 +8,7 @@ import { useCallback } from 'react';
|
|
|
8
8
|
import { useCell } from '../useCell.js';
|
|
9
9
|
import tableCellCss from './TableCell.css.js';
|
|
10
10
|
import tableGroupCellCss from './TableGroupCell.css.js';
|
|
11
|
+
import { useHighlighting } from '../useHighlighting.js';
|
|
11
12
|
|
|
12
13
|
const { COUNT, IS_EXPANDED, IS_LEAF } = metadataKeys;
|
|
13
14
|
const classBase = "vuuTableGroupCell";
|
|
@@ -15,7 +16,8 @@ const TableGroupCell = ({
|
|
|
15
16
|
column,
|
|
16
17
|
columnMap,
|
|
17
18
|
onClick,
|
|
18
|
-
row
|
|
19
|
+
row,
|
|
20
|
+
searchPattern = ""
|
|
19
21
|
}) => {
|
|
20
22
|
const targetWindow = useWindow();
|
|
21
23
|
useComponentCssInjection({
|
|
@@ -30,6 +32,7 @@ const TableGroupCell = ({
|
|
|
30
32
|
});
|
|
31
33
|
const { columns } = column;
|
|
32
34
|
const value = getGroupValue(columns, row, columnMap);
|
|
35
|
+
const valueWithHighlighting = useHighlighting(value || "", searchPattern);
|
|
33
36
|
const icon = getGroupIcon(columns, row);
|
|
34
37
|
const { className, style } = useCell(column, classBase);
|
|
35
38
|
const handleClick = useCallback(
|
|
@@ -51,7 +54,7 @@ const TableGroupCell = ({
|
|
|
51
54
|
/* @__PURE__ */ jsx("span", { className: `${classBase}-spacer` }),
|
|
52
55
|
isLeaf || count == 0 ? null : /* @__PURE__ */ jsx(ToggleIconButton, { isExpanded }),
|
|
53
56
|
icon ? /* @__PURE__ */ jsx(Icon, { name: icon }) : null,
|
|
54
|
-
/* @__PURE__ */ jsx("span", { children:
|
|
57
|
+
/* @__PURE__ */ jsx("span", { className: `${classBase}-label`, children: valueWithHighlighting })
|
|
55
58
|
]
|
|
56
59
|
}
|
|
57
60
|
);
|