@deephaven/components 1.7.2-beta.1 → 1.7.2-react-18-alpha.3
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/dist/AutoCompleteInput.d.ts +0 -17
- package/dist/AutoCompleteInput.d.ts.map +1 -1
- package/dist/AutoCompleteInput.js +12 -31
- package/dist/AutoCompleteInput.js.map +1 -1
- package/dist/AutoResizeTextarea.d.ts +0 -23
- package/dist/AutoResizeTextarea.d.ts.map +1 -1
- package/dist/AutoResizeTextarea.js +0 -21
- package/dist/AutoResizeTextarea.js.map +1 -1
- package/dist/BasicModal.d.ts +0 -27
- package/dist/BasicModal.d.ts.map +1 -1
- package/dist/BasicModal.js +2 -28
- package/dist/BasicModal.js.map +1 -1
- package/dist/BulkActionBar.js.map +1 -1
- package/dist/Button.d.ts +1 -1
- package/dist/Button.d.ts.map +1 -1
- package/dist/Button.js +2 -79
- package/dist/Button.js.map +1 -1
- package/dist/CardFlip.d.ts.map +1 -1
- package/dist/CardFlip.js +1 -2
- package/dist/CardFlip.js.map +1 -1
- package/dist/Checkbox.d.ts.map +1 -1
- package/dist/Checkbox.js +3 -45
- package/dist/Checkbox.js.map +1 -1
- package/dist/Collapse.d.ts +0 -8
- package/dist/Collapse.d.ts.map +1 -1
- package/dist/Collapse.js +0 -8
- package/dist/Collapse.js.map +1 -1
- package/dist/ComponentUtils.js.map +1 -1
- package/dist/CopyButton.js.map +1 -1
- package/dist/CustomTimeSelect.js +14 -15
- package/dist/CustomTimeSelect.js.map +1 -1
- package/dist/DateInput.js.map +1 -1
- package/dist/DateInputUtils.js.map +1 -1
- package/dist/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput.js +0 -8
- package/dist/DateTimeInput.js.map +1 -1
- package/dist/DateTimeInputUtils.js.map +1 -1
- package/dist/DebouncedSearchInput.js +1 -1
- package/dist/DebouncedSearchInput.js.map +1 -1
- package/dist/DragUtils.js.map +1 -1
- package/dist/DraggableItemList.d.ts +2 -2
- package/dist/DraggableItemList.d.ts.map +1 -1
- package/dist/DraggableItemList.js +8 -7
- package/dist/DraggableItemList.js.map +1 -1
- package/dist/EditableItemList.js +1 -2
- package/dist/EditableItemList.js.map +1 -1
- package/dist/ErrorBoundary.js +1 -1
- package/dist/ErrorBoundary.js.map +1 -1
- package/dist/ErrorView.js +1 -2
- package/dist/ErrorView.js.map +1 -1
- package/dist/HierarchicalCheckboxMenu.d.ts +1 -1
- package/dist/HierarchicalCheckboxMenu.d.ts.map +1 -1
- package/dist/HierarchicalCheckboxMenu.js +1 -2
- package/dist/HierarchicalCheckboxMenu.js.map +1 -1
- package/dist/ItemList.d.ts +1 -1
- package/dist/ItemList.d.ts.map +1 -1
- package/dist/ItemList.js +14 -14
- package/dist/ItemList.js.map +1 -1
- package/dist/ItemListItem.js.map +1 -1
- package/dist/LoadingOverlay.js +1 -2
- package/dist/LoadingOverlay.js.map +1 -1
- package/dist/LoadingSpinner.js.map +1 -1
- package/dist/MaskedInput.d.ts.map +1 -1
- package/dist/MaskedInput.js +11 -31
- package/dist/MaskedInput.js.map +1 -1
- package/dist/MaskedInputUtils.js.map +1 -1
- package/dist/Option.js.map +1 -1
- package/dist/RadioGroup.js +1 -2
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioItem.d.ts.map +1 -1
- package/dist/RadioItem.js +1 -13
- package/dist/RadioItem.js.map +1 -1
- package/dist/RandomAreaPlotAnimation.d.ts +1 -1
- package/dist/RandomAreaPlotAnimation.d.ts.map +1 -1
- package/dist/RandomAreaPlotAnimation.js +5 -8
- package/dist/RandomAreaPlotAnimation.js.map +1 -1
- package/dist/SearchInput.js +3 -5
- package/dist/SearchInput.js.map +1 -1
- package/dist/SearchableCombobox.js.map +1 -1
- package/dist/Select.d.ts +1 -1
- package/dist/Select.d.ts.map +1 -1
- package/dist/Select.js.map +1 -1
- package/dist/SelectValueList.js +9 -9
- package/dist/SelectValueList.js.map +1 -1
- package/dist/SocketedButton.d.ts +4 -4
- package/dist/SocketedButton.d.ts.map +1 -1
- package/dist/SocketedButton.js +5 -20
- package/dist/SocketedButton.js.map +1 -1
- package/dist/SplitButtonGroup.d.ts +2 -18
- package/dist/SplitButtonGroup.d.ts.map +1 -1
- package/dist/SplitButtonGroup.js +0 -13
- package/dist/SplitButtonGroup.js.map +1 -1
- package/dist/TableViewEmptyState.js +1 -2
- package/dist/TableViewEmptyState.js.map +1 -1
- package/dist/TextWithTooltip.js +1 -3
- package/dist/TextWithTooltip.js.map +1 -1
- package/dist/ThemeExport.js.map +1 -1
- package/dist/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput.js +7 -17
- package/dist/TimeInput.js.map +1 -1
- package/dist/TimeSlider.js +3 -6
- package/dist/TimeSlider.js.map +1 -1
- package/dist/ToastNotification.d.ts +1 -2
- package/dist/ToastNotification.d.ts.map +1 -1
- package/dist/ToastNotification.js +1 -2
- package/dist/ToastNotification.js.map +1 -1
- package/dist/UIConstants.js.map +1 -1
- package/dist/UISwitch.d.ts.map +1 -1
- package/dist/UISwitch.js +18 -14
- package/dist/UISwitch.js.map +1 -1
- package/dist/XComponent.d.ts +1 -1
- package/dist/XComponent.d.ts.map +1 -1
- package/dist/XComponent.js.map +1 -1
- package/dist/XComponentMap.d.ts +2 -2
- package/dist/XComponentMap.d.ts.map +1 -1
- package/dist/XComponentMap.js.map +1 -1
- package/dist/actions/ConfirmActionButton.js.map +1 -1
- package/dist/actions/IconActionButton.js +1 -2
- package/dist/actions/IconActionButton.js.map +1 -1
- package/dist/actions/index.js.map +1 -1
- package/dist/context-actions/ContextActionUtils.js.map +1 -1
- package/dist/context-actions/ContextActions.d.ts +1 -2
- package/dist/context-actions/ContextActions.d.ts.map +1 -1
- package/dist/context-actions/ContextActions.js +22 -22
- package/dist/context-actions/ContextActions.js.map +1 -1
- package/dist/context-actions/ContextMenu.js +5 -7
- package/dist/context-actions/ContextMenu.js.map +1 -1
- package/dist/context-actions/ContextMenuItem.d.ts.map +1 -1
- package/dist/context-actions/ContextMenuItem.js +21 -43
- package/dist/context-actions/ContextMenuItem.js.map +1 -1
- package/dist/context-actions/ContextMenuRoot.js +1 -1
- package/dist/context-actions/ContextMenuRoot.js.map +1 -1
- package/dist/context-actions/GlobalContextAction.js +1 -1
- package/dist/context-actions/GlobalContextAction.js.map +1 -1
- package/dist/context-actions/GlobalContextActions.js.map +1 -1
- package/dist/context-actions/index.js.map +1 -1
- package/dist/declaration.d.js.map +1 -1
- package/dist/dialogs/ActionButtonDialogTrigger.js +1 -2
- package/dist/dialogs/ActionButtonDialogTrigger.js.map +1 -1
- package/dist/dialogs/ConfirmationDialog.js +1 -2
- package/dist/dialogs/ConfirmationDialog.js.map +1 -1
- package/dist/dialogs/index.js.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/menu-actions/DropdownMenu.js +2 -2
- package/dist/menu-actions/DropdownMenu.js.map +1 -1
- package/dist/menu-actions/Menu.js +4 -6
- package/dist/menu-actions/Menu.js.map +1 -1
- package/dist/menu-actions/index.js.map +1 -1
- package/dist/modal/DebouncedModal.js +1 -3
- package/dist/modal/DebouncedModal.js.map +1 -1
- package/dist/modal/InfoModal.js +1 -2
- package/dist/modal/InfoModal.js.map +1 -1
- package/dist/modal/Modal.js +2 -3
- package/dist/modal/Modal.js.map +1 -1
- package/dist/modal/ModalBody.js.map +1 -1
- package/dist/modal/ModalFooter.js.map +1 -1
- package/dist/modal/ModalHeader.js +1 -2
- package/dist/modal/ModalHeader.js.map +1 -1
- package/dist/modal/index.js.map +1 -1
- package/dist/navigation/DashboardList.js +3 -4
- package/dist/navigation/DashboardList.js.map +1 -1
- package/dist/navigation/Menu.js.map +1 -1
- package/dist/navigation/MenuItem.js +1 -2
- package/dist/navigation/MenuItem.js.map +1 -1
- package/dist/navigation/NavTab.d.ts +1 -1
- package/dist/navigation/NavTab.d.ts.map +1 -1
- package/dist/navigation/NavTab.js +4 -5
- package/dist/navigation/NavTab.js.map +1 -1
- package/dist/navigation/NavTabList.js +4 -5
- package/dist/navigation/NavTabList.js.map +1 -1
- package/dist/navigation/Page.js +1 -2
- package/dist/navigation/Page.js.map +1 -1
- package/dist/navigation/Stack.js +1 -3
- package/dist/navigation/Stack.js.map +1 -1
- package/dist/navigation/index.js.map +1 -1
- package/dist/popper/Popper.d.ts +1 -14
- package/dist/popper/Popper.d.ts.map +1 -1
- package/dist/popper/Popper.js +18 -29
- package/dist/popper/Popper.js.map +1 -1
- package/dist/popper/Tooltip.d.ts.map +1 -1
- package/dist/popper/Tooltip.js +18 -12
- package/dist/popper/Tooltip.js.map +1 -1
- package/dist/popper/index.js.map +1 -1
- package/dist/shortcuts/GlobalShortcuts.js.map +1 -1
- package/dist/shortcuts/NavigationShortcuts.js.map +1 -1
- package/dist/shortcuts/Shortcut.js +11 -13
- package/dist/shortcuts/Shortcut.js.map +1 -1
- package/dist/shortcuts/ShortcutRegistry.js +1 -1
- package/dist/shortcuts/ShortcutRegistry.js.map +1 -1
- package/dist/shortcuts/index.js.map +1 -1
- package/dist/spectrum/ActionGroup.js.map +1 -1
- package/dist/spectrum/ActionMenu.js.map +1 -1
- package/dist/spectrum/CheckboxGroup.js.map +1 -1
- package/dist/spectrum/Heading.js.map +1 -1
- package/dist/spectrum/ItemContent.js +2 -4
- package/dist/spectrum/ItemContent.js.map +1 -1
- package/dist/spectrum/ItemTooltip.js.map +1 -1
- package/dist/spectrum/ListActionGroup.js.map +1 -1
- package/dist/spectrum/ListActionMenu.js.map +1 -1
- package/dist/spectrum/TabPanels.d.ts.map +1 -1
- package/dist/spectrum/TabPanels.js +8 -5
- package/dist/spectrum/TabPanels.js.map +1 -1
- package/dist/spectrum/Text.js.map +1 -1
- package/dist/spectrum/View.js.map +1 -1
- package/dist/spectrum/buttons.js.map +1 -1
- package/dist/spectrum/collections.js.map +1 -1
- package/dist/spectrum/comboBox/ComboBox.js.map +1 -1
- package/dist/spectrum/comboBox/ComboBoxNormalized.js.map +1 -1
- package/dist/spectrum/comboBox/index.js.map +1 -1
- package/dist/spectrum/content.js.map +1 -1
- package/dist/spectrum/dateAndTime.js.map +1 -1
- package/dist/spectrum/forms.js.map +1 -1
- package/dist/spectrum/icons.js.map +1 -1
- package/dist/spectrum/index.js.map +1 -1
- package/dist/spectrum/layout.js.map +1 -1
- package/dist/spectrum/listView/ListView.js.map +1 -1
- package/dist/spectrum/listView/ListViewNormalized.js +1 -2
- package/dist/spectrum/listView/ListViewNormalized.js.map +1 -1
- package/dist/spectrum/listView/ListViewWrapper.js.map +1 -1
- package/dist/spectrum/listView/index.js.map +1 -1
- package/dist/spectrum/navigation.js.map +1 -1
- package/dist/spectrum/overlays.js.map +1 -1
- package/dist/spectrum/picker/Picker.js.map +1 -1
- package/dist/spectrum/picker/PickerNormalized.js.map +1 -1
- package/dist/spectrum/picker/PickerProps.js.map +1 -1
- package/dist/spectrum/picker/index.js.map +1 -1
- package/dist/spectrum/picker/usePickerItemScale.js.map +1 -1
- package/dist/spectrum/picker/usePickerNormalizedProps.d.ts +1 -2
- package/dist/spectrum/picker/usePickerNormalizedProps.d.ts.map +1 -1
- package/dist/spectrum/picker/usePickerNormalizedProps.js.map +1 -1
- package/dist/spectrum/picker/usePickerProps.js.map +1 -1
- package/dist/spectrum/picker/usePickerScrollOnOpen.js +1 -1
- package/dist/spectrum/picker/usePickerScrollOnOpen.js.map +1 -1
- package/dist/spectrum/shared.js.map +1 -1
- package/dist/spectrum/status.js.map +1 -1
- package/dist/spectrum/utils/index.js.map +1 -1
- package/dist/spectrum/utils/itemUtils.d.ts +2 -2
- package/dist/spectrum/utils/itemUtils.d.ts.map +1 -1
- package/dist/spectrum/utils/itemUtils.js +5 -1
- package/dist/spectrum/utils/itemUtils.js.map +1 -1
- package/dist/spectrum/utils/itemWrapperUtils.js +3 -4
- package/dist/spectrum/utils/itemWrapperUtils.js.map +1 -1
- package/dist/spectrum/utils/propsUtils.js.map +1 -1
- package/dist/spectrum/utils/themeUtils.js.map +1 -1
- package/dist/spectrum/utils/useOnChangeTrackUncontrolled.js +1 -1
- package/dist/spectrum/utils/useOnChangeTrackUncontrolled.js.map +1 -1
- package/dist/spectrum/utils/useRenderNormalizedItem.js +1 -2
- package/dist/spectrum/utils/useRenderNormalizedItem.js.map +1 -1
- package/dist/spectrum/utils/useStaticItemInitialScrollPosition.js +1 -1
- package/dist/spectrum/utils/useStaticItemInitialScrollPosition.js.map +1 -1
- package/dist/spectrum/utils/useStringifiedMultiSelection.d.ts +1 -1
- package/dist/spectrum/utils/useStringifiedMultiSelection.d.ts.map +1 -1
- package/dist/spectrum/utils/useStringifiedMultiSelection.js.map +1 -1
- package/dist/spectrum/utils/useStringifiedSelection.d.ts +1 -1
- package/dist/spectrum/utils/useStringifiedSelection.d.ts.map +1 -1
- package/dist/spectrum/utils/useStringifiedSelection.js.map +1 -1
- package/dist/theme/Logo.js.map +1 -1
- package/dist/theme/SpectrumThemeProvider.js.map +1 -1
- package/dist/theme/ThemeModel.js +1 -0
- package/dist/theme/ThemeModel.js.map +1 -1
- package/dist/theme/ThemePicker.d.ts.map +1 -1
- package/dist/theme/ThemePicker.js +3 -1
- package/dist/theme/ThemePicker.js.map +1 -1
- package/dist/theme/ThemeProvider.js +1 -3
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/ThemeUtils.js.map +1 -1
- package/dist/theme/colorUtils.js.map +1 -1
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/theme-dark/index.js.map +1 -1
- package/dist/theme/theme-light/index.js.map +1 -1
- package/dist/theme/theme-spectrum/index.js.map +1 -1
- package/dist/theme/useExternalTheme.js.map +1 -1
- package/dist/theme/useSpectrumThemeProvider.js.map +1 -1
- package/dist/theme/useTheme.js.map +1 -1
- package/dist/transitions/FadeTransition.js.map +1 -1
- package/dist/transitions/SlideTransition.js.map +1 -1
- package/dist/transitions/index.js.map +1 -1
- package/package.json +12 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MaskedInputUtils.js","names":["DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","value","replaceIndex","newChar","substring","fillToLength","checkValue","exampleValue","length","concat","trimTrailingMask","emptyMask","i"],"sources":["../src/MaskedInputUtils.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nexport function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n value: string,\n replaceIndex: number,\n newChar: string\n): string {\n return (\n value.substring(0, replaceIndex) +\n newChar +\n value.substring(replaceIndex + 1)\n );\n}\n\n/**\n * Fill the string on the right side with the example value to the given length\n * @param checkValue Initial string to pad\n * @param exampleValue Example value\n * @param length Target length\n * @returns String padded with the given example value\n */\nexport function fillToLength(\n checkValue: string,\n exampleValue: string,\n length: number\n): string {\n return checkValue.length < length\n ? `${checkValue}${exampleValue.substring(checkValue.length, length)}`\n : checkValue;\n}\n\n/**\n * Trim all characters matching the empty mask on the right side of the given value\n * @param value String to trim\n * @param emptyMask Empty mask\n * @returns Trimmed string\n */\nexport function trimTrailingMask(value: string, emptyMask: string): string {\n let { length } = value;\n for (let i = value.length - 1; i >= 0; i -= 1) {\n if (emptyMask[i] === value[i]) {\n length = i;\n } else {\n break;\n }\n }\n return value.substring(0, length);\n}\n"],"mappings":"AAAA;AACA,OAAO,SAASA,wCAAwCA,CACtDC,KAAa,EACbC,YAAoB,EACpBC,OAAe,EACP;EACR,OACEF,KAAK,CAACG,SAAS,CAAC,CAAC,EAAEF,YAAY,CAAC,GAChCC,OAAO,GACPF,KAAK,CAACG,SAAS,CAACF,YAAY,GAAG,CAAC,CAAC;AAErC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,YAAYA,CAC1BC,UAAkB,EAClBC,YAAoB,EACpBC,MAAc,EACN;EACR,OAAOF,UAAU,CAACE,MAAM,GAAGA,MAAM,MAAAC,MAAA,CAC1BH,UAAU,EAAAG,MAAA,CAAGF,YAAY,CAACH,SAAS,CAACE,UAAU,CAACE,MAAM,EAAEA,MAAM,CAAC,IACjEF,UAAU;AAChB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,gBAAgBA,CAACT,KAAa,EAAEU,SAAiB,EAAU;EACzE,IAAI;IAAEH;EAAO,CAAC,GAAGP,KAAK;EACtB,KAAK,IAAIW,CAAC,GAAGX,KAAK,CAACO,MAAM,GAAG,CAAC,EAAEI,CAAC,IAAI,CAAC,EAAEA,CAAC,IAAI,CAAC,EAAE;IAC7C,IAAID,SAAS,CAACC,CAAC,CAAC,KAAKX,KAAK,CAACW,CAAC,CAAC,EAAE;MAC7BJ,MAAM,GAAGI,CAAC;IACZ,CAAC,MAAM;MACL;IACF;EACF;EACA,OAAOX,KAAK,CAACG,SAAS,CAAC,CAAC,EAAEI,MAAM,CAAC;AACnC"}
|
|
1
|
+
{"version":3,"file":"MaskedInputUtils.js","names":["DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","value","replaceIndex","newChar","substring","fillToLength","checkValue","exampleValue","length","concat","trimTrailingMask","emptyMask","i"],"sources":["../src/MaskedInputUtils.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nexport function DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n value: string,\n replaceIndex: number,\n newChar: string\n): string {\n return (\n value.substring(0, replaceIndex) +\n newChar +\n value.substring(replaceIndex + 1)\n );\n}\n\n/**\n * Fill the string on the right side with the example value to the given length\n * @param checkValue Initial string to pad\n * @param exampleValue Example value\n * @param length Target length\n * @returns String padded with the given example value\n */\nexport function fillToLength(\n checkValue: string,\n exampleValue: string,\n length: number\n): string {\n return checkValue.length < length\n ? `${checkValue}${exampleValue.substring(checkValue.length, length)}`\n : checkValue;\n}\n\n/**\n * Trim all characters matching the empty mask on the right side of the given value\n * @param value String to trim\n * @param emptyMask Empty mask\n * @returns Trimmed string\n */\nexport function trimTrailingMask(value: string, emptyMask: string): string {\n let { length } = value;\n for (let i = value.length - 1; i >= 0; i -= 1) {\n if (emptyMask[i] === value[i]) {\n length = i;\n } else {\n break;\n }\n }\n return value.substring(0, length);\n}\n"],"mappings":"AAAA;AACA,OAAO,SAASA,wCAAwCA,CACtDC,KAAa,EACbC,YAAoB,EACpBC,OAAe,EACP;EACR,OACEF,KAAK,CAACG,SAAS,CAAC,CAAC,EAAEF,YAAY,CAAC,GAChCC,OAAO,GACPF,KAAK,CAACG,SAAS,CAACF,YAAY,GAAG,CAAC,CAAC;AAErC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,YAAYA,CAC1BC,UAAkB,EAClBC,YAAoB,EACpBC,MAAc,EACN;EACR,OAAOF,UAAU,CAACE,MAAM,GAAGA,MAAM,MAAAC,MAAA,CAC1BH,UAAU,EAAAG,MAAA,CAAGF,YAAY,CAACH,SAAS,CAACE,UAAU,CAACE,MAAM,EAAEA,MAAM,CAAC,IACjEF,UAAU;AAChB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,gBAAgBA,CAACT,KAAa,EAAEU,SAAiB,EAAU;EACzE,IAAI;IAAEH;EAAO,CAAC,GAAGP,KAAK;EACtB,KAAK,IAAIW,CAAC,GAAGX,KAAK,CAACO,MAAM,GAAG,CAAC,EAAEI,CAAC,IAAI,CAAC,EAAEA,CAAC,IAAI,CAAC,EAAE;IAC7C,IAAID,SAAS,CAACC,CAAC,CAAC,KAAKX,KAAK,CAACW,CAAC,CAAC,EAAE;MAC7BJ,MAAM,GAAGI,CAAC;IACZ,CAAC,MAAM;MACL;IACF;EACF;EACA,OAAOX,KAAK,CAACG,SAAS,CAAC,CAAC,EAAEI,MAAM,CAAC;AACnC","ignoreList":[]}
|
package/dist/Option.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","names":["React","jsx","_jsx","Option","_ref","children","props","_objectWithoutProperties","_excluded","_objectSpread"],"sources":["../src/Option.tsx"],"sourcesContent":["import React, { type OptionHTMLAttributes } from 'react';\n\nexport type OptionProps = OptionHTMLAttributes<HTMLOptionElement> & {\n children: React.ReactNode;\n 'data-testid'?: string;\n};\n\nfunction Option({ children, ...props }: OptionProps): JSX.Element {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <option {...props}>{children}</option>;\n}\n\nexport default Option;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,MAAqC,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOzD,SAASC,MAAMA,CAAAC,IAAA,EAAmD;EAAA,IAAlD;MAAEC;IAAgC,CAAC,GAAAD,IAAA;IAApBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAClC;EACA,oBAAON,IAAA,WAAAO,aAAA,CAAAA,aAAA,KAAYH,KAAK;IAAAD,QAAA,EAAGA;EAAQ,EAAS,CAAC;AAC/C;AAEA,eAAeF,MAAM"}
|
|
1
|
+
{"version":3,"file":"Option.js","names":["React","jsx","_jsx","Option","_ref","children","props","_objectWithoutProperties","_excluded","_objectSpread"],"sources":["../src/Option.tsx"],"sourcesContent":["import React, { type OptionHTMLAttributes } from 'react';\n\nexport type OptionProps = OptionHTMLAttributes<HTMLOptionElement> & {\n children: React.ReactNode;\n 'data-testid'?: string;\n};\n\nfunction Option({ children, ...props }: OptionProps): JSX.Element {\n // eslint-disable-next-line react/jsx-props-no-spreading\n return <option {...props}>{children}</option>;\n}\n\nexport default Option;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,MAAqC,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOzD,SAASC,MAAMA,CAAAC,IAAA,EAAmD;EAAA,IAAlD;MAAEC;IAAgC,CAAC,GAAAD,IAAA;IAApBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAClC;EACA,oBAAON,IAAA,WAAAO,aAAA,CAAAA,aAAA,KAAYH,KAAK;IAAAD,QAAA,EAAGA;EAAQ,EAAS,CAAC;AAC/C;AAEA,eAAeF,MAAM","ignoreList":[]}
|
package/dist/RadioGroup.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import { nanoid } from 'nanoid';
|
|
3
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
5
4
|
/**
|
|
6
5
|
* A group of radio buttons. Use with RadioItems to populate, eg.
|
|
7
6
|
* <RadioGroup>
|
package/dist/RadioGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","names":["React","useState","nanoid","Fragment","_Fragment","jsx","_jsx","RadioGroup","props","children","disabled","name","propsName","onChange","value","dataTestId","Children","map","child","_child$props$onChange","_child$props$disabled","cloneElement","checked"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { nanoid } from 'nanoid';\n\ntype RadioGroupProps = {\n /** The radio items to populate this radio. Should be of type RadioItem. */\n children?: React.ReactElement | React.ReactElement[];\n\n /** The name to use for the radio items. If not specified, a name is automatically generated */\n name?: string;\n\n /** Triggered when a radio button is changed */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n\n /** The currently selected value. Will automatically set the `checked` attribute of the RadioItem. */\n value?: string;\n\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\n/**\n * A group of radio buttons. Use with RadioItems to populate, eg.\n * <RadioGroup>\n * <RadioItem .../>\n * <RadioItem .../>\n * </RadioGroup>\n */\nfunction RadioGroup(props: RadioGroupProps): JSX.Element {\n const {\n children,\n disabled = false,\n name: propsName,\n onChange,\n value = '',\n 'data-testid': dataTestId,\n } = props;\n const [name] = useState(propsName ?? nanoid());\n\n // Need to use \"text\" type so we can apply a pattern and make selection properly\n return (\n <>\n {React.Children.map(children, child =>\n child\n ? React.cloneElement(child, {\n name,\n onChange: child.props.onChange ?? onChange,\n checked: value === child.props.value,\n disabled: child.props.disabled ?? disabled,\n 'data-testid': dataTestId,\n })\n : null\n )}\n </>\n );\n}\n\nexport default RadioGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,MAAM,QAAQ,QAAQ;AAAC,SAAAC,QAAA,IAAAC,SAAA
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","names":["React","useState","nanoid","Fragment","_Fragment","jsx","_jsx","RadioGroup","props","children","disabled","name","propsName","onChange","value","dataTestId","Children","map","child","_child$props$onChange","_child$props$disabled","cloneElement","checked"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { nanoid } from 'nanoid';\n\ntype RadioGroupProps = {\n /** The radio items to populate this radio. Should be of type RadioItem. */\n children?: React.ReactElement | React.ReactElement[];\n\n /** The name to use for the radio items. If not specified, a name is automatically generated */\n name?: string;\n\n /** Triggered when a radio button is changed */\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n\n /** The currently selected value. Will automatically set the `checked` attribute of the RadioItem. */\n value?: string;\n\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\n/**\n * A group of radio buttons. Use with RadioItems to populate, eg.\n * <RadioGroup>\n * <RadioItem .../>\n * <RadioItem .../>\n * </RadioGroup>\n */\nfunction RadioGroup(props: RadioGroupProps): JSX.Element {\n const {\n children,\n disabled = false,\n name: propsName,\n onChange,\n value = '',\n 'data-testid': dataTestId,\n } = props;\n const [name] = useState(propsName ?? nanoid());\n\n // Need to use \"text\" type so we can apply a pattern and make selection properly\n return (\n <>\n {React.Children.map(children, child =>\n child\n ? React.cloneElement(child, {\n name,\n onChange: child.props.onChange ?? onChange,\n checked: value === child.props.value,\n disabled: child.props.disabled ?? disabled,\n 'data-testid': dataTestId,\n })\n : null\n )}\n </>\n );\n}\n\nexport default RadioGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,MAAM,QAAQ,QAAQ;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAmBhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAUA,CAACC,KAAsB,EAAe;EACvD,IAAM;IACJC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,IAAI,EAAEC,SAAS;IACfC,QAAQ;IACRC,KAAK,GAAG,EAAE;IACV,aAAa,EAAEC;EACjB,CAAC,GAAGP,KAAK;EACT,IAAM,CAACG,IAAI,CAAC,GAAGV,QAAQ,CAACW,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIV,MAAM,CAAC,CAAC,CAAC;;EAE9C;EACA,oBACEI,IAAA,CAAAF,SAAA;IAAAK,QAAA,EACGT,KAAK,CAACgB,QAAQ,CAACC,GAAG,CAACR,QAAQ,EAAES,KAAK;MAAA,IAAAC,qBAAA,EAAAC,qBAAA;MAAA,OACjCF,KAAK,gBACDlB,KAAK,CAACqB,YAAY,CAACH,KAAK,EAAE;QACxBP,IAAI;QACJE,QAAQ,GAAAM,qBAAA,GAAED,KAAK,CAACV,KAAK,CAACK,QAAQ,cAAAM,qBAAA,cAAAA,qBAAA,GAAIN,QAAQ;QAC1CS,OAAO,EAAER,KAAK,KAAKI,KAAK,CAACV,KAAK,CAACM,KAAK;QACpCJ,QAAQ,GAAAU,qBAAA,GAAEF,KAAK,CAACV,KAAK,CAACE,QAAQ,cAAAU,qBAAA,cAAAA,qBAAA,GAAIV,QAAQ;QAC1C,aAAa,EAAEK;MACjB,CAAC,CAAC,GACF,IAAI;IAAA,CACV;EAAC,CACD,CAAC;AAEP;AAEA,eAAeR,UAAU","ignoreList":[]}
|
package/dist/RadioItem.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioItem.d.ts","sourceRoot":"","sources":["../src/RadioItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,KAAK,cAAc,GAAG;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,SAAS,yFA2Cd,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioItem.d.ts","sourceRoot":"","sources":["../src/RadioItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,KAAK,cAAc,GAAG;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAEtD,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,SAAS,yFA2Cd,CAAC;AAIF,eAAe,SAAS,CAAC"}
|
package/dist/RadioItem.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { nanoid } from 'nanoid';
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
5
|
/**
|
|
7
6
|
* A RadioItem to be used within the Radio component.
|
|
8
7
|
*/
|
|
@@ -44,16 +43,5 @@ var RadioItem = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
44
43
|
});
|
|
45
44
|
});
|
|
46
45
|
RadioItem.displayName = 'RadioItem';
|
|
47
|
-
RadioItem.defaultProps = {
|
|
48
|
-
checked: undefined,
|
|
49
|
-
className: '',
|
|
50
|
-
disabled: false,
|
|
51
|
-
inputClassName: '',
|
|
52
|
-
isInvalid: false,
|
|
53
|
-
labelClassName: '',
|
|
54
|
-
name: undefined,
|
|
55
|
-
onChange: undefined,
|
|
56
|
-
'data-testid': undefined
|
|
57
|
-
};
|
|
58
46
|
export default RadioItem;
|
|
59
47
|
//# sourceMappingURL=RadioItem.js.map
|
package/dist/RadioItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioItem.js","names":["React","useState","classNames","nanoid","jsx","_jsx","jsxs","_jsxs","RadioItem","forwardRef","props","ref","checked","children","className","disabled","inputClassName","isInvalid","labelClassName","name","onChange","value","dataTestId","id","type","htmlFor","displayName"
|
|
1
|
+
{"version":3,"file":"RadioItem.js","names":["React","useState","classNames","nanoid","jsx","_jsx","jsxs","_jsxs","RadioItem","forwardRef","props","ref","checked","children","className","disabled","inputClassName","isInvalid","labelClassName","name","onChange","value","dataTestId","id","type","htmlFor","displayName"],"sources":["../src/RadioItem.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport { nanoid } from 'nanoid';\n\ntype RadioItemProps = {\n /** Whether this value is currently checked or not */\n checked?: boolean;\n\n /** The node/text to put in the label of this radio item */\n children: React.ReactNode;\n\n /** An extra class name to add to the outer div component */\n className?: string;\n\n /** An extra class for disabling the radio button component */\n disabled?: boolean;\n\n /** An extra class name for the input component */\n inputClassName?: string;\n\n /** The value is invalid, style to show it's invalid */\n isInvalid?: boolean;\n\n /** An extra class name for the label component */\n labelClassName?: string;\n\n /** The name for this RadioItem. Should be specified by the parent Radio component */\n name?: string;\n\n /** Triggered when the input is checked/unchecked. Provided by the parent Radio component. */\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n\n /** The value to associate with this radio item */\n value: string;\n\n /** An id used for test */\n 'data-testid'?: string;\n};\n\n/**\n * A RadioItem to be used within the Radio component.\n */\nconst RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(\n (props: RadioItemProps, ref) => {\n const {\n checked,\n children,\n className = '',\n disabled = false,\n inputClassName = '',\n isInvalid = false,\n labelClassName = '',\n name,\n onChange,\n value,\n 'data-testid': dataTestId,\n } = props;\n\n const [id] = useState(nanoid());\n\n return (\n <div className={classNames('custom-control custom-radio', className)}>\n <input\n type=\"radio\"\n id={id}\n data-testid={dataTestId}\n name={name}\n ref={ref}\n className={classNames('custom-control-input', inputClassName, {\n 'is-invalid': isInvalid,\n })}\n checked={checked}\n disabled={disabled}\n value={value}\n onChange={onChange}\n />\n <label\n className={classNames('custom-control-label', labelClassName)}\n htmlFor={id}\n >\n {children}\n </label>\n </div>\n );\n }\n);\n\nRadioItem.displayName = 'RadioItem';\n\nexport default RadioItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAqChC;AACA;AACA;AACA,IAAMC,SAAS,gBAAGR,KAAK,CAACS,UAAU,CAChC,CAACC,KAAqB,EAAEC,GAAG,KAAK;EAC9B,IAAM;IACJC,OAAO;IACPC,QAAQ;IACRC,SAAS,GAAG,EAAE;IACdC,QAAQ,GAAG,KAAK;IAChBC,cAAc,GAAG,EAAE;IACnBC,SAAS,GAAG,KAAK;IACjBC,cAAc,GAAG,EAAE;IACnBC,IAAI;IACJC,QAAQ;IACRC,KAAK;IACL,aAAa,EAAEC;EACjB,CAAC,GAAGZ,KAAK;EAET,IAAM,CAACa,EAAE,CAAC,GAAGtB,QAAQ,CAACE,MAAM,CAAC,CAAC,CAAC;EAE/B,oBACEI,KAAA;IAAKO,SAAS,EAAEZ,UAAU,CAAC,6BAA6B,EAAEY,SAAS,CAAE;IAAAD,QAAA,gBACnER,IAAA;MACEmB,IAAI,EAAC,OAAO;MACZD,EAAE,EAAEA,EAAG;MACP,eAAaD,UAAW;MACxBH,IAAI,EAAEA,IAAK;MACXR,GAAG,EAAEA,GAAI;MACTG,SAAS,EAAEZ,UAAU,CAAC,sBAAsB,EAAEc,cAAc,EAAE;QAC5D,YAAY,EAAEC;MAChB,CAAC,CAAE;MACHL,OAAO,EAAEA,OAAQ;MACjBG,QAAQ,EAAEA,QAAS;MACnBM,KAAK,EAAEA,KAAM;MACbD,QAAQ,EAAEA;IAAS,CACpB,CAAC,eACFf,IAAA;MACES,SAAS,EAAEZ,UAAU,CAAC,sBAAsB,EAAEgB,cAAc,CAAE;MAC9DO,OAAO,EAAEF,EAAG;MAAAV,QAAA,EAEXA;IAAQ,CACJ,CAAC;EAAA,CACL,CAAC;AAEV,CACF,CAAC;AAEDL,SAAS,CAACkB,WAAW,GAAG,WAAW;AAEnC,eAAelB,SAAS","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './RandomAreaPlotAnimation.scss';
|
|
3
|
-
declare const RandomAreaPlotAnimation: React.MemoExoticComponent<() => JSX.Element>;
|
|
3
|
+
declare const RandomAreaPlotAnimation: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
|
|
4
4
|
export default RandomAreaPlotAnimation;
|
|
5
5
|
//# sourceMappingURL=RandomAreaPlotAnimation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RandomAreaPlotAnimation.d.ts","sourceRoot":"","sources":["../src/RandomAreaPlotAnimation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAGpE,OAAO,gCAAgC,CAAC;AAmCxC,QAAA,MAAM,uBAAuB,
|
|
1
|
+
{"version":3,"file":"RandomAreaPlotAnimation.d.ts","sourceRoot":"","sources":["../src/RandomAreaPlotAnimation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAGpE,OAAO,gCAAgC,CAAC;AAmCxC,QAAA,MAAM,uBAAuB,0EAuS3B,CAAC;AAEH,eAAe,uBAAuB,CAAC"}
|
|
@@ -63,7 +63,7 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
|
|
|
63
63
|
canvas.current.width = width * scale;
|
|
64
64
|
canvas.current.height = height * scale;
|
|
65
65
|
}
|
|
66
|
-
(_ctx = ctx) === null || _ctx === void 0
|
|
66
|
+
(_ctx = ctx) === null || _ctx === void 0 || _ctx.scale(scale, scale);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
// Returns the background fill create offscreen as pattern
|
|
@@ -163,8 +163,7 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
|
|
|
163
163
|
* @param timestamp passed in callback from requestAnimationFrame
|
|
164
164
|
*/
|
|
165
165
|
function drawCanvas(timestamp) {
|
|
166
|
-
|
|
167
|
-
lastTimestamp = (_lastTimestamp = lastTimestamp) !== null && _lastTimestamp !== void 0 ? _lastTimestamp : timestamp;
|
|
166
|
+
lastTimestamp = lastTimestamp !== null && lastTimestamp !== void 0 ? lastTimestamp : timestamp;
|
|
168
167
|
var {
|
|
169
168
|
background,
|
|
170
169
|
foregroundStroke,
|
|
@@ -180,7 +179,7 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
|
|
|
180
179
|
ctx.stroke();
|
|
181
180
|
|
|
182
181
|
// for speeds less then 60 px per second, subpixel motion is required to look smooth
|
|
183
|
-
var subPixelMotion = ((
|
|
182
|
+
var subPixelMotion = ((lastTimestamp !== null && lastTimestamp !== void 0 ? lastTimestamp : 0) - (timestamp !== null && timestamp !== void 0 ? timestamp : 0)) / (1000 / PX_PER_SECOND);
|
|
184
183
|
ctx.translate(subPixelMotion, 0);
|
|
185
184
|
drawAreaLine(data, ctx);
|
|
186
185
|
ctx.lineWidth = 2;
|
|
@@ -194,10 +193,9 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
|
|
|
194
193
|
ctx.setTransform(scale, 0, 0, scale, 0, 0); // reset the translate matrix to normal
|
|
195
194
|
|
|
196
195
|
// generate new data points
|
|
197
|
-
if ((timestamp !== null && timestamp !== void 0 ? timestamp : 0) - (
|
|
198
|
-
var _lastTimestamp4;
|
|
196
|
+
if ((timestamp !== null && timestamp !== void 0 ? timestamp : 0) - (lastTimestamp !== null && lastTimestamp !== void 0 ? lastTimestamp : 0) > 1000 / PX_PER_SECOND) {
|
|
199
197
|
// number of points to add since last update
|
|
200
|
-
var numberOfPoints = Math.floor(((timestamp !== null && timestamp !== void 0 ? timestamp : 0) - (
|
|
198
|
+
var numberOfPoints = Math.floor(((timestamp !== null && timestamp !== void 0 ? timestamp : 0) - (lastTimestamp !== null && lastTimestamp !== void 0 ? lastTimestamp : 0)) / (1000 / PX_PER_SECOND));
|
|
201
199
|
for (var i = 0; i < numberOfPoints; i += 1) {
|
|
202
200
|
data.shift();
|
|
203
201
|
data.push(randomWalk(data[data.length - 1]));
|
|
@@ -227,7 +225,6 @@ var RandomAreaPlotAnimation = /*#__PURE__*/React.memo(() => {
|
|
|
227
225
|
leading: true
|
|
228
226
|
} // resize immediately, once.
|
|
229
227
|
);
|
|
230
|
-
|
|
231
228
|
function pauseAnimation() {
|
|
232
229
|
// pause animation when browser window is blurred to conserve CPU usage
|
|
233
230
|
setShade(true);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RandomAreaPlotAnimation.js","names":["React","useEffect","useState","useRef","useMemo","debounce","assertNotNull","resolveCssVariablesInRecord","useTheme","jsx","_jsx","VOLATILITY","LOW","HIGH","START_Y","GRID_SIZE","PATTERN","SIZE","DOT_SIZE","PX_PER_SECOND","RESIZE_DEBOUNCE","INTERACTION_TIMEOUT","THEME_COLOR_VARIABLES","background","foregroundFill","foregroundStroke","gridColor","getRandomAreaPlotAnimationThemeColors","RandomAreaPlotAnimation","memo","activeThemes","themeColors","canvas","container","shade","setShade","scale","window","devicePixelRatio","ctx","pattern","width","height","rAF","lastTimestamp","data","setCanvasSize","_ctx","current","offsetWidth","offsetHeight","style","concat","createPatternFill","canvasPattern","document","createElement","contextPattern","getContext","fillStyle","fillRect","createPattern","randomWalk","prev","rand","Math","random","change","abs","initData","startingData","y","x","push","setDataSize","length","pop","drawAreaLine","path","context","beginPath","moveTo","lineTo","i","closePath","drawGridLines","drawCanvas","timestamp","_lastTimestamp","_lastTimestamp2","_lastTimestamp3","lineWidth","strokeStyle","stroke","subPixelMotion","translate","fill","setTransform","_lastTimestamp4","numberOfPoints","floor","shift","cancelAnimationFrame","requestAnimationFrame","debouncedHandleResize","leading","pauseAnimation","resetIdleTimeout","startAnimation","handleActivity","hasFocus","handleResize","_canvas$current","alpha","addEventListener","removeEventListener","cancel","className","ref","children"],"sources":["../src/RandomAreaPlotAnimation.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/display-name */\n\nimport React, { useEffect, useState, useRef, useMemo } from 'react';\nimport debounce from 'lodash.debounce';\nimport { assertNotNull } from '@deephaven/utils';\nimport './RandomAreaPlotAnimation.scss';\nimport { resolveCssVariablesInRecord, useTheme } from './theme';\n\nconst VOLATILITY = 0.025; // how spikey the data gets\nconst LOW = 0.9;\nconst HIGH = 0.1;\nconst START_Y = 0.618;\nconst GRID_SIZE = 80;\nconst PATTERN = { SIZE: 8, DOT_SIZE: 2 };\nconst PX_PER_SECOND = 18;\nconst RESIZE_DEBOUNCE = 250;\nconst INTERACTION_TIMEOUT = 60 * 1000;\n\ninterface ThemeColors {\n background: string;\n foregroundFill: string;\n foregroundStroke: string;\n gridColor: string;\n}\n\nconst THEME_COLOR_VARIABLES = {\n background: 'var(--dh-color-random-area-plot-animation-bg)',\n foregroundFill: 'var(--dh-color-random-area-plot-animation-fg-fill)',\n foregroundStroke: 'var(--dh-color-random-area-plot-animation-fg-stroke)',\n gridColor: 'var(--dh-color-random-area-plot-animation-grid)',\n} satisfies ThemeColors;\n\n/**\n * Resolve theme colors needed for our animation.\n */\nfunction getRandomAreaPlotAnimationThemeColors(): ThemeColors {\n return resolveCssVariablesInRecord(THEME_COLOR_VARIABLES);\n}\n\n// Draw a background canvas, paint it with a fun chart looking animation\nconst RandomAreaPlotAnimation = React.memo(() => {\n const { activeThemes } = useTheme();\n\n const themeColors = useMemo(getRandomAreaPlotAnimationThemeColors, [\n activeThemes,\n ]);\n\n const canvas = useRef<HTMLCanvasElement>(null);\n const container = useRef<HTMLDivElement>(null);\n const [shade, setShade] = useState(false);\n const scale = window.devicePixelRatio;\n\n let ctx: CanvasRenderingContext2D | null | undefined;\n let pattern: CanvasPattern | null | undefined;\n let width: number;\n let height: number;\n let rAF: number | null;\n\n let lastTimestamp: DOMHighResTimeStamp | null | undefined = null;\n let data: number[] = [];\n\n function setCanvasSize(): void {\n // Set canvas size to fill screen\n if (container.current != null) {\n width = container.current.offsetWidth;\n height = container.current.offsetHeight;\n }\n\n if (canvas.current != null) {\n canvas.current.style.width = `${width}px`;\n canvas.current.style.height = `${height}px`;\n\n canvas.current.width = width * scale;\n canvas.current.height = height * scale;\n }\n\n ctx?.scale(scale, scale);\n }\n\n // Returns the background fill create offscreen as pattern\n function createPatternFill(): CanvasPattern | null | undefined {\n const { foregroundFill, foregroundStroke } = themeColors;\n\n // create the off-screen canvas\n const canvasPattern = document.createElement('canvas');\n canvasPattern.width = PATTERN.SIZE;\n canvasPattern.height = PATTERN.SIZE;\n const contextPattern = canvasPattern.getContext('2d');\n\n // draw pattern to off-screen context\n if (contextPattern != null) {\n contextPattern.fillStyle = foregroundStroke;\n contextPattern.fillRect(0, 0, PATTERN.DOT_SIZE, PATTERN.DOT_SIZE);\n\n // add an overlay fill\n contextPattern.fillStyle = foregroundFill;\n contextPattern.fillRect(0, 0, PATTERN.SIZE, PATTERN.SIZE);\n }\n return contextPattern?.createPattern(canvasPattern, 'repeat');\n }\n\n /**\n * Generates a step in a random walk between LOW - HIGH given a previous value\n * data is always in 0-1 data space so its scaleable\n * data space is converted to screen space inside draw functions\n * @param prev previous random walk step\n * @return new random walk step\n */\n function randomWalk(prev: number): number {\n const rand = Math.random() - 0.5; // give it directionality\n let change = VOLATILITY * rand; // scale by volatity constant\n\n // ensure directional bounce off approaching edges\n if (prev < HIGH) {\n change = Math.abs(change);\n } else if (prev > LOW) {\n change = -Math.abs(change);\n }\n\n return prev + change;\n }\n\n function initData(): number[] {\n const startingData = [];\n let y = START_Y; // always start towards the bottom of the screen\n for (let x = 0; x < width + PX_PER_SECOND; x += 1) {\n y = randomWalk(y);\n startingData.push(y);\n }\n return startingData;\n }\n\n function setDataSize(): void {\n while (data.length >= width + PX_PER_SECOND) {\n data.pop();\n }\n while (data.length < width + PX_PER_SECOND) {\n data.push(randomWalk(data[data.length - 1]));\n }\n }\n\n function drawAreaLine(\n path: number[],\n context: CanvasRenderingContext2D\n ): void {\n context.beginPath();\n // start offscreen\n context.moveTo(-1, height + 1);\n context.lineTo(-1, height * path[0]);\n\n // draw the line\n for (let i = 0; i < path.length; i += 1) {\n context.lineTo(i, height * path[i]);\n }\n\n // close offscreen\n context.lineTo(width + PX_PER_SECOND, height * path[path.length - 1]);\n context.lineTo(width + PX_PER_SECOND, height + 1);\n context.closePath();\n }\n\n function drawGridLines(context: CanvasRenderingContext2D): void {\n context.beginPath();\n // draw verticals\n for (let x = 1; x < width; x += GRID_SIZE) {\n context.moveTo(x, 0);\n context.lineTo(x, height);\n }\n // draw horizontals\n for (let y = 1; y < height; y += GRID_SIZE) {\n context.moveTo(0, y);\n context.lineTo(width, y);\n }\n }\n\n /**\n * Main draw loop for where the animation happens\n * all the styling happens within drawCanvas from paths generated by other functions\n * @param timestamp passed in callback from requestAnimationFrame\n */\n function drawCanvas(timestamp?: DOMHighResTimeStamp): void {\n lastTimestamp = lastTimestamp ?? timestamp;\n\n const { background, foregroundStroke, gridColor } = themeColors;\n\n assertNotNull(ctx);\n // clear the canvas\n ctx.fillStyle = background;\n ctx.fillRect(0, 0, width, height);\n\n drawGridLines(ctx);\n ctx.lineWidth = 1;\n ctx.strokeStyle = gridColor;\n ctx.stroke();\n\n // for speeds less then 60 px per second, subpixel motion is required to look smooth\n const subPixelMotion =\n ((lastTimestamp ?? 0) - (timestamp ?? 0)) / (1000 / PX_PER_SECOND);\n ctx.translate(subPixelMotion, 0);\n\n drawAreaLine(data, ctx);\n ctx.lineWidth = 2;\n ctx.strokeStyle = foregroundStroke;\n ctx.stroke();\n\n ctx.translate(-subPixelMotion, 0); // we don't pattern to shift however\n if (pattern != null) {\n ctx.fillStyle = pattern;\n }\n ctx.fill();\n ctx.setTransform(scale, 0, 0, scale, 0, 0); // reset the translate matrix to normal\n\n // generate new data points\n if ((timestamp ?? 0) - (lastTimestamp ?? 0) > 1000 / PX_PER_SECOND) {\n // number of points to add since last update\n const numberOfPoints = Math.floor(\n ((timestamp ?? 0) - (lastTimestamp ?? 0)) / (1000 / PX_PER_SECOND)\n );\n for (let i = 0; i < numberOfPoints; i += 1) {\n data.shift();\n data.push(randomWalk(data[data.length - 1]));\n }\n lastTimestamp = timestamp;\n }\n\n if (rAF != null) {\n cancelAnimationFrame(rAF);\n }\n rAF = requestAnimationFrame(drawCanvas);\n }\n\n // debounce the resize so its not overly aggresive\n const debouncedHandleResize = debounce(\n () => {\n rAF = requestAnimationFrame(timestamp => {\n setCanvasSize(); // setCanvas can cause lag if not debounced\n\n // fill or remove extra data points\n setDataSize();\n\n // opening devtools triggers a blur then resize,\n // need to reset shade as we are restarting animation\n setShade(false);\n drawCanvas(timestamp);\n });\n },\n RESIZE_DEBOUNCE,\n { leading: true } // resize immediately, once.\n );\n\n function pauseAnimation(): void {\n // pause animation when browser window is blurred to conserve CPU usage\n setShade(true);\n if (rAF != null) {\n cancelAnimationFrame(rAF);\n }\n rAF = null;\n lastTimestamp = null;\n }\n\n // when timeout expires, pause animation\n const resetIdleTimeout = debounce(() => {\n pauseAnimation();\n }, INTERACTION_TIMEOUT);\n\n function startAnimation(): void {\n // can fire multiple times, check if rAF is null first\n // restart animation loop, and fade back in\n if (rAF == null) {\n setShade(false);\n setCanvasSize();\n setDataSize();\n rAF = requestAnimationFrame(drawCanvas);\n }\n resetIdleTimeout();\n }\n\n function handleActivity(): void {\n if (document.hasFocus()) {\n // only if document has focus (mousemove can fire on non-focused tabs)\n startAnimation();\n }\n }\n\n function handleResize(): void {\n // pause and debounce animation during resize for better resizing performance\n if (rAF != null) {\n cancelAnimationFrame(rAF);\n }\n resetIdleTimeout(); // treat resizing as a form of activity\n debouncedHandleResize();\n }\n\n // react mount/unmount hooks\n useEffect(() => {\n ctx = canvas.current?.getContext('2d', { alpha: false });\n setCanvasSize();\n data = initData();\n pattern = createPatternFill();\n\n // start draw loop\n drawCanvas();\n resetIdleTimeout();\n\n window.addEventListener('resize', handleResize);\n\n window.addEventListener('focus', startAnimation);\n window.addEventListener('blur', pauseAnimation);\n\n // don't burn cpu if the user is \"idle\", start a timer that resets\n // on any user activity, and on timeout expiry pause the animation\n window.addEventListener('mousemove', handleActivity);\n window.addEventListener('keydown', handleActivity);\n\n return () => {\n if (rAF != null) {\n cancelAnimationFrame(rAF);\n }\n window.removeEventListener('resize', handleResize);\n window.removeEventListener('focus', startAnimation);\n window.removeEventListener('blur', pauseAnimation);\n\n window.removeEventListener('mousemove', handleActivity);\n window.removeEventListener('keydown', handleActivity);\n\n resetIdleTimeout.cancel();\n debouncedHandleResize.cancel();\n };\n }, [themeColors]);\n\n return (\n <div className=\"random-area-plot-animation-container\" ref={container}>\n <canvas ref={canvas} className={shade ? 'shade' : ''} />\n </div>\n );\n});\n\nexport default RandomAreaPlotAnimation;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RandomAreaPlotAnimation.js","names":["React","useEffect","useState","useRef","useMemo","debounce","assertNotNull","resolveCssVariablesInRecord","useTheme","jsx","_jsx","VOLATILITY","LOW","HIGH","START_Y","GRID_SIZE","PATTERN","SIZE","DOT_SIZE","PX_PER_SECOND","RESIZE_DEBOUNCE","INTERACTION_TIMEOUT","THEME_COLOR_VARIABLES","background","foregroundFill","foregroundStroke","gridColor","getRandomAreaPlotAnimationThemeColors","RandomAreaPlotAnimation","memo","activeThemes","themeColors","canvas","container","shade","setShade","scale","window","devicePixelRatio","ctx","pattern","width","height","rAF","lastTimestamp","data","setCanvasSize","_ctx","current","offsetWidth","offsetHeight","style","concat","createPatternFill","canvasPattern","document","createElement","contextPattern","getContext","fillStyle","fillRect","createPattern","randomWalk","prev","rand","Math","random","change","abs","initData","startingData","y","x","push","setDataSize","length","pop","drawAreaLine","path","context","beginPath","moveTo","lineTo","i","closePath","drawGridLines","drawCanvas","timestamp","lineWidth","strokeStyle","stroke","subPixelMotion","translate","fill","setTransform","numberOfPoints","floor","shift","cancelAnimationFrame","requestAnimationFrame","debouncedHandleResize","leading","pauseAnimation","resetIdleTimeout","startAnimation","handleActivity","hasFocus","handleResize","_canvas$current","alpha","addEventListener","removeEventListener","cancel","className","ref","children"],"sources":["../src/RandomAreaPlotAnimation.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable react/display-name */\n\nimport React, { useEffect, useState, useRef, useMemo } from 'react';\nimport debounce from 'lodash.debounce';\nimport { assertNotNull } from '@deephaven/utils';\nimport './RandomAreaPlotAnimation.scss';\nimport { resolveCssVariablesInRecord, useTheme } from './theme';\n\nconst VOLATILITY = 0.025; // how spikey the data gets\nconst LOW = 0.9;\nconst HIGH = 0.1;\nconst START_Y = 0.618;\nconst GRID_SIZE = 80;\nconst PATTERN = { SIZE: 8, DOT_SIZE: 2 };\nconst PX_PER_SECOND = 18;\nconst RESIZE_DEBOUNCE = 250;\nconst INTERACTION_TIMEOUT = 60 * 1000;\n\ninterface ThemeColors {\n background: string;\n foregroundFill: string;\n foregroundStroke: string;\n gridColor: string;\n}\n\nconst THEME_COLOR_VARIABLES = {\n background: 'var(--dh-color-random-area-plot-animation-bg)',\n foregroundFill: 'var(--dh-color-random-area-plot-animation-fg-fill)',\n foregroundStroke: 'var(--dh-color-random-area-plot-animation-fg-stroke)',\n gridColor: 'var(--dh-color-random-area-plot-animation-grid)',\n} satisfies ThemeColors;\n\n/**\n * Resolve theme colors needed for our animation.\n */\nfunction getRandomAreaPlotAnimationThemeColors(): ThemeColors {\n return resolveCssVariablesInRecord(THEME_COLOR_VARIABLES);\n}\n\n// Draw a background canvas, paint it with a fun chart looking animation\nconst RandomAreaPlotAnimation = React.memo(() => {\n const { activeThemes } = useTheme();\n\n const themeColors = useMemo(getRandomAreaPlotAnimationThemeColors, [\n activeThemes,\n ]);\n\n const canvas = useRef<HTMLCanvasElement>(null);\n const container = useRef<HTMLDivElement>(null);\n const [shade, setShade] = useState(false);\n const scale = window.devicePixelRatio;\n\n let ctx: CanvasRenderingContext2D | null | undefined;\n let pattern: CanvasPattern | null | undefined;\n let width: number;\n let height: number;\n let rAF: number | null;\n\n let lastTimestamp: DOMHighResTimeStamp | null | undefined = null;\n let data: number[] = [];\n\n function setCanvasSize(): void {\n // Set canvas size to fill screen\n if (container.current != null) {\n width = container.current.offsetWidth;\n height = container.current.offsetHeight;\n }\n\n if (canvas.current != null) {\n canvas.current.style.width = `${width}px`;\n canvas.current.style.height = `${height}px`;\n\n canvas.current.width = width * scale;\n canvas.current.height = height * scale;\n }\n\n ctx?.scale(scale, scale);\n }\n\n // Returns the background fill create offscreen as pattern\n function createPatternFill(): CanvasPattern | null | undefined {\n const { foregroundFill, foregroundStroke } = themeColors;\n\n // create the off-screen canvas\n const canvasPattern = document.createElement('canvas');\n canvasPattern.width = PATTERN.SIZE;\n canvasPattern.height = PATTERN.SIZE;\n const contextPattern = canvasPattern.getContext('2d');\n\n // draw pattern to off-screen context\n if (contextPattern != null) {\n contextPattern.fillStyle = foregroundStroke;\n contextPattern.fillRect(0, 0, PATTERN.DOT_SIZE, PATTERN.DOT_SIZE);\n\n // add an overlay fill\n contextPattern.fillStyle = foregroundFill;\n contextPattern.fillRect(0, 0, PATTERN.SIZE, PATTERN.SIZE);\n }\n return contextPattern?.createPattern(canvasPattern, 'repeat');\n }\n\n /**\n * Generates a step in a random walk between LOW - HIGH given a previous value\n * data is always in 0-1 data space so its scaleable\n * data space is converted to screen space inside draw functions\n * @param prev previous random walk step\n * @return new random walk step\n */\n function randomWalk(prev: number): number {\n const rand = Math.random() - 0.5; // give it directionality\n let change = VOLATILITY * rand; // scale by volatity constant\n\n // ensure directional bounce off approaching edges\n if (prev < HIGH) {\n change = Math.abs(change);\n } else if (prev > LOW) {\n change = -Math.abs(change);\n }\n\n return prev + change;\n }\n\n function initData(): number[] {\n const startingData = [];\n let y = START_Y; // always start towards the bottom of the screen\n for (let x = 0; x < width + PX_PER_SECOND; x += 1) {\n y = randomWalk(y);\n startingData.push(y);\n }\n return startingData;\n }\n\n function setDataSize(): void {\n while (data.length >= width + PX_PER_SECOND) {\n data.pop();\n }\n while (data.length < width + PX_PER_SECOND) {\n data.push(randomWalk(data[data.length - 1]));\n }\n }\n\n function drawAreaLine(\n path: number[],\n context: CanvasRenderingContext2D\n ): void {\n context.beginPath();\n // start offscreen\n context.moveTo(-1, height + 1);\n context.lineTo(-1, height * path[0]);\n\n // draw the line\n for (let i = 0; i < path.length; i += 1) {\n context.lineTo(i, height * path[i]);\n }\n\n // close offscreen\n context.lineTo(width + PX_PER_SECOND, height * path[path.length - 1]);\n context.lineTo(width + PX_PER_SECOND, height + 1);\n context.closePath();\n }\n\n function drawGridLines(context: CanvasRenderingContext2D): void {\n context.beginPath();\n // draw verticals\n for (let x = 1; x < width; x += GRID_SIZE) {\n context.moveTo(x, 0);\n context.lineTo(x, height);\n }\n // draw horizontals\n for (let y = 1; y < height; y += GRID_SIZE) {\n context.moveTo(0, y);\n context.lineTo(width, y);\n }\n }\n\n /**\n * Main draw loop for where the animation happens\n * all the styling happens within drawCanvas from paths generated by other functions\n * @param timestamp passed in callback from requestAnimationFrame\n */\n function drawCanvas(timestamp?: DOMHighResTimeStamp): void {\n lastTimestamp = lastTimestamp ?? timestamp;\n\n const { background, foregroundStroke, gridColor } = themeColors;\n\n assertNotNull(ctx);\n // clear the canvas\n ctx.fillStyle = background;\n ctx.fillRect(0, 0, width, height);\n\n drawGridLines(ctx);\n ctx.lineWidth = 1;\n ctx.strokeStyle = gridColor;\n ctx.stroke();\n\n // for speeds less then 60 px per second, subpixel motion is required to look smooth\n const subPixelMotion =\n ((lastTimestamp ?? 0) - (timestamp ?? 0)) / (1000 / PX_PER_SECOND);\n ctx.translate(subPixelMotion, 0);\n\n drawAreaLine(data, ctx);\n ctx.lineWidth = 2;\n ctx.strokeStyle = foregroundStroke;\n ctx.stroke();\n\n ctx.translate(-subPixelMotion, 0); // we don't pattern to shift however\n if (pattern != null) {\n ctx.fillStyle = pattern;\n }\n ctx.fill();\n ctx.setTransform(scale, 0, 0, scale, 0, 0); // reset the translate matrix to normal\n\n // generate new data points\n if ((timestamp ?? 0) - (lastTimestamp ?? 0) > 1000 / PX_PER_SECOND) {\n // number of points to add since last update\n const numberOfPoints = Math.floor(\n ((timestamp ?? 0) - (lastTimestamp ?? 0)) / (1000 / PX_PER_SECOND)\n );\n for (let i = 0; i < numberOfPoints; i += 1) {\n data.shift();\n data.push(randomWalk(data[data.length - 1]));\n }\n lastTimestamp = timestamp;\n }\n\n if (rAF != null) {\n cancelAnimationFrame(rAF);\n }\n rAF = requestAnimationFrame(drawCanvas);\n }\n\n // debounce the resize so its not overly aggresive\n const debouncedHandleResize = debounce(\n () => {\n rAF = requestAnimationFrame(timestamp => {\n setCanvasSize(); // setCanvas can cause lag if not debounced\n\n // fill or remove extra data points\n setDataSize();\n\n // opening devtools triggers a blur then resize,\n // need to reset shade as we are restarting animation\n setShade(false);\n drawCanvas(timestamp);\n });\n },\n RESIZE_DEBOUNCE,\n { leading: true } // resize immediately, once.\n );\n\n function pauseAnimation(): void {\n // pause animation when browser window is blurred to conserve CPU usage\n setShade(true);\n if (rAF != null) {\n cancelAnimationFrame(rAF);\n }\n rAF = null;\n lastTimestamp = null;\n }\n\n // when timeout expires, pause animation\n const resetIdleTimeout = debounce(() => {\n pauseAnimation();\n }, INTERACTION_TIMEOUT);\n\n function startAnimation(): void {\n // can fire multiple times, check if rAF is null first\n // restart animation loop, and fade back in\n if (rAF == null) {\n setShade(false);\n setCanvasSize();\n setDataSize();\n rAF = requestAnimationFrame(drawCanvas);\n }\n resetIdleTimeout();\n }\n\n function handleActivity(): void {\n if (document.hasFocus()) {\n // only if document has focus (mousemove can fire on non-focused tabs)\n startAnimation();\n }\n }\n\n function handleResize(): void {\n // pause and debounce animation during resize for better resizing performance\n if (rAF != null) {\n cancelAnimationFrame(rAF);\n }\n resetIdleTimeout(); // treat resizing as a form of activity\n debouncedHandleResize();\n }\n\n // react mount/unmount hooks\n useEffect(() => {\n ctx = canvas.current?.getContext('2d', { alpha: false });\n setCanvasSize();\n data = initData();\n pattern = createPatternFill();\n\n // start draw loop\n drawCanvas();\n resetIdleTimeout();\n\n window.addEventListener('resize', handleResize);\n\n window.addEventListener('focus', startAnimation);\n window.addEventListener('blur', pauseAnimation);\n\n // don't burn cpu if the user is \"idle\", start a timer that resets\n // on any user activity, and on timeout expiry pause the animation\n window.addEventListener('mousemove', handleActivity);\n window.addEventListener('keydown', handleActivity);\n\n return () => {\n if (rAF != null) {\n cancelAnimationFrame(rAF);\n }\n window.removeEventListener('resize', handleResize);\n window.removeEventListener('focus', startAnimation);\n window.removeEventListener('blur', pauseAnimation);\n\n window.removeEventListener('mousemove', handleActivity);\n window.removeEventListener('keydown', handleActivity);\n\n resetIdleTimeout.cancel();\n debouncedHandleResize.cancel();\n };\n }, [themeColors]);\n\n return (\n <div className=\"random-area-plot-animation-container\" ref={container}>\n <canvas ref={canvas} className={shade ? 'shade' : ''} />\n </div>\n );\n});\n\nexport default RandomAreaPlotAnimation;\n"],"mappings":"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","ignoreList":[]}
|
package/dist/SearchInput.js
CHANGED
|
@@ -9,9 +9,7 @@ import Button from "./Button.js";
|
|
|
9
9
|
import "./SearchInput.css";
|
|
10
10
|
import { GLOBAL_SHORTCUTS } from "./shortcuts/index.js";
|
|
11
11
|
import { ContextActions } from "./context-actions/index.js";
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
15
13
|
class SearchInput extends PureComponent {
|
|
16
14
|
constructor(props) {
|
|
17
15
|
super(props);
|
|
@@ -28,11 +26,11 @@ class SearchInput extends PureComponent {
|
|
|
28
26
|
}
|
|
29
27
|
focus() {
|
|
30
28
|
var _this$inputField$curr;
|
|
31
|
-
(_this$inputField$curr = this.inputField.current) === null || _this$inputField$curr === void 0
|
|
29
|
+
(_this$inputField$curr = this.inputField.current) === null || _this$inputField$curr === void 0 || _this$inputField$curr.focus();
|
|
32
30
|
}
|
|
33
31
|
select() {
|
|
34
32
|
var _this$inputField$curr2;
|
|
35
|
-
(_this$inputField$curr2 = this.inputField.current) === null || _this$inputField$curr2 === void 0
|
|
33
|
+
(_this$inputField$curr2 = this.inputField.current) === null || _this$inputField$curr2 === void 0 || _this$inputField$curr2.select();
|
|
36
34
|
}
|
|
37
35
|
setInputPaddingRight() {
|
|
38
36
|
var inputField = this.inputField.current;
|
package/dist/SearchInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","names":["React","PureComponent","FontAwesomeIcon","vsArrowLeft","vsArrowRight","vsSearch","classNames","Button","GLOBAL_SHORTCUTS","ContextActions","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SearchInput","constructor","props","_defineProperty","inputField","createRef","searchChangeSelection","componentDidMount","setInputPaddingRight","componentDidUpdate","focus","_this$inputField$curr","current","select","_this$inputField$curr2","paddingRight","getBoundingClientRect","width","style","concat","render","value","placeholder","endPlaceholder","onBlur","onChange","className","disabled","matchCount","id","onKeyDown","dataTestId","cursor","matchCountSection","contextActions","action","next","shortcut","NEXT","PREVIOUS","children","kind","type","onClick","icon","tooltip","getDisplayText","index","undefined","ref","actions"],"sources":["../src/SearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsArrowLeft, vsArrowRight, vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport Button from './Button';\nimport './SearchInput.scss';\nimport { GLOBAL_SHORTCUTS } from './shortcuts';\nimport { ContextActions } from './context-actions';\n\ninterface SearchInputProps {\n value: string;\n placeholder: string;\n /** Placeholder text shown on the right side of the input when empty */\n endPlaceholder?: string;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n className: string;\n disabled?: boolean;\n /** Number of search matches, displayed at the end of the search field. */\n matchCount: number;\n id: string;\n 'data-testid'?: string;\n cursor?: {\n index: number | undefined;\n next: (direction: 'forward' | 'back') => void;\n };\n}\n\nclass SearchInput extends PureComponent<SearchInputProps> {\n static defaultProps = {\n placeholder: 'Search',\n className: '',\n matchCount: null,\n onKeyDown(): void {\n // no-op\n },\n id: '',\n 'data-testid': undefined,\n cursor: undefined,\n };\n\n constructor(props: SearchInputProps) {\n super(props);\n this.inputField = React.createRef();\n this.searchChangeSelection = React.createRef();\n }\n\n componentDidMount(): void {\n this.setInputPaddingRight();\n }\n\n componentDidUpdate(): void {\n this.setInputPaddingRight();\n }\n\n focus(): void {\n this.inputField.current?.focus();\n }\n\n select(): void {\n this.inputField.current?.select();\n }\n\n inputField: React.RefObject<HTMLInputElement>;\n\n searchChangeSelection: React.RefObject<HTMLDivElement>;\n\n setInputPaddingRight(): void {\n const inputField = this.inputField.current;\n const searchChangeSelection = this.searchChangeSelection.current;\n if (inputField && searchChangeSelection) {\n const paddingRight = searchChangeSelection.getBoundingClientRect().width;\n inputField.style.paddingRight = `${paddingRight}px`;\n }\n }\n\n render(): JSX.Element {\n const {\n value,\n placeholder,\n endPlaceholder,\n onBlur,\n onChange,\n className,\n disabled,\n matchCount,\n id,\n onKeyDown,\n 'data-testid': dataTestId,\n cursor,\n } = this.props;\n\n let matchCountSection;\n const contextActions = [\n {\n action: () => cursor?.next('forward'),\n shortcut: GLOBAL_SHORTCUTS.NEXT,\n },\n {\n action: () => cursor?.next('back'),\n shortcut: GLOBAL_SHORTCUTS.PREVIOUS,\n },\n ];\n\n if (cursor && matchCount > 1) {\n matchCountSection = (\n <>\n <Button\n kind=\"ghost\"\n className=\"search-change-button\"\n type=\"button\"\n onClick={() => {\n cursor.next('back');\n }}\n icon={vsArrowLeft}\n tooltip={`Previous match (${GLOBAL_SHORTCUTS.PREVIOUS.getDisplayText()})`}\n />\n <span className=\"search-change-text\">\n {cursor.index !== undefined && `${cursor.index + 1} of `}\n {matchCount}\n </span>\n <Button\n kind=\"ghost\"\n className=\"search-change-button\"\n type=\"button\"\n onClick={() => {\n cursor.next('forward');\n }}\n icon={vsArrowRight}\n tooltip={`Next match (${GLOBAL_SHORTCUTS.NEXT.getDisplayText()})`}\n />\n </>\n );\n } else {\n matchCountSection = matchCount > 0 && (\n <span className=\"search-match\">{matchCount}</span>\n );\n }\n\n return (\n <div className={classNames('search-group', className)}>\n <input\n type=\"search\"\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onKeyDown={onKeyDown}\n className=\"form-control\"\n disabled={disabled}\n placeholder={placeholder}\n ref={this.inputField}\n id={id}\n data-testid={dataTestId}\n />\n\n {matchCount != null ? (\n <>\n <div\n className=\"search-change-selection\"\n ref={this.searchChangeSelection}\n >\n {matchCountSection}\n </div>\n <ContextActions actions={contextActions} />\n </>\n ) : (\n <span className=\"search-end-content\">\n {(endPlaceholder ?? '') !== '' && value === '' && (\n <span className=\"search-end-placeholder\">{endPlaceholder}</span>\n )}\n <FontAwesomeIcon icon={vsSearch} />\n </span>\n )}\n </div>\n );\n }\n}\n\nexport default SearchInput;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,WAAW,EAAEC,YAAY,EAAEC,QAAQ,QAAQ,kBAAkB;AACtE,OAAOC,UAAU,MAAM,YAAY;AAAC,OAC7BC,MAAM;AAAA;AAAA,SAEJC,gBAAgB;AAAA,SAChBC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA
|
|
1
|
+
{"version":3,"file":"SearchInput.js","names":["React","PureComponent","FontAwesomeIcon","vsArrowLeft","vsArrowRight","vsSearch","classNames","Button","GLOBAL_SHORTCUTS","ContextActions","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SearchInput","constructor","props","_defineProperty","inputField","createRef","searchChangeSelection","componentDidMount","setInputPaddingRight","componentDidUpdate","focus","_this$inputField$curr","current","select","_this$inputField$curr2","paddingRight","getBoundingClientRect","width","style","concat","render","value","placeholder","endPlaceholder","onBlur","onChange","className","disabled","matchCount","id","onKeyDown","dataTestId","cursor","matchCountSection","contextActions","action","next","shortcut","NEXT","PREVIOUS","children","kind","type","onClick","icon","tooltip","getDisplayText","index","undefined","ref","actions"],"sources":["../src/SearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsArrowLeft, vsArrowRight, vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport Button from './Button';\nimport './SearchInput.scss';\nimport { GLOBAL_SHORTCUTS } from './shortcuts';\nimport { ContextActions } from './context-actions';\n\ninterface SearchInputProps {\n value: string;\n placeholder: string;\n /** Placeholder text shown on the right side of the input when empty */\n endPlaceholder?: string;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n className: string;\n disabled?: boolean;\n /** Number of search matches, displayed at the end of the search field. */\n matchCount: number;\n id: string;\n 'data-testid'?: string;\n cursor?: {\n index: number | undefined;\n next: (direction: 'forward' | 'back') => void;\n };\n}\n\nclass SearchInput extends PureComponent<SearchInputProps> {\n static defaultProps = {\n placeholder: 'Search',\n className: '',\n matchCount: null,\n onKeyDown(): void {\n // no-op\n },\n id: '',\n 'data-testid': undefined,\n cursor: undefined,\n };\n\n constructor(props: SearchInputProps) {\n super(props);\n this.inputField = React.createRef();\n this.searchChangeSelection = React.createRef();\n }\n\n componentDidMount(): void {\n this.setInputPaddingRight();\n }\n\n componentDidUpdate(): void {\n this.setInputPaddingRight();\n }\n\n focus(): void {\n this.inputField.current?.focus();\n }\n\n select(): void {\n this.inputField.current?.select();\n }\n\n inputField: React.RefObject<HTMLInputElement>;\n\n searchChangeSelection: React.RefObject<HTMLDivElement>;\n\n setInputPaddingRight(): void {\n const inputField = this.inputField.current;\n const searchChangeSelection = this.searchChangeSelection.current;\n if (inputField && searchChangeSelection) {\n const paddingRight = searchChangeSelection.getBoundingClientRect().width;\n inputField.style.paddingRight = `${paddingRight}px`;\n }\n }\n\n render(): JSX.Element {\n const {\n value,\n placeholder,\n endPlaceholder,\n onBlur,\n onChange,\n className,\n disabled,\n matchCount,\n id,\n onKeyDown,\n 'data-testid': dataTestId,\n cursor,\n } = this.props;\n\n let matchCountSection;\n const contextActions = [\n {\n action: () => cursor?.next('forward'),\n shortcut: GLOBAL_SHORTCUTS.NEXT,\n },\n {\n action: () => cursor?.next('back'),\n shortcut: GLOBAL_SHORTCUTS.PREVIOUS,\n },\n ];\n\n if (cursor && matchCount > 1) {\n matchCountSection = (\n <>\n <Button\n kind=\"ghost\"\n className=\"search-change-button\"\n type=\"button\"\n onClick={() => {\n cursor.next('back');\n }}\n icon={vsArrowLeft}\n tooltip={`Previous match (${GLOBAL_SHORTCUTS.PREVIOUS.getDisplayText()})`}\n />\n <span className=\"search-change-text\">\n {cursor.index !== undefined && `${cursor.index + 1} of `}\n {matchCount}\n </span>\n <Button\n kind=\"ghost\"\n className=\"search-change-button\"\n type=\"button\"\n onClick={() => {\n cursor.next('forward');\n }}\n icon={vsArrowRight}\n tooltip={`Next match (${GLOBAL_SHORTCUTS.NEXT.getDisplayText()})`}\n />\n </>\n );\n } else {\n matchCountSection = matchCount > 0 && (\n <span className=\"search-match\">{matchCount}</span>\n );\n }\n\n return (\n <div className={classNames('search-group', className)}>\n <input\n type=\"search\"\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onKeyDown={onKeyDown}\n className=\"form-control\"\n disabled={disabled}\n placeholder={placeholder}\n ref={this.inputField}\n id={id}\n data-testid={dataTestId}\n />\n\n {matchCount != null ? (\n <>\n <div\n className=\"search-change-selection\"\n ref={this.searchChangeSelection}\n >\n {matchCountSection}\n </div>\n <ContextActions actions={contextActions} />\n </>\n ) : (\n <span className=\"search-end-content\">\n {(endPlaceholder ?? '') !== '' && value === '' && (\n <span className=\"search-end-placeholder\">{endPlaceholder}</span>\n )}\n <FontAwesomeIcon icon={vsSearch} />\n </span>\n )}\n </div>\n );\n }\n}\n\nexport default SearchInput;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,WAAW,EAAEC,YAAY,EAAEC,QAAQ,QAAQ,kBAAkB;AACtE,OAAOC,UAAU,MAAM,YAAY;AAAC,OAC7BC,MAAM;AAAA;AAAA,SAEJC,gBAAgB;AAAA,SAChBC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAsBvB,MAAMC,WAAW,SAASf,aAAa,CAAmB;EAaxDgB,WAAWA,CAACC,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA;IAAAA,eAAA;IACb,IAAI,CAACC,UAAU,gBAAGpB,KAAK,CAACqB,SAAS,CAAC,CAAC;IACnC,IAAI,CAACC,qBAAqB,gBAAGtB,KAAK,CAACqB,SAAS,CAAC,CAAC;EAChD;EAEAE,iBAAiBA,CAAA,EAAS;IACxB,IAAI,CAACC,oBAAoB,CAAC,CAAC;EAC7B;EAEAC,kBAAkBA,CAAA,EAAS;IACzB,IAAI,CAACD,oBAAoB,CAAC,CAAC;EAC7B;EAEAE,KAAKA,CAAA,EAAS;IAAA,IAAAC,qBAAA;IACZ,CAAAA,qBAAA,OAAI,CAACP,UAAU,CAACQ,OAAO,cAAAD,qBAAA,eAAvBA,qBAAA,CAAyBD,KAAK,CAAC,CAAC;EAClC;EAEAG,MAAMA,CAAA,EAAS;IAAA,IAAAC,sBAAA;IACb,CAAAA,sBAAA,OAAI,CAACV,UAAU,CAACQ,OAAO,cAAAE,sBAAA,eAAvBA,sBAAA,CAAyBD,MAAM,CAAC,CAAC;EACnC;EAMAL,oBAAoBA,CAAA,EAAS;IAC3B,IAAMJ,UAAU,GAAG,IAAI,CAACA,UAAU,CAACQ,OAAO;IAC1C,IAAMN,qBAAqB,GAAG,IAAI,CAACA,qBAAqB,CAACM,OAAO;IAChE,IAAIR,UAAU,IAAIE,qBAAqB,EAAE;MACvC,IAAMS,YAAY,GAAGT,qBAAqB,CAACU,qBAAqB,CAAC,CAAC,CAACC,KAAK;MACxEb,UAAU,CAACc,KAAK,CAACH,YAAY,MAAAI,MAAA,CAAMJ,YAAY,OAAI;IACrD;EACF;EAEAK,MAAMA,CAAA,EAAgB;IACpB,IAAM;MACJC,KAAK;MACLC,WAAW;MACXC,cAAc;MACdC,MAAM;MACNC,QAAQ;MACRC,SAAS;MACTC,QAAQ;MACRC,UAAU;MACVC,EAAE;MACFC,SAAS;MACT,aAAa,EAAEC,UAAU;MACzBC;IACF,CAAC,GAAG,IAAI,CAAC9B,KAAK;IAEd,IAAI+B,iBAAiB;IACrB,IAAMC,cAAc,GAAG,CACrB;MACEC,MAAM,EAAEA,CAAA,KAAMH,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEI,IAAI,CAAC,SAAS,CAAC;MACrCC,QAAQ,EAAE7C,gBAAgB,CAAC8C;IAC7B,CAAC,EACD;MACEH,MAAM,EAAEA,CAAA,KAAMH,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEI,IAAI,CAAC,MAAM,CAAC;MAClCC,QAAQ,EAAE7C,gBAAgB,CAAC+C;IAC7B,CAAC,CACF;IAED,IAAIP,MAAM,IAAIJ,UAAU,GAAG,CAAC,EAAE;MAC5BK,iBAAiB,gBACfpC,KAAA,CAAAE,SAAA;QAAAyC,QAAA,gBACE7C,IAAA,CAACJ,MAAM;UACLkD,IAAI,EAAC,OAAO;UACZf,SAAS,EAAC,sBAAsB;UAChCgB,IAAI,EAAC,QAAQ;UACbC,OAAO,EAAEA,CAAA,KAAM;YACbX,MAAM,CAACI,IAAI,CAAC,MAAM,CAAC;UACrB,CAAE;UACFQ,IAAI,EAAEzD,WAAY;UAClB0D,OAAO,qBAAA1B,MAAA,CAAqB3B,gBAAgB,CAAC+C,QAAQ,CAACO,cAAc,CAAC,CAAC;QAAI,CAC3E,CAAC,eACFjD,KAAA;UAAM6B,SAAS,EAAC,oBAAoB;UAAAc,QAAA,GACjCR,MAAM,CAACe,KAAK,KAAKC,SAAS,OAAA7B,MAAA,CAAOa,MAAM,CAACe,KAAK,GAAG,CAAC,SAAM,EACvDnB,UAAU;QAAA,CACP,CAAC,eACPjC,IAAA,CAACJ,MAAM;UACLkD,IAAI,EAAC,OAAO;UACZf,SAAS,EAAC,sBAAsB;UAChCgB,IAAI,EAAC,QAAQ;UACbC,OAAO,EAAEA,CAAA,KAAM;YACbX,MAAM,CAACI,IAAI,CAAC,SAAS,CAAC;UACxB,CAAE;UACFQ,IAAI,EAAExD,YAAa;UACnByD,OAAO,iBAAA1B,MAAA,CAAiB3B,gBAAgB,CAAC8C,IAAI,CAACQ,cAAc,CAAC,CAAC;QAAI,CACnE,CAAC;MAAA,CACF,CACH;IACH,CAAC,MAAM;MACLb,iBAAiB,GAAGL,UAAU,GAAG,CAAC,iBAChCjC,IAAA;QAAM+B,SAAS,EAAC,cAAc;QAAAc,QAAA,EAAEZ;MAAU,CAAO,CAClD;IACH;IAEA,oBACE/B,KAAA;MAAK6B,SAAS,EAAEpC,UAAU,CAAC,cAAc,EAAEoC,SAAS,CAAE;MAAAc,QAAA,gBACpD7C,IAAA;QACE+C,IAAI,EAAC,QAAQ;QACbrB,KAAK,EAAEA,KAAM;QACbG,MAAM,EAAEA,MAAO;QACfC,QAAQ,EAAEA,QAAS;QACnBK,SAAS,EAAEA,SAAU;QACrBJ,SAAS,EAAC,cAAc;QACxBC,QAAQ,EAAEA,QAAS;QACnBL,WAAW,EAAEA,WAAY;QACzB2B,GAAG,EAAE,IAAI,CAAC7C,UAAW;QACrByB,EAAE,EAAEA,EAAG;QACP,eAAaE;MAAW,CACzB,CAAC,EAEDH,UAAU,IAAI,IAAI,gBACjB/B,KAAA,CAAAE,SAAA;QAAAyC,QAAA,gBACE7C,IAAA;UACE+B,SAAS,EAAC,yBAAyB;UACnCuB,GAAG,EAAE,IAAI,CAAC3C,qBAAsB;UAAAkC,QAAA,EAE/BP;QAAiB,CACf,CAAC,eACNtC,IAAA,CAACF,cAAc;UAACyD,OAAO,EAAEhB;QAAe,CAAE,CAAC;MAAA,CAC3C,CAAC,gBAEHrC,KAAA;QAAM6B,SAAS,EAAC,oBAAoB;QAAAc,QAAA,GACjC,CAACjB,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,EAAE,MAAM,EAAE,IAAIF,KAAK,KAAK,EAAE,iBAC5C1B,IAAA;UAAM+B,SAAS,EAAC,wBAAwB;UAAAc,QAAA,EAAEjB;QAAc,CAAO,CAChE,eACD5B,IAAA,CAACT,eAAe;UAAC0D,IAAI,EAAEvD;QAAS,CAAE,CAAC;MAAA,CAC/B,CACP;IAAA,CACE,CAAC;EAEV;AACF;AAACc,eAAA,CApJKH,WAAW,kBACO;EACpBsB,WAAW,EAAE,QAAQ;EACrBI,SAAS,EAAE,EAAE;EACbE,UAAU,EAAE,IAAI;EAChBE,SAASA,CAAA,EAAS;IAChB;EAAA,CACD;EACDD,EAAE,EAAE,EAAE;EACN,aAAa,EAAEmB,SAAS;EACxBhB,MAAM,EAAEgB;AACV,CAAC;AA2IH,eAAehD,WAAW","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchableCombobox.js","names":["useCallback","SpectrumComboBox","Item","TextWithTooltip","jsx","_jsx","SearchableCombobox","_ref","scrollRef","getItemDisplayText","getKey","props","_objectWithoutProperties","_excluded","renderItem","item","key","displayText","textValue","String","children","text","_objectSpread","ref","menuTrigger","onSelectionChange"],"sources":["../src/SearchableCombobox.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport { type Key, useCallback } from 'react';\nimport type { DOMRefValue, FocusableRef } from '@react-types/shared';\nimport { SpectrumComboBox, Item, type SpectrumComboBoxProps } from './spectrum';\nimport TextWithTooltip from './TextWithTooltip';\n\nexport interface SearchableComboboxProps<TItem, TKey extends Key>\n extends Omit<\n SpectrumComboBoxProps<TItem>,\n 'children' | 'menuTrigger' | 'onSelectionChange'\n > {\n getItemDisplayText: (item: TItem | null | undefined) => string | null;\n getKey: (item: TItem | null | undefined) => TKey | null;\n scrollRef: React.RefObject<DOMRefValue>;\n onSelectionChange: (key: TKey | null) => void;\n}\n\nexport function SearchableCombobox<TItem, TKey extends Key>({\n scrollRef,\n getItemDisplayText,\n getKey,\n ...props\n}: SearchableComboboxProps<TItem, TKey>): JSX.Element {\n const renderItem = useCallback(\n item => {\n const key = getKey(item);\n const displayText = getItemDisplayText(item);\n\n return (\n <Item key={key} textValue={displayText ?? String(key)}>\n <TextWithTooltip text={displayText} />\n </Item>\n );\n },\n [getItemDisplayText, getKey]\n );\n\n return (\n <SpectrumComboBox\n {...props}\n // The `ref`prop type defined by React Spectrum is incorrect here\n ref={scrollRef as unknown as FocusableRef<HTMLElement>}\n menuTrigger=\"focus\"\n // Type assertion is necessary since <ComboBox> types don't recognize the\n // generic key arg\n onSelectionChange={props.onSelectionChange as (key: Key | null) => void}\n >\n {renderItem}\n </SpectrumComboBox>\n );\n}\n\nexport default SearchableCombobox;\n"],"mappings":";;;;;;;;AAAA;AACA,SAAmBA,WAAW,QAAQ,OAAO;AAAC,SAErCC,gBAAgB,EAAEC,IAAI;AAAA,OACxBC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAatB,OAAO,SAASC,kBAAkBA,CAAAC,IAAA,EAKoB;EAAA,IALM;MAC1DC,SAAS;MACTC,kBAAkB;MAClBC;IAEoC,CAAC,GAAAH,IAAA;IADlCI,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,IAAMC,UAAU,GAAGd,WAAW,
|
|
1
|
+
{"version":3,"file":"SearchableCombobox.js","names":["useCallback","SpectrumComboBox","Item","TextWithTooltip","jsx","_jsx","SearchableCombobox","_ref","scrollRef","getItemDisplayText","getKey","props","_objectWithoutProperties","_excluded","renderItem","item","key","displayText","textValue","String","children","text","_objectSpread","ref","menuTrigger","onSelectionChange"],"sources":["../src/SearchableCombobox.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport { type Key, useCallback } from 'react';\nimport type { DOMRefValue, FocusableRef } from '@react-types/shared';\nimport { SpectrumComboBox, Item, type SpectrumComboBoxProps } from './spectrum';\nimport TextWithTooltip from './TextWithTooltip';\n\nexport interface SearchableComboboxProps<TItem, TKey extends Key>\n extends Omit<\n SpectrumComboBoxProps<TItem>,\n 'children' | 'menuTrigger' | 'onSelectionChange'\n > {\n getItemDisplayText: (item: TItem | null | undefined) => string | null;\n getKey: (item: TItem | null | undefined) => TKey | null;\n scrollRef: React.RefObject<DOMRefValue>;\n onSelectionChange: (key: TKey | null) => void;\n}\n\nexport function SearchableCombobox<TItem, TKey extends Key>({\n scrollRef,\n getItemDisplayText,\n getKey,\n ...props\n}: SearchableComboboxProps<TItem, TKey>): JSX.Element {\n const renderItem = useCallback(\n (item: TItem) => {\n const key = getKey(item);\n const displayText = getItemDisplayText(item);\n\n return (\n <Item key={key} textValue={displayText ?? String(key)}>\n <TextWithTooltip text={displayText} />\n </Item>\n );\n },\n [getItemDisplayText, getKey]\n );\n\n return (\n <SpectrumComboBox\n {...props}\n // The `ref`prop type defined by React Spectrum is incorrect here\n ref={scrollRef as unknown as FocusableRef<HTMLElement>}\n menuTrigger=\"focus\"\n // Type assertion is necessary since <ComboBox> types don't recognize the\n // generic key arg\n onSelectionChange={props.onSelectionChange as (key: Key | null) => void}\n >\n {renderItem}\n </SpectrumComboBox>\n );\n}\n\nexport default SearchableCombobox;\n"],"mappings":";;;;;;;;AAAA;AACA,SAAmBA,WAAW,QAAQ,OAAO;AAAC,SAErCC,gBAAgB,EAAEC,IAAI;AAAA,OACxBC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAatB,OAAO,SAASC,kBAAkBA,CAAAC,IAAA,EAKoB;EAAA,IALM;MAC1DC,SAAS;MACTC,kBAAkB;MAClBC;IAEoC,CAAC,GAAAH,IAAA;IADlCI,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,IAAMC,UAAU,GAAGd,WAAW,CAC3Be,IAAW,IAAK;IACf,IAAMC,GAAG,GAAGN,MAAM,CAACK,IAAI,CAAC;IACxB,IAAME,WAAW,GAAGR,kBAAkB,CAACM,IAAI,CAAC;IAE5C,oBACEV,IAAA,CAACH,IAAI;MAAWgB,SAAS,EAAED,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAIE,MAAM,CAACH,GAAG,CAAE;MAAAI,QAAA,eACpDf,IAAA,CAACF,eAAe;QAACkB,IAAI,EAAEJ;MAAY,CAAE;IAAC,GAD7BD,GAEL,CAAC;EAEX,CAAC,EACD,CAACP,kBAAkB,EAAEC,MAAM,CAC7B,CAAC;EAED,oBACEL,IAAA,CAACJ,gBAAgB,EAAAqB,aAAA,CAAAA,aAAA,KACXX,KAAK;IACT;IACAY,GAAG,EAAEf,SAAkD;IACvDgB,WAAW,EAAC;IACZ;IACA;IAAA;IACAC,iBAAiB,EAAEd,KAAK,CAACc,iBAA+C;IAAAL,QAAA,EAEvEN;EAAU,EACK,CAAC;AAEvB;AAEA,eAAeR,kBAAkB","ignoreList":[]}
|
package/dist/Select.d.ts
CHANGED
|
@@ -10,6 +10,6 @@ export type SelectProps = baseSelectProps & {
|
|
|
10
10
|
* native select element.
|
|
11
11
|
* @param props.onChange returns a string value and not the event
|
|
12
12
|
*/
|
|
13
|
-
declare const Select: React.ForwardRefExoticComponent<
|
|
13
|
+
declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
|
|
14
14
|
export default Select;
|
|
15
15
|
//# sourceMappingURL=Select.d.ts.map
|
package/dist/Select.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;AAE5E,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AAEH,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;AAE5E,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AAEH,QAAA,MAAM,MAAM,oGAmCX,CAAC;AAIF,eAAe,MAAM,CAAC"}
|
package/dist/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","names":["React","useCallback","classNames","useForwardedRef","jsx","_jsx","Select","forwardRef","props","forwardedRef","children","className","isInvalid","onChange","dataTestId","rest","_objectWithoutProperties","_excluded","ref","handleChange","event","target","value","_objectSpread","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport classNames from 'classnames';\nimport { useForwardedRef } from '@deephaven/react-hooks';\n\ntype baseSelectProps = Omit<React.HTMLProps<HTMLSelectElement>, 'onChange'>;\n\nexport type SelectProps = baseSelectProps & {\n isInvalid?: boolean;\n onChange: (value: string) => void;\n 'data-testid'?: string;\n};\n\n/**\n * A custom select component with styling, which is a wrapper around the\n * native select element.\n * @param props.onChange returns a string value and not the event\n */\n\nconst Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n isInvalid,\n onChange,\n 'data-testid': dataTestId,\n ...rest\n } = props;\n\n const ref = useForwardedRef<HTMLSelectElement>(forwardedRef);\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>): void => {\n onChange(event.target.value);\n },\n [onChange]\n );\n\n return (\n <select\n ref={ref}\n className={classNames('custom-select', className, {\n 'is-invalid': isInvalid,\n })}\n onChange={handleChange}\n data-testid={dataTestId}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...rest}\n >\n {children}\n </select>\n );\n }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAUzD;AACA;AACA;AACA;AACA;;AAEA,IAAMC,MAAM,gBAAGN,KAAK,CAACO,UAAU,CAC7B,CAACC,KAAK,EAAEC,YAAY,KAAK;EACvB,IAAM;MACJC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACR,aAAa,EAAEC;IAEjB,CAAC,GAAGN,KAAK;IADJO,IAAI,GAAAC,wBAAA,CACLR,KAAK,EAAAS,SAAA;EAET,IAAMC,GAAG,GAAGf,eAAe,CAAoBM,YAAY,CAAC;EAE5D,IAAMU,YAAY,GAAGlB,WAAW,CAC7BmB,KAA2C,IAAW;IACrDP,QAAQ,CAACO,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EAC9B,CAAC,EACD,CAACT,QAAQ,CACX,CAAC;EAED,oBACER,IAAA,WAAAkB,aAAA,CAAAA,aAAA;IACEL,GAAG,EAAEA,GAAI;IACTP,SAAS,EAAET,UAAU,CAAC,eAAe,EAAES,SAAS,EAAE;MAChD,YAAY,EAAEC;IAChB,CAAC,CAAE;IACHC,QAAQ,EAAEM,YAAa;IACvB,eAAaL;IACb;EAAA,GACIC,IAAI;IAAAL,QAAA,EAEPA;EAAQ,EACH,CAAC;AAEb,CACF,CAAC;AAEDJ,MAAM,CAACkB,WAAW,GAAG,QAAQ;AAE7B,eAAelB,MAAM"}
|
|
1
|
+
{"version":3,"file":"Select.js","names":["React","useCallback","classNames","useForwardedRef","jsx","_jsx","Select","forwardRef","props","forwardedRef","children","className","isInvalid","onChange","dataTestId","rest","_objectWithoutProperties","_excluded","ref","handleChange","event","target","value","_objectSpread","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport classNames from 'classnames';\nimport { useForwardedRef } from '@deephaven/react-hooks';\n\ntype baseSelectProps = Omit<React.HTMLProps<HTMLSelectElement>, 'onChange'>;\n\nexport type SelectProps = baseSelectProps & {\n isInvalid?: boolean;\n onChange: (value: string) => void;\n 'data-testid'?: string;\n};\n\n/**\n * A custom select component with styling, which is a wrapper around the\n * native select element.\n * @param props.onChange returns a string value and not the event\n */\n\nconst Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n (props, forwardedRef) => {\n const {\n children,\n className,\n isInvalid,\n onChange,\n 'data-testid': dataTestId,\n ...rest\n } = props;\n\n const ref = useForwardedRef<HTMLSelectElement>(forwardedRef);\n\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLSelectElement>): void => {\n onChange(event.target.value);\n },\n [onChange]\n );\n\n return (\n <select\n ref={ref}\n className={classNames('custom-select', className, {\n 'is-invalid': isInvalid,\n })}\n onChange={handleChange}\n data-testid={dataTestId}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...rest}\n >\n {children}\n </select>\n );\n }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAUzD;AACA;AACA;AACA;AACA;;AAEA,IAAMC,MAAM,gBAAGN,KAAK,CAACO,UAAU,CAC7B,CAACC,KAAK,EAAEC,YAAY,KAAK;EACvB,IAAM;MACJC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACR,aAAa,EAAEC;IAEjB,CAAC,GAAGN,KAAK;IADJO,IAAI,GAAAC,wBAAA,CACLR,KAAK,EAAAS,SAAA;EAET,IAAMC,GAAG,GAAGf,eAAe,CAAoBM,YAAY,CAAC;EAE5D,IAAMU,YAAY,GAAGlB,WAAW,CAC7BmB,KAA2C,IAAW;IACrDP,QAAQ,CAACO,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EAC9B,CAAC,EACD,CAACT,QAAQ,CACX,CAAC;EAED,oBACER,IAAA,WAAAkB,aAAA,CAAAA,aAAA;IACEL,GAAG,EAAEA,GAAI;IACTP,SAAS,EAAET,UAAU,CAAC,eAAe,EAAES,SAAS,EAAE;MAChD,YAAY,EAAEC;IAChB,CAAC,CAAE;IACHC,QAAQ,EAAEM,YAAa;IACvB,eAAaL;IACb;EAAA,GACIC,IAAI;IAAAL,QAAA,EAEPA;EAAQ,EACH,CAAC;AAEb,CACF,CAAC;AAEDJ,MAAM,CAACkB,WAAW,GAAG,QAAQ;AAE7B,eAAelB,MAAM","ignoreList":[]}
|
package/dist/SelectValueList.js
CHANGED
|
@@ -21,7 +21,7 @@ class SelectValueList extends PureComponent {
|
|
|
21
21
|
var style = {
|
|
22
22
|
height: rowHeight
|
|
23
23
|
};
|
|
24
|
-
var text = displayValue != null ? displayValue : value;
|
|
24
|
+
var text = displayValue != null ? displayValue : "".concat(value);
|
|
25
25
|
return (
|
|
26
26
|
/*#__PURE__*/
|
|
27
27
|
// Tab index is needed so the item could be a related target in the blur event details
|
|
@@ -45,13 +45,13 @@ class SelectValueList extends PureComponent {
|
|
|
45
45
|
for (var i = 0; i < items.length; i += 1) {
|
|
46
46
|
var item = items[i];
|
|
47
47
|
var {
|
|
48
|
-
value
|
|
48
|
+
value,
|
|
49
49
|
displayValue,
|
|
50
50
|
isSelected
|
|
51
51
|
} = item;
|
|
52
|
-
var
|
|
53
|
-
var key =
|
|
54
|
-
var element = this.getCachedItem(
|
|
52
|
+
var itemIndex = offset + i;
|
|
53
|
+
var key = itemIndex;
|
|
54
|
+
var element = this.getCachedItem(itemIndex, key, value, displayValue, rowHeight, isSelected, disabled);
|
|
55
55
|
itemElements.push(element);
|
|
56
56
|
}
|
|
57
57
|
return itemElements;
|
|
@@ -77,7 +77,7 @@ class SelectValueList extends PureComponent {
|
|
|
77
77
|
var {
|
|
78
78
|
onBlur
|
|
79
79
|
} = this.props;
|
|
80
|
-
onBlur === null || onBlur === void 0
|
|
80
|
+
onBlur === null || onBlur === void 0 || onBlur(e);
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
handleScroll() {
|
|
@@ -93,9 +93,9 @@ class SelectValueList extends PureComponent {
|
|
|
93
93
|
if (visibleItemIndex >= 0 && visibleItemIndex < items.length) {
|
|
94
94
|
var item = items[visibleItemIndex];
|
|
95
95
|
var {
|
|
96
|
-
value
|
|
96
|
+
value
|
|
97
97
|
} = item;
|
|
98
|
-
onSelect(itemIndex,
|
|
98
|
+
onSelect(itemIndex, value);
|
|
99
99
|
} else {
|
|
100
100
|
onSelect(itemIndex, null);
|
|
101
101
|
}
|
|
@@ -127,7 +127,7 @@ class SelectValueList extends PureComponent {
|
|
|
127
127
|
}
|
|
128
128
|
scrollIntoView(index) {
|
|
129
129
|
var element = this.getElement(index);
|
|
130
|
-
element === null || element === void 0
|
|
130
|
+
element === null || element === void 0 || element.scrollIntoView({
|
|
131
131
|
block: 'center'
|
|
132
132
|
});
|
|
133
133
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectValueList.js","names":["React","PureComponent","classNames","memoize","Checkbox","jsx","_jsx","SelectValueList","constructor","props","_defineProperty","itemIndex","key","value","displayValue","rowHeight","isSelected","disabled","style","height","text","className","tabIndex","children","checked","onChange","handleSelect","max","items","offset","itemElements","i","length","item","element","getCachedItem","push","handleBlur","bind","handleScroll","list","createRef","topRow","bottomRow","componentDidMount","sendViewportUpdate","componentDidUpdate","e","relatedTarget","current","HTMLElement","contains","onBlur","onSelect","visibleItemIndex","clientHeight","onViewportChange","top","scrollTop","bottom","Math","floor","ceil","getElement","elements","querySelectorAll","scrollIntoView","index","block","render","isInvalid","itemCount","dataTestId","getCachedItems","onScroll","ref","position","left","undefined"],"sources":["../src/SelectValueList.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport './SelectValueList.scss';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport Checkbox from './Checkbox';\n\nexport interface SelectItem<T> {\n value: T;\n displayValue?: string | JSX.Element;\n isSelected: boolean;\n}\n\ntype SelectValueListProps<T> = {\n className?: string;\n disabled: boolean;\n isInvalid?: boolean;\n // Total item count\n itemCount: number;\n rowHeight: number;\n\n // Offset of the top item in the items array\n offset: number;\n items: SelectItem<T>[];\n\n onBlur?: React.FocusEventHandler<Element>;\n onSelect: (itemIndex: number, value: T | null) => void;\n onViewportChange: (topRow: number, bottomRow: number) => void;\n\n 'data-testid'?: string;\n};\n\n/**\n * Select values from a long scrollable list.\n * Swaps items in and out for infinite scrolling\n */\nclass SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {\n static defaultProps = {\n disabled: false,\n rowHeight: 21,\n onBlur: (): void => undefined,\n 'data-testid': undefined,\n };\n\n constructor(props: SelectValueListProps<T>) {\n super(props);\n\n this.handleBlur = this.handleBlur.bind(this);\n this.handleScroll = this.handleScroll.bind(this);\n this.handleSelect = this.handleSelect.bind(this);\n\n this.list = React.createRef();\n this.topRow = null;\n this.bottomRow = null;\n }\n\n componentDidMount(): void {\n this.sendViewportUpdate();\n }\n\n componentDidUpdate(): void {\n this.sendViewportUpdate();\n }\n\n list: React.RefObject<HTMLDivElement>;\n\n topRow: number | null;\n\n bottomRow: number | null;\n\n getCachedItem = memoize(\n (\n itemIndex: number,\n key: number,\n value: T,\n displayValue: string | JSX.Element | undefined,\n rowHeight: number,\n isSelected: boolean,\n disabled: boolean\n ): JSX.Element => {\n const style = {\n height: rowHeight,\n };\n const text = displayValue != null ? displayValue : value;\n\n return (\n // Tab index is needed so the item could be a related target in the blur event details\n <li className=\"value-list-item\" style={style} key={key} tabIndex={-1}>\n <Checkbox\n checked={isSelected}\n disabled={disabled}\n onChange={() => this.handleSelect(itemIndex)}\n >\n {text}\n </Checkbox>\n </li>\n );\n },\n { max: 1000 }\n );\n\n getCachedItems = memoize(\n (\n items: SelectItem<T>[],\n rowHeight: number,\n offset: number,\n disabled: boolean\n ): React.ReactNode => {\n const itemElements: JSX.Element[] = [];\n for (let i = 0; i < items.length; i += 1) {\n const item = items[i];\n const { value, displayValue, isSelected } = item;\n const itemIndex = offset + i;\n const key = itemIndex;\n const element = this.getCachedItem(\n itemIndex,\n key,\n value,\n displayValue,\n rowHeight,\n isSelected,\n disabled\n );\n itemElements.push(element);\n }\n return itemElements;\n },\n { max: 1 }\n );\n\n handleBlur(e: React.FocusEvent): void {\n if (\n !e.relatedTarget ||\n (this.list.current &&\n e.relatedTarget instanceof HTMLElement &&\n !this.list.current.contains(e.relatedTarget))\n ) {\n // Next focused element is outside of the list\n const { onBlur } = this.props;\n onBlur?.(e);\n }\n }\n\n handleScroll(): void {\n this.sendViewportUpdate();\n }\n\n handleSelect(itemIndex: number): void {\n const { items, offset, onSelect } = this.props;\n const visibleItemIndex = itemIndex - offset;\n if (visibleItemIndex >= 0 && visibleItemIndex < items.length) {\n const item = items[visibleItemIndex];\n const { value } = item;\n onSelect(itemIndex, value);\n } else {\n onSelect(itemIndex, null);\n }\n }\n\n sendViewportUpdate(): void {\n if (!this.list.current || this.list.current.clientHeight === 0) {\n return;\n }\n\n const { onViewportChange, rowHeight } = this.props;\n const top = this.list.current.scrollTop;\n const bottom = top + this.list.current.clientHeight;\n\n const topRow = Math.floor(top / rowHeight);\n const bottomRow = Math.ceil(bottom / rowHeight);\n\n if (this.topRow !== topRow || this.bottomRow !== bottomRow) {\n this.topRow = topRow;\n this.bottomRow = bottomRow;\n onViewportChange(topRow, bottomRow);\n }\n }\n\n getElement(itemIndex: number): Element | null {\n if (this.list.current == null) {\n return null;\n }\n const elements = this.list.current.querySelectorAll('.value-list-item');\n return elements[itemIndex];\n }\n\n scrollIntoView(index: number): void {\n const element = this.getElement(index);\n element?.scrollIntoView({ block: 'center' });\n }\n\n render(): JSX.Element {\n const {\n className,\n disabled,\n isInvalid,\n items,\n itemCount,\n offset,\n rowHeight,\n 'data-testid': dataTestId,\n } = this.props;\n const itemElements = this.getCachedItems(\n items,\n rowHeight,\n offset,\n disabled\n );\n\n return (\n <div\n className={classNames(\n 'select-value-list-scroll-pane h-100 w-100',\n { 'is-invalid': isInvalid },\n className\n )}\n onBlur={this.handleBlur}\n onScroll={this.handleScroll}\n ref={this.list}\n data-testid={dataTestId}\n >\n <div\n className=\"select-value-list\"\n style={{ height: itemCount * rowHeight }}\n >\n <ol\n className=\"select-value-list-content\"\n style={{\n position: 'absolute',\n height: items.length * rowHeight,\n top: offset * rowHeight,\n left: 0,\n }}\n >\n {itemElements}\n </ol>\n </div>\n </div>\n );\n }\n}\n\nexport default SelectValueList;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectValueList.js","names":["React","PureComponent","classNames","memoize","Checkbox","jsx","_jsx","SelectValueList","constructor","props","_defineProperty","itemIndex","key","value","displayValue","rowHeight","isSelected","disabled","style","height","text","concat","className","tabIndex","children","checked","onChange","handleSelect","max","items","offset","itemElements","i","length","item","element","getCachedItem","push","handleBlur","bind","handleScroll","list","createRef","topRow","bottomRow","componentDidMount","sendViewportUpdate","componentDidUpdate","e","relatedTarget","current","HTMLElement","contains","onBlur","onSelect","visibleItemIndex","clientHeight","onViewportChange","top","scrollTop","bottom","Math","floor","ceil","getElement","elements","querySelectorAll","scrollIntoView","index","block","render","isInvalid","itemCount","dataTestId","getCachedItems","onScroll","ref","position","left","undefined"],"sources":["../src/SelectValueList.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport './SelectValueList.scss';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport Checkbox from './Checkbox';\n\nexport interface SelectItem<T> {\n value: T;\n displayValue?: string | JSX.Element;\n isSelected: boolean;\n}\n\ntype SelectValueListProps<T> = {\n className?: string;\n disabled: boolean;\n isInvalid?: boolean;\n // Total item count\n itemCount: number;\n rowHeight: number;\n\n // Offset of the top item in the items array\n offset: number;\n items: SelectItem<T>[];\n\n onBlur?: React.FocusEventHandler<Element>;\n onSelect: (itemIndex: number, value: T | null) => void;\n onViewportChange: (topRow: number, bottomRow: number) => void;\n\n 'data-testid'?: string;\n};\n\n/**\n * Select values from a long scrollable list.\n * Swaps items in and out for infinite scrolling\n */\nclass SelectValueList<T> extends PureComponent<SelectValueListProps<T>> {\n static defaultProps = {\n disabled: false,\n rowHeight: 21,\n onBlur: (): void => undefined,\n 'data-testid': undefined,\n };\n\n constructor(props: SelectValueListProps<T>) {\n super(props);\n\n this.handleBlur = this.handleBlur.bind(this);\n this.handleScroll = this.handleScroll.bind(this);\n this.handleSelect = this.handleSelect.bind(this);\n\n this.list = React.createRef();\n this.topRow = null;\n this.bottomRow = null;\n }\n\n componentDidMount(): void {\n this.sendViewportUpdate();\n }\n\n componentDidUpdate(): void {\n this.sendViewportUpdate();\n }\n\n list: React.RefObject<HTMLDivElement>;\n\n topRow: number | null;\n\n bottomRow: number | null;\n\n getCachedItem = memoize(\n (\n itemIndex: number,\n key: number,\n value: T,\n displayValue: string | JSX.Element | undefined,\n rowHeight: number,\n isSelected: boolean,\n disabled: boolean\n ): JSX.Element => {\n const style = {\n height: rowHeight,\n };\n const text = displayValue != null ? displayValue : `${value}`;\n\n return (\n // Tab index is needed so the item could be a related target in the blur event details\n <li className=\"value-list-item\" style={style} key={key} tabIndex={-1}>\n <Checkbox\n checked={isSelected}\n disabled={disabled}\n onChange={() => this.handleSelect(itemIndex)}\n >\n {text}\n </Checkbox>\n </li>\n );\n },\n { max: 1000 }\n );\n\n getCachedItems = memoize(\n (\n items: SelectItem<T>[],\n rowHeight: number,\n offset: number,\n disabled: boolean\n ): React.ReactNode => {\n const itemElements: JSX.Element[] = [];\n for (let i = 0; i < items.length; i += 1) {\n const item = items[i];\n const { value, displayValue, isSelected } = item;\n const itemIndex = offset + i;\n const key = itemIndex;\n const element = this.getCachedItem(\n itemIndex,\n key,\n value,\n displayValue,\n rowHeight,\n isSelected,\n disabled\n );\n itemElements.push(element);\n }\n return itemElements;\n },\n { max: 1 }\n );\n\n handleBlur(e: React.FocusEvent): void {\n if (\n !e.relatedTarget ||\n (this.list.current &&\n e.relatedTarget instanceof HTMLElement &&\n !this.list.current.contains(e.relatedTarget))\n ) {\n // Next focused element is outside of the list\n const { onBlur } = this.props;\n onBlur?.(e);\n }\n }\n\n handleScroll(): void {\n this.sendViewportUpdate();\n }\n\n handleSelect(itemIndex: number): void {\n const { items, offset, onSelect } = this.props;\n const visibleItemIndex = itemIndex - offset;\n if (visibleItemIndex >= 0 && visibleItemIndex < items.length) {\n const item = items[visibleItemIndex];\n const { value } = item;\n onSelect(itemIndex, value);\n } else {\n onSelect(itemIndex, null);\n }\n }\n\n sendViewportUpdate(): void {\n if (!this.list.current || this.list.current.clientHeight === 0) {\n return;\n }\n\n const { onViewportChange, rowHeight } = this.props;\n const top = this.list.current.scrollTop;\n const bottom = top + this.list.current.clientHeight;\n\n const topRow = Math.floor(top / rowHeight);\n const bottomRow = Math.ceil(bottom / rowHeight);\n\n if (this.topRow !== topRow || this.bottomRow !== bottomRow) {\n this.topRow = topRow;\n this.bottomRow = bottomRow;\n onViewportChange(topRow, bottomRow);\n }\n }\n\n getElement(itemIndex: number): Element | null {\n if (this.list.current == null) {\n return null;\n }\n const elements = this.list.current.querySelectorAll('.value-list-item');\n return elements[itemIndex];\n }\n\n scrollIntoView(index: number): void {\n const element = this.getElement(index);\n element?.scrollIntoView({ block: 'center' });\n }\n\n render(): JSX.Element {\n const {\n className,\n disabled,\n isInvalid,\n items,\n itemCount,\n offset,\n rowHeight,\n 'data-testid': dataTestId,\n } = this.props;\n const itemElements = this.getCachedItems(\n items,\n rowHeight,\n offset,\n disabled\n );\n\n return (\n <div\n className={classNames(\n 'select-value-list-scroll-pane h-100 w-100',\n { 'is-invalid': isInvalid },\n className\n )}\n onBlur={this.handleBlur}\n onScroll={this.handleScroll}\n ref={this.list}\n data-testid={dataTestId}\n >\n <div\n className=\"select-value-list\"\n style={{ height: itemCount * rowHeight }}\n >\n <ol\n className=\"select-value-list-content\"\n style={{\n position: 'absolute',\n height: items.length * rowHeight,\n top: offset * rowHeight,\n left: 0,\n }}\n >\n {itemElements}\n </ol>\n </div>\n </div>\n );\n }\n}\n\nexport default SelectValueList;\n"],"mappings":"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","ignoreList":[]}
|
package/dist/SocketedButton.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './SocketedButton.scss';
|
|
3
|
-
|
|
4
|
-
children?: React.ReactNode;
|
|
3
|
+
declare const SocketedButton: React.ForwardRefExoticComponent<{
|
|
5
4
|
className?: string;
|
|
6
5
|
disabled?: boolean;
|
|
7
6
|
id?: string;
|
|
@@ -13,7 +12,8 @@ type SocketedButtonProps = {
|
|
|
13
12
|
onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
|
|
14
13
|
style?: React.CSSProperties;
|
|
15
14
|
'data-testid'?: string;
|
|
16
|
-
}
|
|
17
|
-
|
|
15
|
+
} & {
|
|
16
|
+
children?: React.ReactNode | undefined;
|
|
17
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
18
18
|
export default SocketedButton;
|
|
19
19
|
//# sourceMappingURL=SocketedButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SocketedButton.d.ts","sourceRoot":"","sources":["../src/SocketedButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"SocketedButton.d.ts","sourceRoot":"","sources":["../src/SocketedButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,uBAAuB,CAAC;AAgB/B,QAAA,MAAM,cAAc;gBAbN,MAAM;eACP,OAAO;SACb,MAAM;eACA,OAAO;qBACD,OAAO;gBACZ,OAAO;cACT,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;mBACrC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;mBAC1C,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;YACjD,KAAK,CAAC,aAAa;oBACX,MAAM;;;2CAkEvB,CAAC;AAIF,eAAe,cAAc,CAAC"}
|