7
7
ColorPicker ,
8
8
Divider ,
9
9
Button ,
10
+ Window ,
11
+ Text ,
10
12
} from 'react95-native' ;
11
13
12
14
import Container from '../util/Container' ;
@@ -42,6 +44,24 @@ const ColorPickerExample = () => {
42
44
setColor ( value ) ;
43
45
setColorMenuOpen ( false ) ;
44
46
} ;
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
+
45
65
return (
46
66
< Container >
47
67
< Container . Section title = 'Default' >
@@ -61,12 +81,14 @@ const ColorPickerExample = () => {
61
81
/>
62
82
}
63
83
>
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 >
70
92
< Divider style = { { marginVertical : 4 } } />
71
93
< Button
72
94
disabled
@@ -77,9 +99,66 @@ const ColorPickerExample = () => {
77
99
Other...
78
100
</ Button >
79
101
</ Menu >
80
- < ColorButton color = 'red' disabled />
102
+ < ColorButton
103
+ onPress = { ( ) => setSecondColorMenuOpen ( true ) }
104
+ color = { secondColor }
105
+ />
81
106
</ View >
82
107
</ 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
+ ) }
83
162
</ Container >
84
163
) ;
85
164
} ;
0 commit comments