import React, { useState } from 'react';
import {View , Text, TextInput, Button,StyleSheet} from 'react-native';
import { Icon } from 'react-native-elements'
import SketchPicker from 'react-color';
let rgbaTemplate = /rgba\([ ]*([0-9.]+)[ ]*,[ ]*([0-9.]+)[ ]*,[ ]*([0-9.]+)[ ]*,[ ]*([0-9.]+)[ ]*\)/;
export default class ColorEditor extends React.Component {
constructor(props){
super(props)
this.state = {
open:false
}
}
render(){
let matches = rgbaTemplate.exec(this.props.text || '');
let defaultColor = {
r: matches && parseFloat(matches[1]) || 0,
g: matches && parseFloat(matches)[2] || 0,
b: matches && parseFloat(matches)[3] || 0,
a: matches && parseFloat(matches)[4] || 1
};
let color = this.state.color || defaultColor;
let title = this.props.title || "Input";
let open = this.state.open ? (
Color Fill
this.setState({open:false})} style={[{backgroundColor:this.props.text},styles.preview]}>
{
this.props.onChange && this.props.onChange(`rgba(${newColor.rgb.r},${newColor.rgb.g},${newColor.rgb.b},${newColor.rgb.a})`);
this.setState({color:newColor.rgb});
}}
/>
):(
Color Fill
this.setState({open:true})} style={[{backgroundColor:this.props.text},styles.preview]}>
)
return(
{this.props.title}
{open}
)
}
}
const styles = StyleSheet.create({
container:{
padding:10
},
defaultInput: {
marginTop:6,
borderWidth:1,
width:100
},
prevCont:{
flex:1,
flexDirection:'row'
},
preview:{
width: 43,
height: 19,
boxShadow: '0px 3px 6px #00000029',
border: '1px solid #FFFFFF',
borderRadius: 14,
opacity: 1
}
})