@quillforms/block-editor
Version:
623 lines (617 loc) • 21.7 kB
JavaScript
/**
* QuillForms Dependencies
*/
import { ToggleControl, BaseControl, ComboboxControl, ControlWrapper, ControlLabel, TextControl, SelectControl } from '@quillforms/admin-components';
// @ts-expect-error
/**
* WordPress Dependencies
*/
import { FocalPointPicker, RangeControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { Fragment } from 'react';
import { MediaUpload } from '@wordpress/media-utils';
import { __ } from '@wordpress/i18n';
/**
* External Dependencies
*/
import { isEmpty } from 'lodash';
import { css } from 'emotion';
/**
* Internal Dependencies
*/
import BlockThemeControl from '../block-theme';
import CustomHTML from '../block-custom-html';
import BlockLayout from '../block-layout';
import BorderRadiusTemplates from '../border-radius-templates';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const WidthControl = ({
value,
onChange
}) => {
const widthOptions = [{
key: '100%',
name: 'Full Width',
icon: /*#__PURE__*/_jsxs("svg", {
width: "40",
height: "28",
viewBox: "0 0 40 28",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [/*#__PURE__*/_jsx("rect", {
x: "2",
y: "4",
width: "36",
height: "20",
rx: "2",
fill: "currentColor",
fillOpacity: "0.1"
}), /*#__PURE__*/_jsx("rect", {
x: "4",
y: "6",
width: "32",
height: "16",
rx: "1",
stroke: "currentColor",
strokeWidth: "2"
}), /*#__PURE__*/_jsx("rect", {
x: "8",
y: "10",
width: "24",
height: "2",
fill: "currentColor"
}), /*#__PURE__*/_jsx("rect", {
x: "8",
y: "16",
width: "16",
height: "2",
fill: "currentColor"
})]
})
}, {
key: '50%',
name: 'Half Width',
icon: /*#__PURE__*/_jsxs("svg", {
width: "40",
height: "28",
viewBox: "0 0 40 28",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [/*#__PURE__*/_jsx("rect", {
x: "2",
y: "4",
width: "36",
height: "20",
rx: "2",
fill: "currentColor",
fillOpacity: "0.1"
}), /*#__PURE__*/_jsx("rect", {
x: "4",
y: "6",
width: "16",
height: "16",
rx: "1",
stroke: "currentColor",
strokeWidth: "2"
}), /*#__PURE__*/_jsx("rect", {
x: "8",
y: "10",
width: "8",
height: "2",
fill: "currentColor"
}), /*#__PURE__*/_jsx("rect", {
x: "8",
y: "16",
width: "6",
height: "2",
fill: "currentColor"
})]
})
}, {
key: '33%',
name: 'One Third',
icon: /*#__PURE__*/_jsxs("svg", {
width: "40",
height: "28",
viewBox: "0 0 40 28",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [/*#__PURE__*/_jsx("rect", {
x: "2",
y: "4",
width: "36",
height: "20",
rx: "2",
fill: "currentColor",
fillOpacity: "0.1"
}), /*#__PURE__*/_jsx("rect", {
x: "4",
y: "6",
width: "11",
height: "16",
rx: "1",
stroke: "currentColor",
strokeWidth: "2"
}), /*#__PURE__*/_jsx("rect", {
x: "7",
y: "10",
width: "5",
height: "2",
fill: "currentColor"
}), /*#__PURE__*/_jsx("rect", {
x: "7",
y: "16",
width: "4",
height: "2",
fill: "currentColor"
})]
})
}];
return /*#__PURE__*/_jsx("div", {
className: css`
display: flex;
gap: 8px;
width: 100%;
`,
children: widthOptions.map(option => /*#__PURE__*/_jsxs("button", {
className: css`
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 8px;
background: #fff;
color: ${value === option.key ? 'var(--wp-admin-theme-color)' : '#1e1e1e'};
border: 2px solid ${value === option.key ? 'var(--wp-admin-theme-color)' : '#e2e4e7'};
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
border-color: var(--wp-admin-theme-color);
color: var(--wp-admin-theme-color);
}
svg {
width: 40px;
height: 28px;
}
span {
font-size: 11px;
font-weight: 500;
}
`,
onClick: () => onChange(option.key),
children: [option.icon, /*#__PURE__*/_jsx("span", {
children: option.name
})]
}, option.key))
});
};
const DefaultControls = ({
blockName,
isChild,
attributes,
setAttributes,
parentBlock
}) => {
var _attributes$attachmen, _attributes$width, _attributes$randomize;
const {
editableSupport,
requiredSupport,
attachmentSupport,
themeSupport,
defaultValueSupport,
numericSupport,
placeholderSupport
} = useSelect(select => {
return {
editableSupport: select('quillForms/blocks').hasBlockSupport(blockName, 'editable'),
requiredSupport: select('quillForms/blocks').hasBlockSupport(blockName, 'required'),
attachmentSupport: select('quillForms/blocks').hasBlockSupport(blockName, 'attachment'),
themeSupport: select('quillForms/blocks').hasBlockSupport(blockName, 'theme'),
defaultValueSupport: select('quillForms/blocks').hasBlockSupport(blockName, 'defaultValue'),
placeholderSupport: select('quillForms/blocks').hasBlockSupport(blockName, 'placeholder'),
numericSupport: select('quillForms/blocks').hasBlockSupport(blockName, 'numeric')
};
});
let required, attachment, blockTheme, defaultValue;
if (attributes) {
var _attributes$defaultVa;
required = attributes.required;
attachment = attributes.attachment;
blockTheme = attributes.themeId;
defaultValue = (_attributes$defaultVa = attributes.defaultValue) !== null && _attributes$defaultVa !== void 0 ? _attributes$defaultVa : '';
}
const widthOptions = [{
key: '100%',
name: __('100%', 'quillforms')
}, {
key: '50%',
name: __('50%', 'quillforms')
}, {
key: '33%',
name: __('33%', 'quillforms')
}];
return /*#__PURE__*/_jsxs(Fragment, {
children: [editableSupport && requiredSupport && /*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Required', 'quillforms')
}), /*#__PURE__*/_jsx(ToggleControl, {
checked: required,
onChange: () => setAttributes({
required: !required
})
})]
})
}), attachmentSupport && !isChild && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Show Attachment', 'quillforms')
}), /*#__PURE__*/_jsx(ToggleControl, {
className: "attachment-toggle-control",
checked: attachment !== undefined,
onChange: () => {
if (attachment) {
setAttributes({
attachment: undefined
});
} else {
setAttributes({
attachment: {
type: 'image',
url: ''
}
});
}
}
})]
})
}), !!attachment && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Attachment Type', 'quillforms')
}), /*#__PURE__*/_jsx(SelectControl, {
value: [{
key: 'image',
name: __('Image', 'quillforms')
}, {
key: 'video',
name: __('Video (YouTube)', 'quillforms')
}].find(option => option.key === (attachment?.type || 'image')),
onChange: selectedChoice => {
if (selectedChoice && selectedChoice.selectedItem) {
const type = selectedChoice.selectedItem.key;
if (type === 'video') {
setAttributes({
attachment: {
type: 'video',
url: ''
}
});
} else {
setAttributes({
attachment: {
type: 'image',
url: ''
}
});
}
}
},
options: [{
key: 'image',
name: __('Image', 'quillforms')
}, {
key: 'video',
name: __('Video', 'quillforms')
}]
})]
})
}), attachment?.type === 'video' ? /*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('YouTube Video URL', 'quillforms')
}), /*#__PURE__*/_jsx(TextControl, {
value: attachment?.url || '',
onChange: val => setAttributes({
attachment: {
type: 'video',
url: val
}
}),
placeholder: __('Paste YouTube video URL here', 'quillforms')
})]
})
}) : /*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Image', 'quillforms')
}), isEmpty(attachment) ? /*#__PURE__*/_jsx(MediaUpload, {
onSelect: media => setAttributes({
attachment: {
type: 'image',
url: media.url
}
}),
allowedTypes: ['image'],
render: ({
open
}) => /*#__PURE__*/_jsx("button", {
className: "media-upload-btn",
onClick: open,
children: "Add"
})
}) : /*#__PURE__*/_jsx("button", {
className: "remove-media-btn",
onClick: () => setAttributes({
attachment: {}
}),
color: "secondary",
children: "Remove"
})]
})
}), /*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Layout', 'quillforms')
}), /*#__PURE__*/_jsx(BlockLayout, {
layout: attributes?.layout,
setAttributes: setAttributes
})]
})
}), (attributes?.layout === 'split-left' || attributes?.layout === 'split-right') && attributes?.attachment?.url && /*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Focal Point Picker', 'quillforms')
}), /*#__PURE__*/_jsx("div", {
className: css`
max-width: 300px;
`,
children: /*#__PURE__*/_jsx(FocalPointPicker, {
url: attributes?.attachment?.url,
value: attributes?.attachmentFocalPoint,
onDragStart: val => {
setAttributes({
attachmentFocalPoint: val
});
},
onDrag: val => {
setAttributes({
attachmentFocalPoint: val
});
},
onChange: val => {
setAttributes({
attachmentFocalPoint: val
});
}
})
})]
})
}), (attributes?.layout === 'float-left' || attributes?.layout === 'float-right' || attributes?.layout === 'stack') && attributes?.attachment?.url && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(BaseControl, {
children: [/*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Set Maximum Width for attachment', 'quillforms')
}), /*#__PURE__*/_jsx(ToggleControl, {
checked: attributes?.attachmentMaxWidth !== 'none',
onChange: () => {
if (attributes?.attachmentMaxWidth === 'none') {
setAttributes({
attachmentMaxWidth: '200px'
});
} else {
setAttributes({
attachmentMaxWidth: 'none'
});
}
}
})]
}), /*#__PURE__*/_jsx(_Fragment, {
children: attributes.attachmentMaxWidth !== 'none' && /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Maximum Width(px)', 'quillforms')
}), /*#__PURE__*/_jsx(RangeControl, {
value: parseInt((_attributes$attachmen = attributes?.attachmentMaxWidth?.replace('px', '')) !== null && _attributes$attachmen !== void 0 ? _attributes$attachmen : '0'),
onChange: value => setAttributes({
attachmentMaxWidth: value + 'px'
}),
min: 50,
max: 900
})]
})
})]
}), attachment?.attachmentType !== 'video' && /*#__PURE__*/_jsxs(BaseControl, {
children: [/*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Use Fancy Border Radius', 'quillforms')
}), /*#__PURE__*/_jsx(ToggleControl, {
checked: attributes?.attachmentFancyBorderRadius,
onChange: () => {
if (attributes.attachmentFancyBorderRadius) {
setAttributes({
attachmentBorderRadius: '0px'
});
}
setAttributes({
attachmentFancyBorderRadius: !attributes.attachmentFancyBorderRadius
});
}
})]
}), attributes.attachmentFancyBorderRadius && /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Choose your favorite fancy border radius', 'quillforms')
}), /*#__PURE__*/_jsx(BorderRadiusTemplates, {
onChange: val => {
setAttributes({
attachmentBorderRadius: val
});
},
attachmentBorderRadius: attributes.attachmentBorderRadius
})]
})]
})]
})]
})]
}), defaultValueSupport && /*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Default Value', 'quillforms')
}), /*#__PURE__*/_jsx("div", {
className: css`
.combobox-control-rich-text-back {
display: none;
}
`,
children: /*#__PURE__*/_jsx(ComboboxControl, {
value: {
type: 'text',
value: defaultValue
},
onChange: val => {
var _val$value;
setAttributes({
defaultValue: val?.value == '0' ? '0' : (_val$value = val?.value) !== null && _val$value !== void 0 ? _val$value : ''
});
},
hideChooseOption: true,
customize: value => {
let {
sections,
options
} = value;
sections = sections.filter(section => ['hidden_fields', 'variables'].includes(section.key));
options = options.filter(option => {
if (option.type === 'field') {
return false;
} else if (['variable', 'hidden_field'].includes(option.type)) {
return true;
}
return false;
});
if (!numericSupport) {
sections.push({
key: 'user',
label: 'Logged In User'
});
options.push({
type: 'user',
value: 'username',
label: 'User username',
isMergeTag: true
});
options.push({
type: 'user',
value: 'email',
label: 'User email',
isMergeTag: true
});
options.push({
type: 'user',
value: 'display_name',
label: 'User display name',
isMergeTag: true
});
}
return {
sections,
options
};
}
})
})]
})
}), isChild && parentBlock.attributes?.layout === 'stack' && /*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Width', 'quillforms'),
isNew: true
}), /*#__PURE__*/_jsx(WidthControl, {
value: (_attributes$width = attributes?.width) !== null && _attributes$width !== void 0 ? _attributes$width : '100%',
onChange: width => {
setAttributes({
width
});
}
})]
})
}), placeholderSupport && /*#__PURE__*/_jsxs(BaseControl, {
children: [/*#__PURE__*/_jsxs(ControlWrapper, {
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Override default placeholder', 'quillforms')
}), /*#__PURE__*/_jsx(ToggleControl, {
checked: attributes?.placeholder !== false,
onChange: () => setAttributes({
placeholder: attributes?.placeholder === false ? '' : false
})
})]
}), /*#__PURE__*/_jsx(_Fragment, {
children: attributes?.placeholder !== false && /*#__PURE__*/_jsx(TextControl, {
value: attributes?.placeholder,
onChange: val => {
setAttributes({
placeholder: val
});
}
})
})]
}), !isChild && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Custom HTML', 'quillforms')
}), /*#__PURE__*/_jsx(CustomHTML, {
value: attributes?.customHTML,
onChange: val => {
setAttributes({
customHTML: val
});
}
})]
})
}), themeSupport && /*#__PURE__*/_jsx(BlockThemeControl, {
blockTheme: blockTheme,
setAttributes: setAttributes
})]
}), (blockName === 'multiple-choice' || blockName === 'dropdown' || blockName === 'picture-choice') && /*#__PURE__*/_jsxs(BaseControl, {
children: [/*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Randomize', 'quillforms')
}), /*#__PURE__*/_jsx(ToggleControl, {
checked: (_attributes$randomize = attributes?.randomize) !== null && _attributes$randomize !== void 0 ? _attributes$randomize : false,
onChange: () => {
setAttributes({
randomize: !attributes?.randomize
});
}
})]
}), /*#__PURE__*/_jsx(_Fragment, {
children: attributes?.randomize && /*#__PURE__*/_jsx("div", {
className: css`
margin-top: 3px;
padding: 9px;
line-height: 2em;
background: #fff2cd;
font-weight: 500;
color: #c0945d;
`,
children: __('Please note that randomization doesn\'t work in the preview mode!', 'quillforms')
})
})]
})]
});
};
export default DefaultControls;
//# sourceMappingURL=index.js.map