@hipay/hipay-material-ui 3.11.1 → 3.12.0

package/src/HiForm/HiSearchField.test.js

@@ -0,0 +1,208 @@
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import { createShallow, createMount } from '../test-utils';
+import HiSearchField from './HiSearchField';
+
+describe('<HiSearchField />', () => {
+    let shallow;
+    let mount;
+
+    before(() => {
+        shallow = createShallow({ untilSelector: 'HiSearchField' });
+    });
+
+    beforeEach(() => {
+        mount = createMount();
+    });
+
+    after(() => {
+        mount.cleanUp();
+    });
+
+    it('should render a <div />', () => {
+        const wrapper = shallow(
+            <HiSearchField
+                itemList={[]}
+                onFilteredList={() => {
+                    return null;
+                }}
+            />,
+        );
+        assert.strictEqual(wrapper.name(), 'div');
+    });
+
+    it('should render an <input /> inside the div', () => {
+        const wrapper = mount(
+            <HiSearchField
+                itemList={[]}
+                onFilteredList={() => {
+                    return null;
+                }}
+            />,
+        );
+        const input = wrapper.find('input');
+        assert.strictEqual(input.name(), 'input');
+        assert.strictEqual(input.props().type, 'text', 'should pass the text type prop');
+    });
+
+    it('should fire onChange event callbacks', () => {
+        const handleChange = spy();
+        const wrapper = mount(<HiSearchField itemList={[]} onFilteredList={handleChange} />);
+
+        wrapper.find('input').simulate('change');
+        assert.strictEqual(handleChange.calledOnce, true, 'should have called the callback');
+    });
+
+    it('should fire onChange event callbacks and call onSearch', () => {
+        const handleChange = spy();
+        const onSearch = spy();
+        const wrapper = mount(
+            <HiSearchField itemList={[]} onFilteredList={handleChange} onSearch={onSearch} />,
+        );
+
+        wrapper.find('input').simulate('change', 'value');
+        assert.strictEqual(onSearch.calledOnce, true, 'should have called the callback');
+    });
+
+    it('should handle flatten array', () => {
+        const handleChange = spy();
+        const itemList = ['zizou', 'zizou', 'manu'];
+        const wrapper = mount(<HiSearchField itemList={itemList} onFilteredList={handleChange} />);
+
+        wrapper.find('input').simulate('change');
+        assert.strictEqual(handleChange.calledOnce, true, 'should have called the callback');
+    });
+
+    it('should handle nested array', () => {
+        const handleChange = spy();
+        const itemList = [
+            { id: 'zz', label: 'Zizou' },
+            { id: 'zze', label: 'Zizou encore' },
+            { id: 'ep', label: 'Emmanuel Petit' },
+        ];
+        const wrapper = mount(
+            <HiSearchField
+                itemList={itemList}
+                onFilteredList={handleChange}
+                filterPropertyList={['label']}
+            />,
+        );
+
+        wrapper.find('input').simulate('change');
+        assert.strictEqual(handleChange.calledOnce, true, 'should have called the callback');
+    });
+
+    it('should handle double nested array', () => {
+        const handleChange = spy();
+        const itemList = [
+            { id: 'zz', record: { label: 'Zizou' } },
+            { id: 'zze', record: { label: 'Zizou encore' } },
+            { id: 'ep', record: { label: 'Emmanuel Petit' } },
+        ];
+        const wrapper = mount(
+            <HiSearchField
+                itemList={itemList}
+                onFilteredList={handleChange}
+                filterPropertyList={['record.label']}
+            />,
+        );
+
+        wrapper.find('input').simulate('change');
+        assert.strictEqual(handleChange.calledOnce, true, 'should have called the callback');
+    });
+
+    it('should return filtered list on search value and add reset button', () => {
+        const itemList = [
+            { id: 'zz', label: 'Zizou' },
+            { id: 'zze', label: 'Zizou encore' },
+            { id: 'ep', label: 'Emmanuel Petit' },
+        ];
+        const searchValue = 'peTit';
+        const expectedFilteredItemList = [{ id: 'ep', label: 'Emmanuel Petit' }];
+
+        const handleChange = spy();
+        const wrapper = mount(
+            <HiSearchField
+                itemList={itemList}
+                onFilteredList={handleChange}
+                filterPropertyList={['label']}
+            />,
+        );
+
+        // Fill input
+        const event = { target: { value: searchValue } };
+        wrapper.find('input').simulate('change', event);
+
+        assert.strictEqual(
+            handleChange.calledWith(expectedFilteredItemList),
+            true,
+            'should have called the callback with filtered item list',
+        );
+        assert.strictEqual(
+            handleChange.calledWith(itemList),
+            false,
+            'should not have called yet the callback with full item list',
+        );
+
+        assert.strictEqual(wrapper.find('button').length, 0, 'should not have clear icon');
+        wrapper.find('input').simulate('focus');
+
+        const resetButton = wrapper.find('button');
+        assert.strictEqual(resetButton.name(), 'button', 'should have reset button');
+        wrapper.find('button').simulate('click');
+
+        // Click on reset
+        resetButton.simulate('click');
+        assert.strictEqual(
+            handleChange.calledWith(itemList),
+            true,
+            'should not have called the callback with full item list',
+        );
+        assert.strictEqual(
+            handleChange.callCount,
+            3,
+            'should have called the callback three times',
+        );
+    });
+
+    it('should return filtered list on search value and add reset button call onSearch', () => {
+        const itemList = [
+            { id: 'zz', label: 'Zizou' },
+            { id: 'zze', label: 'Zizou encore' },
+            { id: 'ep', label: 'Emmanuel Petit' },
+        ];
+        const searchValue = 'peTit';
+
+        const handleChange = spy();
+        const onSearch = spy();
+        const wrapper = mount(
+            <HiSearchField
+                itemList={itemList}
+                onFilteredList={handleChange}
+                filterPropertyList={['label']}
+                onSearch={onSearch}
+            />,
+        );
+
+        // Fill input
+        const event = { target: { value: searchValue } };
+        wrapper.find('input').simulate('change', event);
+
+        assert.strictEqual(
+            handleChange.calledWith(itemList),
+            false,
+            'should not have called yet the callback with full item list',
+        );
+
+        assert.strictEqual(wrapper.find('button').length, 0, 'should not have clear icon');
+        wrapper.find('input').simulate('focus');
+
+        const resetButton = wrapper.find('button');
+        assert.strictEqual(resetButton.name(), 'button', 'should have reset button');
+        // Click on reset
+        resetButton.simulate('click', 'reset');
+
+        assert.strictEqual(onSearch.callCount, 2, 'should have called the callback two times');
+    });
+});

package/src/HiForm/HiSlider.js

@@ -0,0 +1,296 @@
+import React from 'react';
+import withStyles from '@mui/styles/withStyles';
+import HiFormControl from './HiFormControl';
+import PropTypes from 'prop-types';
+import HiIcon from '../HiIcon/HiIcon';
+import classNames from 'classnames';
+
+export const styles = theme => ({
+    barContainer: {
+        width: '100%',
+        position: 'relative',
+        margin: '0 7px',
+    },
+    barHidden: {
+        width: '100%',
+        opacity: 0,
+        position: 'absolute',
+        top: '7px',
+        zIndex: '2',
+        cursor: 'pointer',
+    },
+    mainContainer: {
+        ...theme.typography.body1,
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'center',
+    },
+    topContainer: {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        height: '18px',
+    },
+    bottomContainer: {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        height: '18px',
+    },
+    barValue: {
+        display: 'flex',
+        width: '100%',
+        height: '4px',
+        borderRadius: '2px',
+        backgroundColor: theme.palette.primary.main,
+        position: 'absolute',
+        zIndex: '2',
+    },
+    arrow: {
+        position: 'absolute',
+        zIndex: '1',
+        transform: 'rotate(-90deg) translate(0%,-50%)',
+        transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+        transitionProperty: 'transform color',
+        fontSize: 20,
+        cursor: 'pointer',
+    },
+    leftLabel: {
+        color: theme.palette.primary.main,
+        left: '0px',
+        position: 'absolute',
+        fontSize: '11px',
+        alignSelf: 'flex-end',
+    },
+    rightLabel: {
+        color: '#737373',
+        right: '0px',
+        position: 'absolute',
+        fontSize: '11px',
+        alignSelf: 'flex-end',
+    },
+    textValue: {
+        position: 'absolute',
+        zIndex: '2',
+    },
+    trackAfter: {
+        backgroundColor: 'gray',
+        opacity: 0.24,
+    },
+    focused: {
+        fontSize: 24,
+        color: theme.palette.primary.dark,
+    },
+});
+
+/**
+ * HiSlider component
+ */
+class HiSlider extends React.Component {
+    static propTypes = {
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * Classes CSS appliquées.
+         */
+        className: PropTypes.string,
+        /**
+         * Id de l'élément input
+         */
+        id: PropTypes.string.isRequired,
+        /**
+         * Label du champ
+         */
+        label: PropTypes.string,
+        /**
+         * The label to show on the left.
+         */
+        leftLabel: PropTypes.string,
+        /**
+         * The Maximum value for the slider.
+         */
+        max: PropTypes.number.isRequired,
+        /**
+         * The Minimum value for the slider.
+         */
+        min: PropTypes.number.isRequired,
+        /**
+         * Fonction de callback appelée lorsqu'on change la valeur du slider.
+         */
+        onChange: PropTypes.func,
+        /**
+         * The label to show on the right
+         */
+        rightLabel: PropTypes.string,
+        /**
+         * The step between two selectable values.
+         */
+        step: PropTypes.number,
+        /**
+         * The suffix to show after each number.
+         */
+        suffix: PropTypes.string,
+        /**
+         * @ignore
+         */
+        theme: PropTypes.object,
+        /**
+         * The
+         * value of the input.
+         */
+        value: PropTypes.number,
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            focused: false,
+        };
+    }
+
+    /**
+     * Measures several components once they are mounted.
+     * If the value and a label (left or right) are hovered,
+     * we hide this label.
+     */
+    componentDidMount() {
+        this.leftLabelWidth = this.leftLabel.offsetWidth;
+        this.rightLabelWidth = this.rightLabel.offsetWidth;
+        this.textValueWidth = this.textValue.offsetWidth;
+        this.barContainerWidth = this.barContainer.offsetWidth;
+
+        const { hoveringLeft, hoveringRight } = this.getHovering();
+        if (hoveringLeft || hoveringRight) {
+            this.forceUpdate();
+        }
+    }
+
+    /**
+     * Calculates if the labels are hovered.
+     */
+    getHovering() {
+        const ratio = (this.props.value - this.props.min) / (this.props.max - this.props.min);
+        const hoveringLeft =
+            this.leftLabelWidth - (ratio * this.barContainerWidth - ratio * this.textValueWidth) >
+            0;
+        const hoveringRight = this.barContainerWidth
+            - ratio * this.barContainerWidth
+            - this.rightLabelWidth
+            - (1 - ratio) * this.textValueWidth < 0;
+        return { hoveringLeft, hoveringRight };
+    }
+
+    handleChange = event => {
+        this.props.onChange(parseFloat(event.target.value));
+        this.textValueWidth = this.textValue.offsetWidth;
+    };
+
+    handleFocus = isFocused => () => {
+        this.setState({ focused: isFocused });
+    };
+
+    render() {
+        const {
+            classes,
+            className,
+            min,
+            max,
+            leftLabel,
+            rightLabel,
+            step,
+            suffix,
+            id,
+            label,
+            value,
+            theme,
+        } = this.props;
+        const { focused } = this.state;
+        const ratio = (value - min) / (max - min);
+        const percentage = ratio * 100;
+        const { hoveringLeft, hoveringRight } = this.getHovering();
+        const barColor = focused
+            ? theme.palette.primary.dark
+            : theme.palette.primary.main;
+        return (
+            // HiFormControl pour l'affichage du label
+            <HiFormControl
+                id={id}
+                label={label}
+                className={className}
+                onFocus={this.handleFocus(true)}
+                onBlur={this.handleFocus(false)}
+            >
+                <div className={classes.mainContainer}>
+                    <div>
+                        {min}
+                        {suffix}
+                    </div>
+                    <div className={classes.barContainer} ref={div => { this.barContainer = div; }}>
+                        <div className={classes.topContainer}>
+                            {!hoveringLeft && (
+                                <div
+                                    className={classes.leftLabel}
+                                    ref={div => { this.leftLabel = div; }}
+                                >
+                                    {leftLabel}
+                                </div>
+                            )}
+                            <div
+                                className={classes.textValue}
+                                style={{
+                                    left: `${percentage}%`,
+                                    transform: `translate(-${percentage}%)`,
+                                }}
+                                ref={div => { this.textValue = div; }}
+                            >
+                                {value}
+                                {suffix}
+                            </div>
+                            {!hoveringRight && (
+                                <div
+                                    className={classes.rightLabel}
+                                    ref={div => { this.rightLabel = div; }}
+                                >
+                                    {rightLabel}
+                                </div>
+                            )}
+                        </div>
+                        <div
+                            className={classes.barValue}
+                            style={{
+                                background: `linear-gradient(to right, ${barColor}, ${barColor} ${percentage}%, #E0E0E0 ${percentage}%, #E0E0E0)`,
+                            }}
+                        />
+                        <input
+                            type={'range'}
+                            min={min}
+                            max={max}
+                            value={value}
+                            onChange={this.handleChange}
+                            className={classes.barHidden}
+                            step={step}
+                        />
+                        <div className={classes.bottomContainer}>
+                            <HiIcon
+                                className={classNames(classes.arrow, {
+                                    [classes.focused]: focused,
+                                })}
+                                icon={'play_arrow'}
+                                style={{
+                                    left: `${percentage}%`,
+                                    color: barColor,
+                                }}
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        {max}
+                        {suffix}
+                    </div>
+                </div>
+            </HiFormControl>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HiSlider', withTheme: true })(HiSlider);

package/src/HiForm/HiSlider.test.js

@@ -0,0 +1,194 @@
+import React from 'react';
+import { assert, expect } from 'chai';
+import { spy } from 'sinon';
+import { createShallow, createMount } from '../test-utils';
+import HiSlider from './HiSlider';
+import HiFormControl from './HiFormControl';
+
+describe('<HiSlider />', () => {
+    let shallow;
+    let mount;
+
+    before(() => {
+        shallow = createShallow();
+    });
+
+    beforeEach(() => {
+        mount = createMount();
+    });
+
+    afterEach(() => {
+        mount.cleanUp();
+    });
+
+    describe('shallow', () => {
+        let wrapper;
+
+        const props = {
+            min: 0,
+            max: 100,
+            id: 'slider',
+            label: 'label',
+        };
+
+        beforeEach(() => {
+            wrapper = shallow(<HiSlider {...props} />, {
+                disableLifecycleMethods: true,
+            });
+        });
+
+        it('should be a HiSlider', () => {
+            assert.strictEqual(wrapper.name(), 'HiSlider');
+        });
+
+        it('should have an HiFormControl as the only child', () => {
+            assert.strictEqual(wrapper.dive().children().length, 1);
+            assert.strictEqual(wrapper.dive().type(), HiFormControl);
+        });
+
+        it('should pass label to the HiFormControl', () => {
+            assert.strictEqual(
+                wrapper.dive().find(HiFormControl).dive().props().label,
+                props.label,
+                '',
+            );
+        });
+
+        it('should show labels (right and left) if passed', () => {
+            assert.strictEqual(
+                wrapper.dive()
+                    .children()
+                    .childAt(1)
+                    .childAt(0)
+                    .childAt(0)
+                    .text(),
+                '',
+                'should be empty because no left label is given in props',
+            );
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .children()
+                    .childAt(1)
+                    .childAt(0)
+                    .childAt(2)
+                    .text(),
+                '',
+                'should be empty because no right label is given in props',
+            );
+            const rightLabel = 'label right';
+            const leftLabel = 'label left';
+            wrapper.setProps({ rightLabel });
+            wrapper.setProps({ leftLabel });
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .children()
+                    .childAt(1)
+                    .childAt(0)
+                    .childAt(0)
+                    .text(),
+                leftLabel,
+                'should display the left label given in props',
+            );
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .children()
+                    .childAt(1)
+                    .childAt(0)
+                    .childAt(2)
+                    .text(),
+                rightLabel,
+                'should display the right label given in props',
+            );
+        });
+
+        it('should have the values given in props for max and min', () => {
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .children()
+                    .childAt(0)
+                    .text(),
+                '0',
+                'should be equal to the min value given in props',
+            );
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .children()
+                    .childAt(2)
+                    .text(),
+                '100',
+                'should be equal to the max value given in props',
+            );
+        });
+
+        it('should be on the initial value, then change', () => {
+            wrapper = shallow(<HiSlider id={'slider'} min={0} max={100} value={50} />, {
+                disableLifecycleMethods: true,
+            });
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .find('input')
+                    .props().value,
+                50,
+                'the input value should be equal to initial value',
+            );
+            assert.strictEqual(
+                wrapper
+                    .dive()
+                    .children()
+                    .childAt(1)
+                    .childAt(0)
+                    .childAt(1)
+                    .text(),
+                '50',
+                'the value shown to the user is the same as the initial value',
+            );
+            expect(
+                wrapper
+                    .dive()
+                    .children()
+                    .childAt(1)
+                    .childAt(1)
+                    .props().style.background,
+            ).to.include('50%');
+        });
+    });
+
+    it('should fire onChange event callbacks', () => {
+        const handleChange = spy();
+        const wrapper = mount(
+            <HiSlider
+                id={'slider'}
+                min={0}
+                max={100}
+                onChange={handleChange}
+            />,
+        );
+        wrapper.find('input').simulate('change');
+        assert.strictEqual(handleChange.calledOnce, true, 'should have called the callback');
+    });
+
+    it('should be focused after onFocus, then not focused after onBlur', () => {
+        const wrapper = mount(
+            shallow(
+                <HiSlider
+                    id={'slider'}
+                    rightLabel={'test right'}
+                    leftLabel={'test left'}
+                    min={0}
+                    max={100}
+                    value={50}
+                />,
+            ).get(0),
+        );
+        wrapper.find(HiFormControl).prop('onFocus')();
+        assert.strictEqual(wrapper.state().focused, true, 'should be focused');
+        wrapper.find(HiFormControl).prop('onBlur')();
+        assert.strictEqual(wrapper.state().focused, false, 'should not be focused');
+    });
+});