@moises.ai/design-system 4.17.7 → 4.17.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { forwardRef } from 'react'
|
|
2
2
|
import classNames from 'classnames'
|
|
3
|
+
import { Spinner } from '@radix-ui/themes'
|
|
3
4
|
import { LockIcon } from '../../icons'
|
|
4
5
|
import styles from './InstrumentSelect.module.css'
|
|
5
6
|
|
|
@@ -22,7 +23,8 @@ import styles from './InstrumentSelect.module.css'
|
|
|
22
23
|
|
|
23
24
|
/**
|
|
24
25
|
* Individual instrument card with five visual states (default, hover, checked, disabled,
|
|
25
|
-
* disabled-checked).
|
|
26
|
+
* disabled-checked). In the `disabled-checked` state (selected but non-interactive) a spinner
|
|
27
|
+
* replaces the icon to signal an in-progress action.
|
|
26
28
|
*
|
|
27
29
|
* Native `<button>` with `aria-pressed` for selection (works for both single and multi-select)
|
|
28
30
|
* and `aria-disabled` for locked/disabled items. The HTML `disabled` attribute is intentionally
|
|
@@ -63,6 +65,8 @@ export const InstrumentSelectCard = forwardRef(function InstrumentSelectCard(
|
|
|
63
65
|
? 'checked'
|
|
64
66
|
: 'default')
|
|
65
67
|
|
|
68
|
+
const showSpinner = computedState === 'disabled-checked'
|
|
69
|
+
|
|
66
70
|
const renderIcon = () => {
|
|
67
71
|
if (!Icon) return null
|
|
68
72
|
if (typeof Icon === 'function') {
|
|
@@ -84,7 +88,11 @@ export const InstrumentSelectCard = forwardRef(function InstrumentSelectCard(
|
|
|
84
88
|
className={classNames(styles.card, className)}
|
|
85
89
|
{...props}
|
|
86
90
|
>
|
|
87
|
-
{Icon &&
|
|
91
|
+
{(Icon || showSpinner) && (
|
|
92
|
+
<>
|
|
93
|
+
{showSpinner ? <Spinner size="2" state='1'/> : <span className={styles.cardIcon}> {renderIcon()} </span>}
|
|
94
|
+
</>
|
|
95
|
+
)}
|
|
88
96
|
{text != null && <span className={styles.cardText}>{text}</span>}
|
|
89
97
|
{locked && <LockIcon width={12} height={12} className={styles.lockIcon} />}
|
|
90
98
|
</button>
|
|
@@ -23,8 +23,18 @@ export const NumberPicker = ({
|
|
|
23
23
|
onChange(value - 1)
|
|
24
24
|
}, [min, onChange, value])
|
|
25
25
|
|
|
26
|
+
const stopClickPropagation = useCallback((e) => {
|
|
27
|
+
e.stopPropagation()
|
|
28
|
+
}, [])
|
|
29
|
+
|
|
26
30
|
return (
|
|
27
|
-
<Flex
|
|
31
|
+
<Flex
|
|
32
|
+
direction="row"
|
|
33
|
+
gap="1"
|
|
34
|
+
align="center"
|
|
35
|
+
justify="center"
|
|
36
|
+
onClick={stopClickPropagation}
|
|
37
|
+
>
|
|
28
38
|
{label && (
|
|
29
39
|
<Text size="2" weight="medium">
|
|
30
40
|
{label}
|
|
@@ -46,11 +56,13 @@ export const NumberPicker = ({
|
|
|
46
56
|
<Flex
|
|
47
57
|
align="center"
|
|
48
58
|
justify="center"
|
|
59
|
+
onClick={stopClickPropagation}
|
|
49
60
|
style={{
|
|
50
61
|
height: '24px',
|
|
51
62
|
minWidth: '42px',
|
|
52
63
|
borderRadius: 'var(--radius-2)',
|
|
53
64
|
backgroundColor: 'var(--neutral-alpha-3 )',
|
|
65
|
+
cursor: 'default',
|
|
54
66
|
}}
|
|
55
67
|
>
|
|
56
68
|
<Text size="2">{value > 0 ? `+${value}` : value}</Text>
|
|
@@ -36,9 +36,13 @@ export const Default = {
|
|
|
36
36
|
onInsertAllTracks={args.onInsertAllTracks}
|
|
37
37
|
onProjectClick={args.onProjectClick}
|
|
38
38
|
>
|
|
39
|
-
{(tracks) =>
|
|
39
|
+
{({ projectId, tracks }) =>
|
|
40
40
|
tracks.map((track) => (
|
|
41
|
-
<ProjectsList.Track
|
|
41
|
+
<ProjectsList.Track
|
|
42
|
+
projectId={projectId}
|
|
43
|
+
key={track.id}
|
|
44
|
+
{...track}
|
|
45
|
+
/>
|
|
42
46
|
))
|
|
43
47
|
}
|
|
44
48
|
</ProjectsList>
|
|
@@ -84,9 +88,13 @@ export const WithEmptyProjects = {
|
|
|
84
88
|
onInsertAllTracks={args.onInsertAllTracks}
|
|
85
89
|
onProjectClick={args.onProjectClick}
|
|
86
90
|
>
|
|
87
|
-
{(tracks) =>
|
|
91
|
+
{({ projectId, tracks }) =>
|
|
88
92
|
tracks.map((track) => (
|
|
89
|
-
<ProjectsList.Track
|
|
93
|
+
<ProjectsList.Track
|
|
94
|
+
projectId={projectId}
|
|
95
|
+
key={track.id}
|
|
96
|
+
{...track}
|
|
97
|
+
/>
|
|
90
98
|
))
|
|
91
99
|
}
|
|
92
100
|
</ProjectsList>
|
|
@@ -133,9 +141,13 @@ export const WithProjectLoading = {
|
|
|
133
141
|
onInsertAllTracks={args.onInsertAllTracks}
|
|
134
142
|
onProjectClick={args.onProjectClick}
|
|
135
143
|
>
|
|
136
|
-
{(tracks) =>
|
|
144
|
+
{({ projectId, tracks }) =>
|
|
137
145
|
tracks.map((track) => (
|
|
138
|
-
<ProjectsList.Track
|
|
146
|
+
<ProjectsList.Track
|
|
147
|
+
projectId={projectId}
|
|
148
|
+
key={track.id}
|
|
149
|
+
{...track}
|
|
150
|
+
/>
|
|
139
151
|
))
|
|
140
152
|
}
|
|
141
153
|
</ProjectsList>
|
|
@@ -182,9 +194,13 @@ export const WithProjectFailed = {
|
|
|
182
194
|
onInsertAllTracks={args.onInsertAllTracks}
|
|
183
195
|
onProjectClick={args.onProjectClick}
|
|
184
196
|
>
|
|
185
|
-
{(tracks) =>
|
|
197
|
+
{({ projectId, tracks }) =>
|
|
186
198
|
tracks.map((track) => (
|
|
187
|
-
<ProjectsList.Track
|
|
199
|
+
<ProjectsList.Track
|
|
200
|
+
projectId={projectId}
|
|
201
|
+
key={track.id}
|
|
202
|
+
{...track}
|
|
203
|
+
/>
|
|
188
204
|
))
|
|
189
205
|
}
|
|
190
206
|
</ProjectsList>
|