@deephaven/components 0.15.6-vite.21 → 0.15.7-beta.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.
Files changed (91) hide show
  1. package/dist/AutoCompleteInput.js.map +1 -1
  2. package/dist/AutoResizeTextarea.js.map +1 -1
  3. package/dist/BaseStyleSheet.css +11560 -0
  4. package/dist/BaseStyleSheet.css.map +1 -0
  5. package/dist/BasicModal.js.map +1 -1
  6. package/dist/Button.js.map +1 -1
  7. package/dist/ButtonGroup.js.map +1 -1
  8. package/dist/ButtonOld.js.map +1 -1
  9. package/dist/CardFlip.js.map +1 -1
  10. package/dist/Checkbox.js.map +1 -1
  11. package/dist/Collapse.js.map +1 -1
  12. package/dist/ComboBox.js.map +1 -1
  13. package/dist/CustomTimeSelect.d.ts +2 -2
  14. package/dist/CustomTimeSelect.d.ts.map +1 -1
  15. package/dist/CustomTimeSelect.js +0 -1
  16. package/dist/CustomTimeSelect.js.map +1 -1
  17. package/dist/DebouncedSearchInput.js.map +1 -1
  18. package/dist/DeephavenSpinner.js.map +1 -1
  19. package/dist/DragUtils.js.map +1 -1
  20. package/dist/DraggableItemList.js +1 -1
  21. package/dist/DraggableItemList.js.map +1 -1
  22. package/dist/HierarchicalCheckboxMenu.js.map +1 -1
  23. package/dist/ItemList.js +1 -1
  24. package/dist/ItemList.js.map +1 -1
  25. package/dist/ItemListItem.js.map +1 -1
  26. package/dist/LoadingOverlay.js.map +1 -1
  27. package/dist/LoadingSpinner.js.map +1 -1
  28. package/dist/MaskedInput.d.ts.map +1 -1
  29. package/dist/MaskedInput.js +22 -9
  30. package/dist/MaskedInput.js.map +1 -1
  31. package/dist/Option.js.map +1 -1
  32. package/dist/RadioGroup.js.map +1 -1
  33. package/dist/RadioItem.js.map +1 -1
  34. package/dist/SearchInput.js.map +1 -1
  35. package/dist/Select.js.map +1 -1
  36. package/dist/SelectValueList.js.map +1 -1
  37. package/dist/SocketedButton.js.map +1 -1
  38. package/dist/ThemeExport.js.map +1 -1
  39. package/dist/TimeInput.d.ts +8 -1
  40. package/dist/TimeInput.d.ts.map +1 -1
  41. package/dist/TimeInput.js +24 -6
  42. package/dist/TimeInput.js.map +1 -1
  43. package/dist/TimeSlider.d.ts.map +1 -1
  44. package/dist/TimeSlider.js +37 -6
  45. package/dist/TimeSlider.js.map +1 -1
  46. package/dist/ToastNotification.js.map +1 -1
  47. package/dist/UISwitch.js.map +1 -1
  48. package/dist/ValidateLabelInput.css +8 -0
  49. package/dist/ValidateLabelInput.css.map +1 -0
  50. package/dist/ValidateLabelInput.d.ts +28 -0
  51. package/dist/ValidateLabelInput.d.ts.map +1 -0
  52. package/dist/ValidateLabelInput.js +50 -0
  53. package/dist/ValidateLabelInput.js.map +1 -0
  54. package/dist/context-actions/ContextActionUtils.js.map +1 -1
  55. package/dist/context-actions/ContextActions.js.map +1 -1
  56. package/dist/context-actions/ContextMenu.js.map +1 -1
  57. package/dist/context-actions/ContextMenuItem.js.map +1 -1
  58. package/dist/context-actions/ContextMenuRoot.js.map +1 -1
  59. package/dist/context-actions/GlobalContextAction.js.map +1 -1
  60. package/dist/context-actions/GlobalContextActions.js.map +1 -1
  61. package/dist/context-actions/index.js.map +1 -1
  62. package/dist/declaration.d.js.map +1 -1
  63. package/dist/index.d.ts +2 -1
  64. package/dist/index.d.ts.map +1 -1
  65. package/dist/index.js +2 -1
  66. package/dist/index.js.map +1 -1
  67. package/dist/menu-actions/DropdownMenu.js.map +1 -1
  68. package/dist/menu-actions/Menu.js.map +1 -1
  69. package/dist/menu-actions/index.js.map +1 -1
  70. package/dist/modal/Modal.js.map +1 -1
  71. package/dist/modal/ModalBody.js.map +1 -1
  72. package/dist/modal/ModalFooter.js.map +1 -1
  73. package/dist/modal/ModalHeader.js.map +1 -1
  74. package/dist/modal/index.js.map +1 -1
  75. package/dist/navigation/Menu.js.map +1 -1
  76. package/dist/navigation/MenuItem.js.map +1 -1
  77. package/dist/navigation/Page.js.map +1 -1
  78. package/dist/navigation/Stack.js.map +1 -1
  79. package/dist/navigation/index.js.map +1 -1
  80. package/dist/popper/Popper.js.map +1 -1
  81. package/dist/popper/Tooltip.d.ts +2 -0
  82. package/dist/popper/Tooltip.d.ts.map +1 -1
  83. package/dist/popper/Tooltip.js +4 -1
  84. package/dist/popper/Tooltip.js.map +1 -1
  85. package/dist/popper/index.js.map +1 -1
  86. package/dist/shortcuts/GlobalShortcuts.js.map +1 -1
  87. package/dist/shortcuts/Shortcut.js.map +1 -1
  88. package/dist/shortcuts/ShortcutRegistry.js.map +1 -1
  89. package/dist/shortcuts/index.js.map +1 -1
  90. package/package.json +9 -9
  91. package/scss/BaseStyleSheet.scss +0 -847
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.js","names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","SearchInput","constructor","props","inputField","createRef","focus","current","render","value","placeholder","onChange","className","matchCount","id","onKeyDown","dataTestId","undefined"],"sources":["../src/SearchInput.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport './SearchInput.scss';\n\ninterface SearchInputProps {\n value: string;\n placeholder: string;\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n className: string;\n matchCount: number;\n id: string;\n 'data-testid'?: string;\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 };\n\n constructor(props: SearchInputProps) {\n super(props);\n this.inputField = React.createRef();\n }\n\n inputField: React.RefObject<HTMLInputElement>;\n\n focus(): void {\n this.inputField.current?.focus();\n }\n\n render(): JSX.Element {\n const {\n value,\n placeholder,\n onChange,\n className,\n matchCount,\n id,\n onKeyDown,\n 'data-testid': dataTestId,\n } = this.props;\n return (\n <div className={classNames('search-group', className)}>\n <input\n type=\"search\"\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n className=\"form-control\"\n placeholder={placeholder}\n ref={this.inputField}\n id={id}\n data-testid={dataTestId}\n />\n {matchCount != null && (\n <span className=\"search-match\">{matchCount}</span>\n )}\n <span className=\"search-icon\">\n <FontAwesomeIcon icon={vsSearch} />\n </span>\n </div>\n );\n }\n}\n\nexport default SearchInput;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,aAAhB,QAAqC,OAArC;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,QAAT,QAAyB,kBAAzB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;AAcA,MAAMC,WAAN,SAA0BJ,aAA1B,CAA0D;EAYxDK,WAAW,CAACC,KAAD,EAA0B;IACnC,MAAMA,KAAN;;IADmC;;IAEnC,KAAKC,UAAL,gBAAkBR,KAAK,CAACS,SAAN,EAAlB;EACD;;EAIDC,KAAK,GAAS;IAAA;;IACZ,8BAAKF,UAAL,CAAgBG,OAAhB,gFAAyBD,KAAzB;EACD;;EAEDE,MAAM,GAAgB;IACpB,IAAM;MACJC,KADI;MAEJC,WAFI;MAGJC,QAHI;MAIJC,SAJI;MAKJC,UALI;MAMJC,EANI;MAOJC,SAPI;MAQJ,eAAeC;IARX,IASF,KAAKb,KATT;IAUA,oBACE;MAAK,SAAS,EAAEH,UAAU,CAAC,cAAD,EAAiBY,SAAjB;IAA1B,gBACE;MACE,IAAI,EAAC,QADP;MAEE,KAAK,EAAEH,KAFT;MAGE,QAAQ,EAAEE,QAHZ;MAIE,SAAS,EAAEI,SAJb;MAKE,SAAS,EAAC,cALZ;MAME,WAAW,EAAEL,WANf;MAOE,GAAG,EAAE,KAAKN,UAPZ;MAQE,EAAE,EAAEU,EARN;MASE,eAAaE;IATf,EADF,EAYGH,UAAU,IAAI,IAAd,iBACC;MAAM,SAAS,EAAC;IAAhB,GAAgCA,UAAhC,CAbJ,eAeE;MAAM,SAAS,EAAC;IAAhB,gBACE,oBAAC,eAAD;MAAiB,IAAI,EAAEd;IAAvB,EADF,CAfF,CADF;EAqBD;;AAvDuD;;gBAApDE,W,kBACkB;EACpBS,WAAW,EAAE,QADO;EAEpBE,SAAS,EAAE,EAFS;EAGpBC,UAAU,EAAE,IAHQ;;EAIpBE,SAAS,GAAS,CAChB;EACD,CANmB;;EAOpBD,EAAE,EAAE,EAPgB;EAQpB,eAAeG;AARK,C;;AAyDxB,eAAehB,WAAf"}
1
+ {"version":3,"sources":["../src/SearchInput.tsx"],"names":["React","PureComponent","FontAwesomeIcon","vsSearch","classNames","SearchInput","constructor","props","inputField","createRef","focus","current","render","value","placeholder","onChange","className","matchCount","id","onKeyDown","dataTestId","undefined"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,aAAhB,QAAqC,OAArC;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,QAAT,QAAyB,kBAAzB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;AAcA,MAAMC,WAAN,SAA0BJ,aAA1B,CAA0D;AAYxDK,EAAAA,WAAW,CAACC,KAAD,EAA0B;AACnC,UAAMA,KAAN;;AADmC;;AAEnC,SAAKC,UAAL,gBAAkBR,KAAK,CAACS,SAAN,EAAlB;AACD;;AAIDC,EAAAA,KAAK,GAAS;AAAA;;AACZ,kCAAKF,UAAL,CAAgBG,OAAhB,gFAAyBD,KAAzB;AACD;;AAEDE,EAAAA,MAAM,GAAgB;AACpB,QAAM;AACJC,MAAAA,KADI;AAEJC,MAAAA,WAFI;AAGJC,MAAAA,QAHI;AAIJC,MAAAA,SAJI;AAKJC,MAAAA,UALI;AAMJC,MAAAA,EANI;AAOJC,MAAAA,SAPI;AAQJ,qBAAeC;AARX,QASF,KAAKb,KATT;AAUA,wBACE;AAAK,MAAA,SAAS,EAAEH,UAAU,CAAC,cAAD,EAAiBY,SAAjB;AAA1B,oBACE;AACE,MAAA,IAAI,EAAC,QADP;AAEE,MAAA,KAAK,EAAEH,KAFT;AAGE,MAAA,QAAQ,EAAEE,QAHZ;AAIE,MAAA,SAAS,EAAEI,SAJb;AAKE,MAAA,SAAS,EAAC,cALZ;AAME,MAAA,WAAW,EAAEL,WANf;AAOE,MAAA,GAAG,EAAE,KAAKN,UAPZ;AAQE,MAAA,EAAE,EAAEU,EARN;AASE,qBAAaE;AATf,MADF,EAYGH,UAAU,IAAI,IAAd,iBACC;AAAM,MAAA,SAAS,EAAC;AAAhB,OAAgCA,UAAhC,CAbJ,eAeE;AAAM,MAAA,SAAS,EAAC;AAAhB,oBACE,oBAAC,eAAD;AAAiB,MAAA,IAAI,EAAEd;AAAvB,MADF,CAfF,CADF;AAqBD;;AAvDuD;;gBAApDE,W,kBACkB;AACpBS,EAAAA,WAAW,EAAE,QADO;AAEpBE,EAAAA,SAAS,EAAE,EAFS;AAGpBC,EAAAA,UAAU,EAAE,IAHQ;;AAIpBE,EAAAA,SAAS,GAAS,CAChB;AACD,GANmB;;AAOpBD,EAAAA,EAAE,EAAE,EAPgB;AAQpB,iBAAeG;AARK,C;;AAyDxB,eAAehB,WAAf","sourcesContent":["import React, { PureComponent } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsSearch } from '@deephaven/icons';\nimport classNames from 'classnames';\nimport './SearchInput.scss';\n\ninterface SearchInputProps {\n value: string;\n placeholder: string;\n onChange: React.ChangeEventHandler<HTMLInputElement>;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n className: string;\n matchCount: number;\n id: string;\n 'data-testid'?: string;\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 };\n\n constructor(props: SearchInputProps) {\n super(props);\n this.inputField = React.createRef();\n }\n\n inputField: React.RefObject<HTMLInputElement>;\n\n focus(): void {\n this.inputField.current?.focus();\n }\n\n render(): JSX.Element {\n const {\n value,\n placeholder,\n onChange,\n className,\n matchCount,\n id,\n onKeyDown,\n 'data-testid': dataTestId,\n } = this.props;\n return (\n <div className={classNames('search-group', className)}>\n <input\n type=\"search\"\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n className=\"form-control\"\n placeholder={placeholder}\n ref={this.inputField}\n id={id}\n data-testid={dataTestId}\n />\n {matchCount != null && (\n <span className=\"search-match\">{matchCount}</span>\n )}\n <span className=\"search-icon\">\n <FontAwesomeIcon icon={vsSearch} />\n </span>\n </div>\n );\n }\n}\n\nexport default SearchInput;\n"],"file":"SearchInput.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","names":["React","useCallback","classNames","Select","children","onChange","className","defaultValue","value","disabled","dataTestId","handleChange","event","target"],"sources":["../src/Select.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport classNames from 'classnames';\n\nexport type SelectProps = {\n children: React.ReactNode;\n onChange: (value: string) => void;\n className?: string;\n defaultValue?: string;\n value?: string;\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\nconst Select = ({\n children,\n onChange,\n className,\n defaultValue,\n value,\n disabled,\n 'data-testid': dataTestId,\n}: SelectProps): JSX.Element => {\n const handleChange = useCallback(\n event => {\n onChange(event.target.value);\n },\n [onChange]\n );\n\n return (\n <select\n className={classNames('custom-select', className)}\n onChange={handleChange}\n defaultValue={defaultValue}\n value={value}\n disabled={disabled}\n data-testid={dataTestId}\n >\n {children}\n </select>\n );\n};\n\nexport default Select;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,OAAOC,UAAP,MAAuB,YAAvB;;AAYA,IAAMC,MAAM,GAAG,QAQiB;EAAA,IARhB;IACdC,QADc;IAEdC,QAFc;IAGdC,SAHc;IAIdC,YAJc;IAKdC,KALc;IAMdC,QANc;IAOd,eAAeC;EAPD,CAQgB;EAC9B,IAAMC,YAAY,GAAGV,WAAW,CAC9BW,KAAK,IAAI;IACPP,QAAQ,CAACO,KAAK,CAACC,MAAN,CAAaL,KAAd,CAAR;EACD,CAH6B,EAI9B,CAACH,QAAD,CAJ8B,CAAhC;EAOA,oBACE;IACE,SAAS,EAAEH,UAAU,CAAC,eAAD,EAAkBI,SAAlB,CADvB;IAEE,QAAQ,EAAEK,YAFZ;IAGE,YAAY,EAAEJ,YAHhB;IAIE,KAAK,EAAEC,KAJT;IAKE,QAAQ,EAAEC,QALZ;IAME,eAAaC;EANf,GAQGN,QARH,CADF;AAYD,CA5BD;;AA8BA,eAAeD,MAAf"}
1
+ {"version":3,"sources":["../src/Select.tsx"],"names":["React","useCallback","classNames","Select","children","onChange","className","defaultValue","value","disabled","dataTestId","handleChange","event","target"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,QAAmC,OAAnC;AACA,OAAOC,UAAP,MAAuB,YAAvB;;AAYA,IAAMC,MAAM,GAAG,QAQiB;AAAA,MARhB;AACdC,IAAAA,QADc;AAEdC,IAAAA,QAFc;AAGdC,IAAAA,SAHc;AAIdC,IAAAA,YAJc;AAKdC,IAAAA,KALc;AAMdC,IAAAA,QANc;AAOd,mBAAeC;AAPD,GAQgB;AAC9B,MAAMC,YAAY,GAAGV,WAAW,CAC9BW,KAAK,IAAI;AACPP,IAAAA,QAAQ,CAACO,KAAK,CAACC,MAAN,CAAaL,KAAd,CAAR;AACD,GAH6B,EAI9B,CAACH,QAAD,CAJ8B,CAAhC;AAOA,sBACE;AACE,IAAA,SAAS,EAAEH,UAAU,CAAC,eAAD,EAAkBI,SAAlB,CADvB;AAEE,IAAA,QAAQ,EAAEK,YAFZ;AAGE,IAAA,YAAY,EAAEJ,YAHhB;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,QAAQ,EAAEC,QALZ;AAME,mBAAaC;AANf,KAQGN,QARH,CADF;AAYD,CA5BD;;AA8BA,eAAeD,MAAf","sourcesContent":["import React, { useCallback } from 'react';\nimport classNames from 'classnames';\n\nexport type SelectProps = {\n children: React.ReactNode;\n onChange: (value: string) => void;\n className?: string;\n defaultValue?: string;\n value?: string;\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\nconst Select = ({\n children,\n onChange,\n className,\n defaultValue,\n value,\n disabled,\n 'data-testid': dataTestId,\n}: SelectProps): JSX.Element => {\n const handleChange = useCallback(\n event => {\n onChange(event.target.value);\n },\n [onChange]\n );\n\n return (\n <select\n className={classNames('custom-select', className)}\n onChange={handleChange}\n defaultValue={defaultValue}\n value={value}\n disabled={disabled}\n data-testid={dataTestId}\n >\n {children}\n </select>\n );\n};\n\nexport default Select;\n"],"file":"Select.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"SelectValueList.js","names":["React","PureComponent","memoize","Checkbox","SelectValueList","constructor","props","itemIndex","key","value","displayValue","rowHeight","isSelected","disabled","style","height","text","handleSelect","max","items","offset","itemElements","i","length","item","element","getCachedItem","push","handleScroll","bind","list","createRef","topRow","bottomRow","componentDidMount","sendViewportUpdate","componentDidUpdate","onSelect","visibleItemIndex","current","clientHeight","onViewportChange","top","scrollTop","bottom","Math","floor","ceil","render","itemCount","dataTestId","getCachedItems","position","left","undefined"],"sources":["../src/SelectValueList.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport './SelectValueList.scss';\nimport memoize from 'memoizee';\nimport Checkbox from './Checkbox';\n\nexport interface SelectItem<T> {\n value: T;\n displayValue?: string;\n isSelected: boolean;\n}\n\ntype SelectValueListProps<T> = {\n disabled: 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 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 'data-testid': undefined,\n };\n\n constructor(props: SelectValueListProps<T>) {\n super(props);\n\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 | 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 <li className=\"value-list-item\" style={style} key={key}>\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 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 render(): JSX.Element {\n const {\n disabled,\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=\"select-value-list-scroll-pane h-100 w-100\"\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":";;AAAA,OAAOA,KAAP,IAAgBC,aAAhB,QAAqC,OAArC;;AAEA,OAAOC,OAAP,MAAoB,UAApB;OACOC,Q;;AAwBP;AACA;AACA;AACA;AACA,MAAMC,eAAN,SAAiCH,aAAjC,CAAwE;EAOtEI,WAAW,CAACC,KAAD,EAAiC;IAC1C,MAAMA,KAAN;;IAD0C;;IAAA;;IAAA;;IAAA,uCAyB5BJ,OAAO,CACrB,CACEK,SADF,EAEEC,GAFF,EAGEC,KAHF,EAIEC,YAJF,EAKEC,SALF,EAMEC,UANF,EAOEC,QAPF,KAQkB;MAChB,IAAMC,KAAK,GAAG;QACZC,MAAM,EAAEJ;MADI,CAAd;MAGA,IAAMK,IAAI,GAAGN,YAAY,IAAI,IAAhB,GAAuBA,YAAvB,GAAsCD,KAAnD;MAEA,oBACE;QAAI,SAAS,EAAC,iBAAd;QAAgC,KAAK,EAAEK,KAAvC;QAA8C,GAAG,EAAEN;MAAnD,gBACE,oBAAC,QAAD;QACE,OAAO,EAAEI,UADX;QAEE,QAAQ,EAAEC,QAFZ;QAGE,QAAQ,EAAE,MAAM,KAAKI,YAAL,CAAkBV,SAAlB;MAHlB,GAKGS,IALH,CADF,CADF;IAWD,CA1BoB,EA2BrB;MAAEE,GAAG,EAAE;IAAP,CA3BqB,CAzBqB;;IAAA,wCAuD3BhB,OAAO,CACtB,CACEiB,KADF,EAEER,SAFF,EAGES,MAHF,EAIEP,QAJF,KAKsB;MACpB,IAAMQ,YAA2B,GAAG,EAApC;;MACA,KAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,IAAI,CAAvC,EAA0C;QACxC,IAAME,IAAI,GAAGL,KAAK,CAACG,CAAD,CAAlB;QACA,IAAM;UAAEb,KAAK,EAALA,MAAF;UAASC,YAAT;UAAuBE;QAAvB,IAAsCY,IAA5C;;QACA,IAAMjB,UAAS,GAAGa,MAAM,GAAGE,CAA3B;;QACA,IAAMd,GAAG,GAAGD,UAAZ;QACA,IAAMkB,OAAO,GAAG,KAAKC,aAAL,CACdnB,UADc,EAEdC,GAFc,EAGdC,MAHc,EAIdC,YAJc,EAKdC,SALc,EAMdC,UANc,EAOdC,QAPc,CAAhB;QASAQ,YAAY,CAACM,IAAb,CAAkBF,OAAlB;MACD;;MACD,OAAOJ,YAAP;IACD,CAzBqB,EA0BtB;MAAEH,GAAG,EAAE;IAAP,CA1BsB,CAvDoB;;IAG1C,KAAKU,YAAL,GAAoB,KAAKA,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB,CAApB;IACA,KAAKZ,YAAL,GAAoB,KAAKA,YAAL,CAAkBY,IAAlB,CAAuB,IAAvB,CAApB;IAEA,KAAKC,IAAL,gBAAY9B,KAAK,CAAC+B,SAAN,EAAZ;IACA,KAAKC,MAAL,GAAc,IAAd;IACA,KAAKC,SAAL,GAAiB,IAAjB;EACD;;EAEDC,iBAAiB,GAAS;IACxB,KAAKC,kBAAL;EACD;;EAEDC,kBAAkB,GAAS;IACzB,KAAKD,kBAAL;EACD;;EAmEDP,YAAY,GAAS;IACnB,KAAKO,kBAAL;EACD;;EAEDlB,YAAY,CAACV,SAAD,EAA0B;IACpC,IAAM;MAAEY,KAAF;MAASC,MAAT;MAAiBiB;IAAjB,IAA8B,KAAK/B,KAAzC;IACA,IAAMgC,gBAAgB,GAAG/B,SAAS,GAAGa,MAArC;;IACA,IAAIkB,gBAAgB,IAAI,CAApB,IAAyBA,gBAAgB,GAAGnB,KAAK,CAACI,MAAtD,EAA8D;MAC5D,IAAMC,IAAI,GAAGL,KAAK,CAACmB,gBAAD,CAAlB;MACA,IAAM;QAAE7B,KAAK,EAALA;MAAF,IAAYe,IAAlB;MACAa,QAAQ,CAAC9B,SAAD,EAAYE,OAAZ,CAAR;IACD,CAJD,MAIO;MACL4B,QAAQ,CAAC9B,SAAD,EAAY,IAAZ,CAAR;IACD;EACF;;EAED4B,kBAAkB,GAAS;IACzB,IAAI,CAAC,KAAKL,IAAL,CAAUS,OAAX,IAAsB,KAAKT,IAAL,CAAUS,OAAV,CAAkBC,YAAlB,KAAmC,CAA7D,EAAgE;MAC9D;IACD;;IAED,IAAM;MAAEC,gBAAF;MAAoB9B;IAApB,IAAkC,KAAKL,KAA7C;IACA,IAAMoC,GAAG,GAAG,KAAKZ,IAAL,CAAUS,OAAV,CAAkBI,SAA9B;IACA,IAAMC,MAAM,GAAGF,GAAG,GAAG,KAAKZ,IAAL,CAAUS,OAAV,CAAkBC,YAAvC;IAEA,IAAMR,MAAM,GAAGa,IAAI,CAACC,KAAL,CAAWJ,GAAG,GAAG/B,SAAjB,CAAf;IACA,IAAMsB,SAAS,GAAGY,IAAI,CAACE,IAAL,CAAUH,MAAM,GAAGjC,SAAnB,CAAlB;;IAEA,IAAI,KAAKqB,MAAL,KAAgBA,MAAhB,IAA0B,KAAKC,SAAL,KAAmBA,SAAjD,EAA4D;MAC1D,KAAKD,MAAL,GAAcA,MAAd;MACA,KAAKC,SAAL,GAAiBA,SAAjB;MACAQ,gBAAgB,CAACT,MAAD,EAASC,SAAT,CAAhB;IACD;EACF;;EAEDe,MAAM,GAAgB;IACpB,IAAM;MACJnC,QADI;MAEJM,KAFI;MAGJ8B,SAHI;MAIJ7B,MAJI;MAKJT,SALI;MAMJ,eAAeuC;IANX,IAOF,KAAK5C,KAPT;IAQA,IAAMe,YAAY,GAAG,KAAK8B,cAAL,CACnBhC,KADmB,EAEnBR,SAFmB,EAGnBS,MAHmB,EAInBP,QAJmB,CAArB;IAOA,oBACE;MACE,SAAS,EAAC,2CADZ;MAEE,QAAQ,EAAE,KAAKe,YAFjB;MAGE,GAAG,EAAE,KAAKE,IAHZ;MAIE,eAAaoB;IAJf,gBAME;MACE,SAAS,EAAC,mBADZ;MAEE,KAAK,EAAE;QAAEnC,MAAM,EAAEkC,SAAS,GAAGtC;MAAtB;IAFT,gBAIE;MACE,SAAS,EAAC,2BADZ;MAEE,KAAK,EAAE;QACLyC,QAAQ,EAAE,UADL;QAELrC,MAAM,EAAEI,KAAK,CAACI,MAAN,GAAeZ,SAFlB;QAGL+B,GAAG,EAAEtB,MAAM,GAAGT,SAHT;QAIL0C,IAAI,EAAE;MAJD;IAFT,GASGhC,YATH,CAJF,CANF,CADF;EAyBD;;AAvKqE;;gBAAlEjB,e,kBACkB;EACpBS,QAAQ,EAAE,KADU;EAEpBF,SAAS,EAAE,EAFS;EAGpB,eAAe2C;AAHK,C;;AAyKxB,eAAelD,eAAf"}
1
+ {"version":3,"sources":["../src/SelectValueList.tsx"],"names":["React","PureComponent","memoize","Checkbox","SelectValueList","constructor","props","itemIndex","key","value","displayValue","rowHeight","isSelected","disabled","style","height","text","handleSelect","max","items","offset","itemElements","i","length","item","element","getCachedItem","push","handleScroll","bind","list","createRef","topRow","bottomRow","componentDidMount","sendViewportUpdate","componentDidUpdate","onSelect","visibleItemIndex","current","clientHeight","onViewportChange","top","scrollTop","bottom","Math","floor","ceil","render","itemCount","dataTestId","getCachedItems","position","left","undefined"],"mappings":"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","sourcesContent":["import React, { PureComponent } from 'react';\nimport './SelectValueList.scss';\nimport memoize from 'memoizee';\nimport Checkbox from './Checkbox';\n\nexport interface SelectItem<T> {\n value: T;\n displayValue?: string;\n isSelected: boolean;\n}\n\ntype SelectValueListProps<T> = {\n disabled: 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 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 'data-testid': undefined,\n };\n\n constructor(props: SelectValueListProps<T>) {\n super(props);\n\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 | 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 <li className=\"value-list-item\" style={style} key={key}>\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 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 render(): JSX.Element {\n const {\n disabled,\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=\"select-value-list-scroll-pane h-100 w-100\"\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"],"file":"SelectValueList.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"SocketedButton.js","names":["React","classNames","dhExclamation","vsLink","FontAwesomeIcon","SocketedButton","forwardRef","props","ref","children","className","disabled","isLinked","isLinkedSource","isInvalid","onClick","onMouseEnter","onMouseLeave","style","dataTestId","displayName","defaultProps","undefined"],"sources":["../src/SocketedButton.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { dhExclamation, vsLink } from '@deephaven/icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport './SocketedButton.scss';\n\ntype SocketedButtonProps = {\n children?: React.ReactNode;\n className?: string;\n disabled?: boolean;\n isLinked?: boolean;\n isLinkedSource?: boolean;\n isInvalid?: boolean;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n style?: React.CSSProperties;\n 'data-testid'?: string;\n};\n\nconst SocketedButton = React.forwardRef<HTMLButtonElement, SocketedButtonProps>(\n (props: SocketedButtonProps, ref) => {\n const {\n children,\n className,\n disabled,\n isLinked,\n isLinkedSource,\n isInvalid,\n onClick,\n onMouseEnter,\n onMouseLeave,\n style,\n 'data-testid': dataTestId,\n } = props;\n return (\n <button\n ref={ref}\n type=\"button\"\n className={classNames(\n 'btn-socketed',\n { 'btn-socketed-linked': isLinked || isLinkedSource },\n { 'btn-socketed-linked-source': isLinkedSource },\n { 'is-invalid': isInvalid },\n className\n )}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={style}\n disabled={disabled}\n data-testid={dataTestId}\n >\n {children}\n <FontAwesomeIcon\n icon={vsLink}\n className=\"linked btn-socketed-icon\"\n transform=\"down-1\"\n />\n <FontAwesomeIcon\n icon={dhExclamation}\n className=\"is-invalid btn-socketed-icon\"\n />\n </button>\n );\n }\n);\n\nSocketedButton.displayName = 'SocketedButton';\n\nSocketedButton.defaultProps = {\n children: undefined,\n className: '',\n disabled: false,\n isLinked: false,\n isLinkedSource: false,\n isInvalid: false,\n onClick: undefined,\n onMouseEnter: undefined,\n onMouseLeave: undefined,\n style: undefined,\n 'data-testid': undefined,\n};\n\nexport default SocketedButton;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,EAAwBC,MAAxB,QAAsC,kBAAtC;AACA,SAASC,eAAT,QAAgC,gCAAhC;;AAkBA,IAAMC,cAAc,gBAAGL,KAAK,CAACM,UAAN,CACrB,CAACC,KAAD,EAA6BC,GAA7B,KAAqC;EACnC,IAAM;IACJC,QADI;IAEJC,SAFI;IAGJC,QAHI;IAIJC,QAJI;IAKJC,cALI;IAMJC,SANI;IAOJC,OAPI;IAQJC,YARI;IASJC,YATI;IAUJC,KAVI;IAWJ,eAAeC;EAXX,IAYFZ,KAZJ;EAaA,oBACE;IACE,GAAG,EAAEC,GADP;IAEE,IAAI,EAAC,QAFP;IAGE,SAAS,EAAEP,UAAU,CACnB,cADmB,EAEnB;MAAE,uBAAuBW,QAAQ,IAAIC;IAArC,CAFmB,EAGnB;MAAE,8BAA8BA;IAAhC,CAHmB,EAInB;MAAE,cAAcC;IAAhB,CAJmB,EAKnBJ,SALmB,CAHvB;IAUE,OAAO,EAAEK,OAVX;IAWE,YAAY,EAAEC,YAXhB;IAYE,YAAY,EAAEC,YAZhB;IAaE,KAAK,EAAEC,KAbT;IAcE,QAAQ,EAAEP,QAdZ;IAeE,eAAaQ;EAff,GAiBGV,QAjBH,eAkBE,oBAAC,eAAD;IACE,IAAI,EAAEN,MADR;IAEE,SAAS,EAAC,0BAFZ;IAGE,SAAS,EAAC;EAHZ,EAlBF,eAuBE,oBAAC,eAAD;IACE,IAAI,EAAED,aADR;IAEE,SAAS,EAAC;EAFZ,EAvBF,CADF;AA8BD,CA7CoB,CAAvB;AAgDAG,cAAc,CAACe,WAAf,GAA6B,gBAA7B;AAEAf,cAAc,CAACgB,YAAf,GAA8B;EAC5BZ,QAAQ,EAAEa,SADkB;EAE5BZ,SAAS,EAAE,EAFiB;EAG5BC,QAAQ,EAAE,KAHkB;EAI5BC,QAAQ,EAAE,KAJkB;EAK5BC,cAAc,EAAE,KALY;EAM5BC,SAAS,EAAE,KANiB;EAO5BC,OAAO,EAAEO,SAPmB;EAQ5BN,YAAY,EAAEM,SARc;EAS5BL,YAAY,EAAEK,SATc;EAU5BJ,KAAK,EAAEI,SAVqB;EAW5B,eAAeA;AAXa,CAA9B;AAcA,eAAejB,cAAf"}
1
+ {"version":3,"sources":["../src/SocketedButton.tsx"],"names":["React","classNames","dhExclamation","vsLink","FontAwesomeIcon","SocketedButton","forwardRef","props","ref","children","className","disabled","isLinked","isLinkedSource","isInvalid","onClick","onMouseEnter","onMouseLeave","style","dataTestId","displayName","defaultProps","undefined"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,EAAwBC,MAAxB,QAAsC,kBAAtC;AACA,SAASC,eAAT,QAAgC,gCAAhC;;AAkBA,IAAMC,cAAc,gBAAGL,KAAK,CAACM,UAAN,CACrB,CAACC,KAAD,EAA6BC,GAA7B,KAAqC;AACnC,MAAM;AACJC,IAAAA,QADI;AAEJC,IAAAA,SAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,cALI;AAMJC,IAAAA,SANI;AAOJC,IAAAA,OAPI;AAQJC,IAAAA,YARI;AASJC,IAAAA,YATI;AAUJC,IAAAA,KAVI;AAWJ,mBAAeC;AAXX,MAYFZ,KAZJ;AAaA,sBACE;AACE,IAAA,GAAG,EAAEC,GADP;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,IAAA,SAAS,EAAEP,UAAU,CACnB,cADmB,EAEnB;AAAE,6BAAuBW,QAAQ,IAAIC;AAArC,KAFmB,EAGnB;AAAE,oCAA8BA;AAAhC,KAHmB,EAInB;AAAE,oBAAcC;AAAhB,KAJmB,EAKnBJ,SALmB,CAHvB;AAUE,IAAA,OAAO,EAAEK,OAVX;AAWE,IAAA,YAAY,EAAEC,YAXhB;AAYE,IAAA,YAAY,EAAEC,YAZhB;AAaE,IAAA,KAAK,EAAEC,KAbT;AAcE,IAAA,QAAQ,EAAEP,QAdZ;AAeE,mBAAaQ;AAff,KAiBGV,QAjBH,eAkBE,oBAAC,eAAD;AACE,IAAA,IAAI,EAAEN,MADR;AAEE,IAAA,SAAS,EAAC,0BAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,IAlBF,eAuBE,oBAAC,eAAD;AACE,IAAA,IAAI,EAAED,aADR;AAEE,IAAA,SAAS,EAAC;AAFZ,IAvBF,CADF;AA8BD,CA7CoB,CAAvB;AAgDAG,cAAc,CAACe,WAAf,GAA6B,gBAA7B;AAEAf,cAAc,CAACgB,YAAf,GAA8B;AAC5BZ,EAAAA,QAAQ,EAAEa,SADkB;AAE5BZ,EAAAA,SAAS,EAAE,EAFiB;AAG5BC,EAAAA,QAAQ,EAAE,KAHkB;AAI5BC,EAAAA,QAAQ,EAAE,KAJkB;AAK5BC,EAAAA,cAAc,EAAE,KALY;AAM5BC,EAAAA,SAAS,EAAE,KANiB;AAO5BC,EAAAA,OAAO,EAAEO,SAPmB;AAQ5BN,EAAAA,YAAY,EAAEM,SARc;AAS5BL,EAAAA,YAAY,EAAEK,SATc;AAU5BJ,EAAAA,KAAK,EAAEI,SAVqB;AAW5B,iBAAeA;AAXa,CAA9B;AAcA,eAAejB,cAAf","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { dhExclamation, vsLink } from '@deephaven/icons';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\n\nimport './SocketedButton.scss';\n\ntype SocketedButtonProps = {\n children?: React.ReactNode;\n className?: string;\n disabled?: boolean;\n isLinked?: boolean;\n isLinkedSource?: boolean;\n isInvalid?: boolean;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n style?: React.CSSProperties;\n 'data-testid'?: string;\n};\n\nconst SocketedButton = React.forwardRef<HTMLButtonElement, SocketedButtonProps>(\n (props: SocketedButtonProps, ref) => {\n const {\n children,\n className,\n disabled,\n isLinked,\n isLinkedSource,\n isInvalid,\n onClick,\n onMouseEnter,\n onMouseLeave,\n style,\n 'data-testid': dataTestId,\n } = props;\n return (\n <button\n ref={ref}\n type=\"button\"\n className={classNames(\n 'btn-socketed',\n { 'btn-socketed-linked': isLinked || isLinkedSource },\n { 'btn-socketed-linked-source': isLinkedSource },\n { 'is-invalid': isInvalid },\n className\n )}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={style}\n disabled={disabled}\n data-testid={dataTestId}\n >\n {children}\n <FontAwesomeIcon\n icon={vsLink}\n className=\"linked btn-socketed-icon\"\n transform=\"down-1\"\n />\n <FontAwesomeIcon\n icon={dhExclamation}\n className=\"is-invalid btn-socketed-icon\"\n />\n </button>\n );\n }\n);\n\nSocketedButton.displayName = 'SocketedButton';\n\nSocketedButton.defaultProps = {\n children: undefined,\n className: '',\n disabled: false,\n isLinked: false,\n isLinkedSource: false,\n isInvalid: false,\n onClick: undefined,\n onMouseEnter: undefined,\n onMouseLeave: undefined,\n style: undefined,\n 'data-testid': undefined,\n};\n\nexport default SocketedButton;\n"],"file":"SocketedButton.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeExport.js","names":["ThemeExport","Object","freeze","transitionMs","transitionMidMs","transitionLongMs","transitionSlowMs"],"sources":["../src/ThemeExport.ts"],"sourcesContent":["import ThemeExport from './ThemeExport.module.scss';\n\n// Note that TypeScript does not know what keys exist on ThemeExport.module.scss\n// It only knows it's an object with strings for keys and values\nexport default Object.freeze({\n transitionMs: 150,\n transitionMidMs: 200,\n transitionLongMs: 300,\n transitionSlowMs: 1000,\n ...ThemeExport,\n});\n"],"mappings":";;;;;;OAAOA,W,kCAEP;AACA;;AACA,eAAeC,MAAM,CAACC,MAAP;EACbC,YAAY,EAAE,GADD;EAEbC,eAAe,EAAE,GAFJ;EAGbC,gBAAgB,EAAE,GAHL;EAIbC,gBAAgB,EAAE;AAJL,GAKVN,WALU,EAAf"}
1
+ {"version":3,"sources":["../src/ThemeExport.ts"],"names":["ThemeExport","Object","freeze","transitionMs","transitionMidMs","transitionLongMs","transitionSlowMs"],"mappings":";;;;;;OAAOA,W,kCAEP;AACA;;AACA,eAAeC,MAAM,CAACC,MAAP;AACbC,EAAAA,YAAY,EAAE,GADD;AAEbC,EAAAA,eAAe,EAAE,GAFJ;AAGbC,EAAAA,gBAAgB,EAAE,GAHL;AAIbC,EAAAA,gBAAgB,EAAE;AAJL,GAKVN,WALU,EAAf","sourcesContent":["import ThemeExport from './ThemeExport.module.scss';\n\n// Note that TypeScript does not know what keys exist on ThemeExport.module.scss\n// It only knows it's an object with strings for keys and values\nexport default Object.freeze({\n transitionMs: 150,\n transitionMidMs: 200,\n transitionLongMs: 300,\n transitionSlowMs: 1000,\n ...ThemeExport,\n});\n"],"file":"ThemeExport.js"}
@@ -1,13 +1,20 @@
1
1
  import React from 'react';
2
+ import { SelectionSegment } from './MaskedInput';
3
+ export type { SelectionSegment } from './MaskedInput';
2
4
  declare type TimeInputProps = {
3
5
  allowValueWrapping?: boolean;
4
6
  className?: string;
5
7
  onChange?(timeInSec: number): void;
8
+ onSelect?(selection: SelectionSegment): void;
6
9
  value?: number;
7
10
  onFocus?(): void;
8
11
  onBlur?(): void;
9
12
  'data-testid'?: string;
10
13
  };
11
- declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLInputElement>>;
14
+ export declare type TimeInputElement = {
15
+ focus: () => void;
16
+ setSelection: (newSelection: SelectionSegment) => void;
17
+ };
18
+ declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<TimeInputElement>>;
12
19
  export default TimeInput;
13
20
  //# sourceMappingURL=TimeInput.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../src/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,aAAK,cAAc,GAAG;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAKF,QAAA,MAAM,SAAS,yFA8Fd,CAAC;AAYF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../src/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAoB,EAElB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAOtD,aAAK,cAAc,GAAG;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,YAAY,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACxD,CAAC;AAKF,QAAA,MAAM,SAAS,yFAmHd,CAAC;AAaF,eAAe,SAAS,CAAC"}
package/dist/TimeInput.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState } from 'react';
1
+ import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
2
2
  import Log from '@deephaven/log';
3
3
  import { TimeUtils } from '@deephaven/utils';
4
4
  import MaskedInput, { DEFAULT_GET_PREFERRED_REPLACEMENT_STRING } from "./MaskedInput.js";
@@ -16,10 +16,26 @@ var TimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
16
16
  value: propsValue = 0,
17
17
  onFocus = () => false,
18
18
  onBlur = () => false,
19
+ onSelect = () => false,
19
20
  'data-testid': dataTestId
20
21
  } = props;
21
22
  var [value, setValue] = useState(TimeUtils.formatTime(propsValue));
22
- var [selection, setSelection] = useState();
23
+ var [selection, _setSelection] = useState();
24
+ var inputRef = useRef(null);
25
+ useImperativeHandle(ref, () => ({
26
+ focus: () => {
27
+ var _inputRef$current;
28
+
29
+ (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
30
+ },
31
+ setSelection: newSelection => {
32
+ var _inputRef$current2;
33
+
34
+ (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
35
+
36
+ _setSelection(newSelection);
37
+ }
38
+ }), []);
23
39
  useEffect(function setFormattedTime() {
24
40
  setValue(TimeUtils.formatTime(propsValue));
25
41
  }, [propsValue]);
@@ -59,12 +75,13 @@ var TimeInput = /*#__PURE__*/React.forwardRef((props, ref) => {
59
75
  }
60
76
  }
61
77
 
62
- function handleSelect(newSelection) {
63
- setSelection(newSelection);
64
- }
78
+ var handleSelect = useCallback(newSelection => {
79
+ _setSelection(newSelection);
65
80
 
81
+ onSelect(newSelection);
82
+ }, [onSelect]);
66
83
  return /*#__PURE__*/React.createElement(MaskedInput, {
67
- ref: ref,
84
+ ref: inputRef,
68
85
  className: className,
69
86
  example: EXAMPLES,
70
87
  getNextSegmentValue: getNextSegmentValue,
@@ -83,6 +100,7 @@ TimeInput.defaultProps = {
83
100
  allowValueWrapping: true,
84
101
  className: '',
85
102
  onChange: () => false,
103
+ onSelect: () => false,
86
104
  value: 0,
87
105
  onFocus: () => false,
88
106
  onBlur: () => false,
@@ -1 +1 @@
1
- {"version":3,"file":"TimeInput.js","names":["React","useEffect","useState","Log","TimeUtils","MaskedInput","DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","log","module","TIME_PATTERN","EXAMPLES","TimeInput","forwardRef","props","ref","allowValueWrapping","className","onChange","value","propsValue","onFocus","onBlur","dataTestId","setValue","formatTime","selection","setSelection","setFormattedTime","getNextSegmentValue","range","delta","segmentValue","maxValue","selectionStart","newSegmentValue","parseInt","Number","isNaN","Math","min","max","padStart","getPreferredReplacementString","replaceValue","replaceIndex","newChar","selectionEnd","substring","handleChange","newValue","debug","isTimeString","parseTime","handleSelect","newSelection","defaultProps","undefined"],"sources":["../src/TimeInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { TimeUtils } from '@deephaven/utils';\nimport MaskedInput, {\n DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n SelectionSegment,\n} from './MaskedInput';\n\nconst log = Log.module('TimeInput');\n\nconst TIME_PATTERN = '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]';\nconst EXAMPLES = ['00:00:00', '12:34:56', '23:59:59'];\n\ntype TimeInputProps = {\n allowValueWrapping?: boolean;\n className?: string;\n onChange?(timeInSec: number): void;\n value?: number;\n onFocus?(): void;\n onBlur?(): void;\n 'data-testid'?: string;\n};\n\n// Forward ref causes a false positive for display-name in eslint:\n// https://github.com/yannickcr/eslint-plugin-react/issues/2269\n// eslint-disable-next-line react/display-name\nconst TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n (props: TimeInputProps, ref) => {\n const {\n allowValueWrapping = true,\n className = '',\n onChange = () => false,\n value: propsValue = 0,\n onFocus = () => false,\n onBlur = () => false,\n 'data-testid': dataTestId,\n } = props;\n const [value, setValue] = useState(TimeUtils.formatTime(propsValue));\n const [selection, setSelection] = useState<SelectionSegment>();\n useEffect(\n function setFormattedTime() {\n setValue(TimeUtils.formatTime(propsValue));\n },\n [propsValue]\n );\n\n function getNextSegmentValue(\n range: SelectionSegment,\n delta: number,\n segmentValue: string\n ): string {\n // Delta is backward because negative Y is up\n const maxValue = range.selectionStart === 0 ? 24 : 60;\n let newSegmentValue = parseInt(segmentValue, 10) - delta;\n if (Number.isNaN(newSegmentValue)) {\n newSegmentValue = 0;\n } else if (allowValueWrapping) {\n // Add max value and re-mod so we don't get negative values after mod\n newSegmentValue = ((newSegmentValue % maxValue) + maxValue) % maxValue;\n } else {\n newSegmentValue = Math.min(Math.max(0, newSegmentValue), maxValue - 1);\n }\n return `${newSegmentValue}`.padStart(2, '0');\n }\n\n function getPreferredReplacementString(\n replaceValue: string,\n replaceIndex: number,\n newChar: string,\n selectionStart: number,\n selectionEnd: number\n ) {\n if (\n selectionStart === 0 &&\n selectionEnd === 2 &&\n replaceIndex === 1 &&\n parseInt(newChar, 10) > 1\n ) {\n // DH-10082 Special case for when typing `3` when it's already 12\n return `0${newChar}${replaceValue.substring(2)}`;\n }\n return DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n replaceValue,\n replaceIndex,\n newChar\n );\n }\n\n function handleChange(newValue: string): void {\n log.debug('handleChange', newValue);\n setValue(newValue);\n\n // Only send a change if the value is actually valid\n if (TimeUtils.isTimeString(newValue)) {\n onChange(TimeUtils.parseTime(newValue));\n }\n }\n\n function handleSelect(newSelection: SelectionSegment) {\n setSelection(newSelection);\n }\n\n return (\n <MaskedInput\n ref={ref}\n className={className}\n example={EXAMPLES}\n getNextSegmentValue={getNextSegmentValue}\n getPreferredReplacementString={getPreferredReplacementString}\n onChange={handleChange}\n onSelect={handleSelect}\n pattern={TIME_PATTERN}\n selection={selection}\n value={value}\n onFocus={onFocus}\n onBlur={onBlur}\n data-testid={dataTestId}\n />\n );\n }\n);\n\nTimeInput.defaultProps = {\n allowValueWrapping: true,\n className: '',\n onChange: () => false,\n value: 0,\n onFocus: () => false,\n onBlur: () => false,\n 'data-testid': undefined,\n};\n\nexport default TimeInput;\n"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/TimeInput.tsx"],"names":["React","useCallback","useEffect","useImperativeHandle","useRef","useState","Log","TimeUtils","MaskedInput","DEFAULT_GET_PREFERRED_REPLACEMENT_STRING","log","module","TIME_PATTERN","EXAMPLES","TimeInput","forwardRef","props","ref","allowValueWrapping","className","onChange","value","propsValue","onFocus","onBlur","onSelect","dataTestId","setValue","formatTime","selection","setSelection","inputRef","focus","current","newSelection","setFormattedTime","getNextSegmentValue","range","delta","segmentValue","maxValue","selectionStart","newSegmentValue","parseInt","Number","isNaN","Math","min","max","padStart","getPreferredReplacementString","replaceValue","replaceIndex","newChar","selectionEnd","substring","handleChange","newValue","debug","isTimeString","parseTime","handleSelect","defaultProps","undefined"],"mappings":"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","sourcesContent":["import React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport Log from '@deephaven/log';\nimport { TimeUtils } from '@deephaven/utils';\nimport MaskedInput, {\n DEFAULT_GET_PREFERRED_REPLACEMENT_STRING,\n SelectionSegment,\n} from './MaskedInput';\n\nexport type { SelectionSegment } from './MaskedInput';\n\nconst log = Log.module('TimeInput');\n\nconst TIME_PATTERN = '([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]';\nconst EXAMPLES = ['00:00:00', '12:34:56', '23:59:59'];\n\ntype TimeInputProps = {\n allowValueWrapping?: boolean;\n className?: string;\n onChange?(timeInSec: number): void;\n onSelect?(selection: SelectionSegment): void;\n value?: number;\n onFocus?(): void;\n onBlur?(): void;\n 'data-testid'?: string;\n};\n\nexport type TimeInputElement = {\n focus: () => void;\n setSelection: (newSelection: SelectionSegment) => void;\n};\n\n// Forward ref causes a false positive for display-name in eslint:\n// https://github.com/yannickcr/eslint-plugin-react/issues/2269\n// eslint-disable-next-line react/display-name\nconst TimeInput = React.forwardRef<TimeInputElement, TimeInputProps>(\n (props: TimeInputProps, ref) => {\n const {\n allowValueWrapping = true,\n className = '',\n onChange = () => false,\n value: propsValue = 0,\n onFocus = () => false,\n onBlur = () => false,\n onSelect = () => false,\n 'data-testid': dataTestId,\n } = props;\n const [value, setValue] = useState(TimeUtils.formatTime(propsValue));\n const [selection, setSelection] = useState<SelectionSegment>();\n const inputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => {\n inputRef.current?.focus();\n },\n setSelection: newSelection => {\n inputRef.current?.focus();\n setSelection(newSelection);\n },\n }),\n []\n );\n\n useEffect(\n function setFormattedTime() {\n setValue(TimeUtils.formatTime(propsValue));\n },\n [propsValue]\n );\n\n function getNextSegmentValue(\n range: SelectionSegment,\n delta: number,\n segmentValue: string\n ): string {\n // Delta is backward because negative Y is up\n const maxValue = range.selectionStart === 0 ? 24 : 60;\n let newSegmentValue = parseInt(segmentValue, 10) - delta;\n if (Number.isNaN(newSegmentValue)) {\n newSegmentValue = 0;\n } else if (allowValueWrapping) {\n // Add max value and re-mod so we don't get negative values after mod\n newSegmentValue = ((newSegmentValue % maxValue) + maxValue) % maxValue;\n } else {\n newSegmentValue = Math.min(Math.max(0, newSegmentValue), maxValue - 1);\n }\n return `${newSegmentValue}`.padStart(2, '0');\n }\n\n function getPreferredReplacementString(\n replaceValue: string,\n replaceIndex: number,\n newChar: string,\n selectionStart: number,\n selectionEnd: number\n ) {\n if (\n selectionStart === 0 &&\n selectionEnd === 2 &&\n replaceIndex === 1 &&\n parseInt(newChar, 10) > 1\n ) {\n // DH-10082 Special case for when typing `3` when it's already 12\n return `0${newChar}${replaceValue.substring(2)}`;\n }\n return DEFAULT_GET_PREFERRED_REPLACEMENT_STRING(\n replaceValue,\n replaceIndex,\n newChar\n );\n }\n\n function handleChange(newValue: string): void {\n log.debug('handleChange', newValue);\n setValue(newValue);\n\n // Only send a change if the value is actually valid\n if (TimeUtils.isTimeString(newValue)) {\n onChange(TimeUtils.parseTime(newValue));\n }\n }\n\n const handleSelect = useCallback(\n (newSelection: SelectionSegment) => {\n setSelection(newSelection);\n onSelect(newSelection);\n },\n [onSelect]\n );\n\n return (\n <MaskedInput\n ref={inputRef}\n className={className}\n example={EXAMPLES}\n getNextSegmentValue={getNextSegmentValue}\n getPreferredReplacementString={getPreferredReplacementString}\n onChange={handleChange}\n onSelect={handleSelect}\n pattern={TIME_PATTERN}\n selection={selection}\n value={value}\n onFocus={onFocus}\n onBlur={onBlur}\n data-testid={dataTestId}\n />\n );\n }\n);\n\nTimeInput.defaultProps = {\n allowValueWrapping: true,\n className: '',\n onChange: () => false,\n onSelect: () => false,\n value: 0,\n onFocus: () => false,\n onBlur: () => false,\n 'data-testid': undefined,\n};\n\nexport default TimeInput;\n"],"file":"TimeInput.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"TimeSlider.d.ts","sourceRoot":"","sources":["../src/TimeSlider.tsx"],"names":[],"mappings":";AAaA,OAAO,mBAAmB,CAAC;AAO3B,aAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,UAAU,6HAOb,eAAe,KAAG,WAuFpB,CAAC;AAuQF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"TimeSlider.d.ts","sourceRoot":"","sources":["../src/TimeSlider.tsx"],"names":[],"mappings":";AAaA,OAAO,mBAAmB,CAAC;AAO3B,aAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,UAAU,6HAOb,eAAe,KAAG,WAuFpB,CAAC;AAoSF,eAAe,UAAU,CAAC"}
@@ -109,12 +109,31 @@ var PopOvers = props => {
109
109
  isEndModified,
110
110
  'data-testid': dataTestId
111
111
  } = props;
112
- var [firstTime, setFirstTime] = useState(startTime > endTime ? endTime : startTime);
113
- var [secondTime, setSecondTime] = useState(startTime > endTime ? startTime : endTime);
112
+ var swapTimes = startTime > endTime;
113
+ var [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);
114
+ var [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);
115
+ var firstTimeRef = useRef(null);
116
+ var secondTimeRef = useRef(null); // Keep track of selection in both time inputs
117
+
118
+ var firstTimeSelectionRef = useRef(null);
119
+ var secondTimeSelectionRef = useRef(null);
114
120
  useEffect(function setTimeOnPropTimeChange() {
115
121
  setFirstTime(startTime > endTime ? endTime : startTime);
116
122
  setSecondTime(startTime > endTime ? startTime : endTime);
117
123
  }, [startTime, endTime]);
124
+ useEffect(function setFocusOnSwapTimesChange() {
125
+ if (firstTimeSelectionRef.current !== null) {
126
+ var _secondTimeRef$curren;
127
+
128
+ (_secondTimeRef$curren = secondTimeRef.current) === null || _secondTimeRef$curren === void 0 ? void 0 : _secondTimeRef$curren.setSelection(firstTimeSelectionRef.current);
129
+ }
130
+
131
+ if (secondTimeSelectionRef.current !== null) {
132
+ var _firstTimeRef$current;
133
+
134
+ (_firstTimeRef$current = firstTimeRef.current) === null || _firstTimeRef$current === void 0 ? void 0 : _firstTimeRef$current.setSelection(secondTimeSelectionRef.current);
135
+ }
136
+ }, [swapTimes]);
118
137
 
119
138
  function onFirstTimeChange(value) {
120
139
  if (startTime <= endTime) {
@@ -132,6 +151,14 @@ var PopOvers = props => {
132
151
  }
133
152
  }
134
153
 
154
+ var onFirstTimeSelect = useCallback(selection => {
155
+ firstTimeSelectionRef.current = selection;
156
+ secondTimeSelectionRef.current = null;
157
+ }, []);
158
+ var onSecondTimeSelect = useCallback(selection => {
159
+ firstTimeSelectionRef.current = null;
160
+ secondTimeSelectionRef.current = selection;
161
+ }, []);
135
162
  return /*#__PURE__*/React.createElement("div", {
136
163
  className: "time-slider-popovers"
137
164
  }, /*#__PURE__*/React.createElement("div", {
@@ -143,12 +170,14 @@ var PopOvers = props => {
143
170
  className: "handle-popper"
144
171
  }, /*#__PURE__*/React.createElement("label", {
145
172
  className: classNames({
146
- modified: startTime < endTime ? isStartModified : isEndModified
173
+ modified: swapTimes ? isEndModified : isStartModified
147
174
  })
148
- }, startTime <= endTime ? 'Start Time' : 'End Time'), /*#__PURE__*/React.createElement(TimeInput, {
175
+ }, swapTimes ? 'End Time' : 'Start Time'), /*#__PURE__*/React.createElement(TimeInput, {
176
+ ref: firstTimeRef,
149
177
  allowValueWrapping: false,
150
178
  value: firstTime,
151
179
  onChange: onFirstTimeChange,
180
+ onSelect: onFirstTimeSelect,
152
181
  "data-testid": dataTestId ? "".concat(dataTestId, "-input-1") : undefined
153
182
  })), /*#__PURE__*/React.createElement("div", {
154
183
  className: "flex-spacer"
@@ -156,12 +185,14 @@ var PopOvers = props => {
156
185
  className: "handle-popper"
157
186
  }, /*#__PURE__*/React.createElement("label", {
158
187
  className: classNames({
159
- modified: startTime > endTime ? isStartModified : isEndModified
188
+ modified: swapTimes ? isStartModified : isEndModified
160
189
  })
161
- }, startTime > endTime ? 'Start Time' : 'End Time'), /*#__PURE__*/React.createElement(TimeInput, {
190
+ }, swapTimes ? 'Start Time' : 'End Time'), /*#__PURE__*/React.createElement(TimeInput, {
191
+ ref: secondTimeRef,
162
192
  allowValueWrapping: false,
163
193
  value: secondTime,
164
194
  onChange: onSecondTimeChange,
195
+ onSelect: onSecondTimeSelect,
165
196
  "data-testid": dataTestId ? "".concat(dataTestId, "-input-2") : undefined
166
197
  })), /*#__PURE__*/React.createElement("div", {
167
198
  className: "flex",
@@ -1 +1 @@
1
- {"version":3,"file":"TimeSlider.js","names":["React","useCallback","useMemo","useRef","useState","useEffect","classNames","TimeInput","StyleExports","HANDLE_SIZE","parseInt","POPOVER_WIDTH","SECONDS_IN_DAY","SNAP_NEAREST_MINUTES","TimeSlider","startTime","propStartTime","endTime","propEndTime","onChange","isStartModified","isEndModified","dataTestId","setStartTime","setEndTime","track","setTimeOnPropTimeChange","updateTime","newStartTime","newEndTime","start","end","handleStartTimeChange","handleEndTimeChange","Array","fill","map","value","index","PopOvers","props","onStartTimeChange","onEndTimeChange","firstTime","setFirstTime","secondTime","setSecondTime","onFirstTimeChange","onSecondTimeChange","flexBasis","modified","undefined","TrackFills","transform","Handle","time","setTime","ONE_HOUR","handleOffset","calculatePositionAsTime","clientX","current","trackRect","getBoundingClientRect","leftEdge","Math","max","left","preciseTime","min","width","roundedTime","round","limitMax","handleMouseMove","handleMouseUp","window","removeEventListener","document","documentElement","classList","remove","startDragListening","addEventListener","add","stopDragListening","handleMouseDown","removeListenersOnUnmount"],"sources":["../src/TimeSlider.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key */\n// array maps being used are static, this is fine.\n\nimport React, {\n useCallback,\n useMemo,\n useRef,\n useState,\n useEffect,\n} from 'react';\nimport classNames from 'classnames';\nimport TimeInput from './TimeInput';\nimport StyleExports from './TimeSlider.module.scss';\nimport './TimeSlider.scss';\n\nconst HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);\nconst POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);\nconst SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59\nconst SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals\n\ntype TimeSliderProps = {\n startTime: number;\n endTime: number;\n onChange(value: { startTime: number; endTime: number }): void;\n isStartModified?: boolean;\n isEndModified?: boolean;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a time slider for setting a start and end time, that can also run overnight\n * @param props takes times in seconds 0 - 86399 and a callback\n */\nconst TimeSlider = ({\n startTime: propStartTime,\n endTime: propEndTime,\n onChange,\n isStartModified = false,\n isEndModified = false,\n 'data-testid': dataTestId,\n}: TimeSliderProps): JSX.Element => {\n const [startTime, setStartTime] = useState(propStartTime);\n const [endTime, setEndTime] = useState(propEndTime);\n\n const track = useRef<HTMLDivElement>(null); // we need the track width while calulculating time from handle drag\n\n // updates state if props change\n useEffect(\n function setTimeOnPropTimeChange() {\n setStartTime(propStartTime);\n setEndTime(propEndTime);\n },\n [propStartTime, propEndTime]\n );\n\n const updateTime = useCallback(\n (newStartTime: number, newEndTime: number) => {\n let start = newStartTime;\n let end = newEndTime;\n if (start === end) {\n if (end < SECONDS_IN_DAY) {\n end += 1;\n } else {\n start -= 1;\n }\n }\n\n setStartTime(start);\n setEndTime(end);\n onChange({ startTime: start, endTime: end });\n },\n [setStartTime, setEndTime, onChange]\n );\n\n const handleStartTimeChange = useCallback(\n (newStartTime: number) => {\n updateTime(newStartTime, endTime);\n },\n [updateTime, endTime]\n );\n\n const handleEndTimeChange = useCallback(\n (newEndTime: number) => {\n updateTime(startTime, newEndTime);\n },\n [updateTime, startTime]\n );\n\n return (\n <div className=\"time-slider\" data-testid={dataTestId}>\n <PopOvers\n startTime={startTime}\n endTime={endTime}\n onStartTimeChange={handleStartTimeChange}\n onEndTimeChange={handleEndTimeChange}\n isStartModified={isStartModified}\n isEndModified={isEndModified}\n />\n <div className=\"track\" ref={track}>\n <TrackFills startTime={startTime} endTime={endTime} />\n <div className=\"ticks\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick\" key={index} />\n ))}\n </div>\n <Handle\n track={track}\n time={startTime}\n setTime={handleStartTimeChange}\n />\n <Handle track={track} time={endTime} setTime={handleEndTimeChange} />\n </div>\n\n <div className=\"tick-labels\">\n <div className=\"tick-label\">0:00</div>\n <div className=\"tick-label-wrapper\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick-label\" key={index}>{`${index + 1}:00`}</div>\n ))}\n </div>\n </div>\n </div>\n );\n};\n\ntype PopOversProps = {\n startTime: number;\n endTime: number;\n onStartTimeChange(time: number): void;\n onEndTimeChange(time: number): void;\n isStartModified: boolean;\n isEndModified: boolean;\n 'data-testid'?: string;\n};\n\nconst PopOvers = (props: PopOversProps): JSX.Element => {\n const {\n startTime,\n endTime,\n onStartTimeChange,\n onEndTimeChange,\n isStartModified,\n isEndModified,\n 'data-testid': dataTestId,\n } = props;\n\n const [firstTime, setFirstTime] = useState(\n startTime > endTime ? endTime : startTime\n );\n const [secondTime, setSecondTime] = useState(\n startTime > endTime ? startTime : endTime\n );\n\n useEffect(\n function setTimeOnPropTimeChange() {\n setFirstTime(startTime > endTime ? endTime : startTime);\n setSecondTime(startTime > endTime ? startTime : endTime);\n },\n [startTime, endTime]\n );\n\n function onFirstTimeChange(value: number) {\n if (startTime <= endTime) {\n onStartTimeChange(value);\n } else {\n onEndTimeChange(value);\n }\n }\n\n function onSecondTimeChange(value: number) {\n if (startTime <= endTime) {\n onEndTimeChange(value);\n } else {\n onStartTimeChange(value);\n }\n }\n\n return (\n <div className=\"time-slider-popovers\">\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${(firstTime / SECONDS_IN_DAY) * 100}% - ${\n POPOVER_WIDTH / 2\n }px)`,\n }}\n />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: startTime < endTime ? isStartModified : isEndModified,\n })}\n >\n {startTime <= endTime ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n allowValueWrapping={false}\n value={firstTime}\n onChange={onFirstTimeChange}\n data-testid={dataTestId ? `${dataTestId}-input-1` : undefined}\n />\n </div>\n <div className=\"flex-spacer\" />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: startTime > endTime ? isStartModified : isEndModified,\n })}\n >\n {startTime > endTime ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n allowValueWrapping={false}\n value={secondTime}\n onChange={onSecondTimeChange}\n data-testid={dataTestId ? `${dataTestId}-input-2` : undefined}\n />\n </div>\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${\n ((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY) * 100\n }% - ${POPOVER_WIDTH / 2}px)`,\n }}\n />\n </div>\n );\n};\n\ntype TrackFillsProps = {\n startTime: number;\n endTime: number;\n 'data-testid'?: string;\n};\n\n/**\n * Shades the area between or outside of handles according to if start or endtime is greater.\n */\nconst TrackFills = (props: TrackFillsProps): JSX.Element => {\n const { startTime, endTime, 'data-testid': dataTestId } = props;\n return (\n <div className=\"track-fills\" data-testid={dataTestId}>\n {startTime > endTime && (\n <>\n <div\n className=\"track-fill track-fill-start\"\n style={{ transform: `scaleX(${endTime / SECONDS_IN_DAY})` }}\n />\n <div\n className=\"track-fill track-fill-end\"\n style={{\n transform: `scaleX(${\n (SECONDS_IN_DAY - startTime) / SECONDS_IN_DAY\n })`,\n }}\n />\n </>\n )}\n {startTime < endTime && (\n <div\n className=\"track-fill track-fill-middle\"\n style={{\n transform: `translateX(${\n (startTime / SECONDS_IN_DAY) * 100\n }%) scaleX(${(endTime - startTime) / SECONDS_IN_DAY})`,\n }}\n />\n )}\n </div>\n );\n};\n\ntype HandleProps = {\n track: React.RefObject<HTMLDivElement>;\n time: number;\n setTime(time: number): void;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a draggable handle the sets the time\n */\nconst Handle = (props: HandleProps): JSX.Element => {\n const { track, time, setTime, 'data-testid': dataTestId } = props;\n\n /**\n * Takes the time and generate our translation string taking into account handle offset.\n * The handle offset changes for the first and last tick range dynmaically. Normally,\n * the center of the handle (size/2) is the selection origin, but at edges, it becomes either\n * end of the handle, requireing a relative offset range of 0 - 0.5, and 0.5 - 1 of handle size.\n * @param t time in seconds\n */\n const transform = useMemo(() => {\n const ONE_HOUR = 60 * 60;\n let handleOffset = HANDLE_SIZE / 2;\n if (time < ONE_HOUR) {\n handleOffset = (time / ONE_HOUR) * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size\n } else if (time > 23 * ONE_HOUR) {\n handleOffset =\n HANDLE_SIZE / 2 +\n (1 / (SECONDS_IN_DAY - 23 * ONE_HOUR)) *\n (time - 23 * ONE_HOUR) *\n (HANDLE_SIZE / 2); // 0.5 - 1 Handle size\n }\n return `translateX(calc(${\n (time / SECONDS_IN_DAY) * 100\n }% - ${handleOffset}px))`;\n }, [time]);\n\n const calculatePositionAsTime = useCallback(\n (clientX: number) => {\n if (!track.current) {\n return 0;\n }\n const trackRect = track.current.getBoundingClientRect();\n const leftEdge = Math.max(clientX - trackRect.left, 0);\n // get position as 0-1 on slider and mulitply by seconds in a day to convert to time\n const preciseTime =\n SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);\n // snap to nearest N(5) minute interval\n const roundedTime =\n SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);\n // prevent over-rounding to 24:00:00\n const limitMax = Math.min(SECONDS_IN_DAY, roundedTime);\n return limitMax;\n },\n [track]\n );\n\n const handleMouseMove = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n },\n [setTime, calculatePositionAsTime]\n );\n\n const handleMouseUp = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n },\n [setTime, calculatePositionAsTime, handleMouseMove]\n );\n\n const startDragListening = useCallback(() => {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.add('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const stopDragListening = useCallback(() => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const handleMouseDown = useCallback(() => {\n startDragListening();\n }, [startDragListening]);\n\n useEffect(\n function removeListenersOnUnmount() {\n return () => {\n stopDragListening();\n };\n },\n [stopDragListening]\n );\n\n return (\n <div className=\"handle-track\" style={{ transform }}>\n <button\n className=\"handle\"\n type=\"button\"\n aria-label=\"Change time\"\n onMouseDown={handleMouseDown}\n data-testid={dataTestId}\n />\n </div>\n );\n};\n\nexport default TimeSlider;\n"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/TimeSlider.tsx"],"names":["React","useCallback","useMemo","useRef","useState","useEffect","classNames","TimeInput","StyleExports","HANDLE_SIZE","parseInt","POPOVER_WIDTH","SECONDS_IN_DAY","SNAP_NEAREST_MINUTES","TimeSlider","startTime","propStartTime","endTime","propEndTime","onChange","isStartModified","isEndModified","dataTestId","setStartTime","setEndTime","track","setTimeOnPropTimeChange","updateTime","newStartTime","newEndTime","start","end","handleStartTimeChange","handleEndTimeChange","Array","fill","map","value","index","PopOvers","props","onStartTimeChange","onEndTimeChange","swapTimes","firstTime","setFirstTime","secondTime","setSecondTime","firstTimeRef","secondTimeRef","firstTimeSelectionRef","secondTimeSelectionRef","setFocusOnSwapTimesChange","current","setSelection","onFirstTimeChange","onSecondTimeChange","onFirstTimeSelect","selection","onSecondTimeSelect","flexBasis","modified","undefined","TrackFills","transform","Handle","time","setTime","ONE_HOUR","handleOffset","calculatePositionAsTime","clientX","trackRect","getBoundingClientRect","leftEdge","Math","max","left","preciseTime","min","width","roundedTime","round","limitMax","handleMouseMove","handleMouseUp","window","removeEventListener","document","documentElement","classList","remove","startDragListening","addEventListener","add","stopDragListening","handleMouseDown","removeListenersOnUnmount"],"mappings":"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","sourcesContent":["/* eslint-disable react/no-array-index-key */\n// array maps being used are static, this is fine.\n\nimport React, {\n useCallback,\n useMemo,\n useRef,\n useState,\n useEffect,\n} from 'react';\nimport classNames from 'classnames';\nimport TimeInput, { SelectionSegment, TimeInputElement } from './TimeInput';\nimport StyleExports from './TimeSlider.module.scss';\nimport './TimeSlider.scss';\n\nconst HANDLE_SIZE = parseInt(StyleExports['handle-size'], 10);\nconst POPOVER_WIDTH = parseInt(StyleExports['popover-width'], 10);\nconst SECONDS_IN_DAY = 24 * 60 * 60 - 1; // Max is actually 23:59:59\nconst SNAP_NEAREST_MINUTES = 5 * 60; // rounds in 5 minute intervals\n\ntype TimeSliderProps = {\n startTime: number;\n endTime: number;\n onChange(value: { startTime: number; endTime: number }): void;\n isStartModified?: boolean;\n isEndModified?: boolean;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a time slider for setting a start and end time, that can also run overnight\n * @param props takes times in seconds 0 - 86399 and a callback\n */\nconst TimeSlider = ({\n startTime: propStartTime,\n endTime: propEndTime,\n onChange,\n isStartModified = false,\n isEndModified = false,\n 'data-testid': dataTestId,\n}: TimeSliderProps): JSX.Element => {\n const [startTime, setStartTime] = useState(propStartTime);\n const [endTime, setEndTime] = useState(propEndTime);\n\n const track = useRef<HTMLDivElement>(null); // we need the track width while calulculating time from handle drag\n\n // updates state if props change\n useEffect(\n function setTimeOnPropTimeChange() {\n setStartTime(propStartTime);\n setEndTime(propEndTime);\n },\n [propStartTime, propEndTime]\n );\n\n const updateTime = useCallback(\n (newStartTime: number, newEndTime: number) => {\n let start = newStartTime;\n let end = newEndTime;\n if (start === end) {\n if (end < SECONDS_IN_DAY) {\n end += 1;\n } else {\n start -= 1;\n }\n }\n\n setStartTime(start);\n setEndTime(end);\n onChange({ startTime: start, endTime: end });\n },\n [setStartTime, setEndTime, onChange]\n );\n\n const handleStartTimeChange = useCallback(\n (newStartTime: number) => {\n updateTime(newStartTime, endTime);\n },\n [updateTime, endTime]\n );\n\n const handleEndTimeChange = useCallback(\n (newEndTime: number) => {\n updateTime(startTime, newEndTime);\n },\n [updateTime, startTime]\n );\n\n return (\n <div className=\"time-slider\" data-testid={dataTestId}>\n <PopOvers\n startTime={startTime}\n endTime={endTime}\n onStartTimeChange={handleStartTimeChange}\n onEndTimeChange={handleEndTimeChange}\n isStartModified={isStartModified}\n isEndModified={isEndModified}\n />\n <div className=\"track\" ref={track}>\n <TrackFills startTime={startTime} endTime={endTime} />\n <div className=\"ticks\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick\" key={index} />\n ))}\n </div>\n <Handle\n track={track}\n time={startTime}\n setTime={handleStartTimeChange}\n />\n <Handle track={track} time={endTime} setTime={handleEndTimeChange} />\n </div>\n\n <div className=\"tick-labels\">\n <div className=\"tick-label\">0:00</div>\n <div className=\"tick-label-wrapper\">\n {Array(24)\n .fill(null)\n .map((value, index) => (\n <div className=\"tick-label\" key={index}>{`${index + 1}:00`}</div>\n ))}\n </div>\n </div>\n </div>\n );\n};\n\ntype PopOversProps = {\n startTime: number;\n endTime: number;\n onStartTimeChange(time: number): void;\n onEndTimeChange(time: number): void;\n isStartModified: boolean;\n isEndModified: boolean;\n 'data-testid'?: string;\n};\n\nconst PopOvers = (props: PopOversProps): JSX.Element => {\n const {\n startTime,\n endTime,\n onStartTimeChange,\n onEndTimeChange,\n isStartModified,\n isEndModified,\n 'data-testid': dataTestId,\n } = props;\n\n const swapTimes = startTime > endTime;\n\n const [firstTime, setFirstTime] = useState(swapTimes ? endTime : startTime);\n const [secondTime, setSecondTime] = useState(swapTimes ? startTime : endTime);\n const firstTimeRef = useRef<TimeInputElement>(null);\n const secondTimeRef = useRef<TimeInputElement>(null);\n // Keep track of selection in both time inputs\n const firstTimeSelectionRef = useRef<SelectionSegment | null>(null);\n const secondTimeSelectionRef = useRef<SelectionSegment | null>(null);\n\n useEffect(\n function setTimeOnPropTimeChange() {\n setFirstTime(startTime > endTime ? endTime : startTime);\n setSecondTime(startTime > endTime ? startTime : endTime);\n },\n [startTime, endTime]\n );\n\n useEffect(\n function setFocusOnSwapTimesChange() {\n if (firstTimeSelectionRef.current !== null) {\n secondTimeRef.current?.setSelection(firstTimeSelectionRef.current);\n }\n if (secondTimeSelectionRef.current !== null) {\n firstTimeRef.current?.setSelection(secondTimeSelectionRef.current);\n }\n },\n [swapTimes]\n );\n\n function onFirstTimeChange(value: number) {\n if (startTime <= endTime) {\n onStartTimeChange(value);\n } else {\n onEndTimeChange(value);\n }\n }\n\n function onSecondTimeChange(value: number) {\n if (startTime <= endTime) {\n onEndTimeChange(value);\n } else {\n onStartTimeChange(value);\n }\n }\n\n const onFirstTimeSelect = useCallback(selection => {\n firstTimeSelectionRef.current = selection;\n secondTimeSelectionRef.current = null;\n }, []);\n\n const onSecondTimeSelect = useCallback(selection => {\n firstTimeSelectionRef.current = null;\n secondTimeSelectionRef.current = selection;\n }, []);\n\n return (\n <div className=\"time-slider-popovers\">\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${(firstTime / SECONDS_IN_DAY) * 100}% - ${\n POPOVER_WIDTH / 2\n }px)`,\n }}\n />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: swapTimes ? isEndModified : isStartModified,\n })}\n >\n {swapTimes ? 'End Time' : 'Start Time'}\n </label>\n <TimeInput\n ref={firstTimeRef}\n allowValueWrapping={false}\n value={firstTime}\n onChange={onFirstTimeChange}\n onSelect={onFirstTimeSelect}\n data-testid={dataTestId ? `${dataTestId}-input-1` : undefined}\n />\n </div>\n <div className=\"flex-spacer\" />\n <div className=\"handle-popper\">\n <label\n className={classNames({\n modified: swapTimes ? isStartModified : isEndModified,\n })}\n >\n {swapTimes ? 'Start Time' : 'End Time'}\n </label>\n <TimeInput\n ref={secondTimeRef}\n allowValueWrapping={false}\n value={secondTime}\n onChange={onSecondTimeChange}\n onSelect={onSecondTimeSelect}\n data-testid={dataTestId ? `${dataTestId}-input-2` : undefined}\n />\n </div>\n <div\n className=\"flex\"\n style={{\n flexBasis: `calc(${\n ((SECONDS_IN_DAY - secondTime) / SECONDS_IN_DAY) * 100\n }% - ${POPOVER_WIDTH / 2}px)`,\n }}\n />\n </div>\n );\n};\n\ntype TrackFillsProps = {\n startTime: number;\n endTime: number;\n 'data-testid'?: string;\n};\n\n/**\n * Shades the area between or outside of handles according to if start or endtime is greater.\n */\nconst TrackFills = (props: TrackFillsProps): JSX.Element => {\n const { startTime, endTime, 'data-testid': dataTestId } = props;\n return (\n <div className=\"track-fills\" data-testid={dataTestId}>\n {startTime > endTime && (\n <>\n <div\n className=\"track-fill track-fill-start\"\n style={{ transform: `scaleX(${endTime / SECONDS_IN_DAY})` }}\n />\n <div\n className=\"track-fill track-fill-end\"\n style={{\n transform: `scaleX(${\n (SECONDS_IN_DAY - startTime) / SECONDS_IN_DAY\n })`,\n }}\n />\n </>\n )}\n {startTime < endTime && (\n <div\n className=\"track-fill track-fill-middle\"\n style={{\n transform: `translateX(${\n (startTime / SECONDS_IN_DAY) * 100\n }%) scaleX(${(endTime - startTime) / SECONDS_IN_DAY})`,\n }}\n />\n )}\n </div>\n );\n};\n\ntype HandleProps = {\n track: React.RefObject<HTMLDivElement>;\n time: number;\n setTime(time: number): void;\n 'data-testid'?: string;\n};\n\n/**\n * Creates a draggable handle the sets the time\n */\nconst Handle = (props: HandleProps): JSX.Element => {\n const { track, time, setTime, 'data-testid': dataTestId } = props;\n\n /**\n * Takes the time and generate our translation string taking into account handle offset.\n * The handle offset changes for the first and last tick range dynmaically. Normally,\n * the center of the handle (size/2) is the selection origin, but at edges, it becomes either\n * end of the handle, requireing a relative offset range of 0 - 0.5, and 0.5 - 1 of handle size.\n * @param t time in seconds\n */\n const transform = useMemo(() => {\n const ONE_HOUR = 60 * 60;\n let handleOffset = HANDLE_SIZE / 2;\n if (time < ONE_HOUR) {\n handleOffset = (time / ONE_HOUR) * (HANDLE_SIZE / 2); // 0 - 0.5 Handle size\n } else if (time > 23 * ONE_HOUR) {\n handleOffset =\n HANDLE_SIZE / 2 +\n (1 / (SECONDS_IN_DAY - 23 * ONE_HOUR)) *\n (time - 23 * ONE_HOUR) *\n (HANDLE_SIZE / 2); // 0.5 - 1 Handle size\n }\n return `translateX(calc(${\n (time / SECONDS_IN_DAY) * 100\n }% - ${handleOffset}px))`;\n }, [time]);\n\n const calculatePositionAsTime = useCallback(\n (clientX: number) => {\n if (!track.current) {\n return 0;\n }\n const trackRect = track.current.getBoundingClientRect();\n const leftEdge = Math.max(clientX - trackRect.left, 0);\n // get position as 0-1 on slider and mulitply by seconds in a day to convert to time\n const preciseTime =\n SECONDS_IN_DAY * Math.min(1, leftEdge / trackRect.width);\n // snap to nearest N(5) minute interval\n const roundedTime =\n SNAP_NEAREST_MINUTES * Math.round(preciseTime / SNAP_NEAREST_MINUTES);\n // prevent over-rounding to 24:00:00\n const limitMax = Math.min(SECONDS_IN_DAY, roundedTime);\n return limitMax;\n },\n [track]\n );\n\n const handleMouseMove = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n },\n [setTime, calculatePositionAsTime]\n );\n\n const handleMouseUp = useCallback(\n ({ clientX }: MouseEvent) => {\n setTime(calculatePositionAsTime(clientX));\n\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n },\n [setTime, calculatePositionAsTime, handleMouseMove]\n );\n\n const startDragListening = useCallback(() => {\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.add('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const stopDragListening = useCallback(() => {\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n document.documentElement.classList.remove('drag-pointer-events-none');\n }, [handleMouseMove, handleMouseUp]);\n\n const handleMouseDown = useCallback(() => {\n startDragListening();\n }, [startDragListening]);\n\n useEffect(\n function removeListenersOnUnmount() {\n return () => {\n stopDragListening();\n };\n },\n [stopDragListening]\n );\n\n return (\n <div className=\"handle-track\" style={{ transform }}>\n <button\n className=\"handle\"\n type=\"button\"\n aria-label=\"Change time\"\n onMouseDown={handleMouseDown}\n data-testid={dataTestId}\n />\n </div>\n );\n};\n\nexport default TimeSlider;\n"],"file":"TimeSlider.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"ToastNotification.js","names":["React","classNames","CSSTransition","vsClose","Button","ThemeExport","ToastNotification","buttons","isShown","classNamesProp","message","type","onClick","onDismiss","dataTestId","hasButtons","length","transitionMs","transitionSlowMs","TYPE","Object","freeze","ERROR"],"sources":["../src/ToastNotification.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport { vsClose } from '@deephaven/icons';\nimport Button from './Button';\nimport ThemeExport from './ThemeExport';\nimport './ToastNotification.scss';\n\ntype ToastNotificationProps = {\n buttons?: typeof Button[];\n classNames?: string;\n isShown?: boolean;\n message?: string;\n type?: string;\n 'data-testid'?: string;\n\n onClick?: React.EventHandler<\n React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>\n >;\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nconst ToastNotification = ({\n buttons,\n isShown = false,\n classNames: classNamesProp,\n message,\n type,\n onClick,\n onDismiss,\n 'data-testid': dataTestId,\n}: ToastNotificationProps): JSX.Element => {\n const hasButtons = buttons && buttons.length !== 0;\n\n return (\n <CSSTransition\n in={isShown}\n timeout={ThemeExport.transitionMs}\n classNames=\"toast-notification-slide-up\"\n mountOnEnter\n unmountOnExit\n >\n <div\n className={classNames('toast-notification', classNamesProp, type)}\n role=\"presentation\"\n onClick={onClick}\n onKeyPress={onClick}\n data-testid={dataTestId}\n >\n <div className=\"message-container\">\n <span className=\"message\">{message}</span>\n </div>\n <CSSTransition\n in={hasButtons}\n timeout={ThemeExport.transitionSlowMs}\n classNames=\"fade\"\n mountOnEnter\n unmountOnExit\n >\n <div className=\"buttons-container\">{buttons}</div>\n </CSSTransition>\n {onDismiss && (\n <Button\n kind=\"ghost\"\n icon={vsClose}\n tooltip=\"Close notification\"\n className=\"my-2\"\n onClick={onDismiss}\n />\n )}\n </div>\n </CSSTransition>\n );\n};\n\nToastNotification.TYPE = Object.freeze({\n ERROR: 'error',\n});\n\nexport default ToastNotification;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,QAA8B,wBAA9B;AACA,SAASC,OAAT,QAAwB,kBAAxB;OACOC,M;OACAC,W;;;AAiBP,IAAMC,iBAAiB,GAAG,QASiB;EAAA,IAThB;IACzBC,OADyB;IAEzBC,OAAO,GAAG,KAFe;IAGzBP,UAAU,EAAEQ,cAHa;IAIzBC,OAJyB;IAKzBC,IALyB;IAMzBC,OANyB;IAOzBC,SAPyB;IAQzB,eAAeC;EARU,CASgB;EACzC,IAAMC,UAAU,GAAGR,OAAO,IAAIA,OAAO,CAACS,MAAR,KAAmB,CAAjD;EAEA,oBACE,oBAAC,aAAD;IACE,EAAE,EAAER,OADN;IAEE,OAAO,EAAEH,WAAW,CAACY,YAFvB;IAGE,UAAU,EAAC,6BAHb;IAIE,YAAY,MAJd;IAKE,aAAa;EALf,gBAOE;IACE,SAAS,EAAEhB,UAAU,CAAC,oBAAD,EAAuBQ,cAAvB,EAAuCE,IAAvC,CADvB;IAEE,IAAI,EAAC,cAFP;IAGE,OAAO,EAAEC,OAHX;IAIE,UAAU,EAAEA,OAJd;IAKE,eAAaE;EALf,gBAOE;IAAK,SAAS,EAAC;EAAf,gBACE;IAAM,SAAS,EAAC;EAAhB,GAA2BJ,OAA3B,CADF,CAPF,eAUE,oBAAC,aAAD;IACE,EAAE,EAAEK,UADN;IAEE,OAAO,EAAEV,WAAW,CAACa,gBAFvB;IAGE,UAAU,EAAC,MAHb;IAIE,YAAY,MAJd;IAKE,aAAa;EALf,gBAOE;IAAK,SAAS,EAAC;EAAf,GAAoCX,OAApC,CAPF,CAVF,EAmBGM,SAAS,iBACR,oBAAC,MAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAEV,OAFR;IAGE,OAAO,EAAC,oBAHV;IAIE,SAAS,EAAC,MAJZ;IAKE,OAAO,EAAEU;EALX,EApBJ,CAPF,CADF;AAuCD,CAnDD;;AAqDAP,iBAAiB,CAACa,IAAlB,GAAyBC,MAAM,CAACC,MAAP,CAAc;EACrCC,KAAK,EAAE;AAD8B,CAAd,CAAzB;AAIA,eAAehB,iBAAf"}
1
+ {"version":3,"sources":["../src/ToastNotification.tsx"],"names":["React","classNames","CSSTransition","vsClose","Button","ThemeExport","ToastNotification","buttons","isShown","classNamesProp","message","type","onClick","onDismiss","dataTestId","hasButtons","length","transitionMs","transitionSlowMs","TYPE","Object","freeze","ERROR"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,QAA8B,wBAA9B;AACA,SAASC,OAAT,QAAwB,kBAAxB;OACOC,M;OACAC,W;;;AAiBP,IAAMC,iBAAiB,GAAG,QASiB;AAAA,MAThB;AACzBC,IAAAA,OADyB;AAEzBC,IAAAA,OAAO,GAAG,KAFe;AAGzBP,IAAAA,UAAU,EAAEQ,cAHa;AAIzBC,IAAAA,OAJyB;AAKzBC,IAAAA,IALyB;AAMzBC,IAAAA,OANyB;AAOzBC,IAAAA,SAPyB;AAQzB,mBAAeC;AARU,GASgB;AACzC,MAAMC,UAAU,GAAGR,OAAO,IAAIA,OAAO,CAACS,MAAR,KAAmB,CAAjD;AAEA,sBACE,oBAAC,aAAD;AACE,IAAA,EAAE,EAAER,OADN;AAEE,IAAA,OAAO,EAAEH,WAAW,CAACY,YAFvB;AAGE,IAAA,UAAU,EAAC,6BAHb;AAIE,IAAA,YAAY,MAJd;AAKE,IAAA,aAAa;AALf,kBAOE;AACE,IAAA,SAAS,EAAEhB,UAAU,CAAC,oBAAD,EAAuBQ,cAAvB,EAAuCE,IAAvC,CADvB;AAEE,IAAA,IAAI,EAAC,cAFP;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,UAAU,EAAEA,OAJd;AAKE,mBAAaE;AALf,kBAOE;AAAK,IAAA,SAAS,EAAC;AAAf,kBACE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAA2BJ,OAA3B,CADF,CAPF,eAUE,oBAAC,aAAD;AACE,IAAA,EAAE,EAAEK,UADN;AAEE,IAAA,OAAO,EAAEV,WAAW,CAACa,gBAFvB;AAGE,IAAA,UAAU,EAAC,MAHb;AAIE,IAAA,YAAY,MAJd;AAKE,IAAA,aAAa;AALf,kBAOE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAoCX,OAApC,CAPF,CAVF,EAmBGM,SAAS,iBACR,oBAAC,MAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,IAAI,EAAEV,OAFR;AAGE,IAAA,OAAO,EAAC,oBAHV;AAIE,IAAA,SAAS,EAAC,MAJZ;AAKE,IAAA,OAAO,EAAEU;AALX,IApBJ,CAPF,CADF;AAuCD,CAnDD;;AAqDAP,iBAAiB,CAACa,IAAlB,GAAyBC,MAAM,CAACC,MAAP,CAAc;AACrCC,EAAAA,KAAK,EAAE;AAD8B,CAAd,CAAzB;AAIA,eAAehB,iBAAf","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport { vsClose } from '@deephaven/icons';\nimport Button from './Button';\nimport ThemeExport from './ThemeExport';\nimport './ToastNotification.scss';\n\ntype ToastNotificationProps = {\n buttons?: typeof Button[];\n classNames?: string;\n isShown?: boolean;\n message?: string;\n type?: string;\n 'data-testid'?: string;\n\n onClick?: React.EventHandler<\n React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>\n >;\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nconst ToastNotification = ({\n buttons,\n isShown = false,\n classNames: classNamesProp,\n message,\n type,\n onClick,\n onDismiss,\n 'data-testid': dataTestId,\n}: ToastNotificationProps): JSX.Element => {\n const hasButtons = buttons && buttons.length !== 0;\n\n return (\n <CSSTransition\n in={isShown}\n timeout={ThemeExport.transitionMs}\n classNames=\"toast-notification-slide-up\"\n mountOnEnter\n unmountOnExit\n >\n <div\n className={classNames('toast-notification', classNamesProp, type)}\n role=\"presentation\"\n onClick={onClick}\n onKeyPress={onClick}\n data-testid={dataTestId}\n >\n <div className=\"message-container\">\n <span className=\"message\">{message}</span>\n </div>\n <CSSTransition\n in={hasButtons}\n timeout={ThemeExport.transitionSlowMs}\n classNames=\"fade\"\n mountOnEnter\n unmountOnExit\n >\n <div className=\"buttons-container\">{buttons}</div>\n </CSSTransition>\n {onDismiss && (\n <Button\n kind=\"ghost\"\n icon={vsClose}\n tooltip=\"Close notification\"\n className=\"my-2\"\n onClick={onDismiss}\n />\n )}\n </div>\n </CSSTransition>\n );\n};\n\nToastNotification.TYPE = Object.freeze({\n ERROR: 'error',\n});\n\nexport default ToastNotification;\n"],"file":"ToastNotification.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"UISwitch.js","names":["React","classNames","UISwitch","on","id","className","isInvalid","disabled","onClick","dataTestId","active"],"sources":["../src/UISwitch.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\nexport type UISwitchProps = {\n on: boolean;\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n id?: string;\n className?: string;\n isInvalid?: boolean;\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\nconst UISwitch = ({\n on,\n id,\n className,\n isInvalid,\n disabled = false,\n onClick,\n 'data-testid': dataTestId,\n}: UISwitchProps): JSX.Element => (\n <button\n type=\"button\"\n className={classNames(\n 'btn',\n 'btn-switch',\n className,\n { active: on },\n { 'is-invalid': isInvalid }\n )}\n id={id}\n onClick={onClick}\n disabled={disabled}\n data-testid={dataTestId}\n >\n <div className=\"handle\" />\n </button>\n);\n\nexport default UISwitch;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;AAaA,IAAMC,QAAQ,GAAG;EAAA,IAAC;IAChBC,EADgB;IAEhBC,EAFgB;IAGhBC,SAHgB;IAIhBC,SAJgB;IAKhBC,QAAQ,GAAG,KALK;IAMhBC,OANgB;IAOhB,eAAeC;EAPC,CAAD;EAAA,oBASf;IACE,IAAI,EAAC,QADP;IAEE,SAAS,EAAER,UAAU,CACnB,KADmB,EAEnB,YAFmB,EAGnBI,SAHmB,EAInB;MAAEK,MAAM,EAAEP;IAAV,CAJmB,EAKnB;MAAE,cAAcG;IAAhB,CALmB,CAFvB;IASE,EAAE,EAAEF,EATN;IAUE,OAAO,EAAEI,OAVX;IAWE,QAAQ,EAAED,QAXZ;IAYE,eAAaE;EAZf,gBAcE;IAAK,SAAS,EAAC;EAAf,EAdF,CATe;AAAA,CAAjB;;AA2BA,eAAeP,QAAf"}
1
+ {"version":3,"sources":["../src/UISwitch.tsx"],"names":["React","classNames","UISwitch","on","id","className","isInvalid","disabled","onClick","dataTestId","active"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;;AAaA,IAAMC,QAAQ,GAAG;AAAA,MAAC;AAChBC,IAAAA,EADgB;AAEhBC,IAAAA,EAFgB;AAGhBC,IAAAA,SAHgB;AAIhBC,IAAAA,SAJgB;AAKhBC,IAAAA,QAAQ,GAAG,KALK;AAMhBC,IAAAA,OANgB;AAOhB,mBAAeC;AAPC,GAAD;AAAA,sBASf;AACE,IAAA,IAAI,EAAC,QADP;AAEE,IAAA,SAAS,EAAER,UAAU,CACnB,KADmB,EAEnB,YAFmB,EAGnBI,SAHmB,EAInB;AAAEK,MAAAA,MAAM,EAAEP;AAAV,KAJmB,EAKnB;AAAE,oBAAcG;AAAhB,KALmB,CAFvB;AASE,IAAA,EAAE,EAAEF,EATN;AAUE,IAAA,OAAO,EAAEI,OAVX;AAWE,IAAA,QAAQ,EAAED,QAXZ;AAYE,mBAAaE;AAZf,kBAcE;AAAK,IAAA,SAAS,EAAC;AAAf,IAdF,CATe;AAAA,CAAjB;;AA2BA,eAAeP,QAAf","sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport './UISwitch.scss';\n\nexport type UISwitchProps = {\n on: boolean;\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n id?: string;\n className?: string;\n isInvalid?: boolean;\n disabled?: boolean;\n 'data-testid'?: string;\n};\n\nconst UISwitch = ({\n on,\n id,\n className,\n isInvalid,\n disabled = false,\n onClick,\n 'data-testid': dataTestId,\n}: UISwitchProps): JSX.Element => (\n <button\n type=\"button\"\n className={classNames(\n 'btn',\n 'btn-switch',\n className,\n { active: on },\n { 'is-invalid': isInvalid }\n )}\n id={id}\n onClick={onClick}\n disabled={disabled}\n data-testid={dataTestId}\n >\n <div className=\"handle\" />\n </button>\n);\n\nexport default UISwitch;\n"],"file":"UISwitch.js"}
@@ -0,0 +1,8 @@
1
+ .validate-label {
2
+ padding-right: 0.5rem;
3
+ }
4
+ .validate-label.modified {
5
+ color: #fde38d;
6
+ }
7
+
8
+ /*# sourceMappingURL=ValidateLabelInput.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../src/ValidateLabelInput.scss","../scss/new_variables.scss"],"names":[],"mappings":"AAIA;EACE,eCFS;;ADGT;EACE,OALO","file":"ValidateLabelInput.css"}
@@ -0,0 +1,28 @@
1
+ import React from 'react';
2
+ import './ValidateLabelInput.scss';
3
+ export declare type ValidateLabelInputProps = {
4
+ /** Element to add label to */
5
+ children: React.ReactNode;
6
+ /** Any classnames to add */
7
+ className?: string | string[];
8
+ /** Text for this validation label */
9
+ labelText?: string;
10
+ /** Small hint text next to the main label */
11
+ hintText?: string;
12
+ /** Show a modified state. Defaults to false. */
13
+ isModified?: boolean;
14
+ /** Validation error that has occurred */
15
+ validationError?: string;
16
+ /** Show the validation error if it exists. Default to true. */
17
+ showValidationError?: boolean;
18
+ /** ID to use. Auto-generates if not provided */
19
+ id?: string;
20
+ /** data-testid to apply to the label */
21
+ 'data-testid'?: string;
22
+ };
23
+ /**
24
+ * Takes a child and add a label and validaton error
25
+ */
26
+ export declare function ValidateLabelInput(props: ValidateLabelInputProps): React.ReactElement;
27
+ export default ValidateLabelInput;
28
+ //# sourceMappingURL=ValidateLabelInput.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ValidateLabelInput.d.ts","sourceRoot":"","sources":["../src/ValidateLabelInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,2BAA2B,CAAC;AAEnC,oBAAY,uBAAuB,GAAG;IACpC,8BAA8B;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE9B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,gDAAgD;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,KAAK,CAAC,YAAY,CA4CpB;AAED,eAAe,kBAAkB,CAAC"}
@@ -0,0 +1,50 @@
1
+ import React, { useRef } from 'react';
2
+ import classNames from 'classnames';
3
+ import shortid from 'shortid';
4
+ import "./ValidateLabelInput.css";
5
+
6
+ /**
7
+ * Takes a child and add a label and validaton error
8
+ */
9
+ export function ValidateLabelInput(props) {
10
+ var {
11
+ children,
12
+ className,
13
+ labelText,
14
+ hintText,
15
+ isModified,
16
+ validationError,
17
+ showValidationError = true,
18
+ 'data-testid': dataTestId,
19
+ id: idProp
20
+ } = props;
21
+ var {
22
+ current: id
23
+ } = useRef(idProp !== null && idProp !== void 0 ? idProp : shortid());
24
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
25
+ className: classNames('validate-label', className, {
26
+ modified: isModified
27
+ }),
28
+ htmlFor: id,
29
+ "data-testid": dataTestId
30
+ }, labelText), React.Children.toArray(children).map(child => {
31
+ if (! /*#__PURE__*/React.isValidElement(child)) {
32
+ return /*#__PURE__*/React.createElement("div", {
33
+ className: classNames(className)
34
+ }, child);
35
+ } // toArray strips null children
36
+
37
+
38
+ return /*#__PURE__*/React.cloneElement(child, {
39
+ className: classNames(child.props.className, {
40
+ 'is-invalid': validationError
41
+ })
42
+ });
43
+ }), hintText && /*#__PURE__*/React.createElement("small", {
44
+ className: "form-text text-muted"
45
+ }, hintText), validationError && showValidationError && /*#__PURE__*/React.createElement("p", {
46
+ className: "validate-label-error text-danger"
47
+ }, validationError));
48
+ }
49
+ export default ValidateLabelInput;
50
+ //# sourceMappingURL=ValidateLabelInput.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/ValidateLabelInput.tsx"],"names":["React","useRef","classNames","shortid","ValidateLabelInput","props","children","className","labelText","hintText","isModified","validationError","showValidationError","dataTestId","id","idProp","current","modified","Children","toArray","map","child","isValidElement","cloneElement"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,OAAP,MAAoB,SAApB;;;AAgCA;AACA;AACA;AACA,OAAO,SAASC,kBAAT,CACLC,KADK,EAEe;AACpB,MAAM;AACJC,IAAAA,QADI;AAEJC,IAAAA,SAFI;AAGJC,IAAAA,SAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,eANI;AAOJC,IAAAA,mBAAmB,GAAG,IAPlB;AAQJ,mBAAeC,UARX;AASJC,IAAAA,EAAE,EAAEC;AATA,MAUFV,KAVJ;AAYA,MAAM;AAAEW,IAAAA,OAAO,EAAEF;AAAX,MAAkBb,MAAM,CAACc,MAAD,aAACA,MAAD,cAACA,MAAD,GAAWZ,OAAO,EAAlB,CAA9B;AAEA,sBACE,uDACE;AACE,IAAA,SAAS,EAAED,UAAU,CAAC,gBAAD,EAAmBK,SAAnB,EAA8B;AACjDU,MAAAA,QAAQ,EAAEP;AADuC,KAA9B,CADvB;AAIE,IAAA,OAAO,EAAEI,EAJX;AAKE,mBAAaD;AALf,KAOGL,SAPH,CADF,EAUGR,KAAK,CAACkB,QAAN,CAAeC,OAAf,CAAuBb,QAAvB,EAAiCc,GAAjC,CAAqCC,KAAK,IAAI;AAC7C,QAAI,eAACrB,KAAK,CAACsB,cAAN,CAAqBD,KAArB,CAAL,EAAkC;AAChC,0BAAO;AAAK,QAAA,SAAS,EAAEnB,UAAU,CAACK,SAAD;AAA1B,SAAwCc,KAAxC,CAAP;AACD,KAH4C,CAK7C;;;AACA,wBAAOrB,KAAK,CAACuB,YAAN,CAAmBF,KAAnB,EAA0B;AAC/Bd,MAAAA,SAAS,EAAEL,UAAU,CAACmB,KAAK,CAAChB,KAAN,CAAYE,SAAb,EAAwB;AAC3C,sBAAcI;AAD6B,OAAxB;AADU,KAA1B,CAAP;AAKD,GAXA,CAVH,EAsBGF,QAAQ,iBAAI;AAAO,IAAA,SAAS,EAAC;AAAjB,KAAyCA,QAAzC,CAtBf,EAuBGE,eAAe,IAAIC,mBAAnB,iBACC;AAAG,IAAA,SAAS,EAAC;AAAb,KAAiDD,eAAjD,CAxBJ,CADF;AA6BD;AAED,eAAeP,kBAAf","sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\nimport shortid from 'shortid';\nimport './ValidateLabelInput.scss';\n\nexport type ValidateLabelInputProps = {\n /** Element to add label to */\n children: React.ReactNode;\n\n /** Any classnames to add */\n className?: string | string[];\n\n /** Text for this validation label */\n labelText?: string;\n\n /** Small hint text next to the main label */\n hintText?: string;\n\n /** Show a modified state. Defaults to false. */\n isModified?: boolean;\n\n /** Validation error that has occurred */\n validationError?: string;\n\n /** Show the validation error if it exists. Default to true. */\n showValidationError?: boolean;\n\n /** ID to use. Auto-generates if not provided */\n id?: string;\n\n /** data-testid to apply to the label */\n 'data-testid'?: string;\n};\n\n/**\n * Takes a child and add a label and validaton error\n */\nexport function ValidateLabelInput(\n props: ValidateLabelInputProps\n): React.ReactElement {\n const {\n children,\n className,\n labelText,\n hintText,\n isModified,\n validationError,\n showValidationError = true,\n 'data-testid': dataTestId,\n id: idProp,\n } = props;\n\n const { current: id } = useRef(idProp ?? shortid());\n\n return (\n <>\n <label\n className={classNames('validate-label', className, {\n modified: isModified,\n })}\n htmlFor={id}\n data-testid={dataTestId}\n >\n {labelText}\n </label>\n {React.Children.toArray(children).map(child => {\n if (!React.isValidElement(child)) {\n return <div className={classNames(className)}>{child}</div>;\n }\n\n // toArray strips null children\n return React.cloneElement(child, {\n className: classNames(child.props.className, {\n 'is-invalid': validationError,\n }),\n });\n })}\n {hintText && <small className=\"form-text text-muted\">{hintText}</small>}\n {validationError && showValidationError && (\n <p className=\"validate-label-error text-danger\">{validationError}</p>\n )}\n </>\n );\n}\n\nexport default ValidateLabelInput;\n"],"file":"ValidateLabelInput.js"}