react-color#TwitterPicker JavaScript Examples
The following examples show how to use
react-color#TwitterPicker.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ColorPicker.js From shopping-cart-fe with MIT License | 6 votes |
|
ColorPicker = (props) => {
const [color, setColor] = useState('');
return (
<div className='colorPicker' data-testid='colorpickerbox'>
<h3 className='selectBrandColor'>Select your brand color!</h3>
<TwitterPicker
data-testid='colorpicker'
color={color}
onChangeComplete={(color) => {
setColor(color.hex);
props.colorUpload(color.hex);
props.setUserInfo({ ...props.userInfo, color: color.hex });
}}
/>
<div
data-testid='colorpickerwrapper'
style={{
backgroundColor: color,
height: '50px',
width: '100%',
transition: 'ease all 500ms',
}}></div>
</div>
);
}
Example #2
| Source File: ParamColor.js From qrbtf with GNU General Public License v3.0 | 5 votes |
|
ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
const [displayColorPicker, setDisplay] = useState(false);
const styles = reactCSS({
'default': {
btn: {
borderColor: displayColorPicker ? '#44D7B6' : null,
color: displayColorPicker ? '#44D7B6' : null
},
container: {
position: 'relative',
},
popover: {
marginTop: '10px',
position: 'absolute',
right: '0',
zIndex: '2',
},
cover: {
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
},
},
});
return (
<div style={styles.container}>
<button className="dl-btn" style={styles.btn} onClick={ () => setDisplay(!displayColorPicker) }>
选择颜色
</button>
{
displayColorPicker ?
<div style={styles.popover}>
<div style={styles.cover} onClick={() => setDisplay(false)} />
<TwitterPicker
key={"input_" + rendererIndex + "_" + paramIndex}
triangle="hide"
color={value}
colors={['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']}
onChangeComplete={onChange}
/>
</div>
:
null
}
</div>
);
}
Example #3
| Source File: ProfileForm.js From shopping-cart-fe with MIT License | 4 votes |
|
ProfileForm = ({ store }) => {
const [input, setInput] = useState({
businessName: store.businessName,
ownerName: store.ownerName,
address: store.address,
secondAddress: store.secondAddress,
city: store.city,
state: store.state,
zipcode: store.zipcode,
hours: store.hours,
curbHours: store.curbHours,
logo: store.logo,
color: store.color,
})
const [message, setMessage] = useState()
useEffect(() => {
}, [])
const uploadImage = (e) => {
const files = e.target.files
const data = new FormData()
data.append("file", files[0])
data.append("upload_preset", "shopping-cart-logo")
Axios.post("https://api.cloudinary.com/v1_1/dnsl4nbz4/image/upload", data)
.then((res) => {
setInput({
...input,
logo: res.data.secure_url,
})
})
.catch((err) => console.log(err.message))
}
const handleChange = (e) => {
setInput({
...input,
[e.target.name]: e.target.value,
})
}
const handleSubmit = (e) => {
e.preventDefault()
AxiosAuth()
.put(`https://shopping-cart-be.herokuapp.com/api/store/`, input)
.then((res) => {
if (res.data) {
setMessage("You’re Profile Was Updated Successfuly!")
setTimeout(function() {
window.location.reload()
}, 2000);
}
})
.catch((err) => {
console.log(err.response.data)
setMessage("Something Went Wrong!")
})
}
return (
<div className="profileViewWrapper"
data-testid='profileFormMainDiv'
>
<Message message={message} />
<div className="firstWrapper">
<div className="logoContainer">
<h3>Logo</h3>
<img src={input.logo} alt="logo" />
<input type="file" onChange={uploadImage} />
</div>
<div className="colorContainer">
<h3>Brand Color</h3>
<TwitterPicker
className="colorPicker"
color={input.color}
onChange={(color) => {
setInput({
...input,
color: color.hex,
})
}}
/>
</div>
</div>
<div className="formContainer">
<h3>Basic Details:</h3>
{store && (
<form className="profileForm" onSubmit={handleSubmit}>
<main>
<section className="firstSection">
<label>Business Name</label>
<input
value={input.businessName}
name="businessName"
onChange={handleChange}
/>
<label>Owner Name</label>
<input
value={input.ownerName}
name="ownerName"
onChange={handleChange}
/>
<label>Address</label>
<input
value={input.address}
name="address"
onChange={handleChange}
/>
</section>
<section className="secondSection">
<label>City</label>
<input value={input.city} name="city" onChange={handleChange} />
<label>State</label>
<input
value={input.state}
name="state"
onChange={handleChange}
/>
<label>Zipcode</label>
<input
value={input.zipcode}
name="zipcode"
onChange={handleChange}
/>
</section>
</main>
<section className="thirdSection">
<label>Working Hours</label>
<input value={input.hours} name="hours" onChange={handleChange} />
<label>Curbside Pick up Hours</label>
<input
value={input.curbHours}
name="curbHours"
onChange={handleChange}
/>
</section>
<button>Update Profile</button>
</form>
)}
</div>
</div>
)
}
Example #4
| Source File: Update.js From shopping-cart-fe with MIT License | 4 votes |
|
Update = (props) => {
const [loading, setLoading] = useState(false);
const [color, setColor] = useState(props.color.color);
const [confirmDelete, setConfirmDelete] = useState(false);
const [confirmLogout, setConfirmLogout] = useState(false);
const uploadImage = (e) => {
const files = e.target.files;
setLoading(true);
const data = new FormData();
data.append('file', files[0]);
data.append('upload_preset', 'shopping-cart-logo');
axios
.post('https://api.cloudinary.com/v1_1/dnsl4nbz4/image/upload', data)
.then((res) => {
props.logoUpload(res.data.secure_url);
});
setLoading(false);
};
return (
<div className='profileWrapper' data-testid='updateProfileWrapper'>
<h1 className='profileHeader' data-testid='updateProfileMainHeader' >Profile</h1>
<div className='imageColorWrapper' data-testid='updateProfileSecondaryWrapper'>
<div className='image-color' data-testid='updateProfileColorWrappers'>
<div className='logoDiv' data-testid='updateProfileLogoWrappers'>
<label className='logoChangeButton' htmlFor='uploadButton'>
Change logo
</label>
{loading ? (
<p>Loading...</p>
) : (
<img
style={{ height: '100px' }}
alt='logo'
src={props.logo.logo}
/>
)}
<input data-testid='updateUploadImageButton' id='uploadButton' type='file' onChange={uploadImage} />
</div>
<div className='colorDiv' >
<h3 className='colorHeader'>Brand Color</h3>
<TwitterPicker
className='twitterPicker'
color={color}
onChangeComplete={(color) => {
setColor(color.hex);
props.colorUpload(color.hex);
}}
/>
<div
style={{
margin: '1rem',
backgroundColor: props.color.color,
height: '50px',
width: '50%',
transition: 'ease all 500ms',
}}></div>
</div>
</div>
<Form className='profileForm' >
<div className='formTop' data-testid='updateProfileTopDiv'>
<div className='formTopLeft' data-testid='updateProfileLeftDiv'>
<label htmlFor='business name'data-testid='updateProfileBusName' >Business Name*</label>
<br />
<Field
name='businessName'
type='text'
value={props.values.businessName}
placeholder={props.address}
className='formInputFields'
/>
{props.touched.businessName && props.errors.businessName && (
<p className='formErrorHandling'>enter, please</p>
)}
<br />
<label htmlFor='owner name' data-testid='updateProfileOwnerName'>Owner Name*</label>
<br />
<Field
name='ownerName'
type='text'
value={props.values.ownerName}
placeholder={props.ownerName}
className='formInputFields'
/>
{props.touched.ownerName && props.errors.ownerName && (
<p className='formErrorHandling'>enter, please</p>
)}
<br />
<label htmlFor='address'>Address*</label>
<br />
<Field
name='address'
type='text'
value={props.values.address}
placeholder={props.address}
className='formInputFields'
/>
{props.touched.address && props.errors.address && (
<p className='formErrorHandling'>address, please</p>
)}
<br />
<label htmlFor='owner name'>Second Address</label>
<br />
<Field
name='secondAddress'
type='text'
value={props.values.secondAddress}
placeholder={props.secondAddress}
className='formInputFields'
/>
{props.touched.secondAddress && props.errors.secondAddress && (
<p className='formErrorHandling'>enter if needed</p>
)}
</div>
<div className='formTopRight'>
<label htmlFor='city'>City*</label>
<br />
<Field
name='city'
type='text'
value={props.values.city}
placeholder={props.city}
className='formInputFields'
/>
{props.touched.city && props.errors.city && (
<p className='formErrorHandling'>City required</p>
)}
<br />
<label htmlFor='state'>State*</label>
<br />
<Field
name='state'
type='text'
value={props.values.state}
placeholder={props.state}
className='formInputFields'
/>
{props.touched.state && props.errors.state && (
<p className='formErrorHandling'>enter State</p>
)}
<br />
<label htmlFor='zip code'>Zip Code*</label>
<br />
<Field
name='zipcode'
type='number'
maxLength={5}
placeholder={props.zipcode}
value={props.values.zipcode}
className='formInputFields'
/>
<ErrorMessage name='zipcode'>
{(msg) => <div className='formErrorHandling'>{msg}</div>}
</ErrorMessage>
</div>
</div>
<label htmlFor='store hours'>Store Hours*</label>
<br />
<Field
name='hours'
type='text'
value={props.values.hours}
placeholder={props.hours}
className='formInputFields'
/>
{props.touched.hours && props.errors.hours && (
<p className='formErrorHandling'>enter Hours of Operation</p>
)}
<br />
<label htmlFor='curbside hours'>Curbside Pickup Hours</label>
<br />
<Field
name='curbHours'
type='text'
value={props.values.curbHours}
placeholder={props.curbHours}
className='formInputFields'
/>
{props.touched.curbHours && props.errors.curbHours && (
<p className='formErrorHandling'>enter Curbside hours</p>
)}
<br />
<div className='buttonDiv'>
<button className='updateProfileButton' type='submit'>
Update Profile
</button>
<p className={confirmDelete ? 'showMe' : 'hidden'}>
Are you sure you want to delete your store information?
</p>
<p className={confirmLogout ? 'showMe' : 'hidden'}>
Are you sure you want to logout?
</p>
<div className='logoutDelete'>
<button
className={
confirmLogout || confirmDelete ? 'hidden' : 'showMeLogout'
}
onClick={() => {
setConfirmLogout(true);
}}>
Logout
</button>
<button
className={confirmLogout ? 'showMe' : 'hidden'}
onClick={() => {
localStorage.clear();
history.push('/');
}}>
Confirm Logout
</button>
<button
onClick={() => {
setConfirmDelete(!confirmDelete);
}}
className={!confirmDelete ? 'hidden' : 'showMe'}>
Don't delete my store!
</button>
<button
onClick={() => {
setConfirmLogout(!confirmLogout);
}}
className={!confirmLogout ? 'hidden' : 'showMe'}>
Don't log me out!
</button>
<button
onClick={() => {
setConfirmDelete(true);
}}
className={
confirmDelete || confirmLogout ? 'hidden' : 'showMe'
}>
Delete Store
</button>
<button
className={confirmDelete ? 'showMe' : 'hidden'}
onClick={(values) => {
props.deleteSellerInfo(values);
history.push('/welcome');
}}>
Confirm Deletion
</button>
</div>
</div>
</Form>
</div>
</div>
);
}
