@vuu-ui/vuu-filters 2.1.18 → 2.1.19-beta.2
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/package.json +15 -18
- package/src/FilterAggregator.js +107 -0
- package/src/FilterModel.js +161 -0
- package/src/column-filter/ColumnFilter.css.js +52 -0
- package/src/column-filter/ColumnFilter.js +59 -0
- package/src/column-filter/useColumnFilter.js +130 -0
- package/src/column-filter/utils.js +35 -0
- package/src/custom-filters/CustomFilters.js +74 -0
- package/src/custom-filters/filterBarFocusManagement.js +25 -0
- package/src/custom-filters/index.js +1 -0
- package/src/custom-filters/useCustomFilters.js +237 -0
- package/src/custom-filters/useFilterState.js +123 -0
- package/src/filter-bar/FilterBar.css.js +81 -0
- package/src/filter-bar/FilterBar.js +97 -0
- package/src/filter-bar/FilterBarMenu.js +14 -0
- package/src/filter-bar/index.js +1 -0
- package/src/filter-bar/useFilterBar.js +28 -0
- package/src/filter-clause/ExpandoCombobox.css.js +54 -0
- package/src/filter-clause/ExpandoCombobox.js +86 -0
- package/src/filter-clause/FilterClause.css.js +101 -0
- package/src/filter-clause/FilterClause.js +69 -0
- package/src/filter-clause/column-picker/ColumnPicker.js +25 -0
- package/src/filter-clause/column-picker/useColumnPicker.js +42 -0
- package/src/filter-clause/filterClauseFocusManagement.js +156 -0
- package/src/filter-clause/filterClauseTypes.js +0 -0
- package/src/filter-clause/index.js +5 -0
- package/src/filter-clause/operator-picker/OperatorPicker.js +25 -0
- package/src/filter-clause/operator-picker/operator-utils.js +23 -0
- package/src/filter-clause/operator-picker/useOperatorPicker.js +42 -0
- package/src/filter-clause/useFilterClause.js +135 -0
- package/src/filter-clause/value-editors/FilterClauseValueEditor.js +59 -0
- package/src/filter-clause/value-editors/FilterClauseValueEditorDate.js +55 -0
- package/src/filter-clause/value-editors/FilterClauseValueEditorNumber.js +32 -0
- package/src/filter-clause/value-editors/FilterClauseValueEditorText.js +182 -0
- package/src/filter-clause/value-editors/FilterClauseValueEditorTime.js +53 -0
- package/src/filter-container/ExtendedSingleValueFilterClause.js +35 -0
- package/src/filter-container/FilterContainer.css.js +13 -0
- package/src/filter-container/FilterContainer.js +121 -0
- package/src/filter-container/useFilterContainer.js +82 -0
- package/src/filter-context-menu/useFilterContextMenu.js +106 -0
- package/src/filter-display/FilterDisplay.css.js +31 -0
- package/src/filter-display/FilterDisplay.js +59 -0
- package/src/filter-editor/FilterClauseCombinator.css.js +15 -0
- package/src/filter-editor/FilterClauseCombinator.js +32 -0
- package/src/filter-editor/FilterEditor.css.js +13 -0
- package/src/filter-editor/FilterEditor.js +65 -0
- package/src/filter-editor/index.js +1 -0
- package/src/filter-editor/useFilterEditor.js +193 -0
- package/src/filter-panel/FilterPanel.css.js +22 -0
- package/src/filter-panel/FilterPanel.js +59 -0
- package/src/filter-panel/useFilterPanel.js +58 -0
- package/src/filter-pill/FilterMenu.js +48 -0
- package/src/filter-pill/FilterPill.css.js +15 -0
- package/src/filter-pill/FilterPill.js +114 -0
- package/src/filter-pill/FilterPillNext.css.js +12 -0
- package/src/filter-pill/FilterPillNext.js +65 -0
- package/src/filter-pill/filterAsReactNode.js +28 -0
- package/src/filter-pill/getFilterLabel.js +11 -0
- package/src/filter-pill/getFilterTooltipText.js +32 -0
- package/src/filter-pill/index.js +1 -0
- package/src/filter-pill/useFilterPillNext.js +53 -0
- package/src/filter-pill-menu/FilterPillMenu.css.js +8 -0
- package/src/filter-pill-menu/FilterPillMenu.js +46 -0
- package/src/filter-pill-menu/FilterPillMenuOptions.js +26 -0
- package/src/filter-pill-menu/index.js +1 -0
- package/src/filter-provider/FilterContext.js +71 -0
- package/src/filter-provider/FilterProvider.js +188 -0
- package/src/filter-provider/filter-descriptor-utils.js +41 -0
- package/src/filter-toggle-button/FilterToggleButton.css.js +22 -0
- package/src/filter-toggle-button/FilterToggleButton.js +103 -0
- package/src/filter-utils.js +300 -0
- package/src/index.js +21 -0
- package/src/inline-filter/InlineFilter.css.js +89 -0
- package/src/inline-filter/InlineFilter.js +56 -0
- package/src/inline-filter/index.js +1 -0
- package/src/inline-filter/useInlineFilter.js +11 -0
- package/src/quick-filters/QuickFilters.css.js +39 -0
- package/src/quick-filters/QuickFilters.js +81 -0
- package/src/quick-filters/index.js +1 -0
- package/src/quick-filters/useQuickFilters.js +108 -0
- package/src/saved-filters/DeleteFilterPrompt.js +23 -0
- package/src/saved-filters/FilterNamePrompt.css.js +19 -0
- package/src/saved-filters/FilterNamePrompt.js +74 -0
- package/src/saved-filters/SavedFilterPanel.css.js +21 -0
- package/src/saved-filters/SavedFilterPanel.js +53 -0
- package/src/saved-filters/useFilterNamePrompt.js +74 -0
- package/src/saved-filters/useSavedFilterPanel.js +19 -0
- package/src/tabbed-filter-container/TabbedFilterContainer.js +61 -0
- package/src/toggle-filter/ToggleFilter.css.js +10 -0
- package/src/toggle-filter/ToggleFilter.js +68 -0
- package/src/toggle-filter/useToggleFilter.js +57 -0
- package/types/filter-clause/column-picker/ColumnPicker.d.ts +1 -1
- package/types/filter-clause/operator-picker/OperatorPicker.d.ts +1 -1
- package/types/filter-clause/value-editors/FilterClauseValueEditor.d.ts +1 -1
- package/cjs/FilterAggregator.js +0 -162
- package/cjs/FilterAggregator.js.map +0 -1
- package/cjs/FilterModel.js +0 -227
- package/cjs/FilterModel.js.map +0 -1
- package/cjs/column-filter/ColumnFilter.css.js +0 -6
- package/cjs/column-filter/ColumnFilter.css.js.map +0 -1
- package/cjs/column-filter/ColumnFilter.js +0 -83
- package/cjs/column-filter/ColumnFilter.js.map +0 -1
- package/cjs/column-filter/useColumnFilter.js +0 -139
- package/cjs/column-filter/useColumnFilter.js.map +0 -1
- package/cjs/custom-filters/CustomFilters.js +0 -99
- package/cjs/custom-filters/CustomFilters.js.map +0 -1
- package/cjs/custom-filters/filterBarFocusManagement.js +0 -35
- package/cjs/custom-filters/filterBarFocusManagement.js.map +0 -1
- package/cjs/custom-filters/useCustomFilters.js +0 -266
- package/cjs/custom-filters/useCustomFilters.js.map +0 -1
- package/cjs/custom-filters/useFilterState.js +0 -149
- package/cjs/custom-filters/useFilterState.js.map +0 -1
- package/cjs/filter-bar/FilterBar.css.js +0 -6
- package/cjs/filter-bar/FilterBar.css.js.map +0 -1
- package/cjs/filter-bar/FilterBar.js +0 -123
- package/cjs/filter-bar/FilterBar.js.map +0 -1
- package/cjs/filter-bar/useFilterBar.js +0 -37
- package/cjs/filter-bar/useFilterBar.js.map +0 -1
- package/cjs/filter-clause/ExpandoCombobox.css.js +0 -6
- package/cjs/filter-clause/ExpandoCombobox.css.js.map +0 -1
- package/cjs/filter-clause/ExpandoCombobox.js +0 -114
- package/cjs/filter-clause/ExpandoCombobox.js.map +0 -1
- package/cjs/filter-clause/FilterClause.css.js +0 -6
- package/cjs/filter-clause/FilterClause.css.js.map +0 -1
- package/cjs/filter-clause/FilterClause.js +0 -102
- package/cjs/filter-clause/FilterClause.js.map +0 -1
- package/cjs/filter-clause/column-picker/ColumnPicker.js +0 -39
- package/cjs/filter-clause/column-picker/ColumnPicker.js.map +0 -1
- package/cjs/filter-clause/column-picker/useColumnPicker.js +0 -61
- package/cjs/filter-clause/column-picker/useColumnPicker.js.map +0 -1
- package/cjs/filter-clause/filterClauseFocusManagement.js +0 -204
- package/cjs/filter-clause/filterClauseFocusManagement.js.map +0 -1
- package/cjs/filter-clause/operator-picker/OperatorPicker.js +0 -40
- package/cjs/filter-clause/operator-picker/OperatorPicker.js.map +0 -1
- package/cjs/filter-clause/operator-picker/operator-utils.js +0 -34
- package/cjs/filter-clause/operator-picker/operator-utils.js.map +0 -1
- package/cjs/filter-clause/operator-picker/useOperatorPicker.js +0 -61
- package/cjs/filter-clause/operator-picker/useOperatorPicker.js.map +0 -1
- package/cjs/filter-clause/useFilterClause.js +0 -172
- package/cjs/filter-clause/useFilterClause.js.map +0 -1
- package/cjs/filter-clause/value-editors/FilterClauseValueEditor.js +0 -93
- package/cjs/filter-clause/value-editors/FilterClauseValueEditor.js.map +0 -1
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorDate.js +0 -64
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorDate.js.map +0 -1
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorNumber.js +0 -55
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorNumber.js.map +0 -1
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorText.js +0 -222
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorText.js.map +0 -1
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorTime.js +0 -62
- package/cjs/filter-clause/value-editors/FilterClauseValueEditorTime.js.map +0 -1
- package/cjs/filter-container/ExtendedSingleValueFilterClause.js +0 -63
- package/cjs/filter-container/ExtendedSingleValueFilterClause.js.map +0 -1
- package/cjs/filter-container/FilterContainer.css.js +0 -6
- package/cjs/filter-container/FilterContainer.css.js.map +0 -1
- package/cjs/filter-container/FilterContainer.js +0 -145
- package/cjs/filter-container/FilterContainer.js.map +0 -1
- package/cjs/filter-container/useFilterContainer.js +0 -137
- package/cjs/filter-container/useFilterContainer.js.map +0 -1
- package/cjs/filter-context-menu/useFilterContextMenu.js +0 -129
- package/cjs/filter-context-menu/useFilterContextMenu.js.map +0 -1
- package/cjs/filter-display/FilterDisplay.css.js +0 -6
- package/cjs/filter-display/FilterDisplay.css.js.map +0 -1
- package/cjs/filter-display/FilterDisplay.js +0 -79
- package/cjs/filter-display/FilterDisplay.js.map +0 -1
- package/cjs/filter-editor/FilterClauseCombinator.css.js +0 -6
- package/cjs/filter-editor/FilterClauseCombinator.css.js.map +0 -1
- package/cjs/filter-editor/FilterClauseCombinator.js +0 -42
- package/cjs/filter-editor/FilterClauseCombinator.js.map +0 -1
- package/cjs/filter-editor/FilterEditor.css.js +0 -6
- package/cjs/filter-editor/FilterEditor.css.js.map +0 -1
- package/cjs/filter-editor/FilterEditor.js +0 -101
- package/cjs/filter-editor/FilterEditor.js.map +0 -1
- package/cjs/filter-editor/useFilterEditor.js +0 -191
- package/cjs/filter-editor/useFilterEditor.js.map +0 -1
- package/cjs/filter-panel/FilterPanel.css.js +0 -6
- package/cjs/filter-panel/FilterPanel.css.js.map +0 -1
- package/cjs/filter-panel/FilterPanel.js +0 -91
- package/cjs/filter-panel/FilterPanel.js.map +0 -1
- package/cjs/filter-panel/useFilterPanel.js +0 -68
- package/cjs/filter-panel/useFilterPanel.js.map +0 -1
- package/cjs/filter-pill/FilterMenu.js +0 -63
- package/cjs/filter-pill/FilterMenu.js.map +0 -1
- package/cjs/filter-pill/FilterPill.css.js +0 -6
- package/cjs/filter-pill/FilterPill.css.js.map +0 -1
- package/cjs/filter-pill/FilterPill.js +0 -147
- package/cjs/filter-pill/FilterPill.js.map +0 -1
- package/cjs/filter-pill/FilterPillNext.css.js +0 -6
- package/cjs/filter-pill/FilterPillNext.css.js.map +0 -1
- package/cjs/filter-pill/FilterPillNext.js +0 -91
- package/cjs/filter-pill/FilterPillNext.js.map +0 -1
- package/cjs/filter-pill/filterAsReactNode.js +0 -27
- package/cjs/filter-pill/filterAsReactNode.js.map +0 -1
- package/cjs/filter-pill/getFilterLabel.js +0 -22
- package/cjs/filter-pill/getFilterLabel.js.map +0 -1
- package/cjs/filter-pill/getFilterTooltipText.js +0 -41
- package/cjs/filter-pill/getFilterTooltipText.js.map +0 -1
- package/cjs/filter-pill/useFilterPillNext.js +0 -65
- package/cjs/filter-pill/useFilterPillNext.js.map +0 -1
- package/cjs/filter-pill-menu/FilterPillMenuOptions.js +0 -32
- package/cjs/filter-pill-menu/FilterPillMenuOptions.js.map +0 -1
- package/cjs/filter-provider/FilterContext.js +0 -105
- package/cjs/filter-provider/FilterContext.js.map +0 -1
- package/cjs/filter-provider/FilterProvider.js +0 -240
- package/cjs/filter-provider/FilterProvider.js.map +0 -1
- package/cjs/filter-provider/filter-descriptor-utils.js +0 -67
- package/cjs/filter-provider/filter-descriptor-utils.js.map +0 -1
- package/cjs/filter-utils.js +0 -367
- package/cjs/filter-utils.js.map +0 -1
- package/cjs/index.js +0 -80
- package/cjs/index.js.map +0 -1
- package/cjs/inline-filter/InlineFilter.css.js +0 -6
- package/cjs/inline-filter/InlineFilter.css.js.map +0 -1
- package/cjs/inline-filter/InlineFilter.js +0 -70
- package/cjs/inline-filter/InlineFilter.js.map +0 -1
- package/cjs/inline-filter/useInlineFilter.js +0 -16
- package/cjs/inline-filter/useInlineFilter.js.map +0 -1
- package/cjs/quick-filters/QuickFilters.css.js +0 -6
- package/cjs/quick-filters/QuickFilters.css.js.map +0 -1
- package/cjs/quick-filters/QuickFilters.js +0 -98
- package/cjs/quick-filters/QuickFilters.js.map +0 -1
- package/cjs/quick-filters/useQuickFilters.js +0 -152
- package/cjs/quick-filters/useQuickFilters.js.map +0 -1
- package/cjs/saved-filters/DeleteFilterPrompt.js +0 -37
- package/cjs/saved-filters/DeleteFilterPrompt.js.map +0 -1
- package/cjs/saved-filters/FilterNamePrompt.css.js +0 -6
- package/cjs/saved-filters/FilterNamePrompt.css.js.map +0 -1
- package/cjs/saved-filters/FilterNamePrompt.js +0 -89
- package/cjs/saved-filters/FilterNamePrompt.js.map +0 -1
- package/cjs/saved-filters/SavedFilterPanel.css.js +0 -6
- package/cjs/saved-filters/SavedFilterPanel.css.js.map +0 -1
- package/cjs/saved-filters/SavedFilterPanel.js +0 -62
- package/cjs/saved-filters/SavedFilterPanel.js.map +0 -1
- package/cjs/saved-filters/useFilterNamePrompt.js +0 -98
- package/cjs/saved-filters/useFilterNamePrompt.js.map +0 -1
- package/cjs/saved-filters/useSavedFilterPanel.js +0 -29
- package/cjs/saved-filters/useSavedFilterPanel.js.map +0 -1
- package/cjs/tabbed-filter-container/TabbedFilterContainer.css.js +0 -6
- package/cjs/tabbed-filter-container/TabbedFilterContainer.css.js.map +0 -1
- package/cjs/tabbed-filter-container/TabbedFilterContainer.js +0 -57
- package/cjs/tabbed-filter-container/TabbedFilterContainer.js.map +0 -1
- package/cjs/toggle-filter/ToggleFilter.css.js +0 -6
- package/cjs/toggle-filter/ToggleFilter.css.js.map +0 -1
- package/cjs/toggle-filter/ToggleFilter.js +0 -85
- package/cjs/toggle-filter/ToggleFilter.js.map +0 -1
- package/cjs/toggle-filter/useToggleFilter.js +0 -67
- package/cjs/toggle-filter/useToggleFilter.js.map +0 -1
- package/esm/FilterAggregator.js +0 -160
- package/esm/FilterAggregator.js.map +0 -1
- package/esm/FilterModel.js +0 -224
- package/esm/FilterModel.js.map +0 -1
- package/esm/column-filter/ColumnFilter.css.js +0 -4
- package/esm/column-filter/ColumnFilter.css.js.map +0 -1
- package/esm/column-filter/ColumnFilter.js +0 -81
- package/esm/column-filter/ColumnFilter.js.map +0 -1
- package/esm/column-filter/useColumnFilter.js +0 -137
- package/esm/column-filter/useColumnFilter.js.map +0 -1
- package/esm/custom-filters/CustomFilters.js +0 -97
- package/esm/custom-filters/CustomFilters.js.map +0 -1
- package/esm/custom-filters/filterBarFocusManagement.js +0 -33
- package/esm/custom-filters/filterBarFocusManagement.js.map +0 -1
- package/esm/custom-filters/useCustomFilters.js +0 -263
- package/esm/custom-filters/useCustomFilters.js.map +0 -1
- package/esm/custom-filters/useFilterState.js +0 -147
- package/esm/custom-filters/useFilterState.js.map +0 -1
- package/esm/filter-bar/FilterBar.css.js +0 -4
- package/esm/filter-bar/FilterBar.css.js.map +0 -1
- package/esm/filter-bar/FilterBar.js +0 -121
- package/esm/filter-bar/FilterBar.js.map +0 -1
- package/esm/filter-bar/useFilterBar.js +0 -35
- package/esm/filter-bar/useFilterBar.js.map +0 -1
- package/esm/filter-clause/ExpandoCombobox.css.js +0 -4
- package/esm/filter-clause/ExpandoCombobox.css.js.map +0 -1
- package/esm/filter-clause/ExpandoCombobox.js +0 -112
- package/esm/filter-clause/ExpandoCombobox.js.map +0 -1
- package/esm/filter-clause/FilterClause.css.js +0 -4
- package/esm/filter-clause/FilterClause.css.js.map +0 -1
- package/esm/filter-clause/FilterClause.js +0 -100
- package/esm/filter-clause/FilterClause.js.map +0 -1
- package/esm/filter-clause/column-picker/ColumnPicker.js +0 -37
- package/esm/filter-clause/column-picker/ColumnPicker.js.map +0 -1
- package/esm/filter-clause/column-picker/useColumnPicker.js +0 -59
- package/esm/filter-clause/column-picker/useColumnPicker.js.map +0 -1
- package/esm/filter-clause/filterClauseFocusManagement.js +0 -191
- package/esm/filter-clause/filterClauseFocusManagement.js.map +0 -1
- package/esm/filter-clause/operator-picker/OperatorPicker.js +0 -38
- package/esm/filter-clause/operator-picker/OperatorPicker.js.map +0 -1
- package/esm/filter-clause/operator-picker/operator-utils.js +0 -30
- package/esm/filter-clause/operator-picker/operator-utils.js.map +0 -1
- package/esm/filter-clause/operator-picker/useOperatorPicker.js +0 -59
- package/esm/filter-clause/operator-picker/useOperatorPicker.js.map +0 -1
- package/esm/filter-clause/useFilterClause.js +0 -170
- package/esm/filter-clause/useFilterClause.js.map +0 -1
- package/esm/filter-clause/value-editors/FilterClauseValueEditor.js +0 -91
- package/esm/filter-clause/value-editors/FilterClauseValueEditor.js.map +0 -1
- package/esm/filter-clause/value-editors/FilterClauseValueEditorDate.js +0 -62
- package/esm/filter-clause/value-editors/FilterClauseValueEditorDate.js.map +0 -1
- package/esm/filter-clause/value-editors/FilterClauseValueEditorNumber.js +0 -53
- package/esm/filter-clause/value-editors/FilterClauseValueEditorNumber.js.map +0 -1
- package/esm/filter-clause/value-editors/FilterClauseValueEditorText.js +0 -220
- package/esm/filter-clause/value-editors/FilterClauseValueEditorText.js.map +0 -1
- package/esm/filter-clause/value-editors/FilterClauseValueEditorTime.js +0 -60
- package/esm/filter-clause/value-editors/FilterClauseValueEditorTime.js.map +0 -1
- package/esm/filter-container/ExtendedSingleValueFilterClause.js +0 -60
- package/esm/filter-container/ExtendedSingleValueFilterClause.js.map +0 -1
- package/esm/filter-container/FilterContainer.css.js +0 -4
- package/esm/filter-container/FilterContainer.css.js.map +0 -1
- package/esm/filter-container/FilterContainer.js +0 -142
- package/esm/filter-container/FilterContainer.js.map +0 -1
- package/esm/filter-container/useFilterContainer.js +0 -133
- package/esm/filter-container/useFilterContainer.js.map +0 -1
- package/esm/filter-context-menu/useFilterContextMenu.js +0 -127
- package/esm/filter-context-menu/useFilterContextMenu.js.map +0 -1
- package/esm/filter-display/FilterDisplay.css.js +0 -4
- package/esm/filter-display/FilterDisplay.css.js.map +0 -1
- package/esm/filter-display/FilterDisplay.js +0 -77
- package/esm/filter-display/FilterDisplay.js.map +0 -1
- package/esm/filter-editor/FilterClauseCombinator.css.js +0 -4
- package/esm/filter-editor/FilterClauseCombinator.css.js.map +0 -1
- package/esm/filter-editor/FilterClauseCombinator.js +0 -40
- package/esm/filter-editor/FilterClauseCombinator.js.map +0 -1
- package/esm/filter-editor/FilterEditor.css.js +0 -4
- package/esm/filter-editor/FilterEditor.css.js.map +0 -1
- package/esm/filter-editor/FilterEditor.js +0 -99
- package/esm/filter-editor/FilterEditor.js.map +0 -1
- package/esm/filter-editor/useFilterEditor.js +0 -189
- package/esm/filter-editor/useFilterEditor.js.map +0 -1
- package/esm/filter-panel/FilterPanel.css.js +0 -4
- package/esm/filter-panel/FilterPanel.css.js.map +0 -1
- package/esm/filter-panel/FilterPanel.js +0 -89
- package/esm/filter-panel/FilterPanel.js.map +0 -1
- package/esm/filter-panel/useFilterPanel.js +0 -66
- package/esm/filter-panel/useFilterPanel.js.map +0 -1
- package/esm/filter-pill/FilterMenu.js +0 -61
- package/esm/filter-pill/FilterMenu.js.map +0 -1
- package/esm/filter-pill/FilterPill.css.js +0 -4
- package/esm/filter-pill/FilterPill.css.js.map +0 -1
- package/esm/filter-pill/FilterPill.js +0 -145
- package/esm/filter-pill/FilterPill.js.map +0 -1
- package/esm/filter-pill/FilterPillNext.css.js +0 -4
- package/esm/filter-pill/FilterPillNext.css.js.map +0 -1
- package/esm/filter-pill/FilterPillNext.js +0 -89
- package/esm/filter-pill/FilterPillNext.js.map +0 -1
- package/esm/filter-pill/filterAsReactNode.js +0 -25
- package/esm/filter-pill/filterAsReactNode.js.map +0 -1
- package/esm/filter-pill/getFilterLabel.js +0 -20
- package/esm/filter-pill/getFilterLabel.js.map +0 -1
- package/esm/filter-pill/getFilterTooltipText.js +0 -39
- package/esm/filter-pill/getFilterTooltipText.js.map +0 -1
- package/esm/filter-pill/useFilterPillNext.js +0 -63
- package/esm/filter-pill/useFilterPillNext.js.map +0 -1
- package/esm/filter-pill-menu/FilterPillMenuOptions.js +0 -27
- package/esm/filter-pill-menu/FilterPillMenuOptions.js.map +0 -1
- package/esm/filter-provider/FilterContext.js +0 -94
- package/esm/filter-provider/FilterContext.js.map +0 -1
- package/esm/filter-provider/FilterProvider.js +0 -238
- package/esm/filter-provider/FilterProvider.js.map +0 -1
- package/esm/filter-provider/filter-descriptor-utils.js +0 -61
- package/esm/filter-provider/filter-descriptor-utils.js.map +0 -1
- package/esm/filter-utils.js +0 -344
- package/esm/filter-utils.js.map +0 -1
- package/esm/index.js +0 -26
- package/esm/index.js.map +0 -1
- package/esm/inline-filter/InlineFilter.css.js +0 -4
- package/esm/inline-filter/InlineFilter.css.js.map +0 -1
- package/esm/inline-filter/InlineFilter.js +0 -68
- package/esm/inline-filter/InlineFilter.js.map +0 -1
- package/esm/inline-filter/useInlineFilter.js +0 -14
- package/esm/inline-filter/useInlineFilter.js.map +0 -1
- package/esm/quick-filters/QuickFilters.css.js +0 -4
- package/esm/quick-filters/QuickFilters.css.js.map +0 -1
- package/esm/quick-filters/QuickFilters.js +0 -96
- package/esm/quick-filters/QuickFilters.js.map +0 -1
- package/esm/quick-filters/useQuickFilters.js +0 -150
- package/esm/quick-filters/useQuickFilters.js.map +0 -1
- package/esm/saved-filters/DeleteFilterPrompt.js +0 -35
- package/esm/saved-filters/DeleteFilterPrompt.js.map +0 -1
- package/esm/saved-filters/FilterNamePrompt.css.js +0 -4
- package/esm/saved-filters/FilterNamePrompt.css.js.map +0 -1
- package/esm/saved-filters/FilterNamePrompt.js +0 -87
- package/esm/saved-filters/FilterNamePrompt.js.map +0 -1
- package/esm/saved-filters/SavedFilterPanel.css.js +0 -4
- package/esm/saved-filters/SavedFilterPanel.css.js.map +0 -1
- package/esm/saved-filters/SavedFilterPanel.js +0 -60
- package/esm/saved-filters/SavedFilterPanel.js.map +0 -1
- package/esm/saved-filters/useFilterNamePrompt.js +0 -95
- package/esm/saved-filters/useFilterNamePrompt.js.map +0 -1
- package/esm/saved-filters/useSavedFilterPanel.js +0 -27
- package/esm/saved-filters/useSavedFilterPanel.js.map +0 -1
- package/esm/tabbed-filter-container/TabbedFilterContainer.css.js +0 -4
- package/esm/tabbed-filter-container/TabbedFilterContainer.css.js.map +0 -1
- package/esm/tabbed-filter-container/TabbedFilterContainer.js +0 -55
- package/esm/tabbed-filter-container/TabbedFilterContainer.js.map +0 -1
- package/esm/toggle-filter/ToggleFilter.css.js +0 -4
- package/esm/toggle-filter/ToggleFilter.css.js.map +0 -1
- package/esm/toggle-filter/ToggleFilter.js +0 -83
- package/esm/toggle-filter/ToggleFilter.js.map +0 -1
- package/esm/toggle-filter/useToggleFilter.js +0 -65
- package/esm/toggle-filter/useToggleFilter.js.map +0 -1
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuDataReact = require('@vuu-ui/vuu-data-react');
|
|
5
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
var styles = require('@salt-ds/styles');
|
|
8
|
-
var window = require('@salt-ds/window');
|
|
9
|
-
var useQuickFilters = require('./useQuickFilters.js');
|
|
10
|
-
var QuickFilters$1 = require('./QuickFilters.css.js');
|
|
11
|
-
|
|
12
|
-
const classBase = "vuuQuickFilters";
|
|
13
|
-
const QuickFilters = ({
|
|
14
|
-
allowAddColumn = true,
|
|
15
|
-
allowFind = true,
|
|
16
|
-
availableColumns,
|
|
17
|
-
onApplyFilter,
|
|
18
|
-
onClearFilter,
|
|
19
|
-
onChangeQuickFilterColumns,
|
|
20
|
-
quickFilterColumns,
|
|
21
|
-
vuuTable
|
|
22
|
-
}) => {
|
|
23
|
-
const targetWindow = window.useWindow();
|
|
24
|
-
styles.useComponentCssInjection({
|
|
25
|
-
testId: "vuu-quick-filters",
|
|
26
|
-
css: QuickFilters$1,
|
|
27
|
-
window: targetWindow
|
|
28
|
-
});
|
|
29
|
-
const searchIcon = /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "search", size: 18 });
|
|
30
|
-
const {
|
|
31
|
-
availableColumnNames,
|
|
32
|
-
onChange,
|
|
33
|
-
onColumnsSelectionChange,
|
|
34
|
-
onCommit,
|
|
35
|
-
rootRef
|
|
36
|
-
} = useQuickFilters.useQuickFilters({
|
|
37
|
-
availableColumns,
|
|
38
|
-
onApplyFilter,
|
|
39
|
-
onClearFilter,
|
|
40
|
-
onChangeQuickFilterColumns,
|
|
41
|
-
quickFilterColumns
|
|
42
|
-
});
|
|
43
|
-
const filterColumns = availableColumns.filter(
|
|
44
|
-
({ name }) => quickFilterColumns?.includes(name)
|
|
45
|
-
);
|
|
46
|
-
const getFilterControls = () => {
|
|
47
|
-
const controls = [];
|
|
48
|
-
if (allowFind) {
|
|
49
|
-
controls.push(
|
|
50
|
-
/* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-embedded": true, "data-field": "find", children: [
|
|
51
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Find" }),
|
|
52
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
53
|
-
vuuUiControls.VuuInput,
|
|
54
|
-
{
|
|
55
|
-
inputProps: {
|
|
56
|
-
onChange
|
|
57
|
-
},
|
|
58
|
-
onCommit,
|
|
59
|
-
startAdornment: searchIcon,
|
|
60
|
-
variant: "secondary"
|
|
61
|
-
}
|
|
62
|
-
)
|
|
63
|
-
] }, "find")
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
{
|
|
67
|
-
filterColumns?.forEach(
|
|
68
|
-
(column) => controls.push(
|
|
69
|
-
/* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": column.name, children: [
|
|
70
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: column.label ?? column.name }),
|
|
71
|
-
vuuDataReact.getDataItemEditControl({
|
|
72
|
-
dataDescriptor: column,
|
|
73
|
-
onCommit,
|
|
74
|
-
table: vuuTable
|
|
75
|
-
})
|
|
76
|
-
] }, column.label ?? column.name)
|
|
77
|
-
)
|
|
78
|
-
);
|
|
79
|
-
}
|
|
80
|
-
return controls;
|
|
81
|
-
};
|
|
82
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, ref: rootRef, children: [
|
|
83
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-filter-container`, children: getFilterControls() }),
|
|
84
|
-
allowAddColumn ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
85
|
-
vuuUiControls.ColumnPicker,
|
|
86
|
-
{
|
|
87
|
-
columns: availableColumnNames,
|
|
88
|
-
icon: "more-horiz",
|
|
89
|
-
iconSize: 16,
|
|
90
|
-
onSelectionChange: onColumnsSelectionChange,
|
|
91
|
-
selected: quickFilterColumns
|
|
92
|
-
}
|
|
93
|
-
) : null
|
|
94
|
-
] });
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
exports.QuickFilters = QuickFilters;
|
|
98
|
-
//# sourceMappingURL=QuickFilters.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"QuickFilters.js","sources":["../../../../packages/vuu-filters/src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<FilterBarProps, \"onApplyFilter\" | \"onClearFilter\" | \"vuuTable\"> {\n allowAddColumn?: boolean;\n allowFind?: boolean;\n availableColumns: readonly ColumnDescriptor[];\n onChangeQuickFilterColumns?: (columns: string[]) => void;\n quickFilterColumns?: string[];\n /**\n * Render a general 'search' control.\n * if true, all columns of type 'string' will be included in the search. Otherwise\n * a list of the columns to include in search can be provided.\n */\n showFind?: boolean | string[];\n}\n\nexport const QuickFilters = ({\n allowAddColumn = true,\n allowFind = true,\n availableColumns,\n onApplyFilter,\n onClearFilter,\n onChangeQuickFilterColumns,\n quickFilterColumns,\n vuuTable,\n}: QuickFilterProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-quick-filters\",\n css: quickFiltersCss,\n window: targetWindow,\n });\n\n const searchIcon = <Icon name=\"search\" size={18} />;\n\n const {\n availableColumnNames,\n onChange,\n onColumnsSelectionChange,\n onCommit,\n rootRef,\n } = useQuickFilters({\n availableColumns,\n onApplyFilter,\n onClearFilter,\n onChangeQuickFilterColumns,\n quickFilterColumns,\n });\n\n const filterColumns = availableColumns.filter(({ name }) =>\n quickFilterColumns?.includes(name),\n );\n\n const getFilterControls = () => {\n const controls = [];\n if (allowFind) {\n controls.push(\n <FormField data-embedded data-field=\"find\" key=\"find\">\n <FormFieldLabel>Find</FormFieldLabel>\n <VuuInput\n inputProps={{\n onChange,\n }}\n onCommit={onCommit}\n startAdornment={searchIcon}\n variant=\"secondary\"\n />\n </FormField>,\n );\n }\n {\n filterColumns?.forEach((column) =>\n controls.push(\n <FormField key={column.label ?? column.name} data-field={column.name}>\n <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n {getDataItemEditControl({\n dataDescriptor: column,\n onCommit,\n table: vuuTable,\n })}\n </FormField>,\n ),\n );\n }\n\n return controls;\n };\n\n return (\n <div className={classBase} ref={rootRef}>\n <div className={`${classBase}-filter-container`}>\n {getFilterControls()}\n </div>\n {allowAddColumn ? (\n <ColumnPicker\n columns={availableColumnNames}\n icon=\"more-horiz\"\n iconSize={16}\n onSelectionChange={onColumnsSelectionChange}\n selected={quickFilterColumns}\n />\n ) : null}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","quickFiltersCss","jsx","Icon","useQuickFilters","jsxs","FormField","FormFieldLabel","VuuInput","getDataItemEditControl","ColumnPicker"],"mappings":"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"}
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
|
|
6
|
-
const findColumn = (columns, name) => {
|
|
7
|
-
const column = columns?.find((col) => col.name === name);
|
|
8
|
-
if (column) {
|
|
9
|
-
return column;
|
|
10
|
-
} else {
|
|
11
|
-
throw Error(`column not found ${name}`);
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
const asNumeric = (value, column) => {
|
|
15
|
-
switch (column.serverDataType) {
|
|
16
|
-
case "int":
|
|
17
|
-
case "long": {
|
|
18
|
-
const numericValue = parseInt(value, 10);
|
|
19
|
-
if (isNaN(numericValue)) {
|
|
20
|
-
throw Error(`invalid value ${value} is not integer`);
|
|
21
|
-
} else {
|
|
22
|
-
return numericValue;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
case "double": {
|
|
26
|
-
const numericValue = parseFloat(value);
|
|
27
|
-
if (isNaN(numericValue)) {
|
|
28
|
-
throw Error(`invalid value ${value} is not decimal`);
|
|
29
|
-
} else {
|
|
30
|
-
return numericValue;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
default:
|
|
34
|
-
throw Error(
|
|
35
|
-
`DataType of column ${column.name}, ${column.serverDataType} is not numeric`
|
|
36
|
-
);
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
const createFilterClause = ([identifier, value], availableColumns) => {
|
|
40
|
-
if (identifier === "find") {
|
|
41
|
-
if (availableColumns) {
|
|
42
|
-
const targetColumns = availableColumns.filter(
|
|
43
|
-
({ serverDataType }) => serverDataType === "string"
|
|
44
|
-
);
|
|
45
|
-
if (targetColumns.length) {
|
|
46
|
-
return {
|
|
47
|
-
op: "or",
|
|
48
|
-
filters: targetColumns.map(
|
|
49
|
-
(column) => createFilterClause([column.name, value], availableColumns)
|
|
50
|
-
)
|
|
51
|
-
};
|
|
52
|
-
} else {
|
|
53
|
-
throw Error(`value ${value} is not valid for any of available columns`);
|
|
54
|
-
}
|
|
55
|
-
} else {
|
|
56
|
-
throw Error("columns must be provided for find operation");
|
|
57
|
-
}
|
|
58
|
-
} else {
|
|
59
|
-
const column = findColumn(availableColumns, identifier);
|
|
60
|
-
if (vuuUtils.isNumericColumn(column)) {
|
|
61
|
-
const numericValue = asNumeric(value, column);
|
|
62
|
-
return {
|
|
63
|
-
column: identifier,
|
|
64
|
-
op: "=",
|
|
65
|
-
value: numericValue
|
|
66
|
-
};
|
|
67
|
-
} else {
|
|
68
|
-
return {
|
|
69
|
-
column: identifier,
|
|
70
|
-
op: "contains",
|
|
71
|
-
value
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
const buildFilter = (quickFilters, availableColumns) => {
|
|
77
|
-
const entries = Object.entries(quickFilters);
|
|
78
|
-
if (entries.length === 1) {
|
|
79
|
-
return createFilterClause(entries[0], availableColumns);
|
|
80
|
-
} else if (entries.length > 1) {
|
|
81
|
-
return {
|
|
82
|
-
op: "and",
|
|
83
|
-
filters: entries.map(
|
|
84
|
-
(entry) => createFilterClause(entry, availableColumns),
|
|
85
|
-
availableColumns
|
|
86
|
-
)
|
|
87
|
-
};
|
|
88
|
-
}
|
|
89
|
-
};
|
|
90
|
-
const useQuickFilters = ({
|
|
91
|
-
availableColumns,
|
|
92
|
-
onApplyFilter,
|
|
93
|
-
onClearFilter,
|
|
94
|
-
onChangeQuickFilterColumns
|
|
95
|
-
}) => {
|
|
96
|
-
const filters = react.useRef({});
|
|
97
|
-
const rootRef = react.useCallback((el) => {
|
|
98
|
-
if (el) {
|
|
99
|
-
const firstInput = el.querySelector("input");
|
|
100
|
-
firstInput?.focus();
|
|
101
|
-
}
|
|
102
|
-
}, []);
|
|
103
|
-
const handleChange = react.useCallback(
|
|
104
|
-
(e) => {
|
|
105
|
-
console.log(`onChange ${e.target.value}`);
|
|
106
|
-
},
|
|
107
|
-
[]
|
|
108
|
-
);
|
|
109
|
-
const handleCommit = react.useCallback(
|
|
110
|
-
(e, value) => {
|
|
111
|
-
const field = vuuUtils.queryClosest(e.target, "[data-field]");
|
|
112
|
-
const column = field?.dataset.field;
|
|
113
|
-
if (column) {
|
|
114
|
-
if (value === void 0 || typeof value === "string" && value.trim() === "") {
|
|
115
|
-
if (filters.current[column] === void 0) {
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
delete filters.current[column];
|
|
119
|
-
} else if (typeof value === "string" && value.trim() !== "") {
|
|
120
|
-
filters.current[column] = value;
|
|
121
|
-
}
|
|
122
|
-
const filter = buildFilter(filters.current, availableColumns);
|
|
123
|
-
if (filter) {
|
|
124
|
-
onApplyFilter?.(filter);
|
|
125
|
-
} else {
|
|
126
|
-
onClearFilter();
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
[availableColumns, onApplyFilter, onClearFilter]
|
|
131
|
-
);
|
|
132
|
-
const handleColumnsSelectionChange = react.useCallback(
|
|
133
|
-
(evt, newSelected) => {
|
|
134
|
-
onChangeQuickFilterColumns?.(newSelected);
|
|
135
|
-
},
|
|
136
|
-
[onChangeQuickFilterColumns]
|
|
137
|
-
);
|
|
138
|
-
const availableColumnNames = react.useMemo(
|
|
139
|
-
() => availableColumns.map((col) => col.name),
|
|
140
|
-
[availableColumns]
|
|
141
|
-
);
|
|
142
|
-
return {
|
|
143
|
-
availableColumnNames,
|
|
144
|
-
onChange: handleChange,
|
|
145
|
-
onColumnsSelectionChange: handleColumnsSelectionChange,
|
|
146
|
-
onCommit: handleCommit,
|
|
147
|
-
rootRef
|
|
148
|
-
};
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
exports.useQuickFilters = useQuickFilters;
|
|
152
|
-
//# sourceMappingURL=useQuickFilters.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useQuickFilters.js","sources":["../../../../packages/vuu-filters/src/quick-filters/useQuickFilters.ts"],"sourcesContent":["import type { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n CommitHandler,\n isNumericColumn,\n queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n ChangeEventHandler,\n RefCallback,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\nimport { QuickFilterProps } from \"./QuickFilters\";\n\ntype QuickFilterValues = Record<string, string>;\n\nconst findColumn = (columns: readonly ColumnDescriptor[], name: string) => {\n const column = columns?.find((col) => col.name === name);\n if (column) {\n return column;\n } else {\n throw Error(`column not found ${name}`);\n }\n};\n\nconst asNumeric = (value: string, column: ColumnDescriptor): number => {\n switch (column.serverDataType) {\n case \"int\":\n case \"long\": {\n const numericValue = parseInt(value, 10);\n if (isNaN(numericValue)) {\n throw Error(`invalid value ${value} is not integer`);\n } else {\n return numericValue;\n }\n }\n case \"double\": {\n const numericValue = parseFloat(value);\n if (isNaN(numericValue)) {\n throw Error(`invalid value ${value} is not decimal`);\n } else {\n return numericValue;\n }\n }\n default:\n throw Error(\n `DataType of column ${column.name}, ${column.serverDataType} is not numeric`,\n );\n }\n};\n\nconst createFilterClause = (\n [identifier, value]: [string, string],\n availableColumns: readonly ColumnDescriptor[],\n): Filter => {\n if (identifier === \"find\") {\n if (availableColumns) {\n const targetColumns = availableColumns.filter(\n ({ serverDataType }) => serverDataType === \"string\",\n );\n if (targetColumns.length) {\n return {\n op: \"or\",\n filters: targetColumns.map((column) =>\n createFilterClause([column.name, value], availableColumns),\n ),\n };\n } else {\n throw Error(`value ${value} is not valid for any of available columns`);\n }\n } else {\n throw Error(\"columns must be provided for find operation\");\n }\n } else {\n const column = findColumn(availableColumns, identifier);\n if (isNumericColumn(column)) {\n const numericValue = asNumeric(value, column);\n return {\n column: identifier,\n op: \"=\",\n value: numericValue,\n };\n } else {\n return {\n column: identifier,\n op: \"contains\",\n value,\n };\n }\n }\n};\n\nconst buildFilter = (\n quickFilters: QuickFilterValues,\n availableColumns: readonly ColumnDescriptor[],\n): Filter | undefined => {\n const entries = Object.entries(quickFilters);\n if (entries.length === 1) {\n return createFilterClause(entries[0], availableColumns);\n } else if (entries.length > 1) {\n return {\n op: \"and\",\n filters: entries.map(\n (entry) => createFilterClause(entry, availableColumns),\n availableColumns,\n ),\n };\n }\n};\n\nexport type QuickFilterHookProps = Pick<\n QuickFilterProps,\n | \"availableColumns\"\n | \"onApplyFilter\"\n | \"onClearFilter\"\n | \"onChangeQuickFilterColumns\"\n | \"quickFilterColumns\"\n>;\n\nexport const useQuickFilters = ({\n availableColumns,\n onApplyFilter,\n onClearFilter,\n onChangeQuickFilterColumns,\n}: QuickFilterProps) => {\n const filters = useRef<QuickFilterValues>({});\n const rootRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n if (el) {\n const firstInput = el.querySelector(\"input\");\n firstInput?.focus();\n }\n }, []);\n\n const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n (e) => {\n console.log(`onChange ${e.target.value}`);\n },\n [],\n );\n\n const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n (e, value) => {\n const field = queryClosest(e.target, \"[data-field]\");\n const column = field?.dataset.field;\n if (column) {\n if (\n value === undefined ||\n (typeof value === \"string\" && value.trim() === \"\")\n ) {\n if (filters.current[column] === undefined) {\n return;\n }\n delete filters.current[column];\n } else if (typeof value === \"string\" && value.trim() !== \"\") {\n filters.current[column] = value;\n }\n\n const filter = buildFilter(filters.current, availableColumns);\n if (filter) {\n onApplyFilter?.(filter);\n } else {\n onClearFilter();\n }\n }\n },\n [availableColumns, onApplyFilter, onClearFilter],\n );\n\n const handleColumnsSelectionChange = useCallback<MultiSelectionHandler>(\n (evt, newSelected) => {\n onChangeQuickFilterColumns?.(newSelected);\n },\n [onChangeQuickFilterColumns],\n );\n\n const availableColumnNames = useMemo(\n () => availableColumns.map((col) => col.name),\n [availableColumns],\n );\n\n return {\n availableColumnNames,\n onChange: handleChange,\n onColumnsSelectionChange: handleColumnsSelectionChange,\n onCommit: handleCommit,\n rootRef,\n };\n};\n"],"names":["isNumericColumn","useRef","useCallback","queryClosest","useMemo"],"mappings":"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"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
5
|
-
var cx = require('clsx');
|
|
6
|
-
var FilterDisplay = require('../filter-display/FilterDisplay.js');
|
|
7
|
-
|
|
8
|
-
const DeleteFilterPrompt = ({
|
|
9
|
-
children,
|
|
10
|
-
className,
|
|
11
|
-
columns,
|
|
12
|
-
filterDescriptor,
|
|
13
|
-
onClose,
|
|
14
|
-
onConfirm,
|
|
15
|
-
open = true,
|
|
16
|
-
...htmlAttributes
|
|
17
|
-
}) => {
|
|
18
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
19
|
-
vuuUiControls.Prompt,
|
|
20
|
-
{
|
|
21
|
-
...htmlAttributes,
|
|
22
|
-
className: cx("vuuDeleteFilterPrompt", className),
|
|
23
|
-
initialFocusedItem: "confirm",
|
|
24
|
-
onClose,
|
|
25
|
-
onConfirm,
|
|
26
|
-
open,
|
|
27
|
-
title: "Delete Filter",
|
|
28
|
-
children: [
|
|
29
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { children: `Do you want to delete '${filterDescriptor.filter?.name}' ?` }),
|
|
30
|
-
children ? children : filterDescriptor.filter ? /* @__PURE__ */ jsxRuntime.jsx(FilterDisplay.FilterDisplay, { columns, filter: filterDescriptor.filter }) : null
|
|
31
|
-
]
|
|
32
|
-
}
|
|
33
|
-
);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
exports.DeleteFilterPrompt = DeleteFilterPrompt;
|
|
37
|
-
//# sourceMappingURL=DeleteFilterPrompt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DeleteFilterPrompt.js","sources":["../../../../packages/vuu-filters/src/saved-filters/DeleteFilterPrompt.tsx"],"sourcesContent":["import { FilterContainerFilterDescriptor } from \"@vuu-ui/vuu-filter-types\";\nimport { Prompt, PromptProps } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { FilterDisplay } from \"../filter-display/FilterDisplay\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport interface DeleteFilterPromptProps\n extends Pick<PromptProps, \"onConfirm\" | \"onClose\" | \"open\">,\n HTMLAttributes<HTMLDivElement> {\n columns?: ColumnDescriptor[];\n filterDescriptor: FilterContainerFilterDescriptor;\n}\n\nexport const DeleteFilterPrompt = ({\n children,\n className,\n columns,\n filterDescriptor,\n onClose,\n onConfirm,\n open = true,\n ...htmlAttributes\n}: DeleteFilterPromptProps) => {\n return (\n <Prompt\n {...htmlAttributes}\n className={cx(\"vuuDeleteFilterPrompt\", className)}\n initialFocusedItem=\"confirm\"\n onClose={onClose}\n onConfirm={onConfirm}\n open={open}\n title=\"Delete Filter\"\n >\n <span>{`Do you want to delete '${filterDescriptor.filter?.name}' ?`}</span>\n {children ? (\n children\n ) : filterDescriptor.filter ? (\n <FilterDisplay columns={columns} filter={filterDescriptor.filter} />\n ) : null}\n </Prompt>\n );\n};\n"],"names":["jsxs","Prompt","jsx","FilterDisplay"],"mappings":";;;;;;;AAcO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAO,GAAA,IAAA;AAAA,EACP,GAAG;AACL,CAA+B,KAAA;AAC7B,EACE,uBAAAA,eAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,uBAAA,EAAyB,SAAS,CAAA;AAAA,MAChD,kBAAmB,EAAA,SAAA;AAAA,MACnB,OAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAM,EAAA,eAAA;AAAA,MAEN,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CAAA,uBAAA,EAA0B,gBAAiB,CAAA,MAAA,EAAQ,IAAI,CAAM,GAAA,CAAA,EAAA,CAAA;AAAA,QACnE,QAAA,GACC,QACE,GAAA,gBAAA,CAAiB,MACnB,mBAAAA,cAAA,CAACC,+BAAc,OAAkB,EAAA,MAAA,EAAQ,gBAAiB,CAAA,MAAA,EAAQ,CAChE,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var filterNamePromptCss = ".vuuFilterNamePrompt {\n .saltText-warning {\n padding: var(--salt-spacing-400) 0;\n }\n .saltDialogContent {\n background: none;\n padding:0;\n .saltDialogContent-inner {\n padding: var(--vuuFilterNamePrompt-content-padding, 1px);\n }\n }\n}";
|
|
4
|
-
|
|
5
|
-
module.exports = filterNamePromptCss;
|
|
6
|
-
//# sourceMappingURL=FilterNamePrompt.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FilterNamePrompt.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@salt-ds/core');
|
|
5
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
6
|
-
var react = require('react');
|
|
7
|
-
var cx = require('clsx');
|
|
8
|
-
var useFilterNamePrompt = require('./useFilterNamePrompt.js');
|
|
9
|
-
var styles = require('@salt-ds/styles');
|
|
10
|
-
var window = require('@salt-ds/window');
|
|
11
|
-
var FilterNamePrompt$1 = require('./FilterNamePrompt.css.js');
|
|
12
|
-
|
|
13
|
-
const DUPLICATE_NAME_MESSAGE = "A filter with this name already exists";
|
|
14
|
-
const DEFAULT_FILTER_NAME_MAX_LENGTH = 25;
|
|
15
|
-
const FilterNamePrompt = ({
|
|
16
|
-
className,
|
|
17
|
-
filterName,
|
|
18
|
-
onClose,
|
|
19
|
-
onConfirm: onConfirmProp,
|
|
20
|
-
open = true,
|
|
21
|
-
title,
|
|
22
|
-
filterNameMaxLength = DEFAULT_FILTER_NAME_MAX_LENGTH,
|
|
23
|
-
...htmlAttributes
|
|
24
|
-
}) => {
|
|
25
|
-
const targetWindow = window.useWindow();
|
|
26
|
-
styles.useComponentCssInjection({
|
|
27
|
-
testId: "vuu-saved-filter-panel",
|
|
28
|
-
css: FilterNamePrompt$1,
|
|
29
|
-
window: targetWindow
|
|
30
|
-
});
|
|
31
|
-
const inputRef = react.useRef(null);
|
|
32
|
-
const {
|
|
33
|
-
confirmButtonProps,
|
|
34
|
-
nameOfDuplicateFilter,
|
|
35
|
-
onChange,
|
|
36
|
-
onCommit,
|
|
37
|
-
onConfirm,
|
|
38
|
-
status,
|
|
39
|
-
value
|
|
40
|
-
} = useFilterNamePrompt.useFilterNamePrompt({
|
|
41
|
-
filterName,
|
|
42
|
-
onConfirm: onConfirmProp
|
|
43
|
-
});
|
|
44
|
-
const formFieldHelperText = status === useFilterNamePrompt.Status.DuplicateName ? DUPLICATE_NAME_MESSAGE : void 0;
|
|
45
|
-
react.useEffect(() => {
|
|
46
|
-
setTimeout(() => {
|
|
47
|
-
inputRef.current?.focus();
|
|
48
|
-
}, 200);
|
|
49
|
-
}, []);
|
|
50
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51
|
-
vuuUiControls.Prompt,
|
|
52
|
-
{
|
|
53
|
-
...htmlAttributes,
|
|
54
|
-
className: cx("vuuFilterNamePrompt", className),
|
|
55
|
-
confirmButtonProps,
|
|
56
|
-
disableAccent: true,
|
|
57
|
-
onClose,
|
|
58
|
-
onConfirm,
|
|
59
|
-
open,
|
|
60
|
-
title,
|
|
61
|
-
children: [
|
|
62
|
-
/* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
|
|
63
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Filter name" }),
|
|
64
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
65
|
-
vuuUiControls.VuuInput,
|
|
66
|
-
{
|
|
67
|
-
commitOnBlur: false,
|
|
68
|
-
inputRef,
|
|
69
|
-
onChange,
|
|
70
|
-
onCommit,
|
|
71
|
-
defaultValue: value,
|
|
72
|
-
placeholder: "Please enter",
|
|
73
|
-
inputProps: { maxLength: filterNameMaxLength }
|
|
74
|
-
}
|
|
75
|
-
),
|
|
76
|
-
formFieldHelperText ? /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldHelperText, { children: formFieldHelperText }) : null
|
|
77
|
-
] }),
|
|
78
|
-
nameOfDuplicateFilter ? /* @__PURE__ */ jsxRuntime.jsxs(core.Text, { color: "warning", children: [
|
|
79
|
-
"An identical filter has already been saved, see",
|
|
80
|
-
" ",
|
|
81
|
-
/* @__PURE__ */ jsxRuntime.jsx("b", { children: nameOfDuplicateFilter })
|
|
82
|
-
] }) : null
|
|
83
|
-
]
|
|
84
|
-
}
|
|
85
|
-
);
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
exports.FilterNamePrompt = FilterNamePrompt;
|
|
89
|
-
//# sourceMappingURL=FilterNamePrompt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FilterNamePrompt.js","sources":["../../../../packages/vuu-filters/src/saved-filters/FilterNamePrompt.tsx"],"sourcesContent":["import {\n FormField,\n FormFieldHelperText,\n FormFieldLabel,\n Text,\n} from \"@salt-ds/core\";\nimport { Prompt, PromptProps, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes, useEffect, useRef } from \"react\";\nimport cx from \"clsx\";\nimport {\n FilterNamePromptHookProps,\n Status,\n useFilterNamePrompt,\n} from \"./useFilterNamePrompt\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport filterNamePromptCss from \"./FilterNamePrompt.css\";\n\nconst DUPLICATE_NAME_MESSAGE = \"A filter with this name already exists\";\nconst DEFAULT_FILTER_NAME_MAX_LENGTH = 25;\n\nexport interface FilterNamePromptProps\n extends FilterNamePromptHookProps,\n Pick<PromptProps, \"onClose\" | \"open\" | \"title\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {}\n\nexport const FilterNamePrompt = ({\n className,\n filterName,\n onClose,\n onConfirm: onConfirmProp,\n open = true,\n title,\n filterNameMaxLength = DEFAULT_FILTER_NAME_MAX_LENGTH,\n ...htmlAttributes\n}: FilterNamePromptProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-saved-filter-panel\",\n css: filterNamePromptCss,\n window: targetWindow,\n });\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const {\n confirmButtonProps,\n nameOfDuplicateFilter,\n onChange,\n onCommit,\n onConfirm,\n status,\n value,\n } = useFilterNamePrompt({\n filterName,\n onConfirm: onConfirmProp,\n });\n\n const formFieldHelperText =\n status === Status.DuplicateName ? DUPLICATE_NAME_MESSAGE : undefined;\n\n useEffect(() => {\n setTimeout(() => {\n inputRef.current?.focus();\n }, 200);\n }, []);\n\n return (\n <Prompt\n {...htmlAttributes}\n className={cx(\"vuuFilterNamePrompt\", className)}\n confirmButtonProps={confirmButtonProps}\n disableAccent\n onClose={onClose}\n onConfirm={onConfirm}\n open={open}\n title={title}\n >\n <FormField>\n <FormFieldLabel>Filter name</FormFieldLabel>\n <VuuInput\n commitOnBlur={false}\n inputRef={inputRef}\n onChange={onChange}\n onCommit={onCommit}\n defaultValue={value}\n placeholder=\"Please enter\"\n inputProps={{ maxLength: filterNameMaxLength }}\n />\n {formFieldHelperText ? (\n <FormFieldHelperText>{formFieldHelperText}</FormFieldHelperText>\n ) : null}\n </FormField>\n {nameOfDuplicateFilter ? (\n <Text color=\"warning\">\n An identical filter has already been saved, see{\" \"}\n <b>{nameOfDuplicateFilter}</b>\n </Text>\n ) : null}\n </Prompt>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","filterNamePromptCss","useRef","useFilterNamePrompt","Status","useEffect","jsxs","Prompt","FormField","jsx","FormFieldLabel","VuuInput","FormFieldHelperText","Text"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,sBAAyB,GAAA,wCAAA;AAC/B,MAAM,8BAAiC,GAAA,EAAA;AAOhC,MAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,IAAO,GAAA,IAAA;AAAA,EACP,KAAA;AAAA,EACA,mBAAsB,GAAA,8BAAA;AAAA,EACtB,GAAG;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,aAAyB,IAAI,CAAA;AAE9C,EAAM,MAAA;AAAA,IACJ,kBAAA;AAAA,IACA,qBAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,MACEC,uCAAoB,CAAA;AAAA,IACtB,UAAA;AAAA,IACA,SAAW,EAAA;AAAA,GACZ,CAAA;AAED,EAAA,MAAM,mBACJ,GAAA,MAAA,KAAWC,0BAAO,CAAA,aAAA,GAAgB,sBAAyB,GAAA,KAAA,CAAA;AAE7D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,QAAA,CAAS,SAAS,KAAM,EAAA;AAAA,OACvB,GAAG,CAAA;AAAA,GACR,EAAG,EAAE,CAAA;AAEL,EACE,uBAAAC,eAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAC9C,kBAAA;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,OAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAACE,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,uBAAe,QAAW,EAAA,aAAA,EAAA,CAAA;AAAA,0BAC3BD,cAAA;AAAA,YAACE,sBAAA;AAAA,YAAA;AAAA,cACC,YAAc,EAAA,KAAA;AAAA,cACd,QAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,YAAc,EAAA,KAAA;AAAA,cACd,WAAY,EAAA,cAAA;AAAA,cACZ,UAAA,EAAY,EAAE,SAAA,EAAW,mBAAoB;AAAA;AAAA,WAC/C;AAAA,UACC,mBACC,mBAAAF,cAAA,CAACG,wBAAqB,EAAA,EAAA,QAAA,EAAA,mBAAA,EAAoB,CACxC,GAAA;AAAA,SACN,EAAA,CAAA;AAAA,QACC,qBACC,mBAAAN,eAAA,CAACO,SAAK,EAAA,EAAA,KAAA,EAAM,SAAU,EAAA,QAAA,EAAA;AAAA,UAAA,iDAAA;AAAA,UAC4B,GAAA;AAAA,0BAChDJ,cAAA,CAAC,OAAG,QAAsB,EAAA,qBAAA,EAAA;AAAA,SAAA,EAC5B,CACE,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var savedFilterPanelCss = ".vuuSavedFilterPanel {\n background-color: var(--vuuSavedFilterPanel-background, var(--salt-container-secondary-background));\n overflow: auto;\n padding: var(--vuuSavedFilterPanel-padding, calc(var(--salt-spacing-200) * 3));\n\n .vuuFilterPillNext {\n max-width: 100%;\n }\n}\n\n.vuuSavedFilterPanel-filterPill-container {\n gap: var(--salt-spacing-400);\n display: flex;\n flex-wrap: wrap;\n height: fit-content;\n}";
|
|
4
|
-
|
|
5
|
-
module.exports = savedFilterPanelCss;
|
|
6
|
-
//# sourceMappingURL=SavedFilterPanel.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SavedFilterPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react = require('react');
|
|
5
|
-
var styles = require('@salt-ds/styles');
|
|
6
|
-
var window = require('@salt-ds/window');
|
|
7
|
-
var cx = require('clsx');
|
|
8
|
-
var FilterPillNext = require('../filter-pill/FilterPillNext.js');
|
|
9
|
-
var useSavedFilterPanel = require('./useSavedFilterPanel.js');
|
|
10
|
-
var SavedFilterPanel$1 = require('./SavedFilterPanel.css.js');
|
|
11
|
-
|
|
12
|
-
const classBase = "vuuSavedFilterPanel";
|
|
13
|
-
const defaultFilterPillPermissions = {
|
|
14
|
-
allowEdit: true,
|
|
15
|
-
allowRename: true,
|
|
16
|
-
allowRemove: true
|
|
17
|
-
};
|
|
18
|
-
const SavedFilterPanel = ({
|
|
19
|
-
availableColumns,
|
|
20
|
-
className,
|
|
21
|
-
filterPillPermissions = defaultFilterPillPermissions,
|
|
22
|
-
filterProviderKey,
|
|
23
|
-
...htmlAttributes
|
|
24
|
-
}) => {
|
|
25
|
-
const targetWindow = window.useWindow();
|
|
26
|
-
styles.useComponentCssInjection({
|
|
27
|
-
testId: "vuu-saved-filter-panel",
|
|
28
|
-
css: SavedFilterPanel$1,
|
|
29
|
-
window: targetWindow
|
|
30
|
-
});
|
|
31
|
-
const permissions = react.useMemo(() => {
|
|
32
|
-
const {
|
|
33
|
-
allowClose = defaultFilterPillPermissions.allowClose,
|
|
34
|
-
allowEdit = defaultFilterPillPermissions.allowEdit,
|
|
35
|
-
allowRemove = defaultFilterPillPermissions.allowRename,
|
|
36
|
-
allowRename = defaultFilterPillPermissions.allowRename
|
|
37
|
-
} = filterPillPermissions;
|
|
38
|
-
return { allowClose, allowEdit, allowRemove, allowRename };
|
|
39
|
-
}, [filterPillPermissions]);
|
|
40
|
-
const { onClickFilter, onFilterMenuAction, savedFilters } = useSavedFilterPanel.useSavedFilterPanel({ availableColumns, filterProviderKey });
|
|
41
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
|
-
"div",
|
|
43
|
-
{
|
|
44
|
-
...htmlAttributes,
|
|
45
|
-
className: cx(classBase, "vuuScrollable", className),
|
|
46
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-filterPill-container`, children: savedFilters.map((filterDescriptor, i) => /* @__PURE__ */ react.createElement(
|
|
47
|
-
FilterPillNext.FilterPillNext,
|
|
48
|
-
{
|
|
49
|
-
...filterDescriptor,
|
|
50
|
-
columns: availableColumns,
|
|
51
|
-
key: i,
|
|
52
|
-
onClick: onClickFilter,
|
|
53
|
-
onMenuAction: onFilterMenuAction,
|
|
54
|
-
permissions
|
|
55
|
-
}
|
|
56
|
-
)) })
|
|
57
|
-
}
|
|
58
|
-
);
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
exports.SavedFilterPanel = SavedFilterPanel;
|
|
62
|
-
//# sourceMappingURL=SavedFilterPanel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SavedFilterPanel.js","sources":["../../../../packages/vuu-filters/src/saved-filters/SavedFilterPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { FilterPermissions } from \"../filter-pill/FilterMenu\";\nimport { FilterPillNext } from \"../filter-pill/FilterPillNext\";\nimport { useSavedFilterPanel } from \"./useSavedFilterPanel\";\n\nimport savedFilterPanelCss from \"./SavedFilterPanel.css\";\nimport { FilterContainerProps } from \"../filter-container/FilterContainer\";\n\nconst classBase = \"vuuSavedFilterPanel\";\n\nconst defaultFilterPillPermissions: FilterPermissions = {\n allowEdit: true,\n allowRename: true,\n allowRemove: true,\n};\n\nexport interface SavedFilterPanelProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<FilterContainerProps, \"filterProviderKey\"> {\n /**\n * ColumnDescriptors are not required but is passed will be\n * used to provide labels and correct value formatting for\n * displayed filters, e.g in tooltips\n */\n availableColumns?: ColumnDescriptor[];\n filterPillPermissions?: FilterPermissions;\n}\n\nexport const SavedFilterPanel = ({\n availableColumns,\n className,\n filterPillPermissions = defaultFilterPillPermissions,\n filterProviderKey,\n ...htmlAttributes\n}: SavedFilterPanelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-saved-filter-panel\",\n css: savedFilterPanelCss,\n window: targetWindow,\n });\n\n const permissions = useMemo<FilterPermissions>(() => {\n const {\n allowClose = defaultFilterPillPermissions.allowClose,\n allowEdit = defaultFilterPillPermissions.allowEdit,\n allowRemove = defaultFilterPillPermissions.allowRename,\n allowRename = defaultFilterPillPermissions.allowRename,\n } = filterPillPermissions;\n return { allowClose, allowEdit, allowRemove, allowRename };\n }, [filterPillPermissions]);\n\n const { onClickFilter, onFilterMenuAction, savedFilters } =\n useSavedFilterPanel({ availableColumns, filterProviderKey });\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, \"vuuScrollable\", className)}\n >\n <div className={`${classBase}-filterPill-container`}>\n {savedFilters.map((filterDescriptor, i) => (\n <FilterPillNext\n {...filterDescriptor}\n columns={availableColumns}\n key={i}\n onClick={onClickFilter}\n onMenuAction={onFilterMenuAction}\n permissions={permissions}\n />\n ))}\n </div>\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","savedFilterPanelCss","useMemo","useSavedFilterPanel","jsx","createElement","FilterPillNext"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,qBAAA;AAElB,MAAM,4BAAkD,GAAA;AAAA,EACtD,SAAW,EAAA,IAAA;AAAA,EACX,WAAa,EAAA,IAAA;AAAA,EACb,WAAa,EAAA;AACf,CAAA;AAcO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,qBAAwB,GAAA,4BAAA;AAAA,EACxB,iBAAA;AAAA,EACA,GAAG;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,cAA2B,MAAM;AACnD,IAAM,MAAA;AAAA,MACJ,aAAa,4BAA6B,CAAA,UAAA;AAAA,MAC1C,YAAY,4BAA6B,CAAA,SAAA;AAAA,MACzC,cAAc,4BAA6B,CAAA,WAAA;AAAA,MAC3C,cAAc,4BAA6B,CAAA;AAAA,KACzC,GAAA,qBAAA;AACJ,IAAA,OAAO,EAAE,UAAA,EAAY,SAAW,EAAA,WAAA,EAAa,WAAY,EAAA;AAAA,GAC3D,EAAG,CAAC,qBAAqB,CAAC,CAAA;AAE1B,EAAM,MAAA,EAAE,eAAe,kBAAoB,EAAA,YAAA,KACzCC,uCAAoB,CAAA,EAAE,gBAAkB,EAAA,iBAAA,EAAmB,CAAA;AAE7D,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,eAAA,EAAiB,SAAS,CAAA;AAAA,MAEnD,QAAA,kBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,yBACzB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,gBAAA,EAAkB,CACnC,qBAAAC,mBAAA;AAAA,QAACC,6BAAA;AAAA,QAAA;AAAA,UACE,GAAG,gBAAA;AAAA,UACJ,OAAS,EAAA,gBAAA;AAAA,UACT,GAAK,EAAA,CAAA;AAAA,UACL,OAAS,EAAA,aAAA;AAAA,UACT,YAAc,EAAA,kBAAA;AAAA,UACd;AAAA;AAAA,OAEH,CACH,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
var FilterContext = require('../filter-provider/FilterContext.js');
|
|
5
|
-
var filterUtils = require('../filter-utils.js');
|
|
6
|
-
|
|
7
|
-
const isValidName = (name) => typeof name === "string" && name.trim().length > 0;
|
|
8
|
-
const isDuplicateName = (names, value) => names.includes(value.toLowerCase());
|
|
9
|
-
const Status = {
|
|
10
|
-
Empty: "empty",
|
|
11
|
-
Valid: "valid",
|
|
12
|
-
Invalid: "invalid",
|
|
13
|
-
DuplicateName: "duplicate-name"
|
|
14
|
-
};
|
|
15
|
-
const useFilterNamePrompt = ({
|
|
16
|
-
filterName = "",
|
|
17
|
-
onConfirm
|
|
18
|
-
}) => {
|
|
19
|
-
const { currentFilter, savedFilters = [] } = FilterContext.useSavedFilters();
|
|
20
|
-
const filterNameRef = react.useRef(filterName);
|
|
21
|
-
const confirmRef = react.useRef(null);
|
|
22
|
-
const [status, setStatus] = react.useState(
|
|
23
|
-
filterName !== "" ? Status.Valid : Status.Empty
|
|
24
|
-
);
|
|
25
|
-
const nameOfDuplicateFilter = react.useMemo(() => {
|
|
26
|
-
if (currentFilter.filter) {
|
|
27
|
-
const matchingFilter = filterUtils.findMatchingFilter(
|
|
28
|
-
savedFilters,
|
|
29
|
-
currentFilter.filter
|
|
30
|
-
);
|
|
31
|
-
if (matchingFilter) {
|
|
32
|
-
return matchingFilter.filter?.name;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}, [currentFilter.filter, savedFilters]);
|
|
36
|
-
const existingFilterNames = react.useMemo(
|
|
37
|
-
() => savedFilters.reduce((list, f) => {
|
|
38
|
-
if (f.filter?.name) {
|
|
39
|
-
list.push(f.filter.name.toLowerCase());
|
|
40
|
-
}
|
|
41
|
-
return list;
|
|
42
|
-
}, []),
|
|
43
|
-
[savedFilters]
|
|
44
|
-
);
|
|
45
|
-
const handleConfirm = react.useCallback(() => {
|
|
46
|
-
onConfirm(filterNameRef.current);
|
|
47
|
-
}, [onConfirm]);
|
|
48
|
-
const handleCommit = react.useCallback(
|
|
49
|
-
(e, value) => {
|
|
50
|
-
onConfirm(value);
|
|
51
|
-
},
|
|
52
|
-
[onConfirm]
|
|
53
|
-
);
|
|
54
|
-
const handleChange = react.useCallback(
|
|
55
|
-
(e) => {
|
|
56
|
-
const value = e.target.value.trim();
|
|
57
|
-
filterNameRef.current = value;
|
|
58
|
-
setStatus((currentStatus) => {
|
|
59
|
-
let newStatus = currentStatus;
|
|
60
|
-
if (value === "") {
|
|
61
|
-
newStatus = Status.Empty;
|
|
62
|
-
} else {
|
|
63
|
-
const isValid = isValidName(value);
|
|
64
|
-
if (!isValid) {
|
|
65
|
-
newStatus = Status.Invalid;
|
|
66
|
-
} else if (isDuplicateName(existingFilterNames, value)) {
|
|
67
|
-
newStatus = Status.DuplicateName;
|
|
68
|
-
} else {
|
|
69
|
-
newStatus = Status.Valid;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
return newStatus;
|
|
73
|
-
});
|
|
74
|
-
},
|
|
75
|
-
[existingFilterNames]
|
|
76
|
-
);
|
|
77
|
-
const confirmButtonProps = react.useMemo(
|
|
78
|
-
() => ({
|
|
79
|
-
disabled: status !== Status.Valid && status !== Status.DuplicateName,
|
|
80
|
-
label: status === Status.DuplicateName ? "replace filter" : "save filter",
|
|
81
|
-
ref: confirmRef
|
|
82
|
-
}),
|
|
83
|
-
[status]
|
|
84
|
-
);
|
|
85
|
-
return {
|
|
86
|
-
confirmButtonProps,
|
|
87
|
-
nameOfDuplicateFilter,
|
|
88
|
-
onChange: handleChange,
|
|
89
|
-
onCommit: handleCommit,
|
|
90
|
-
onConfirm: handleConfirm,
|
|
91
|
-
status,
|
|
92
|
-
value: filterNameRef.current
|
|
93
|
-
};
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
exports.Status = Status;
|
|
97
|
-
exports.useFilterNamePrompt = useFilterNamePrompt;
|
|
98
|
-
//# sourceMappingURL=useFilterNamePrompt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useFilterNamePrompt.js","sources":["../../../../packages/vuu-filters/src/saved-filters/useFilterNamePrompt.ts"],"sourcesContent":["import {\n ChangeEventHandler,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useSavedFilters } from \"../filter-provider/FilterContext\";\nimport { CommitHandler, ValueOf } from \"@vuu-ui/vuu-utils\";\nimport { findMatchingFilter } from \"../filter-utils\";\n\nexport interface FilterNamePromptHookProps {\n filterName?: string;\n onConfirm: (filterName: string) => void;\n filterNameMaxLength?: number;\n}\n\nconst isValidName = (name: unknown): name is string =>\n typeof name === \"string\" && name.trim().length > 0;\n\nconst isDuplicateName = (names: string[], value: string) =>\n names.includes(value.toLowerCase());\n\nexport const Status = {\n Empty: \"empty\",\n Valid: \"valid\",\n Invalid: \"invalid\",\n DuplicateName: \"duplicate-name\",\n} as const;\ntype Status = ValueOf<typeof Status>;\n\nexport const useFilterNamePrompt = ({\n filterName = \"\",\n onConfirm,\n}: FilterNamePromptHookProps) => {\n const { currentFilter, savedFilters = [] } = useSavedFilters();\n const filterNameRef = useRef(filterName);\n const confirmRef = useRef<HTMLButtonElement>(null);\n\n const [status, setStatus] = useState<Status>(\n filterName !== \"\" ? Status.Valid : Status.Empty,\n );\n\n const nameOfDuplicateFilter = useMemo(() => {\n if (currentFilter.filter) {\n const matchingFilter = findMatchingFilter(\n savedFilters,\n currentFilter.filter,\n );\n if (matchingFilter) {\n return matchingFilter.filter?.name;\n }\n }\n }, [currentFilter.filter, savedFilters]);\n\n const existingFilterNames = useMemo(\n () =>\n savedFilters.reduce<string[]>((list, f) => {\n if (f.filter?.name) {\n list.push(f.filter.name.toLowerCase());\n }\n return list;\n }, []),\n [savedFilters],\n );\n\n const handleConfirm = useCallback(() => {\n onConfirm(filterNameRef.current);\n }, [onConfirm]);\n\n const handleCommit = useCallback<CommitHandler>(\n (e, value) => {\n onConfirm(value as string);\n },\n [onConfirm],\n );\n\n const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n (e) => {\n const value = e.target.value.trim();\n filterNameRef.current = value;\n\n setStatus((currentStatus) => {\n let newStatus = currentStatus;\n if (value === \"\") {\n newStatus = Status.Empty;\n } else {\n const isValid = isValidName(value);\n if (!isValid) {\n newStatus = Status.Invalid;\n } else if (isDuplicateName(existingFilterNames, value)) {\n newStatus = Status.DuplicateName;\n } else {\n newStatus = Status.Valid;\n }\n }\n return newStatus;\n });\n },\n [existingFilterNames],\n );\n\n const confirmButtonProps = useMemo(\n () => ({\n disabled: status !== Status.Valid && status !== Status.DuplicateName,\n label: status === Status.DuplicateName ? \"replace filter\" : \"save filter\",\n ref: confirmRef,\n }),\n [status],\n );\n\n return {\n confirmButtonProps,\n nameOfDuplicateFilter,\n onChange: handleChange,\n onCommit: handleCommit,\n onConfirm: handleConfirm,\n status,\n value: filterNameRef.current,\n };\n};\n"],"names":["useSavedFilters","useRef","useState","useMemo","findMatchingFilter","useCallback"],"mappings":"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"}
|