@hipay/hipay-material-ui 3.12.0 → 3.12.2

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 '@mui/styles/withStyles';
-import Radio from '@mui/material/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 '@mui/material/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/HiScrollStepper/HiScrollStepper.js

@@ -1,181 +0,0 @@
-import React, {useState, useEffect, useMemo} from 'react';
-import {useCounter, useMap, useMount} from 'react-use';
-import HiStepper from '../HiStepper';
-import HiStep from '../HiStepper/HiStep';
-import HiIconButton from '../HiIconButton';
-import HiIcon from '../HiIcon';
-import makeStyles from '@mui/styles/makeStyles';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const useStyles = makeStyles(theme => ({
-    root: {
-        display: 'flex'
-    },
-    stepperNav: {
-        position: 'relative',
-        marginRight: 80
-    },
-    stepperSteps: {
-        width: 'auto'
-    },
-    stepperWrapper: {
-        position: 'sticky',
-        top: 20,
-        zIndex: 2
-    },
-    hiStepper: {
-        background: 'transparent',
-    },
-    hideLabelToggle: {
-        position: 'absolute',
-        top: 0,
-        left: '100%',
-        marginLeft: theme.spacing(4),
-        background: theme.palette.background3,
-        padding: theme.spacing(2),
-        boxShadow: '0 2px 6px rgba(0,0,0,0.2)'
-    },
-}));
-
-const HiScrollStepper = ({
-    steps,
-    stepLabelVisibilityToggle = true,
-    stepLabelDefaultVisible = true,
-    onShowStepLabel,
-    onHideStepLabel,
-    customClasses = {},
-    stepMargin = 60
-}) => {
-    const classes = useStyles();
-
-    const [status, {set: setStatus }] = useMap({0: 'in_progress'});
-    const [activeStep, { set: setActiveStep }] = useCounter(0, steps.length-1, 0);
-    const [stepLabelVisible, setStepLabelVisible] = useState(stepLabelDefaultVisible);
-    let instantActiveStep = 0;
-
-    const stepsRef = useMemo(() => Array(steps.length).fill(0).map(() => React.createRef()), []);
-
-    const getOffsetTop = (element) => {
-        let offsetTop = 0;
-        while(element) {
-            offsetTop += element.offsetTop;
-            element = element.offsetParent;
-        }
-        return offsetTop;
-    };
-
-    const scrollToStep = (index) => {
-        window.scrollTo({top: getOffsetTop(stepsRef[index].current) - stepMargin, behavior: 'smooth'});
-    };
-
-    const handleScroll = () => {
-
-        let newActiveStep = 0;
-        const scrollOffset = window.pageYOffset;
-
-        if (scrollOffset < stepMargin) {
-            newActiveStep = 0;
-        }
-
-        else if (scrollOffset + window.innerHeight >= document.body.scrollHeight) {
-            newActiveStep = steps.length-1;
-        }
-
-        else {
-            let stepIndex = 0;
-            while (stepIndex < steps.length) {
-                const stepHeight = stepsRef[stepIndex].current.offsetHeight;
-                const stepBottomOffset = getOffsetTop(stepsRef[stepIndex].current) + (stepHeight - stepMargin);
-                if (stepBottomOffset > scrollOffset) {
-                    newActiveStep = stepIndex;
-                    break;
-                }
-                stepIndex++;
-            }
-        }
-
-        if (newActiveStep !== instantActiveStep) {
-            instantActiveStep = newActiveStep;
-            setActiveStep(newActiveStep);
-            steps.forEach((step, stepIndex) => {
-                setStatus(stepIndex, stepIndex === newActiveStep ? 'in_progress' : null)
-            });
-        }
-    };
-
-    const handleStepLabelVisibility = () => {
-        const newVisibility = !stepLabelVisible;
-        if (newVisibility === true && typeof onShowStepLabel === 'function') {
-            onShowStepLabel();
-        }
-        if (newVisibility === false && typeof onHideStepLabel === 'function') {
-            onHideStepLabel();
-        }
-        setStepLabelVisible(newVisibility);
-    };
-
-    useMount(() => {
-        window.addEventListener('scroll', handleScroll);
-    });
-
-    useEffect(() => {
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
-
-    return (
-        <div className={classNames(classes.root, customClasses.root)}>
-            <div className={classNames(classes.stepperNav, customClasses.stepperNav)}>
-                <div className={classNames(classes.stepperWrapper, customClasses.stepperWrapper)}>
-                    <HiStepper
-                        activeStep={activeStep}
-                        className={classNames(classes.hiStepper, customClasses.hiStepper)}
-                    >
-                        {steps.map((step, index) => (
-                            <HiStep
-                                key={index}
-                                onClick={() => scrollToStep(index)}
-                                indicator={step.indicator}
-                                label={stepLabelVisible ? step.label : null}
-                                status={status[index]}
-                            />
-                        ))}
-                    </HiStepper>
-                </div>
-                {stepLabelVisibilityToggle && (
-                    <HiIconButton
-                        className={classNames(classes.hideLabelToggle, customClasses.hideLabelToggle)}
-                        onClick={handleStepLabelVisibility}
-                    >
-                        <HiIcon icon={stepLabelVisible ? 'chevron_left' : 'chevron_right'}/>
-                    </HiIconButton>
-                )}
-            </div>
-            <div className={classNames(classes.stepperSteps, customClasses.stepperSteps)}>
-                {steps.map((step, index) => (
-                    <div key={index} ref={stepsRef[index]}>
-                        {step.content}
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};
-
-HiScrollStepper.propTypes = {
-    steps: PropTypes.arrayOf(PropTypes.shape({
-        label: PropTypes.string.required,
-        indicator: PropTypes.oneOf([PropTypes.string, PropTypes.element]),
-        content: PropTypes.element.required,
-    })),
-    stepLabelVisibilityToggle: PropTypes.bool,
-    stepLabelDefaultVisible: PropTypes.bool,
-    onHideStepLabel: PropTypes.func,
-    onShowStepLabel: PropTypes.func,
-    customClasses: PropTypes.object,
-    stepMargin: PropTypes.number,
-};
-
-export default HiScrollStepper;

package/src/HiScrollStepper/HiScrollStepper.md

@@ -1,56 +0,0 @@
-HiScrollStepper example:
-
-```js
-import React, {useRef, useState} from 'react';
-
-const DemoStep = (props) => (
-    <div style={{
-        backgroundColor: 'grey', 
-        height: props.height,
-        padding: 20,
-        marginBottom: 20
-    }}>
-        <h2>Step {props.number}</h2>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur assumenda atque beatae cum dignissimos eos error, eveniet illum minus nobis, nostrum quasi sed sunt tempora ullam! Dolorem libero possimus repellendus.
-        </p>
-    </div>
-);
-
-function HiScrollSteppers() {
-    
-    const steps = [
-        {
-            label: "Step 1",
-            indicator: "1",
-            content: <DemoStep number={1} height={400}/>,
-        },
-        {
-            label: "Step 2",
-            indicator: <div style={{color: 'yellow'}}>2</div>,
-            content: <DemoStep number={2} height={200}/>,
-        },
-        {
-            label: "Step 3",
-            content: <DemoStep number={3} height={900}/>,
-        },
-        {
-            label: "Step 4",
-            indicator: "4",
-            content: <DemoStep number={4} height={300}/>,
-        },
-    ];
-
-    return (
-        <HiScrollStepper
-            steps={steps}
-            stepLabelVisibilityToggle={true}
-            stepLabelDefaultVisible={false}
-            onHideStepLabel={() => console.log('step label hidden')}
-            onShowStepLabel={() => console.log('step label visible')}
-        />              
-   
-    );
-}
-;<HiScrollSteppers/>
-```

package/src/HiScrollStepper/index.js

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

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;