Skip to content

Commit 5e49edb

Browse files
robgietemarobgietema
committed
Update custom wrappers.
1 parent 6a07150 commit 5e49edb

File tree

12 files changed

+203
-21
lines changed

12 files changed

+203
-21
lines changed

‎frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxGroupWrapper.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import { useRef } from 'react';
22
import PropTypes from 'prop-types';
33
import config from '@plone/volto/registry';
4+
import { defineMessages, injectIntl } from 'react-intl';
45

56
import FormFieldWrapper from './FormFieldWrapper';
67

8+
const messages = defineMessages({
9+
required: {
10+
id: 'Required',
11+
defaultMessage: 'Required',
12+
},
13+
});
14+
715
const CheckboxGroupWrapper = (props) => {
816
const {
917
id,
@@ -14,6 +22,8 @@ const CheckboxGroupWrapper = (props) => {
1422
isDisabled,
1523
title,
1624
description,
25+
required,
26+
intl,
1727
} = props;
1828

1929
const ref = useRef();
@@ -32,6 +42,8 @@ const CheckboxGroupWrapper = (props) => {
3242
value={value || ''}
3343
label={title}
3444
description={description}
45+
isRequired={required}
46+
labelRequired={intl.formatMessage(messages.required)}
3547
disabled={isDisabled}
3648
onChange={(value) => onChange(id, value === '' ? undefined : value)}
3749
ref={ref}
@@ -45,7 +57,7 @@ const CheckboxGroupWrapper = (props) => {
4557
);
4658
};
4759

48-
export default CheckboxGroupWrapper;
60+
export default injectIntl(CheckboxGroupWrapper);
4961

5062
CheckboxGroupWrapper.propTypes = {
5163
id: PropTypes.string.isRequired,

‎frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/CheckboxWrapper.jsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
11
import { useRef } from 'react';
22
import PropTypes from 'prop-types';
33
import config from '@plone/volto/registry';
4+
import { defineMessages, injectIntl } from 'react-intl';
45

56
import FormFieldWrapper from './FormFieldWrapper';
67

8+
const messages = defineMessages({
9+
required: {
10+
id: 'Required',
11+
defaultMessage: 'Required',
12+
},
13+
});
14+
715
const CheckboxWrapper = (props) => {
8-
const { id, value, onChange, onClick, isDisabled, title, description } =
9-
props;
16+
const {
17+
id,
18+
value,
19+
onChange,
20+
onClick,
21+
isDisabled,
22+
title,
23+
description,
24+
required,
25+
intl,
26+
} = props;
1027

1128
const ref = useRef();
1229
const Widget = config.blocks.blocksConfig.schemaForm.innerWidgets.checkbox;
@@ -19,6 +36,8 @@ const CheckboxWrapper = (props) => {
1936
value={value || ''}
2037
label={title}
2138
description={description}
39+
isRequired={required}
40+
labelRequired={intl.formatMessage(messages.required)}
2241
disabled={isDisabled}
2342
onChange={(value) => onChange(id, value === '' ? undefined : value)}
2443
ref={ref}
@@ -28,7 +47,7 @@ const CheckboxWrapper = (props) => {
2847
);
2948
};
3049

31-
export default CheckboxWrapper;
50+
export default injectIntl(CheckboxWrapper);
3251

3352
CheckboxWrapper.propTypes = {
3453
id: PropTypes.string.isRequired,

‎frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/DatetimeWrapper.jsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
import { useRef } from 'react';
22
import PropTypes from 'prop-types';
33
import config from '@plone/volto/registry';
4+
import { defineMessages, injectIntl } from 'react-intl';
45

56
import FormFieldWrapper from './FormFieldWrapper';
67

8+
const messages = defineMessages({
9+
required: {
10+
id: 'Required',
11+
defaultMessage: 'Required',
12+
},
13+
});
14+
715
const DatetimeWrapper = (props) => {
8-
const { id, value, onChange, onClick, isDisabled, title, description } =
9-
props;
16+
const {
17+
id,
18+
value,
19+
onChange,
20+
onClick,
21+
isDisabled,
22+
title,
23+
description,
24+
widget,
25+
required,
26+
intl,
27+
} = props;
1028

1129
const ref = useRef();
1230
const Widget = config.blocks.blocksConfig.schemaForm.innerWidgets.datetime;
@@ -19,16 +37,26 @@ const DatetimeWrapper = (props) => {
1937
value={value || null}
2038
label={title}
2139
description={description}
40+
isRequired={required}
41+
labelRequired={intl.formatMessage(messages.required)}
2242
disabled={isDisabled}
23-
onChange={(value) => onChange(id, value === '' ? undefined : value)}
43+
isDateOnly={widget === 'date'}
44+
onChange={(newValue) => {
45+
console.log(newValue);
46+
return onChange(id, newValue === '' ? undefined : newValue);
47+
}}
48+
onChangeTime={(value) => {
49+
console.log(newValue);
50+
return onChange(id, newValue === '' ? undefined : newValue);
51+
}}
2452
ref={ref}
2553
onClick={() => onClick()}
2654
/>
2755
</FormFieldWrapper>
2856
);
2957
};
3058

31-
export default DatetimeWrapper;
59+
export default injectIntl(DatetimeWrapper);
3260

3361
DatetimeWrapper.propTypes = {
3462
id: PropTypes.string.isRequired,

‎frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/EmailWrapper.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import { useRef } from 'react';
22
import PropTypes from 'prop-types';
33
import config from '@plone/volto/registry';
4+
import { defineMessages, injectIntl } from 'react-intl';
45

56
import FormFieldWrapper from './FormFieldWrapper';
67

8+
const messages = defineMessages({
9+
required: {
10+
id: 'Required',
11+
defaultMessage: 'Required',
12+
},
13+
});
14+
715
const EmailWrapper = (props) => {
816
const {
917
id,
@@ -15,6 +23,8 @@ const EmailWrapper = (props) => {
1523
isDisabled,
1624
title,
1725
description,
26+
required,
27+
intl,
1828
} = props;
1929

2030
const ref = useRef();
@@ -28,6 +38,8 @@ const EmailWrapper = (props) => {
2838
value={value || ''}
2939
label={title}
3040
description={description}
41+
isRequired={required}
42+
labelRequired={intl.formatMessage(messages.required)}
3143
disabled={isDisabled}
3244
type="email"
3345
onChange={(value) => onChange(id, value === '' ? undefined : value)}
@@ -40,7 +52,7 @@ const EmailWrapper = (props) => {
4052
);
4153
};
4254

43-
export default EmailWrapper;
55+
export default injectIntl(EmailWrapper);
4456

4557
EmailWrapper.propTypes = {
4658
id: PropTypes.string.isRequired,

‎frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/FileWrapper.jsx‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,30 @@ import { useRef } from 'react';
22
import PropTypes from 'prop-types';
33
import config from '@plone/volto/registry';
44
import { readAsDataURL } from 'promise-file-reader';
5+
import { defineMessages, injectIntl } from 'react-intl';
56

67
import FormFieldWrapper from './FormFieldWrapper';
78

9+
const messages = defineMessages({
10+
required: {
11+
id: 'Required',
12+
defaultMessage: 'Required',
13+
},
14+
});
15+
816
const FileWrapper = (props) => {
9-
const { id, value, onChange, isDisabled, title, description, accept, size } =
10-
props;
17+
const {
18+
id,
19+
value,
20+
onChange,
21+
isDisabled,
22+
title,
23+
description,
24+
accept,
25+
size,
26+
required,
27+
intl,
28+
} = props;
1129

1230
const ref = useRef();
1331
const Widget = config.blocks.blocksConfig.schemaForm.innerWidgets.file;
@@ -20,6 +38,8 @@ const FileWrapper = (props) => {
2038
labelFile={value?.filename || ''}
2139
label={title}
2240
description={description}
41+
isRequired={required}
42+
labelRequired={intl.formatMessage(messages.required)}
2343
disabled={isDisabled}
2444
accept={accept}
2545
size={size}
@@ -45,7 +65,7 @@ const FileWrapper = (props) => {
4565
);
4666
};
4767

48-
export default FileWrapper;
68+
export default injectIntl(FileWrapper);
4969

5070
FileWrapper.propTypes = {
5171
id: PropTypes.string.isRequired,

‎frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/HiddenWrapper.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import { useRef } from 'react';
22
import PropTypes from 'prop-types';
33
import config from '@plone/volto/registry';
4+
import { defineMessages, injectIntl } from 'react-intl';
45

56
import FormFieldWrapper from './FormFieldWrapper';
67

8+
const messages = defineMessages({
9+
required: {
10+
id: 'Required',
11+
defaultMessage: 'Required',
12+
},
13+
});
14+
715
const HiddenWrapper = (props) => {
816
const {
917
id,
@@ -15,6 +23,8 @@ const HiddenWrapper = (props) => {
1523
title,
1624
description,
1725
onEdit,
26+
required,
27+
intl,
1828
} = props;
1929

2030
const ref = useRef();
@@ -28,6 +38,8 @@ const HiddenWrapper = (props) => {
2838
value={value || ''}
2939
label={title}
3040
description={description}
41+
isRequired={required}
42+
labelRequired={intl.formatMessage(messages.required)}
3143
disabled={isDisabled}
3244
placeholder={placeholder}
3345
onChange={(value) => onChange(id, value === '' ? undefined : value)}
@@ -47,7 +59,7 @@ const HiddenWrapper = (props) => {
4759
);
4860
};
4961

50-
export default HiddenWrapper;
62+
export default injectIntl(HiddenWrapper);
5163

5264
HiddenWrapper.propTypes = {
5365
id: PropTypes.string.isRequired,

‎frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/NumberWrapper.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import { useRef } from 'react';
22
import PropTypes from 'prop-types';
33
import config from '@plone/volto/registry';
4+
import { defineMessages, injectIntl } from 'react-intl';
45

56
import FormFieldWrapper from './FormFieldWrapper';
67

8+
const messages = defineMessages({
9+
required: {
10+
id: 'Required',
11+
defaultMessage: 'Required',
12+
},
13+
});
14+
715
const NumberWrapper = (props) => {
816
const {
917
id,
@@ -14,6 +22,8 @@ const NumberWrapper = (props) => {
1422
isDisabled,
1523
title,
1624
description,
25+
required,
26+
intl,
1727
} = props;
1828

1929
const ref = useRef();
@@ -28,6 +38,8 @@ const NumberWrapper = (props) => {
2838
label={title}
2939
description={description}
3040
type="number"
41+
isRequired={required}
42+
labelRequired={intl.formatMessage(messages.required)}
3143
disabled={isDisabled}
3244
placeholder={placeholder}
3345
onChange={(value) => onChange(id, value === '' ? undefined : value)}
@@ -38,7 +50,7 @@ const NumberWrapper = (props) => {
3850
);
3951
};
4052

41-
export default NumberWrapper;
53+
export default injectIntl(NumberWrapper);
4254

4355
NumberWrapper.propTypes = {
4456
id: PropTypes.string.isRequired,

‎frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/RadioGroupWrapper.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import { useRef } from 'react';
22
import PropTypes from 'prop-types';
33
import config from '@plone/volto/registry';
4+
import { defineMessages, injectIntl } from 'react-intl';
45

56
import FormFieldWrapper from './FormFieldWrapper';
67

8+
const messages = defineMessages({
9+
required: {
10+
id: 'Required',
11+
defaultMessage: 'Required',
12+
},
13+
});
14+
715
const RadioGroupWrapper = (props) => {
816
const {
917
id,
@@ -14,6 +22,8 @@ const RadioGroupWrapper = (props) => {
1422
isDisabled,
1523
title,
1624
description,
25+
required,
26+
intl,
1727
} = props;
1828

1929
const ref = useRef();
@@ -31,6 +41,8 @@ const RadioGroupWrapper = (props) => {
3141
value={value || undefined}
3242
label={title}
3343
description={description}
44+
isRequired={required}
45+
labelRequired={intl.formatMessage(messages.required)}
3446
disabled={isDisabled}
3547
onChange={(value) => onChange(id, value === '' ? undefined : value)}
3648
ref={ref}
@@ -44,7 +56,7 @@ const RadioGroupWrapper = (props) => {
4456
);
4557
};
4658

47-
export default RadioGroupWrapper;
59+
export default injectIntl(RadioGroupWrapper);
4860

4961
RadioGroupWrapper.propTypes = {
5062
id: PropTypes.string.isRequired,

0 commit comments

Comments
 (0)