Skip to content

Commit 20486bc

Browse files
minheqminheq
committed
feat: update pickers
1 parent 7005246 commit 20486bc

17 files changed

Lines changed: 9308 additions & 9273 deletions

‎src/components/KitchenSink/KitchenSink.tsx‎

Lines changed: 70 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ import {
3232
Row,
3333
Visible,
3434
ListItem,
35+
ListPicker,
3536
Modal,
3637
HistoryModal,
3738
NativePicker,
3839
Popover,
3940
ProgressBar,
4041
Rating,
41-
SelectList,
4242
Slider,
4343
Switch,
4444
Tabs,
@@ -627,6 +627,59 @@ export const KitchenSink = () => {
627627
/>
628628
</Playground>
629629

630+
<Box paddingTop={96}>
631+
<Heading size="xxxlarge" weight="500">
632+
ListPicker
633+
</Heading>
634+
</Box>
635+
636+
<Playground>
637+
<State initial={{ value: ['c', 'js', 'go'] }}>
638+
{({ state, setState }) => (
639+
<Box height={300}>
640+
<ListPicker
641+
isMulti
642+
value={state.value}
643+
onValueChange={(newValue, itemIndex) =>
644+
setState({ value: newValue })
645+
}
646+
options={[
647+
{
648+
label: 'C',
649+
value: 'c',
650+
description:
651+
'C is a general-purpose, procedural computer programming language.',
652+
},
653+
{
654+
label: 'C#',
655+
value: 'c#',
656+
description:
657+
'C# is a general-purpose, multi-paradigm programming language.',
658+
},
659+
{ label: 'C++', value: 'c++' },
660+
{ label: 'CSS', value: 'css' },
661+
{ label: 'Elixir', value: 'elixir' },
662+
{ label: 'Elm', value: 'elm' },
663+
{ label: 'Erlang', value: 'erlang' },
664+
{ label: 'Go', value: 'go' },
665+
{ label: 'Haskell', value: 'haskell' },
666+
{ label: 'HTML', value: 'html' },
667+
{ label: 'Java', value: 'java' },
668+
{ label: 'JavaScript', value: 'js' },
669+
{ label: 'Lua', value: 'lua' },
670+
{ label: 'Python', value: 'python' },
671+
{ label: 'R', value: 'r' },
672+
{ label: 'Ruby', value: 'ruby' },
673+
{ label: 'Rust', value: 'rust' },
674+
{ label: 'Switft', value: 'swift' },
675+
{ label: 'Typescript', value: 'typescript' },
676+
]}
677+
/>
678+
</Box>
679+
)}
680+
</State>
681+
</Playground>
682+
630683
<Box paddingTop={96}>
631684
<Heading size="xxxlarge" weight="500">
632685
Modal
@@ -772,7 +825,7 @@ export const KitchenSink = () => {
772825
<State initial={{ value: 'js' }}>
773826
{({ state, setState }) => (
774827
<NativePicker
775-
selectedValue={state.value}
828+
value={state.value}
776829
onValueChange={(itemValue, itemIndex) =>
777830
setState({ value: itemValue })
778831
}
@@ -880,59 +933,6 @@ export const KitchenSink = () => {
880933
</CounterState>
881934
</Playground>
882935

883-
<Box paddingTop={96}>
884-
<Heading size="xxxlarge" weight="500">
885-
SelectList
886-
</Heading>
887-
</Box>
888-
889-
<Playground>
890-
<State initial={{ value: ['c', 'js', 'go'] }}>
891-
{({ state, setState }) => (
892-
<Box height={300}>
893-
<SelectList
894-
isMulti
895-
value={state.value}
896-
onValueChange={(newValue, itemIndex) =>
897-
setState({ value: newValue })
898-
}
899-
options={[
900-
{
901-
label: 'C',
902-
value: 'c',
903-
description:
904-
'C is a general-purpose, procedural computer programming language.',
905-
},
906-
{
907-
label: 'C#',
908-
value: 'c#',
909-
description:
910-
'C# is a general-purpose, multi-paradigm programming language.',
911-
},
912-
{ label: 'C++', value: 'c++' },
913-
{ label: 'CSS', value: 'css' },
914-
{ label: 'Elixir', value: 'elixir' },
915-
{ label: 'Elm', value: 'elm' },
916-
{ label: 'Erlang', value: 'erlang' },
917-
{ label: 'Go', value: 'go' },
918-
{ label: 'Haskell', value: 'haskell' },
919-
{ label: 'HTML', value: 'html' },
920-
{ label: 'Java', value: 'java' },
921-
{ label: 'JavaScript', value: 'js' },
922-
{ label: 'Lua', value: 'lua' },
923-
{ label: 'Python', value: 'python' },
924-
{ label: 'R', value: 'r' },
925-
{ label: 'Ruby', value: 'ruby' },
926-
{ label: 'Rust', value: 'rust' },
927-
{ label: 'Switft', value: 'swift' },
928-
{ label: 'Typescript', value: 'typescript' },
929-
]}
930-
/>
931-
</Box>
932-
)}
933-
</State>
934-
</Playground>
935-
936936
<Box paddingTop={96}>
937937
<Heading size="xxxlarge" weight="500">
938938
Slider
@@ -1143,7 +1143,7 @@ export const KitchenSink = () => {
11431143
{({ state, setState }) => (
11441144
<Box flexDirection="row">
11451145
<WheelPicker
1146-
value="May"
1146+
value={state.month}
11471147
options={[
11481148
{ label: 'January', value: 'January' },
11491149
{ label: 'February', value: 'February' },
@@ -1158,20 +1158,31 @@ export const KitchenSink = () => {
11581158
{ label: 'November', value: 'November' },
11591159
{ label: 'December', value: 'December' },
11601160
]}
1161-
onValueChange={value => console.log(value)}
1161+
onValueChange={value => {
1162+
console.log(value);
1163+
setState({ month: value });
1164+
}}
11621165
/>
11631166
<WheelPicker
1167+
value={state.day}
11641168
options={new Array(31)
11651169
.fill(0)
11661170
.map((v, i) => ({ label: `${i + 1}`, value: `${i + 1}` }))}
1167-
onValueChange={value => console.log(value)}
1171+
onValueChange={value => {
1172+
console.log(value);
1173+
setState({ day: value });
1174+
}}
11681175
/>
11691176
<WheelPicker
1177+
value={state.year}
11701178
options={new Array(50).fill(0).map((v, i) => ({
11711179
label: `${2000 + i}`,
11721180
value: `${2000 + i}`,
11731181
}))}
1174-
onValueChange={value => console.log(value)}
1182+
onValueChange={value => {
1183+
console.log(value);
1184+
setState({ year: value });
1185+
}}
11751186
/>
11761187
</Box>
11771188
)}

src/components/SelectList/SelectList.mdx renamed to src/components/ListPicker/ListPicker.mdx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
---
2-
name: SelectList
2+
name: ListPicker
33
menu: Components
44
---
55

66
import { Playground, Props } from 'docz';
77

8-
import { Box, SelectList, State } from '..';
8+
import { Box, ListPicker, State } from '..';
99

10-
# SelectList
10+
# ListPicker
1111

12-
SelectList that supports single value or multiple values selected at the same item.
12+
ListPicker that supports single value or multiple values selected at the same item.
1313

14-
`SelectListItem` composes `ListItem` and `SelectList` composes `FlatList`.
15-
To use `ref`, import `SelectListWithRef` instead
14+
`ListPicker` composes `FlatList`. To use `ref`, import `ListPickerWithRef` instead
1615

1716
## Usage
1817

1918
<Playground>
2019
<State initial={{ value: ['c', 'js', 'go'] }}>
2120
{({ state, setState }) => (
2221
<Box height={300}>
23-
<SelectList
22+
<ListPicker
2423
isMulti
2524
value={state.value}
2625
onValueChange={(newValue, itemIndex) => setState({ value: newValue })}
@@ -61,6 +60,6 @@ To use `ref`, import `SelectListWithRef` instead
6160
</State>
6261
</Playground>
6362

64-
## SelectList Props
63+
## ListPicker Props
6564

66-
<Props of={SelectList} />
65+
<Props of={ListPicker} />

0 commit comments

Comments
 (0)