From 5e49edb880d73c020de6ef7df076283a41dda807 Mon Sep 17 00:00:00 2001 From: Rob Gietema Date: Thu, 28 Nov 2024 17:41:56 -0300 Subject: [PATCH] Update custom wrappers. --- .../Wrappers/CheckboxGroupWrapper.jsx | 14 +++++++- .../Wrappers/CheckboxWrapper.jsx | 25 +++++++++++-- .../Wrappers/DatetimeWrapper.jsx | 36 ++++++++++++++++--- .../schemaFormBlock/Wrappers/EmailWrapper.jsx | 14 +++++++- .../schemaFormBlock/Wrappers/FileWrapper.jsx | 26 ++++++++++++-- .../Wrappers/HiddenWrapper.jsx | 14 +++++++- .../Wrappers/NumberWrapper.jsx | 14 +++++++- .../Wrappers/RadioGroupWrapper.jsx | 14 +++++++- .../Wrappers/SelectWrapper.jsx | 14 +++++++- .../schemaFormBlock/Wrappers/TextWrapper.jsx | 14 +++++++- .../Wrappers/TextareaWrapper.jsx | 14 +++++++- .../schemaFormBlock/Wrappers/TimeWrapper.jsx | 25 +++++++++++-- 12 files changed, 203 insertions(+), 21 deletions(-) diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxGroupWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxGroupWrapper.jsx index 76ac418..8e62426 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxGroupWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxGroupWrapper.jsx @@ -1,9 +1,17 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const CheckboxGroupWrapper = (props) => { const { id, @@ -14,6 +22,8 @@ const CheckboxGroupWrapper = (props) => { isDisabled, title, description, + required, + intl, } = props; const ref = useRef(); @@ -32,6 +42,8 @@ const CheckboxGroupWrapper = (props) => { value={value || ''} label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} onChange={(value) => onChange(id, value === '' ? undefined : value)} ref={ref} @@ -45,7 +57,7 @@ const CheckboxGroupWrapper = (props) => { ); }; -export default CheckboxGroupWrapper; +export default injectIntl(CheckboxGroupWrapper); CheckboxGroupWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxWrapper.jsx index 72ba434..5184488 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxWrapper.jsx @@ -1,12 +1,29 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const CheckboxWrapper = (props) => { - const { id, value, onChange, onClick, isDisabled, title, description } = - props; + const { + id, + value, + onChange, + onClick, + isDisabled, + title, + description, + required, + intl, + } = props; const ref = useRef(); const Widget = config.blocks.blocksConfig.schemaForm.innerWidgets.checkbox; @@ -19,6 +36,8 @@ const CheckboxWrapper = (props) => { value={value || ''} label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} onChange={(value) => onChange(id, value === '' ? undefined : value)} ref={ref} @@ -28,7 +47,7 @@ const CheckboxWrapper = (props) => { ); }; -export default CheckboxWrapper; +export default injectIntl(CheckboxWrapper); CheckboxWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/DatetimeWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/DatetimeWrapper.jsx index f8c85f8..0ddf436 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/DatetimeWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/DatetimeWrapper.jsx @@ -1,12 +1,30 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const DatetimeWrapper = (props) => { - const { id, value, onChange, onClick, isDisabled, title, description } = - props; + const { + id, + value, + onChange, + onClick, + isDisabled, + title, + description, + widget, + required, + intl, + } = props; const ref = useRef(); const Widget = config.blocks.blocksConfig.schemaForm.innerWidgets.datetime; @@ -19,8 +37,18 @@ const DatetimeWrapper = (props) => { value={value || null} label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} - onChange={(value) => onChange(id, value === '' ? undefined : value)} + isDateOnly={widget === 'date'} + onChange={(newValue) => { + console.log(newValue); + return onChange(id, newValue === '' ? undefined : newValue); + }} + onChangeTime={(value) => { + console.log(newValue); + return onChange(id, newValue === '' ? undefined : newValue); + }} ref={ref} onClick={() => onClick()} /> @@ -28,7 +56,7 @@ const DatetimeWrapper = (props) => { ); }; -export default DatetimeWrapper; +export default injectIntl(DatetimeWrapper); DatetimeWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/EmailWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/EmailWrapper.jsx index f021800..9e1dbdd 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/EmailWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/EmailWrapper.jsx @@ -1,9 +1,17 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const EmailWrapper = (props) => { const { id, @@ -15,6 +23,8 @@ const EmailWrapper = (props) => { isDisabled, title, description, + required, + intl, } = props; const ref = useRef(); @@ -28,6 +38,8 @@ const EmailWrapper = (props) => { value={value || ''} label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} type="email" onChange={(value) => onChange(id, value === '' ? undefined : value)} @@ -40,7 +52,7 @@ const EmailWrapper = (props) => { ); }; -export default EmailWrapper; +export default injectIntl(EmailWrapper); EmailWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/FileWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/FileWrapper.jsx index 4026e6a..7b18a88 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/FileWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/FileWrapper.jsx @@ -2,12 +2,30 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; import { readAsDataURL } from 'promise-file-reader'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const FileWrapper = (props) => { - const { id, value, onChange, isDisabled, title, description, accept, size } = - props; + const { + id, + value, + onChange, + isDisabled, + title, + description, + accept, + size, + required, + intl, + } = props; const ref = useRef(); const Widget = config.blocks.blocksConfig.schemaForm.innerWidgets.file; @@ -20,6 +38,8 @@ const FileWrapper = (props) => { labelFile={value?.filename || ''} label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} accept={accept} size={size} @@ -45,7 +65,7 @@ const FileWrapper = (props) => { ); }; -export default FileWrapper; +export default injectIntl(FileWrapper); FileWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/HiddenWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/HiddenWrapper.jsx index 1055bb4..eef4458 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/HiddenWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/HiddenWrapper.jsx @@ -1,9 +1,17 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const HiddenWrapper = (props) => { const { id, @@ -15,6 +23,8 @@ const HiddenWrapper = (props) => { title, description, onEdit, + required, + intl, } = props; const ref = useRef(); @@ -28,6 +38,8 @@ const HiddenWrapper = (props) => { value={value || ''} label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} placeholder={placeholder} onChange={(value) => onChange(id, value === '' ? undefined : value)} @@ -47,7 +59,7 @@ const HiddenWrapper = (props) => { ); }; -export default HiddenWrapper; +export default injectIntl(HiddenWrapper); HiddenWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/NumberWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/NumberWrapper.jsx index 069b98b..4e32a00 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/NumberWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/NumberWrapper.jsx @@ -1,9 +1,17 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const NumberWrapper = (props) => { const { id, @@ -14,6 +22,8 @@ const NumberWrapper = (props) => { isDisabled, title, description, + required, + intl, } = props; const ref = useRef(); @@ -28,6 +38,8 @@ const NumberWrapper = (props) => { label={title} description={description} type="number" + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} placeholder={placeholder} onChange={(value) => onChange(id, value === '' ? undefined : value)} @@ -38,7 +50,7 @@ const NumberWrapper = (props) => { ); }; -export default NumberWrapper; +export default injectIntl(NumberWrapper); NumberWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/RadioGroupWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/RadioGroupWrapper.jsx index a301d3b..2c648ef 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/RadioGroupWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/RadioGroupWrapper.jsx @@ -1,9 +1,17 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const RadioGroupWrapper = (props) => { const { id, @@ -14,6 +22,8 @@ const RadioGroupWrapper = (props) => { isDisabled, title, description, + required, + intl, } = props; const ref = useRef(); @@ -31,6 +41,8 @@ const RadioGroupWrapper = (props) => { value={value || undefined} label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} onChange={(value) => onChange(id, value === '' ? undefined : value)} ref={ref} @@ -44,7 +56,7 @@ const RadioGroupWrapper = (props) => { ); }; -export default RadioGroupWrapper; +export default injectIntl(RadioGroupWrapper); RadioGroupWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/SelectWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/SelectWrapper.jsx index 52fe608..5065399 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/SelectWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/SelectWrapper.jsx @@ -1,9 +1,17 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const SelectWrapper = (props) => { const { id, @@ -14,6 +22,8 @@ const SelectWrapper = (props) => { isDisabled, title, description, + required, + intl, } = props; const ref = useRef(); @@ -33,6 +43,8 @@ const SelectWrapper = (props) => { } label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} onChange={(value) => onChange(id, value.value)} ref={ref} @@ -46,7 +58,7 @@ const SelectWrapper = (props) => { ); }; -export default SelectWrapper; +export default injectIntl(SelectWrapper); SelectWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TextWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TextWrapper.jsx index dc68289..0fff083 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TextWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TextWrapper.jsx @@ -1,9 +1,17 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const TextWrapper = (props) => { const { id, @@ -16,6 +24,8 @@ const TextWrapper = (props) => { isDisabled, title, description, + required, + intl, } = props; const ref = useRef(); @@ -29,6 +39,8 @@ const TextWrapper = (props) => { value={value || ''} label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} placeholder={placeholder} onChange={(value) => onChange(id, value === '' ? undefined : value)} @@ -41,7 +53,7 @@ const TextWrapper = (props) => { ); }; -export default TextWrapper; +export default injectIntl(TextWrapper); TextWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TextareaWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TextareaWrapper.jsx index 10bc391..c1ecd03 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TextareaWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TextareaWrapper.jsx @@ -1,9 +1,17 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const TextareaWrapper = (props) => { const { id, @@ -16,6 +24,8 @@ const TextareaWrapper = (props) => { isDisabled, title, description, + required, + intl, } = props; const ref = useRef(); @@ -29,6 +39,8 @@ const TextareaWrapper = (props) => { value={value || ''} label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} placeholder={placeholder} onChange={(value) => onChange(id, value === '' ? undefined : value)} @@ -41,7 +53,7 @@ const TextareaWrapper = (props) => { ); }; -export default TextareaWrapper; +export default injectIntl(TextareaWrapper); TextareaWrapper.propTypes = { id: PropTypes.string.isRequired, diff --git a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TimeWrapper.jsx b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TimeWrapper.jsx index b202bdb..1ebbf44 100644 --- a/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TimeWrapper.jsx +++ b/frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TimeWrapper.jsx @@ -1,12 +1,29 @@ import { useRef } from 'react'; import PropTypes from 'prop-types'; import config from '@plone/volto/registry'; +import { defineMessages, injectIntl } from 'react-intl'; import FormFieldWrapper from './FormFieldWrapper'; +const messages = defineMessages({ + required: { + id: 'Required', + defaultMessage: 'Required', + }, +}); + const TimeWrapper = (props) => { - const { id, value, onChange, onClick, isDisabled, title, description } = - props; + const { + id, + value, + onChange, + onClick, + isDisabled, + title, + description, + required, + intl, + } = props; const ref = useRef(); const Widget = config.blocks.blocksConfig.schemaForm.innerWidgets.time; @@ -19,6 +36,8 @@ const TimeWrapper = (props) => { value={value || ''} label={title} description={description} + isRequired={required} + labelRequired={intl.formatMessage(messages.required)} disabled={isDisabled} onChange={(value) => onChange(id, value === '' ? undefined : value)} ref={ref} @@ -28,7 +47,7 @@ const TimeWrapper = (props) => { ); }; -export default TimeWrapper; +export default injectIntl(TimeWrapper); TimeWrapper.propTypes = { id: PropTypes.string.isRequired,