react-color#ChromePicker JavaScript Examples
The following examples show how to use
react-color#ChromePicker.
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: viewcolorpicker.jsx From razer-macos with GNU General Public License v2.0 | 6 votes |
|
render() {
const styles = {
'default': {
picker: { background: '#202124', boxShadow: 'none' }, body: {
padding: '12px 0 0',
},
},
};
return (
<div>
<div className='control'>
<ChromePicker color={this.state.color} onChange={(c) => this.handleChange(c)} width='100%' disableAlpha={true} styles={styles}
defaultView={'rgb'} />
</div>
<div className='control'>
<button onClick={() => this.handleClick()}>Save custom color</button>
</div>
</div>
);
}
Example #2
| Source File: index.js From ant-simple-pro with MIT License | 6 votes |
|
Index = memo(function Index() {
const [color,setColor] = useState('#fff');
const colorChange = (val) =>{
setColor(val.hex)
}
return (
<div style={{padding:'20px',background:color}}>
<Row gutter={[20,20]}>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<SketchPicker color={color} onChange ={colorChange} />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<SwatchesPicker color={color} onChange ={colorChange} />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<ChromePicker color={color} onChange ={colorChange} />
</Col>
<Col xs={24} sm={24} md={12} lg={12} xl={12}>
<CompactPicker color={color} onChange ={colorChange} />
</Col>
</Row>
</div>
)
})
Example #3
| Source File: ThemeMaker.jsx From elementz with GNU Affero General Public License v3.0 | 6 votes |
|
ThemeMaker.ColorPicker = (props) => {
const [active, setActive] = useState(false);
const parsedColor = useMemo(()=> (ThemeMaker.parseColor(props.color)),[props.color]);
const [color, setColor] = useState(parsedColor);
var passProps = filterProps(props, ['color', 'onChange']);
useEffect(() => {
if(!active && color != parsedColor) {
setColor(parsedColor);
}
}, [parsedColor, color, active]);
return (
<Dropdown noMobile mobileLarge {...passProps} full active={active} setActive={setActive} handle={
<div className='ez-tm-cg-color' style={{
background: props.color
}}>
<span>{props.title}</span>
<span className='ez-tm-cg-c-subtitle'>{props.subtitle}</span>
</div>
}>
<ChromePicker
color={color}
disableAlpha={false}
onChange={({hex, rgb}) => (
setColor(rgb.a !== 1 ? rgb : hex)
)}
onChangeComplete={(colors) => {
if(colors && colors.hex && colors.rgb && typeof props.onChange === "function") {
return props.onChange(colors);
}
}
}
/>
</Dropdown>
);
};
Example #4
| Source File: index.js From boring-avatars with MIT License | 6 votes |
|
ColorDot = ({ value, onChange }) => {
const [pickerIsOpen, setPickerIsOpen] = useState(false)
const ref = useRef();
useOnClickOutside(ref, () => setPickerIsOpen(false));
return (
<DotWrapper>
<Wrapper
color={value}
onClick={() => setPickerIsOpen(!pickerIsOpen)}
style={{ background: value }}
/>
{pickerIsOpen && (
<PickerWrapper ref={ref}>
<ChromePicker
color={value}
onChange={(v) => onChange(v.hex)}
disableAlpha
/>
</PickerWrapper>
)}
</DotWrapper>
)
}
Example #5
| Source File: CustomColor2.jsx From razer-macos with GNU General Public License v2.0 | 5 votes |
|
export default function CustomColor2({ deviceSelected }) {
const componentToHex = (c) => {
if (typeof c === 'undefined') {
return '00';
}
var hex = c.toString(16);
return hex.length == 1 ? '0' + hex : hex;
};
const rgbToHex = ({ r, g, b }) => {
return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
};
const [currentColor, setCurrentColor] = useState({
hex: rgbToHex(deviceSelected.settings.customColor2.rgb),
rgb: deviceSelected.settings.customColor2.rgb,
});
const handleChange = (newColor) => {
setCurrentColor(newColor);
};
const handleClick = () => {
deviceSelected.settings.customColor2 = currentColor;
let payload = {
device: deviceSelected,
};
ipcRenderer.send('request-set-custom-color', payload);
};
const styles = { 'default': { picker: { background: '#202124', boxShadow: 'none'}, body: {
padding: '12px 0 0'
} }};
return (
<div>
<p>Secondary custom color selection (Starlight Dual Mode only)</p>
<div className='control'>
<ChromePicker color={currentColor} onChange={handleChange} width='100%' disableAlpha={true} styles={styles} defaultView={'rgb'}/>
</div>
<div className='control'>
<button onClick={handleClick}>Save custom color</button>
</div>
</div>
);
}
Example #6
| Source File: ColorPickerForm.js From flat-ui-colors with MIT License | 5 votes |
|
render() {
const { paletteIsFull, classes } = this.props;
const { currentColor, newColorName } = this.state;
return (
<div>
<ChromePicker
color={currentColor}
onChange={this.updateCurrentColor}
className={classes.picker}
/>
<ValidatorForm
onSubmit={this.handleSubmit}
ref='form'
instantValidate={false}
>
<TextValidator
value={newColorName}
className={classes.colorNameInput}
placeholder='Color Name'
name='newColorName'
variant='filled'
margin='normal'
onChange={this.handleChange}
validators={['required', 'isColorNameUnique', 'isColorUnique']}
errorMessages={[
'Enter a color name',
'Color name must be unique',
'Color already used!',
]}
/>
<Button
variant='contained'
type='submit'
color='primary'
disabled={paletteIsFull}
className={classes.addColor}
style={{
backgroundColor: paletteIsFull ? 'grey' : currentColor,
}}
>
{paletteIsFull ? 'Palette Full' : 'Add Color'}
</Button>
</ValidatorForm>
</div>
);
}
Example #7
| Source File: colorPicker.js From egoshop with Apache License 2.0 | 5 votes |
|
render() {
const { color, colorChange } = this.props
const styles = reactCSS({
'default': {
warp: {
height: '40px',
display:'flex',
alignItems: 'center'
},
color: {
width: '36px',
height: '14px',
borderRadius: '2px',
backgroundColor: color,
},
swatch: {
padding: '5px',
background: '#fff',
borderRadius: '1px',
boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
display: 'inline-block',
cursor: 'pointer',
},
popover: {
position: 'absolute',
zIndex: '1000',
top:40,
left:60
},
cover: {
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
},
},
});
return (
<div style={styles.warp}>
<div style={styles.swatch} onClick={this.handleClick}>
<div style={styles.color} />
</div>
{
this.state.displayColorPicker ?
<div style={styles.popover}>
<div
style={styles.cover}
onClick={this.handleClose}
/>
<ChromePicker
color={color}
onChange={colorChange}
/>
</div> : null
}
</div>
)
}
Example #8
| Source File: colors-input.js From raster-playground with GNU General Public License v3.0 | 5 votes |
|
export default function ColorsInput() {
const [colors, onChangeColor] = useQueryParam(URL_COLORS, StringParam);
const [itemColorStatus, setItemColorStatus] = useState(null);
const colorsArray = getColorsArray(colors);
const changeItemColor = color => {
setItemColorStatus({ color: color.hex, key: itemColorStatus.key });
let tempColorsArray = colorsArray;
tempColorsArray[itemColorStatus.key] = color.hex;
onChangeColor(getColorsString(tempColorsArray), URL_UPDATE_PUSH);
};
const addColor = () => {
setItemColorStatus({ color: '#006698', key: colorsArray.length });
let tempColorsArray = colorsArray;
tempColorsArray.push('#006698');
onChangeColor(getColorsString(tempColorsArray), URL_UPDATE_PUSH);
};
return (
<>
<div className="color-row">
<p>Colors Palette</p>{' '}
<a
href="#add"
onClick={() => addColor()}
className="iconButton fa fa-lg fa-plus"
>
{' '}
</a>
</div>
<div className="color-input">
{colorsArray.map((color, key) => (
<Fragment key={color + key}>
<div
className="color-input-item"
style={
itemColorStatus && itemColorStatus.key === key
? { background: color, borderColor: 'black' }
: { background: color }
}
>
<div
className="color-input-item-close"
onClick={e => deleteColor(key, colorsArray, onChangeColor)}
>
<CloseSVG />
</div>
<div
className="color-input-item-overlay"
onClick={e => setItemColorStatus({ color, key })}
></div>
</div>
</Fragment>
))}
</div>
{itemColorStatus ? (
<div style={popover}>
<div
style={cover}
onClick={() => {
setItemColorStatus(false);
}}
/>
<ChromePicker
color={itemColorStatus.color}
onChange={changeItemColor}
/>
</div>
) : null}
</>
);
}
Example #9
| Source File: ProfileSectionEditor.jsx From portfolyo-mern with MIT License | 4 votes |
|
ProfileSectionEditor = (props) => {
const classes = useStyles();
const dispatch = useDispatch();
const UsernameP = useSelector((state) => state.UsernameP);
const DescribeP = useSelector((state) => state.DescribeP);
const AddressP = useSelector((state) => state.AddressP);
const UsernameFontP = useSelector((state) => state.UsernameFontP);
const DescribeFontP = useSelector((state) => state.DescribeFontP);
const AddressFontP = useSelector((state) => state.AddressFontP);
const UsernameColorP = useSelector((state) => state.UsernameColorP);
const DescribeColorP = useSelector((state) => state.DescribeColorP);
const AddressColorP = useSelector((state) => state.AddressColorP);
const DButtonColorP = useSelector((state) => state.DButtonColorP);
const HButtonColorP = useSelector((state) => state.HButtonColorP);
const DTextColorP = useSelector((state) => state.DTextColorP);
const HTextColorP = useSelector((state) => state.HTextColorP);
const [layoutDesignSelected, setlayoutDesignSelected] = useState([
"porfileSectionLayoutSelected",
"",
]);
const [alignmentSelected, setalignmentSelected] = useState([
"porfileSectionAligmentSelected",
"",
]);
const [dpStructureSelected, setdpStructureSelected] = useState([
"dpStructureSelected",
"",
"",
]);
const [optionClicked, setoptionClicked] = useState(["", "", ""]);
const [optionSelected, setoptionSelected] = useState([
"btn-group__item--selected",
"",
"",
]);
const layoutp = useSelector((state) => state.layoutp);
// const dpStructureP = useSelector(state=>state.dpStructureP);
const [displaySelected, setdisplaySelected] = useState(0);
const dpStructureHandler = (index) => {
let tempDpStructure = ["", "", ""];
tempDpStructure[index] = "dpStructureSelected";
setdpStructureSelected(tempDpStructure);
};
const layoutDesignHandler = (index) => {
let tempLayout = ["", ""];
tempLayout[index] = "porfileSectionLayoutSelected";
setlayoutDesignSelected(tempLayout);
};
const alignmentHandler = (index) => {
let tempAlignment = ["", ""];
tempAlignment[index] = "porfileSectionAligmentSelected";
setalignmentSelected(tempAlignment);
};
const optionClickedHandlers = (index) => {
let tempOption = ["", "", ""];
tempOption[index] = "btn-group__item--active";
let tempSelected = ["", "", ""];
tempSelected[index] = "btn-group__item--selected";
setoptionClicked(tempOption);
setTimeout(() => {
setoptionClicked(["", "", ""]);
}, 600);
setoptionSelected(tempSelected);
setdisplaySelected(index);
};
// eslint-disable-next-line no-unused-vars
const [fontStyle, setfontStyle] = useState("Open Sans");
//buttons
const [dbuttonStyle, setdbuttonStyle] = useState([
"buttonStyleSeclected",
"",
"",
]);
const [hbuttonStyle, sethbuttonStyle] = useState([
"",
"",
"buttonStyleSeclected",
]);
// const [buttonColor, setbuttonColor] = useState("#fff");
// const [buttonTextColor, setbuttonTextColor] = useState("#fff");
const dbuttonStyleHandler = (index) => {
const temp = ["", "", ""];
temp[index] = "buttonStyleSeclected";
setdbuttonStyle(temp);
};
const hbuttonStyleHandler = (index) => {
const temp = ["", "", ""];
temp[index] = "buttonStyleSeclected";
sethbuttonStyle(temp);
};
useEffect(() => {
layoutDesignHandler(layoutp - 1);
}, []);
return (
<div
style={{
justifyContent: "start",
}}
>
<div className="ProfileSectionEditorBackDrop">
<div
className="ProfileSectionEditorMenu mt-2 p-0"
onClick={(e) => {
e.stopPropagation();
}}
>
{/* <div className="ProfileSectionEditorHeader">
<h3 className="ProfileSectionEditorHeading">
Edit Profile Section
</h3>
<CloseIcon
onClick={props.closeBackDrop}
style={{
cursor: "pointer",
}}
></CloseIcon>
</div> */}
{/* <hr
style={{
border: "#d9d9d9 0.3px solid",
}}
/> */}
<div
className="btn-group "
style={{
display: "block",
// verticalAlign: "middle",
maxWidth: "max-content",
margin: "auto auto 1rem auto",
}}
>
<button
className={`btn-group__item btn-group__item ${optionClicked[0]} ${optionSelected[0]}`}
onClick={() => optionClickedHandlers(0)}
>
Layout
</button>
<button
className={`btn-group__item ${optionClicked[1]} ${optionSelected[1]}`}
onClick={() => optionClickedHandlers(1)}
>
Text
</button>
<button
className={`btn-group__item ${optionClicked[2]} ${optionSelected[2]}`}
onClick={() => optionClickedHandlers(2)}
>
Buttons
</button>
</div>
<div className="profileSectionEditorLayout">
{displaySelected === 0 ? (
<div>
<div className="profileSectionEditorLayoutDesign m-0">
<p className="profileSectionEditorLayoutDesignHeader">
Designs:
</p>
<div className="profileSectionEditorLayoutDesignStructure">
<div
className={`profileSectionEditorLayouts ${layoutDesignSelected[0]}`}
onClick={() => {
layoutDesignHandler(0);
dispatch({
type: "layoutp",
payload: 1,
});
}}
>
<img
src={layout1}
alt="layout1"
></img>
<p>Layout-1</p>
</div>
<div
className={`profileSectionEditorLayouts ${layoutDesignSelected[1]}`}
onClick={() => {
layoutDesignHandler(1);
dispatch({
type: "layoutp",
payload: 2,
});
}}
>
<img
src={profileLeft}
alt="layout2"
></img>
<p>Layout-2</p>
</div>
</div>
<p className="profileSectionEditorLayoutDesignHeader">
Alignment:
</p>
<div className="profileSectionEditorLayoutDesignStructure">
<div
className={`profileSectionEditorLayouts ${alignmentSelected[0]}`}
onClick={() => {
alignmentHandler(0);
dispatch({
type: "alignp",
payload: "left",
});
}}
>
<img
src={profileLeft}
alt="layout1"
></img>
<p>Left Alignment</p>
</div>
<div
className={`profileSectionEditorLayouts ${alignmentSelected[1]}`}
onClick={() => {
alignmentHandler(1);
dispatch({
type: "alignp",
payload: "center",
});
}}
>
<img
src={profileMiddle}
alt="layout2"
></img>
<p>Center Alignment</p>
</div>
</div>
<p className="profileSectionEditorLayoutDesignHeader">
Profile Pic:
</p>
<div className="profileSectionEditorLayoutDpStructure">
<div
className={`profileSectionEditorLayoutDpStructureItem ${dpStructureSelected[0]}`}
style={{
margin: "1rem",
}}
onClick={() => {
dpStructureHandler(0);
dispatch({
type: "dpstructurep",
payload: 0,
});
}}
>
<div
style={{
width: "5rem",
height: "5rem",
border: "black 2px solid",
}}
></div>
<p>Sharp</p>
</div>
<div
className={`profileSectionEditorLayoutDpStructureItem ${dpStructureSelected[1]}`}
style={{
margin: "1rem",
}}
onClick={() => {
dpStructureHandler(1);
dispatch({
type: "dpstructurep",
payload: 1,
});
}}
>
<div
style={{
width: "5rem",
height: "5rem",
border: "black 2px solid",
borderRadius: "10px",
}}
></div>
<p>Smooth</p>
</div>
<div
className={`profileSectionEditorLayoutDpStructureItem ${dpStructureSelected[2]}`}
style={{
margin: "1rem",
}}
onClick={() => {
dpStructureHandler(2);
dispatch({
type: "dpstructurep",
payload: 2,
});
}}
>
<div
style={{
width: "5rem",
height: "5rem",
border: "black 2px solid",
borderRadius: "50%",
}}
></div>
<p>Circle</p>
</div>
</div>
</div>
</div>
) : displaySelected === 1 ? (
<div
style={{
padding: "1rem",
}}
>
<form
className={classes.root}
noValidate
autoComplete="off"
>
<div className="profileSectionEditorText ">
<div className="profileSectionEditorTextDiv">
<TextField
className="disabledrag"
id="ProfileSectionUsernameP"
label="User Name"
variant="outlined"
fullWidth
required
defaultValue={UsernameP}
/>
</div>
<div className="profileSectionEditorFontPickerDiv ">
<FontPicker
className="profileSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={UsernameFontP}
onChange={(nextFont) => {
setfontStyle(
nextFont.family
);
dispatch({
type: "usernamefontp",
payload:
nextFont.family,
});
}}
/>
</div>
<div className="profileSectionEditorColorDiv">
<input
type="color"
value={UsernameColorP}
onChange={(e) => {
dispatch({
type: "usernamecolorp",
payload: e.target.value,
});
}}
></input>
</div>
</div>
{/* <div className="profileSectionEditorText disabledrag">
<div className="profileSectionEditorTextDiv">
<TextField
className={classes.textfield}
id="lastnameInput"
label="Last Name"
variant="outlined"
fullWidth
required
/>
</div>
<div className="profileSectionEditorFontPickerDiv disabledrag">
<FontPicker
className="profileSectionEditorFontpicker"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={fontStyle}
onChange={(nextFont) =>
setfontStyle(
nextFont.family
)
}
/>
</div>
</div> */}
<div className="profileSectionEditorText ">
<div className="profileSectionEditorTextDiv">
<TextField
className="disabledrag apply-font"
id="ProfileSectionDescribeP"
label="Tagline"
variant="outlined"
placeholder="Your Tagline"
fullWidth
multiline
defaultValue={DescribeP}
/>
</div>
<p className="apply-font"></p>
<div className="profileSectionEditorFontPickerDiv disabledrag">
<FontPicker
className="profileSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={DescribeFontP}
onChange={(nextFont) => {
setfontStyle(
nextFont.family
);
dispatch({
type: "describefontp",
payload:
nextFont.family,
});
}}
/>
</div>
<div className="profileSectionEditorColorDiv">
<input
type="color"
value={DescribeColorP}
onChange={(e) => {
dispatch({
type: "describecolorp",
payload: e.target.value,
});
}}
></input>
</div>
</div>
<div className="profileSectionEditorText ">
<div className="profileSectionEditorTextDiv">
<TextField
className="disabledrag"
id="ProfileSectionAddressP"
label="Location"
variant="outlined"
fullWidth
required
defaultValue={AddressP}
/>
</div>
<div className="profileSectionEditorFontPickerDiv">
<FontPicker
className="profileSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={AddressFontP}
onChange={(nextFont) => {
setfontStyle(
nextFont.family
);
dispatch({
type: "addressfontp",
payload:
nextFont.family,
});
}}
/>
</div>
<div className="profileSectionEditorColorDiv">
<input
type="color"
value={AddressColorP}
onChange={(e) => {
dispatch({
type: "addresscolorp",
payload: e.target.value,
});
}}
></input>
</div>
</div>
<div className="mx-auto" style={{width:"max-content"}}>
<Button variant="outlined" color="primary"
onClick={()=>{
dispatch({type:"usernamep",payload:document.querySelector("#ProfileSectionUsernameP").value});
dispatch({type:"describep",payload:document.querySelector("#ProfileSectionDescribeP").value});
dispatch({type:"addressp",payload:document.querySelector("#ProfileSectionAddressP").value});
}}
>Apply text
</Button>
</div>
</form>
</div>
) : (
<div className="profileSectionEditorButton">
<p className="profileSectionEditorButtonHeader">
Button Style:
</p>
<p className="profileSectionEditorSideHeading">
Download Button:{" "}
</p>
<div className="profileSectionEditorButtonMenu">
<div
className={`profileSectionEditorButtonStyle ${dbuttonStyle[0]}`}
// onClick={() => buttonStyleHandler(0)}
onClick={() => {
dispatch({
type: "dbuttonstylep",
payload: "contained",
});
dbuttonStyleHandler(0);
}}
>
<Button
className=""
variant="contained"
color="secondary"
>
Contained
</Button>
</div>
<div
className={`profileSectionEditorButtonStyle ${dbuttonStyle[1]}`}
onClick={() => {
dispatch({
type: "dbuttonstylep",
payload: "",
});
dbuttonStyleHandler(1);
}}
>
<Button
className=""
color="secondary"
variant=""
>
Text Button
</Button>
</div>
<div
className={`profileSectionEditorButtonStyle ${dbuttonStyle[2]}`}
// onClick={() => buttonStyleHandler(2)}
onClick={() => {
dispatch({
type: "dbuttonstylep",
payload: "outlined",
});
dbuttonStyleHandler(2);
}}
>
<Button
className=""
variant="outlined"
color="secondary"
>
Outlined
</Button>
</div>
</div>
<p className="profileSectionEditorSideHeading">
Hire Me Button:
</p>
<div className="profileSectionEditorButtonMenu">
<div
className={`profileSectionEditorButtonStyle ${hbuttonStyle[0]}`}
// onClick={() => buttonStyleHandler(0)}
onClick={() => {
dispatch({
type: "hbuttonstylep",
payload: "contained",
});
hbuttonStyleHandler(0);
}}
>
<Button
className=""
variant="contained"
color="secondary"
>
Contained
</Button>
</div>
<div
className={`profileSectionEditorButtonStyle ${hbuttonStyle[1]}`}
onClick={() => {
dispatch({
type: "hbuttonstylep",
payload: "",
});
hbuttonStyleHandler(1);
}}
>
<Button
className=""
color="secondary"
variant=""
>
Text Button
</Button>
</div>
<div
className={`profileSectionEditorButtonStyle ${hbuttonStyle[2]}`}
// onClick={() => buttonStyleHandler(2)}
onClick={() => {
dispatch({
type: "hbuttonstylep",
payload: "outlined",
});
hbuttonStyleHandler(2);
}}
>
<Button
className=""
variant="outlined"
color="secondary"
>
Outlined
</Button>
</div>
</div>
<p className="profileSectionEditorButtonHeader profileSectionEditorSideHeading">
Button Background Color:
</p>
<div
style={{
display: "flex",
justifyContent: "space-around",
flexWrap: "wrap",
}}
>
<div
className="disabledrag profileSectionEditorButtonColorPicker mx-2"
style={
{
// margin: "auto !important",
}
}
>
<p className="text-center">
HIRE ME BUTTON:
</p>
<ChromePicker
color={HButtonColorP}
onChange={(updatedColor) =>
dispatch({
type: "hbuttoncolorp",
payload: updatedColor.hex,
})
}
/>
</div>
<div
className="disabledrag profileSectionEditorButtonColorPicker mx-2"
style={
{
// margin: "auto !important",
}
}
>
<p className="text-center">
DOWNLOAD RESUME BUTTON:
</p>
<ChromePicker
color={DButtonColorP}
onChange={(updatedColor) =>
// setbuttonColor(updatedColor)
dispatch({
type: "dbuttoncolorp",
payload: updatedColor.hex,
})
}
/>
</div>
</div>
<p className="profileSectionEditorSideHeading">Text Color:</p>
<div
style={{
display: "flex",
justifyContent: "space-around",
flexWrap: "wrap",
}}
>
<div
className="disabledrag profileSectionEditorButtonColorPicker mx-2"
style={
{
// margin: "auto !important",
}
}
>
<p className="text-center">
HIRE ME BUTTON:
</p>
<ChromePicker
color={HTextColorP}
onChange={(updatedColor) =>
dispatch({
type: "htextcolorp",
payload: updatedColor.hex,
})
}
/>
</div>
{/* <div
className="disabledrag profileSectionEditorButtonColorPicker"
>
<p className=" text-centre profileSectionEditorButtonHeader">
HIRE BUTTON COLOR:
</p>
<ChromePicker
color={HTextColorP}
onChange={(updatedColor) =>
dispatch({type:"dtextcolorp",payload:updatedColor.hex})
// setbuttonTextColor(updatedColor)
}
/>
</div> */}
{/* <div
className="disabledrag profileSectionEditorButtonColorPicker"
>
<p className="text-center profileSectionEditorButtonHeader">
DOWNLOAD BUTTON COLOR :
</p>
<div
className="disabledrag"
>
<ChromePicker
color={DTextColorP}
onChange={(updatedColor) =>
dispatch({type:"dtextcolorp",payload:updatedColor.hex})
// setbuttonTextColor(updatedColor)
}
/>
</div>
</div> */}
<div
className="disabledrag profileSectionEditorButtonColorPicker mx-2"
style={
{
// margin: "auto !important",
}
}
>
<p className="text-center">
DOWNLOAD BUTTON COLOR:
</p>
<SketchPicker
color={DTextColorP}
onChange={(updatedColor) =>
dispatch({
type: "dtextcolorp",
payload: updatedColor.hex,
})
}
/>
</div>
</div>
</div>
)}
</div>
</div>
</div>
</div>
);
}
Example #10
| Source File: TextEditorNavbar.jsx From portfolyo-mern with MIT License | 4 votes |
|
TextEditorNavbar = ({ alignmentSetter, alignmentValue }) => {
const [visible, setVisible] = useState(false);
const show = () => setVisible(true);
const hide = () => setVisible(false);
const dispatch = useDispatch();
const textBeingChangedColorDispatch = useSelector(
(state) => state.textBeingChangedColorDispatch
);
const textBeingChangedFontDispatch = useSelector(
(state) => state.textBeingChangedFontDispatch
);
const textBeingChangedColorValue = useSelector(
(state) => state.textBeingChangedColorValue
);
const textBeingChangedFontValue = useSelector(
(state) => state.textBeingChangedFontValue
);
const textBeingChangedAlignment = useSelector(
(state) => state.textBeingChangedAlignment
);
const textBeingChangedAlignmentDispatch = useSelector(
(state) => state.textBeingChangedAlignmentDispatch
);
const diffReducer = useSelector((state) => state.diffReducer);
const projectheader = useSelector((state) => state.projectheader);
const [fontStyle, setfontStyle] = useState(textBeingChangedFontValue);
const [textColor, settextColor] = useState(textBeingChangedColorValue);
return (
<div className="TextEditorNavbarDiv">
<FontPicker
className="TextEditorNavbarFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={fontStyle}
onChange={(nextFont) => {
setfontStyle(nextFont.family);
console.log(diffReducer);
if (diffReducer === "true") {
dispatch({
type: `${textBeingChangedFontDispatch}`,
payload: {
...projectheader,
fontStyle: nextFont.family,
},
});
} else if (diffReducer === "truep") {
dispatch({
type: `${textBeingChangedFontDispatch}`,
payload: {
...projectheader,
fontStylep: nextFont.family,
},
});
} else {
dispatch({
type: `${textBeingChangedFontDispatch}`,
payload: nextFont.family,
});
}
}}
style={{
backgroundColor: "white",
}}
/>
<Tippy
interactive={true}
visible={visible}
onClickOutside={hide}
content={
<ChromePicker
color={textColor}
onChangeComplete={(newColor) => {
settextColor(
"#" +
rgbHex(
newColor.rgb.r,
newColor.rgb.g,
newColor.rgb.b,
newColor.rgb.a
)
);
if (diffReducer === "true") {
dispatch({
type: `${textBeingChangedColorDispatch}`,
payload: {
...projectheader,
color:
"#" +
rgbHex(
newColor.rgb.r,
newColor.rgb.g,
newColor.rgb.b,
newColor.rgb.a
),
},
});
} else if (diffReducer === "truep") {
dispatch({
type: `${textBeingChangedFontDispatch}`,
payload: {
...projectheader,
colorp:
"#" +
rgbHex(
newColor.rgb.r,
newColor.rgb.g,
newColor.rgb.b,
newColor.rgb.a
),
},
});
} else {
dispatch({
type: `${textBeingChangedColorDispatch}`,
payload:
"#" +
rgbHex(
newColor.rgb.r,
newColor.rgb.g,
newColor.rgb.b,
newColor.rgb.a
),
});
}
}}
></ChromePicker>
}
placement={"bottom"}
>
<Button
style={{
backgroundColor: "white",
// border: "1px solid black",
padding: "0px",
}}
onClick={(e) => {
setVisible(!visible);
}}
>
<img
src={ColorPickerIcon}
alt="ColorPickerIcon"
style={{
width: "2.5rem",
height: "2.5rem",
}}
></img>
</Button>
</Tippy>
{textBeingChangedAlignmentDispatch !== "" ? (
<ToggleButtonGroup
className="skillsSectionHeaderToogler"
value={textBeingChangedAlignment}
exclusive
onChange={(event, newAlignment) => {
dispatch({
type: `${textBeingChangedAlignmentDispatch}`,
payload: newAlignment,
});
dispatch({
type: "textBeingChangedAlignment",
payload: newAlignment,
});
}}
aria-label="text alignment"
>
<ToggleButton
value="left"
aria-label="left aligned"
style={{
height: "3rem",
}}
>
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton
value="center"
aria-label="centered"
style={{
height: "3rem",
}}
>
<FormatAlignCenterIcon />
</ToggleButton>
</ToggleButtonGroup>
) : null}
</div>
);
}
Example #11
| Source File: ContactForm.jsx From portfolyo-mern with MIT License | 4 votes |
|
ContactForm = () => {
const ContactBackground = useSelector((state) => state.ContactBackground);
const ContactText = useSelector((state) => state.ContactText);
const ContactTextFont = useSelector((state) => state.ContactTextFont);
const ContactBgColors = useSelector((state) => state.ContactBgColors);
const [visible, setVisible] = useState(false);
const ViewMode = useSelector((state) => state.ViewMode);
const hide = () => setVisible(false);
const dispatch = useDispatch();
const [footerText, setfooterText] = useState(ContactText.quotation);
return (
<div>
<Button
variant="outlined"
style={{ margin: "auto", display: ViewMode ? "none" : "block" }}
onClick={() => {
dispatch({ type: "openeditor", payload: true });
dispatch({ type: "tabpointer", payload: 8 });
dispatch({ type: "getcurrenttabcontact", payload: 2 });
}}
>
background <CameraAltIcon />
</Button>
<div
background={Map}
className="ContactForm container-fluid px-sm-3"
style={{
backgroundImage: `url(${ContactBackground.image})`,
backgroundPosition: "center center",
backgroundRepeat: "norepeat",
backgroundSize: "cover",
}}
>
{/* <img src={Map} id="bg-image" className="mt-5" style={{zIndex:0,postion:"absolute",width:"100%"}}/> */}
<div className="container p-sm-5 py-4" style={{ zIndex: 999 }}>
{/* <div className="container-md p-5 border mx-auto"> */}
<ContactEditor />
{/* </div> */}
</div>
</div>
<div
style={{
margin: "0",
padding: "20px",
backgroundColor: ContactBgColors.footerBgColor,
border: "1px solid black",
width: "100%",
position: "relative",
display: "flex",
alignItems: "center",
marginBottom: `${ViewMode ? "3rem" : "0"}`,
wordBreak: "break-word",
}}
>
{!ViewMode ? (
<Tippy
interactive={true}
visible={visible}
onClickOutside={hide}
content={
<ChromePicker
color={ContactBgColors.footerBgColor}
onChangeComplete={(newColor) => {
dispatch({
type: `contactbgcolors`,
payload: {
...ContactBgColors,
footerBgColor:
"#" +
rgbHex(
newColor.rgb.r,
newColor.rgb.g,
newColor.rgb.b,
newColor.rgb.a
),
},
});
}}
></ChromePicker>
}
placement={"top"}
>
<Button
style={{ position: "absolute", right: "1rem" }}
onClick={(e) => {
setVisible(!visible);
}}
>
<FormatColorFillIcon style={{ color: "#ffffff" }} />
</Button>
</Tippy>
) : null}
{!ViewMode ? (
<div
className={`col-sm-8 textAreaEditorDivAboutTitle`}
style={{
width: "100%",
margin: "auto",
display: "flex",
alignItems: "center",
}}
>
<TextareaAutosize
className={`aboutSectionContentRightBasicInfoValues`}
id={`textEditorDIvFooter`}
value={footerText}
spellCheck="false"
// cols={textAreaUsername.length}
placeholder="Enter Text For Footer"
style={{
color: ContactBgColors.quotation,
fontSize: "1.3rem !important",
textAlign: "center",
fontFamily: ContactTextFont.quotation,
}}
onChange={(e) => {
setfooterText(e.target.value);
}}
onFocus={(e) => {
// settextAreaUsernameFocused(true);
dispatch({
type: "openMiniTextEditor",
});
dispatch({
type: "textBeingChangedColorDispatch",
payload: "footerColorChange",
});
dispatch({
type: "textBeingChangedFontDispatch",
payload: "footerFontStyleChange",
});
dispatch({
type: "textBeingChangedColorValue",
payload: ContactBgColors.quotation,
});
dispatch({
type: "textBeingChangedFontValue",
payload: ContactTextFont.quotation,
});
}}
onBlur={(e) => {
// settextAreaUsernameFocused(false);
dispatch({
type: "contactchangetext",
payload: {
...ContactText,
quotation: footerText,
},
});
}}
></TextareaAutosize>
</div>
) : (
<p
className=" text-center"
style={{
color: ContactBgColors.quotation,
fontSize: "1.3rem",
fontFamily: ContactTextFont.quotation,
margin: "auto",
}}
>
{ContactText.quotation}
</p>
)}
</div>
</div>
);
}
Example #12
| Source File: AboutSectorEditor.jsx From portfolyo-mern with MIT License | 4 votes |
|
AboutSectorEditor = () => {
//redux
const dispatch = useDispatch();
//buttons
const [optionClicked, setoptionClicked] = useState(["", "", ""]);
const [optionSelected, setoptionSelected] = useState([
"btn-group__item--selected",
"",
"",
]);
const [displaySelected, setdisplaySelected] = useState(0);
const optionClickedHandlers = (index) => {
let tempOption = ["", "", ""];
tempOption[index] = "btn-group__item--active";
let tempSelected = ["", "", ""];
tempSelected[index] = "btn-group__item--selected";
setoptionClicked(tempOption);
setTimeout(() => {
setoptionClicked(["", "", ""]);
}, 600);
setoptionSelected(tempSelected);
setdisplaySelected(index);
};
//layout backgrounds
const aboutBackgroundLayoutRedux = useSelector(
(state) => state.aboutSectionBackground.backgroundType
);
const [layoutBackgroundSelected, setlayoutBackgroundSelected] = useState(["aboutSectionBackgroundSelected", "", ""]);
const aboutSectionBackgroundHandler = (index) => {
const temp = ["", "", ""];
temp[index] = "aboutSectionBackgroundSelected";
setlayoutBackgroundSelected(temp);
dispatch({
type: "aboutSectionBackgroundChange",
payload: index,
});
}
//layout Background Colors
const aboutBackgroundColorRedux = useSelector(
(state) => state.aboutSectionBackground.backgroundColor
);
const [layoutBackgroundColor, setlayoutBackgroundColor] = useState(
aboutBackgroundColorRedux
);
const layoutBackgroundColorHandler = (color) => {
setlayoutBackgroundColor(color);
dispatch({
type: "aboutSectionBackgroundColorChange",
payload: color,
});
}
//layout Designs
const layoutDesignSelectedRedux = useSelector(
(state) => state.aboutSectionBackground.backgroundDesignType
);
const [layoutDesignSelected, setlayoutDesignSelected] = useState(["aboutSectionLayoutDesignSelected", "", "", ""]);
const layoutDesignHandler = (index) => {
const temp = ["", "", "", ""];
temp[index] = "aboutSectionLayoutDesignSelected";
setlayoutDesignSelected(temp);
dispatch({
type: "aboutSectionBackgroundDesignChange",
payload: index
});
}
const aboutImageBorderColorRedux = useSelector(
(state) => state.aboutSectionBackground.imageBorderColor
);
const [aboutImageBorderColor, setaboutImageBorderColor] = useState(
aboutImageBorderColorRedux
);
const aboutImageBorderColorHandler = (color) => {
setaboutImageBorderColor(color);
dispatch({
type: "aboutSectionImageBorderColor",
payload: color.hex
});
};
//transitions
const transitiontypeRedux = useSelector(
(state) => state.aboutSectionBackground.backgroundTransition
);
const classes = useStyles();
const [transitionStyle, settransitionStyle] = useState(transitiontypeRedux);
const transitionStyleHandler = (event) => {
settransitionStyle(event.target.value);
};
const [transitionSelected, settransitionSelected] = useState(["aboutSectionTrasitionSelected","", "", ""]);
const transitionSectionHandler = (index, event) => {
if(index === 0){
settransitionStyle("none");
dispatch({
type: "aboutSectionTransitionChanger",
payload: "none"
});
return;
}
const temp = ["", "", "", ""];
temp[index] = "aboutSectionTrasitionSelected";
settransitionSelected(temp);
settransitionStyle(event.target.value);
dispatch({
type: "aboutSectionTransitionChanger",
payload: event.target.value,
});
}
//text fonts and styles
const [fontStyle, setfontStyle] = useState("Open Sans");
const aboutTitleRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionTitle
);
const aboutIntroRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionIntro
);
const aboutPassageRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionPassage
);
const aboutImageTitleRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionImageTitle
);
const aboutSocialMediaTitleRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionSocialMediaTitle
);
const aboutSectionBasicInfoRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionBasicInfo
);
const aboutSectionSocialMediaLinksRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionSocialMediaLinks
);
const aboutTitleTextReduxHandler = (event) => {
dispatch({
})
}
const aboutTitleAlignment = useSelector(
(state) => state.aboutSectionBackground.aboutSectionTitleAlignment
);
const aboutTitleAlignmentHandler = (event) => {
dispatch({
type: "aboutSectionTitleAlignmentChanger",
payload: event.target.value
});
}
useEffect(() => {
aboutSectionBackgroundHandler(aboutBackgroundLayoutRedux);
layoutDesignHandler(layoutDesignSelectedRedux);
}, [])
return (
<div className="aboutSectionEditorPage">
<div
className="btn-group "
style={{
display: "block",
// verticalAlign: "middle",
maxWidth: "max-content",
margin: "auto auto 1rem auto",
}}
>
<button
className={`btn-group__item btn-group__item ${optionClicked[0]} ${optionSelected[0]}`}
onClick={() => optionClickedHandlers(0)}
>
Layout
</button>
<button
className={`btn-group__item ${optionClicked[1]} ${optionSelected[1]}`}
onClick={() => optionClickedHandlers(1)}
>
Design's Effect's
</button>
<button
className={`btn-group__item ${optionClicked[2]} ${optionSelected[2]}`}
onClick={() => optionClickedHandlers(2)}
>
Text
</button>
</div>
{displaySelected === 0 ? (
<div className="aboutSectionEditorLayoutOptions">
<p className="aboutSectionEditorHeader">Backgrounds:</p>
<div className="aboutSectionEditorLayoutBackground">
<div
className={`aboutSectionEditorLayoutBackgrounds ${layoutBackgroundSelected[0]}`}
onClick={() => {
aboutSectionBackgroundHandler(0);
// dispatch({ type: "layoutp", payload: 1 });
}}
>
<img src={aboutBackground1} alt="background1"></img>
<p>Background-1</p>
</div>
<div
className={`aboutSectionEditorLayoutBackgrounds ${layoutBackgroundSelected[1]}`}
onClick={() => {
aboutSectionBackgroundHandler(1);
// dispatch({ type: "layoutp", payload: 2 });
}}
>
<img src={aboutBackground2} alt="background2"></img>
<p>Background-2</p>
</div>
<div
className={`aboutSectionEditorLayoutBackgrounds ${layoutBackgroundSelected[2]}`}
onClick={() => {
aboutSectionBackgroundHandler(2);
// dispatch({ type: "layoutp", payload: 2 });
}}
>
<div className="aboutSectionEditorLayoutBackground3">
<p
style={{
margin: "auto",
marginTop: "auto",
verticalAlign: "middle",
display: "block",
}}
>
None
</p>
</div>
<p>Background-3</p>
</div>
</div>
<p className="aboutSectionEditorHeader">
Background Color:
</p>
<div className="aboutSectionBackgrounColor">
<div className="aboutSectionBackgroundColorPicker disabledrag">
<ChromePicker
color={layoutBackgroundColor}
onChange={(newColor) => {
layoutBackgroundColorHandler(
"#" +
rgbHex(
newColor.rgb.r,
newColor.rgb.g,
newColor.rgb.b,
newColor.rgb.a
)
);
}}
></ChromePicker>
</div>
</div>
</div>
) : displaySelected === 1 ? (
<div className="aboutSectionDesignEditor">
<p className="aboutSectionEditorHeader">Design:</p>
<div className="aboutSectionEditorLayoutDesign">
<div
className={`aboutSectionEditorLayoutDesigns ${layoutDesignSelected[0]}`}
onClick={() => {
layoutDesignHandler(0);
// dispatch({ type: "layoutp", payload: 1 });
}}
>
<img
src={aboutLayoutDesign1}
alt="aboutLayoutDesign1"
></img>
<p>Design-1</p>
</div>
<div
className={`aboutSectionEditorLayoutDesigns ${layoutDesignSelected[1]}`}
onClick={() => {
layoutDesignHandler(1);
// dispatch({ type: "layoutp", payload: 2 });
}}
>
<img
src={aboutLayoutDesign2}
alt="aboutLayoutDesign2"
></img>
<p>Design-2</p>
</div>
<div
className={`aboutSectionEditorLayoutDesigns ${layoutDesignSelected[2]}`}
onClick={() => {
layoutDesignHandler(2);
// dispatch({ type: "layoutp", payload: 2 });
}}
>
<img
src={aboutLayoutDesign3}
alt="aboutLayoutDesign3"
></img>
<p>Design-3</p>
</div>
<div
className={`aboutSectionEditorLayoutDesigns ${layoutDesignSelected[3]}`}
onClick={() => {
layoutDesignHandler(3);
// dispatch({ type: "layoutp", payload: 2 });
}}
>
<img
src={aboutLayoutDesign4}
alt="aboutLayoutDesign4"
></img>
<p>Design-4</p>
</div>
</div>
<p className="aboutSectionEditorHeader">
Image Border Color:
</p>
<div className="aboutSectionImageBorderColor">
<div className="aboutSectionImageBorderColorPicker disabledrag">
<ChromePicker
color={aboutImageBorderColor}
onChange={(newColor) => {
aboutImageBorderColorHandler(newColor);
}}
></ChromePicker>
</div>
</div>
<p className="aboutSectionEditorHeader">Transitions:</p>
<div className="aboutSectionTransitionEditor">
<div
className={`aboutSectionTransitionsNone ${transitionSelected[0]}`}
onClick={() => {
transitionSectionHandler(0, null);
}}
>
<p
style={{
display: "block",
margin: "auto",
}}
>
None
</p>
</div>
<div
className={`aboutSectionTransitions ${transitionSelected[1]}`}
onClick={(event) => {
transitionSectionHandler(1, event);
}}
>
<img
src={transitionFade}
alt="transitionFade"
></img>
<FormControl
variant="outlined"
className={`disabledrag ${classes.formControl}`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Fade
</InputLabel>
<Select
native
value={transitionStyle}
onChange={transitionStyleHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"fade-up"}>Fade Up</option>
<option value={"fade-down"}>
Fade down
</option>
<option value={"fade-right"}>
Fade right
</option>
<option value={"fade-left"}>
Fade left
</option>
<option value={"fade-up-right"}>
Fade Up Right
</option>
<option value={"fade-up-left"}>
Fade Up left
</option>
<option value={"fade-down-right"}>
Fade Down Right
</option>
<option value={"fade-down-left"}>
Fade Down Left
</option>
</Select>
</FormControl>
</div>
<div
className={`aboutSectionTransitions ${transitionSelected[2]}`}
onClick={(event) => {
transitionSectionHandler(2, event);
}}
>
<img
src={transitionFlip}
alt="transitionFlip"
></img>
<FormControl
variant="outlined"
className={`disabledrag ${classes.formControl}`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Flip
</InputLabel>
<Select
native
value={transitionStyle}
onChange={transitionStyleHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"flip-left"}>
Flip Left
</option>
<option value={"flip-right"}>
Flip Right
</option>
<option value={"flip-up"}>Flip Up</option>
<option value={"flip-down"}>
Flip Down
</option>
</Select>
</FormControl>
</div>
<div
className={`aboutSectionTransitions ${transitionSelected[3]}`}
onClick={(event) => {
transitionSectionHandler(3, event);
}}
>
<img
src={transitionZoom}
alt="transitionZoom"
></img>
<FormControl
variant="outlined"
className={`disabledrag ${classes.formControl}`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Zoom
</InputLabel>
<Select
native
value={transitionStyle}
onChange={(event) => {
transitionSectionHandler(3, event);
}}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"zoom-in"}>Zoom In</option>
<option value={"zoom-in-up"}>
Zoom In Up
</option>
<option value={"zoom-in-down"}>
Zoom In Down
</option>
<option value={"zoom-in-left"}>
Zoom In Left
</option>
<option value={"zoom-in-right"}>
In Right
</option>
<option value={"zoom-out"}>Zoom Out</option>
<option value={"zoom-out-up"}>
Zoom Out Up
</option>
<option value={"zoom-out-down"}>
Zoom Out Down
</option>
<option value={"zoom-out-right"}>
Zoom Out Right
</option>
<option value={"zoom-out-left"}>
Zoom Out Left
</option>
</Select>
</FormControl>
</div>
</div>
</div>
) : displaySelected === 2 ? (
<div>
<p className="aboutSectionEditorHeader">
Text, Font and Color's
</p>
<hr />
<div className="aboutSectionEditorTexts">
<p>About title</p>
<div className="aboutSectionEditorTextsAboutTitle">
<div className="aboutSectionEditorTextsAboutTitleTextDiv">
<TextField
required
fullWidth
id="outlined-required"
label="About Title"
defaultValue={aboutTitleRedux.text}
variant="outlined"
className="disabledrag"
onChange={(event) => {
dispatch({
type: "aboutSectionTitleTextChange",
payload: event.target.value,
});
}}
/>
</div>
<FontPicker
className="aboutSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={aboutTitleRedux.fontStyle}
limit={100}
onChange={(nextFont) => {
setfontStyle(nextFont.family);
dispatch({
type:
"aboutSectionTitleFontStyleChange",
payload: nextFont.family,
});
}}
/>
<Input
type="color"
className="aboutSectionEditorTextsColor"
value={aboutTitleRedux.color}
onChange={(event) => {
dispatch({
type: "aboutSectionTitleColorChange",
payload: event.target.value,
});
}}
></Input>
</div>
<FormControl component="fieldset">
<FormLabel component="legend">
About title Alignment:
</FormLabel>
<RadioGroup
defaultValue="left"
aria-label="gender"
name="aboutTitleAlignmentRadios"
value={aboutTitleAlignment}
onChange={aboutTitleAlignmentHandler}
>
<FormControlLabel
value="left"
control={<StyledRadio />}
label="Left"
/>
<FormControlLabel
value="middle"
control={<StyledRadio />}
label="Middle"
/>
</RadioGroup>
</FormControl>
<p>Image Title</p>
<div className="aboutSectionEditorTextsImageTitle">
<div className="aboutSectionEditorTextsImageTitleTextDiv">
<TextField
fullWidth
required
id="outlined-required"
label="Image Title"
defaultValue={aboutImageTitleRedux.text}
variant="outlined"
className="disabledrag"
onChange={(event) => {
dispatch({
type:
"aboutSectionImageTitleTextChange",
payload: event.target.value,
});
}}
/>
</div>
<FontPicker
className="aboutSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
pickerId="aboutSectionEditorImageTitleFontpicker"
activeFontFamily={
aboutImageTitleRedux.fontStyle
}
limit={100}
onChange={(nextFont) => {
dispatch({
type:
"aboutSectionImageTitleFontStyleChange",
payload: nextFont.family,
});
}}
/>
<Input
type="color"
value={aboutImageTitleRedux.color}
className="aboutSectionEditorTextsColor"
onChange={(event) => {
dispatch({
type:
"aboutSectionImageTitleColorChange",
payload: event.target.value,
});
}}
></Input>
</div>
<p>Self Intro:</p>
<div className="aboutSectionEditorTextsIntro">
<div className="aboutSectionEditorTextsIntroTextDiv">
<TextField
fullWidth
required
id="outlined-multiline-static"
multiline
label="Introduce Yourself"
defaultValue={aboutIntroRedux.text}
variant="outlined"
className="disabledrag"
onChange={(event) => {
dispatch({
type: "aboutSectionIntroTextChange",
payload: event.target.value,
});
}}
/>
</div>
<FontPicker
className="aboutSectionEditorIntroFontpicker disabledrag"
pickerId="aboutSectionEditorIntroFontpicker"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={aboutIntroRedux.fontStyle}
limit={100}
onChange={(nextFont) => {
/* setfontStyle(nextFont.family); */
dispatch({
type:
"aboutSectionIntroFontStyleChange",
payload: nextFont.family,
});
}}
/>
<Input
type="color"
className="aboutSectionEditorTextsColor"
value={aboutIntroRedux.color}
onChange={(event) => {
dispatch({
type: "aboutSectionIntroColorChange",
payload: event.target.value,
});
}}
></Input>
</div>
<p>About Yourself:</p>
<div className="aboutSectionEditorTextsIntro">
<div className="aboutSectionEditorTextsIntroTextDiv">
<TextField
fullWidth
required
id="outlined-multiline-static"
multiline
label="About Yourself"
defaultValue={aboutPassageRedux.text}
variant="outlined"
className="disabledrag"
onChange={(event) => {
dispatch({
type:
"aboutSectionPassageTextChange",
payload: event.target.value,
});
}}
/>
</div>
<FontPicker
className="aboutSectionEditorIntroFontpicker disabledrag"
pickerId="aboutSectionEditorPassageFontpicker"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={aboutIntroRedux.fontStyle}
limit={100}
onChange={(nextFont) => {
/* setfontStyle(nextFont.family); */
dispatch({
type:
"aboutSectionPassageFontStyleChange",
payload: nextFont.family,
});
}}
/>
<Input
type="color"
className="aboutSectionEditorTextsColor"
value={aboutIntroRedux.color}
onChange={(event) => {
dispatch({
type: "aboutSectionPassageColorChange",
payload: event.target.value,
});
}}
></Input>
</div>
<p>Basic Information Section:</p>
<div className="aboutSectionEditorBasicInfo">
<p>Basic Info Title:</p>
<div
className="aboutSectionEditorBasicInfoTitle"
style={{
borderLeft: "#3af25f 2px solid",
}}
>
<div className="aboutSectionEditorBasicInfoTitleTextDiv">
<TextField
fullWidth
required
id="outlined-required"
label="Basic-Info Title"
defaultValue={
aboutSectionBasicInfoRedux.title
.text
}
variant="outlined"
className="disabledrag"
onChange={(event) => {
dispatch({
type:
"aboutSectionBasicInfoTitleTextChange",
payload: event.target.value,
});
}}
/>
</div>
<FontPicker
className="aboutSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
limit={100}
pickerId="aboutSectionEditorBasicInfoTitleFontpicker"
activeFontFamily={
aboutSectionBasicInfoRedux.title
.fontStyle
}
onChange={(nextFont) => {
dispatch({
type:
"aboutSectionBasicInfoTitleFontStyleChange",
payload: nextFont.family,
});
}}
/>
<Input
type="color"
value={
aboutSectionBasicInfoRedux.title.color
}
className="aboutSectionEditorTextsColor"
onChange={(event) => {
dispatch({
type:
"aboutSectionBasicInfoTitleColorChange",
payload: event.target.value,
});
}}
></Input>
</div>
<p>Key Font's and Color's:</p>
<div
className="aboutSectionEditorBasicInfoKeys"
style={{
borderLeft: "#3af25f 2px solid",
}}
>
<FontPicker
className="aboutSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
pickerId="aboutSectionBasicInfoKeysFontStyle"
activeFontFamily={
aboutSectionBasicInfoRedux.keys
.fontStyle
}
limit={100}
onChange={(nextFont) => {
dispatch({
type:
"aboutSectionBasicInfoKeysFontStylesChange",
payload: nextFont.family,
});
}}
/>
<Input
value={
aboutSectionBasicInfoRedux.keys.color
}
type="color"
className="aboutSectionEditorTextsColor"
onChange={(event) => {
dispatch({
type:
"aboutSectionBasicInfoKeysColorChange",
payload: event.target.value,
});
}}
></Input>
</div>
<p>Values:</p>
<div
className="aboutSectionEditorBasicInfoValues"
style={{
borderLeft: "#3af25f 2px solid",
padding: "1rem",
}}
>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<div className="aboutSectionEditorBasicInfoValuesdivText">
<TextField
required
fullWidth
id="outlined-required"
label="Age"
variant="outlined"
className="disabledrag"
defaultValue={
aboutSectionBasicInfoRedux
.values.text.age
}
onChange={(event) => {
dispatch({
type:
"aboutSectionBasicInfoValuesTextAgeChange",
payload: event.target.value,
});
}}
/>
</div>
</div>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<div className="aboutSectionEditorBasicInfoValuesdivText">
<TextField
required
fullWidth
id="outlined-required"
label="Email"
defaultValue={
aboutSectionBasicInfoRedux
.values.text.email
}
onChange={(event) => {
dispatch({
type:
"aboutSectionBasicInfoValuesTextEmailChange",
payload: event.target.value,
});
}}
variant="outlined"
className="disabledrag"
/>
</div>
</div>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<div className="aboutSectionEditorBasicInfoValuesdivText">
<TextField
required
fullWidth
id="outlined-required"
label="Phone"
defaultValue={
aboutSectionBasicInfoRedux
.values.text.phone
}
onChange={(event) => {
dispatch({
type:
"aboutSectionBasicInfoValuesTextPhoneChange",
payload: event.target.value,
});
}}
variant="outlined"
className="disabledrag"
/>
</div>
</div>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<div
className="aboutSectionEditorBasicInfoValuesdivText"
style={{
width: "70%",
}}
>
<TextField
fullWidth
required
id="outlined-required"
label="Address"
multiline
defaultValue={
aboutSectionBasicInfoRedux
.values.text.address
}
onChange={(event) => {
dispatch({
type:
"aboutSectionBasicInfoValuesTextAddressChange",
payload: event.target.value,
});
}}
variant="outlined"
className="disabledrag"
/>
</div>
</div>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<div className="aboutSectionEditorBasicInfoValuesdivText">
<TextField
fullWidth
required
id="outlined-required"
label="Language"
defaultValue={
aboutSectionBasicInfoRedux
.values.text.languages
}
onChange={(event) => {
dispatch({
type:
"aboutSectionBasicInfoValuesTextLanguagesChange",
payload: event.target.value,
});
}}
variant="outlined"
className="disabledrag"
/>
</div>
</div>
<p>Values Font's and Color's:</p>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<FontPicker
className="aboutSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
limit={100}
pickerId="aboutSectionEditorBasicInfoValuesFontpicker"
activeFontFamily={
aboutSectionBasicInfoRedux.values
.fontStyle
}
onChange={(nextFont) => {
dispatch({
type:
"aboutSectionBasicInfoValuesFontStyleChange",
payload: nextFont.family,
});
}}
/>
<Input
type="color"
className="aboutSectionEditorTextsColor"
value={
aboutSectionBasicInfoRedux.values
.color
}
onChange={(event) => {
dispatch({
type:
"aboutSectionBasicInfoValuesColorChange",
payload: event.target.value,
});
}}
></Input>
</div>
</div>
</div>
<p
style={{
marginTop: "2rem",
}}
>
Social Media Links:
</p>
<div className="aboutSectionEditorSocialMediaLinks">
<div className="aboutSectionEditorSocialMediaTitledivText">
<div className="aboutSectionEditorTextsIntroTextDiv">
<TextField
fullWidth
required
id="outlined-multiline-static"
multiline
label="Introduce Yourself"
defaultValue={
aboutSocialMediaTitleRedux.text
}
variant="outlined"
className="disabledrag"
onChange={(event) => {
dispatch({
type:
"aboutSectionSocialMediaTitleTextChange",
payload: event.target.value,
});
}}
/>
</div>
<FontPicker
className="aboutSectionEditorIntroFontpicker disabledrag"
pickerId="aboutSectionEditorSociamMediaTitleFontpicker"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={
aboutSocialMediaTitleRedux.fontStyle
}
limit={100}
onChange={(nextFont) => {
/* setfontStyle(nextFont.family); */
dispatch({
type:
"aboutSectionSocialMediaTitleFontStyleChange",
payload: nextFont.family,
});
}}
/>
<Input
type="color"
className="aboutSectionEditorTextsColor"
value={aboutSocialMediaTitleRedux.color}
onChange={(event) => {
dispatch({
type:
"aboutSectionSocialMediaTitleColorChange",
payload: event.target.value,
});
}}
></Input>
</div>
<div className="aboutSectionEditorTextsAboutTitleTextDiv">
<TextField
required
fullWidth
id="outlined-required"
label="Instagram"
defaultValue={
aboutSectionSocialMediaLinksRedux.instagram
}
onChange={(event) => {
dispatch({
type:
"aboutSectionSocialMediaInstagramChange",
payload: event.target.value,
});
}}
variant="outlined"
className="disabledrag"
/>
</div>
<div className="aboutSectionEditorTextsAboutTitleTextDiv">
<TextField
required
fullWidth
id="outlined-required"
label="Gmail"
defaultValue={
aboutSectionSocialMediaLinksRedux.gmail
}
onChange={(event) => {
dispatch({
type:
"aboutSectionSocialMediaGmailChange",
payload: event.target.value,
});
}}
variant="outlined"
className="disabledrag"
/>
</div>
<div className="aboutSectionEditorTextsAboutTitleTextDiv">
<TextField
required
fullWidth
id="outlined-required"
label="LinkedIn"
defaultValue={
aboutSectionSocialMediaLinksRedux.linkedIn
}
onChange={(event) => {
dispatch({
type:
"aboutSectionSocialMediaLinkedInChange",
payload: event.target.value,
});
}}
variant="outlined"
className="disabledrag"
/>
</div>
<div className="aboutSectionEditorTextsAboutTitleTextDiv">
<TextField
required
fullWidth
id="outlined-required"
label="GitHub"
defaultValue={
aboutSectionSocialMediaLinksRedux.github
}
onChange={(event) => {
dispatch({
type:
"aboutSectionSocialMediaGitHubChange",
payload: event.target.value,
});
}}
variant="outlined"
className="disabledrag"
/>
</div>
</div>
</div>
</div>
) : null}
</div>
);
}
Example #13
| Source File: AboutSectorEditor.jsx From portfolyo-mern with MIT License | 4 votes |
|
AboutSectorEditor = () => {
//redux
const dispatch = useDispatch();
//buttons
const [optionClicked, setoptionClicked] = useState(["", "", ""]);
const [optionSelected, setoptionSelected] = useState([
"btn-group__item--selected",
"",
"",
]);
const [displaySelected, setdisplaySelected] = useState(0);
const optionClickedHandlers = (index) => {
let tempOption = ["", "", ""];
tempOption[index] = "btn-group__item--active";
let tempSelected = ["", "", ""];
tempSelected[index] = "btn-group__item--selected";
setoptionClicked(tempOption);
setTimeout(() => {
setoptionClicked(["", "", ""]);
}, 600);
setoptionSelected(tempSelected);
setdisplaySelected(index);
};
//layout backgrounds
const aboutBackgroundLayoutRedux = useSelector(
(state) => state.aboutSectionBackground.backgroundType
);
const [layoutBackgroundSelected, setlayoutBackgroundSelected] = useState(["aboutSectionBackgroundSelected", "", ""]);
const aboutSectionBackgroundHandler = (index) => {
const temp = ["", "", ""];
temp[index] = "aboutSectionBackgroundSelected";
setlayoutBackgroundSelected(temp);
dispatch({
type: "aboutSectionBackgroundChange",
payload: index,
});
}
//layout Background Colors
const aboutBackgroundColorRedux = useSelector(
(state) => state.aboutSectionBackground.backgroundColor
);
const [layoutBackgroundColor, setlayoutBackgroundColor] = useState(
aboutBackgroundColorRedux
);
const layoutBackgroundColorHandler = (color) => {
setlayoutBackgroundColor(color);
dispatch({
type: "aboutSectionBackgroundColorChange",
payload: color,
});
}
//layout Designs
const layoutDesignSelectedRedux = useSelector(
(state) => state.aboutSectionBackground.backgroundDesignType
);
const [layoutDesignSelected, setlayoutDesignSelected] = useState(["aboutSectionLayoutDesignSelected", "", "", ""]);
const layoutDesignHandler = (index) => {
const temp = ["", "", "", ""];
temp[index] = "aboutSectionLayoutDesignSelected";
setlayoutDesignSelected(temp);
dispatch({
type: "aboutSectionBackgroundDesignChange",
payload: index
});
}
const aboutImageBorderColorRedux = useSelector(
(state) => state.aboutSectionBackground.imageBorderColor
);
const [aboutImageBorderColor, setaboutImageBorderColor] = useState(
aboutImageBorderColorRedux
);
const aboutImageBorderColorHandler = (color) => {
setaboutImageBorderColor(color);
dispatch({
type: "aboutSectionImageBorderColor",
payload: color.hex
});
};
//transitions
const transitiontypeRedux = useSelector(
(state) => state.aboutSectionBackground.backgroundTransition
);
const classes = useStyles();
const [transitionStyle, settransitionStyle] = useState(transitiontypeRedux);
const transitionStyleHandler = (event) => {
settransitionStyle(event.target.value);
};
const [transitionSelected, settransitionSelected] = useState(["aboutSectionTrasitionSelected","", "", ""]);
const transitionSectionHandler = (index, event) => {
if(index === 0){
settransitionStyle("none");
dispatch({
type: "aboutSectionTransitionChanger",
payload: "none"
});
return;
}
const temp = ["", "", "", ""];
temp[index] = "aboutSectionTrasitionSelected";
settransitionSelected(temp);
settransitionStyle(event.target.value);
dispatch({
type: "aboutSectionTransitionChanger",
payload: event.target.value,
});
}
//text fonts and styles
const [fontStyle, setfontStyle] = useState("Open Sans");
const aboutTitleRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionTitle
);
const aboutIntroRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionIntro
);
const aboutPassageRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionPassage
);
const aboutImageTitleRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionImageTitle
);
const aboutSocialMediaTitleRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionSocialMediaTitle
);
const aboutSectionBasicInfoRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionBasicInfo
);
const aboutSectionSocialMediaLinksRedux = useSelector(
(state) => state.aboutSectionBackground.aboutSectionSocialMediaLinks
);
const aboutTitleTextReduxHandler = (event) => {
dispatch({
})
}
const aboutTitleAlignment = useSelector(
(state) => state.aboutSectionBackground.aboutSectionTitleAlignment
);
const aboutTitleAlignmentHandler = (event) => {
dispatch({
type: "aboutSectionTitleAlignmentChanger",
payload: event.target.value
});
}
useEffect(() => {
aboutSectionBackgroundHandler(aboutBackgroundLayoutRedux);
layoutDesignHandler(layoutDesignSelectedRedux);
}, [])
return (
<div className="aboutSectionEditorPage">
<div
className="btn-group "
style={{
display: "block",
// verticalAlign: "middle",
maxWidth: "max-content",
margin: "auto auto 1rem auto",
}}
>
<button
className={`btn-group__item btn-group__item ${optionClicked[0]} ${optionSelected[0]}`}
onClick={() => optionClickedHandlers(0)}
>
Layout
</button>
<button
className={`btn-group__item ${optionClicked[1]} ${optionSelected[1]}`}
onClick={() => optionClickedHandlers(1)}
>
Design's Effect's
</button>
<button
className={`btn-group__item ${optionClicked[2]} ${optionSelected[2]}`}
onClick={() => optionClickedHandlers(2)}
>
Text
</button>
</div>
{displaySelected === 0 ? (
<div className="aboutSectionEditorLayoutOptions">
<p className="aboutSectionEditorHeader">Backgrounds:</p>
<div className="aboutSectionEditorLayoutBackground">
<div
className={`aboutSectionEditorLayoutBackgrounds ${layoutBackgroundSelected[0]}`}
onClick={() => {
aboutSectionBackgroundHandler(0);
// dispatch({ type: "layoutp", payload: 1 });
}}
>
<img src={aboutBackground1} alt="background1"></img>
<p>Background-1</p>
</div>
<div
className={`aboutSectionEditorLayoutBackgrounds ${layoutBackgroundSelected[1]}`}
onClick={() => {
aboutSectionBackgroundHandler(1);
// dispatch({ type: "layoutp", payload: 2 });
}}
>
<img src={aboutBackground2} alt="background2"></img>
<p>Background-2</p>
</div>
<div
className={`aboutSectionEditorLayoutBackgrounds ${layoutBackgroundSelected[2]}`}
onClick={() => {
aboutSectionBackgroundHandler(2);
// dispatch({ type: "layoutp", payload: 2 });
}}
>
<div className="aboutSectionEditorLayoutBackground3">
<p
style={{
margin: "auto",
marginTop: "auto",
verticalAlign: "middle",
display: "block",
}}
>
None
</p>
</div>
<p>Background-3</p>
</div>
</div>
<p className="aboutSectionEditorHeader">
Background Color:
</p>
<div className="aboutSectionBackgrounColor">
<div className="aboutSectionBackgroundColorPicker disabledrag">
<ChromePicker
color={layoutBackgroundColor}
onChange={(newColor) => {
layoutBackgroundColorHandler(
"#" +
rgbHex(
newColor.rgb.r,
newColor.rgb.g,
newColor.rgb.b,
newColor.rgb.a
)
);
}}
></ChromePicker>
</div>
</div>
</div>
) : displaySelected === 1 ? (
<div className="aboutSectionDesignEditor">
<p className="aboutSectionEditorHeader">Design:</p>
<div className="aboutSectionEditorLayoutDesign">
<div
className={`aboutSectionEditorLayoutDesigns ${layoutDesignSelected[0]}`}
onClick={() => {
layoutDesignHandler(0);
// dispatch({ type: "layoutp", payload: 1 });
}}
>
<img
src={aboutLayoutDesign1}
alt="aboutLayoutDesign1"
></img>
<p>Design-1</p>
</div>
<div
className={`aboutSectionEditorLayoutDesigns ${layoutDesignSelected[1]}`}
onClick={() => {
layoutDesignHandler(1);
// dispatch({ type: "layoutp", payload: 2 });
}}
>
<img
src={aboutLayoutDesign2}
alt="aboutLayoutDesign2"
></img>
<p>Design-2</p>
</div>
<div
className={`aboutSectionEditorLayoutDesigns ${layoutDesignSelected[2]}`}
onClick={() => {
layoutDesignHandler(2);
// dispatch({ type: "layoutp", payload: 2 });
}}
>
<img
src={aboutLayoutDesign3}
alt="aboutLayoutDesign3"
></img>
<p>Design-3</p>
</div>
<div
className={`aboutSectionEditorLayoutDesigns ${layoutDesignSelected[3]}`}
onClick={() => {
layoutDesignHandler(3);
// dispatch({ type: "layoutp", payload: 2 });
}}
>
<img
src={aboutLayoutDesign4}
alt="aboutLayoutDesign4"
></img>
<p>Design-4</p>
</div>
</div>
{layoutDesignSelectedRedux === 0 ? (
<div>
<p className="aboutSectionEditorHeader">
Image Uploader:
</p>
<AvatarCrop height={450} width={250} />
</div>
) : layoutDesignSelectedRedux === 2 ? (
<div>
<p className="aboutSectionEditorHeader">
Image Uploader:
</p>
<AvatarCrop height={330} width={350} />
</div>
) : layoutDesignSelectedRedux === 3 ? (
<div>
<p className="aboutSectionEditorHeader">
Image Uploader:
</p>
<AvatarCrop height={280} width={300} />
</div>
) : null}
<p className="aboutSectionEditorHeader">
Image Border Color:
</p>
<div className="aboutSectionImageBorderColor">
<div className="aboutSectionImageBorderColorPicker disabledrag">
<ChromePicker
color={aboutImageBorderColor}
onChange={(newColor) => {
aboutImageBorderColorHandler(newColor);
}}
></ChromePicker>
</div>
</div>
<p className="aboutSectionEditorHeader">Transitions:</p>
<div className="aboutSectionTransitionEditor">
<div
className={`aboutSectionTransitionsNone ${transitionSelected[0]}`}
onClick={() => {
transitionSectionHandler(0, null);
}}
>
<p
style={{
display: "block",
margin: "auto",
}}
>
None
</p>
</div>
<div
className={`aboutSectionTransitions ${transitionSelected[1]}`}
onClick={(event) => {
transitionSectionHandler(1, event);
}}
>
<img
src={transitionFade}
alt="transitionFade"
></img>
<FormControl
variant="outlined"
className={`disabledrag ${classes.formControl}`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Fade
</InputLabel>
<Select
native
value={transitionStyle}
onChange={transitionStyleHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"fade-up"}>Fade Up</option>
<option value={"fade-down"}>
Fade down
</option>
<option value={"fade-right"}>
Fade right
</option>
<option value={"fade-left"}>
Fade left
</option>
<option value={"fade-up-right"}>
Fade Up Right
</option>
<option value={"fade-up-left"}>
Fade Up left
</option>
<option value={"fade-down-right"}>
Fade Down Right
</option>
<option value={"fade-down-left"}>
Fade Down Left
</option>
</Select>
</FormControl>
</div>
<div
className={`aboutSectionTransitions ${transitionSelected[2]}`}
onClick={(event) => {
transitionSectionHandler(2, event);
}}
>
<img
src={transitionFlip}
alt="transitionFlip"
></img>
<FormControl
variant="outlined"
className={`disabledrag ${classes.formControl}`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Flip
</InputLabel>
<Select
native
value={transitionStyle}
onChange={transitionStyleHandler}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"flip-left"}>
Flip Left
</option>
<option value={"flip-right"}>
Flip Right
</option>
<option value={"flip-up"}>Flip Up</option>
<option value={"flip-down"}>
Flip Down
</option>
</Select>
</FormControl>
</div>
<div
className={`aboutSectionTransitions ${transitionSelected[3]}`}
onClick={(event) => {
transitionSectionHandler(3, event);
}}
>
<img
src={transitionZoom}
alt="transitionZoom"
></img>
<FormControl
variant="outlined"
className={`disabledrag ${classes.formControl}`}
>
<InputLabel htmlFor="outlined-age-native-simple">
Zoom
</InputLabel>
<Select
native
value={transitionStyle}
onChange={(event) => {
transitionSectionHandler(3, event);
}}
label="Age"
inputProps={{
name: "age",
id: "outlined-age-native-simple",
}}
>
<option value={"zoom-in"}>Zoom In</option>
<option value={"zoom-in-up"}>
Zoom In Up
</option>
<option value={"zoom-in-down"}>
Zoom In Down
</option>
<option value={"zoom-in-left"}>
Zoom In Left
</option>
<option value={"zoom-in-right"}>
In Right
</option>
<option value={"zoom-out"}>Zoom Out</option>
<option value={"zoom-out-up"}>
Zoom Out Up
</option>
<option value={"zoom-out-down"}>
Zoom Out Down
</option>
<option value={"zoom-out-right"}>
Zoom Out Right
</option>
<option value={"zoom-out-left"}>
Zoom Out Left
</option>
</Select>
</FormControl>
</div>
</div>
</div>
) : displaySelected === 2 ? (
<div>
<p className="aboutSectionEditorHeader">
Text, Font and Color's
</p>
<hr />
<div className="aboutSectionEditorTexts">
<p>About title</p>
<div className="mt-3 mx-auto" style={{display:"block",width:"max-content",zIndex:"99999"}}>
<Button variant="outlined" color="primary"
onClick={()=>{
dispatch({type:"aboutSectionTitleTextChange",payload:document.querySelector("#aboutSectionTitleTextChange").value});
dispatch({type:"aboutSectionImageTitleTextChange",payload:document.querySelector("#aboutSectionImageTitleTextChange").value});
dispatch({type:"aboutSectionIntroTextChange",payload:document.querySelector("#aboutSectionIntroTextChange").value});
dispatch({type:"aboutSectionPassageTextChange",payload:document.querySelector("#aboutSectionPassageTextChange").value});
dispatch({type:"aboutSectionBasicInfoTitleTextChange",payload:document.querySelector("#aboutSectionBasicInfoTitleTextChange").value});
dispatch({type:"aboutSectionBasicInfoValuesTextAgeChange",payload:document.querySelector("#aboutSectionBasicInfoValuesTextAgeChange").value});
dispatch({type:"aboutSectionBasicInfoValuesTextEmailChange",payload:document.querySelector("#aboutSectionBasicInfoValuesTextEmailChange").value});
dispatch({type:"aboutSectionBasicInfoValuesTextPhoneChange",payload:document.querySelector("#aboutSectionBasicInfoValuesTextPhoneChange").value});
dispatch({type:"aboutSectionBasicInfoValuesTextAddressChange",payload:document.querySelector("#aboutSectionBasicInfoValuesTextAddressChange").value});
dispatch({type:"aboutSectionBasicInfoValuesTextLanguagesChange",payload:document.querySelector("#aboutSectionBasicInfoValuesTextLanguagesChange").value});
dispatch({type:"aboutSectionSocialMediaTitleTextChange",payload:document.querySelector("#aboutSectionSocialMediaTitleTextChange").value});
dispatch({type:"aboutSectionSocialMediaInstagramChange",payload:document.querySelector("#aboutSectionSocialMediaInstagramChange").value});
dispatch({type:"aboutSectionSocialMediaGmailChange",payload:document.querySelector("#aboutSectionSocialMediaGmailChange").value});
dispatch({type:"aboutSectionSocialMediaLinkedInChange",payload:document.querySelector("#aboutSectionSocialMediaLinkedInChange").value});
dispatch({type:"aboutSectionSocialMediaGitHubChange",payload:document.querySelector("#aboutSectionSocialMediaGitHubChange").value});
dispatch({type:"aboutSectionSocialMediaInstagramChange",payload:document.querySelector("#aboutSectionSocialMediaInstagramChange").value});
}}
>Apply text</Button>
</div>
<div className="aboutSectionEditorTextsAboutTitle">
<div className="aboutSectionEditorTextsAboutTitleTextDiv">
<TextField
required
fullWidth
id="aboutSectionTitleTextChange"
label="About Title"
defaultValue={aboutTitleRedux.text}
variant="outlined"
className="disabledrag"
// onChange={(event) => {
// dispatch({
// type: "aboutSectionTitleTextChange",
// payload: event.target.value,
// });
// }}
/>
</div>
<FontPicker
className="aboutSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={aboutTitleRedux.fontStyle}
limit={100}
onChange={(nextFont) => {
setfontStyle(nextFont.family);
dispatch({
type:
"aboutSectionTitleFontStyleChange",
payload: nextFont.family,
});
}}
/>
<ChromePicker
className="aboutSectionEditorTextsColor"
color={aboutTitleRedux.color}
onChange={(newColor) => {
dispatch({
type: "aboutSectionTitleColorChange",
payload: newColor.hex,
});
}}
></ChromePicker>
</div>
<FormControl component="fieldset">
<FormLabel component="legend">
About title Alignment:
</FormLabel>
<RadioGroup
defaultValue="left"
aria-label="gender"
name="aboutTitleAlignmentRadios"
value={aboutTitleAlignment}
onChange={aboutTitleAlignmentHandler}
>
<FormControlLabel
value="left"
control={<StyledRadio />}
label="Left"
/>
<FormControlLabel
value="center"
control={<StyledRadio />}
label="Center"
/>
</RadioGroup>
</FormControl>
<p>Image Title</p>
<div className="aboutSectionEditorTextsImageTitle">
<div className="aboutSectionEditorTextsImageTitleTextDiv">
<TextField
fullWidth
required
id="aboutSectionImageTitleTextChange"
label="Image Title"
defaultValue={aboutImageTitleRedux.text}
variant="outlined"
className="disabledrag"
/>
</div>
<FontPicker
className="aboutSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
pickerId="aboutSectionEditorImageTitleFontpicker"
activeFontFamily={
aboutImageTitleRedux.fontStyle
}
limit={100}
onChange={(nextFont) => {
dispatch({
type:
"aboutSectionImageTitleFontStyleChange",
payload: nextFont.family,
});
}}
/>
<ChromePicker
className="aboutSectionEditorTextsColor"
color={aboutTitleRedux.color}
onChange={(newColor) => {
dispatch({
type: "aboutSectionImageTitleColorChange",
payload: newColor.hex,
});
}}
></ChromePicker>
</div>
<p>Self Intro:</p>
<div className="aboutSectionEditorTextsIntro">
<div className="aboutSectionEditorTextsIntroTextDiv">
<TextField
fullWidth
required
id="aboutSectionIntroTextChange"
multiline
label="Introduce Yourself"
defaultValue={aboutIntroRedux.text}
variant="outlined"
className="disabledrag"
/>
</div>
<FontPicker
className="aboutSectionEditorIntroFontpicker disabledrag"
pickerId="aboutSectionEditorIntroFontpicker"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={aboutIntroRedux.fontStyle}
limit={100}
onChange={(nextFont) => {
/* setfontStyle(nextFont.family); */
dispatch({
type:
"aboutSectionIntroFontStyleChange",
payload: nextFont.family,
});
}}
/>
<ChromePicker
className="aboutSectionEditorTextsColor"
color={aboutIntroRedux.color}
onChange={(newColor) => {
dispatch({
type: "aboutSectionIntroColorChange",
payload: newColor.hex,
});
}}
></ChromePicker>
</div>
<p>About Yourself:</p>
<div className="aboutSectionEditorTextsIntro">
<div className="aboutSectionEditorTextsIntroTextDiv">
<TextField
fullWidth
required
id="aboutSectionPassageTextChange"
multiline
label="About Yourself"
defaultValue={aboutPassageRedux.text}
variant="outlined"
className="disabledrag"
/>
</div>
<FontPicker
className="aboutSectionEditorIntroFontpicker disabledrag"
pickerId="aboutSectionEditorPassageFontpicker"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={aboutIntroRedux.fontStyle}
limit={100}
onChange={(nextFont) => {
/* setfontStyle(nextFont.family); */
dispatch({
type:
"aboutSectionPassageFontStyleChange",
payload: nextFont.family,
});
}}
/>
<ChromePicker
className="aboutSectionEditorTextsColor"
color={aboutIntroRedux.color}
onChange={(newColor) => {
dispatch({
type: "aboutSectionPassageColorChange",
payload: newColor.hex,
});
}}
></ChromePicker>
</div>
<p>Basic Information Section:</p>
<div className="aboutSectionEditorBasicInfo">
<p>Basic Info Title:</p>
<div
className="aboutSectionEditorBasicInfoTitle"
style={{
borderLeft: "#3af25f 2px solid",
}}
>
<div className="aboutSectionEditorBasicInfoTitleTextDiv">
<TextField
fullWidth
required
id="aboutSectionBasicInfoTitleTextChange"
label="Basic-Info Title"
defaultValue={
aboutSectionBasicInfoRedux.title
.text
}
variant="outlined"
className="disabledrag"
/>
</div>
<FontPicker
className="aboutSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
limit={100}
pickerId="aboutSectionEditorBasicInfoTitleFontpicker"
activeFontFamily={
aboutSectionBasicInfoRedux.title
.fontStyle
}
onChange={(nextFont) => {
dispatch({
type:
"aboutSectionBasicInfoTitleFontStyleChange",
payload: nextFont.family,
});
}}
/>
<ChromePicker
className="aboutSectionEditorTextsColor"
color={aboutSectionBasicInfoRedux.title.color}
onChange={(newColor) => {
dispatch({
type: "aboutSectionBasicInfoTitleColorChange",
payload: newColor.hex,
});
}}
></ChromePicker>
</div>
<p>Key Font's and Color's:</p>
<div
className="aboutSectionEditorBasicInfoKeys"
style={{
borderLeft: "#3af25f 2px solid",
}}
>
<FontPicker
className="aboutSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
pickerId="aboutSectionBasicInfoKeysFontStyle"
activeFontFamily={
aboutSectionBasicInfoRedux.keys
.fontStyle
}
limit={100}
onChange={(nextFont) => {
dispatch({
type:
"aboutSectionBasicInfoKeysFontStylesChange",
payload: nextFont.family,
});
}}
/>
<ChromePicker
className="aboutSectionEditorTextsColor"
color={aboutSectionBasicInfoRedux.keys.color}
onChange={(newColor) => {
dispatch({
type: "aboutSectionBasicInfoKeysColorChange",
payload: newColor.hex,
});
}}
></ChromePicker>
</div>
<p>Values:</p>
<div
className="aboutSectionEditorBasicInfoValues"
style={{
borderLeft: "#3af25f 2px solid",
padding: "1rem",
}}
>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<div className="aboutSectionEditorBasicInfoValuesdivText">
<TextField
required
fullWidth
id="aboutSectionBasicInfoValuesTextAgeChange"
label="Age"
variant="outlined"
className="disabledrag"
defaultValue={
aboutSectionBasicInfoRedux
.values.text.age
}
/>
</div>
</div>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<div className="aboutSectionEditorBasicInfoValuesdivText">
<TextField
required
fullWidth
id="aboutSectionBasicInfoValuesTextEmailChange"
label="Email"
defaultValue={
aboutSectionBasicInfoRedux
.values.text.email
}
// onChange={(event) => {
// dispatch({
// type:
// "aboutSectionBasicInfoValuesTextEmailChange",
// payload: event.target.value,
// });
// }}
variant="outlined"
className="disabledrag"
/>
</div>
</div>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<div className="aboutSectionEditorBasicInfoValuesdivText">
<TextField
required
fullWidth
id="aboutSectionBasicInfoValuesTextPhoneChange"
label="Phone"
defaultValue={
aboutSectionBasicInfoRedux
.values.text.phone
}
// onChange={(event) => {
// dispatch({
// type:
// "aboutSectionBasicInfoValuesTextPhoneChange",
// payload: event.target.value,
// });
// }}
variant="outlined"
className="disabledrag"
/>
</div>
</div>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<div
className="aboutSectionEditorBasicInfoValuesdivText"
style={{
width: "70%",
}}
>
<TextField
fullWidth
required
id="aboutSectionBasicInfoValuesTextAddressChange"
label="Address"
multiline
defaultValue={
aboutSectionBasicInfoRedux
.values.text.address
}
// onChange={(event) => {
// dispatch({
// type:
// "aboutSectionBasicInfoValuesTextAddressChange",
// payload: event.target.value,
// });
// }}
variant="outlined"
className="disabledrag"
/>
</div>
</div>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<div className="aboutSectionEditorBasicInfoValuesdivText">
<TextField
fullWidth
required
id="aboutSectionBasicInfoValuesTextLanguagesChange"
label="Language"
defaultValue={
aboutSectionBasicInfoRedux
.values.text.languages
}
// onChange={(event) => {
// dispatch({
// type:
// "aboutSectionBasicInfoValuesTextLanguagesChange",
// payload: event.target.value,
// });
// }}
variant="outlined"
className="disabledrag"
/>
</div>
</div>
<p>Values Font's and Color's:</p>
<div
className="aboutSectionEditorBasicInfoValuesdiv"
style={{
borderLeft: "#f55142 2px solid",
}}
>
<FontPicker
className="aboutSectionEditorFontpicker disabledrag"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
limit={100}
pickerId="aboutSectionEditorBasicInfoValuesFontpicker"
activeFontFamily={
aboutSectionBasicInfoRedux.values
.fontStyle
}
onChange={(nextFont) => {
dispatch({
type:
"aboutSectionBasicInfoValuesFontStyleChange",
payload: nextFont.family,
});
}}
/>
<ChromePicker
className="aboutSectionEditorTextsColor"
color={aboutSectionBasicInfoRedux.values.color}
onChange={(newColor) => {
dispatch({
type: "aboutSectionBasicInfoValuesColorChange",
payload: newColor.hex,
});
}}
></ChromePicker>
</div>
</div>
</div>
<p
style={{
marginTop: "2rem",
}}
>
Social Media Links:
</p>
<div className="aboutSectionEditorSocialMediaLinks">
<div className="aboutSectionEditorSocialMediaTitledivText">
<div className="aboutSectionEditorTextsIntroTextDiv">
<TextField
fullWidth
required
id="aboutSectionSocialMediaTitleTextChange"
multiline
label="Introduce Yourself"
defaultValue={
aboutSocialMediaTitleRedux.text
}
variant="outlined"
className="disabledrag"
// onChange={(event) => {
// dispatch({
// type:
// "aboutSectionSocialMediaTitleTextChange",
// payload: event.target.value,
// });
// }}
/>
</div>
<FontPicker
className="aboutSectionEditorIntroFontpicker disabledrag"
pickerId="aboutSectionEditorSociamMediaTitleFontpicker"
apiKey="AIzaSyA4zVMDlSV-eRzbGR5BFqvbHqz3zV-OLd0"
activeFontFamily={
aboutSocialMediaTitleRedux.fontStyle
}
limit={100}
onChange={(nextFont) => {
/* setfontStyle(nextFont.family); */
dispatch({
type:
"aboutSectionSocialMediaTitleFontStyleChange",
payload: nextFont.family,
});
}}
/>
<ChromePicker
className="aboutSectionEditorTextsColor"
color={aboutSocialMediaTitleRedux.color}
onChange={(newColor) => {
dispatch({
type: "aboutSectionSocialMediaTitleColorChange",
payload: newColor.hex,
});
}}
></ChromePicker>
</div>
<div className="aboutSectionEditorTextsAboutTitleTextDiv">
<TextField
required
fullWidth
id="aboutSectionSocialMediaInstagramChange"
label="Instagram"
defaultValue={
aboutSectionSocialMediaLinksRedux.instagram
}
// onChange={(event) => {
// dispatch({
// type:
// "aboutSectionSocialMediaInstagramChange",
// payload: event.target.value,
// });
// }}
variant="outlined"
className="disabledrag"
/>
</div>
<div className="aboutSectionEditorTextsAboutTitleTextDiv">
<TextField
required
fullWidth
id="aboutSectionSocialMediaGmailChange"
label="Gmail"
defaultValue={
aboutSectionSocialMediaLinksRedux.gmail
}
// onChange={(event) => {
// dispatch({
// type:
// "aboutSectionSocialMediaGmailChange",
// payload: event.target.value,
// });
// }}
variant="outlined"
className="disabledrag"
/>
</div>
<div className="aboutSectionEditorTextsAboutTitleTextDiv">
<TextField
required
fullWidth
id="aboutSectionSocialMediaLinkedInChange"
label="LinkedIn"
defaultValue={
aboutSectionSocialMediaLinksRedux.linkedIn
}
// onChange={(event) => {
// dispatch({
// type:
// "aboutSectionSocialMediaLinkedInChange",
// payload: event.target.value,
// });
// }}
variant="outlined"
className="disabledrag"
/>
</div>
<div className="aboutSectionEditorTextsAboutTitleTextDiv">
<TextField
required
fullWidth
id="aboutSectionSocialMediaGitHubChange"
label="GitHub"
defaultValue={
aboutSectionSocialMediaLinksRedux.github
}
// onChange={(event) => {
// dispatch({
// type:
// "aboutSectionSocialMediaGitHubChange",
// payload: event.target.value,
// });
// }}
variant="outlined"
className="disabledrag"
/>
</div>
</div>
</div>
</div>
) : null}
</div>
);
}
Example #14
| Source File: Parameters.js From react-progress-bar with MIT License | 4 votes |
|
Parameters = ({
handleChange,
handleBgChange,
handleBaseBgChange,
handleLabelColorChange,
handleBooleanPropChange,
}) => {
const [barColor, setBarColor] = useState("#6a1b9a");
const [baseBgColor, setBaseBgColor] = useState("#e0e0de");
const [labelColor, setLabelColor] = useState("#e80909");
const cpOne = useClickOutside(false);
const cpTwo = useClickOutside(false);
const cpThree = useClickOutside(false);
const handleColorChangeCpOne = (color) => {
setBarColor(color.hex);
handleBgChange(color.hex);
};
const handleColorChangeCpTwo = (color) => {
setBaseBgColor(color.hex);
handleBaseBgChange(color.hex);
};
const handleColorChangeCpThree = (color) => {
setLabelColor(color.hex);
handleLabelColorChange(color.hex);
};
return (
<>
<div className="param">
<label htmlFor="completed">completed</label>
<input
name="completed"
id="completed"
type="text"
placeholder="1-100"
onChange={handleChange}
/>
</div>
<div className="param">
<label htmlFor="maxCompleted">max completed</label>
<input
name="maxCompleted"
id="maxCompleted"
type="text"
placeholder="number"
onChange={handleChange}
/>
</div>
<div className="param">
<label htmlFor="customLabel">custom label</label>
<input
name="customLabel"
id="customLabel"
type="text"
placeholder="any text"
onChange={handleChange}
/>
</div>
<div className="param">
<button onClick={() => cpOne.setIsVisible(true)}>
Choose Bar Color
</button>
{cpOne.isVisible && (
<div
ref={cpOne.ref}
style={{ position: "absolute", marginTop: "30px" }}
>
<ChromePicker
name="barColor"
color={barColor}
onChangeComplete={handleColorChangeCpOne}
/>
</div>
)}
<input
value={barColor}
name="bgColor"
type="text"
onChange={(event) => {
handleChange(event);
setBarColor(event.target.value);
}}
/>
</div>
<div className="param">
<label htmlFor="height">height</label>
<input
name="height"
id="height"
type="text"
placeholder="20px"
onChange={handleChange}
/>
</div>
<div className="param">
<label htmlFor="width">width</label>
<input
name="width"
id="width"
type="text"
placeholder="100%"
onChange={handleChange}
/>
</div>
<div className="param">
<label htmlFor="borderRadius">border radius</label>
<input
name="borderRadius"
id="borderRadius"
type="text"
placeholder="50px"
onChange={handleChange}
/>
</div>
<div className="param">
<label htmlFor="labelAlignment">label alignment</label>
<select
name="labelAlignment"
defaultValue="right"
id="labelAlignment"
onChange={handleChange}
>
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
<option value="outside">outside</option>
</select>
</div>
<div className="param">
<button onClick={() => cpThree.setIsVisible(true)}>
Choose Label Color
</button>
{cpThree.isVisible && (
<div
ref={cpThree.ref}
style={{ position: "absolute", marginTop: "30px" }}
>
<ChromePicker
name="labelColor"
color={labelColor}
onChangeComplete={handleColorChangeCpThree}
/>
</div>
)}
<input
value={labelColor}
name="labelColor"
type="text"
onChange={(event) => {
handleChange(event);
setBaseBgColor(event.target.value);
}}
/>
</div>
<div className="param">
<label htmlFor="labelSize">label size</label>
<input
name="labelSize"
id="labelSize"
type="text"
placeholder="15px"
onChange={handleChange}
/>
</div>
<div className="param">
<label htmlFor="isLabelVisible">is label visible</label>
<select
name="isLabelVisible"
defaultValue="true"
id="isLabelVisible"
onChange={(e) =>
handleBooleanPropChange(e.target.value, "isLabelVisible")
}
>
<option value={"true"}>true</option>
<option value={"false"}>false</option>
</select>
</div>
<div className="param">
<button onClick={() => cpTwo.setIsVisible(true)}>
Choose "non-completed" Bar Color
</button>
{cpTwo.isVisible && (
<div
ref={cpTwo.ref}
style={{ position: "absolute", marginTop: "30px" }}
>
<ChromePicker
name="baseBgColor"
color={baseBgColor}
onChangeComplete={handleColorChangeCpTwo}
/>
</div>
)}
<input
value={baseBgColor}
name="baseBgColor"
type="text"
onChange={(event) => {
handleChange(event);
setBaseBgColor(event.target.value);
}}
/>
</div>
<div className="param">
<label htmlFor="margin">margin</label>
<input name="margin" id="margin" type="text" onChange={handleChange} />
</div>
<div className="param">
<label htmlFor="padding">padding</label>
<input
name="padding"
id="padding"
type="text"
onChange={handleChange}
/>
</div>
<div className="param">
<label htmlFor="transitionDuration">transition duration</label>
<input
name="transitionDuration"
id="transitionDuration"
type="text"
onChange={handleChange}
/>
</div>
<div className="param">
<label htmlFor="transitionTimingFunction">
transition timing function
</label>
<select
name="transitionTimingFunction"
defaultValue="right"
id="transitionTimingFunction"
onChange={handleChange}
>
<option value="ease-in-out">ease-in-out</option>
<option value="ease">ease</option>
<option value="linear">linear</option>
<option value="ease-in">ease-in</option>
<option value="ease-out">ease-out</option>
</select>
</div>
<div className="param">
<label htmlFor="animateOnRender">animate on render</label>
<select
name="animateOnRender"
defaultValue="false"
id="animateOnRender"
onChange={(e) =>
handleBooleanPropChange(e.target.value, "animateOnRender")
}
>
<option value={"true"}>true</option>
<option value={"false"}>false</option>
</select>
</div>
<div className="param">
<label htmlFor="dir">direction</label>
<select name="dir" defaultValue="ltr" id="dir" onChange={handleChange}>
<option value="ltr">ltr</option>
<option value="rtl">rtl</option>
<option value="auto">auto</option>
</select>
</div>
</>
);
}
Example #15
| Source File: create-color.js From horondi_admin with MIT License | 4 votes |
|
CreateColor = () => {
const [colorPicker, setColorPicker] = useState(false);
const { createColor, tabsValue, handleTabsChange } = useColorHandlers();
const { loading } = useSelector(selectColorLoading);
const dispatch = useDispatch();
const styles = useStyles();
const formSchema = Yup.object().shape({
uaName: Yup.string()
.min(2, MIN_LENGTH_MESSAGE)
.max(100, MAX_LENGTH_MESSAGE)
.matches(config.formRegExp.uaNameCreation, UA_NAME_MESSAGE)
.required(ERROR_MESSAGE),
enName: Yup.string()
.min(2, MIN_LENGTH_MESSAGE)
.max(100, MAX_LENGTH_MESSAGE)
.matches(config.formRegExp.enNameCreation, EN_NAME_MESSAGE)
.required(ERROR_MESSAGE),
uaSimpleName: Yup.string()
.min(2, MIN_LENGTH_MESSAGE)
.max(100, MAX_LENGTH_MESSAGE)
.matches(config.formRegExp.uaNameCreation, NOT_UA_SIMPLE_NAME_MESSAGE)
.required(ERROR_MESSAGE),
enSimpleName: Yup.string()
.min(2, MIN_LENGTH_MESSAGE)
.max(100, MAX_LENGTH_MESSAGE)
.matches(config.formRegExp.enNameCreation, NOT_EN_SIMPLE_NAME_MESSAGE)
.required(ERROR_MESSAGE),
colorHex: Yup.string()
.matches(config.formRegExp.hexString, COLOR_VALIDATION_ERROR)
.required(ERROR_MESSAGE)
});
const langValues = languages.map((lang) => ({
[`${lang}Name`]: '',
[`${lang}SimpleName`]: ''
}));
const formikValues = langValues !== null ? Object.assign(...langValues) : {};
const {
values,
handleChange,
handleSubmit,
errors,
touched,
setFieldValue,
resetForm,
handleBlur
} = useFormik({
validationSchema: formSchema,
validateOnBlur: true,
initialValues: {
...formikValues,
colorHex: ''
},
onSubmit: (data) => {
const newColor = createColor(data);
dispatch(addColor(newColor));
}
});
useEffect(
() => () => {
resetForm();
handleTabsChange(null, 0);
},
[]
);
const tabPanels = languages.map((lang, index) => (
<TabPanel key={lang} value={tabsValue} index={index}>
<div className={styles.materialItemAdd}>
<TextField
data-cy={`${lang}-Name`}
id={`${lang}Name`}
className={styles.textField}
variant='outlined'
label={config.labels.color.name}
error={touched[`${lang}Name`] && !!errors[`${lang}Name`]}
multiline
value={values[`${lang}Name`]}
onChange={handleChange}
onBlur={handleBlur}
/>
{touched[`${lang}Name`] && errors[`${lang}Name`] && (
<div className={styles.inputError}>{errors[`${lang}Name`]}</div>
)}
<TextField
data-cy={`${lang}-SimpleName`}
id={`${lang}SimpleName`}
className={styles.textField}
variant='outlined'
label={config.labels.color.simpleName}
multiline
error={touched[`${lang}SimpleName`] && !!errors[`${lang}SimpleName`]}
value={values[`${lang}SimpleName`]}
onChange={handleChange}
onBlur={handleBlur}
/>
{touched[`${lang}SimpleName`] && errors[`${lang}SimpleName`] && (
<div className={styles.inputError}>{errors[`${lang}SimpleName`]}</div>
)}
</div>
</TabPanel>
));
const languageTabs =
languages.length > 0
? languages.map((lang) => {
const tabConditionForStyles =
(touched[`${lang}SimpleName`] && errors[`${lang}SimpleName`]) ||
(touched[`${lang}Name`] && errors[`${lang}Name`]);
return (
<Tab
className={handleNameInLanguageTabs(
tabConditionForStyles,
styles
)}
label={lang}
key={lang}
/>
);
})
: null;
return (
<div className={styles.container}>
{!loading ? (
<form onSubmit={handleSubmit}>
<div className={styles.colorPickerBlock}>
<TextField
autoComplete='off'
variant='outlined'
label={config.labels.color.colorHex}
id='colorHex'
value={values.colorHex}
className={styles.textField}
error={touched.colorHex && !!errors.colorHex}
onFocus={() => {
setColorPicker(true);
}}
onChange={handleChange}
onBlur={handleBlur}
/>
<ColorCircle color={values.colorHex} size={DEFAULT_CIRCLE} />
</div>
{touched.colorHex && errors.colorHex && (
<div className={styles.inputError}>{errors.colorHex}</div>
)}
{colorPicker && (
<div className={styles.popover}>
<div
className={styles.cover}
onClick={() => {
setColorPicker(false);
}}
/>
<ChromePicker
color={values.colorHex}
disableAlpha
onChange={(colorObj) => {
setFieldValue('colorHex', colorObj.hex);
}}
/>
</div>
)}
<div>
<AppBar position='static'>
<Tabs
indicatorColor='primary'
textColor='primary'
className={styles.tabs}
value={tabsValue}
onChange={handleTabsChange}
aria-label='tabs'
>
{languageTabs}
</Tabs>
</AppBar>
{tabPanels}
</div>
<div>
<SaveButton
className={styles.saveButton}
data-cy='open-dialog'
type='submit'
title={CREATE_COLOR_TITLE}
values={values}
errors={errors}
/>
</div>
</form>
) : (
<LoadingBar />
)}
</div>
);
}
Example #16
| Source File: create-color.test.js From horondi_admin with MIT License | 4 votes |
|
describe('CreateColor test', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(<CreateColor />);
});
afterEach(() => {
wrapper.unmount();
});
it('Should render CreateColor component', () => {
expect(wrapper).toBeDefined();
expect(wrapper.find(TextField)).toHaveLength(3);
});
it('Should render Form component', () => {
expect(wrapper.find('form')).toHaveLength(1);
});
it(`Should render TextField with '${componentLabels.colorHex}' label`, () => {
expect(wrapper.exists(TextField)).toBe(true);
expect(wrapper.find(TextField).at(0).prop('label')).toBe(
componentLabels.colorHex
);
});
it(`Should render TextField with '${componentLabels.name}' label`, () => {
expect(wrapper.exists(TextField)).toBe(true);
expect(wrapper.find(TextField).at(1).prop('label')).toBe(
componentLabels.name
);
});
it(`Should render TextField with '${config.labels.color.simpleName}' label`, () => {
expect(wrapper.exists(TextField)).toBe(true);
expect(wrapper.find(TextField).at(2).prop('label')).toBe(
componentLabels.simpleName
);
});
it('Should render ColorCircle component', () => {
expect(wrapper.exists(ColorCircle)).toBe(true);
});
it('Should render AppBar component', () => {
expect(wrapper.exists(AppBar)).toBe(true);
});
it('Should render SaveButton component', () => {
expect(wrapper.exists(SaveButton)).toBe(true);
});
it('Should handle onFocus and render ChromePicker', () => {
wrapper.find(TextField).at(0).invoke('onFocus')();
expect(wrapper.exists(ChromePicker)).toBe(true);
});
it('Should handle onClick and set ColorPicker', () => {
wrapper.find(TextField).at(0).invoke('onFocus')();
expect(wrapper.exists(ChromePicker)).toBe(true);
wrapper.find('div').at(6).simulate('click');
expect(wrapper.exists(ChromePicker)).toBe(false);
});
it('Should handle ChromePicker onChange', () => {
wrapper.find(TextField).at(0).invoke('onFocus')();
wrapper.find(ChromePicker).invoke('onChange')(mockColorHex);
expect(mockSetFieldValue).toHaveBeenCalledTimes(1);
});
it('Should handle Submit form', () => {
wrapper.find('form').simulate('submit');
expect(mockSubmit).toHaveBeenCalledTimes(1);
});
it('Should render LoadingBar', () => {
jest.spyOn(reactRedux, 'useSelector').mockReturnValue({ loading: true });
wrapper = mount(<CreateColor />);
expect(wrapper.exists(LoadingBar)).toBe(true);
});
});
Example #17
| Source File: SyntaxPad.js From SyntaxMeets with MIT License | 4 votes |
|
SyntaxPad = (props) => {
const saveableCanvas = useRef(CanvasDraw);
const [displayColorPicker, setdisplayColorPicker] = useState(false)
const [brushColor, setBrushColor] = useState("#000A29")
const popover = {
position: 'absolute',
zIndex: '100',
left: '-50px'
}
const cover = {
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
}
const handleColorOpen = () =>{
setdisplayColorPicker(true);
}
const handleColorClose = () =>{
setdisplayColorPicker(false);
}
const handleColorChange = (color) => {
setBrushColor(color.hex);
}
return (
<Fragment>
<AppBar position="static" style={{ backgroundColor: "#000A29" }}>
<div className={localClasses.Editor__navbar}>
<Typography
variant="h5"
style={{ fontFamily: "poppins", color: "white", marginRight: "auto", marginTop: "auto", marginBottom: "auto", marginLeft: "30px", fontWeight: "800" }}
>
Syntax<span style={{ "color": "#FFD500"}}>Pad</span>
</Typography>
<Toolbar >
<div>
<Button
variant="contained"
color = 'primary'
onClick={ handleColorOpen }
startIcon={<ColorLensIcon />}
style={{
fontFamily: "poppins",
marginLeft: "auto",
fontWeight: "600",
color: "white",
}}
>
Pick Color
</Button>
{ displayColorPicker ? <div style={ popover }>
<div style={ cover } onClick={ handleColorClose }/>
<ChromePicker color={ brushColor } onChange={handleColorChange} />
</div> : null }
</div>
</Toolbar>
</div>
</AppBar>
<CanvasDraw
ref={saveableCanvas}
canvasWidth={"auto"}
canvasHeight={"548px"}
brushRadius={3}
brushColor={brushColor}
catenaryColor={"#FFD500"}
gridColor={"rgba(0, 180, 216, 0.1)"}
/>
<AppBar position="static" style={{ backgroundColor: "#000A29" }}>
<Toolbar>
<Button
variant="contained"
color = 'primary'
onClick={() => {
saveableCanvas.current.clear();
}}
startIcon={<DeleteIcon />}
style={{
fontFamily: "poppins",
marginLeft: "auto",
fontWeight: "600",
color: "white",
}}
>
Clear
</Button>
<Button
variant="contained"
startIcon={<UndoIcon />}
style={{
fontFamily: "poppins",
marginLeft: "15px",
fontWeight: "600",
color: "white",
backgroundColor: "#FFD500",
}}
onClick={() => {
saveableCanvas.current.undo();
}}
>
UNDO
</Button>
</Toolbar>
</AppBar>
</Fragment>
);
}
Example #18
| Source File: Setting.js From Website with MIT License | 4 votes |
|
Setting = props => {
const [value, setValue] = useState(props.value);
const [displayName, setDisplayName] = useState();
const [addingItem, setAddingItem] = useState(false);
const [valueToBeAdded, setValueToBeAdded] = useState();
// eslint-disable-next-line react-hooks/exhaustive-deps
const changeHandler = useCallback(
lodash.debounce(v => {
props.onChange(props.name, v);
}, 1000),
[props.onChange, props.name]
);
useEffect(() => {
setDisplayName(props.name.match(/[A-Z][a-z]+|[0-9]+/g).join(" "));
}, [props.name]);
useEffect(() => {
if (props.type === "color") {
setValue(props.value || props.default);
} else {
setValue(!defined(props.value) ? props.default : props.value);
}
}, [props]);
return (
<div className={`setting ${props.type === "color" ? "color-setting" : "list-setting"} ${props.open && "open"}`}>
{props.type === "color" ? (
<>
<div className="color-header" onClick={() => props.onClick(props.name)}>
<span>
<KeyboardArrowDownIcon className={`${props.open ? "open" : "closed"} mr-quarter`} />
<h3>{displayName}</h3>
</span>
<span>
<div
className="color-preview"
style={{
background: value || "#000",
}}
></div>
</span>
</div>
<ChromePicker
color={value}
onChange={color => {
setValue(color.hex);
changeHandler(color.hex);
}}
disableAlpha
className="ml-1"
/>
<Button
variant="contained"
className="reset-button"
style={{
backgroundColor: props.default,
color:
chroma.contrast(chroma(typeof props.default === "string" ? props.default : "#000"), "white") > 2 ? "white" : "black",
}}
onClick={() => {
setValue(props.default);
changeHandler(props.default);
}}
color="primary"
>
Reset
</Button>
</>
) : props.type === "boolean" ? (
<span className="checkbox-setting">
<FormControlLabel
control={
<FancySwitch
color="primary"
checked={!!value}
onChange={e => {
setValue(e.target.checked);
changeHandler(e.target.checked);
}}
name={props.name}
/>
}
label={displayName}
/>
</span>
) : props.type === "number" ? (
<span className="number-setting">
<FormControlLabel
control={
<InputSlider
color="primary"
value={value}
min={props.min}
max={props.max}
step={props.step}
onSliderChange={(e, value) => {
setValue(value);
changeHandler(value);
}}
onInputChange={event => {
setValue(event.target.value === "" ? "" : Number(event.target.value));
changeHandler(event.target.value === "" ? "" : Number(event.target.value));
}}
name={displayName}
/>
}
/>
</span>
) : props.type === "list" ? (
<>
<span className="list-header" onClick={() => props.onClick(props.name)}>
<KeyboardArrowDownIcon className={`${props.open ? "open" : "closed"} mr-quarter`} />
<h3>{displayName}</h3>
</span>
<AnimateHeight duration={250} height={!props.open ? 0 : "auto"}>
<div className="list-body">
<div className="item add-item" onClick={() => setAddingItem(prev => !prev)}>
<h3>Add Item</h3>
<button>
<AddIcon />
</button>
</div>
{addingItem && (
<form
onSubmit={e => {
e.preventDefault();
if (!valueToBeAdded) return;
setValue(value => {
const newValue = [{ value: valueToBeAdded, id: uid() }, ...value];
changeHandler(newValue);
return newValue;
});
setValueToBeAdded("");
}}
className="item adding-item"
>
<input value={valueToBeAdded} onChange={e => setValueToBeAdded(e.target.value)} placeholder={props.placeholder} />
<span className="buttons">
<button type="subit">
<CheckIcon />
</button>
<button
onClick={() => {
setValueToBeAdded("");
setAddingItem(false);
}}
>
<ClearIcon />
</button>
</span>
</form>
)}
{value?.map?.(item => (
<div className="item">
{item.value}
<button
onClick={() => {
setValue(prev => {
const newValue = prev.filter(prevItem => prevItem.id !== item.id);
changeHandler(newValue);
return newValue;
});
}}
>
<ClearIcon />
</button>
</div>
))}
</div>
</AnimateHeight>
</>
) : props.type === "selector" ? (
<>
<span className="color-header flex" onClick={() => props.onClick(props.name)}>
<span>
<KeyboardArrowDownIcon className={`${props.open ? "open" : "closed"} mr-quarter`} />
<h3>{displayName}</h3>
</span>
<span>
<h3>{value}</h3>
</span>
</span>
<AnimateHeight duration={250} height={!props.open ? 0 : "auto"}>
<div className="list-body selector">
{props.options
?.sort()
?.filter(item => item !== value)
?.map?.(item => (
<div style={{ fontFamily: item }} className="item">
{item}
<button
onClick={() => {
setValue(prev => {
const newValue = item;
changeHandler(newValue);
return newValue;
});
}}
>
<CheckIcon />
</button>
</div>
))}
</div>
</AnimateHeight>
</>
) : (
<DiscordSetting {...props} />
)}
</div>
);
}
Example #19
| Source File: CustomColor.jsx From razer-macos with GNU General Public License v2.0 | 4 votes |
|
export default function CustomColor({ deviceSelected }) {
const componentToHex = (c) => {
if (typeof c === 'undefined') {
return '00';
}
var hex = c.toString(16);
return hex.length == 1 ? '0' + hex : hex;
};
const rgbToHex = ({ r, g, b }) => {
return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
};
const [currentColor, setCurrentColor] = useState({
hex: rgbToHex(deviceSelected.settings.customColor1.rgb),
rgb: deviceSelected.settings.customColor1.rgb,
});
const handleChange = (newColor) => {
setCurrentColor(newColor);
};
const handleClick = () => {
deviceSelected.settings.customColor1 = currentColor;
let payload = {
device: deviceSelected,
};
ipcRenderer.send('request-set-custom-color', payload);
};
const styles = { 'default': { picker: { background: '#202124', boxShadow: 'none'}, body: {
padding: '12px 0 0'
} }};
const stylesGithub = { 'default': { card: { background: '#000'}, triangle: {borderBottomColor: '#000'}}};
const hasAllColors = (staticFeature) => {
return staticFeature.configuration.enabledRed
&& staticFeature.configuration.enabledGreen
&& staticFeature.configuration.enabledBlue;
}
const staticFeature = deviceSelected.features.find(feature => feature.featureIdentifier === FeatureIdentifier.STATIC);
const allColors = hasAllColors(staticFeature);
let colors = [];
if(!allColors) {
const allNoneValues = [0];
const allColorValues = [0,25,50,75,100,125,150,175,200,225,255];
const allReds = staticFeature.configuration.enabledRed ? allColorValues : allNoneValues;
const allGreens = staticFeature.configuration.enabledGreen ? allColorValues : allNoneValues;
const allBlues = staticFeature.configuration.enabledBlue ? allColorValues : allNoneValues;
allReds.forEach(r => {
allGreens.forEach(g => {
allBlues.forEach(b => {
const hex = rgbToHex({r, g, b});
const value = parseInt(hex.replace('#', '0x'));
colors.push({ value, hex })
})
})
});
colors.sort((a,b) => {
return a.value - b.value;
});
colors = colors.map(color => color.hex);
}
return (
<div>
<div className='control'>
{allColors && (
<ChromePicker color={currentColor} onChange={handleChange} width='100%' disableAlpha={true} styles={styles} defaultView={'rgb'}/>
)}
{!allColors && (
<GithubPicker color={currentColor} onChange={handleChange} width='auto' colors={colors} styles={stylesGithub}/>
)}
</div>
<div className='control'>
<button onClick={handleClick}>Save custom color</button>
</div>
</div>
);
}
Example #20
| Source File: playground.js From r3f-website with MIT License | 4 votes |
|
Playground = () => {
const [activeGeometry, setActiveGeometry] = useState(box);
const [color, setColor] = useState("#ccc");
const [numberOfGeometry, setNumberOfGeometry] = useState(1);
const [picker, showPicker] = useState(false);
const pickerButton = useRef();
useClickOutside(pickerButton, () => showPicker(false));
return (
<section
css={`
padding: 60px 0;
`}
>
<h2>Try it yourself</h2>
<p
css={`
position: relative;
display: flex;
align-items: center;
`}
>
I want to render a{" "}
<select
css={`
margin: 0 5px;
`}
onChange={(e) => setActiveGeometry(e.target.value)}
onBlur={(e) => setActiveGeometry(e.target.value)}
>
<option value={box}>Box</option>
<option value={sphere}>Sphere</option>
<option value={cone}>Cone</option>
<option value={dodecahedron}>Dodecahedron</option>
</select>{" "}
in a{" "}
<span
ref={pickerButton}
css={`
display: inherit;
`}
>
<button
aria-label="Show color picker"
onClick={() => showPicker((s) => !s)}
css={`
width: 23px;
height: 23px;
margin: 0 5px;
background: ${color};
border: 1px solid #ffffff;
`}
/>
{picker && (
<ChromePicker
css={`
position: absolute;
top: 40px;
z-index: 99;
left: 180px;
`}
color={color}
onChange={(color) => setColor(color.hex)}
/>
)}{" "}
</span>
color
</p>
I want to show{" "}
<input
aria-label="How many geometry to show"
type="number"
max="6"
min="1"
value={numberOfGeometry}
onChange={(e) => setNumberOfGeometry(e.target.value)}
></input>{" "}
geometry
<LiveProvider
theme={nightOwl}
scope={scope}
noInline
code={code(activeGeometry, color, numberOfGeometry)}
>
<div
css={`
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 40px;
@media screen and (max-width: 900px) {
grid-template-columns: 1fr;
}
`}
>
<LiveEditor
css={`
margin-top: 40px;
`}
/>
<div
css={`
height: 100%;
> div {
height: 100%;
min-height: 400px;
}
`}
>
<LiveError />
<LivePreview />
</div>
</div>
</LiveProvider>
</section>
);
}
Example #21
| Source File: Toolbox.jsx From doc2pen with Creative Commons Zero v1.0 Universal | 4 votes |
|
function VerticalTabs(props) {
const {
color,
setColor,
fillColor,
setFillColor,
fillOpacity,
setFillOpacity,
setBowing,
setFillStyle,
setFillWeight,
setHachureAngle,
setHachureGap,
bowing,
fillStyle,
fillWeight,
hachureAngle,
hachureGap,
background,
setBackground,
width,
setWidth,
stroke,
setStroke,
roughness,
setRoughness,
type,
setType,
fontSize,
setFontSize,
fontStyle,
setFontStyle,
fontFamily,
setFontFamily,
edge,
setEdge,
clear,
download,
initiateLoadSaved,
loadLastState,
saveInstance,
} = props;
const [displayColorPicker, setDisplayColorPicker] = useState(false);
const ColorPicker = props => {
const { width, name, color, onColorChange } = props;
return (
<div className={styles.root}>
<div className={styles.swatch}>
<div
className={styles.colorIndicator}
style={{
backgroundColor: props.color || "#fff",
}}
onMouseDown={() => {
setDisplayColorPicker(true);
}}
/>
</div>
{displayColorPicker ? (
<ClickAwayListener
onClickAway={() => {
setDisplayColorPicker(false);
}}
>
<div className={styles.popover}>
<ChromePicker
width={width}
name={name}
color={color}
onChangeComplete={color => onColorChange(color.hex)}
/>
</div>
</ClickAwayListener>
) : null}
</div>
);
};
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
function Feature({ title, children, classname }) {
return (
<ListItem>
<div className={styles.feature + " " + classname}>
<ListItemText className={styles.title}>{title}</ListItemText>
<div className={styles.body}>{children}</div>
</div>
</ListItem>
);
}
function Shape({ type_, id, label, children }) {
return (
<label style={{ marginTop: "3px" }} htmlFor={id} title={label}>
<div
className={`${styles.feature} ${
type === type_ && styles.active_feature
}`}
onClick={() => setType(type_)}
id={id}
>
{children}
</div>
</label>
);
}
return (
<div className={styles.toolbox_root}>
<div className={styles.canvas_toolbox}>
<div className={classes.root}>
<Tabs
orientation="vertical"
variant="scrollable"
value={value}
onChange={handleChange}
className={classes.tabs}
>
<Tab
onClick={() => setType("pen")}
label={
<label title="Project">
<AccountTree />
</label>
}
{...a11yProps(0)}
/>
<Tab
onClick={() => setType("pen")}
label={
<label title="Canvas Setup">
<RiFileSettingsLine size={25} />
</label>
}
{...a11yProps(1)}
/>
<Tab
onClick={() => setType("pen")}
label={
<label title="Shapes & Tools">
<FaShapes size={25} />
</label>
}
{...a11yProps(2)}
/>
<Tab
onClick={() => setType("text")}
label={
<label title="Text">
<TextFields />
</label>
}
{...a11yProps(3)}
/>
<Tab
onClick={() => {
setType("pen");
}}
label={
<label title="Icon Library">
<Apps />
</label>
}
{...a11yProps(4)}
/>
<Tab
onClick={() => setType("pen")}
label={
<label title="Minimize Sidebar">
<Close />
</label>
}
{...a11yProps(5)}
/>
</Tabs>
<TabPanel value={value} index={0}>
<List component="div">
<ListItem button onClick={clear}>
<ListItemIcon>
<Delete />
</ListItemIcon>
<ListItemText primary="Clear Canvas" />
</ListItem>
<ListItem button onClick={download}>
<ListItemIcon>
<SaveAlt />
</ListItemIcon>
<ListItemText primary="Download PNG" />
</ListItem>
<ListItem
button
onClick={() => initiateLoadSaved("img-file-selector")}
>
<ListItemIcon>
<PhotoLibrary />
<input
type="file"
id="img-file-selector"
style={{ display: "none" }}
accept="image/*"
onChange={event => loadLastState(event)}
/>
</ListItemIcon>
<ListItemText primary="Place Image" />
</ListItem>
<ListItem
button
onClick={() => saveInstance("savedProgress.d2ps")}
>
<ListItemIcon>
<Save />
</ListItemIcon>
<ListItemText primary="Save & download Progress" />
</ListItem>
<ListItem
button
onClick={() => initiateLoadSaved("file-selector")}
>
<ListItemIcon style={{ width: 0 }}>
<D2psIcon
style={{
transform: "scale(0.6) translateX(-30px)",
}}
/>
<input
type="file"
id="file-selector"
style={{ display: "none" }}
accept=".d2ps"
onChange={event => loadLastState(event)}
/>
</ListItemIcon>
<ListItemText primary="Load Previous Progress" />
</ListItem>
</List>
</TabPanel>
<TabPanel value={value} index={1}>
<List component="div">
<Feature title="Canvas Setup">
<div className={styles.colorPicker}>
<ColorPicker
width={200}
name="canvas_bg_color"
color={background}
onColorChange={setBackground}
/>
<input
className={styles.hexInput}
placeholder="#"
type="text"
value={background}
onInput={e => setBackground(e.target.value)}
/>
</div>
</Feature>
</List>
</TabPanel>
<TabPanel value={value} index={2}>
<List component="div">
<Feature title="Shapes and Tools">
<Shape type_="pen" id="sketch-shapes-pen" label="Pen">
<FaPencilAlt size={12} />
</Shape>
<Shape type_="line" id="sketch-shapes-line" label="Line">
<FaSlash size={10} />
</Shape>
<Shape type_="square" id="sketch-shapes-square" label="Square">
<FaRegSquare size={10} />
</Shape>
<Shape type_="circle" id="sketch-shapes-circle" label="Circle">
<FaRegCircle size={10} />
</Shape>
<Shape
type_="triangle"
id="sketch-shapes-triangle"
label="Triangle"
>
<GiTriangleTarget size={12} />
</Shape>
<Shape type_="arrow" id="sketch-shapes-arrow" label="Arrow">
<BsArrowUpRight size={12} />
</Shape>
<Shape
type_="diamond"
id="sketch-shapes-diamond"
label="Diamond"
>
<BsDiamond size={10} />
</Shape>
<Shape
type_="biShapeTriangle"
id="sketch-shapes-biShapeTriangle"
label="Bi Shape Triangle"
>
<BiShapeTriangle size={12} />
</Shape>
</Feature>
<Divider />
{!["text", "pen", "line"].includes(type) && (
<>
<Feature title="Fill Style">
<select
name="shape_fill_style"
value={fillStyle}
onChange={e => setFillStyle(e.target.value)}
>
<option value="none">none</option>
<option value="solid">solid</option>
<option value="hachure">hachure</option>
<option value="zigzag">zigzag</option>
<option value="cross-hatch">cross-hatch</option>
<option value="dots">dots</option>
<option value="dashed">dashed</option>
<option value="zigzag-line">zigzag-line</option>
</select>
</Feature>
{fillStyle !== "none" && (
<>
<Feature title="Fill Color">
<div className={styles.colorPicker}>
<ColorPicker
width={200}
name="canvas_pen_color"
color={fillColor}
onColorChange={setFillColor}
/>
<input
className={styles.hexInput}
placeholder="#"
type="text"
value={fillColor}
onInput={e => setFillColor(e.target.value)}
/>
</div>
</Feature>
<Feature
classname={styles.sliderWrapper}
title={"Fill Opacity"}
>
<input
className={styles.slider}
type="range"
min={0}
max={1}
step={0.1}
value={fillOpacity}
onChange={e => setFillOpacity(e.target.value)}
/>
</Feature>
</>
)}
{!["none", "solid"].includes(fillStyle) && (
<>
<Feature
classname={styles.sliderWrapper}
title={"Fill Weight"}
>
<input
className={styles.slider}
type="range"
min={1}
max={10}
step={0.1}
value={fillWeight}
onChange={e => setFillWeight(e.target.value)}
/>
</Feature>
<Feature
classname={styles.sliderWrapper}
title={"Fill Hachure Angle"}
>
<input
className={styles.slider}
type="range"
min={0}
max={360}
step={1}
value={hachureAngle + 180}
onChange={e => setHachureAngle(e.target.value - 180)}
/>
</Feature>
<Feature
classname={styles.sliderWrapper}
title={"Fill Hachure Gap"}
>
<input
className={styles.slider}
type="range"
min={1}
max={10}
step={0.1}
value={hachureGap}
onChange={e => setHachureGap(e.target.value)}
/>
</Feature>
</>
)}
<Divider />
</>
)}
<Feature title="Stroke">
<div className={styles.colorPicker}>
<ColorPicker
width={200}
name="canvas_pen_color"
color={color}
onColorChange={setColor}
/>
<input
className={styles.hexInput}
placeholder="#"
type="text"
value={color}
onInput={e => setColor(e.target.value)}
/>
</div>
</Feature>
<Feature classname={styles.sliderWrapper} title={"Roughness"}>
<input
className={styles.slider}
type="range"
min={0}
max={5}
step={0.1}
value={roughness}
onChange={e => setRoughness(e.target.value)}
/>
</Feature>
<Feature classname={styles.sliderWrapper} title={"Stroke Bowing"}>
<input
className={styles.slider}
type="range"
min={0}
max={10}
step={0.1}
value={bowing}
onChange={e => setBowing(e.target.value)}
/>
</Feature>
<Feature title="Stroke Width">
<select
name="canvas_pen_width"
value={width}
onChange={e => setWidth(e.target.value)}
>
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
<option value="5">5px</option>
<option value="6">6px</option>
<option value="7">7px</option>
<option value="8">8px</option>
<option value="9">9px</option>
<option value="10">10px</option>
<option value="11">11px</option>
</select>
</Feature>
<Feature title="Stroke Style">
<div
className={`${styles.feature_box} ${
stroke === "none" && styles.active_feature_box
}`}
onClick={() => setStroke("none")}
>
<AiOutlineLine size={20} />
</div>
<div
className={`${styles.feature_box} ${
stroke === "small" && styles.active_feature_box
}`}
onClick={() => setStroke("small")}
>
<AiOutlineSmallDash size={20} />
</div>
<div
className={`${styles.feature_box} ${
stroke === "big" && styles.active_feature_box
}`}
onClick={() => setStroke("big")}
>
<AiOutlineDash size={20} />
</div>
</Feature>
<Feature title="Edge">
<select value={edge} onChange={e => setEdge(e.target.value)}>
<option value="round">Round</option>
<option value="bevel">Bevel</option>
<option value="miter">Miter</option>
</select>
</Feature>
</List>
</TabPanel>
<TabPanel value={value} index={3}>
<List component="div">
<Feature title="Stroke">
<div className={styles.colorPicker}>
<ColorPicker
width={200}
name="canvas_pen_color"
color={color}
onColorChange={setColor}
/>
<input
className={styles.hexInput}
placeholder="#"
type="text"
value={color}
onInput={e => setColor(e.target.value)}
/>
</div>
</Feature>
<Feature
classname={styles.sliderWrapper}
title={`Font [ ${fontSize} ]`}
>
<input
className={styles.slider}
type="range"
min="10"
max="20"
value={fontSize * 10}
onChange={e => setFontSize(e.target.value / 10)}
/>
</Feature>
<Feature title="Font Style">
<div
className={`${styles.feature_box} ${
fontStyle === "normal" && styles.active_feature_box
}`}
onClick={() => setFontStyle("normal")}
>
<BsFonts size={20} />
</div>
<div
className={`${styles.feature_box} ${
fontStyle === "italic" && styles.active_feature_box
}`}
onClick={() => setFontStyle("italic")}
>
<FaItalic size={15} />
</div>
<div
className={`${styles.feature_box} ${
fontStyle === "bold" && styles.active_feature_box
}`}
onClick={() => setFontStyle("bold")}
>
<FaBold size={15} />
</div>
</Feature>
<Feature title="Font Family">
<select
value={fontFamily}
onChange={e => setFontFamily(e.target.value)}
>
<option value="cursive">Cursive</option>
<option value="Courier New">Courier New</option>
<option value="serif">Serif</option>
</select>
</Feature>
</List>
</TabPanel>
<TabPanel value={value} index={4}>
<List component="div">
<IconsLibrary />
</List>
</TabPanel>
<TabPanel
className={classes.tabPanelClose}
value={value}
index={5}
></TabPanel>
</div>
</div>
</div>
);
}
