Skip to content

Commit b04685a

Browse files
author
Artur Bien
committed
feat(colorpicker): add 'wide' prop
1 parent ecbcf15 commit b04685a

File tree

2 files changed

+92
-9
lines changed

2 files changed

+92
-9
lines changed

example/src/examples/ColorPickerExample.tsx

Lines changed: 86 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
ColorPicker,
88
Divider,
99
Button,
10+
Window,
11+
Text,
1012
} from 'react95-native';
1113

1214
import Container from '../util/Container';
@@ -42,6 +44,24 @@ const ColorPickerExample = () => {
4244
setColor(value);
4345
setColorMenuOpen(false);
4446
};
47+
48+
const [secondColorMenuOpen, setSecondColorMenuOpen] = React.useState(true);
49+
const [secondColor, setSecondColor] = React.useState(colors[6]);
50+
const [tempSecondColor, setTempSecondColor] = React.useState(secondColor);
51+
52+
const handleTempSecondColorChange = (value: string) => {
53+
setTempSecondColor(value);
54+
};
55+
56+
const handleSecondColorApply = () => {
57+
setSecondColor(tempSecondColor);
58+
setSecondColorMenuOpen(false);
59+
};
60+
const handleSecondColorCancel = () => {
61+
setTempSecondColor(secondColor);
62+
setSecondColorMenuOpen(false);
63+
};
64+
4565
return (
4666
<Container>
4767
<Container.Section title='Default'>
@@ -61,12 +81,14 @@ const ColorPickerExample = () => {
6181
/>
6282
}
6383
>
64-
<ColorPicker
65-
onChange={handleColorChange}
66-
value={color}
67-
colors={colors}
68-
colorsPerRow={5}
69-
/>
84+
<View style={{ padding: 4 }}>
85+
<ColorPicker
86+
onChange={handleColorChange}
87+
value={color}
88+
colors={colors}
89+
colorsPerRow={5}
90+
/>
91+
</View>
7092
<Divider style={{ marginVertical: 4 }} />
7193
<Button
7294
disabled
@@ -77,9 +99,66 @@ const ColorPickerExample = () => {
7799
Other...
78100
</Button>
79101
</Menu>
80-
<ColorButton color='red' disabled />
102+
<ColorButton
103+
onPress={() => setSecondColorMenuOpen(true)}
104+
color={secondColor}
105+
/>
81106
</View>
82107
</Container.Section>
108+
109+
{secondColorMenuOpen && (
110+
<View
111+
style={{
112+
position: 'absolute',
113+
top: 0,
114+
left: 0,
115+
right: 0,
116+
bottom: 0,
117+
alignItems: 'center',
118+
justifyContent: 'center',
119+
}}
120+
>
121+
<Window title='Colors' onClose={handleSecondColorCancel}>
122+
<View style={{ padding: 8 }}>
123+
<Text style={{ marginVertical: 8, fontSize: 16 }}>
124+
Basic colors:
125+
</Text>
126+
<ColorPicker
127+
onChange={handleTempSecondColorChange}
128+
value={tempSecondColor}
129+
wide
130+
colors={colors}
131+
colorsPerRow={5}
132+
/>
133+
<View
134+
style={{
135+
flexDirection: 'row',
136+
alignItems: 'flex-end',
137+
marginTop: 8,
138+
}}
139+
>
140+
<Button
141+
style={{
142+
marginRight: 2,
143+
flex: 1,
144+
}}
145+
onPress={handleSecondColorCancel}
146+
>
147+
Cancel
148+
</Button>
149+
<Button
150+
style={{
151+
flex: 1,
152+
}}
153+
onPress={handleSecondColorApply}
154+
>
155+
Ok
156+
</Button>
157+
</View>
158+
</View>
159+
</Window>
160+
</View>
161+
)}
83162
</Container>
84163
);
85164
};

src/ColorPicker/ColorPicker.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ type Props = {
2727
onChange?: (value: Color) => void;
2828
style?: StyleProp<ViewStyle>;
2929
value?: Color;
30+
wide?: boolean;
3031
};
3132

3233
const ColorPicker = ({
@@ -35,6 +36,7 @@ const ColorPicker = ({
3536
onChange,
3637
style,
3738
value,
39+
wide = false,
3840
...rest
3941
}: Props) => {
4042
const theme = useContext(ThemeContext);
@@ -56,8 +58,10 @@ const ColorPicker = ({
5658
key={color}
5759
onPress={() => handleColorPress(color)}
5860
style={[
59-
styles.color,
61+
styles.colorPreview,
6062
{
63+
width: (wide ? 1.4 : 1) * colorPreviewSize,
64+
height: colorPreviewSize,
6165
borderWidth: 2,
6266
borderColor: isSelected
6367
? theme.materialText
@@ -96,7 +100,7 @@ const styles = StyleSheet.create({
96100
row: {
97101
flexDirection: 'row',
98102
},
99-
color: {
103+
colorPreview: {
100104
width: colorPreviewSize,
101105
height: colorPreviewSize,
102106
},

0 commit comments

Comments
 (0)