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

package/src/HiSelect/HiSelectInput.js

@@ -1,364 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ButtonBase from '@material-ui/core/ButtonBase';
-import Icon from '@material-ui/core/Icon';
-import HiIcon from '../HiIcon';
-import { withStyles } from '@material-ui/core/styles';
-import keycode from 'keycode';
-import { isMobile } from 'react-device-detect';
-
-export const styles = theme => ({
-    root: {
-        width: '100%',
-        height: 40,
-        maxWidth: 500,
-        display: 'flex',
-        justifyContent: 'center',
-        padding: 8,
-        cursor: 'pointer',
-    },
-    rootMobile: {
-        backgroundColor: theme.palette.background2,
-    },
-    underline: {
-        '&:before': {
-            backgroundColor: theme.palette.input.bottomLine,
-            left: 0,
-            bottom: 0,
-            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-            content: '""',
-            height: 1,
-            position: 'absolute',
-            right: 0,
-            transition: theme.transitions.create('background-color', {
-                duration: theme.transitions.duration.shorter,
-                easing: theme.transitions.easing.ease,
-            }),
-            pointerEvents: 'none', // Transparent to the hover style.
-        },
-        '&:hover:not($disabled):before': {
-            backgroundColor: theme.palette.input.bottomLine,
-            height: 2,
-        },
-        '&$disabled:before': {
-            background: 'transparent',
-            backgroundImage: `linear-gradient(to right, ${
-                theme.palette.input.bottomLine
-            } 33%, transparent 0%)`,
-            backgroundPosition: 'left top',
-            backgroundRepeat: 'repeat-x',
-            backgroundSize: '5px 1px',
-        },
-    },
-    inkbar: {
-        '&:not($disabled)': {
-            '&:not($error):after': {
-                backgroundColor: theme.palette.primary.main,
-                left: 0,
-                bottom: 0,
-                // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-                content: '""',
-                height: 1,
-                position: 'absolute',
-                right: 0,
-                transform: 'scaleX(0)',
-                transition: theme.transitions.create('transform', {
-                    duration: theme.transitions.duration.shorter,
-                    easing: theme.transitions.easing.easeOut,
-                }),
-                pointerEvents: 'none', // Transparent to the hover style.
-            },
-            '&:hover:after': {
-                transform: 'scaleX(1)',
-            },
-            '&$focused:after': {
-                transform: 'scaleX(1)',
-            },
-            '&$error': {
-                border: `1px solid ${theme.palette.negative.main}`,
-                borderRadius: 2,
-            },
-        },
-    },
-    disabled: {
-        color: theme.palette.text.disabled,
-        '&:before': {
-            display: 'none',
-        },
-    },
-    focused: {
-        backgroundColor: theme.palette.background3,
-    },
-    error: {},
-    label: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        ...theme.typography.b1,
-        display: 'inline-block',
-        width: '100%',
-        maxWidth: 500,
-    },
-    placeholder: {
-        color: theme.palette.grey[400],
-    },
-    icon: {
-        transition: theme.transitions.create(['opacity', 'transform'], {
-            duration: theme.transitions.duration.shorter,
-        }),
-    },
-    iconOpen: {
-        transform: 'rotate(90deg)',
-        color: theme.palette.primary.main,
-    },
-    iconClose: {
-        transform: 'rotate(0deg)',
-    },
-});
-
-/**
- * @ignore - internal component.
- */
-class HiSelectInput extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * If `true`, the select will be disabled.
-         */
-        disabled: PropTypes.bool,
-        /**
-         * Applique le style error
-         */
-        error: PropTypes.bool,
-        /**
-         * Applique le style focused
-         */
-        focused: PropTypes.bool,
-        /**
-         * id du select
-         */
-        id: PropTypes.string,
-        /**
-         * Affiche sous forme de div à la place d'un bouton.
-         * Si des éléments cliquables sont à l'intérieur.
-         */
-        noButton: PropTypes.bool,
-        /**
-         * Fonction de callback au blur du bouton
-         */
-        onBlur: PropTypes.func,
-        /**
-         * Fonction de callback au click sur l'input/bouton
-         */
-        onClick: PropTypes.func,
-        /**
-         * Fonction de callback au focus l'input/bouton
-         */
-        onFocus: PropTypes.func,
-        /**
-         * Fonction de callback à la pression de touche
-         */
-        onKeyDown: PropTypes.func,
-        /**
-         * Fonction de callback au survol de l'input
-         */
-        onMouseEnter: PropTypes.func,
-        /**
-         * Fonction de callback à la sortie du survol de l'input
-         */
-        onMouseLeave: PropTypes.func,
-        /**
-         * Fonction de callback appelée lorsqu'on vide le champs
-         */
-        onReset: PropTypes.func,
-        /**
-         * Fonction de callback à la pression de la touche "Entrée"
-         */
-        onSubmit: PropTypes.func,
-        /**
-         * Applique le style open et effectue une rotation de l'icône
-         */
-        open: PropTypes.bool,
-        /**
-         * Placeholder
-         */
-        placeholder: PropTypes.string,
-        /**
-         * Use that property to pass a ref callback to the native component.
-         */
-        refElement: PropTypes.func,
-        /**
-         * Valeur à afficher (déjà formattée)
-         */
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),
-    };
-
-    static defaultProps = {
-        disabled: false,
-        open: false,
-        focused: false,
-        noButton: false,
-        error: false,
-    };
-
-    constructor(props) {
-        super(props);
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-        this.handleClick = this.handleClick.bind(this);
-        this.handleBlur = this.handleBlur.bind(this);
-        this.ref = this.ref.bind(this);
-        this.handleReset = this.handleReset.bind(this);
-    }
-
-    handleKeyDown = event => {
-        const key = keycode(event);
-        if (this.props.onKeyDown) {
-            this.props.onKeyDown(event);
-        } else if (key === 'down' || key === 'up') {
-            this.props.onClick();
-        } else if (key === 'enter' && this.props.onSubmit) {
-            event.preventDefault();
-            this.props.onSubmit(event);
-        }
-    };
-
-    handleKeyDownReset = event => {
-        const key = keycode(event);
-        if (key === 'enter' || key === 'space') {
-            this.handleReset(event);
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    };
-
-    handleClick = event => {
-        // Do not open select if press on resetIcon
-        if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
-            // Do not open select if press enter on button => submit form
-            if (event.type !== 'keydown' || keycode(event) !== 'enter') {
-                this.props.onClick(event);
-            }
-        }
-    };
-
-    handleReset = event => {
-        this.props.onReset(event);
-        if (this.input) {
-            this.input.focus();
-        }
-    };
-
-    handleBlur = event => {
-        if (
-            (!this.input || !this.input.contains(event.relatedTarget))
-            && this.props.onBlur
-        ) {
-            this.props.onBlur(event);
-        }/* else if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
-            this.input.focus();
-        }*/
-    };
-
-    ref = el => {
-        this.input = el;
-        if (this.props.refElement) {
-            this.props.refElement(el);
-        }
-    };
-
-    render() {
-        const {
-            classes,
-            noButton,
-            disabled,
-            onClick,
-            onReset,
-            value,
-            open,
-            focused,
-            error,
-            id,
-            placeholder,
-        } = this.props;
-
-        // On utilise classNames pour variabiliser les styles et merge les classes appliquées
-        const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
-            [classes.disabled]: disabled,
-            [classes.focused]: focused,
-            [classes.error]: error && !focused,
-            [classes.rootMobile]: isMobile,
-        });
-
-        const iconClass = classNames(classes.icon, {
-            [classes.iconOpen]: open,
-            [classes.iconClose]: !open,
-        });
-
-        return noButton ? (
-            <div
-                id={id}
-                className={rootClass}
-                onClick={onClick}
-                onMouseEnter={this.props.onMouseEnter}
-                onMouseLeave={this.props.onMouseLeave}
-                onKeyDown={this.handleKeyDown}
-                onFocus={this.props.onFocus}
-                onBlur={this.props.onBlur}
-                role="button"
-                tabIndex="0"
-                ref={this.ref}
-            >
-                <span
-                    className={classNames(classes.label, {
-                        [classes.placeholder]: value === undefined,
-                    })}
-                >
-                    {value || placeholder}
-                </span>
-                <ArrowDropDownIcon className={iconClass} />
-            </div>
-        ) : (
-            <ButtonBase
-                component="div"
-                id={id}
-                className={rootClass}
-                onClick={this.handleClick}
-                disabled={disabled}
-                onMouseEnter={this.props.onMouseEnter}
-                onMouseLeave={this.props.onMouseLeave}
-                onKeyDown={this.handleKeyDown}
-                onFocus={this.props.onFocus}
-                onBlur={this.handleBlur}
-                // buttref={this.ref}
-                buttonRef={this.ref}
-            >
-                <span
-                    className={classNames(classes.label, {
-                        [classes.placeholder]: value === undefined,
-                    })}
-                >
-                    {value || placeholder}
-                </span>
-                {onReset && focused && (
-                    <div
-                        ref={el => {
-                            this.resetIcon = el;
-                        }}
-                    >
-                        <HiIcon icon="close" size={20} color="neutral" onClick={this.handleReset} onKeyDown={this.handleKeyDownReset} tabIndex={0} />
-                    </div>
-                )}
-                <Icon classes={{ root: iconClass }}>
-                    <ArrowDropDownIcon />
-                </Icon>
-            </ButtonBase>
-        );
-    }
-}
-
-export default withStyles(styles, { hiComponent: true, name: 'HmuiHiSelectInput' })(HiSelectInput);

package/src/HiSelect/HiSelectInput.test.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow } from '../test-utils';
-import HiSelectInput from './HiSelectInput';
-import ButtonBase from '@material-ui/core/ButtonBase';
-import { spy } from 'sinon';
-
-describe('<SelectInput />', () => {
-    let shallow;
-
-    it('should render a ButtonBase', () => {
-        const handler = spy();
-        shallow = createShallow();
-        const wrapper = shallow(
-            <HiSelectInput
-                value="Zinédine Zidane"
-                open={false}
-                focused={false}
-                disabled={false}
-                onClick={handler}
-            />,
-        );
-        assert.strictEqual(wrapper.dive().find(ButtonBase).length, 1, 'should be a ButtonBase');
-    });
-});

package/src/HiSelect/HiSelectMobile.js

@@ -1,129 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-export const styles = theme => ({
-    root: {
-        position: 'absolute',
-        opacity: '0',
-        marginTop: -40,
-        height: 40,
-    },
-});
-
-class HiSelectMobile extends React.Component{
-
-    static propTypes = {
-        /**
-         * Identifiant du select
-         */
-        id: PropTypes.string,
-        /**
-         * Liste des options du select
-         */
-        itemList: PropTypes.array.isRequired,
-        /**
-         * True s'il est possible de sélectionner plusieurs options
-         */
-        multiple: PropTypes.bool,
-        /**
-         * Fonction appelée lors de la sélection/désélection
-         */
-        onChange: PropTypes.func.isRequired,
-        /**
-         * Valeur(s) sélectionnée(s)
-         */
-        value: PropTypes.any,
-        /**
-         * Largeur du select
-         */
-        width: PropTypes.number,
-    };
-
-    static defaultProps = {
-        itemList: [],
-    };
-
-    buildOptionList = (itemList) => {
-        let optionList = [];
-        if (itemList.length) {
-            let parentId;
-            let groupList = [];
-            itemList.forEach(item => {
-                if (item.id !== '_all' && item.displayed !== false) {
-                    if (item.hasChildren) {
-                        if (groupList.length) {
-                            optionList.push(this.buildChildrenList(groupList));
-                            groupList = [];
-                        }
-                        parentId = item.id;
-                        groupList.push(item);
-                    } else if (parentId) {
-                        groupList.push(item);
-                    } else if (item.children) {
-                        optionList.push(this.buildChildrenList([item, ...item.children]));
-                    } else {
-                        optionList.push(<option key={item.id} data-item={JSON.stringify(item)} value={item.id}>{item.label}</option>);
-                    }
-                }
-            });
-            if (groupList.length) {
-                optionList.push(this.buildChildrenList(groupList));
-            }
-        }
-        return optionList;
-    };
-
-    buildChildrenList = (itemList) => {
-        const group = itemList.shift();
-        return (
-            <optgroup key={group.id} label={group.label}>
-                {itemList.map(item => {
-                    return <option key={item.id} data-item={JSON.stringify(item)} value={item.id}>{item.label}</option>;
-                })}
-            </optgroup>
-        );
-    };
-
-    handleChange = event => {
-        if (!this.props.multiple) {
-            const itemSelected = event.target[event.target.selectedIndex];
-            this.props.onChange(event, JSON.parse(itemSelected.getAttribute('data-item')));
-        } else {
-            // Multiple on mobile trigger on change with all selected items
-            let optionsSelected = [];
-            Array.prototype.forEach.call(event.target.options, option => {
-                if (option.selected) {
-                    optionsSelected.push(JSON.parse(option.getAttribute('data-item')));
-                }
-            });
-            this.props.onChange(event, optionsSelected);
-        }
-    };
-
-    render() {
-        const { classes, id, itemList, multiple, value } = this.props;
-
-        const additionalProps = {
-            ...(multiple && {
-                multiple: 'multiple',
-            }),
-        };
-
-        return (
-            <select
-                value={value}
-                style={{ width: this.props.width }}
-                onChange={this.handleChange}
-                className={classes.root}
-                name={id}
-                id={id}
-                {...additionalProps}
-            >
-                {this.buildOptionList(itemList)}
-            </select>
-        );
-    }
-}
-
-export default withStyles(styles)(HiSelectMobile);