Skip to content
This repository was archived by the owner on Jan 15, 2025. It is now read-only.

Commit a6952aa

Browse files
thevuongthevuong
committed
feat(select): add loading state
1 parent 22e5b0d commit a6952aa

File tree

5 files changed

+144
-19
lines changed

5 files changed

+144
-19
lines changed

‎apps/docs/src/stories/select/select.stories.tsx

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,106 @@ export const Popper: Story = {
129129
),
130130
};
131131

132+
/* -----------------------------------------------------------------------------
133+
* Story: Trigger has loading state
134+
* -------------------------------------------------------------------------- */
135+
136+
export const TriggerHasLoadingState: Story = {
137+
render: () => (
138+
<Select>
139+
<SelectTrigger aria-label="Food" className="flex" loading>
140+
<SelectValue placeholder="Select a fruit…" />
141+
</SelectTrigger>
142+
143+
<SelectContent>
144+
<SelectGroup>
145+
<SelectLabel>Fruits</SelectLabel>
146+
<SelectItem value="apple">Apple</SelectItem>
147+
<SelectItem value="banana">Banana</SelectItem>
148+
<SelectItem value="blueberry">Blueberry</SelectItem>
149+
<SelectItem value="grapes">Grapes</SelectItem>
150+
<SelectItem value="pineapple">Pineapple</SelectItem>
151+
</SelectGroup>
152+
153+
<SelectSeparator />
154+
155+
<SelectGroup>
156+
<SelectLabel>Vegetables</SelectLabel>
157+
<SelectItem value="aubergine">Aubergine</SelectItem>
158+
<SelectItem value="broccoli">Broccoli</SelectItem>
159+
<SelectItem disabled value="carrot">
160+
Carrot
161+
</SelectItem>
162+
<SelectItem value="courgette">Courgette</SelectItem>
163+
<SelectItem value="leek">Leek</SelectItem>
164+
</SelectGroup>
165+
166+
<SelectSeparator />
167+
168+
<SelectGroup>
169+
<SelectLabel>Meat</SelectLabel>
170+
<SelectItem value="beef">Beef</SelectItem>
171+
<SelectItem value="chicken">Chicken</SelectItem>
172+
<SelectItem value="lamb">Lamb</SelectItem>
173+
<SelectItem value="pork" variant="destructive">
174+
Pork
175+
</SelectItem>
176+
</SelectGroup>
177+
</SelectContent>
178+
</Select>
179+
),
180+
};
181+
182+
/* -----------------------------------------------------------------------------
183+
* Story: Trigger disabled
184+
* -------------------------------------------------------------------------- */
185+
186+
export const TriggerDisabled: Story = {
187+
render: () => (
188+
<Select>
189+
<SelectTrigger aria-label="Food" className="flex" disabled>
190+
<SelectValue placeholder="Select a fruit…" />
191+
</SelectTrigger>
192+
193+
<SelectContent>
194+
<SelectGroup>
195+
<SelectLabel>Fruits</SelectLabel>
196+
<SelectItem value="apple">Apple</SelectItem>
197+
<SelectItem value="banana">Banana</SelectItem>
198+
<SelectItem value="blueberry">Blueberry</SelectItem>
199+
<SelectItem value="grapes">Grapes</SelectItem>
200+
<SelectItem value="pineapple">Pineapple</SelectItem>
201+
</SelectGroup>
202+
203+
<SelectSeparator />
204+
205+
<SelectGroup>
206+
<SelectLabel>Vegetables</SelectLabel>
207+
<SelectItem value="aubergine">Aubergine</SelectItem>
208+
<SelectItem value="broccoli">Broccoli</SelectItem>
209+
<SelectItem disabled value="carrot">
210+
Carrot
211+
</SelectItem>
212+
<SelectItem value="courgette">Courgette</SelectItem>
213+
<SelectItem value="leek">Leek</SelectItem>
214+
</SelectGroup>
215+
216+
<SelectSeparator />
217+
218+
<SelectGroup>
219+
<SelectLabel>Meat</SelectLabel>
220+
<SelectItem value="beef">Beef</SelectItem>
221+
<SelectItem value="chicken">Chicken</SelectItem>
222+
<SelectItem value="lamb">Lamb</SelectItem>
223+
<SelectItem value="pork" variant="destructive">
224+
Pork
225+
</SelectItem>
226+
</SelectGroup>
227+
</SelectContent>
228+
</Select>
229+
),
230+
};
231+
132232
/* -----------------------------------------------------------------------------
133233
* Story: ReactHookForm
134234
* -------------------------------------------------------------------------- */

‎packages/ui/CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @codefixlabs/ui
22

3+
## 0.1.47
4+
5+
### Patch Changes
6+
7+
- Add loading state
8+
39
## 0.1.46
410

511
### Patch Changes

‎packages/ui/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@codefixlabs/ui",
3-
"version": "0.1.46",
3+
"version": "0.1.47",
44
"license": "MIT",
55
"sideEffects": false,
66
"exports": {

‎packages/ui/src/classes/button.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export const buttonVariants = cva(
116116
[
117117
'relative select-none items-center gap-2 overflow-hidden whitespace-nowrap text-sm font-medium transition-colors',
118118
'focus:ring-ring/40 focus:outline-none focus:ring-2',
119-
'data-state-open:ring-ring/20 data-state-open:outline-none data-state-open:ring-2',
119+
'data-state-open:ring-ring/10 data-state-open:outline-none data-state-open:ring-2',
120120
'data-disabled:cursor-not-allowed data-disabled:ring-0',
121121
],
122122
{

‎packages/ui/src/react/select.tsx

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,12 @@ import {
1818
} from '@radix-ui/react-select';
1919
import type { VariantProps } from 'class-variance-authority';
2020
import { cva } from 'class-variance-authority';
21-
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
21+
import {
22+
CheckIcon,
23+
ChevronDownIcon,
24+
ChevronUpIcon,
25+
Loader2Icon,
26+
} from 'lucide-react';
2227
import * as React from 'react';
2328
import { forwardRef } from 'react';
2429
import { twMerge } from 'tailwind-merge';
@@ -31,7 +36,8 @@ const selectTriggerVariants = cva(
3136
[
3237
'border-input h-10 select-none items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm',
3338
'focus:ring-ring/40 focus:outline-none focus:ring-2',
34-
'disabled:opacity-50/40 disabled:cursor-not-allowed',
39+
'data-state-open:ring-ring/10 data-state-open:outline-none data-state-open:ring-2',
40+
'disabled:cursor-not-allowed disabled:opacity-50',
3541
'placeholder:text-muted-foreground',
3642
],
3743
{
@@ -161,21 +167,34 @@ SelectIcon.displayName = Icon.displayName;
161167

162168
export const SelectTrigger = forwardRef<
163169
React.ElementRef<typeof Trigger>,
164-
React.ComponentPropsWithoutRef<typeof Trigger> & SelectTriggerVariants
165-
>(({ children, className, size, block, ...props }, forwardedRef) => (
166-
<Trigger
167-
className={twMerge(selectTriggerVariants({ block, size }), className)}
168-
ref={forwardedRef}
169-
{...props}
170-
>
171-
<>
172-
{children}
173-
<SelectIcon className="flex h-4 w-4">
174-
<ChevronDownIcon className="h-4 w-4 opacity-50" />
175-
</SelectIcon>
176-
</>
177-
</Trigger>
178-
));
170+
React.ComponentPropsWithoutRef<typeof Trigger> &
171+
SelectTriggerVariants & {
172+
loading?: boolean;
173+
}
174+
>(
175+
(
176+
{ children, className, size, block, disabled, loading, ...props },
177+
forwardedRef,
178+
) => (
179+
<Trigger
180+
className={twMerge(selectTriggerVariants({ block, size }), className)}
181+
disabled={loading ? true : disabled}
182+
ref={forwardedRef}
183+
{...props}
184+
>
185+
<>
186+
{children}
187+
<SelectIcon className="flex h-4 w-4">
188+
{loading ? (
189+
<Loader2Icon className="h-4 w-4 animate-spin" />
190+
) : (
191+
<ChevronDownIcon className="h-4 w-4 opacity-50" />
192+
)}
193+
</SelectIcon>
194+
</>
195+
</Trigger>
196+
),
197+
);
179198

180199
SelectTrigger.displayName = Trigger.displayName;
181200

0 commit comments

Comments
 (0)