Skip to content

Commit ce3c764

Browse files
rvsiarvsia
committed
feat(pf3): add slider component
1 parent 1814749 commit ce3c764

File tree

6 files changed

+346
-13
lines changed

6 files changed

+346
-13
lines changed

‎packages/pf3-component-mapper/src/files/component-mapper.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import PlainText from './plain-text';
1313
import Radio from './radio';
1414
import Button from './button';
1515
import { InputAddonButtonGroup, InputAddonGroup } from './input-group-fields';
16+
import Slider from './slider';
1617

1718
const componentMapper = {
1819
[componentTypes.BUTTON]: Button,
@@ -29,7 +30,8 @@ const componentMapper = {
2930
[componentTypes.WIZARD]: Wizard,
3031
[componentTypes.PLAIN_TEXT]: PlainText,
3132
[componentTypes.INPUT_ADDON_BUTTON_GROUP]: InputAddonButtonGroup,
32-
[componentTypes.INPUT_ADDON_GROUP]: InputAddonGroup
33+
[componentTypes.INPUT_ADDON_GROUP]: InputAddonGroup,
34+
[componentTypes.SLIDER]: Slider
3335
};
3436

3537
export default componentMapper;
@@ -45,7 +47,8 @@ export const components = {
4547
DatePicker,
4648
Switch,
4749
Wizard,
48-
PlainText
50+
PlainText,
51+
Slider
4952
};
5053

5154
export const rawComponents = {

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
5+
6+
import { Slider as PF3Slider } from 'patternfly-react';
7+
8+
import FormGroup from '../common/form-wrapper';
9+
10+
const Slider = (props) => {
11+
const {
12+
meta,
13+
input,
14+
sliderInput,
15+
validateOnMount,
16+
label,
17+
sliderLabel,
18+
hideLabel,
19+
isRequired,
20+
helperText,
21+
description,
22+
inputAddon,
23+
...rest
24+
} = useFieldApi(props);
25+
26+
return (
27+
<FormGroup
28+
meta={meta}
29+
validateOnMount={validateOnMount}
30+
label={label}
31+
hideLabel={hideLabel}
32+
isRequired={isRequired}
33+
helperText={helperText}
34+
description={description}
35+
inputAddon={inputAddon}
36+
>
37+
<PF3Slider {...input} label={sliderLabel} input={sliderInput} {...rest} value={input.value || rest.min} onSlide={input.onChange} />
38+
</FormGroup>
39+
);
40+
};
41+
42+
Slider.propTypes = {
43+
validateOnMount: PropTypes.bool,
44+
label: PropTypes.node,
45+
hideLabel: PropTypes.bool,
46+
isRequired: PropTypes.bool,
47+
helperText: PropTypes.node,
48+
description: PropTypes.node,
49+
placeholder: PropTypes.string,
50+
inputAddon: PropTypes.shape({ fields: PropTypes.array }),
51+
sliderLabel: PropTypes.node,
52+
sliderInput: PropTypes.bool
53+
};
54+
55+
export default Slider;

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

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,236 @@ exports[`FormFields <Radio /> should render correctly 1`] = `
375375
</RenderWithProvider>
376376
`;
377377

378+
exports[`FormFields <Slider /> should render correctly 1`] = `
379+
<RenderWithProvider>
380+
<ReactFinalForm
381+
onSubmit={[Function]}
382+
>
383+
<Slider
384+
helperText="(kms)"
385+
label="Distance"
386+
max={100}
387+
min={10}
388+
name="slider"
389+
>
390+
<Pf3FormGroup
391+
helperText="(kms)"
392+
label="Distance"
393+
meta={
394+
Object {
395+
"active": false,
396+
"data": Object {},
397+
"dirty": false,
398+
"dirtySinceLastSubmit": false,
399+
"error": undefined,
400+
"initial": undefined,
401+
"invalid": false,
402+
"length": undefined,
403+
"modified": false,
404+
"pristine": true,
405+
"submitError": undefined,
406+
"submitFailed": false,
407+
"submitSucceeded": false,
408+
"submitting": false,
409+
"touched": false,
410+
"valid": true,
411+
"validating": false,
412+
"visited": false,
413+
}
414+
}
415+
>
416+
<FormGroup
417+
bsClass="form-group"
418+
validationState={null}
419+
>
420+
<div
421+
className="form-group"
422+
>
423+
<ControlLabel
424+
bsClass="control-label"
425+
srOnly={false}
426+
>
427+
<label
428+
className="control-label"
429+
>
430+
Distance
431+
<FieldLevelHelp
432+
buttonClass=""
433+
content="(kms)"
434+
placement="top"
435+
rootClose={true}
436+
>
437+
<OverlayTrigger
438+
defaultOverlayShown={false}
439+
overlay={
440+
<Popover
441+
bsClass="popover"
442+
id="popover"
443+
placement="right"
444+
>
445+
(kms)
446+
</Popover>
447+
}
448+
placement="top"
449+
rootClose={true}
450+
trigger={
451+
Array [
452+
"click",
453+
]
454+
}
455+
>
456+
<Button
457+
active={false}
458+
block={false}
459+
bsClass="btn"
460+
bsStyle="link"
461+
className="popover-pf-info"
462+
disabled={false}
463+
onClick={[Function]}
464+
>
465+
<button
466+
className="popover-pf-info btn btn-link"
467+
disabled={false}
468+
onClick={[Function]}
469+
type="button"
470+
>
471+
<Icon
472+
name="info"
473+
type="pf"
474+
>
475+
<PatternflyIcon
476+
className=""
477+
name="info"
478+
>
479+
<span
480+
aria-hidden="true"
481+
className="pficon pficon-info"
482+
/>
483+
</PatternflyIcon>
484+
</Icon>
485+
</button>
486+
</Button>
487+
</OverlayTrigger>
488+
</FieldLevelHelp>
489+
</label>
490+
</ControlLabel>
491+
<Slider
492+
dropdownList={null}
493+
icon={null}
494+
id={null}
495+
input={false}
496+
inputFormat=""
497+
label={null}
498+
labelClass={null}
499+
max={100}
500+
min={10}
501+
name="slider"
502+
onBlur={[Function]}
503+
onChange={[Function]}
504+
onFocus={[Function]}
505+
onSlide={[Function]}
506+
orientation="horizontal"
507+
sliderClass={null}
508+
step={1}
509+
toolTip={false}
510+
value={10}
511+
>
512+
<div>
513+
<div
514+
className="col-xs-12 col-sm-12 col-md-12"
515+
>
516+
<Boundaries
517+
dropdownList={null}
518+
icon={null}
519+
id={null}
520+
input={false}
521+
inputFormat=""
522+
label={null}
523+
labelClass={null}
524+
max={100}
525+
min={10}
526+
name="slider"
527+
onBlur={[Function]}
528+
onChange={[Function]}
529+
onFocus={[Function]}
530+
onSlide={[Function]}
531+
orientation="horizontal"
532+
reversed={false}
533+
showBoundaries={false}
534+
slider={
535+
<BootstrapSlider
536+
dropdownList={null}
537+
formatter={[Function]}
538+
icon={null}
539+
id={null}
540+
input={false}
541+
inputFormat=""
542+
label={null}
543+
labelClass={null}
544+
max={100}
545+
min={10}
546+
name="slider"
547+
onBlur={[Function]}
548+
onChange={[Function]}
549+
onFocus={[Function]}
550+
onSlide={[Function]}
551+
orientation="horizontal"
552+
sliderClass={null}
553+
step={1}
554+
ticks_labels={Array []}
555+
toolTip={false}
556+
value={10}
557+
/>
558+
}
559+
sliderClass={null}
560+
step={1}
561+
toolTip={false}
562+
value={10}
563+
>
564+
<div
565+
className="slider-pf"
566+
>
567+
<BootstrapSlider
568+
dropdownList={null}
569+
formatter={[Function]}
570+
icon={null}
571+
id={null}
572+
input={false}
573+
inputFormat=""
574+
label={null}
575+
labelClass={null}
576+
max={100}
577+
min={10}
578+
name="slider"
579+
onBlur={[Function]}
580+
onChange={[Function]}
581+
onFocus={[Function]}
582+
onSlide={[Function]}
583+
orientation="horizontal"
584+
sliderClass={null}
585+
step={1}
586+
ticks_labels={Array []}
587+
toolTip={false}
588+
value={10}
589+
>
590+
<input
591+
className="slider-pf"
592+
type="range"
593+
/>
594+
</BootstrapSlider>
595+
</div>
596+
</Boundaries>
597+
</div>
598+
</div>
599+
</Slider>
600+
</div>
601+
</FormGroup>
602+
</Pf3FormGroup>
603+
</Slider>
604+
</ReactFinalForm>
605+
</RenderWithProvider>
606+
`;
607+
378608
exports[`FormFields <Switch /> should render Switch correctly 1`] = `
379609
<RenderWithProvider
380610
value={

0 commit comments

Comments
 (0)