Update custom wrappers.

collective · Nov 28, 2024 · 5e49edb · 5e49edb
1 parent 6a07150
commit 5e49edb
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 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
@@ -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
@@ -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
@@ -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,16 +37,26 @@ 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()}
       />
     </FormFieldWrapper>
   );
 };
 
-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,