@hipay/hipay-material-ui 3.12.1 → 3.12.2

package/src/HiDatePicker/HiDateRangeSelector.test.js

@@ -1,191 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-import { assert } from 'chai';
-import moment from 'moment-timezone';
-import { spy, useFakeTimers } from 'sinon';
-import { createMount, createShallow } from '../test-utils';
-import HiDateRangeSelector from './HiDateRangeSelector';
-import { HiSelectField } from '../HiSelect';
-import HiDateRangePicker from './HiDateRangePicker';
-import { HiInput } from '../HiForm';
-
-describe('<HiDateRangeSelector />', () => {
-    let shallow;
-    let mount;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-        mount = createMount();
-    });
-
-    after(() => {
-        mount.cleanUp();
-    });
-    //
-    // describe('shallow', () => {
-    //     it('renders a div containing 1 HiSelectField & 1 DateRangePicker', () => {
-    //         const wrapper = shallow(
-    //             <HiDateRangeSelector
-    //                 idSelect="idSelect"
-    //                 idRange="idRange"
-    //                 onChange={() => {}}
-    //             />,
-    //         );
-    //
-    //         assert.strictEqual(
-    //             wrapper.find(HiSelectField).length,
-    //             1,
-    //             'should render a HiSelectField',
-    //         );
-    //         assert.strictEqual(
-    //             wrapper.find(HiDateRangePicker).length,
-    //             1,
-    //             'should render a DateRangePicker',
-    //         );
-    //     });
-    //
-    //     it('should handle 2 input day picker interface', () => {
-    //         const from = new Date(2018, 1, 17);
-    //         const to = new Date(2019, 2, 18);
-    //         const handleChange = spy();
-    ////
-    //         const wrapper = shallow(
-    //             <HiDateRangeSelector
-    //                 idSelect="idSelect"
-    //                 idRange="idRange"
-    //                 from={from}
-    //                 to={to}
-    //                 labelFrom={'Start'}
-    //                 labelTo={'End'}
-    //                 onChange={handleChange}
-    //             />,
-    //         );
-    //
-    //         wrapper
-    //             .find(HiSelectField)
-    //             .dive()
-    //             .childAt(0)
-    //             .props()
-    //             .onChange('selectedPreset', 'pm');
-    //
-    //         // OnChange is call twice because it set from and to date
-    //         assert.strictEqual(
-    //             handleChange.calledTwice,
-    //             true,
-    //             'should call onChange callback twice',
-    //         );
-    //         assert.strictEqual(
-    //             handleChange.calledWith(
-    //                 'from',
-    //                 moment()
-    //                     .subtract(1, 'month')
-    //                     .startOf('month')
-    //                     .toDate(),
-    //             ),
-    //             true,
-    //             'should call onChange callback once',
-    //         );
-    //         assert.strictEqual(
-    //             handleChange.calledWith(
-    //                 'to',
-    //                 moment()
-    //                     .subtract(1, 'month')
-    //                     .endOf('month')
-    //                     .toDate(),
-    //             ),
-    //             true,
-    //             'should call onChange callback once',
-    //         );
-    //     });
-    //
-    //     it('should ignore unknown options', () => {
-    //         const handleChange = spy();
-    //
-    //         const wrapper = shallow(
-    //             <HiDateRangeSelector
-    //                 idSelect="idSelect"
-    //                 idRange="idRange"
-    //                 labelFrom={'Start'}
-    //                 labelTo={'End'}
-    //                 onChange={handleChange}
-    //                 availableOptionKeys={['unknown']}
-    //             />,
-    //         );
-    //
-    //         wrapper
-    //             .find(HiSelectField)
-    //             .dive()
-    //             .childAt(0)
-    //             .props()
-    //             .onChange('selectedPreset', 'pm');
-    //
-    //         // OnChange is call twice because it set from and to date
-    //         assert.strictEqual(handleChange.callCount, 0, 'should not call onChange callback');
-    //     });
-    // });
-    //
-    // describe('mount', () => {
-    //     let clock;
-    //
-    //     before(() => {
-    //         clock = useFakeTimers();
-    //     });
-    //
-    //     after(() => {
-    //         clock.restore();
-    //     });
-    //
-    //     it('should mount', () => {
-    //         const handleChange = spy();
-    //         const handleReset = spy();
-    //         const wrapper = mount(
-    //             <HiDateRangeSelector
-    //                 idSelect="idSelect"
-    //                 idRange="idRange"
-    //                 label={'Order date'}
-    //                 onChange={handleChange}
-    //             />,
-    //         );
-    //
-    //         assert.strictEqual(
-    //             wrapper.find(HiSelectField).length,
-    //             1,
-    //             'should render a HiSelectField',
-    //         );
-    //         assert.strictEqual(
-    //             wrapper.find(HiDateRangePicker).length,
-    //             1,
-    //             'should render a DateRangePicker',
-    //         );
-    //
-    //         wrapper
-    //             .find(HiSelectField)
-    //             .props()
-    //             .onChange('selectedPreset', 'pm');
-    //
-    //         // OnChange is call twice because it set from and to date
-    //         assert.strictEqual(
-    //             handleChange.calledTwice,
-    //             true,
-    //             'should call onChange callback twice',
-    //         );
-    //
-    //         wrapper
-    //             .find(HiSelectField)
-    //             .props()
-    //             .onChange('selectedPreset', 'custom');
-    //
-    //         assert.strictEqual(handleChange.calledTwice, true, 'should not call onChange callback');
-    //
-    //         wrapper
-    //             .find(HiInput)
-    //             .at(0)
-    //             .props()
-    //             .onReset();
-    //
-    //         assert.strictEqual(handleReset.callCount, 0);
-    //         clock.tick(1);
-    //         assert.strictEqual(handleChange.callCount, 3);
-    //     });
-    // });
-});

package/src/HiDatePicker/ListPicker.js

@@ -1,114 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Scrollbars } from 'react-custom-scrollbars';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-import withStyles from '@mui/styles/withStyles';
-
-export const styles = theme => ({
-    itemRoot: {
-        '&:hover': {
-            backgroundColor: theme.palette.hover,
-        },
-    },
-    itemSelected: {
-        fontWeight: theme.typography.fontWeightMedium,
-        backgroundColor: theme.palette.selected,
-    },
-    itemCentered: {
-        margin: 'auto',
-    },
-    currentDateItem: {
-        color: `${theme.palette.primary.main} !important`,
-    },
-});
-
-class ListPicker extends React.PureComponent {
-    static propTypes = {
-        /**
-         * Useful to extend the style applied to components.
-         */
-        classes: PropTypes.object,
-        /**
-         * Initialise la liste scrollée au milieu
-         */
-        initAtMiddleScroll: PropTypes.bool,
-        /**
-         * Liste des items
-         */
-        itemList: PropTypes.array,
-        /**
-         * Fonction de callback au click d'un item
-         */
-        onItemClick: PropTypes.func,
-        /**
-         * Item sélectionné
-         */
-        selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        /**
-         * Type des données dans la liste
-         */
-        type: PropTypes.oneOf(['year', 'month']),
-    };
-
-    static defaultProps = {
-        initAtMiddleScroll: true,
-    };
-
-    componentDidMount() {
-        if (this.position && this.scrollbars) {
-            this.scrollbars.scrollTop((this.position - 2) * 40);
-        } else if (this.props.initAtMiddleScroll && this.scrollbars) {
-            this.scrollbars.scrollTop(
-                (this.scrollbars.getScrollHeight() - this.scrollbars.getClientHeight()) / 2 + 20,
-            );
-        }
-    }
-
-    scrollbars;
-
-    position;
-
-    render() {
-        const { classes, itemList, onItemClick, selectedItem, type } = this.props;
-
-        this.position = itemList.indexOf(selectedItem);
-        const now = new Date();
-
-        return (
-            <Scrollbars
-                autoHide
-                ref={ref => {
-                    this.scrollbars = ref;
-                }}
-            >
-                <MenuList>
-                    {itemList.map((item, index) => {
-                        const labelClass = classNames(classes.itemCentered, {
-                            [classes.currentDateItem]:
-                                (type === 'year' && now.getFullYear() === item) ||
-                                (type === 'month' && now.getMonth() === index),
-                        });
-
-                        return (
-                            <MenuItem
-                                key={`item-${item}`}
-                                classes={{
-                                    root: classes.itemRoot,
-                                    selected: classes.itemSelected,
-                                }}
-                                onClick={() => onItemClick(item)}
-                                selected={item === selectedItem}
-                            >
-                                <span className={labelClass}>{item}</span>
-                            </MenuItem>
-                        );
-                    })}
-                </MenuList>
-            </Scrollbars>
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'HmuiListPicker' })(ListPicker);

package/src/HiDatePicker/ListPicker.test.js

@@ -1,87 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-import { createShallow, createMount } from '../test-utils/index';
-import ListPicker from './ListPicker';
-
-describe('<ListPicker />', () => {
-    let shallow;
-    let mount;
-    let itemList;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-        itemList = [1, 2, 3, 4];
-    });
-
-    beforeEach(() => {
-        mount = createMount();
-    });
-
-    afterEach(() => {
-        mount.cleanUp();
-    });
-
-    describe('shallow', () => {
-        it('renders a Scrollable MenuList', () => {
-            const handlerClick = spy();
-
-            const wrapper = shallow(
-                <ListPicker
-                    itemList={itemList}
-                    onItemClick={handlerClick}
-                    selectedItem={2}
-                    initAtMiddleScroll
-                />,
-            );
-
-            assert.strictEqual(
-                wrapper.name(),
-                'Scrollbars',
-                'should render a Scrollbars container',
-            );
-            assert.strictEqual(
-                wrapper.dive().find(MenuList).length,
-                1,
-                'should include a MenuList',
-            );
-            assert.strictEqual(
-                wrapper.dive().find(MenuItem).length,
-                4,
-                'should include 4 MenuItem',
-            );
-
-            // Click on [4] item
-            wrapper
-                .dive()
-                .find(MenuItem)
-                .at(3)
-                .props()
-                .onClick();
-
-            assert.strictEqual(handlerClick.calledOnce, true, 'should call onChange callback once');
-            assert.strictEqual(
-                handlerClick.calledWith(4),
-                true,
-                'should call onChange callback with selected item',
-            );
-        });
-    });
-
-    describe('mount', () => {
-        it('should mount', () => {
-            const wrapper = mount(
-                <ListPicker
-                    itemList={itemList}
-                    onItemClick={() => {}}
-                    selectedItem={2}
-                    initAtMiddleScroll
-                />,
-            );
-
-            assert.strictEqual(wrapper.name(), 'WithStyles(ListPicker)');
-        });
-    });
-});

package/src/HiDatePicker/NavBar.js

@@ -1,124 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import IconButton from '@mui/material/IconButton';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import AccessTime from '@mui/icons-material/AccessTime';
-import withStyles from '@mui/styles/withStyles';
-
-export const styles = theme => ({
-    root: {
-        width: '100%',
-        height: 40,
-        marginBottom: -40,
-        borderBottom: '1px solid',
-        borderBottomColor: theme.palette.divider,
-    },
-    button: {
-        height: 32,
-        width: 32,
-        margin: '4px 24px',
-        padding: 0,
-    },
-    left: {
-        float: 'left',
-    },
-    right: {
-        float: 'right',
-    },
-    bottomLeft: {
-        position: 'absolute',
-        left: 0,
-        bottom: 0,
-    },
-});
-
-const NavBar = ({
-    classes,
-    locale = 'en_US',
-    localeUtils,
-    nextMonth,
-    onClockClick,
-    onPreviousClick,
-    onNextClick,
-    previousMonth,
-    showClockButton,
-}) => {
-    const months = localeUtils.getMonths(locale);
-    const prev = `${months[previousMonth.getMonth()]} ${previousMonth.getFullYear()}`;
-    const next = `${months[nextMonth.getMonth()]} ${nextMonth.getFullYear()}`;
-
-    return (
-        <div className={classes.root}>
-            <IconButton
-                className={classNames(classes.button, classes.left)}
-                onClick={() => onPreviousClick()}
-                title={prev}
-                size="large">
-                <ChevronLeftIcon />
-
-            </IconButton>
-            <IconButton
-                className={classNames(classes.button, classes.right)}
-                onClick={() => onNextClick()}
-                title={next}
-                size="large">
-                <ChevronRightIcon />
-            </IconButton>
-            {showClockButton && (
-                <IconButton
-                    className={classNames(classes.button, classes.bottomLeft)}
-                    onClick={() => onClockClick()}
-                    size="large">
-                    <AccessTime />
-                </IconButton>
-            )}
-        </div>
-    );
-};
-
-NavBar.propTypes = {
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * ReactDayPicker prop
-     */
-    locale: PropTypes.string,
-    /**
-     * ReactDayPicker prop
-     */
-    localeUtils: PropTypes.object,
-    /**
-     * ReactDayPicker prop
-     */
-    nextMonth: PropTypes.object,
-    /**
-     * Fonction de callback au click sur la Clock
-     */
-    onClockClick: PropTypes.func,
-    /**
-     * ReactDayPicker prop
-     */
-    onNextClick: PropTypes.func,
-    /**
-     * ReactDayPicker prop
-     */
-    onPreviousClick: PropTypes.func,
-    /**
-     * ReactDayPicker prop
-     */
-    previousMonth: PropTypes.object,
-    /**
-     * Ajoute l'icône Clock dans le footer
-     */
-    showClockButton: PropTypes.bool,
-};
-
-NavBar.defaultProps = {
-    showClockButton: false,
-};
-
-export default withStyles(styles, { hiComponent: true, name: 'HmuiNavBar' })(NavBar);

package/src/HiDatePicker/NavBar.test.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { spy } from 'sinon';
-import MomentLocaleUtils from 'react-day-picker/moment';
-import IconButton from '@mui/material/IconButton';
-import { createShallow } from '../test-utils/index';
-import NavBar from './NavBar';
-
-describe('<NavBar />', () => {
-    let shallow;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-    });
-
-    it('renders a Scrollable MenuList', () => {
-        const handlerNextClick = spy();
-        const handlerPreviousClick = spy();
-        const handlerClockClick = spy();
-
-        const nextMonth = new Date(2018, 3, 1);
-        const prevMonth = new Date(2018, 1, 1);
-
-        const wrapper = shallow(
-            <NavBar
-                nextMonth={nextMonth}
-                previousMonth={prevMonth}
-                onNextClick={handlerNextClick}
-                onPreviousClick={handlerPreviousClick}
-                onClockClick={handlerClockClick}
-                showClockButton
-                localeUtils={MomentLocaleUtils}
-            />,
-        );
-
-        assert.strictEqual(wrapper.find(IconButton).length, 3, 'should include 3 IconButtons');
-
-        // Click on [4] item
-        wrapper
-            .find(IconButton)
-            .at(0)
-            .props()
-            .onClick();
-        wrapper
-            .find(IconButton)
-            .at(1)
-            .props()
-            .onClick();
-        wrapper
-            .find(IconButton)
-            .at(2)
-            .props()
-            .onClick();
-
-        assert.strictEqual(
-            handlerPreviousClick.calledOnce,
-            true,
-            'should call onPreviousClick callback once',
-        );
-        assert.strictEqual(
-            handlerNextClick.calledOnce,
-            true,
-            'should call onNextClick callback once',
-        );
-        assert.strictEqual(
-            handlerClockClick.calledOnce,
-            true,
-            'should call onClockClick callback once',
-        );
-    });
-});

package/src/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -1,104 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Paper from '@mui/material/Paper';
-import withStyles from '@mui/styles/withStyles';
-
-export const styles = theme => ({
-    paper: {
-        width: '100%',
-        zIndex: 10,
-    },
-    absolute: {
-        position: 'absolute',
-    },
-    relative: {
-        position: 'relative',
-    },
-    left: {
-        width: '200%',
-        left: 0,
-    },
-    right: {
-        width: '200%',
-        left: '-100%',
-    },
-    overlay: {
-        padding: 0,
-        height: 325,
-        textAlign: 'center',
-        ...theme.typography.body2,
-        fontWeight: theme.typography.fontWeightRegular,
-    },
-    header: {
-        display: 'block',
-        height: 40,
-        textAlign: 'center',
-        padding: '10px 0',
-        ...theme.typography.body1,
-        color: theme.palette.neutral.main,
-        borderBottom: '1px solid',
-        borderBottomColor: theme.palette.divider,
-    },
-    body: {
-        height: 245,
-        width: 224,
-        margin: 'auto',
-    },
-    footer: {
-        height: 40,
-        padding: '10px 0',
-        borderTop: '1px solid',
-        borderTopColor: theme.palette.divider,
-    },
-});
-
-const CustomOverlayLayout = ({
-                                 classes,
-                                 children,
-                                 headerElement,
-                                 footerElement,
-                                 absoluteElement,
-                                 side,
-                                 staticPosition,
-                                 ...props
-                             }) => {
-    const paperClass = classNames(classes.paper, {
-        [classes.left]: side === 'from',
-        [classes.right]: side === 'to',
-        [classes.absolute]: staticPosition !== true,
-        [classes.relative]: staticPosition === true,
-    });
-
-    const paperProps = { ...props };
-
-    return (
-        // eslint-disable-next-line react/jsx-handler-names
-        <Paper className={paperClass} onBlur={paperProps.onBlur} onFocus={paperProps.onFocus}>
-            <div className={classes.overlay}>
-                <div className={classes.header}>{headerElement}</div>
-                <div className={classes.body}>{children}</div>
-                <div className={classes.footer}>{footerElement}</div>
-                {absoluteElement}
-            </div>
-        </Paper>
-    );
-};
-
-CustomOverlayLayout.propTypes = {
-    absoluteElement: PropTypes.any,
-    children: PropTypes.any,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    footerElement: PropTypes.any,
-    headerElement: PropTypes.any,
-    /**
-     * Définit comment construire le Paper dans le cas d'un double input
-     */
-    side: PropTypes.string,
-    staticPosition: PropTypes.bool,
-};
-
-export default withStyles(styles, { name: 'HmuiCustomOverlayLayout' })(CustomOverlayLayout);