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

package/src/HiDotsStepper/HiDotsStepper.test.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import { createShallow, createMount } from '../test-utils';
-import HiDotsStepper from './HiDotsStepper';
-import HiDot from './HiDot';
-
-describe('<HiDotsStepper />', () => {
-    let shallow;
-    let mount;
-    let wrapper;
-
-    const props = {
-        steps: [
-            { id: 0, status: 'validated' },
-            { id: 1, status: 'unreviewed' },
-            { id: 2, status: 'refused' },
-        ],
-        activeStep: 0,
-    };
-
-    before(() => {
-        shallow = createShallow();
-    });
-
-    beforeEach(() => {
-        mount = createMount();
-    });
-
-    afterEach(() => {
-        mount.cleanUp();
-    })
-
-    describe('Working onClick & onNavigation callbacks', () => {
-        it('should test onClick callbacks', () => {
-            const handleChange = spy();
-
-            wrapper = shallow(<HiDotsStepper {...props} onChange={handleChange} />);
-
-            wrapper
-                .dive()
-                .find(HiDot)
-                .at(1)
-                .props()
-                .onClick();
-
-            assert.strictEqual(handleChange.calledOnce, true);
-            assert.strictEqual(handleChange.calledWith(1), true);
-        });
-
-        it('should test onNavigation callbacks', () => {
-            const handleChange = spy();
-
-            wrapper = mount(<HiDotsStepper {...props} onChange={handleChange} />);
-            wrapper
-                .find('button')
-                .at(0)
-                .simulate('focus');
-
-            // Active step = 0
-            // -> = 1
-            wrapper
-                .find('div[role="presentation"]')
-                .at(0)
-                .simulate('keyDown', { key: 'ArrowRight' });
-            assert.strictEqual(handleChange.calledOnce, true);
-            assert.strictEqual(handleChange.calledWith(1), true);
-            // <- = 2
-            wrapper
-                .find('div[role="presentation"]')
-                .at(0)
-                .simulate('keyDown', { key: 'ArrowLeft' });
-            assert.strictEqual(handleChange.calledTwice, true);
-            assert.strictEqual(handleChange.calledWith(2), true);
-
-            // Active step = 2
-            wrapper.setProps({ activeStep: 2 });
-            wrapper.update();
-            wrapper
-                .find('button')
-                .at(2)
-                .simulate('focus');
-            // -> = 1
-            wrapper
-                .find('div[role="presentation"]')
-                .at(0)
-                .simulate('keyDown', { key: 'ArrowRight' });
-            assert.strictEqual(handleChange.calledThrice, true);
-            assert.strictEqual(handleChange.calledWith(1), true);
-            // <- = 1
-            wrapper
-                .find('div[role="presentation"]')
-                .at(0)
-                .simulate('keyDown', { key: 'ArrowLeft' });
-            assert.strictEqual(handleChange.callCount, 4);
-            assert.strictEqual(handleChange.calledWith(1), true);
-        });
-    });
-
-    describe('mount', () => {
-        describe('callbacks', () => {
-            it('should instanciate correctly', () => {
-                wrapper = mount(<HiDotsStepper {...props} />);
-
-                assert.instanceOf(wrapper.instance(), HiDotsStepper);
-            });
-        });
-    });
-});

package/src/HiDotsStepper/index.js

@@ -1,2 +0,0 @@
-export { default as HiDot } from './HiDot';
-export { default as HiDotsStepper } from './HiDotsStepper';

package/src/HiExpansionPanel/HiExpansionPanel.js

@@ -1,193 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import { makeStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import MenuUp from 'mdi-material-ui/MenuUp';
-
-const useStyles = makeStyles(theme => ({
-    summaryContent: {
-        display: 'flex',
-        alignItems: 'baseline',
-        justifyContent: 'space-between',
-        border: 'none',
-        '&$expanded': {
-            margin: 'initial',
-        },
-        maxWidth: '100%',
-    },
-    summaryRoot: {
-        borderBottom: '1px solid #E3E6E7',
-        height: 48,
-        minHeight: 48,
-        padding: 0,
-        '&$expanded': {
-            minHeight: 48,
-        },
-    },
-    expanded: {},
-    collapseDisable: {
-        cursor: 'default',
-        pointerEvents: 'none',
-    },
-    heading: {
-        ...theme.typography.b1,
-        height: 48,
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: 20,
-        lineHeight: '24px',
-        fontWeight: theme.typography.fontWeightLight,
-    },
-    secondaryHeading: {
-        ...theme.typography.b3,
-        color: theme.palette.neutral.light,
-        height: 48,
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: 11,
-        '&>svg': {
-            fontSize: 18,
-            marginLeft: 3,
-        },
-        '&>button': {
-            marginRight: -12,
-        },
-        marginLeft: 24,
-        overflow: 'hidden',
-    },
-    secondaryHeadingSpan: {
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-    },
-    panel: {
-        boxShadow: 'none',
-        border: 'none',
-    },
-    panelDetails: {
-        padding: '8px 0 24px 0',
-    },
-    panelDetailsExited: {
-        display: 'none',
-    },
-    disabledPanel: {
-        backgroundColor: '#ffffff',
-        opacity: 1,
-    },
-    expandIcon: {
-        width: 24,
-        height: 24,
-        right: 0,
-    },
-}));
-
-/**
- * HiExpansionPanel
- */
-function HiExpansionPanel (props) {
-
-    const {
-        disabled,
-        heading,
-        secondaryHeading,
-        secondaryHeadingDisabled,
-        secondaryHeadingIcon,
-        collapseDisable,
-        children,
-        expanded,
-        TransitionProps,
-        ...others
-    } = props;
-
-    const classes = useStyles(props);
-
-    const [panelDetailsExited, setPanelDetailsExited] = useState(!collapseDisable && !expanded);
-
-    const effectiveDisabled = disabled || !children;
-
-    return (
-        <ExpansionPanel
-            disabled={effectiveDisabled}
-            expanded={collapseDisable || expanded}
-            TransitionProps={{
-                onExited: () => setPanelDetailsExited(true),
-                onEnter: () => setPanelDetailsExited(false),
-                ...TransitionProps,
-            }}
-            {...others}
-            classes={{
-                root: classes.panel,
-                disabled: classes.disabledPanel
-            }}
-        >
-            <ExpansionPanelSummary
-                classes={{
-                    root: classes.summaryRoot,
-                    content: classes.summaryContent,
-                    expanded: classes.expanded,
-                    expandIcon: classes.expandIcon
-                }}
-                className={classNames({[classes.collapseDisable]: collapseDisable})}
-                expandIcon={!collapseDisable && <MenuUp/>}
-            >
-                <div className={classes.heading}>{heading}</div>
-                <div className={classes.secondaryHeading}>
-                    <span className={classes.secondaryHeadingSpan}>{!effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled}</span>
-                    {secondaryHeadingIcon}
-                </div>
-            </ExpansionPanelSummary>
-            {!!children && (
-                <ExpansionPanelDetails className={classNames(classes.panelDetails, {[classes.panelDetailsExited]: panelDetailsExited})}>
-                    {children}
-                </ExpansionPanelDetails>
-            )}
-        </ExpansionPanel>
-    );
-}
-
-HiExpansionPanel.propTypes = {
-    /**
-     * Contenu du panel
-     */
-    children: PropTypes.any,
-    /**
-     * Surcharge les classes du composant
-     */
-    classes: PropTypes.object,
-    /**
-     * Désactive l'action d'ouverture et de fermeture du composant
-     */
-    collapseDisable: PropTypes.bool,
-    /**
-     * Désactivé
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Titre principal du panel
-     */
-    heading: PropTypes.any,
-    /**
-     * Titre secondaire du panel
-     */
-    secondaryHeading: PropTypes.string,
-    /**
-     * Titre secondaire si désactivé
-     */
-    secondaryHeadingDisabled: PropTypes.string,
-    /**
-     * Icone dans le titre secondaire du panel
-     */
-    secondaryHeadingIcon: PropTypes.any,
-};
-
-HiExpansionPanel.defaultProps = {
-    disabled: false,
-    secondaryHeading: '',
-    secondaryHeadingIcon: '',
-    secondaryHeadingDisabled: '',
-};
-
-export default HiExpansionPanel;

package/src/HiExpansionPanel/HiExpansionPanel.md

@@ -1,17 +0,0 @@
-HiExpansionPanel example:
-
-```js
-<div>
-    <HiExpansionPanel heading="Organisation" secondaryHeading="Mise à jour le 21/02/18 10:27">
-        <p style={{padding: 8}}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
-            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-    </HiExpansionPanel>
-</div>
-
-```

package/src/HiExpansionPanel/index.js

@@ -1,3 +0,0 @@
-import HiExpansionPanel from './HiExpansionPanel';
-
-export default HiExpansionPanel;

package/src/HiForm/HiAddressField.js

@@ -1,121 +0,0 @@
-// @inheritedComponent HiSuggestSelectField
-import React from 'react';
-import PropTypes from 'prop-types';
-import HiSuggestSelectField from '../HiSelect/HiSuggestSelectField';
-
-// OpenStreeMap API url
-const API_URL = 'https://nominatim.openstreetmap.org/search?q=';
-
-/**
- * Champs input adresse pour formulaire
- */
-class HiAddressField extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            inputValue: null,
-            options: [],
-            isExact: false,
-        };
-
-        this.handleSearch = this.handleSearch.bind(this);
-        this.handleSelect = this.handleSelect.bind(this);
-        this.handleReset = this.handleReset.bind(this);
-        this.displaySuggestions = this.displaySuggestions.bind(this);
-    }
-
-    displaySuggestions = (predictions) => {
-        const options = [];
-        let isExact = false;
-
-        predictions.forEach(prediction => {
-            // Si le texte saisi est identique à une des propositions, on estime que la valeur de l'adresse est exacte.
-            isExact = prediction.display_name === this.state.inputValue ? true : isExact;
-
-            options.push({
-                id: prediction.place_id,
-                label: prediction.display_name,
-                labelHighlight: prediction.display_name.replace(
-                    new RegExp(this.value, 'gi'),
-                    '<strong>$&</strong>',
-                ),
-                // Liste des types d'adresse : https://github.com/openstreetmap/Nominatim/blob/80df4d3b560f5b1fd550dcf8cdc09a992b69fee0/settings/partitionedtags.def
-                icon: ['amenity', 'building'].includes(prediction.category) ? 'domain' : 'place',
-                type: 'icon',
-                key: prediction.id,
-            });
-        }, this);
-        this.setState({ options, isExact });
-    }
-
-    handleSearch(event) {
-        if (event.target.value) {
-            this.setState({ inputValue: event.target.value });
-
-            fetch(`${API_URL} + ${this.state.inputValue} + &format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1`)
-                .then(result => result.json())
-                .then(data => {
-                    this.displaySuggestions(data, 'OK');
-                });
-        } else {
-            this.setState({ options: [] });
-        }
-        this.props.onSearch(event);
-    }
-
-    handleReset() {
-        this.props.onReset();
-        this.setState({
-            options: [],
-            isExact: false,
-        });
-    }
-
-    handleSelect(event, value) {
-        // Mise à jour de la valeur du champ + la valeur de l'adresse est exacte
-        this.setState({ options: [], isExact: true });
-        this.props.onSelect(event, value.label);
-    }
-
-    render() {
-        const { exactOnly, onSearch, onReset, onSelect, ...otherProps } = this.props;
-        const { options, isExact } = this.state;
-
-        // On met le champ en erreur si une adresse exacte est éxigée
-        // et si l'adresse courante n'est pas complète
-        const showError = exactOnly && !isExact;
-
-        return (
-            <HiSuggestSelectField
-                error={showError}
-                options={options}
-                onSearch={this.handleSearch}
-                onSelect={this.handleSelect}
-                onReset={this.handleReset}
-                isExact={isExact}
-                {...otherProps}
-            />
-        );
-    }
-}
-
-HiAddressField.propTypes = {
-    /**
-     * Est-ce qu'on n'accepte que les adresses trouvées par GMaps
-     */
-    exactOnly: PropTypes.bool,
-    /**
-     *  Callback function called to empty the field.
-     */
-    onReset: PropTypes.func,
-    /**
-     *  Callback function called when we write in the input.
-     */
-    onSearch: PropTypes.func,
-    /**
-     *  Callback function called when a suggestion is selected.
-     */
-    onSelect: PropTypes.func,
-};
-
-export default HiAddressField;

package/src/HiForm/HiAddressField.test.js

@@ -1,111 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import { createShallow } from '../test-utils';
-import HiAddressField from './HiAddressField';
-import HiSuggestSelectField from '../HiSelect/HiSuggestSelectField';
-import HiSuggestSelect from '../HiSelect/HiSuggestSelect';
-
-require('isomorphic-fetch'); // pour la méthode fetch()
-
-describe('<HiAddressField />', () => {
-    let shallow;
-
-    before(() => {
-        shallow = createShallow();
-    });
-
-    it('should render HiAddressField', () => {
-        const handler = spy();
-        const wrapper = shallow(<HiAddressField onSearch={handler} />, {
-            disableLifecycleMethods: true,
-        });
-        const fakeEvent = { target: { value: 'search' } };
-        wrapper
-            .find(HiSuggestSelectField)
-            .props()
-            .onSearch(fakeEvent);
-        assert.strictEqual(handler.calledOnce, true, 'should have been called once.');
-        assert.strictEqual(
-            handler.calledWith(fakeEvent),
-            true,
-            'should have been called with "search".',
-        );
-    });
-
-    it('should reset HiAddressField', () => {
-        const handler = spy();
-        const wrapper = shallow(<HiAddressField onReset={handler} />, {
-            disableLifecycleMethods: true,
-        });
-        wrapper.setState({ isExact: true, options: ['not_empty'] });
-        wrapper
-            .find(HiSuggestSelectField)
-            .props()
-            .onReset();
-        assert.strictEqual(handler.calledOnce, true, 'should have been called once.');
-        wrapper.update();
-        assert.strictEqual(wrapper.props().isExact, false, 'should not be exact after reset');
-        assert.strictEqual(
-            wrapper
-                .find(HiSuggestSelectField)
-                .dive()
-                .find(HiSuggestSelect)
-                .props().options.length,
-            0,
-            'should have been emptied',
-        );
-    });
-
-    it('should select a value for HiAddressField', () => {
-        const handler = spy();
-        const wrapper = shallow(<HiAddressField onSelect={handler} />, {
-            disableLifecycleMethods: true,
-        });
-        const fakeEvent = {};
-        const fakeTextValue = 'test';
-        const fakeValue = { label: fakeTextValue };
-        wrapper
-            .find(HiSuggestSelectField)
-            .props()
-            .onSelect(fakeEvent, fakeValue);
-        wrapper.update();
-        assert.strictEqual(
-            wrapper.props().isExact,
-            true,
-            'should be exact after a proposition has been selected',
-        );
-        assert.strictEqual(
-            wrapper
-                .find(HiSuggestSelectField)
-                .dive()
-                .find(HiSuggestSelect)
-                .props().options.length,
-            0,
-            'should have been emptied',
-        );
-    });
-
-    it('should render a HiAddressField expecting a real address', () => {
-        const wrapper = shallow(<HiAddressField exactOnly />, {
-            disableLifecycleMethods: true,
-        });
-        assert.strictEqual(
-            wrapper
-                .find(HiSuggestSelectField)
-                .dive()
-                .props().error,
-            true,
-            'should be on error.',
-        );
-        wrapper.setState({ isExact: true });
-        assert.strictEqual(
-            wrapper
-                .find(HiSuggestSelectField)
-                .dive()
-                .props().error,
-            false,
-            'should not be on error.',
-        );
-    });
-});

package/src/HiForm/HiEmailField.js

@@ -1,68 +0,0 @@
-// @inheritedComponent HiTextField
-import React from 'react';
-import PropTypes from 'prop-types';
-import validator from 'validator';
-import HiTextField from './HiTextField';
-
-/**
- * Champs input email pour formulaire
- */
-class HiEmailField extends React.Component {
-    static propTypes = {
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Si `true`, le champs sera en erreur.
-         */
-        error: PropTypes.bool,
-        /**
-         * Texte de l'erreur
-         */
-        errorText: PropTypes.string,
-        /**
-         * Fonction de callback appelée lorsqu'on quitte le champs input
-         */
-        onBlur: PropTypes.func,
-        /**
-         * Fonction appelée en cas d'erreur
-         */
-        onError: PropTypes.func,
-        /**
-         * Valeur de l'élément input
-         */
-        value: PropTypes.string,
-    };
-
-    constructor(props) {
-        super(props);
-        this.handleBlur = this.handleBlur.bind(this);
-    }
-
-    handleBlur = () => {
-        if (this.props.onError && this.props.value !== '' && !validator.isEmail(this.props.value)) {
-            this.props.onError();
-        }
-
-        if (this.props.onBlur) {
-            this.props.onBlur();
-        }
-    };
-
-    render() {
-        const { error, errorText, ...otherProps } = this.props;
-
-        return (
-            <HiTextField
-                {...otherProps}
-                type="email"
-                error={error}
-                errorText={errorText}
-                onBlur={this.handleBlur}
-            />
-        );
-    }
-}
-
-export default HiEmailField;

package/src/HiForm/HiEmailField.test.js

@@ -1,20 +0,0 @@
-// @flow weak
-
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow } from '../test-utils';
-import HiEmailField from './HiEmailField';
-import HiTextField from './HiTextField';
-
-describe('<HiEmailField />', () => {
-    let shallow;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-    });
-
-    it('should render a <HiTextField />', () => {
-        const wrapper = shallow(<HiEmailField id="test" />);
-        assert.strictEqual(wrapper.find(HiTextField).length, 0, 'render HiTextField');
-    });
-});