@hipay/hipay-material-ui 3.12.0 → 3.12.2

package/src/HiForm/HiSearchField.test.js

@@ -1,208 +0,0 @@
-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

@@ -1,296 +0,0 @@
-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

@@ -1,194 +0,0 @@
-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');
-    });
-});