lodash#assign JavaScript Examples
The following examples show how to use
lodash#assign.
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: index.js From iceberg-editor with GNU General Public License v2.0 | 5 votes |
|
onSelect( theme, onToggle ) {
const { themeSettings } = this.state;
this.setState( { theme } );
let assignedSettings = themeSettings;
if (
typeof themeSettings.isDefault !== 'undefined' &&
themeSettings.isDefault
) {
// assignedSettings = EditorThemes[ theme ];
assignedSettings = merge( {}, assignedSettings, {
isDefault: true,
theme,
} );
} else {
const settingsDiff = difference(
themeSettings,
typeof EditorThemes[ themeSettings.theme ] !== 'undefined'
? EditorThemes[ themeSettings.theme ]
: {}
);
// if ( typeof settingsDiff.name === 'undefined' ) {
assignedSettings = merge(
{},
theme === 'custom' ? themeSettings : EditorThemes[ theme ],
settingsDiff
);
delete assignedSettings.isDefault;
delete assignedSettings.theme;
assignedSettings = assign(
{ isDefault: theme === 'custom' ? false : true },
assignedSettings
);
// }
}
this.loadConfig( theme, assignedSettings, true );
onToggle();
onToggle();
// update theme settings
delete assignedSettings.theme;
const settings = assign( { theme }, assignedSettings );
this.setState( { themeSettings: settings } );
}
Example #2
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
let {
options,
isRequired,
label,
id,
field_name,
requiredLabel,
messages: { empty },
messages,
condition,
enableCondition,
fieldStyle,
bulkAdd,
adminId,
hint,
showHint,
} = props.attributes;
const radiosContainer = useRef();
const [radios, setRadios] = useState([]);
const [focus, setFocus] = useState({
f: false,
index: null,
});
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("radio", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "radio"),
default: extract_admin_id(newFieldName, "radio"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"radio",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"radio",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "radio");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
let { options } = props.attributes;
const checked = options.find((c) => c.checked);
if (checked) {
let opt = clone(options);
let remove_extra_checked = opt.map((v) => {
if (!isEqual(v, checked)) {
return {
...v,
checked: false,
};
} else return v;
});
setRadios(remove_extra_checked);
} else {
setRadios(options);
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
useEffect(() => {
if (bulkAdd) return;
let boxes = radiosContainer.current.querySelectorAll(
'.cwp-radios-option input[type="text"]'
);
if (focus.f) {
if (focus.index === null) {
boxes[boxes.length - 1].focus();
} else {
boxes[focus.index].focus();
}
setFocus({ f: false, index: null });
}
}, [radios, focus]); //subscribing to any further changes...
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const addRadio = () => {
let newOption = {
label: "Option " + (radios.length + 1),
checked: false,
};
let new_options = clone(radios);
new_options.push(newOption);
props.setAttributes({ options: new_options });
setRadios(new_options);
};
const handleDelete = (index) => {
let new_options = clone(options);
let deleted_options = pullAt(new_options, [index]); //dosen't matter :-D
props.setAttributes({ options: new_options });
setRadios(new_options);
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const handleChange = (e, index) => {
let new_options = clone(options);
new_options[index] = {
...new_options[index],
label: e.target.value,
};
setRadios(new_options);
props.setAttributes({ options: new_options });
};
const handleCheck = (c, index) => {
let new_options = clone(options);
new_options.forEach((v) => (v.checked = false));
new_options[index].checked = c;
setRadios(new_options);
props.setAttributes({ options: new_options });
};
const handleImage = (img, index, action) => {
let new_options = clone(options);
if (action === "add") {
new_options[index] = {
...new_options[index],
image: img,
};
}
if (action === "remove") {
const RadioToRemove = new_options[index];
new_options[index] = {
label: RadioToRemove.label,
};
}
setRadios(new_options);
props.setAttributes({ options: new_options });
};
let handleDuplicate = (index) => {
let new_options = clone(options);
new_options.splice(index, 0, new_options[index]);
setRadios(new_options);
props.setAttributes({ options: new_options });
};
let handleEnter = (index) => {
let new_options = clone(options);
new_options.splice(index + 1, 0, { label: "" });
setRadios(new_options);
props.setAttributes({ options: new_options });
setFocus({ f: true, index: index + 1 });
};
let handleBackspace = (index) => {
if (radios[index].label === "") {
handleDelete(index);
if (radios[index - 1]) {
setFocus({ f: true, index: index - 1 });
}
}
};
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
let clearAll = () => {
const reset = [
{
label: "Option 1",
},
];
setRadios(reset);
props.setAttributes({
options: reset,
});
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
return [
<InspectorControls>
<PanelBody title="Field Settings" initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">
{__("Required", "cwp-gutenberg-forms")}
</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
<div className="cwp-option">
<SelectControl
label={__("Layout", "cwp-gutenberg-forms")}
value={fieldStyle}
options={[
{ label: __("Block", "cwp-gutenberg-forms"), value: "block" },
{ label: __("Inline", "cwp-gutenberg-forms"), value: "inline" },
]}
onChange={(s) => {
props.setAttributes({ fieldStyle: s });
}}
/>
</div>
</PanelBody>
<PanelBody title={__("Show Hint", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<FormToggle
label="Show Hint"
checked={showHint}
onChange={() => props.setAttributes({ showHint: !showHint })}
/>
{showHint && (
<Fragment>
<TextControl
label={__("Hint Text", "cwp-gutenberg-forms")}
onChange={(hint) => props.setAttributes({ hint })}
value={hint}
/>
</Fragment>
)}
</div>
</PanelBody>
<PanelBody title="Condition">
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
{isRequired && (
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
</PanelBody>
)}
</InspectorControls>,
null,
<div
className={`cwp-radios cwp-field ${props.className} is-style-${fieldStyle}`}
>
{bulkAdd ? (
<Bulk_Add onChange={(c) => setRadios(c)} data={props} />
) : (
<Fragment>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div
ref={radiosContainer}
className={`cwp-radios-set ${
!props.isSelected ? "cwp-radio-set-preview" : ""
}`}
>
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
{radios.map((radio, index) => {
const hasImage = has(radio, "image"),
image = hasImage ? radio.image.url : "";
return (
<Fragment>
<div className="cwp-radios-option">
<input
id={id.concat(index.toString())}
checked={radio.checked}
onClick={() => handleCheck(!radio.checked, index)}
type="radio"
/>
{!!props.isSelected && (
<label
style={{ width: "auto" }}
onClick={() => handleCheck(!radio.checked, index)}
for={id.concat(index.toString())}
></label>
)}
{!!props.isSelected ? (
<input
onKeyDown={(e) => {
e.key === "Enter" && handleEnter(index);
e.key === "Backspace" && handleBackspace(index);
}}
onChange={(e) => handleChange(e, index)}
type="text"
value={radio.label}
/>
) : (
<label>
{radio.label}{" "}
{hasImage && !props.isSelected && (
<ImagePreview
onEdit={(img) => handleImage(img, index, "add")}
onRemove={() => handleImage(null, index, "remove")}
isSelected={props.isSelected}
image={radio.image}
/>
)}
</label>
)}
{!!props.isSelected && (
<Fragment>
<ImageUpload
icon="format-image"
value={image}
onSelect={(img) => handleImage(img, index, "add")}
/>
<Button
isDefault
onClick={() => handleDuplicate(index)}
>
<Icon icon="admin-page" />
</Button>
<Button isDefault onClick={() => handleDelete(index)}>
<Icon icon="no-alt" />
</Button>
</Fragment>
)}
</div>
{hasImage && !!props.isSelected && (
<ImagePreview
onEdit={(img) => handleImage(img, index, "add")}
onRemove={() => handleImage(null, index, "remove")}
isSelected={props.isSelected}
image={radio.image}
/>
)}
</Fragment>
);
})}
{!!props.isSelected && (
<div className="cwp-radios-controls">
<div>
<Button isDefault onClick={addRadio}>
{__("Add Option", "cwp-gutenberg-forms")}
</Button>
<Button
isDefault
onClick={() => props.setAttributes({ bulkAdd: true })}
>
{__("Bulk Add", "cwp-gutenberg-forms")}
</Button>
</div>
<div>
<Button onClick={clearAll}>
{__("Clear All", "cwp-gutenberg-forms")}
</Button>
</div>
</div>
)}
</div>
</Fragment>
)}
{showHint && (
<p className="cwp-hint">{hint}</p>
)}
</div>,
];
}
Example #3
| Source File: index.js From iceberg-editor with GNU General Public License v2.0 | 4 votes |
|
addControl() {
const { isActive, updateThemeSettings, postType } = this.props;
let { themeSettings } = this.state;
// Wait for settings to load
if ( typeof themeSettings.theme === 'undefined' ) {
return false;
}
// Wait for post type information
if ( typeof postType === 'undefined' ) {
return false;
}
if ( typeof themeSettings.colors === 'undefined' ) {
themeSettings = assign(
{ colors: { background: '#444', accent: '#111' } },
themeSettings
);
}
if ( ! this.state.theme ) {
this.setState( { theme: themeSettings.theme } );
}
const onRequestClose = ( event ) => {
const closeButton = document.querySelector(
'.components-iceberg-theme-switcher__trigger'
);
const editorWrapper = document.querySelector(
'.block-editor-writing-flow'
);
if (
closeButton &&
event &&
! event.relatedTarget.classList.contains(
'components-iceberg-theme-switcher__trigger'
)
) {
closeButton.click();
} else if ( typeof event === 'undefined' ) {
closeButton.click();
}
document.body.classList.remove( 'is-editing-theme' );
editorWrapper.classList.remove( 'is-editing-theme' );
// Hide when Theme Switcher is disabled
if ( ! this.props.isEnabled ) {
const icebergButton = document.querySelector(
'.components-iceberg-theme-switcher__trigger'
);
if ( icebergButton ) {
icebergButton.style.visibility = 'hidden';
}
}
this.setState( { isEditingTypography: false } );
updateThemeSettings( this.state.themeSettings );
};
const ButtonControls = () => {
return (
<Fragment>
<Tooltip
text={ __(
'Back to all ' +
get(
postType,
[ 'labels', 'name' ],
'Posts'
).toLowerCase(),
'iceberg'
) }
>
<Button
className="components-iceberg-back-to"
onClick={ () => {
window.location.href = addQueryArgs(
'edit.php',
{
post_type: postType.slug,
}
);
} }
>
{ icons.caretDown }
</Button>
</Tooltip>
<Dropdown
className="components-iceberg-theme-switcher__dropdown"
label={ __( 'Change heading level', 'iceberg' ) }
contentClassName="components-iceberg-popover components-iceberg-theme-switcher__content"
popoverProps={ {
role: 'menu',
onFocusOutside: ( event ) => {
onRequestClose( event );
},
onClose: ( event ) => {
onRequestClose( event );
},
} }
position="bottom left"
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
onClick={ () => {
const editorWrapper = document.querySelector(
'.block-editor-writing-flow'
);
if ( ! isOpen ) {
document.body.classList.add(
'is-editing-theme'
);
editorWrapper.classList.add(
'is-editing-theme'
);
} else {
document.body.classList.remove(
'is-editing-theme'
);
editorWrapper.classList.remove(
'is-editing-theme'
);
}
onToggle();
this.onExitEditTheme( onToggle );
} }
className="components-iceberg-theme-switcher__trigger"
>
<span
className="components-iceberg-theme-switcher__palette"
style={ {
backgroundImage: `linear-gradient(130deg,${
typeof EditorThemes[
this.state.theme
] !== 'undefined'
? EditorThemes[
this.state.theme
].colors.background
: this.state.themeSettings
.colors.background
} 48.75%, ${
typeof EditorThemes[
this.state.theme
] !== 'undefined'
? EditorThemes[
this.state.theme
].colors.accent
: this.state.themeSettings
.colors.accent
} 50%)`,
} }
></span>
{ icons.caretDown }
</Button>
) }
renderContent={ ( { onToggle } ) => (
<Fragment>
{ ! this.state.isEditingTheme &&
! this.state.isEditingTypography ? (
<Fragment>
<MenuGroup>
{ map(
EditorThemes,
( theme, key ) => {
if ( 'custom' !== key ) {
return (
<MenuItem
key={ key }
onClick={ () => {
this.onSelect(
key,
onToggle
);
} }
>
<Fragment>
<span
className="components-iceberg-theme-switcher__palette"
style={ {
backgroundImage: `linear-gradient(130deg,${ theme.colors.background } 48.75%, ${ theme.colors.accent } 50%)`,
} }
></span>
{
theme.name
}
{ this.state
.theme ===
key
? icons.checkMark
: null }
</Fragment>
</MenuItem>
);
}
}
) }
<MenuItem
key="custom"
onClick={ () => {
this.onEditTheme(
onToggle,
'isEditingTheme'
);
this.onSelect(
'custom',
onToggle
);
} }
>
<Fragment>
<span
className="components-iceberg-theme-switcher__palette"
style={ {
backgroundImage: `linear-gradient(130deg,${ this.state.themeSettings.colors.background } 48.75%, ${ this.state.themeSettings.colors.accent } 50%)`,
} }
></span>
{ __(
'Custom',
'iceberg'
) }
{ this.state.theme ===
'custom' ||
typeof EditorThemes[
this.state.theme
] === 'undefined'
? icons.checkMark
: icons.color }
</Fragment>
</MenuItem>
</MenuGroup>
<MenuGroup>
<MenuItem
className="components-iceberg-theme-switcher__typography"
onClick={ () => {
this.onEditTheme(
onToggle,
'isEditingTypography'
);
} }
>
{ __(
'Edit typography',
'iceberg'
) }
{ icons.typography }
</MenuItem>
</MenuGroup>
</Fragment>
) : (
<ThemeEditor
onToggle={ onToggle }
loadConfig={ this.loadConfig }
isEditingTheme={
this.state.isEditingTheme
}
isEditingTypography={
this.state.isEditingTypography
}
updateState={ this.updateState }
themeSettings={
this.state.themeSettings
}
onClose={ () => {
this.setState( {
isEditingTheme: false,
isEditingTypography: false,
} );
this.onExitEditTheme( onToggle );
} }
/>
) }
</Fragment>
) }
/>
</Fragment>
);
};
const wrapper = document.querySelector( '.edit-post-header__toolbar' );
if (
! wrapper.classList.contains( 'iceberg-additional-controls' ) &&
isActive
) {
wrapper.classList.add( 'iceberg-additional-controls' );
wrapper.insertAdjacentHTML(
'afterbegin',
'<div id="components-iceberg-theme-switcher"></div>'
);
render(
<ButtonControls />,
document.getElementById( 'components-iceberg-theme-switcher' )
);
} else if (
wrapper.classList.contains( 'iceberg-additional-controls' ) &&
! isActive
) {
document
.getElementById( 'components-iceberg-theme-switcher' )
.remove();
wrapper.classList.remove( 'iceberg-additional-controls' );
}
}
Example #4
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
let website = e.target.value;
props.setAttributes({ website });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
website,
isRequired,
label,
id,
field_name,
requiredLabel,
messages: { invalid, empty },
messages,
condition,
enableCondition,
adminId,
prefix,
suffix,
hint,
showHint
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("website", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "website"),
default: extract_admin_id(newFieldName, "website"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"website",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"website",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "website");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
const handleInputElementChange = (type, property, value) => {
const newSuffix = clone(suffix);
const newPrefix = clone(prefix);
switch (type) {
case "suffix":
set(newSuffix, property, value);
props.setAttributes({ suffix: newSuffix });
break;
case "prefix":
set(newPrefix, property, value);
props.setAttributes({ prefix: newPrefix });
}
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Prefix", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Prefix"
checked={prefix.enable}
onChange={() =>
handleInputElementChange("prefix", "enable", !prefix.enable)
}
/>
</PanelRow>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Suffix", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Suffix"
checked={suffix.enable}
onChange={() =>
handleInputElementChange("suffix", "enable", !suffix.enable)
}
/>
</PanelRow>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
</PanelBody>
<PanelBody title={__("Show Hint", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<FormToggle
label="Show Hint"
checked={showHint}
onChange={() => props.setAttributes({ showHint: !showHint })}
/>
{showHint && (
<Fragment>
<TextControl
label={__("Hint Text", "cwp-gutenberg-forms")}
onChange={(hint) => props.setAttributes({ hint })}
value={hint}
/>
</Fragment>
)}
</div>
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Message Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalid", v)}
value={invalid}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-website cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<div className="cwp-field-with-elements">
{prefix.enable && (
<Prefix prefix={prefix}>
<RichText
placeholder={__("Prefix", "cwp-gutenberg-forms")}
tag="span"
value={prefix.content}
onChange={(newContent) =>
handleInputElementChange("prefix", "content", newContent)
}
/>
</Prefix>
)}
<input value={website} onChange={handleChange} />
{suffix.enable && (
<Suffix suffix={suffix}>
<RichText
placeholder={__("Suffix", "cwp-gutenberg-forms")}
tag="span"
value={suffix.content}
onChange={(newContent) =>
handleInputElementChange("suffix", "content", newContent)
}
/>
</Suffix>
)}
</div>
</div>
{showHint && (
<p className="cwp-hint">{hint}</p>
)}
</div>,
];
}
Example #5
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
let website = e.target.value;
props.setAttributes({ website });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
website,
isRequired,
label,
id,
field_name,
requiredLabel,
messages: { invalid, empty },
messages,
condition,
enableCondition,
adminId,
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("website", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "website"),
default: extract_admin_id(newFieldName, "website"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"website",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"website",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "website");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Message Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalid", v)}
value={invalid}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-website cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<input value={website} onChange={handleChange} />
</div>
</div>,
];
}
Example #6
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
let text = e.target.value;
props.setAttributes({ text });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
text,
isRequired,
label,
id,
field_name,
requiredLabel,
messages,
messages: { invalid, empty },
pattern,
minimumLength,
maximumLength,
condition,
adminId,
enableCondition,
prefix,
suffix,
hint,
showHint
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("text", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "text"),
default: extract_admin_id(newFieldName, "text"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"text",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"text",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "text");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
const handleInputElementChange = (type, property, value) => {
const newSuffix = clone(suffix);
const newPrefix = clone(prefix);
switch (type) {
case "suffix":
set(newSuffix, property, value);
props.setAttributes({ suffix: newSuffix });
break;
case "prefix":
set(newPrefix, property, value);
props.setAttributes({ prefix: newPrefix });
}
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Prefix", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Prefix"
checked={prefix.enable}
onChange={() =>
handleInputElementChange("prefix", "enable", !prefix.enable)
}
/>
</PanelRow>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Suffix", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Suffix"
checked={suffix.enable}
onChange={() =>
handleInputElementChange("suffix", "enable", !suffix.enable)
}
/>
</PanelRow>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label={__("Required", "cwp-gutenberg-forms")}
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
<div className="cwp-option">
<RangeControl
label={__("Minimum Length", "cwp-gutenberg-forms")}
value={minimumLength}
initialPosition={0}
onChange={(value) =>
props.setAttributes({ minimumLength: value })
}
min={0}
max={100}
/>
<RangeControl
label={__("Maximum Length", "cwp-gutenberg-forms")}
value={maximumLength}
onChange={(value) =>
props.setAttributes({ maximumLength: value })
}
min={1}
max={100}
/>
</div>
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Message Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalid", v)}
value={invalid}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
<PanelBody title={__("Validation", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<TextControl
label={__("Pattern (RegExp)", "cwp-gutenberg-forms")}
onChange={(pattern) => props.setAttributes({ pattern })}
value={pattern}
/>
</div>
</PanelBody>
<PanelBody title={__("Show Hint", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<FormToggle
label="Show Hint"
checked={showHint}
onChange={() => props.setAttributes({ showHint: !showHint })}
/>
{showHint && (
<Fragment>
<TextControl
label={__("Hint Text", "cwp-gutenberg-forms")}
onChange={(hint) => props.setAttributes({ hint })}
value={hint}
/>
</Fragment>
)}
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-text cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>Required</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<div className="cwp-field-with-elements">
{prefix.enable && (
<Prefix prefix={prefix}>
<RichText
placeholder={__("Prefix", "cwp-gutenberg-forms")}
tag="span"
value={prefix.content}
onChange={(newContent) =>
handleInputElementChange("prefix", "content", newContent)
}
/>
</Prefix>
)}
<input value={text} onChange={handleChange} />
{suffix.enable && (
<Suffix suffix={suffix}>
<RichText
placeholder={__("Suffix", "cwp-gutenberg-forms")}
tag="span"
value={suffix.content}
onChange={(newContent) =>
handleInputElementChange("suffix", "content", newContent)
}
/>
</Suffix>
)}
</div>
</div>
{showHint && (
<p className="cwp-hint">{hint}</p>
)}
</div>,
];
}
Example #7
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
let text = e.target.value;
props.setAttributes({ text });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
text,
isRequired,
label,
id,
field_name,
requiredLabel,
messages,
messages: { invalid, empty },
pattern,
minimumLength,
maximumLength,
condition,
adminId,
enableCondition,
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("text", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "text"),
default: extract_admin_id(newFieldName, "text"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"text",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"text",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "text");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label={__("Required", "cwp-gutenberg-forms")}
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
<div className="cwp-option">
<RangeControl
label={__("Minimum Length", "cwp-gutenberg-forms")}
value={minimumLength}
initialPosition={0}
onChange={(value) =>
props.setAttributes({ minimumLength: value })
}
min={0}
max={100}
/>
<RangeControl
label={__("Maximum Length", "cwp-gutenberg-forms")}
value={maximumLength}
onChange={(value) =>
props.setAttributes({ maximumLength: value })
}
min={1}
max={100}
/>
</div>
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Message Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalid", v)}
value={invalid}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
<PanelBody title={__("Validation", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<TextControl
label={__("Pattern (RegExp)", "cwp-gutenberg-forms")}
onChange={(pattern) => props.setAttributes({ pattern })}
value={pattern}
/>
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-text cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>Required</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<input value={text} onChange={handleChange} />
</div>
</div>,
];
}
Example #8
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
let {
options,
isRequired,
label,
id,
field_name,
requiredLabel,
messages: { empty },
messages,
condition,
enableCondition,
bulkAdd,
adminId,
hint,
showHint
} = props.attributes;
const [select, setSelect] = useState([]);
const [focus, setFocus] = useState({
f: false,
index: null,
});
const selectContainer = useRef();
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("select", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "select"),
default: extract_admin_id(newFieldName, "select"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"select",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"select",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "select");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
let { options } = props.attributes;
setSelect(options);
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
useEffect(() => {
if (bulkAdd) return;
let boxes = selectContainer.current.querySelectorAll(
'.cwp-select-option input[type="text"]'
);
if (focus.f) {
if (focus.index === null) {
boxes[boxes.length - 1].focus();
} else {
boxes[focus.index].focus();
}
setFocus({ f: false, index: null });
}
}, [select, focus]); //subscribing to any further changes...
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const addSelect = () => {
let newOption = {
label: "Option " + (select.length + 1),
};
let new_options = clone(select);
new_options.push(newOption);
props.setAttributes({ options: new_options });
setSelect(new_options);
};
const handleDelete = (index) => {
let new_options = clone(options);
let deleted_options = pullAt(new_options, [index]); //dosen't matter :-D
props.setAttributes({ options: new_options });
setSelect(new_options);
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const handleChange = (e, index) => {
let new_options = clone(options);
new_options[index] = {
...new_options[index],
label: e.target.value,
};
setSelect(new_options);
props.setAttributes({ options: new_options });
};
let handleDuplicate = (index) => {
let new_options = clone(options);
new_options.splice(index, 0, new_options[index]);
setSelect(new_options);
props.setAttributes({ options: new_options });
};
let handleEnter = (index) => {
let new_options = clone(options);
new_options.splice(index + 1, 0, { label: "" });
setSelect(new_options);
props.setAttributes({ options: new_options });
setFocus({ f: true, index: index + 1 });
};
let handleBackspace = (index) => {
if (select[index].label === "") {
handleDelete(index);
if (select[index - 1]) {
setFocus({ f: true, index: index - 1 });
}
}
};
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
let clearAll = () => {
const reset = [
{
label: "Option 1",
},
];
setSelect(reset);
props.setAttributes({
options: reset,
});
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
const editView = select.map((s, index) => {
return (
<div className="cwp-select-option">
<input
aria-label={strip_tags(label)}
onChange={(e) => handleChange(e, index)}
type="text"
value={s.label}
onKeyDown={(e) => {
e.key === "Enter" && handleEnter(index);
e.key === "Backspace" && handleBackspace(index);
}}
/>
<Button isDefault onClick={() => handleDuplicate(index)}>
<Icon icon="admin-page" />
</Button>
<Button isDefault onClick={() => handleDelete(index)}>
<Icon icon="no-alt" />
</Button>
</div>
);
});
const SelectView = () => {
return (
<select data-cwp-field>
{select.map((s, index) => {
return <option value={s.label}>{s.label}</option>;
})}
</select>
);
};
return [
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label={__("Required", "cwp-gutenberg-forms")}
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("You cannot set a conditional field required!", "cwp-gutenberg-forms")}
</p>
</div>
)}
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">{__("Required Text", "cwp-gutenberg-forms")}</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
</PanelBody>
<PanelBody title={__("Show Hint", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<FormToggle
label="Show Hint"
checked={showHint}
onChange={() => props.setAttributes({ showHint: !showHint })}
/>
{showHint && (
<Fragment>
<TextControl
label={__("Hint Text", "cwp-gutenberg-forms")}
onChange={(hint) => props.setAttributes({ hint })}
value={hint}
/>
</Fragment>
)}
</div>
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
{isRequired && (
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<h3 className="cwp-heading">{__("Required Error", "cwp-gutenberg-forms")}</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
</PanelBody>
)}
</InspectorControls>,
null,
<div
className={`cwp-select cwp-field ${
!props.isSelected ? props.className : ""
}`}
>
{bulkAdd ? (
<Bulk_Add onChange={(c) => setSelect(c)} data={props} />
) : (
<Fragment>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-select-set" ref={selectContainer}>
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
{!!props.isSelected ? editView : <SelectView />}
{!!props.isSelected && (
<div className="cwp-select-controls">
<div>
<Button isDefault onClick={addSelect}>
{__("Add Option", "cwp-gutenberg-forms")}
</Button>
<Button
isDefault
onClick={() => props.setAttributes({ bulkAdd: true })}
>
{__("Bulk Add", "cwp-gutenberg-forms")}
</Button>
</div>
<div>
<Button onClick={clearAll}>
{__("Clear All", "cwp-gutenberg-forms")}
</Button>
</div>
</div>
)}
</div>
</Fragment>
)}
{showHint && (
<p className="cwp-hint">{hint}</p>
)}
</div>,
];
}
Example #9
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
let {
options,
isRequired,
label,
id,
field_name,
requiredLabel,
messages: { empty },
messages,
condition,
enableCondition,
bulkAdd,
adminId,
} = props.attributes;
const [select, setSelect] = useState([]);
const [focus, setFocus] = useState({
f: false,
index: null,
});
const selectContainer = useRef();
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("select", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "select"),
default: extract_admin_id(newFieldName, "select"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"select",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"select",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "select");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
let { options } = props.attributes;
setSelect(options);
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
useEffect(() => {
if (bulkAdd) return;
let boxes = selectContainer.current.querySelectorAll(
'.cwp-select-option input[type="text"]'
);
if (focus.f) {
if (focus.index === null) {
boxes[boxes.length - 1].focus();
} else {
boxes[focus.index].focus();
}
setFocus({ f: false, index: null });
}
}, [select, focus]); //subscribing to any further changes...
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const addSelect = () => {
let newOption = {
label: "Option " + (select.length + 1),
};
let new_options = clone(select);
new_options.push(newOption);
props.setAttributes({ options: new_options });
setSelect(new_options);
};
const handleDelete = (index) => {
let new_options = clone(options);
let deleted_options = pullAt(new_options, [index]); //dosen't matter :-D
props.setAttributes({ options: new_options });
setSelect(new_options);
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const handleChange = (e, index) => {
let new_options = clone(options);
new_options[index] = {
...new_options[index],
label: e.target.value,
};
setSelect(new_options);
props.setAttributes({ options: new_options });
};
let handleDuplicate = (index) => {
let new_options = clone(options);
new_options.splice(index, 0, new_options[index]);
setSelect(new_options);
props.setAttributes({ options: new_options });
};
let handleEnter = (index) => {
let new_options = clone(options);
new_options.splice(index + 1, 0, { label: "" });
setSelect(new_options);
props.setAttributes({ options: new_options });
setFocus({ f: true, index: index + 1 });
};
let handleBackspace = (index) => {
if (select[index].label === "") {
handleDelete(index);
if (select[index - 1]) {
setFocus({ f: true, index: index - 1 });
}
}
};
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
let clearAll = () => {
const reset = [
{
label: "Option 1",
},
];
setSelect(reset);
props.setAttributes({
options: reset,
});
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
const editView = select.map((s, index) => {
return (
<div className="cwp-select-option">
<input
aria-label={strip_tags(label)}
onChange={(e) => handleChange(e, index)}
type="text"
value={s.label}
onKeyDown={(e) => {
e.key === "Enter" && handleEnter(index);
e.key === "Backspace" && handleBackspace(index);
}}
/>
<Button isDefault onClick={() => handleDuplicate(index)}>
<Icon icon="admin-page" />
</Button>
<Button isDefault onClick={() => handleDelete(index)}>
<Icon icon="no-alt" />
</Button>
</div>
);
});
const SelectView = () => {
return (
<select data-cwp-field>
<option value="" disabled selected>
Select your option
</option>
{select.map((s, index) => {
return <option value={s.label}>{s.label}</option>;
})}
</select>
);
};
return [
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label={__("Required", "cwp-gutenberg-forms")}
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("You cannot set a conditional field required!", "cwp-gutenberg-forms")}
</p>
</div>
)}
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">{__("Required Text", "cwp-gutenberg-forms")}</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
{isRequired && (
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<h3 className="cwp-heading">{__("Required Error", "cwp-gutenberg-forms")}</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
</PanelBody>
)}
</InspectorControls>,
null,
<div
className={`cwp-select cwp-field ${
!props.isSelected ? props.className : ""
}`}
>
{bulkAdd ? (
<Bulk_Add onChange={(c) => setSelect(c)} data={props} />
) : (
<Fragment>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-select-set" ref={selectContainer}>
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
{!!props.isSelected ? editView : <SelectView />}
{!!props.isSelected && (
<div className="cwp-select-controls">
<div>
<Button isDefault onClick={addSelect}>
{__("Add Option", "cwp-gutenberg-forms")}
</Button>
<Button
isDefault
onClick={() => props.setAttributes({ bulkAdd: true })}
>
{__("Bulk Add", "cwp-gutenberg-forms")}
</Button>
</div>
<div>
<Button onClick={clearAll}>
{__("Clear All", "cwp-gutenberg-forms")}
</Button>
</div>
</div>
)}
</div>
</Fragment>
)}
</div>,
];
}
Example #10
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
const email = e.target.value;
props.setAttributes({ email });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
email,
isRequired,
label,
id,
field_name,
requiredLabel,
messages: { empty, invalidEmail },
messages,
condition,
enableCondition,
adminId,
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("email", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "email"),
default: extract_admin_id(newFieldName, "email"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"email",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"email",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
const rootMessages = getRootMessages(props.clientId, "email");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
const newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<Fragment>
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
</Fragment>
)}
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Email Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalidEmail", v)}
value={invalidEmail}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-email cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<input value={email} onChange={handleChange} />
</div>
</div>,
];
}
Example #11
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
let phone = e.target.value;
props.setAttributes({ phone });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
phone,
isRequired,
label,
id,
field_name,
requiredLabel,
messages,
messages: { invalid, empty },
pattern,
condition,
enableCondition,
adminId,
prefix,
suffix,
hint,
showHint
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("phone", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "phone"),
default: extract_admin_id(newFieldName, "phone"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"phone",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"phone",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "phone");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
const handleInputElementChange = (type, property, value) => {
const newSuffix = clone(suffix);
const newPrefix = clone(prefix);
switch (type) {
case "suffix":
set(newSuffix, property, value);
props.setAttributes({ suffix: newSuffix });
break;
case "prefix":
set(newPrefix, property, value);
props.setAttributes({ prefix: newPrefix });
}
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Prefix", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Prefix"
checked={prefix.enable}
onChange={() =>
handleInputElementChange("prefix", "enable", !prefix.enable)
}
/>
</PanelRow>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Suffix", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Suffix"
checked={suffix.enable}
onChange={() =>
handleInputElementChange("suffix", "enable", !suffix.enable)
}
/>
</PanelRow>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Message Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalid", v)}
value={invalid}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
<PanelBody title={__("Validation", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<TextControl
label={__("Pattern (RegExp)", "cwp-gutenberg-forms")}
onChange={(pattern) => props.setAttributes({ pattern })}
value={pattern}
/>
</div>
</PanelBody>
<PanelBody title={__("Show Hint", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<FormToggle
label="Show Hint"
checked={showHint}
onChange={() => props.setAttributes({ showHint: !showHint })}
/>
{showHint && (
<Fragment>
<TextControl
label={__("Hint Text", "cwp-gutenberg-forms")}
onChange={(hint) => props.setAttributes({ hint })}
value={hint}
/>
</Fragment>
)}
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-phone cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<div className="cwp-field-with-elements">
{prefix.enable && (
<Prefix prefix={prefix}>
<RichText
placeholder={__("Prefix", "cwp-gutenberg-forms")}
tag="span"
value={prefix.content}
onChange={(newContent) =>
handleInputElementChange("prefix", "content", newContent)
}
/>
</Prefix>
)}
<input value={phone} onChange={handleChange} />
{suffix.enable && (
<Suffix suffix={suffix}>
<RichText
placeholder={__("Suffix", "cwp-gutenberg-forms")}
tag="span"
value={suffix.content}
onChange={(newContent) =>
handleInputElementChange("suffix", "content", newContent)
}
/>
</Suffix>
)}
</div>
</div>
{showHint && (
<p className="cwp-hint">{hint}</p>
)}
</div>,
];
}
Example #12
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
let phone = e.target.value;
props.setAttributes({ phone });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
phone,
isRequired,
label,
id,
field_name,
requiredLabel,
messages,
messages: { invalid, empty },
pattern,
condition,
enableCondition,
adminId,
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("phone", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "phone"),
default: extract_admin_id(newFieldName, "phone"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"phone",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"phone",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "phone");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Message Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalid", v)}
value={invalid}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
<PanelBody title={__("Validation", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<TextControl
label={__("Pattern (RegExp)", "cwp-gutenberg-forms")}
onChange={(pattern) => props.setAttributes({ pattern })}
value={pattern}
/>
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-phone cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<input value={phone} onChange={handleChange} />
</div>
</div>,
];
}
Example #13
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
let number = e.target.value;
props.setAttributes({ number });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
number,
isRequired,
label,
id,
field_name,
isRange,
rangeMax,
rangeMin,
requiredLabel,
messages: { invalid, empty },
messages,
steps,
adminId,
hint,
showHint
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detectSimilarFields(props.clientId, field_name)) {
const newFieldName = getFieldName("number", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "number"),
default: extract_admin_id(newFieldName, "number"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"number",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (
field_name !== "" &&
detectSimilarFields(props.clientId, field_name)
) {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"number",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
} else if (
field_name !== "" &&
!detectSimilarFields(props.clientId, field_name)
) {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"number",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "number");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => {
getRootData();
}, [props]);
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
</div>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
<RangeControl
min={0}
max={10000}
value={steps}
step={0.01}
onChange={(steps) => props.setAttributes({ steps })}
label="Steps"
/>
<div className="cwp-option">
<RangeControl
min={0}
max={10000}
step={0.01}
value={rangeMax}
onChange={(m) => props.setAttributes({ rangeMax: m })}
label={__("Range Max", "cwp-gutenberg-forms")}
/>
<RangeControl
min={0}
step={0.01}
value={rangeMin}
max={10000}
onChange={(m) => props.setAttributes({ rangeMin: m })}
label={__("Range Min", "cwp-gutenberg-forms")}
/>
</div>
</PanelBody>
<PanelBody title="Messages">
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Number Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalid", v)}
value={invalid}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
<PanelBody title={__("Show Hint", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<FormToggle
label="Show Hint"
checked={showHint}
onChange={() => props.setAttributes({ showHint: !showHint })}
/>
{showHint && (
<Fragment>
<TextControl
label={__("Hint Text", "cwp-gutenberg-forms")}
onChange={(hint) => props.setAttributes({ hint })}
value={hint}
/>
</Fragment>
)}
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-number cwp-field ${props.className}`}>
{!!props.isSelected && (
<div className="cwp-required">
<h3>{__("Range Slider", "cwp-gutenberg-forms")}</h3>
<FormToggle
checked={isRange}
onChange={() => props.setAttributes({ isRange: !isRange })}
/>
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
{isRange ? (
<div className="cwp-range-set">
<input
value={number}
max={rangeMax}
min={rangeMin}
type="range"
step={steps}
onChange={handleChange}
/>
<input
value={number}
step={steps}
type="number"
max={rangeMax}
min={rangeMin}
onChange={handleChange}
/>
</div>
) : (
<input
value={number}
max={rangeMax}
step={steps}
min={rangeMin}
type="number"
onChange={handleChange}
/>
)}
</div>
{showHint && (
<p className="cwp-hint">{hint}</p>
)}
</div>,
];
}
Example #14
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
let name = e.target.value;
props.setAttributes({ name });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
name,
isRequired,
label,
id,
field_name,
requiredLabel,
messages: { empty, invalidName },
messages,
pattern,
condition,
enableCondition,
adminId,
prefix,
suffix,
showHint,
hint
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("name", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "name"),
default: extract_admin_id(newFieldName, "name"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"name",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"name",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "name");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
const handleInputElementChange = (type, property, value) => {
const newSuffix = clone(suffix);
const newPrefix = clone(prefix);
switch (type) {
case "suffix":
set(newSuffix, property, value);
props.setAttributes({ suffix: newSuffix });
break;
case "prefix":
set(newPrefix, property, value);
props.setAttributes({ prefix: newPrefix });
}
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody
title={__("Field Settings", "cwp-gutenberg-forms")}
initialOpen={true}
>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">
{__("Prefix", "cwp-gutenberg-forms")}
</h3>
<FormToggle
label="Prefix"
checked={prefix.enable}
onChange={() =>
handleInputElementChange("prefix", "enable", !prefix.enable)
}
/>
</PanelRow>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">
{__("Suffix", "cwp-gutenberg-forms")}
</h3>
<FormToggle
label="Suffix"
checked={suffix.enable}
onChange={() =>
handleInputElementChange("suffix", "enable", !suffix.enable)
}
/>
</PanelRow>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">
{__("Required", "cwp-gutenberg-forms")}
</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<Fragment>
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
</Fragment>
)}
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Name Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalidName", v)}
value={invalidName}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"Use {{value}} to insert field value!",
"cwp-gutenberg-forms"
)}
</p>
</div>
</PanelBody>
<PanelBody title={__("Validation", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<TextControl
label={__("Pattern (RegExp)", "cwp-gutenberg-forms")}
onChange={(pattern) => props.setAttributes({ pattern })}
value={pattern}
/>
</div>
</PanelBody>
<PanelBody title={__("Show Hint", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<FormToggle
label="Show Hint"
checked={showHint}
onChange={() => props.setAttributes({ showHint: !showHint })}
/>
{showHint && (
<Fragment>
<TextControl
label={__("Hint Text", "cwp-gutenberg-forms")}
onChange={(hint) => props.setAttributes({ hint })}
value={hint}
/>
</Fragment>
)}
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-name cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<div className="cwp-field-with-elements">
{prefix.enable && (
<Prefix prefix={prefix}>
<RichText
placeholder={__("Prefix", "cwp-gutenberg-forms")}
tag="span"
value={prefix.content}
onChange={(newContent) =>
handleInputElementChange("prefix", "content", newContent)
}
/>
</Prefix>
)}
<input value={name} onChange={handleChange} />
{suffix.enable && (
<Suffix suffix={suffix}>
<RichText
placeholder={__("Suffix", "cwp-gutenberg-forms")}
tag="span"
value={suffix.content}
onChange={(newContent) =>
handleInputElementChange("suffix", "content", newContent)
}
/>
</Suffix>
)}
</div>
</div>
{showHint && (
<p className="cwp-hint">{hint}</p>
)}
</div>,
];
}
Example #15
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
let name = e.target.value;
props.setAttributes({ name });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
name,
isRequired,
label,
id,
field_name,
requiredLabel,
messages: { empty, invalidName },
messages,
pattern,
condition,
enableCondition,
adminId,
prefix,
suffix,
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("name", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "name"),
default: extract_admin_id(newFieldName, "name"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"name",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"name",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "name");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
const handleInputElementChange = (type, property, value) => {
const newSuffix = clone(suffix);
const newPrefix = clone(prefix);
switch (type) {
case "suffix":
set(newSuffix, property, value);
props.setAttributes({ suffix: newSuffix });
break;
case "prefix":
set(newPrefix, property, value);
props.setAttributes({ prefix: newPrefix });
}
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Prefix", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Prefix"
checked={prefix.enable}
onChange={() =>
handleInputElementChange("prefix", "enable", !prefix.enable)
}
/>
</PanelRow>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Suffix", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Suffix"
checked={suffix.enable}
onChange={() =>
handleInputElementChange("suffix", "enable", !suffix.enable)
}
/>
</PanelRow>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<Fragment>
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
</Fragment>
)}
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Name Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalidName", v)}
value={invalidName}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
<PanelBody title={__("Validation", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<TextControl
label={__("Pattern (RegExp)", "cwp-gutenberg-forms")}
onChange={(pattern) => props.setAttributes({ pattern })}
value={pattern}
/>
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-name cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<div className="cwp-field-with-elements">
{prefix.enable && (
<Prefix prefix={prefix}>
<RichText
placeholder={__("Prefix", "cwp-gutenberg-forms")}
tag="span"
value={prefix.content}
onChange={(newContent) =>
handleInputElementChange("prefix", "content", newContent)
}
/>
</Prefix>
)}
<input value={name} onChange={handleChange} />
{suffix.enable && (
<Suffix suffix={suffix}>
<RichText
placeholder={__("Suffix", "cwp-gutenberg-forms")}
tag="span"
value={suffix.content}
onChange={(newContent) =>
handleInputElementChange("suffix", "content", newContent)
}
/>
</Suffix>
)}
</div>
</div>
</div>,
];
}
Example #16
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
let message = e.target.value;
props.setAttributes({ message });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
message,
isRequired,
label,
id,
height,
field_name,
requiredLabel,
messages: { invalid, empty },
messages,
pattern,
condition,
enableCondition,
minimumLength,
maximumLength,
adminId,
hint,
showHint
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("message", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "message"),
default: extract_admin_id(newFieldName, "message"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"message",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"message",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "message");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
)}
<div className="cwp-option">
<RangeControl
label={__("Minimum Length (characters)", "cwp-gutenberg-forms")}
value={minimumLength}
initialPosition={0}
onChange={(value) =>
props.setAttributes({ minimumLength: value })
}
min={0}
max={1000}
/>
<RangeControl
label={__("Maximum Length (characters)", "cwp-gutenberg-forms")}
value={maximumLength}
onChange={(value) =>
props.setAttributes({ maximumLength: value })
}
min={1}
max={1000}
/>
</div>
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Message Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalid", v)}
value={invalid}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
<PanelBody title={__("Validation", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<TextControl
label={__("Pattern (RegExp)", "cwp-gutenberg-forms")}
onChange={(pattern) => props.setAttributes({ pattern })}
value={pattern}
/>
</div>
</PanelBody>
<PanelBody title={__("Show Hint", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<FormToggle
label="Show Hint"
checked={showHint}
onChange={() => props.setAttributes({ showHint: !showHint })}
/>
{showHint && (
<Fragment>
<TextControl
label={__("Hint Text", "cwp-gutenberg-forms")}
onChange={(hint) => props.setAttributes({ hint })}
value={hint}
/>
</Fragment>
)}
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-message cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<ResizableBox
size={{
height,
width: "100%",
}}
showHandle={true}
minHeight="50"
enable={{
top: false,
right: false,
bottom: true,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false,
}}
onResizeStop={(event, direction, elt, delta) => {
props.setAttributes({
height: parseInt(height + delta.height, 10),
});
}}
>
<textarea
value={message}
style={{ height: height }}
onChange={handleChange}
/>
</ResizableBox>
</div>
{showHint && (
<p className="cwp-hint">{hint}</p>
)}
</div>,
];
}
Example #17
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = e => {
let file = e.target.value;
props.setAttributes({ file });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = label => {
props.setAttributes({ label });
};
const {
file,
isRequired,
label,
id,
field_name,
requiredLabel,
messages: { empty, invalid },
messages,
condition,
enableCondition,
allowedFormats,
adminId
} = props.attributes;
useEffect(() => {
// setting the root encryption for form-data;
const rootForm = getRootFormBlock(props.clientId);
updateBlockAttributes(rootForm.clientId, { encryption: "multipart/form-data" }); //? like a piece of cake
}, [])
const setRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("file_upload", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, 'file_upload'),
default: extract_admin_id(newFieldName, 'file_upload')
}
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData("file_upload", props.clientId, isRequired, get_admin_id(adminId), JSON.stringify(allowedFormats))
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData("file_upload", extract_id(field_name), isRequired, get_admin_id(adminId), JSON.stringify(allowedFormats))
});
}
}
useEffect(() => {
let rootMessages = getRootMessages(props.clientId, "file-upload");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
setRootData();
}, []);
useEffect(() => {
setRootData();
}, [props])
const setMessages = (type, m) => {
let newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const suggestions = [
"jpg",
"jpeg",
"png",
"gif",
"pdf",
"doc",
"docx",
"ppt",
"pptx",
"odt",
"avi",
"ogg",
"m4a",
"mov",
"mp3",
"mp4",
"mpg",
"wav",
"wmv"
];
const handleFormats = (newFormats) => {
for (const format of newFormats) {
if (!suggestions.includes(format)) {
return;
}
}
props.setAttributes({ allowedFormats: newFormats });
}
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_")
}
})
}
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" /> {__("You cannot set a conditional field required!", "cwp-gutenberg-forms")}
</p>
</div>
)}
{isRequired && (
<Fragment>
<div className="cwp-option">
<h3 className="cwp-heading">{__("Required Text", "cwp-gutenberg-forms")}</h3>
<TextControl
onChange={label =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
</Fragment>
)}
<div className="cwp-option column">
<h3>{__("Allowed Formats", "cwp-gutenberg-forms")}</h3>
<div className="cwp-column">
<FormTokenField
value={allowedFormats}
suggestions={suggestions}
onChange={f => handleFormats(f)}
placeholder="Allowed Format(s)"
/>
</div>
</div>
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">{__("Required Error", "cwp-gutenberg-forms")}</h3>
<TextControl
onChange={label => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">{__("Invalid File Error", "cwp-gutenberg-forms")}</h3>
<TextControl
onChange={v => setMessages("invalid", v)}
value={invalid}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" /> {__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-file cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText placeholder={__("Add a label", "cwp-gutenberg-forms")} tag="label" value={label} onChange={handleLabel} />
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<input type="file" disabled required={isRequired} />
</div>
</div>
];
}
Example #18
| Source File: edit.js From gutenberg-forms with GNU General Public License v2.0 | 4 votes |
|
function edit(props) {
const handleChange = (e) => {
const email = e.target.value;
props.setAttributes({ email });
};
const handleRequired = () => {
const { isRequired } = props.attributes;
props.setAttributes({ isRequired: !isRequired });
};
const handleLabel = (label) => {
props.setAttributes({ label });
};
const {
email,
isRequired,
label,
id,
field_name,
requiredLabel,
messages: { empty, invalidEmail },
messages,
condition,
enableCondition,
adminId,
prefix,
suffix,
hint,
showHint
} = props.attributes;
const getRootData = () => {
if (field_name === "" || detect_similar_forms(props.clientId)) {
const newFieldName = getFieldName("email", props.clientId);
props.setAttributes({
field_name: newFieldName,
adminId: {
value: extract_admin_id(newFieldName, "email"),
default: extract_admin_id(newFieldName, "email"),
},
});
props.setAttributes({
id:
props.clientId +
"__" +
getEncodedData(
"email",
props.clientId,
isRequired,
get_admin_id(adminId)
),
});
} else if (field_name !== "") {
props.setAttributes({
id:
extract_id(field_name) +
"__" +
getEncodedData(
"email",
extract_id(field_name),
isRequired,
get_admin_id(adminId)
),
});
}
};
useEffect(() => {
const rootMessages = getRootMessages(props.clientId, "email");
if (rootMessages) {
const newMessages = clone(messages);
assign(newMessages, rootMessages);
props.setAttributes({ messages: newMessages });
}
getRootData();
}, []);
useEffect(() => getRootData(), [props]);
const setMessages = (type, m) => {
const newMessages = clone(messages);
set(newMessages, type, m);
props.setAttributes({ messages: newMessages });
};
const handleAdminId = (id) => {
props.setAttributes({
adminId: {
...adminId,
value: id.replace(/\s|-/g, "_"),
},
});
};
const handleInputElementChange = (type, property, value) => {
const newSuffix = clone(suffix);
const newPrefix = clone(prefix);
switch (type) {
case "suffix":
set(newSuffix, property, value);
props.setAttributes({ suffix: newSuffix });
break;
case "prefix":
set(newPrefix, property, value);
props.setAttributes({ prefix: newPrefix });
}
};
return [
!!props.isSelected && (
<InspectorControls>
<PanelBody title={__("Field Settings", "cwp-gutenberg-forms")} initialOpen={true}>
<div className="cwp-option">
<TextControl
placeholder={adminId.default}
label={__("Field ID", "cwp-gutenberg-forms")}
value={adminId.value}
onChange={handleAdminId}
/>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Prefix", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Prefix"
checked={prefix.enable}
onChange={() =>
handleInputElementChange("prefix", "enable", !prefix.enable)
}
/>
</PanelRow>
</div>
<div className="cwp-option">
<PanelRow>
<h3 className="cwp-heading">{__("Suffix", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Suffix"
checked={suffix.enable}
onChange={() =>
handleInputElementChange("suffix", "enable", !suffix.enable)
}
/>
</PanelRow>
</div>
{!enableCondition ? (
<PanelRow>
<h3 className="cwp-heading">{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle
label="Required"
checked={isRequired}
onChange={handleRequired}
/>
</PanelRow>
) : (
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__(
"You cannot set a conditional field required!",
"cwp-gutenberg-forms"
)}
</p>
</div>
)}
{isRequired && (
<Fragment>
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Text", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) =>
props.setAttributes({ requiredLabel: label })
}
value={requiredLabel}
/>
</div>
</Fragment>
)}
</PanelBody>
<PanelBody title={__("Messages", "cwp-gutenberg-forms")}>
{isRequired && (
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Required Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(label) => setMessages("empty", label)}
value={empty}
/>
</div>
)}
<div className="cwp-option">
<h3 className="cwp-heading">
{__("Invalid Email Error", "cwp-gutenberg-forms")}
</h3>
<TextControl
onChange={(v) => setMessages("invalidEmail", v)}
value={invalidEmail}
/>
</div>
<div className="cwp-option">
<p>
<Icon icon="info" />{" "}
{__("Use {{value}} to insert field value!", "cwp-gutenberg-forms")}
</p>
</div>
</PanelBody>
<PanelBody title={__("Condition", "cwp-gutenberg-forms")}>
<ConditionalLogic
condition={condition}
set={props.setAttributes}
clientId={props.clientId}
useCondition={props.attributes.enableCondition}
/>
</PanelBody>
<PanelBody title={__("Show Hint", "cwp-gutenberg-forms")}>
<div className="cwp-option">
<FormToggle
label="Show Hint"
checked={showHint}
onChange={() => props.setAttributes({ showHint: !showHint })}
/>
{showHint && (
<Fragment>
<TextControl
label={__("Hint Text", "cwp-gutenberg-forms")}
onChange={(hint) => props.setAttributes({ hint })}
value={hint}
/>
</Fragment>
)}
</div>
</PanelBody>
</InspectorControls>
),
!!props.isSelected && <BlockControls></BlockControls>,
<div className={`cwp-email cwp-field ${props.className}`}>
{!!props.isSelected && !enableCondition && (
<div className="cwp-required">
<h3>{__("Required", "cwp-gutenberg-forms")}</h3>
<FormToggle checked={isRequired} onChange={handleRequired} />
</div>
)}
<div className="cwp-field-set">
<div className="cwp-label-wrap">
<RichText
placeholder={__("Add a label", "cwp-gutenberg-forms")}
tag="label"
value={label}
onChange={handleLabel}
/>
{!props.isSelected && isRequired && !enableCondition && (
<div className="cwp-required cwp-noticed">
<h3>{requiredLabel}</h3>
</div>
)}
</div>
<div className="cwp-field-with-elements">
{prefix.enable && (
<Prefix prefix={prefix}>
<RichText
placeholder={__("Prefix", "cwp-gutenberg-forms")}
tag="span"
value={prefix.content}
onChange={(newContent) =>
handleInputElementChange("prefix", "content", newContent)
}
/>
</Prefix>
)}
<input value={email} onChange={handleChange} />
{suffix.enable && (
<Suffix suffix={suffix}>
<RichText
placeholder={__("Suffix", "cwp-gutenberg-forms")}
tag="span"
value={suffix.content}
onChange={(newContent) =>
handleInputElementChange("suffix", "content", newContent)
}
/>
</Suffix>
)}
</div>
</div>
{showHint && (
<p className="cwp-hint">{hint}</p>
)}
</div>,
];
}
