@hipay/hipay-material-ui 3.5.0 → 3.6.0-rc1

package/src/HiForm/HiFormControl.js

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

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