Skip to content

Commit 4905497

Browse files
rvsiarvsia
authored
Merge pull request #659 from rvsia/morePF4customization
fix(pf4): allow more customization
2 parents 5d264eb + c601735 commit 4905497

File tree

16 files changed

+103
-74
lines changed

16 files changed

+103
-74
lines changed

‎packages/pf4-component-mapper/src/common/form-group.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import PropTypes from 'prop-types';
44

55
import showError from './show-error';
66

7-
const FormGroup = ({ label, isRequired, helperText, meta, description, hideLabel, children, id }) => (
7+
const FormGroup = ({ label, isRequired, helperText, meta, description, hideLabel, children, id, FormGroupProps }) => (
88
<Pf4FormGroup
99
isRequired={isRequired}
1010
label={!hideLabel && label}
1111
fieldId={id}
1212
helperText={helperText}
1313
helperTextInvalid={meta.error}
1414
{...showError(meta)}
15+
{...FormGroupProps}
1516
>
1617
{description && (
1718
<TextContent>
@@ -30,12 +31,8 @@ FormGroup.propTypes = {
3031
description: PropTypes.node,
3132
hideLabel: PropTypes.bool,
3233
id: PropTypes.string.isRequired,
33-
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
34-
};
35-
36-
FormGroup.defaultProps = {
37-
isRequired: false,
38-
description: undefined
34+
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired,
35+
FormGroupProps: PropTypes.object
3936
};
4037

4138
export default FormGroup;

‎packages/pf4-component-mapper/src/files/checkbox.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
2-
import { CheckboxProps as PfCheckboxProps, FormGroupProps } from '@patternfly/react-core';
2+
import { CheckboxProps as PfCheckboxProps } from '@patternfly/react-core';
33
import { ReactNode } from "react";
4+
import FormGroupProps from "./form-group";
45

56
interface CheckboxOptions extends AnyObject {
67
label?: ReactNode;

‎packages/pf4-component-mapper/src/files/checkbox.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,17 @@ import { Checkbox as Pf4Checkbox } from '@patternfly/react-core';
77
import IsRequired from '../common/is-required';
88

99
const SingleCheckbox = (props) => {
10-
const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
10+
const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(props);
1111
return (
12-
<FormGroup isRequired={isRequired} helperText={helperText} meta={meta} description={description} hideLabel id={id || input.name}>
12+
<FormGroup
13+
isRequired={isRequired}
14+
helperText={helperText}
15+
meta={meta}
16+
description={description}
17+
hideLabel
18+
id={id || input.name}
19+
FormGroupProps={FormGroupProps}
20+
>
1321
<Pf4Checkbox
1422
isChecked={input.checked}
1523
{...input}
@@ -30,7 +38,8 @@ SingleCheckbox.propTypes = {
3038
helperText: PropTypes.node,
3139
description: PropTypes.node,
3240
isDisabled: PropTypes.bool,
33-
id: PropTypes.string
41+
id: PropTypes.string,
42+
FormGroupProps: PropTypes.object
3443
};
3544

3645
const Checkbox = ({ options, ...props }) => (options ? <MultipleChoiceList options={options} {...props} /> : <SingleCheckbox {...props} />);

‎packages/pf4-component-mapper/src/files/date-picker.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ import FormGroup from '../common/form-group';
66
import showError from '../common/show-error';
77

88
const DatePicker = (props) => {
9-
const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
9+
const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(
10+
props
11+
);
1012
return (
1113
<FormGroup
1214
label={label}
@@ -16,8 +18,9 @@ const DatePicker = (props) => {
1618
description={description}
1719
hideLabel={hideLabel}
1820
id={id || input.name}
21+
FormGroupProps={FormGroupProps}
1922
>
20-
<TextInput {...input} {...rest} type="date" id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} {...showError(meta)} />
23+
<TextInput {...input} {...showError(meta)} {...rest} type="date" id={id || input.name} isReadOnly={isReadOnly} isDisabled={isDisabled} />
2124
</FormGroup>
2225
);
2326
};
@@ -30,7 +33,8 @@ DatePicker.propTypes = {
3033
description: PropTypes.node,
3134
hideLabel: PropTypes.bool,
3235
isDisabled: PropTypes.bool,
33-
id: PropTypes.string
36+
id: PropTypes.string,
37+
FormGroupProps: PropTypes.object
3438
};
3539

3640
export default DatePicker;

‎packages/pf4-component-mapper/src/files/dual-list-select.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
22
import { ReactNode } from "react";
3-
import { FormGroupProps } from "@patternfly/react-core";
3+
import FormGroupProps from "./form-group";
44

55
export interface DualListSelectOption extends AnyObject {
66
value?: any;

‎packages/pf4-component-mapper/src/files/dual-list-select.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,8 @@ const DualList = ({
146146
filterValues,
147147
rightValues,
148148
handleValuesClick,
149-
renderStatus
149+
renderStatus,
150+
FormGroupProps
150151
}) => (
151152
<FormGroup
152153
label={label}
@@ -156,6 +157,7 @@ const DualList = ({
156157
description={description}
157158
hideLabel={hideLabel}
158159
id={id || input.name}
160+
FormGroupProps={FormGroupProps}
159161
>
160162
<Grid>
161163
<Grid>
@@ -314,7 +316,8 @@ DualList.propTypes = {
314316
filterValues: PropTypes.func,
315317
rightValues: PropTypes.array,
316318
handleValuesClick: PropTypes.func,
317-
renderStatus: PropTypes.func
319+
renderStatus: PropTypes.func,
320+
FormGroupProps: PropTypes.object
318321
};
319322

320323
DualList.defaultProps = {

‎packages/pf4-component-mapper/src/files/form-group.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { ReactNode } from "react";
2+
import { FormGroupProps as PfFormGroupProps } from '@patternfly/react-core';
3+
24

35
export default interface FormGroupProps {
46
description?: ReactNode;
@@ -7,4 +9,5 @@ export default interface FormGroupProps {
79
label?: ReactNode;
810
isRequired?: boolean;
911
helperText?: ReactNode;
12+
FormGroupProps?: PfFormGroupProps;
1013
}

‎packages/pf4-component-mapper/src/files/radio.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const Radio = ({ name, options, type, ...props }) => {
3434
* You cannot assign type radio to PF4 radio buttons input. It will break and will not set input value, only checked property
3535
* It has to be reqular input and we have change the radio value manully to the option value
3636
*/
37-
const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id } = useFieldApi({
37+
const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps } = useFieldApi({
3838
name,
3939
...props
4040
});
@@ -47,6 +47,7 @@ const Radio = ({ name, options, type, ...props }) => {
4747
description={description}
4848
hideLabel={hideLabel}
4949
id={id || input.name}
50+
FormGroupProps={FormGroupProps}
5051
>
5152
{options.map((option) => (
5253
<RadioOption key={option.value} name={name} option={option} isReadOnly={isReadOnly} isDisabled={isDisabled} />
@@ -66,7 +67,8 @@ Radio.propTypes = {
6667
id: PropTypes.string,
6768
name: PropTypes.string.isRequired,
6869
options: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.node, value: PropTypes.any })).isRequired,
69-
type: PropTypes.any
70+
type: PropTypes.any,
71+
FormGroupProps: PropTypes.object
7072
};
7173

7274
export default Radio;

‎packages/pf4-component-mapper/src/files/select.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import FormGroup from '../common/form-group';
55
import DataDrivenSelect from '../common/select/select';
66

77
const Select = (props) => {
8-
const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
8+
const { label, isRequired, helperText, meta, description, hideLabel, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(
9+
props
10+
);
911
return (
1012
<FormGroup
1113
label={label}
@@ -15,6 +17,7 @@ const Select = (props) => {
1517
description={description}
1618
hideLabel={hideLabel}
1719
id={id || input.name}
20+
FormGroupProps={FormGroupProps}
1821
>
1922
<DataDrivenSelect {...input} {...rest} isDisabled={isDisabled || isReadOnly} />
2023
</FormGroup>
@@ -29,7 +32,8 @@ Select.propTypes = {
2932
description: PropTypes.node,
3033
hideLabel: PropTypes.bool,
3134
isDisabled: PropTypes.bool,
32-
id: PropTypes.string
35+
id: PropTypes.string,
36+
FormGroupProps: PropTypes.object
3337
};
3438

3539
export default Select;

‎packages/pf4-component-mapper/src/files/slider.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,18 @@ import { Badge, Grid, GridItem } from '@patternfly/react-core';
77
import './slider.scss';
88

99
const Slider = (props) => {
10-
const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, ...rest } = useFieldApi(props);
10+
const { label, isRequired, helperText, meta, description, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } = useFieldApi(props);
1111

1212
return (
13-
<FormGroup label={label} isRequired={isRequired} helperText={helperText} meta={meta} description={description} id={id || input.name}>
13+
<FormGroup
14+
label={label}
15+
isRequired={isRequired}
16+
helperText={helperText}
17+
meta={meta}
18+
description={description}
19+
id={id || input.name}
20+
FormGroupProps={FormGroupProps}
21+
>
1422
<Grid gutter="md">
1523
<GridItem span={10}>
1624
<input
@@ -36,7 +44,8 @@ Slider.propTypes = {
3644
helperText: PropTypes.node,
3745
description: PropTypes.node,
3846
isDisabled: PropTypes.bool,
39-
id: PropTypes.string
47+
id: PropTypes.string,
48+
FormGroupProps: PropTypes.object
4049
};
4150

4251
export default Slider;

0 commit comments

Comments
 (0)