Skip to content

Commit 40c437d

Browse files
kastovkastov
committed
refactor: update tab management in bulk user actions drawer to use constants and improve transitions
1 parent d6efe7e commit 40c437d

File tree

4 files changed

+186
-28
lines changed

4 files changed

+186
-28
lines changed

‎src/widgets/dashboard/users/bulk-all-user-actions-drawer/bulk-all-user-actions-drawer.widget.tsx‎

Lines changed: 66 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Badge, Drawer, Group, px, Tabs, Text } from '@mantine/core'
1+
import { Badge, Box, Drawer, Group, Tabs, Text, Transition } from '@mantine/core'
22
import { PiInfo, PiPencil, PiWarning } from 'react-icons/pi'
33
import { useTranslation } from 'react-i18next'
44
import { useState } from 'react'
@@ -11,12 +11,21 @@ import { sleep } from '@shared/utils/misc'
1111
import { queryClient } from '@shared/api'
1212

1313
import { IBulkAllDrawerProps } from './interfaces/props.interface'
14+
import classes from './bulk-all-user-actions.module.css'
15+
16+
const TAB_TYPE = {
17+
updateAll: 'updateAll',
18+
actionsAll: 'actionsAll',
19+
dangerAll: 'dangerAll'
20+
} as const
21+
22+
type TabType = (typeof TAB_TYPE)[keyof typeof TAB_TYPE]
1423

1524
export const BulkAllUserActionsDrawerWidget = (props: IBulkAllDrawerProps) => {
1625
const { isDrawerOpen, handlers } = props
1726
const { t } = useTranslation()
1827

19-
const [activeTab, setActiveTab] = useState<null | string>('updateAll')
28+
const [activeTab, setActiveTab] = useState<null | TabType>(TAB_TYPE.updateAll)
2029

2130
const cleanUpDrawer = async () => {
2231
handlers.close()
@@ -46,33 +55,76 @@ export const BulkAllUserActionsDrawerWidget = (props: IBulkAllDrawerProps) => {
4655
</Group>
4756
}
4857
>
49-
<Tabs onChange={setActiveTab} value={activeTab}>
58+
<Tabs
59+
classNames={{
60+
tab: classes.tab,
61+
tabLabel: classes.tabLabel
62+
}}
63+
color="cyan"
64+
onChange={(value) => setActiveTab(value as TabType)}
65+
value={activeTab}
66+
variant="unstyled"
67+
>
5068
<Tabs.List grow mb="md">
51-
<Tabs.Tab leftSection={<PiPencil size={px('0.8rem')} />} value="updateAll">
69+
<Tabs.Tab leftSection={<PiPencil size="20px" />} value={TAB_TYPE.updateAll}>
5270
{t('common.update')}
5371
</Tabs.Tab>
54-
<Tabs.Tab leftSection={<PiInfo size={px('0.8rem')} />} value="actionsAll">
72+
<Tabs.Tab leftSection={<PiInfo size="20px" />} value={TAB_TYPE.actionsAll}>
5573
{t('bulk-all-user-actions-drawer.widget.actions')}
5674
</Tabs.Tab>
5775
<Tabs.Tab
58-
color="red"
59-
leftSection={<PiWarning size={px('0.8rem')} />}
60-
value="dangerAll"
76+
leftSection={<PiWarning color="red" size="20px" />}
77+
value={TAB_TYPE.dangerAll}
6178
>
6279
{t('bulk-all-user-actions-drawer.widget.danger')}
6380
</Tabs.Tab>
6481
</Tabs.List>
6582

66-
<Tabs.Panel value="updateAll">
67-
<BulkAllUserActionsUpdateTabFeature cleanUpDrawer={cleanUpDrawer} />
83+
<Tabs.Panel value={TAB_TYPE.updateAll}>
84+
<Transition
85+
duration={200}
86+
mounted={activeTab === TAB_TYPE.updateAll}
87+
timingFunction="linear"
88+
transition="fade"
89+
>
90+
{(styles) => (
91+
<Box style={styles}>
92+
<BulkAllUserActionsUpdateTabFeature cleanUpDrawer={cleanUpDrawer} />
93+
</Box>
94+
)}
95+
</Transition>
6896
</Tabs.Panel>
6997

70-
<Tabs.Panel value="actionsAll">
71-
<BulkAllUserActionsActionsTabFeature cleanUpDrawer={cleanUpDrawer} />
98+
<Tabs.Panel value={TAB_TYPE.actionsAll}>
99+
<Transition
100+
duration={200}
101+
mounted={activeTab === TAB_TYPE.actionsAll}
102+
timingFunction="linear"
103+
transition="fade"
104+
>
105+
{(styles) => (
106+
<Box style={styles}>
107+
<BulkAllUserActionsActionsTabFeature
108+
cleanUpDrawer={cleanUpDrawer}
109+
/>
110+
</Box>
111+
)}
112+
</Transition>
72113
</Tabs.Panel>
73114

74-
<Tabs.Panel value="dangerAll">
75-
<BulkAllUserActionsDangerTabFeature cleanUpDrawer={cleanUpDrawer} />
115+
<Tabs.Panel value={TAB_TYPE.dangerAll}>
116+
<Transition
117+
duration={200}
118+
mounted={activeTab === TAB_TYPE.dangerAll}
119+
timingFunction="linear"
120+
transition="fade"
121+
>
122+
{(styles) => (
123+
<Box style={styles}>
124+
<BulkAllUserActionsDangerTabFeature cleanUpDrawer={cleanUpDrawer} />
125+
</Box>
126+
)}
127+
</Transition>
76128
</Tabs.Panel>
77129
</Tabs>
78130
</Drawer>

‎src/widgets/dashboard/users/bulk-all-user-actions-drawer/bulk-all-user-actions.module.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.tab {
2+
position: relative;
3+
border: 1px solid var(--mantine-color-dark-4);
4+
background-color: var(--mantine-color-dark-6);
5+
border-radius: 8px;
6+
margin: 4px;
7+
8+
@mixin hover {
9+
background-color: var(--mantine-color-dark-5);
10+
}
11+
12+
&[data-active] {
13+
z-index: 1;
14+
background-color: transparent;
15+
border: 1px solid transparent;
16+
outline: 2px solid var(--mantine-color-cyan-filled);
17+
outline-offset: -2px;
18+
19+
@mixin hover {
20+
background-color: var(--mantine-color-cyan-outline-hover);
21+
}
22+
}
23+
}
24+
25+
.tabLabel {
26+
color: var(--mantine-color-white);
27+
font-weight: 500;
28+
}

‎src/widgets/dashboard/users/bulk-user-actions-drawer/bulk-user-actions-drawer.widget.tsx‎

Lines changed: 64 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Badge, Drawer, Group, px, Tabs, Text } from '@mantine/core'
1+
import { Badge, Box, Drawer, Group, Tabs, Text, Transition } from '@mantine/core'
22
import { PiInfo, PiPencil, PiWarning } from 'react-icons/pi'
33
import { useTranslation } from 'react-i18next'
44
import { useState } from 'react'
@@ -15,14 +15,23 @@ import { sleep } from '@shared/utils/misc'
1515
import { queryClient } from '@shared/api'
1616

1717
import { IProps } from './interfaces/props.interface'
18+
import classes from './bulk-user-actions.module.css'
19+
20+
const TAB_TYPE = {
21+
update: 'update',
22+
actions: 'actions',
23+
danger: 'danger'
24+
} as const
25+
26+
type TabType = (typeof TAB_TYPE)[keyof typeof TAB_TYPE]
1827

1928
export const BulkUserActionsDrawerWidget = (props: IProps) => {
2029
const { resetRowSelection } = props
2130
const { t } = useTranslation()
2231

2332
const isDrawerOpen = useBulkUsersActionsStoreIsDrawerOpen()
2433
const handlers = useBulkUsersActionsStoreActions()
25-
const [activeTab, setActiveTab] = useState<null | string>('update')
34+
const [activeTab, setActiveTab] = useState<null | TabType>(TAB_TYPE.update)
2635

2736
const uuidsLength = handlers.getUuidLength()
2837

@@ -58,33 +67,74 @@ export const BulkUserActionsDrawerWidget = (props: IProps) => {
5867
</Group>
5968
}
6069
>
61-
<Tabs onChange={setActiveTab} value={activeTab}>
70+
<Tabs
71+
classNames={{
72+
tab: classes.tab,
73+
tabLabel: classes.tabLabel
74+
}}
75+
color="cyan"
76+
onChange={(value) => setActiveTab(value as TabType)}
77+
value={activeTab}
78+
variant="unstyled"
79+
>
6280
<Tabs.List grow mb="md">
63-
<Tabs.Tab leftSection={<PiPencil size={px('0.8rem')} />} value="update">
81+
<Tabs.Tab leftSection={<PiPencil size="20px" />} value={TAB_TYPE.update}>
6482
{t('common.update')}
6583
</Tabs.Tab>
66-
<Tabs.Tab leftSection={<PiInfo size={px('0.8rem')} />} value="actions">
84+
<Tabs.Tab leftSection={<PiInfo size="20px" />} value={TAB_TYPE.actions}>
6785
{t('bulk-user-actions-drawer.widget.actions')}
6886
</Tabs.Tab>
6987
<Tabs.Tab
70-
color="red"
71-
leftSection={<PiWarning size={px('0.8rem')} />}
72-
value="danger"
88+
leftSection={<PiWarning color="red" size="20px" />}
89+
value={TAB_TYPE.danger}
7390
>
7491
{t('bulk-user-actions-drawer.widget.danger')}
7592
</Tabs.Tab>
7693
</Tabs.List>
7794

78-
<Tabs.Panel value="update">
79-
<BulkUserActionsUpdateTabFeature cleanUpDrawer={cleanUpDrawer} />
95+
<Tabs.Panel value={TAB_TYPE.update}>
96+
<Transition
97+
duration={200}
98+
mounted={activeTab === TAB_TYPE.update}
99+
timingFunction="linear"
100+
transition="fade"
101+
>
102+
{(styles) => (
103+
<Box style={styles}>
104+
<BulkUserActionsUpdateTabFeature cleanUpDrawer={cleanUpDrawer} />
105+
</Box>
106+
)}
107+
</Transition>
80108
</Tabs.Panel>
81109

82-
<Tabs.Panel value="actions">
83-
<BulkUserActionsActionsTabFeature cleanUpDrawer={cleanUpDrawer} />
110+
<Tabs.Panel value={TAB_TYPE.actions}>
111+
<Transition
112+
duration={200}
113+
mounted={activeTab === TAB_TYPE.actions}
114+
timingFunction="linear"
115+
transition="fade"
116+
>
117+
{(styles) => (
118+
<Box style={styles}>
119+
<BulkUserActionsActionsTabFeature cleanUpDrawer={cleanUpDrawer} />
120+
</Box>
121+
)}
122+
</Transition>
84123
</Tabs.Panel>
85124

86-
<Tabs.Panel value="danger">
87-
<BulkUserActionsDangerTabFeature cleanUpDrawer={cleanUpDrawer} />
125+
<Tabs.Panel value={TAB_TYPE.danger}>
126+
<Transition
127+
duration={200}
128+
mounted={activeTab === TAB_TYPE.danger}
129+
timingFunction="linear"
130+
transition="fade"
131+
>
132+
{(styles) => (
133+
<Box style={styles}>
134+
<BulkUserActionsDangerTabFeature cleanUpDrawer={cleanUpDrawer} />
135+
</Box>
136+
)}
137+
</Transition>
88138
</Tabs.Panel>
89139
</Tabs>
90140
</Drawer>

‎src/widgets/dashboard/users/bulk-user-actions-drawer/bulk-user-actions.module.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.tab {
2+
position: relative;
3+
border: 1px solid var(--mantine-color-dark-4);
4+
background-color: var(--mantine-color-dark-6);
5+
border-radius: 8px;
6+
margin: 4px;
7+
8+
@mixin hover {
9+
background-color: var(--mantine-color-dark-5);
10+
}
11+
12+
&[data-active] {
13+
z-index: 1;
14+
background-color: transparent;
15+
border: 1px solid transparent;
16+
outline: 2px solid var(--mantine-color-cyan-filled);
17+
outline-offset: -2px;
18+
19+
@mixin hover {
20+
background-color: var(--mantine-color-cyan-outline-hover);
21+
}
22+
}
23+
}
24+
25+
.tabLabel {
26+
color: var(--mantine-color-white);
27+
font-weight: 500;
28+
}

0 commit comments

Comments
 (0)