%PDF-
%PDF-
Mini Shell
Mini Shell
import { __ } from '@wordpress/i18n';
import { LabelControl } from './label';
import { useState, useRef, useEffect } from '@wordpress/element';
import { ColorPicker } from '@wordpress/components';
// TODO: re-arrang the content
export const BoxShadowControl = (props) =>{
const { prop, value, setAttributes } = props;
const { name } = prop['c'];
var values = !pagelayer_empty(value) ? value : ['','','','','',''];
// Do we have a val ?
if(pagelayer_is_string(values)){
values = values.split(',');
}
const [isColorPickerVisible, setIsColorPickerVisible] = useState(false);
const [isBoxShadowVisible, setBoxShadowVisible] = useState(false);
const colorPreviewRef = useRef(null);
const colorPickerRef = useRef(null);
const boxShadowRef = useRef(null);
const handleInputChange = (index, newValue) => {
const newValues = [...values];
newValues[index] = newValue;
setAttributes({ [name]: newValues});
};
const onChange = (color = '') => {
handleInputChange(3, color);
}
const handleRemoveColor = (e) => {
handleInputChange(3, '');
setIsColorPickerVisible(false);
};
useEffect(() => {
const handleDocumentClick = (e) => {
// ColorPicker Handler
if (
colorPickerRef.current &&
!colorPickerRef.current.contains(e.target) &&
colorPreviewRef.current &&
!colorPreviewRef.current.contains(e.target)
) {
setIsColorPickerVisible(false);
}
// Shodow Modal Handler
if(
boxShadowRef.current &&
!boxShadowRef.current.contains(e.target)
){
setBoxShadowVisible(false);
}
};
document.addEventListener('click', handleDocumentClick);
return () => {
document.removeEventListener('click', handleDocumentClick);
};
}, []);
var blank = 'pagelayer-blank-preview';
return (
<div className="components-base-control pagelayer-base-control">
<LabelControl {...props}/>
<div className="pagelayer-prop-holder" ref={boxShadowRef}>
<span
className="pagelayer-prop-edit"
onClick={() => setBoxShadowVisible(!isBoxShadowVisible)}
>
<i className="pli pli-pencil"></i>
</span>
{ isBoxShadowVisible && <div className="pagelayer-elp-shadow-div">
<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">
<label className="pagelayer-elp-label">{ __('Horizontal') }</label>
<input
className="pagelayer-elp-shadow-input"
type="number"
max="100"
min="-100"
step="1"
name="horizontal"
value={values[0]}
onChange={(e) => handleInputChange(0, parseFloat(e.target.value))}
/>
</div>
<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical">
<label className="pagelayer-elp-label">{ __('Vertical') }</label>
<input
className="pagelayer-elp-shadow-input"
type="number"
max="100"
min="-100"
step="1"
name="vertical"
value={values[1]}
onChange={(e) => handleInputChange(1, parseFloat(e.target.value))}
/>
</div>
<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-blur">
<label className="pagelayer-elp-label">{ __('Blur') }</label>
<input
className="pagelayer-elp-shadow-input"
type="number"
max="100"
min="-100"
step="1"
name="blur"
value={values[2]}
onChange={(e) => handleInputChange(2, parseFloat(e.target.value))}
/>
</div>
<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-spread">
<label className="pagelayer-elp-label">{ __('Spread') }</label>
<input
className="pagelayer-elp-shadow-input"
type="number"
max="100"
min="-100"
step="1"
name="spread"
value={values[4]}
onChange={(e) => handleInputChange(4, parseFloat(e.target.value))}
/>
</div>
<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">
<label className="pagelayer-elp-label">{ __('Color') }</label>
<div
className="pagelayer-elp-color-div"
ref={colorPreviewRef}
>
<div
className={`pagelayer-elp-color-preview ${values[3] === '' ? blank : ''}`}
onClick={() => setIsColorPickerVisible(!isColorPickerVisible)}
style={{ backgroundColor: values[3] }}
></div>
<span className="pagelayer-elp-remove-color" onClick={handleRemoveColor}>
<i className="pli pli-cross"></i>
</span>
</div>
</div>
{isColorPickerVisible && (
<div ref={colorPickerRef}>
<ColorPicker
color={values[3]}
onChangeComplete={(val) => {
if (val.rgb) {
onChange(
val.rgb.a != 1
? "rgba(" +
val.rgb.r +
"," +
val.rgb.g +
"," +
val.rgb.b +
"," +
val.rgb.a +
")"
: val.hex
);
}
}}
disableAlpha={false}
/>
</div>
)}
<div className="pagelayer-elp-prop-grp pagelayer-elp-shadow-inset">
<label className="pagelayer-elp-label">{ __('Shadow') }</label>
<select
className="pagelayer-elp-shadow-input pagelayer-elp-select"
name="inset"
onChange={(e) => handleInputChange(5, (e.target.value))}
>
<option value="">{ __('Outset') }</option>
<option value="inset"
selected={values[5] == 'inset' ? 'selected' : ''}>{ __('Inset') }</option>
</select>
</div>
</div>
}
</div>
</div>
);
}
Zerion Mini Shell 1.0