Skip to content

Commit 296da56

Browse files
author
Amrit Kashyap Borah
committed
Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/rjsf-select-picker
2 parents 041a2be + a692030 commit 296da56

13 files changed

Lines changed: 157 additions & 7 deletions

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.17.0-pre-0",
3+
"version": "1.17.0-pre-1",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/IconV2/ic-activity.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/Assets/IconV2/ic-folder.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/Assets/IconV2/ic-namespace.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/Shared/Components/Icon/Icon.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { ReactComponent as IC73strings } from '@IconsV2/ic-73strings.svg'
44
import { ReactComponent as ICAborted } from '@IconsV2/ic-aborted.svg'
5+
import { ReactComponent as ICActivity } from '@IconsV2/ic-activity.svg'
56
import { ReactComponent as ICAdd } from '@IconsV2/ic-add.svg'
67
import { ReactComponent as ICAmazonEks } from '@IconsV2/ic-amazon-eks.svg'
78
import { ReactComponent as ICApica } from '@IconsV2/ic-apica.svg'
@@ -90,6 +91,7 @@ import { ReactComponent as ICFiles } from '@IconsV2/ic-files.svg'
9091
import { ReactComponent as ICFilter } from '@IconsV2/ic-filter.svg'
9192
import { ReactComponent as ICFilterApplied } from '@IconsV2/ic-filter-applied.svg'
9293
import { ReactComponent as ICFlask } from '@IconsV2/ic-flask.svg'
94+
import { ReactComponent as ICFolder } from '@IconsV2/ic-folder.svg'
9395
import { ReactComponent as ICFolderColor } from '@IconsV2/ic-folder-color.svg'
9496
import { ReactComponent as ICFolderUser } from '@IconsV2/ic-folder-user.svg'
9597
import { ReactComponent as ICGavel } from '@IconsV2/ic-gavel.svg'
@@ -147,6 +149,7 @@ import { ReactComponent as ICMissing } from '@IconsV2/ic-missing.svg'
147149
import { ReactComponent as ICMobile } from '@IconsV2/ic-mobile.svg'
148150
import { ReactComponent as ICMonitoring } from '@IconsV2/ic-monitoring.svg'
149151
import { ReactComponent as ICMoreVertical } from '@IconsV2/ic-more-vertical.svg'
152+
import { ReactComponent as ICNamespace } from '@IconsV2/ic-namespace.svg'
150153
import { ReactComponent as ICNew } from '@IconsV2/ic-new.svg'
151154
import { ReactComponent as ICNodeScript } from '@IconsV2/ic-node-script.svg'
152155
import { ReactComponent as ICOidc } from '@IconsV2/ic-oidc.svg'
@@ -220,6 +223,7 @@ import { IconBaseProps } from './types'
220223
export const iconMap = {
221224
'ic-73strings': IC73strings,
222225
'ic-aborted': ICAborted,
226+
'ic-activity': ICActivity,
223227
'ic-add': ICAdd,
224228
'ic-amazon-eks': ICAmazonEks,
225229
'ic-apica': ICApica,
@@ -310,6 +314,7 @@ export const iconMap = {
310314
'ic-flask': ICFlask,
311315
'ic-folder-color': ICFolderColor,
312316
'ic-folder-user': ICFolderUser,
317+
'ic-folder': ICFolder,
313318
'ic-gavel': ICGavel,
314319
'ic-gear': ICGear,
315320
'ic-gift-gradient': ICGiftGradient,
@@ -365,6 +370,7 @@ export const iconMap = {
365370
'ic-mobile': ICMobile,
366371
'ic-monitoring': ICMonitoring,
367372
'ic-more-vertical': ICMoreVertical,
373+
'ic-namespace': ICNamespace,
368374
'ic-new': ICNew,
369375
'ic-node-script': ICNodeScript,
370376
'ic-oidc': ICOidc,

‎src/Shared/Components/SelectPicker/FilterSelectPicker.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,13 @@ const FilterSelectPicker = ({
3232
appliedFilterOptions,
3333
handleApplyFilter,
3434
options,
35+
menuIsOpen = false,
36+
onMenuClose,
3537
...props
3638
}: FilterSelectPickerProps) => {
3739
const selectRef = useRef<SelectPickerProps<string | number, true>['selectRef']['current']>()
3840

39-
const [isMenuOpen, setIsMenuOpen] = useState(false)
41+
const [isMenuOpen, setIsMenuOpen] = useState(menuIsOpen)
4042
const { triggerAutoClickTimestamp, setTriggerAutoClickTimestampToNow, resetTriggerAutoClickTimestamp } =
4143
useTriggerAutoClickTimestamp()
4244

@@ -64,6 +66,7 @@ const FilterSelectPicker = ({
6466
const closeMenu = () => {
6567
resetTriggerAutoClickTimestamp()
6668
setIsMenuOpen(false)
69+
onMenuClose?.()
6770
}
6871

6972
const handleSelectOnChange: SelectPickerProps<number | string, true>['onChange'] = (selectedOptionsToUpdate) => {
@@ -88,6 +91,11 @@ const FilterSelectPicker = ({
8891
}
8992
}
9093

94+
const handleMenuClose = () => {
95+
onMenuClose?.()
96+
;(handleApplyClick as () => void)()
97+
}
98+
9199
useEffect(() => {
92100
if (isMenuOpen) {
93101
registerShortcut({ keys: APPLY_FILTER_SHORTCUT_KEYS, callback: handleApplyClick as () => void })
@@ -108,7 +116,7 @@ const FilterSelectPicker = ({
108116
isMulti
109117
menuIsOpen={isMenuOpen}
110118
onMenuOpen={openMenu}
111-
onMenuClose={handleApplyClick as () => void}
119+
onMenuClose={handleMenuClose}
112120
onChange={handleSelectOnChange}
113121
menuListFooterConfig={{
114122
type: 'button',

‎src/Shared/Components/SelectPicker/GroupedFilterSelectPicker.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { KeyboardEvent, useEffect, useRef, useState } from 'react'
2+
3+
import { useRegisterShortcut } from '@Common/Hooks'
4+
5+
import { ActionMenu, ActionMenuItemType, ActionMenuProps } from '../ActionMenu'
6+
import { Icon } from '../Icon'
7+
import FilterSelectPicker from './FilterSelectPicker'
8+
import { GroupedFilterSelectPickerProps } from './type'
9+
10+
import './selectPicker.scss'
11+
12+
export const GroupedFilterSelectPicker = <T extends string | number>({
13+
id,
14+
filterSelectPickerPropsMap,
15+
isFilterApplied,
16+
...restProps
17+
}: GroupedFilterSelectPickerProps<T>) => {
18+
// STATES
19+
const [selectedActionMenuItem, setSelectedActionMenuItem] = useState<ActionMenuItemType<T>['id']>(null)
20+
21+
// REFS
22+
const shouldFocusActionMenuRef = useRef<boolean>(false)
23+
const triggerButtonRef = useRef<HTMLButtonElement>()
24+
25+
// HOOKS
26+
const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
27+
28+
useEffect(() => {
29+
const shortcutCallback = () => {
30+
triggerButtonRef.current?.click()
31+
}
32+
33+
registerShortcut({ keys: ['F'], callback: shortcutCallback })
34+
35+
return () => {
36+
unregisterShortcut(['F'])
37+
}
38+
}, [])
39+
40+
useEffect(() => {
41+
if (!selectedActionMenuItem && shouldFocusActionMenuRef.current) {
42+
triggerButtonRef.current?.click()
43+
shouldFocusActionMenuRef.current = false
44+
}
45+
}, [selectedActionMenuItem])
46+
47+
// HANDLERS
48+
const handleMenuItemClick: ActionMenuProps<T>['onClick'] = (item) => {
49+
setSelectedActionMenuItem(item.id)
50+
}
51+
52+
const handleMenuClose = () => {
53+
setSelectedActionMenuItem(null)
54+
}
55+
56+
const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
57+
if (e.key === 'Backspace' && !(e.target as HTMLInputElement).value) {
58+
setSelectedActionMenuItem(null)
59+
shouldFocusActionMenuRef.current = true
60+
}
61+
}
62+
63+
return selectedActionMenuItem ? (
64+
<div className="w-200">
65+
<FilterSelectPicker
66+
{...filterSelectPickerPropsMap[selectedActionMenuItem]}
67+
menuIsOpen
68+
onMenuClose={handleMenuClose}
69+
onKeyDown={handleKeyDown}
70+
autoFocus
71+
/>
72+
</div>
73+
) : (
74+
<ActionMenu {...restProps} id={id} isSearchable onClick={handleMenuItemClick}>
75+
<button
76+
type="button"
77+
ref={triggerButtonRef}
78+
data-testid={id}
79+
className="grouped-filter-select-picker__button dc__transparent px-7 py-5 border__primary br-4 flex dc__gap-6 bg__hover bg__secondary"
80+
>
81+
<Icon name={isFilterApplied ? 'ic-filter-applied' : 'ic-filter'} color="N700" />
82+
<span className="fs-12 lh-20 fw-6 cn-9">Filter</span>
83+
<kbd className="icon-dim-20 flex bg__primary border__primary br-2 shadow__key fs-12 lh-20 cn-7">F</kbd>
84+
</button>
85+
</ActionMenu>
86+
)
87+
}

‎src/Shared/Components/SelectPicker/SelectPicker.component.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { ReactElement, useCallback, useMemo, useRef, useState } from 'react'
17+
import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
1818
import {
1919
GroupHeadingProps,
2020
MultiValueProps,
@@ -225,6 +225,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
225225
labelTippyCustomizedConfig,
226226
labelTooltipConfig,
227227
hideFormFieldInfo,
228+
autoFocus,
228229
...props
229230
}: SelectPickerProps<OptionValue, IsMulti>) => {
230231
const innerRef = useRef<SelectPickerProps<OptionValue, IsMulti>['selectRef']['current']>(null)
@@ -399,6 +400,14 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
399400
props.onChange?.(...params)
400401
}
401402

403+
useEffect(() => {
404+
if (autoFocus) {
405+
setTimeout(() => {
406+
selectRef.current?.focus()
407+
}, 100)
408+
}
409+
}, [autoFocus])
410+
402411
return (
403412
<FormFieldWrapper
404413
inputId={inputId}
@@ -454,6 +463,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
454463
shouldRenderCustomOptions={shouldRenderCustomOptions || false}
455464
isMulti={isMulti}
456465
ref={selectRef}
466+
autoFocus={autoFocus}
457467
components={{
458468
IndicatorSeparator: null,
459469
LoadingIndicator: null,

‎src/Shared/Components/SelectPicker/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
export { ValueContainerWithLoadingShimmer } from './common'
1818
export { default as FilterSelectPicker } from './FilterSelectPicker'
19+
export * from './GroupedFilterSelectPicker'
1920
export { default as SelectPicker } from './SelectPicker.component'
2021
export * from './SelectPickerTextArea.component'
2122
export * from './type'

0 commit comments

Comments
 (0)