@@ -11,7 +11,7 @@ import { colorConverter, convert, openSheet, transparentBase64 } from "../../../
1111
1212const CustomColorPickerActionSheet = findByName ( "CustomColorPickerActionSheet" ) ;
1313
14- const { alphaToHex, hexAlphaToPercent, toPercentage , toDecimal , formatDecimal } = convert ;
14+ const { alphaToHex, hexAlphaToPercent } = convert ;
1515
1616const { ScrollView, View, Text, TouchableOpacity, TextInput, Pressable, Image, Animated } = General ;
1717const { FormLabel, FormIcon, FormArrow, FormRow, FormSwitch, FormSwitchRow, FormSection, FormDivider, FormInput, FormSliderRow } = Forms ;
@@ -40,16 +40,18 @@ const customizeableColors = [
4040export default function ColorPickComponent ( { styles } ) {
4141 useProxy ( storage )
4242
43+ const clamp = ( v , min , max ) => Math . max ( min , Math . min ( max , v ) ) ;
44+
4345 const [ BGAlpha , setBGAlpha ] = React . useState (
44- toDecimal ( hexAlphaToPercent ( storage ?. colors ?. backgroundColorAlpha ) ?? 100 )
45- ) ;
46+ clamp ( ( hexAlphaToPercent ( storage ?. colors ?. backgroundColorAlpha ) ?? 100 ) , 0 , 100 )
47+ )
4648 const [ gutterAlpha , setGutterAlpha ] = React . useState (
47- toDecimal ( hexAlphaToPercent ( storage ?. colors ?. gutterColorAlpha ) ?? 100 )
48- ) ;
49+ clamp ( ( hexAlphaToPercent ( storage ?. colors ?. gutterColorAlpha ) ?? 100 ) , 0 , 100 )
50+ )
4951
50- const navigation = NavigationNative . useNavigation ( ) ;
52+ const [ useText , setUseText ] = React . useState ( false ) ;
5153
52- const parseColorPercentage = clr => alphaToHex ( toPercentage ( clr ) ) ;
54+ const navigation = NavigationNative . useNavigation ( ) ;
5355
5456 const handleSemRaw = prefix => {
5557 if ( ! prefix ) return null ;
@@ -132,26 +134,32 @@ export default function ColorPickComponent({ styles }) {
132134 < View style = {
133135 {
134136 width : "2%" ,
135- backgroundColor : `${ storage . colors . gutterColor } ${ parseColorPercentage ( gutterAlpha ) } ` ,
137+ backgroundColor : `${ storage . colors . gutterColor } ${ storage . colors . gutterColorAlpha } ` ,
136138 }
137139 } />
140+
141+ {
142+ // console.log(`${storage.colors.gutterColor} ${storage.colors.gutterColor}`)
143+ }
144+ {
145+ // console.log(`${storage.switches.useSemRawColors ? (handleSemRaw(storage?.colors?.semRawColorPrefix) || storage.colors.backgroundColor) : storage.colors.backgroundColor}${storage.colors.backgroundColorAlpha}`)
146+ }
147+
138148 < View style = {
139149 {
140150 flex : 1 ,
141151 backgroundColor : `${
142-
143152 storage . switches . useSemRawColors ?
144153 ( handleSemRaw ( storage ?. colors ?. semRawColorPrefix ) || storage . colors . backgroundColor ) :
145154 storage . colors . backgroundColor
146-
147- } ${ parseColorPercentage ( BGAlpha ) } `,
155+ } ${ storage . colors . backgroundColorAlpha } `,
148156 justifyContent : 'center' ,
149157 alignItems : 'center' ,
150158 }
151159 } >
152160 < Text style = { {
153161 fontSize : 20 ,
154- color : storage ?. switches ?. darkMode ? "white " : "black "
162+ color : storage ?. switches ?. darkMode ? "black " : "white "
155163 }
156164 } > Low Effort Normal Example Message </ Text >
157165 < Text style = { {
@@ -162,27 +170,73 @@ export default function ColorPickComponent({ styles }) {
162170 </ View >
163171 </ View >
164172
165- < FormSliderRow
166- label = { `Background Color Alpha: ${ toPercentage ( BGAlpha ) } %` }
167- value = { BGAlpha }
168- style = { { width : "90%" } }
169- onValueChange = { ( v ) => {
170- setBGAlpha ( Number ( formatDecimal ( v ) ) )
171- storage . colors . backgroundColorAlpha = alphaToHex ( toPercentage ( v ) ) ;
173+ < FormRow
174+ label = "Click to switch input type"
175+ subLabel = "Switch from slider to number and vise versa"
176+ onPress = { ( ) => {
177+ setUseText ( ! useText )
172178 } }
173179 />
180+
181+ {
182+ useText ? ( < >
183+ < FormInput
184+ title = { `Background Color Alpha: ${ BGAlpha } %` }
185+ keyboardType = "numeric"
186+ style = { { width : "90%" } }
187+ value = { `${ BGAlpha } ` }
188+ onChange = { ( val ) => {
189+ val = clamp ( val , 0 , 100 )
190+
191+ setBGAlpha ( Number ( val ) )
192+ storage . colors . backgroundColorAlpha = alphaToHex ( val ) ;
193+ } }
194+ />
195+ </ > ) : ( < >
196+ < FormSliderRow
197+ label = { `Background Color Alpha: ${ BGAlpha } %` }
198+ value = { BGAlpha }
199+ minVal = { 0 }
200+ maxVal = { 100 }
201+ style = { { width : "90%" } }
202+ onValueChange = { ( v ) => {
203+ setBGAlpha ( Number ( v ) )
204+ storage . colors . backgroundColorAlpha = alphaToHex ( v ) ;
205+ } }
206+ />
207+ </ > )
208+ }
174209
175210 < FormDivider />
176-
177- < FormSliderRow
178- label = { `Background Gutter Alpha: ${ toPercentage ( gutterAlpha ) } %` }
179- value = { gutterAlpha }
180- style = { { width : "90%" } }
181- onValueChange = { ( v ) => {
182- setGutterAlpha ( Number ( formatDecimal ( v ) ) )
183- storage . colors . gutterColorAlpha = alphaToHex ( toPercentage ( v ) ) ;
184- } }
185- />
211+
212+ {
213+ useText ? ( < >
214+ < FormInput
215+ title = { `Background Gutter Alpha: ${ gutterAlpha } %` }
216+ keyboardType = "numeric"
217+ style = { { width : "90%" } }
218+ value = { `${ gutterAlpha } ` }
219+ onChange = { ( val ) => {
220+ val = clamp ( val , 0 , 100 )
221+
222+ setGutterAlpha ( Number ( val ) )
223+ storage . colors . gutterColorAlpha = alphaToHex ( val ) ;
224+ } }
225+ />
226+ </ > ) : ( < >
227+ < FormSliderRow
228+ label = { `Background Gutter Alpha: ${ gutterAlpha } %` }
229+ value = { gutterAlpha }
230+ minVal = { 0 }
231+ maxVal = { 100 }
232+ style = { { width : "90%" } }
233+ onValueChange = { ( v ) => {
234+ setGutterAlpha ( Number ( v ) )
235+ storage . colors . gutterColorAlpha = alphaToHex ( v ) ;
236+ } }
237+ />
238+ </ > )
239+ }
186240
187241 </ View >
188242 </ View >
0 commit comments