@quillforms/block-editor
Version:
632 lines (623 loc) • 24.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _adminComponents = require("@quillforms/admin-components");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _react = require("react");
var _mediaUtils = require("@wordpress/media-utils");
var _i18n = require("@wordpress/i18n");
var _lodash = require("lodash");
var _emotion = require("emotion");
var _blockTheme = _interopRequireDefault(require("../block-theme"));
var _blockCustomHtml = _interopRequireDefault(require("../block-custom-html"));
var _blockLayout = _interopRequireDefault(require("../block-layout"));
var _borderRadiusTemplates = _interopRequireDefault(require("../border-radius-templates"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* QuillForms Dependencies
*/
// @ts-expect-error
/**
* WordPress Dependencies
*/
/**
* External Dependencies
*/
/**
* Internal Dependencies
*/
const WidthControl = ({
value,
onChange
}) => {
const widthOptions = [{
key: '100%',
name: 'Full Width',
icon: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
width: "40",
height: "28",
viewBox: "0 0 40 28",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "2",
y: "4",
width: "36",
height: "20",
rx: "2",
fill: "currentColor",
fillOpacity: "0.1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "4",
y: "6",
width: "32",
height: "16",
rx: "1",
stroke: "currentColor",
strokeWidth: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "8",
y: "10",
width: "24",
height: "2",
fill: "currentColor"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "8",
y: "16",
width: "16",
height: "2",
fill: "currentColor"
})]
})
}, {
key: '50%',
name: 'Half Width',
icon: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
width: "40",
height: "28",
viewBox: "0 0 40 28",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "2",
y: "4",
width: "36",
height: "20",
rx: "2",
fill: "currentColor",
fillOpacity: "0.1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "4",
y: "6",
width: "16",
height: "16",
rx: "1",
stroke: "currentColor",
strokeWidth: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "8",
y: "10",
width: "8",
height: "2",
fill: "currentColor"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "8",
y: "16",
width: "6",
height: "2",
fill: "currentColor"
})]
})
}, {
key: '33%',
name: 'One Third',
icon: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
width: "40",
height: "28",
viewBox: "0 0 40 28",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "2",
y: "4",
width: "36",
height: "20",
rx: "2",
fill: "currentColor",
fillOpacity: "0.1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "4",
y: "6",
width: "11",
height: "16",
rx: "1",
stroke: "currentColor",
strokeWidth: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "7",
y: "10",
width: "5",
height: "2",
fill: "currentColor"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
x: "7",
y: "16",
width: "4",
height: "2",
fill: "currentColor"
})]
})
}];
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _emotion.css)`
display: flex;
gap: 8px;
width: 100%;
`,
children: widthOptions.map(option => /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
className: (0, _emotion.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__*/(0, _jsxRuntime.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
} = (0, _data.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: (0, _i18n.__)('100%', 'quillforms')
}, {
key: '50%',
name: (0, _i18n.__)('50%', 'quillforms')
}, {
key: '33%',
name: (0, _i18n.__)('33%', 'quillforms')
}];
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
children: [editableSupport && requiredSupport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.BaseControl, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Required', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ToggleControl, {
checked: required,
onChange: () => setAttributes({
required: !required
})
})]
})
}), attachmentSupport && !isChild && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.BaseControl, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Show Attachment', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ToggleControl, {
className: "attachment-toggle-control",
checked: attachment !== undefined,
onChange: () => {
if (attachment) {
setAttributes({
attachment: undefined
});
} else {
setAttributes({
attachment: {
type: 'image',
url: ''
}
});
}
}
})]
})
}), !!attachment && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.BaseControl, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Attachment Type', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.SelectControl, {
value: [{
key: 'image',
name: (0, _i18n.__)('Image', 'quillforms')
}, {
key: 'video',
name: (0, _i18n.__)('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: (0, _i18n.__)('Image', 'quillforms')
}, {
key: 'video',
name: (0, _i18n.__)('Video', 'quillforms')
}]
})]
})
}), attachment?.type === 'video' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.BaseControl, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('YouTube Video URL', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.TextControl, {
value: attachment?.url || '',
onChange: val => setAttributes({
attachment: {
type: 'video',
url: val
}
}),
placeholder: (0, _i18n.__)('Paste YouTube video URL here', 'quillforms')
})]
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.BaseControl, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Image', 'quillforms')
}), (0, _lodash.isEmpty)(attachment) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_mediaUtils.MediaUpload, {
onSelect: media => setAttributes({
attachment: {
type: 'image',
url: media.url
}
}),
allowedTypes: ['image'],
render: ({
open
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
className: "media-upload-btn",
onClick: open,
children: "Add"
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
className: "remove-media-btn",
onClick: () => setAttributes({
attachment: {}
}),
color: "secondary",
children: "Remove"
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.BaseControl, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Layout', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockLayout.default, {
layout: attributes?.layout,
setAttributes: setAttributes
})]
})
}), (attributes?.layout === 'split-left' || attributes?.layout === 'split-right') && attributes?.attachment?.url && /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.BaseControl, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Focal Point Picker', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _emotion.css)`
max-width: 300px;
`,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.BaseControl, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Set Maximum Width for attachment', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ToggleControl, {
checked: attributes?.attachmentMaxWidth !== 'none',
onChange: () => {
if (attributes?.attachmentMaxWidth === 'none') {
setAttributes({
attachmentMaxWidth: '200px'
});
} else {
setAttributes({
attachmentMaxWidth: 'none'
});
}
}
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: attributes.attachmentMaxWidth !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Maximum Width(px)', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsxs)(_adminComponents.BaseControl, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Use Fancy Border Radius', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ToggleControl, {
checked: attributes?.attachmentFancyBorderRadius,
onChange: () => {
if (attributes.attachmentFancyBorderRadius) {
setAttributes({
attachmentBorderRadius: '0px'
});
}
setAttributes({
attachmentFancyBorderRadius: !attributes.attachmentFancyBorderRadius
});
}
})]
}), attributes.attachmentFancyBorderRadius && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Choose your favorite fancy border radius', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderRadiusTemplates.default, {
onChange: val => {
setAttributes({
attachmentBorderRadius: val
});
},
attachmentBorderRadius: attributes.attachmentBorderRadius
})]
})]
})]
})]
})]
}), defaultValueSupport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.BaseControl, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Default Value', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _emotion.css)`
.combobox-control-rich-text-back {
display: none;
}
`,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.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__*/(0, _jsxRuntime.jsx)(_adminComponents.BaseControl, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Width', 'quillforms'),
isNew: true
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(WidthControl, {
value: (_attributes$width = attributes?.width) !== null && _attributes$width !== void 0 ? _attributes$width : '100%',
onChange: width => {
setAttributes({
width
});
}
})]
})
}), placeholderSupport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.BaseControl, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Override default placeholder', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ToggleControl, {
checked: attributes?.placeholder !== false,
onChange: () => setAttributes({
placeholder: attributes?.placeholder === false ? '' : false
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: attributes?.placeholder !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.TextControl, {
value: attributes?.placeholder,
onChange: val => {
setAttributes({
placeholder: val
});
}
})
})]
}), !isChild && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.BaseControl, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Custom HTML', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockCustomHtml.default, {
value: attributes?.customHTML,
onChange: val => {
setAttributes({
customHTML: val
});
}
})]
})
}), themeSupport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockTheme.default, {
blockTheme: blockTheme,
setAttributes: setAttributes
})]
}), (blockName === 'multiple-choice' || blockName === 'dropdown' || blockName === 'picture-choice') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.BaseControl, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Randomize', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ToggleControl, {
checked: (_attributes$randomize = attributes?.randomize) !== null && _attributes$randomize !== void 0 ? _attributes$randomize : false,
onChange: () => {
setAttributes({
randomize: !attributes?.randomize
});
}
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: attributes?.randomize && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _emotion.css)`
margin-top: 3px;
padding: 9px;
line-height: 2em;
background: #fff2cd;
font-weight: 500;
color: #c0945d;
`,
children: (0, _i18n.__)('Please note that randomization doesn\'t work in the preview mode!', 'quillforms')
})
})]
})]
});
};
var _default = exports.default = DefaultControls;
//# sourceMappingURL=index.js.map