Skip to content

Commit f6cee13

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #126 from rvsia/fix-pf4switch
Fix pf4switch
2 parents 41afb22 + 6017353 commit f6cee13

File tree

7 files changed

+197
-7
lines changed

7 files changed

+197
-7
lines changed

‎packages/pf4-component-mapper/demo/demo-schemas/sandbox.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ const output = {
3737
fields: [
3838
{
3939
name: 'switch_1',
40-
label: 'Switch',
40+
onText: 'Switch is on',
41+
offText: 'Switch is off',
4142
title: 'Switch',
4243
component: components.SWITCH,
4344
},

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
"@babel/preset-env": "^7.1.6",
2323
"@babel/preset-react": "^7.0.0",
2424
"@data-driven-forms/react-form-renderer": "*",
25-
"@patternfly/react-core": "^3.16.10",
26-
"@patternfly/react-icons": "^3.9.2",
25+
"@patternfly/react-core": "^3.104.0",
26+
"@patternfly/react-icons": "^3.14.2",
2727
"@semantic-release/git": "^7.0.5",
2828
"@semantic-release/npm": "^5.1.1",
2929
"babel-core": "^7.0.0-bridge.0",
@@ -75,11 +75,11 @@
7575
},
7676
"peerDependencies": {
7777
"@data-driven-forms/react-form-renderer": "^1.11.0",
78-
"@patternfly/react-core": "^3.75.2",
79-
"@patternfly/react-icons": "^3.9.2"
78+
"@patternfly/react-core": "^3.104.0",
79+
"@patternfly/react-icons": "^3.14.2"
8080
},
8181
"dependencies": {
82-
"@patternfly/patternfly-next": "^1.0.87",
82+
"@patternfly/patternfly-next": "^1.0.175",
8383
"react-select": "^3.0.4"
8484
},
8585
"postpublish": "export RELEASE_DEMO=true"

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@ const selectComponent = ({
6767
onChange={ (element, state) => input.onChange(state) }
6868
isChecked={ !!input.value }
6969
isDisabled={ isDisabled || isReadOnly }
70-
label={ rest.label }
70+
label={ onText || rest.label }
71+
labelOff={ offText || rest.label }
7172
/>;},
7273
})[componentType];
7374

‎packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -824,6 +824,7 @@ exports[`FormFields should render Switch correctly 1`] = `
824824
"isChecked": false,
825825
"isDisabled": undefined,
826826
"label": undefined,
827+
"labelOff": undefined,
827828
"name": "Name of the field",
828829
"onChange": [Function],
829830
"value": "",
@@ -1963,6 +1964,7 @@ exports[`FormFields should render disabled Switch correctly 1`] = `
19631964
"isChecked": false,
19641965
"isDisabled": true,
19651966
"label": undefined,
1967+
"labelOff": undefined,
19661968
"name": "Name of the field",
19671969
"onChange": [Function],
19681970
"value": "",
@@ -2130,6 +2132,7 @@ exports[`FormFields should render disabled Switch correctly 2`] = `
21302132
"isChecked": false,
21312133
"isDisabled": true,
21322134
"label": undefined,
2135+
"labelOff": undefined,
21332136
"name": "Name of the field",
21342137
"onChange": [Function],
21352138
"value": "",
@@ -2362,3 +2365,161 @@ exports[`FormFields should render touched TextField id correctly 1`] = `
23622365
</FieldInterface>
23632366
</TextField>
23642367
`;
2368+
2369+
exports[`FormFields should render with onText/OffText Switch correctly 1`] = `
2370+
<SwitchField
2371+
FieldProvider={[Function]}
2372+
dataType="someDataType"
2373+
id="someIdKey"
2374+
input={
2375+
Object {
2376+
"name": "Name of the field",
2377+
"value": "",
2378+
}
2379+
}
2380+
meta={
2381+
Object {
2382+
"error": false,
2383+
"touched": false,
2384+
}
2385+
}
2386+
offText="Turned off"
2387+
onText="I am on"
2388+
>
2389+
<FieldProvider
2390+
dataType="someDataType"
2391+
id="someIdKey"
2392+
input={
2393+
Object {
2394+
"name": "Name of the field",
2395+
"value": "",
2396+
}
2397+
}
2398+
meta={
2399+
Object {
2400+
"error": false,
2401+
"touched": false,
2402+
}
2403+
}
2404+
offText="Turned off"
2405+
onText="I am on"
2406+
render={[Function]}
2407+
>
2408+
<div>
2409+
<FieldInterface
2410+
componentType="switch-field"
2411+
dataType="someDataType"
2412+
hideLabel={true}
2413+
id="someIdKey"
2414+
input={
2415+
Object {
2416+
"name": "Name of the field",
2417+
"value": "",
2418+
}
2419+
}
2420+
meta={
2421+
Object {
2422+
"error": false,
2423+
"touched": false,
2424+
}
2425+
}
2426+
name="Name of the field"
2427+
offText="Turned off"
2428+
onText="I am on"
2429+
>
2430+
<FormGroup
2431+
fieldId="someIdKey"
2432+
helperTextInvalid={false}
2433+
isValid={true}
2434+
label={false}
2435+
>
2436+
<div
2437+
className="pf-c-form__group"
2438+
>
2439+
<Component
2440+
id="someIdKey"
2441+
isChecked={false}
2442+
label="I am on"
2443+
labelOff="Turned off"
2444+
name="Name of the field"
2445+
onChange={[Function]}
2446+
value=""
2447+
>
2448+
<ComponentWithOuia
2449+
component={[Function]}
2450+
componentProps={
2451+
Object {
2452+
"id": "someIdKey",
2453+
"isChecked": false,
2454+
"isDisabled": undefined,
2455+
"label": "I am on",
2456+
"labelOff": "Turned off",
2457+
"name": "Name of the field",
2458+
"onChange": [Function],
2459+
"value": "",
2460+
}
2461+
}
2462+
consumerContext={null}
2463+
>
2464+
<Switch
2465+
aria-label=""
2466+
className=""
2467+
id="someIdKey"
2468+
isChecked={false}
2469+
isDisabled={false}
2470+
label="I am on"
2471+
labelOff="Turned off"
2472+
name="Name of the field"
2473+
onChange={[Function]}
2474+
ouiaContext={
2475+
Object {
2476+
"isOuia": false,
2477+
"ouiaId": null,
2478+
}
2479+
}
2480+
value=""
2481+
>
2482+
<label
2483+
className="pf-c-switch"
2484+
htmlFor="someIdKey"
2485+
>
2486+
<input
2487+
aria-label=""
2488+
aria-labelledby="someIdKey-on"
2489+
className="pf-c-switch__input"
2490+
defaultChecked={false}
2491+
disabled={false}
2492+
id="someIdKey"
2493+
name="Name of the field"
2494+
onChange={[Function]}
2495+
type="checkbox"
2496+
value=""
2497+
/>
2498+
<span
2499+
className="pf-c-switch__toggle"
2500+
/>
2501+
<span
2502+
aria-hidden="true"
2503+
className="pf-c-switch__label pf-m-on"
2504+
id="someIdKey-on"
2505+
>
2506+
I am on
2507+
</span>
2508+
<span
2509+
aria-hidden="true"
2510+
className="pf-c-switch__label pf-m-off"
2511+
id="someIdKey-off"
2512+
>
2513+
Turned off
2514+
</span>
2515+
</label>
2516+
</Switch>
2517+
</ComponentWithOuia>
2518+
</Component>
2519+
</div>
2520+
</FormGroup>
2521+
</FieldInterface>
2522+
</div>
2523+
</FieldProvider>
2524+
</SwitchField>
2525+
`;

‎packages/pf4-component-mapper/src/tests/form-fields.test.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,4 +167,14 @@ describe('FormFields', () => {
167167
);
168168
expect(toJson(wrapper)).toMatchSnapshot();
169169
});
170+
171+
it('should render with onText/OffText Switch correctly', () => {
172+
const wrapper = mount(
173+
<SwitchField { ...props } onText="I am on" offText="Turned off" FieldProvider={ FieldProvider }/>
174+
);
175+
176+
expect(wrapper.find('.pf-m-on').text().includes('I am on')).toEqual(true);
177+
expect(wrapper.find('.pf-m-on').text().includes('Turned off')).toEqual(false);
178+
expect(toJson(wrapper)).toMatchSnapshot();
179+
});
170180
});

‎packages/react-renderer-demo/src/common/examples-definitions.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,14 @@ export const baseExamples = [{
182182
title: 'Label',
183183
component: 'input',
184184
value: 'Switch',
185+
}, {
186+
name: 'onText',
187+
title: 'onText',
188+
component: 'input',
189+
}, {
190+
name: 'offText',
191+
title: 'offText',
192+
component: 'input',
185193
},
186194
],
187195
},

‎packages/react-renderer-demo/src/docs-components/component-api.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,15 @@ All those components provides a shared group of props:
8585

8686
<ExampleLink to='radio' />
8787

88+
#### Switch
89+
90+
|Prop|Type|Description|
91+
|----|:--:|----------:|
92+
|onText|string|A text which is shown when the switch is on (checked)|
93+
|offText|string|A text which is shown when the switch is off|
94+
95+
<ExampleLink to='switch-field' />
96+
8897
#### Datepicker
8998

9099
This component is using [react-day-picker](https://react-day-picker.js.org/docs/) as a base component.

0 commit comments

Comments
 (0)