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

package/src/HiPin/HiPin.md

@@ -1,58 +0,0 @@
-HiPin example :
-
-```js
-import HiPin from './HiPin';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles(theme => ({
-   active: {
-           display: 'inline-flex',
-           margin: 'auto',
-           justifyContent: 'inherit',
-           '&:hover': {
-               backgroundColor: theme.palette.primary.dark,
-           },
-       },
-   inactive: {
-           display: 'inline-flex',
-           margin: 'auto',
-           justifyContent: 'inherit',
-           '&:hover': {
-               backgroundColor: theme.palette.neutral.main,
-           },
-       },
-   })
-);
-
-function HiPins(props) {
-    const classes = useStyles(props);
-    return (
-            <div>
-                <div>
-                    <HiPin>12</HiPin>
-                </div>
-                <div>
-                    <HiPin color="primary">12</HiPin>
-                </div>
-                <div>
-                    <HiPin 
-                        onClick={() => alert('click')}
-                        className={classes.inactive}
-                    >
-                        Clickable
-                    </HiPin>
-                </div>
-                <div>
-                    <HiPin 
-                        color="primary" 
-                        onClick={() => alert('click')}
-                        className={classes.active}
-                    >
-                        Clickable
-                    </HiPin>
-                </div>
-            </div>
-        );
-}
-;<HiPins/>
-```

package/src/HiPin/HiPin.test.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import sinon from 'sinon';
-import { createMount, createRender, createShallow } from '@material-ui/core/test-utils';
-import HiPin, { useStyles } from './HiPin';
-import Wrapper from '../styleguide/Wrapper';
-
-let HiPinWrapped = props => <Wrapper><HiPin {...props}/></Wrapper>;
-HiPinWrapped.useStyles = useStyles;
-
-describe('<HiPin />', () => {
-    let mount;
-    let render;
-    let shallow;
-
-    before(() => {
-        mount = createMount();
-        render = createRender();
-        shallow = createShallow();
-    });
-
-    after(() => {
-        mount.cleanUp();
-    });
-
-    it('mount', () => {
-        const wrapper = mount(<HiPinWrapped>x</HiPinWrapped>);
-    });
-
-    it('render', () => {
-        const wrapper = render(<HiPinWrapped>x</HiPinWrapped>);
-    });
-
-    it('mount - contains children', () => {
-        const wrapper = mount(<HiPinWrapped>test</HiPinWrapped>);
-        assert.equal(wrapper.find(HiPin).contains('test'), true);
-    });
-
-    it('mount - handle click', () => {
-        const handler = sinon.spy();
-        const wrapper = mount(<HiPinWrapped onClick={handler}>x</HiPinWrapped>);
-
-        // onClick callback
-        wrapper.find(HiPin).simulate('click');
-        assert.equal(handler.callCount, 1);
-
-        // clickable classes
-        const node = wrapper.getDOMNode();
-        assert.include(node.getAttribute('role'), 'button');
-        assert.include(node.className, 'root');
-        assert.include(node.className, 'clickable');
-    });
-
-    it('mount - apply colors', () => {
-        const wrapper = mount(<HiPinWrapped color="primary">x</HiPinWrapped>);
-        const node = wrapper.getDOMNode();
-
-        assert.include(node.className, 'primary');
-        wrapper.setProps({ color: "secondary" });
-        assert.include(node.className, 'secondary');
-        wrapper.setProps({ color: "positive" });
-        assert.include(node.className, 'positive');
-        wrapper.setProps({ color: "negative" });
-        assert.include(node.className, 'negative');
-        wrapper.setProps({ color: "middle" });
-        assert.include(node.className, 'middle');
-        wrapper.setProps({ color: "neutral" });
-        assert.include(node.className, 'neutral');
-    });
-
-});

package/src/HiPin/index.js

@@ -1 +0,0 @@
-export { default } from './HiPin';

package/src/HiRadio/HiRadio.js

@@ -1,62 +0,0 @@
-// @inheritedComponent Radio
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Radio from '@material-ui/core/Radio';
-
-export const styles = theme => ({
-    checked: {
-        color: theme.palette.neutral.main,
-    },
-    disabled: {
-        color: theme.palette.action.disabled,
-    },
-    root: {
-        height: 40,
-        width: 40,
-    },
-});
-
-const HiRadio = ({ checked, classes, className, color, disabled, label, onChange, value }) => {
-    const hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color)
-        ? 'default'
-        : color;
-
-    return (
-        <Radio
-            className={className}
-            classes={{ root: classes.root, checked: classes.checked, disabled: classes.disabled }}
-            checked={checked}
-            color={hcolor}
-            label={label}
-            onChange={onChange}
-            disabled={disabled}
-            value={value}
-        />
-    );
-};
-
-HiRadio.propTypes = {
-    checked: PropTypes.bool,
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    color: PropTypes.oneOf([
-        'inherit',
-        'primary',
-        'secondary',
-        'positive',
-        'negative',
-        'middle',
-        'neutral',
-    ]),
-    disabled: PropTypes.bool,
-    label: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.string,
-};
-
-HiRadio.defaultProps = {
-
-};
-
-export default withStyles(styles, { hiComponent: true, name: 'HmuiHiRadio' })(HiRadio);

package/src/HiRadio/HiRadio.md

@@ -1,82 +0,0 @@
-HiRadio example:
-
-```js
-import React from 'react';
-import HiRadio from '../HiRadio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormControl from '@material-ui/core/FormControl';
-import FormLabel from '@material-ui/core/FormLabel';
-
-class HiRadios extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            checkedA: true,
-            checkedB: false,
-            value: 'female',
-            isDisabled: true,
-        };
-        
-        this.handleChange = this.handleChange.bind(this);
-    }
-    
-    handleChange(event) {
-        this.setState({ value: event.target.value });
-
-        // If a precise radio is checked then enable a disabled radio
-        if (event.target.value === 'other') this.setState({ isDisabled: false });
-        else this.setState({ isDisabled: true });
-    };
-
-    render() {
-        return (
-            <div>
-                <div style={{marginBottom: 24}}>
-                    <FormControl component="fieldset">
-                        <FormLabel component="legend">Gender</FormLabel>
-                        <RadioGroup
-                            aria-label="Gender"
-                            name="gender1"
-                            value={this.state.value}
-                            onChange={this.handleChange}
-                        >
-                            <FormControlLabel value="female" control={<HiRadio color="primary" />} label="Female" />
-                            <FormControlLabel value="male" control={<HiRadio color="primary" />} label="Male" />
-                            <FormControlLabel value="other" control={<HiRadio color="primary" />} label="Other" />
-                            <FormControlLabel
-                                disabled={this.state.isDisabled}
-                                control={<HiRadio />}
-                                label="(Disabled option)"
-                                value="disabled"
-                            />
-                        </RadioGroup>
-                    </FormControl>
-                </div>
-                <div>
-                    <HiRadio
-                        checked={this.state.checkedA}
-                        color="primary"
-                        value="checkedA" />
-                    <HiRadio
-                        checked={this.state.checkedB}
-                        color="secondary"
-                        value="checkedB" />
-                    <HiRadio
-                        color="secondary"
-                        checked
-                        disabled
-                        value="checkedC" />
-                </div>
-                <div>
-                    <HiRadio color="primary" checked />
-                    <HiRadio color="secondary" checked />
-                    <HiRadio color="neutral" checked />
-                </div>
-            </div>
-        );
-    }
-}
-;<HiRadios/>
-
-```

package/src/HiRadio/HiRadio.test.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import { createMount, createShallow } from '../test-utils';
-import Radio from '@material-ui/core/Radio';
-import HiRadio from './HiRadio';
-
-describe('<HiRadio/>', () => {
-    let shallow;
-    let mount;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-    });
-
-    beforeEach(() => {
-        mount = createMount();
-    });
-
-    afterEach(() => {
-        mount.cleanUp();
-    });
-
-    it('Should render a Radio', () => {
-        const wrapper = shallow(<HiRadio />);
-        assert.strictEqual(wrapper.find(Radio).length, 1, 'render Radio');
-    });
-
-    const event = {
-        target: {
-            checked: false,
-        },
-    };
-
-    it('should call onChange exactly once with event', () => {
-        const onChangeSpy = spy();
-        const wrapper = mount(<HiRadio onChange={onChangeSpy} />);
-
-        assert.strictEqual(onChangeSpy.callCount, 0);
-
-        wrapper.find('input').simulate('change', event);
-        assert.strictEqual(onChangeSpy.callCount, 1);
-        assert.strictEqual(onChangeSpy.args[0][0].target, event.target);
-
-        onChangeSpy.resetHistory();
-    });
-
-    it('should call onChange exactly once with event', () => {
-        const onChangeSpy = spy();
-        const wrapper = mount(<HiRadio onChange={onChangeSpy} />);
-
-        assert.strictEqual(onChangeSpy.callCount, 0);
-
-        wrapper.find('input').simulate('change', null);
-        assert.strictEqual(onChangeSpy.callCount, 1);
-
-        onChangeSpy.resetHistory();
-    });
-
-    it('should mount', () => {
-        const wrapper = mount(<HiRadio onChange={undefined} />);
-
-        assert.strictEqual(wrapper.find(Radio).length, 1, 'render Radio');
-    });
-});

package/src/HiRadio/index.js

@@ -1 +0,0 @@
-export { default } from './HiRadio';

package/src/HiSelect/HiDynamicSelect.js

@@ -1,227 +0,0 @@
-// @inheritedComponent HiSelect
-import React from 'react';
-import PropTypes from 'prop-types';
-import HiSelect from './HiSelect';
-
-/**
- * HiDynamicSelect hérite du composant HiSelect
- *
- * Sa fonction buildSelectProps construit la liste des options
- * selon l'état du chargement des options.
- * La valeur de l'input n'est pas définie et hérite donc du comportement de HiSelect.
- * La prop nextPage définit le comportement pour la demande de nouvelle donnée:
- * - none: aucune nouvelles données
- * - auto: (ex infinity scroll) nouvelle demande lorsqu'on atteint le bas de scroll vertical
- * - manual: ajoute un bouton en bas de la liste.
- */
-class HiDynamicSelect extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * id du select
-         */
-        id: PropTypes.string,
-        /**
-         * Ajoute un loader
-         */
-        loading: PropTypes.bool,
-        /**
-         * Autorise la sélection de plusieurs valeurs
-         */
-        multiple: PropTypes.bool,
-        /**
-         * Nom du champ de formulaire
-         */
-        name: PropTypes.string.isRequired,
-        /**
-         * Variante sur la manière de demander des nouvelles données
-         * - none: (default) il n'y a pas de nouvelles données
-         * - auto: demande de nouvelles données lorsqu'on atteint le bas du scroll (infinite scroll)
-         * - manual: ajoute un bouton en bas de la liste d'options
-         */
-        nextPage: PropTypes.oneOf(['none', 'auto', 'manual']),
-        /**
-         * Fonction de callback qui renvoit la valeur sélectionnée
-         */
-        onChange: PropTypes.func.isRequired,
-        /**
-         * Requête de nouvelles données
-         */
-        onNextPage: PropTypes.func.isRequired,
-        /**
-         * Fonction de callback qui renvoit la valeur de l'input de recherche
-         */
-        onSearch: PropTypes.func.isRequired,
-        /**
-         * Listes des options du select
-         */
-        options: PropTypes.array.isRequired,
-        /**
-         * Valeur de l'input de recherche
-         */
-        searchValue: PropTypes.string.isRequired,
-        /**
-         * Traductions (par défaut en anglais)
-         */
-        translations: PropTypes.object,
-        /**
-         * Value(s) du select
-         */
-        value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
-    };
-
-    static defaultProps = {
-        loading: false,
-        multiple: false,
-        nextPage: 'none',
-        translations: {
-            no_result_match: 'No result match',
-            search: 'Search',
-            n_items_selected: '%s items selected',
-            one_item_selected: '%s item selected',
-            n_children: '%s items',
-            one_child: '%s item',
-            next_page: 'Load more',
-        },
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.handleScrollReachBottom = this.handleScrollReachBottom.bind(this);
-        this.handleSelect = this.handleSelect.bind(this);
-    }
-
-    handleScrollReachBottom = () => {
-        if (!this.props.loading && this.props.nextPage === 'auto' && this.props.onNextPage) {
-            this.props.onNextPage();
-        }
-    };
-
-    /**
-     * Call onChange with the updated value
-     *
-     * - handle single value
-     * - handle multiple value
-     *
-     * @param event
-     * @param item
-     */
-    handleSelect = (event, item) => {
-        const { multiple, onChange, value } = this.props;
-
-        if (
-            item.id === '_next_page' &&
-            !this.props.loading &&
-            this.props.nextPage === 'manual' &&
-            this.props.onNextPage
-        ) {
-            this.props.onNextPage();
-        }
-
-        if (!multiple) {
-            // single value
-            onChange(event, item.id, item);
-        } else if (value.includes(item.id)) {
-            // unselect item
-            onChange(event, value.filter(id => id !== item.id), item);
-        } else {
-            onChange(event, [...value, item.id], item);
-        }
-    };
-
-    /**
-     * Build itemList & inputValue from select props
-     * @param options
-     * @param value
-     * @param search
-     * @param loading
-     * @returns {{itemList: *[], inputValue: *}}
-     */
-    // eslint-disable-next-line no-unused-vars
-    buildSelectProps = (options, value = [], search = '', loading = false) => {
-        const { nextPage, translations } = this.props;
-
-        const itemList = [
-            // Empty and not loading => no result
-            ...(options.length === 0 && !loading
-                ? [
-                      {
-                          id: '_no_result',
-                          type: 'text',
-                          disabled: true,
-                          centered: true,
-                          hideCheckbox: true,
-                          label: translations.no_result_match,
-                      },
-                  ]
-                : []),
-            // options
-            ...options,
-            // Not loading and nextPage as manual button => manual button
-            ...(!loading && nextPage === 'manual'
-                ? [
-                      {
-                          id: '_next_page',
-                          type: 'button',
-                          centered: true,
-                          hideCheckbox: true,
-                          label: translations.next_page,
-                      },
-                  ]
-                : []),
-            // Loading => loader
-            ...(loading
-                ? [
-                      {
-                          id: '_loading',
-                          type: 'loader',
-                          disabled: true,
-                          centered: true,
-                          hideCheckbox: true,
-                          label: 'loading',
-                      },
-                  ]
-                : []),
-        ];
-
-        return {
-            itemList,
-        };
-    };
-
-    render() {
-        const {
-            hiSelectableListProps,
-            multiple,
-            nextPage,
-            options,
-            translations,
-            value,
-            ...other
-        } = this.props;
-
-        return (
-            <HiSelect
-                buildSelectProps={this.buildSelectProps}
-                hiSelectableListProps={{
-                    ...hiSelectableListProps,
-                }}
-                multiple={multiple}
-                options={options}
-                searchable
-                translations={translations}
-                value={value}
-                {...nextPage === 'auto' && {
-                    onScrollReachBottom: this.handleScrollReachBottom,
-                }}
-                {...other}
-            />
-        );
-    }
-}
-
-export default HiDynamicSelect;

package/src/HiSelect/HiDynamicSelectField.js

@@ -1,105 +0,0 @@
-// @inheritedComponent HiDynamicSelect
-import React from 'react';
-import PropTypes from 'prop-types';
-import HiFormControl from '../HiForm/HiFormControl';
-import HiDynamicSelect from './HiDynamicSelect';
-
-/**
- * Champs input pour formulaire
- */
-class HiDynamicSelectField extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Surcharge des styles
-         */
-        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.string,
-        /**
-         * 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,
-        /**
-         * Label du champs
-         */
-        label: PropTypes.string,
-        /**
-         * true si champs obligatoire
-         */
-        required: PropTypes.bool,
-    };
-
-    render() {
-        const {
-            label,
-            required,
-            disabled,
-            error,
-            errorText,
-            helperText,
-            helperIcon,
-            id,
-            name,
-            value,
-            options,
-            type,
-            multiple,
-            iconAll,
-            checkbox,
-            searchable,
-            translations,
-            className,
-            ...others
-        } = this.props;
-
-        return (
-            <HiFormControl
-                id={id}
-                label={label}
-                required={required}
-                disabled={disabled}
-                error={error}
-                errorText={errorText}
-                helperText={helperText}
-                helperIcon={helperIcon}
-                className={className}
-            >
-                <HiDynamicSelect
-                    id={id}
-                    name={name}
-                    value={value}
-                    options={options}
-                    type={type}
-                    multiple={multiple}
-                    iconAll={iconAll}
-                    checkbox={checkbox}
-                    searchable={searchable}
-                    translations={translations}
-                    disabled={disabled}
-                    error={error}
-                    {...others}
-                />
-            </HiFormControl>
-        );
-    }
-}
-
-export default HiDynamicSelectField;