@idealyst/components 1.3.2 → 1.3.4
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 +4 -4
- package/src/Breadcrumb/Breadcrumb.native.tsx +17 -33
- package/src/Breadcrumb/Breadcrumb.styles.tsx +76 -49
- package/src/Breadcrumb/Breadcrumb.web.tsx +60 -56
- package/src/Button/Button.styles.tsx +8 -0
- package/src/IconButton/IconButton.styles.tsx +8 -0
- package/src/IconButton/docs.ts +11 -0
- package/src/TabBar/TabBar.native.tsx +91 -33
- package/src/TabBar/TabBar.styles.tsx +175 -160
- package/src/TabBar/TabBar.web.tsx +24 -16
- package/src/examples/IconButtonExamples.tsx +177 -0
- package/src/examples/index.ts +1 -0
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Screen, View, IconButton, Text } from '@idealyst/components';
|
|
3
|
+
import { useUnistyles } from 'react-native-unistyles';
|
|
4
|
+
|
|
5
|
+
export const IconButtonExamples = () => {
|
|
6
|
+
const handlePress = (label: string) => {
|
|
7
|
+
console.log(`IconButton pressed: ${label}`);
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const { theme } = useUnistyles();
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<Screen background="primary">
|
|
14
|
+
<View gap="xl">
|
|
15
|
+
<Text typography="h4" align="center">
|
|
16
|
+
IconButton Examples
|
|
17
|
+
</Text>
|
|
18
|
+
|
|
19
|
+
{/* Type Variants */}
|
|
20
|
+
<View gap="md">
|
|
21
|
+
<Text typography="subtitle1">Variants</Text>
|
|
22
|
+
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
23
|
+
<IconButton
|
|
24
|
+
icon="heart"
|
|
25
|
+
type="contained"
|
|
26
|
+
intent="primary"
|
|
27
|
+
onPress={() => handlePress('contained')}
|
|
28
|
+
/>
|
|
29
|
+
<IconButton
|
|
30
|
+
icon="heart"
|
|
31
|
+
type="outlined"
|
|
32
|
+
intent="primary"
|
|
33
|
+
onPress={() => handlePress('outlined')}
|
|
34
|
+
/>
|
|
35
|
+
<IconButton
|
|
36
|
+
icon="heart"
|
|
37
|
+
type="text"
|
|
38
|
+
intent="primary"
|
|
39
|
+
onPress={() => handlePress('text')}
|
|
40
|
+
/>
|
|
41
|
+
</View>
|
|
42
|
+
</View>
|
|
43
|
+
|
|
44
|
+
{/* All Intents */}
|
|
45
|
+
<View gap="md">
|
|
46
|
+
<Text typography="subtitle1">All Intents</Text>
|
|
47
|
+
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
48
|
+
{(Object.keys(theme.intents) as Array<keyof typeof theme.intents>).map((intent) => (
|
|
49
|
+
<IconButton
|
|
50
|
+
key={intent}
|
|
51
|
+
icon="star"
|
|
52
|
+
type="contained"
|
|
53
|
+
intent={intent}
|
|
54
|
+
onPress={() => handlePress(`intent-${intent}`)}
|
|
55
|
+
/>
|
|
56
|
+
))}
|
|
57
|
+
</View>
|
|
58
|
+
</View>
|
|
59
|
+
|
|
60
|
+
{/* Outlined Intents */}
|
|
61
|
+
<View gap="md">
|
|
62
|
+
<Text typography="subtitle1">Outlined Intents</Text>
|
|
63
|
+
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
64
|
+
<IconButton icon="information" type="outlined" intent="primary" onPress={() => handlePress('outlined-primary')} />
|
|
65
|
+
<IconButton icon="check-circle" type="outlined" intent="success" onPress={() => handlePress('outlined-success')} />
|
|
66
|
+
<IconButton icon="alert" type="outlined" intent="warning" onPress={() => handlePress('outlined-warning')} />
|
|
67
|
+
<IconButton icon="alert-circle" type="outlined" intent="danger" onPress={() => handlePress('outlined-danger')} />
|
|
68
|
+
<IconButton icon="cog" type="outlined" intent="neutral" onPress={() => handlePress('outlined-neutral')} />
|
|
69
|
+
</View>
|
|
70
|
+
</View>
|
|
71
|
+
|
|
72
|
+
{/* Sizes */}
|
|
73
|
+
<View gap="md">
|
|
74
|
+
<Text typography="subtitle1">Sizes</Text>
|
|
75
|
+
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
76
|
+
<IconButton icon="plus" size="xs" type="contained" intent="primary" onPress={() => handlePress('xs')} />
|
|
77
|
+
<IconButton icon="plus" size="sm" type="contained" intent="primary" onPress={() => handlePress('sm')} />
|
|
78
|
+
<IconButton icon="plus" size="md" type="contained" intent="primary" onPress={() => handlePress('md')} />
|
|
79
|
+
<IconButton icon="plus" size="lg" type="contained" intent="primary" onPress={() => handlePress('lg')} />
|
|
80
|
+
<IconButton icon="plus" size="xl" type="contained" intent="primary" onPress={() => handlePress('xl')} />
|
|
81
|
+
</View>
|
|
82
|
+
</View>
|
|
83
|
+
|
|
84
|
+
{/* Disabled States */}
|
|
85
|
+
<View gap="md">
|
|
86
|
+
<Text typography="subtitle1">Disabled States</Text>
|
|
87
|
+
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
88
|
+
<IconButton icon="pencil" type="contained" intent="primary" disabled onPress={() => handlePress('disabled-contained')} />
|
|
89
|
+
<IconButton icon="pencil" type="outlined" intent="primary" disabled onPress={() => handlePress('disabled-outlined')} />
|
|
90
|
+
<IconButton icon="pencil" type="text" intent="primary" disabled onPress={() => handlePress('disabled-text')} />
|
|
91
|
+
</View>
|
|
92
|
+
</View>
|
|
93
|
+
|
|
94
|
+
{/* Gradient Overlay */}
|
|
95
|
+
<View gap="md">
|
|
96
|
+
<Text typography="subtitle1">Gradient Overlay</Text>
|
|
97
|
+
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
98
|
+
<IconButton icon="rocket-launch" type="contained" intent="primary" onPress={() => handlePress('no-gradient')} />
|
|
99
|
+
<IconButton icon="rocket-launch" type="contained" intent="primary" gradient="darken" onPress={() => handlePress('gradient-darken')} />
|
|
100
|
+
<IconButton icon="rocket-launch" type="contained" intent="primary" gradient="lighten" onPress={() => handlePress('gradient-lighten')} />
|
|
101
|
+
</View>
|
|
102
|
+
</View>
|
|
103
|
+
|
|
104
|
+
{/* Gradient with Different Intents */}
|
|
105
|
+
<View gap="md">
|
|
106
|
+
<Text typography="subtitle1">Gradient Intents (Darken)</Text>
|
|
107
|
+
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
108
|
+
<IconButton icon="star" type="contained" intent="primary" gradient="darken" onPress={() => handlePress('gradient-primary')} />
|
|
109
|
+
<IconButton icon="check" type="contained" intent="success" gradient="darken" onPress={() => handlePress('gradient-success')} />
|
|
110
|
+
<IconButton icon="alert" type="contained" intent="warning" gradient="darken" onPress={() => handlePress('gradient-warning')} />
|
|
111
|
+
<IconButton icon="close" type="contained" intent="danger" gradient="darken" onPress={() => handlePress('gradient-danger')} />
|
|
112
|
+
<IconButton icon="cog" type="contained" intent="neutral" gradient="darken" onPress={() => handlePress('gradient-neutral')} />
|
|
113
|
+
</View>
|
|
114
|
+
</View>
|
|
115
|
+
|
|
116
|
+
{/* Loading State */}
|
|
117
|
+
<View gap="md">
|
|
118
|
+
<Text typography="subtitle1">Loading State</Text>
|
|
119
|
+
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
120
|
+
<IconButton icon="refresh" type="contained" intent="primary" loading onPress={() => handlePress('loading-contained')} />
|
|
121
|
+
<IconButton icon="refresh" type="outlined" intent="primary" loading onPress={() => handlePress('loading-outlined')} />
|
|
122
|
+
<IconButton icon="refresh" type="text" intent="primary" loading onPress={() => handlePress('loading-text')} />
|
|
123
|
+
</View>
|
|
124
|
+
</View>
|
|
125
|
+
|
|
126
|
+
{/* Interactive Loading */}
|
|
127
|
+
<View gap="md">
|
|
128
|
+
<Text typography="subtitle1">Interactive Loading</Text>
|
|
129
|
+
<InteractiveLoadingIconButton />
|
|
130
|
+
</View>
|
|
131
|
+
|
|
132
|
+
{/* Common Use Cases */}
|
|
133
|
+
<View gap="md">
|
|
134
|
+
<Text typography="subtitle1">Common Use Cases</Text>
|
|
135
|
+
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
136
|
+
<IconButton icon="magnify" type="text" intent="neutral" onPress={() => handlePress('search')} />
|
|
137
|
+
<IconButton icon="bell" type="text" intent="neutral" onPress={() => handlePress('notifications')} />
|
|
138
|
+
<IconButton icon="cog" type="text" intent="neutral" onPress={() => handlePress('settings')} />
|
|
139
|
+
<IconButton icon="dots-vertical" type="text" intent="neutral" onPress={() => handlePress('more')} />
|
|
140
|
+
<IconButton icon="close" type="text" intent="neutral" onPress={() => handlePress('close')} />
|
|
141
|
+
<IconButton icon="plus" type="contained" intent="primary" onPress={() => handlePress('add')} />
|
|
142
|
+
<IconButton icon="delete" type="contained" intent="danger" onPress={() => handlePress('delete')} />
|
|
143
|
+
</View>
|
|
144
|
+
</View>
|
|
145
|
+
</View>
|
|
146
|
+
</Screen>
|
|
147
|
+
);
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
const InteractiveLoadingIconButton = () => {
|
|
151
|
+
const [loading, setLoading] = React.useState(false);
|
|
152
|
+
|
|
153
|
+
const handlePress = async () => {
|
|
154
|
+
setLoading(true);
|
|
155
|
+
await new Promise(resolve => setTimeout(resolve, 2000));
|
|
156
|
+
setLoading(false);
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
return (
|
|
160
|
+
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
161
|
+
<IconButton
|
|
162
|
+
icon="refresh"
|
|
163
|
+
type="contained"
|
|
164
|
+
intent="primary"
|
|
165
|
+
loading={loading}
|
|
166
|
+
onPress={handlePress}
|
|
167
|
+
/>
|
|
168
|
+
<IconButton
|
|
169
|
+
icon="download"
|
|
170
|
+
type="outlined"
|
|
171
|
+
intent="success"
|
|
172
|
+
loading={loading}
|
|
173
|
+
onPress={handlePress}
|
|
174
|
+
/>
|
|
175
|
+
</View>
|
|
176
|
+
);
|
|
177
|
+
};
|
package/src/examples/index.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { ActivityIndicatorExamples } from './ActivityIndicatorExamples';
|
|
2
2
|
export { ButtonExamples } from './ButtonExamples';
|
|
3
|
+
export { IconButtonExamples } from './IconButtonExamples';
|
|
3
4
|
export { TextExamples } from './TextExamples';
|
|
4
5
|
export { ViewExamples } from './ViewExamples';
|
|
5
6
|
export { LinkExamples } from './LinkExamples';
|