Skip to content

Commit 345e705

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #1397 from data-driven-forms/pf4v5
feat(pf4): Upgrade to pf4v5 dependency
2 parents 7ea7d34 + f564fc1 commit 345e705

File tree

31 files changed

+426
-300
lines changed

31 files changed

+426
-300
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,5 +189,7 @@
189189
]
190190
]
191191
},
192-
"dependencies": {}
192+
"dependencies": {
193+
"ts-node": "^10.9.1"
194+
}
193195
}

‎packages/common/babel.config.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,22 @@ const mapper = {
66
TextVariants: 'Text',
77
ButtonVariant: 'Button',
88
TextListVariants: 'TextList',
9-
TextListItemVariants: 'TextListItem'
9+
TextListItemVariants: 'TextListItem',
10+
FlexItem: 'Flex',
11+
FormFieldGroup: 'Form',
12+
FormFieldGroupHeader: 'Form',
13+
FormHelperText: 'Form',
14+
FormGroup: 'Form',
15+
GridItem: 'Grid',
16+
TextContent: 'Text',
17+
HelperTextItem: 'HelperText',
18+
ActionGroup: 'Form',
19+
Tab: 'Tabs',
20+
TabTitleText: 'Tabs',
21+
WizardNavItem: 'Wizard',
22+
WizardNav: 'Wizard',
23+
WizardBody: 'Wizard',
24+
WizardHeader: 'Wizard'
1025
};
1126

1227
const blueprintMapper = {
@@ -93,7 +108,7 @@ const createPfReactTransform = (env) => [
93108
transform: (importName) => {
94109
let res;
95110
const files = glob.sync(
96-
path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/${env}/**/${mapper[importName] || importName}.js`)
111+
path.resolve(__dirname, `../{..,pf4-component-mapper}//node_modules/@patternfly/react-core/dist/dynamic/**/${mapper[importName] || importName}`)
97112
);
98113
if (files.length > 0) {
99114
res = files[0];
@@ -110,7 +125,7 @@ const createPfReactTransform = (env) => [
110125
},
111126
'@patternfly/react-icons': {
112127
transform: (importName) =>
113-
`@patternfly/react-icons/dist/${env}/icons/${importName
128+
`@patternfly/react-icons/dist/dynamic/icons/${importName
114129
.split(/(?=[A-Z])/)
115130
.join('-')
116131
.toLowerCase()}`,

‎packages/common/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"noErrorTruncation": true,
1111
"allowJs": true,
1212
"strict": true,
13-
"noEmit": true,
13+
"noEmit": true
1414
},
1515
"include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"],
1616
"exclude": ["./dist"]

‎packages/pf4-component-mapper/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,5 +91,6 @@ vendor
9191
!firebae.json
9292
!firebaseFunctions.js
9393
!scripts/
94+
!dynamic-import-transform.ts
9495

9596
.DS_STORE

‎packages/pf4-component-mapper/demo/demo-schemas/dual-list-schema.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import React from 'react';
12
import { componentTypes as components } from '@data-driven-forms/react-form-renderer';
3+
import { DualListSortButton } from '../../src';
24

35
const output = {
46
title: 'Testing dual list',
@@ -8,30 +10,33 @@ const output = {
810
component: components.DUAL_LIST_SELECT,
911
name: 'dual-list-select',
1012
label: 'choose favorite animal',
13+
isSortable: true,
14+
availableOptionsActions: [<DualListSortButton position="left" key="sort" />],
15+
chosenOptionsActions: [<DualListSortButton position="right" key="sort" />],
1116
options: [
1217
{
1318
value: 'cats',
14-
label: 'cats'
19+
label: 'cats',
1520
},
1621
{
1722
value: 'cats_1',
18-
label: 'cats_1'
23+
label: 'cats_1',
1924
},
2025
{
2126
value: 'cats_2',
22-
label: 'cats_2'
27+
label: 'cats_2',
2328
},
2429
{
2530
value: 'zebras',
26-
label: 'zebras'
31+
label: 'zebras',
2732
},
2833
{
2934
value: 'pigeons',
30-
label: 'pigeons'
31-
}
32-
]
33-
}
34-
]
35+
label: 'pigeons',
36+
},
37+
],
38+
},
39+
],
3540
};
3641

3742
export default output;

‎packages/pf4-component-mapper/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,15 @@
3030
"javascript"
3131
],
3232
"devDependencies": {
33-
"@patternfly/react-core": "^4.157.3",
34-
"@patternfly/react-icons": "^4.11.7"
33+
"@patternfly/react-core": "^5.0.0",
34+
"@patternfly/react-icons": "^5.0.0"
3535
},
3636
"peerDependencies": {
3737
"@data-driven-forms/react-form-renderer": "*",
38-
"@patternfly/react-core": "^4.157.3",
39-
"@patternfly/react-icons": "^4.11.7",
40-
"react": "^16.13.1 || ^17.0.2 || ^18.0.0",
41-
"react-dom": "^16.13.1 || ^17.0.2 || ^18.0.0"
38+
"@patternfly/react-core": "^5.0.0",
39+
"@patternfly/react-icons": "^5.0.0",
40+
"react": "^17.0.2 || ^18.0.0",
41+
"react-dom": "^17.0.2 || ^18.0.0"
4242
},
4343
"dependencies": {
4444
"@data-driven-forms/common": "*",

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ const DualList = (props) => {
5151
.filter((option) => (typeof option === 'object' ? value.includes(option.value) : value.includes(option)))
5252
.map((option) => option.label || option);
5353

54-
onListChange = (_newLeft, newRight) => input.onChange(newRight);
54+
onListChange = (_e, _newLeft, newRight) => {
55+
input.onChange(newRight);
56+
};
5557

5658
filterOption = (option, input) => (option.value ? option.value.includes(input) : option.includes(input));
5759
} else {
@@ -63,7 +65,9 @@ const DualList = (props) => {
6365
.filter((option) => (option.value ? value.includes(option.value) : value.includes(getValueFromNode(option))))
6466
.map((option) => option.label || option);
6567

66-
onListChange = (_newLeft, newRight) => input.onChange(newRight?.map(getValueFromNode));
68+
onListChange = (_e, _newLeft, newRight) => {
69+
input.onChange(newRight?.map(getValueFromNode));
70+
};
6771

6872
filterOption = (option, input) => (option.value ? option.value.includes(input) : getValueFromNode(option).includes(input));
6973
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const DualListTreeSelect = (props) => {
8484
const leftOptions = selectedOptions(options, value, false);
8585
const rightOptions = selectedOptions(options, value, true);
8686

87-
const onListChange = (_newLeft, newRight) => input.onChange(getValueFromSelected(newRight));
87+
const onListChange = (_e, _newLeft, newRight) => input.onChange(getValueFromSelected(newRight));
8888

8989
return (
9090
<FormGroup

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

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
11
import React from 'react';
2-
import { FormGroup as Pf4FormGroup, TextContent, Text } from '@patternfly/react-core';
2+
import { FormGroup as Pf4FormGroup, TextContent, Text, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
33
import PropTypes from 'prop-types';
44

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

7-
const FormGroup = ({ label, isRequired, helperText, meta, validateOnMount, description, hideLabel, children, id, FormGroupProps }) => (
8-
<Pf4FormGroup
9-
isRequired={isRequired}
10-
label={!hideLabel && label}
11-
fieldId={id}
12-
helperText={((meta.touched || validateOnMount) && meta.warning) || helperText}
13-
helperTextInvalid={meta.error || meta.submitError}
14-
{...showError(meta, validateOnMount)}
15-
{...FormGroupProps}
16-
>
17-
{description && (
18-
<TextContent>
19-
<Text component="small">{description}</Text>
20-
</TextContent>
21-
)}
22-
{children}
23-
</Pf4FormGroup>
24-
);
7+
const FormGroup = ({ label, isRequired, helperText, meta, validateOnMount, description, hideLabel, children, id, FormGroupProps }) => {
8+
const { validated } = showError(meta, validateOnMount);
9+
const validationInternal = (meta.touched || validateOnMount) && (meta.error || meta.submitError || meta.warning);
10+
return (
11+
<Pf4FormGroup isRequired={isRequired} label={!hideLabel && label} fieldId={id} aria-label={meta.error || meta.submitError} {...FormGroupProps}>
12+
{description && (
13+
<TextContent>
14+
<Text component="small">{description}</Text>
15+
</TextContent>
16+
)}
17+
{children}
18+
{(helperText || ['error', 'warning'].includes(validated)) && (
19+
<FormHelperText>
20+
<HelperText>
21+
<HelperTextItem variant={validated}>{validationInternal || helperText}</HelperTextItem>
22+
</HelperText>
23+
</FormHelperText>
24+
)}
25+
</Pf4FormGroup>
26+
);
27+
};
2528

2629
FormGroup.propTypes = {
2730
label: PropTypes.node,

‎packages/pf4-component-mapper/src/select/select/clear-indicator.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const ClearIndicator = ({ clearSelection }) => (
1010
clearSelection();
1111
event.stopPropagation();
1212
}}
13-
className="pf-c-button pf-m-plain pf-c-select__toggle-clear pf-u-p-0"
13+
className="pf-v5-c-button pf-v5-c-select__toggle-clear pf-v5-u-p-0"
1414
type="button"
1515
aria-label="Clear all"
1616
>

0 commit comments

Comments
 (0)