65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TextInput } from 'react-native';
|
|
import { useSettings } from '@/theme';
|
|
|
|
interface ColorPickerInputProps {
|
|
value: string;
|
|
onChange: (color: string) => void;
|
|
}
|
|
|
|
function normalizeHex(input: string): string {
|
|
const cleaned = input.replace(/[^0-9a-fA-F]/g, '').slice(0, 6);
|
|
return cleaned ? `#${cleaned}` : '';
|
|
}
|
|
|
|
export default function NativeColorPickerInput({ value, onChange }: ColorPickerInputProps) {
|
|
const { theme } = useSettings();
|
|
|
|
return (
|
|
<View style={styles.row}>
|
|
<View style={[styles.preview, { backgroundColor: value }]} />
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
{ backgroundColor: theme.inputBg, borderColor: theme.borderStrong, color: theme.text },
|
|
]}
|
|
value={value}
|
|
onChangeText={(text) => onChange(normalizeHex(text))}
|
|
placeholder="#E53935"
|
|
placeholderTextColor={theme.textMuted}
|
|
autoCapitalize="characters"
|
|
autoCorrect={false}
|
|
maxLength={7}
|
|
/>
|
|
<Text style={[styles.hint, { color: theme.textMuted }]}>Hex code</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
},
|
|
preview: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
borderWidth: 1,
|
|
borderColor: '#E0E0E0',
|
|
},
|
|
input: {
|
|
flex: 1,
|
|
height: 44,
|
|
paddingHorizontal: 14,
|
|
borderRadius: 10,
|
|
borderWidth: 1,
|
|
fontSize: 15,
|
|
fontWeight: '500',
|
|
},
|
|
hint: {
|
|
fontSize: 12,
|
|
},
|
|
});
|