@quillforms/blocklib-multiple-choice-block
Version:
Multiple choice block for quillforms
150 lines (149 loc) • 4.66 kB
JavaScript
/**
* QuillForms Dependencies
*/
import { BaseControl, ControlWrapper, ControlLabel, ToggleControl, ChoicesBulkBtn, ChoicesInserter, TextControl } from '@quillforms/admin-components';
/**
* WordPress Dependencies
*/
import { Fragment } from 'react';
import { __ } from '@wordpress/i18n';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const multipleChoiceControls = props => {
const {
attributes: {
multiple,
verticalAlign,
choices,
min,
max,
other
},
setAttributes
} = props;
return /*#__PURE__*/_jsxs(Fragment, {
children: [/*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __("Multiple", "quillforms")
}), /*#__PURE__*/_jsx(ToggleControl, {
checked: multiple,
onChange: () => setAttributes({
multiple: !multiple
})
})]
})
}), multiple && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(BaseControl, {
children: [/*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __("Minimum limit for choices", "quillforms")
}), /*#__PURE__*/_jsx(ToggleControl, {
checked: min,
onChange: () => {
setAttributes({
min: min === false ? 1 : false
});
}
})]
}), min !== false && /*#__PURE__*/_jsx(TextControl, {
type: "number",
value: min,
onChange: val => {
setAttributes({
min: val
});
}
})]
}), /*#__PURE__*/_jsxs(BaseControl, {
children: [/*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __("Maximum limit for choices", "quillforms")
}), /*#__PURE__*/_jsx(ToggleControl, {
checked: max,
onChange: () => {
setAttributes({
max: max === false ? 5 : false
});
}
})]
}), max !== false && /*#__PURE__*/_jsx(TextControl, {
type: "number",
value: max,
onChange: val => {
setAttributes({
max: val
});
}
})]
})]
}), /*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __("Vertical Align", "quillforms")
}), /*#__PURE__*/_jsx(ToggleControl, {
checked: verticalAlign,
onChange: () => setAttributes({
verticalAlign: !verticalAlign
})
})]
})
}), /*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __("Other Option", "quillforms"),
isNew: true
}), /*#__PURE__*/_jsx(ToggleControl, {
checked: other,
onChange: () => setAttributes({
other: !other
})
})]
})
}), other && /*#__PURE__*/_jsx(BaseControl, {
children: /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "vertical",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __("Other Text", "quillforms")
}), /*#__PURE__*/_jsx(TextControl, {
value: otherText,
onChange: val => {
setAttributes({
otherText: val
});
}
})]
})
}), /*#__PURE__*/_jsxs(BaseControl, {
children: [/*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __("Choices", "quillforms")
}), /*#__PURE__*/_jsx(ChoicesBulkBtn, {
choices: choices,
setChoices: val => {
setAttributes({
choices: val
});
}
})]
}), /*#__PURE__*/_jsx(ControlWrapper, {
orientation: "vertical",
children: /*#__PURE__*/_jsx(ChoicesInserter, {
choices: choices,
setChoices: val => {
setAttributes({
choices: val
});
}
})
})]
})]
});
};
export default multipleChoiceControls;
//# sourceMappingURL=controls.js.map