@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/HiForm/HiFormControl.js

@@ -0,0 +1,371 @@
+// @inheritedComponent FormControl
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Warning from '@material-ui/icons/Warning';
+import Info from '@material-ui/icons/Info';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import { withStyles } from '@material-ui/core/styles';
+import HiFormLabel from './HiFormLabel';
+import HiIconButton from '../HiIconButton';
+import {escapeHTML, uniqueId} from '../utils/helpers';
+import keycode from 'keycode/index';
+
+export const styles = theme => ({
+    helperTextClassName: {
+        color: theme.palette.neutral.main,
+        fontSize: 11,
+        textAlign: 'right',
+        marginTop: 2,
+    },
+    iconButton: {
+        cursor: 'pointer',
+        zIndex: 1,
+        height: 20,
+        width: 20,
+        marginLeft: 3,
+        '&$iconButtonError': {
+            color: theme.palette.negative.main,
+        },
+        '&$iconButtonInfo': {
+            color: theme.palette.neutral.main,
+        },
+        '&$iconButtonInfoActive': {
+            color: theme.palette.primary.main,
+        },
+        '&$iconFullWidth': {
+            position: 'absolute',
+            right: theme.spacing(1),
+            marginLeft: 0,
+            bottom: 0,
+        },
+    },
+    iconButtonError: {},
+    iconButtonInfo: {},
+    iconButtonInfoActive: {},
+    iconFullWidth: {},
+    errorDiv: {
+        ...theme.typography.b3,
+        backgroundColor: theme.palette.negative.main,
+        color: '#FFFFFF',
+        padding: theme.spacing(4, 2),
+        verticalAlign: 'middle',
+        borderRadius: 2,
+        position: 'relative',
+        marginBottom: theme.spacing(2),
+        fontWeight: theme.typography.fontWeightRegular,
+    },
+    arrowDown: {
+        width: 0,
+        height: 0,
+        borderLeft: '4px solid transparent',
+        borderRight: '4px solid transparent',
+        borderTop: '4px solid #000',
+        position: 'absolute',
+        bottom: theme.spacing(-1),
+        '&$arrowNotFullWidth': {
+            left: theme.spacing(2),
+        },
+        '&$arrowFullWidth': {
+            right: theme.spacing(3),
+        },
+    },
+    arrowNotFullWidth: {},
+    arrowFullWidth: {},
+    errorDivArrowDown: {
+        borderTopColor: theme.palette.negative.main,
+    },
+    helperDiv: {
+        ...theme.typography.b2,
+        width: '100%',
+        backgroundColor: '#ffffff',
+        color: theme.palette.neutral.normal,
+        padding: theme.spacing(4, 2),
+        borderRadius: 2,
+        position: 'relative',
+        marginBottom: theme.spacing(2),
+        fontWeight: theme.typography.fontWeightRegular,
+        boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
+        lineHeight: 1.5,
+    },
+    helperDivArrowDown: {
+        borderTopColor: '#ffffff',
+    },
+    icon: {
+        position: 'absolute',
+        fontSize: 20,
+    },
+});
+
+/**
+ * Champs input pour formulaire
+ */
+class HiFormControl extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Contenu du form control
+         */
+        children: PropTypes.node,
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * Classes CSS appliquées
+         */
+        className: PropTypes.string,
+        /**
+         * Si `true`, l'input sera inactif.
+         */
+        disabled: PropTypes.bool,
+        /**
+         * Si `true`, le champs sera en erreur.
+         */
+        error: PropTypes.bool,
+        /**
+         * Texte de l'erreur
+         */
+        errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+        /**
+         * Propriétés appliquées au composant FormHelperText
+         */
+        FormHelperTextProps: PropTypes.object,
+        /**
+         * Si `true`, le chamsp prendra toute la largeur.
+         */
+        fullWidth: PropTypes.bool,
+        /**
+         * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+         */
+        helperIcon: PropTypes.bool,
+        /**
+         * Texte de l'aide
+         */
+        helperText: PropTypes.string,
+        /**
+         * id de l'élément input
+         */
+        id: PropTypes.string.isRequired,
+        /**
+         * Propriétés appliquées au composant InputLabel
+         */
+        InputLabelProps: PropTypes.object,
+        /**
+         * Label du champs
+         */
+        label: PropTypes.string,
+        /**
+         * Nombre de caractères max pour un text area
+         * Valable uniquement si l'option multiline est à true
+         */
+        maxLength: PropTypes.number,
+        /**
+         * Si `true`, le champs input sera un textarea
+         */
+        multiline: PropTypes.bool,
+        /**
+         * Nombre de caractères autorisés pour les textArea
+         */
+        nbChars: PropTypes.number,
+        /**
+         * true si champs obligatoire
+         */
+        required: PropTypes.bool,
+        /**
+         * Passé à la prop ref du composant FormControl
+         */
+        rootRef: PropTypes.string,
+    };
+
+    static defaultProps = {
+        id: uniqueId(),
+        fullWidth: true,
+        required: true,
+        disabled: false,
+        error: false,
+        errorText: undefined,
+        helperText: undefined,
+        helperIcon: false,
+        multiline: false,
+        nbChars: 0,
+        maxLength: 280,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            helperOpen: false,
+            focused: false,
+            hovered: false,
+        };
+
+        this.handleHelperClick = this.handleHelperClick.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.handleHover = this.handleHover.bind(this);
+    }
+
+    handleHelperClick = event => {
+        this.setState(prevState => ({ helperOpen: !prevState.helperOpen }));
+        if (event) {
+            event.preventDefault();
+        }
+    };
+
+    handleKeyDown = event => {
+        const key = keycode(event);
+        if (['space', 'enter'].includes(key)) {
+            this.handleHelperClick(event);
+        }
+    };
+
+    handleHover = value => () => {
+        this.setState({ hovered: value });
+    };
+
+    handleFocus = value => () => {
+        this.setState({ focused: value });
+        if (value === false && this.state.hovered) {
+            this.setState({ hovered: false });
+        }
+    };
+
+    render() {
+        const {
+            children,
+            classes,
+            className,
+            disabled,
+            error,
+            errorText,
+            id,
+            label,
+            InputLabelProps,
+            helperText,
+            helperIcon,
+            FormHelperTextProps,
+            fullWidth,
+            required,
+            multiline,
+            rootRef,
+            maxLength,
+            nbChars,
+            ...others
+        } = this.props;
+
+        const { helperOpen, focused, hovered } = this.state;
+
+        return (
+            <FormControl
+                fullWidth={fullWidth}
+                className={className}
+                error={error}
+                ref={rootRef}
+                {...others}
+            >
+                {error &&
+                    errorText &&
+                    helperOpen && (
+                        <div className={classes.errorDiv}>
+                            <div
+                                className={classNames(classes.arrowDown, classes.errorDivArrowDown,
+                                    fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])}
+                            />
+                            <span
+                                // eslint-disable-next-line react/no-danger
+                                dangerouslySetInnerHTML={{
+                                    __html: escapeHTML(errorText),
+                                }}
+                            />
+                        </div>
+                    )}
+
+                {helperIcon &&
+                    helperText &&
+                    !error &&
+                    helperOpen && (
+                        <div className={classes.helperDiv}>
+                            <div
+                                className={classNames(
+                                    classes.arrowDown,
+                                    classes.helperDivArrowDown,
+                                    fullWidth ? [classes.arrowFullWidth] : [classes.arrowNotFullWidth])}
+                            />
+                            <span
+                                // eslint-disable-next-line react/no-danger
+                                dangerouslySetInnerHTML={{
+                                    __html: escapeHTML(helperText),
+                                }}
+                            />
+                        </div>
+                    )}
+
+                {label && (
+                    <HiFormLabel
+                        htmlFor={id}
+                        label={label}
+                        required={required}
+                        disabled={disabled}
+                        focused={!disabled && (focused || hovered)}
+                        {...InputLabelProps}
+                    >
+                        {error && errorText && (
+                            <HiIconButton
+                                className={classNames(classes.iconButton, classes.iconButtonError, {
+                                    [classes.iconFullWidth]: fullWidth,
+                                })}
+                                onClick={this.handleHelperClick}
+                            >
+                                <Warning className={classNames(classes.icon)} />
+                            </HiIconButton>
+                        )}
+                        {helperIcon &&
+                            helperText &&
+                            !error && (
+                                <HiIconButton
+                                    className={classNames(classes.iconButton, classes.iconButtonInfo, {
+                                        [classes.iconButtonInfoActive]: helperOpen,
+                                        [classes.iconFullWidth]: fullWidth,
+                                    })}
+                                    onClick={this.handleHelperClick}
+                                >
+                                    <Info className={classNames(classes.icon)} />
+                                </HiIconButton>
+                            )}
+                    </HiFormLabel>
+                )}
+                <div
+                    onMouseEnter={this.handleHover(true)}
+                    onMouseLeave={this.handleHover(false)}
+                    onFocus={this.handleFocus(true)}
+                    onBlur={this.handleFocus(false)}
+                >
+                    {children}
+                </div>
+                {!multiline &&
+                    helperText &&
+                    !helperIcon && (
+                        <FormHelperText
+                            className={classes.helperTextClassName}
+                            {...FormHelperTextProps}
+                        >
+                            {helperText}
+                        </FormHelperText>
+                    )}
+
+                {multiline && (
+                    <FormHelperText
+                        className={classes.helperTextClassName}
+                        {...FormHelperTextProps}
+                    >
+                        {nbChars}/{maxLength}
+                    </FormHelperText>
+                )}
+            </FormControl>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiFormControl' })(HiFormControl);

package/src/HiForm/HiFormControl.test.js

@@ -0,0 +1,238 @@
+/* eslint-disable */
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import { createShallow, createMount } from '../test-utils';
+import Info from '@material-ui/icons/Info';
+import HiFormControl from './HiFormControl';
+import HiIconButton from '../HiIconButton';
+import HiFormLabel from './HiFormLabel';
+import HiInput from './HiInput';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+describe('<HiFormControl />', () => {
+    let shallow;
+    let mount;
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+    });
+
+    beforeEach(() => {
+        mount = createMount();
+    });
+
+    afterEach(() => {
+        mount.cleanUp();
+    });
+
+    describe('shallow', () => {
+        let wrapper;
+
+        beforeEach(() => {
+            wrapper = shallow(
+                <HiFormControl>
+                    <HiInput />
+                </HiFormControl>,
+            );
+        });
+
+        describe('structure', () => {
+            it('should be a FormControl', () => {
+                assert.strictEqual(wrapper.name(), 'WithStyles(FormControl)');
+                assert.strictEqual(wrapper.dive().name(), 'FormControl');
+            });
+
+            it('should have initial props', () => {
+                assert.strictEqual(wrapper.props().error, false);
+            });
+
+            it('should pass className to the FormControl', () => {
+                wrapper.setProps({ className: 'foo' });
+                assert.strictEqual(wrapper.dive().hasClass('foo'), true);
+            });
+
+            it('should have one child', () => {
+                assert.strictEqual(wrapper.children().length, 1);
+            });
+
+            it('should forward the fullWidth prop to FormControl', () => {
+                wrapper = shallow(<HiFormControl fullWidth />);
+                assert.strictEqual(wrapper.props().fullWidth, true);
+            });
+
+            it('should display help', () => {
+                assert.strictEqual(wrapper.state().helperOpen, false);
+
+                wrapper.setProps({ label: 'Label', helperText: 'helper', helperIcon: true });
+                const helperIcon = wrapper.find(HiIconButton);
+                assert.strictEqual(
+                    wrapper.childAt(0).type(),
+                    HiFormLabel,
+                    'helper div should not be here',
+                );
+
+                helperIcon.simulate('click');
+                assert.strictEqual(wrapper.state().helperOpen, true, 'helper should be open');
+                assert.strictEqual(wrapper.childAt(0).type(), 'div', 'helper div should be here');
+            });
+        });
+
+        describe('with a label', () => {
+            beforeEach(() => {
+                wrapper.setProps({ label: 'Foo bar' });
+            });
+
+            it('should have 2 children', () => {
+                assert.strictEqual(wrapper.children().length, 2);
+            });
+
+            it('should have an HiFormLabel as the first child', () => {
+                assert.strictEqual(wrapper.childAt(0).type(), HiFormLabel);
+            });
+
+            it('should have a div as the second child', () => {
+                assert.strictEqual(wrapper.childAt(1).type(), 'div');
+            });
+        });
+
+        describe('with a helper text', () => {
+            beforeEach(() => {
+                wrapper.setProps({ helperText: 'Foo bar' });
+            });
+
+            it('should have 2 children', () => {
+                assert.strictEqual(wrapper.children().length, 2);
+            });
+
+            it('should have a FormHelperText as the second child', () => {
+                assert.strictEqual(wrapper.childAt(1).type(), FormHelperText);
+            });
+
+            it('should have a div as the first child', () => {
+                assert.strictEqual(wrapper.childAt(0).type(), 'div');
+            });
+        });
+
+        describe('with a helper text', () => {
+            beforeEach(() => {
+                wrapper.setProps({ multiline: true });
+            });
+
+            it('should have 2 children', () => {
+                assert.strictEqual(wrapper.children().length, 2);
+            });
+        });
+    });
+
+    describe('mount', () => {
+        let wrapper;
+        const handleBlur = spy();
+        const handleFocus = spy();
+
+        beforeEach(() => {
+            wrapper = mount(
+                <HiFormControl onBlur={handleBlur} onFocus={handleFocus} helperText="helper" />,
+            );
+        });
+
+        describe('callbacks', () => {
+            it('should be called', () => {
+                wrapper.find(FormControl).simulate('focus');
+                assert.strictEqual(handleFocus.callCount, 1, 'should trigger focus callback');
+
+                wrapper.find(FormControl).simulate('blur');
+                assert.strictEqual(handleBlur.callCount, 1, 'should trigger blur callback');
+            });
+        });
+
+        describe('without callbacks (for 100% Branch coverage', () => {
+            it('should not be called', () => {
+                // wrapper = mount(
+                //     <HiFormControl
+                //         value="defaultValue"
+                //         label="label"
+                //         helperText="My helper"
+                //         helperIcon
+                //     />,
+                // );
+                wrapper.find(FormControl).simulate('blur');
+            });
+        });
+
+        describe('helpers', () => {
+            it('should be displayed', () => {
+                assert.strictEqual(wrapper.find('p').text(), 'helper', 'Should render helper');
+            });
+        });
+
+        describe('helpers on multiline', () => {
+            it('should be displayed', () => {
+                assert.strictEqual(wrapper.find('p').text(), 'helper', 'Should render helper');
+            });
+
+            it('should display nbChars/maxLength', () => {
+                wrapper.setProps({
+                    multiline: true,
+                    nbChars: 5,
+                    maxLength: 200,
+                })
+
+                assert.strictEqual(wrapper.find('p').text(), '5/200', 'Should render helper');
+            });
+        });
+
+        describe('helpers', () => {
+            it('should be displayed', () => {
+                wrapper.setProps({
+                    helperIcon: true,
+                    value: 'Default value',
+                    label: 'label',
+                });
+
+                assert.strictEqual(wrapper.find('p').length, 0, 'Should not have helper p');
+                assert.strictEqual(wrapper.find(Info).length, 1, 'Should have helper icon');
+                assert.strictEqual(
+                    wrapper.childAt(0).text(),
+                    'label',
+                    'First child should be the label',
+                );
+
+                const helperIcon = wrapper.find(Info);
+                helperIcon.simulate('click');
+                assert.strictEqual(
+                    wrapper.childAt(0).text(),
+                    'helperlabel',
+                    'First child should be the helper div',
+                );
+            });
+        });
+
+        describe('errors', () => {
+            it('should be displayed', () => {
+                wrapper.unmount();
+
+                wrapper = mount(
+                    <HiFormControl value="defaultValue" label="label" error errorText="My error" />,
+                );
+
+                assert.strictEqual(wrapper.find('p').length, 0, 'Should not have error p');
+                assert.strictEqual(wrapper.find(HiIconButton).length, 1, 'Should have error icon');
+                assert.strictEqual(
+                    wrapper.childAt(0).text(),
+                    'label',
+                    'First child should be the label',
+                );
+
+                const errorIcon = wrapper.find(HiIconButton);
+                errorIcon.simulate('click');
+                assert.strictEqual(
+                    wrapper.childAt(0).text(),
+                    'My errorlabel',
+                    'First child should be the error div',
+                );
+            });
+        });
+    });
+});