66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {Button, Image, Modal, Platform, TouchableOpacity, TouchableWithoutFeedback, View} from 'react-native';
|
|
import { icons } from "@/constants/icons"
|
|
import ColorPicker, {HueSlider, OpacitySlider, Panel1, Preview, Swatches} from "reanimated-color-picker";
|
|
|
|
// @ts-ignore
|
|
export default function MyColorPicker({ onColorSelected }: { onColorSelected: (color: string) => void }) {
|
|
|
|
const [showModal, setShowModal] = useState(false);
|
|
const [bgColor, setBgColor] = useState<string>('gray');
|
|
|
|
const onSelectColor = ({ hex }: { hex: string }): void => {
|
|
setBgColor(hex);
|
|
|
|
if (onColorSelected) {
|
|
onColorSelected(hex);
|
|
}
|
|
};
|
|
|
|
const toggleModal = () => {
|
|
setShowModal(prevState => !prevState);
|
|
};
|
|
|
|
return (
|
|
<View className="justify-center items-center">
|
|
<TouchableOpacity onPress={toggleModal}>
|
|
{Platform.OS === 'web' ? (
|
|
<Image
|
|
source={icons.colorP}
|
|
// @ts-ignore
|
|
style={{
|
|
width: '3vw',
|
|
height: '3vw',
|
|
objectFit: 'contain',
|
|
}}
|
|
/>
|
|
) : (
|
|
<Image
|
|
source={icons.colorP}
|
|
className="w-8 h-8"
|
|
resizeMode="contain"
|
|
/>
|
|
)}
|
|
</TouchableOpacity>
|
|
|
|
<Modal visible={showModal} animationType="slide" transparent={true}>
|
|
<TouchableWithoutFeedback onPress={toggleModal}>
|
|
<View className="flex-1 justify-center items-center bg-black/50 p-4">
|
|
<TouchableWithoutFeedback>
|
|
<View className="bg-white rounded-xl p-4 w-4/5">
|
|
<ColorPicker style={{ width: '70%' }} value={bgColor} onCompleteJS={onSelectColor}>
|
|
<Preview />
|
|
<Panel1 />
|
|
<HueSlider />
|
|
<OpacitySlider />
|
|
<Swatches />
|
|
</ColorPicker>
|
|
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
</Modal>
|
|
</View>
|
|
);
|
|
} |