@hipay/hipay-material-ui 3.11.2 → 3.12.1

package/src/HiForm/HiInput.test.js

@@ -0,0 +1,227 @@
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import classNames from 'classnames';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import HiInput from './HiInput';
+
+describe('<HiInput />', () => {
+    let shallow;
+    let mount;
+    let classes;
+
+    before(() => {
+        shallow = createShallow({ untilSelector: 'HiInput' });
+        classes = getClasses(
+            <HiInput
+                value={''}
+                onChange={() => {
+                    return null;
+                }}
+                onReset={() => {
+                    return null;
+                }}
+                placeholder={'Rechercher'}
+            />,
+        );
+    });
+
+    beforeEach(() => {
+        mount = createMount();
+    });
+
+    afterEach(() => {
+        mount.cleanUp();
+    });
+
+    it('should render a td with an Lock icon for code 0', () => {
+        const handleBlur = spy();
+        const wrapper = shallow(
+            <HiInput
+                value={''}
+                onChange={() => {
+                    return null;
+                }}
+                onReset={() => {
+                    return null;
+                }}
+                placeholder={'Rechercher'}
+                autoFocus={false}
+                onBlur={handleBlur}
+            />,
+        );
+        assert.strictEqual(wrapper.name(), 'div');
+        assert.strictEqual(wrapper.state().focused, false, 'Initial focus is false');
+    });
+
+    it('should have a fonctionnal input', () => {
+        const handleChange = spy();
+        const handleReset = spy();
+        const handleMouseEnter = spy();
+        const handleMouseLeave = spy();
+        const handleBlur = spy();
+        const handleFocus = spy();
+        const handleSubmit = spy();
+        const handleClick = spy();
+        const wrapper = mount(
+            <HiInput
+                value={'test'}
+                onClick={handleClick}
+                onChange={handleChange}
+                onReset={handleReset}
+                inputId={'test-input'}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
+                onSubmit={handleSubmit}
+            />,
+        );
+        assert.strictEqual(wrapper.find('input').length, 1);
+        assert.strictEqual(wrapper.find('input').props().type, 'text');
+        assert.strictEqual(wrapper.find('input').props().value, 'test');
+        assert.strictEqual(wrapper.find('input').props().placeholder, '');
+
+        wrapper.setProps({ placeholder: 'Rechercher' });
+        wrapper.update();
+        assert.strictEqual(wrapper.find('input').props().placeholder, 'Rechercher');
+
+        wrapper.find('input').simulate('change', { target: { value: 'newValue' } });
+        assert.strictEqual(handleChange.callCount, 1);
+        assert.strictEqual(handleChange.args[0][0].target.value, 'newValue');
+
+        assert.strictEqual(wrapper.find('button').length, 0, 'should not have clear icon');
+
+        wrapper.find('input').simulate('focus');
+        assert.strictEqual(handleFocus.callCount, 1, 'should trigger focus callback');
+        assert.strictEqual(handleSubmit.callCount, 0, 'should not trigger handleSubmit');
+
+        assert.strictEqual(wrapper.find('button').length, 1, 'should have clear icon');
+        wrapper.find('button').simulate('click');
+        assert.strictEqual(handleReset.callCount, 1, 'should trigger reset callback');
+        assert.strictEqual(handleFocus.callCount, 2, 'should trigger focus callback');
+        assert.strictEqual(handleSubmit.callCount, 0, 'should not trigger handleSubmit');
+        assert.strictEqual(handleClick.callCount, 1, 'should call handleClick once');
+
+        wrapper.find('input').simulate('click');
+        const input = document.getElementById('test-input');
+        const divs = document.getElementsByClassName(classes.root);
+        if (!input) {
+            throw new Error('missing input');
+        }
+        assert.strictEqual(handleClick.callCount, 2, 'should call handleClick once more');
+
+        assert.strictEqual(divs.length, 1);
+        const rootDiv = divs[0];
+
+        const rootClass = classNames(classes.root, classes.inkbar);
+        const rootFocusClass = classNames(classes.root, classes.inkbar, classes.focused);
+
+        input.focus();
+        assert.strictEqual(rootDiv.className, rootFocusClass);
+
+        const focusedElement = document.activeElement;
+        assert.strictEqual(input, focusedElement, 'should trigger reset callback');
+
+        input.blur();
+        assert.strictEqual(rootDiv.className, rootClass);
+
+        wrapper.simulate('mouseEnter');
+        assert.strictEqual(handleMouseEnter.callCount, 1, 'should trigger mouse enter callback');
+
+        wrapper.simulate('mouseLeave');
+        assert.strictEqual(handleMouseLeave.callCount, 1, 'should trigger mouse leave callback');
+
+        // Press "enter" on HiSelectInput => onSubmit
+        wrapper.find('input').simulate('keydown', { keyCode: 13 });
+        assert.strictEqual(handleSubmit.callCount, 1, 'should call handleSubmit once');
+    });
+
+    it('should not call callbacks', () => {
+        const handleChange = spy();
+        const handleReset = spy();
+        const handleMouseEnter = spy();
+        const handleMouseLeave = spy();
+        const handleBlur = spy();
+        const handleFocus = spy();
+        const wrapper = mount(<HiInput value={'test'} inputId={'test-input'} onReset={() => {}} />);
+
+        assert.strictEqual(wrapper.find('button').length, 0, 'should not have clear icon');
+
+        wrapper.find('input').simulate('focus');
+        assert.strictEqual(wrapper.find('button').length, 1, 'should have clear icon');
+
+        wrapper.find('button').simulate('click');
+        assert.strictEqual(handleReset.callCount, 0, 'should not trigger reset callback');
+        assert.strictEqual(handleFocus.callCount, 0, 'should not trigger focus callback');
+
+        wrapper.find('input').simulate('change', { target: { value: 'newValue' } });
+        assert.strictEqual(handleChange.callCount, 0);
+
+        wrapper.find('input').simulate('click');
+        assert.strictEqual(handleBlur.callCount, 0, 'should not trigger blur callback');
+
+        wrapper.simulate('mouseEnter');
+        assert.strictEqual(
+            handleMouseEnter.callCount,
+            0,
+            'should not trigger mouse enter callback',
+        );
+
+        wrapper.simulate('mouseLeave');
+        assert.strictEqual(
+            handleMouseLeave.callCount,
+            0,
+            'should not trigger mouse leave callback',
+        );
+    });
+
+    describe('shallow', () => {
+        let wrapper;
+
+        beforeEach(() => {
+            wrapper = shallow(<HiInput value={'test'} />);
+        });
+
+        describe('without icons', () => {
+            it('should have 1 child', () => {
+                assert.strictEqual(wrapper.children().length, 1);
+            });
+        });
+
+        describe('with clearIcon', () => {
+            beforeEach(() => {
+                wrapper.setProps({ onReset() {} });
+            });
+
+            it('should still have 1 child', () => {
+                assert.strictEqual(wrapper.children().length, 1);
+            });
+        });
+
+        describe('with rightIcon', () => {
+            beforeEach(() => {
+                wrapper.setProps({ startAdornment: 'Archive' });
+            });
+
+            it('should have 1 child', () => {
+                assert.strictEqual(wrapper.children().length, 1);
+            });
+        });
+
+        describe('with multiline', () => {
+            beforeEach(() => {
+                wrapper.setProps({
+                    onReset() {},
+                    leftIcon: 'Archive',
+                    rightIcon: 'Eye',
+                    multiline: true,
+                });
+            });
+
+            it('should have 1 child', () => {
+                assert.strictEqual(wrapper.children().length, 1);
+            });
+        });
+    });
+});

package/src/HiForm/HiPasswordField.js

@@ -0,0 +1,76 @@
+// @inheritedComponent HiTextField
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '@mui/styles/withStyles';
+import HiTextField from './HiTextField';
+
+export const styles = () => ({
+    inputPassword: {
+        fontWeight: 'bolder',
+        fontFamily: 'inherit',
+        letterSpacing: '4px',
+        fontSize: '1.6rem',
+    },
+});
+
+/**
+ * Champs input email pour formulaire
+ */
+class HiPasswordField extends React.Component {
+    static propTypes = {
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * Fonction de callback appelée lorsqu'on clique sur l'icone "Eye"
+         */
+        handlePasswordToggle: PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showText: false,
+        };
+
+        this.handlePasswordToggle = this.handlePasswordToggle.bind(this);
+    }
+
+    handlePasswordToggle() {
+        this.setState(prevState => ({
+            showText: !prevState.showText,
+        }));
+    }
+
+    render() {
+        const { classes, HiInputProps, ...otherProps } = this.props;
+        const endAdornment = this.state.showText ? 'visibility_off' : 'visibility';
+        const type = this.state.showText ? 'text' : 'password';
+
+        const inputClassName = classNames({
+            [classes.inputPassword]: !this.state.showText && otherProps.value !== "",
+        });
+
+        return (
+            <HiTextField
+                {...otherProps}
+                type={type}
+                onRightIconClick={this.handlePasswordToggle}
+                HiInputProps={{
+                    placeholder: '',
+                    ...HiInputProps,
+                    endAdornment,
+                    inputClassName,
+                    autocomplete: "new-password"
+                }}
+            />
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiPasswordField' })(
+    HiPasswordField,
+);

package/src/HiForm/HiPasswordField.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, createMount } from '../test-utils';
+import HiPasswordField from './HiPasswordField';
+import HiTextField from './HiTextField';
+import HiInput from './HiInput';
+
+describe('<HiPasswordField />', () => {
+    let shallow;
+    let mount;
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+        mount = createMount();
+    });
+
+    after(() => {
+        mount.cleanUp();
+    });
+
+    describe('shallow', () => {
+        let wrapper;
+
+        beforeEach(() => {
+            wrapper = shallow(<HiPasswordField id="password" />);
+        });
+
+        describe('structure', () => {
+            it('should pass className to the FormControl', () => {
+                wrapper.setProps({ className: 'foo' });
+                assert.strictEqual(wrapper.dive().hasClass('foo'), true);
+            });
+
+            it('should forward the fullWidth prop to FormControl', () => {
+                wrapper = shallow(<HiPasswordField id="password" fullWidth />);
+                assert.strictEqual(wrapper.props().fullWidth, true);
+            });
+
+            it('should forward the fullWidth prop to FormControl', () => {
+                // Handle suggestions
+                assert.strictEqual(wrapper.state().showText, false);
+                wrapper
+                    .find(HiTextField)
+                    .props()
+                    .onRightIconClick();
+                assert.strictEqual(wrapper.state().showText, true);
+                wrapper
+                    .find(HiTextField)
+                    .props()
+                    .onRightIconClick();
+                assert.strictEqual(wrapper.state().showText, false);
+            });
+
+            it('should have placeholder prop to HiInput', () => {
+                assert.strictEqual(wrapper.find(HiTextField).dive().find(HiInput).props().placeholder, '');
+
+                wrapper.setProps({ HiInputProps: { placeholder: 'Password' } });
+                wrapper.update();
+                assert.strictEqual(wrapper.find(HiTextField).dive().find(HiInput).props().placeholder, 'Password');
+            });
+        });
+    });
+});

package/src/HiForm/HiSearchField.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiInput from './HiInput';
+
+/**
+ * Construit une barre de recherche avec icône Search (Magnify),
+ * permet de filtrer une liste d'éléments en spécifiant le nom de la/les propriétés sur lesquelles filtrer,
+ * retour la liste d'élément filtré.
+ * Un bouton reset s'affiche à la saisie permettant de réinitialiser l'input.
+ */
+class HiSearchField extends React.Component {
+    static propTypes = {
+        /**
+         * Liste des propriété de l'élément sur lesquelles filtrer (par défaut l'item lui même)
+         */
+        filterPropertyList: PropTypes.array,
+        /**
+         * Liste d'éléments
+         */
+        itemList: PropTypes.array.isRequired,
+        /**
+         * Fonction de callback qui renvoie la liste d'éléments filtrée
+         *
+         * @param {array} suggestions
+         */
+        onFilteredList: PropTypes.func,
+        /**
+         * Fonction de callback qui renvoit le texte saisi
+         *
+         * @param {string} value
+         */
+        onSearch: PropTypes.func,
+        /**
+         * Placeholder
+         */
+        placeholder: PropTypes.string,
+    };
+
+    static defaultProps = {
+        placeholder: 'Search',
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            inputValue: '',
+        };
+
+        this.filterOnProperties = this.filterOnProperties.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+        this.handleReset = this.handleReset.bind(this);
+    }
+
+    filterOnProperties(item, search) {
+        if (!this.props.filterPropertyList || this.props.filterPropertyList.length < 1) {
+            // If no properties specify, search on item
+            return (
+                item
+                    .toString()
+                    .toLowerCase()
+                    .search(search.toLowerCase()) !== -1
+            );
+        }
+        let searchSucceed = false;
+        this.props.filterPropertyList.forEach(filter => {
+            let itemProperty = null;
+            if (filter.indexOf('.') > 0) {
+                itemProperty = item[filter.split('.')[0]][filter.split('.')[1]];
+            } else {
+                itemProperty = item[filter];
+            }
+            if (
+                itemProperty
+                    .toString()
+                    .toLowerCase()
+                    .search(search.toLowerCase()) !== -1
+            ) {
+                searchSucceed = true;
+            }
+        });
+        return searchSucceed;
+    }
+
+    handleChange(event, inputValue) {
+        let searchedValue;
+        if (typeof inputValue !== 'undefined' && typeof event.target.value === 'undefined') {
+            searchedValue = inputValue;
+        } else {
+            searchedValue = event.target.value;
+        }
+        this.setState({
+            inputValue: searchedValue,
+        });
+
+        if (this.props.onSearch === undefined) {
+            let currentParent = null;
+            const filteredList = [];
+            this.props.itemList.forEach(item => {
+                const add = this.filterOnProperties(item, searchedValue);
+                if (item.hasChildren === true && add === false) {
+                    currentParent = item;
+                }
+                if (add === true) {
+                    if (currentParent !== null && item.parentId === currentParent.id) {
+                        filteredList.push(currentParent);
+                        currentParent = null;
+                    }
+                    filteredList.push(item);
+                }
+            });
+
+            this.props.onFilteredList(filteredList);
+        } else {
+            this.props.onSearch(event, searchedValue);
+        }
+    }
+
+    handleReset() {
+        this.setState({
+            inputValue: '',
+        });
+
+        if (typeof this.props.onSearch === 'undefined') {
+            this.props.onFilteredList(this.props.itemList);
+        } else {
+            this.props.onSearch(undefined, '');
+        }
+    }
+
+    render() {
+        const { placeholder, ...others } = this.props;
+
+        return (
+            <HiInput
+                placeholder={placeholder}
+                onReset={this.handleReset}
+                onChange={this.handleChange}
+                value={this.state.inputValue}
+                startAdornment={'search'}
+                {...others}
+            />
+        );
+    }
+}
+export default HiSearchField;