@hipay/hipay-material-ui 3.4.2 → 3.5.0

package/src/HiDatePicker/HiDatePicker.test.js

@@ -0,0 +1,417 @@
+/* eslint-disable */
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import DayPickerInput from 'react-day-picker/DayPickerInput';
+import { createShallow, createMount, getClasses } from '../test-utils';
+import HiDatePicker from './HiDatePicker';
+import HiInput from '../HiForm/HiInput';
+import Paper from '@material-ui/core/Paper';
+import { Overlay, TimePickerOverlay, MonthPickerOverlay, YearPickerOverlay } from './Overlays';
+import Caption from './Caption';
+
+describe('<HiDatePicker />', () => {
+    let shallow;
+    let mount;
+    let classes;
+
+    before(() => {
+        shallow = createShallow({ dive: true });
+        mount = createMount();
+        classes = getClasses(<HiDatePicker id="single-day" onChange={() => {}} />);
+    });
+
+    after(() => {
+        mount.cleanUp();
+    });
+
+    describe('shallow', () => {
+        it('renders a div containing a DayPickerInput', () => {
+            const wrapper = shallow(<HiDatePicker onChange={() => {}} />);
+            assert.strictEqual(wrapper.name(), 'div', 'should render a div');
+            assert.strictEqual(
+                wrapper.find(DayPickerInput).length,
+                1,
+                'should render a DayPickerInput',
+            );
+        });
+
+        it('should handle input day picker interface', () => {
+            const date = new Date();
+            const newDate = new Date('20-06-1998');
+            const handlerChange = spy();
+            const handlerReset = spy();
+            const wrapper = shallow(
+                <HiDatePicker
+                    value={date}
+                    onChange={handlerChange}
+                    onReset={handlerReset}
+                    showOverlay
+                />,
+            );
+
+            assert.strictEqual(
+                wrapper.state().openedPanel,
+                'calendar',
+                'should have initial openedPanel',
+            );
+
+            assert.strictEqual(
+                wrapper.state().currentMonth,
+                date,
+                'should have initial currentMonth',
+            );
+
+            const dayPickerInput = wrapper.find(DayPickerInput);
+            dayPickerInput.props().onDayChange(newDate, {});
+            assert.strictEqual(
+                handlerChange.calledWith(newDate),
+                true,
+                'should call onChange callback',
+            );
+
+            dayPickerInput.props().inputProps.onReset();
+            assert.strictEqual(handlerReset.calledOnce, true, 'should call onReset callback');
+        });
+
+        it('should disable past days', () => {
+            const handlerChange = spy();
+            const date = new Date(2018, 2, 18);
+            const wrapper = shallow(
+                <HiDatePicker value={date} onChange={handlerChange} disablePastDays showOverlay />,
+            );
+        });
+
+        it('should disable future days', () => {
+            const handlerChange = spy();
+            const date = new Date(2018, 2, 18);
+            const wrapper = shallow(
+                <HiDatePicker
+                    value={date}
+                    onChange={handlerChange}
+                    disableFutureDays
+                    showOverlay
+                />,
+            );
+        });
+
+        it('should enable time', () => {
+            const handlerChange = spy();
+            const date = new Date(2018, 2, 18);
+            const wrapper = shallow(
+                <HiDatePicker value={date} onChange={handlerChange} enableTime showOverlay />,
+            );
+        });
+
+        it('should hide on escape', () => {
+            const handlerChange = spy();
+            const wrapper = mount(
+                <HiDatePicker onChange={handlerChange} id="test-escape" />,
+            );
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+            wrapper.find(HiInput).simulate('click');
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            wrapper.find(HiInput).simulate('keydown', { keyCode: 27, key: 'Escape' });
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+        });
+    });
+
+    /* TODO - Mount Tests failed since 06/05/2018
+    describe('mount', () => {
+        it('should mount with current date', () => {
+            const handleChange = spy();
+            const wrapper = mount(
+                <HiDatePicker onChange={handleChange} showOverlay id="single-day" />,
+            );
+
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not not have been called handleChange',
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0);
+            wrapper.find('input').simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.type(), HiDatePicker);
+        });
+
+        it('should mount with fixed date without time', () => {
+            const handleChange = spy();
+            const date = new Date(2018, 0, 1);
+            const wrapper = mount(
+                <HiDatePicker onChange={handleChange} showOverlay id="single-day" value={date} />,
+            );
+
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not not have been called handleChange',
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0, 'should not have a Paper');
+            wrapper.find('input').simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1, 'should have a Paper');
+            assert.strictEqual(wrapper.type(), HiDatePicker, 'should be a HiDatePicker');
+            assert.strictEqual(
+                wrapper.find('button').length,
+                3,
+                'should have 3 buttons (prev, next, today)',
+            );
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not not have been called handleChange too',
+            );
+
+            // Check default selected day
+            assert.strictEqual(wrapper.find('div.selected').text(), '1', 'should have selected 1');
+
+            // Click on second day
+            wrapper
+                .find(`div.${classes.day}`)
+                .at(1)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                1,
+                'should have been called twice handleChange',
+            );
+            assert.strictEqual(
+                handleChange.args[0][0].toLocaleDateString('fr-FR'),
+                '2018-1-2',
+                'should have new date value',
+            );
+
+            // Click on selected day
+            wrapper.find('div.selected').simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                2,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[0][1], undefined, 'should have undefined value');
+
+            // Click on month
+            wrapper
+                .find(Caption)
+                .find('span')
+                .at(0)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(MonthPickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+            wrapper
+                .find(MonthPickerOverlay)
+                .find('span')
+                .at(8)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(MonthPickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+
+            // Click on year
+            wrapper
+                .find(Caption)
+                .find('span')
+                .at(1)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(YearPickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+            wrapper
+                .find(YearPickerOverlay)
+                .find('span')
+                .at(8)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(YearPickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+
+            wrapper.find('input').simulate('blur');
+            assert.strictEqual(wrapper.find(Paper).length, 0, 'should not have a Paper anymore');
+        });
+
+        it('should mount with time', () => {
+            const handleChange = spy();
+            const date = new Date(2018, 0, 1);
+            const wrapper = mount(
+                <HiDatePicker
+                    onChange={handleChange}
+                    showOverlay
+                    id="single-day"
+                    enableTime
+                    value={date}
+                />,
+            );
+
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not not have been called handleChange',
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0);
+            wrapper.find('input').simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            assert.strictEqual(wrapper.type(), HiDatePicker);
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find('button').length, 4);
+            // Click on time
+            wrapper
+                .find('button')
+                .at(2)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 0);
+
+            // Click on calendar
+            wrapper
+                .find('button')
+                .at(0)
+                .simulate('click');
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+
+            // Click on second day
+            wrapper
+                .find(Overlay)
+                .find(`div.${classes.day}`)
+                .at(1)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                1,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[0][0].getHours(), 0, 'should set hours to 0');
+            assert.strictEqual(handleChange.args[0][0].getMinutes(), 0, 'should set minutes to 0');
+        });
+
+        it('should mount with time and default value', () => {
+            const handleChange = spy();
+            const date = new Date(2018, 0, 1, 6, 44);
+            const wrapper = mount(
+                <HiDatePicker
+                    onChange={handleChange}
+                    showOverlay
+                    id="single-day"
+                    enableTime
+                    value={date}
+                />,
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0);
+            wrapper.find('input').simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            assert.strictEqual(wrapper.type(), HiDatePicker);
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+            assert.strictEqual(wrapper.find('button').length, 4);
+
+            // Click on second day
+            wrapper
+                .find(`div.${classes.day}`)
+                .at(2)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                1,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[0][0].getHours(), 6, 'should keep hours');
+            assert.strictEqual(handleChange.args[0][0].getMinutes(), 44, 'should keep minutes');
+        });
+
+        it('should mount with time and without default value', () => {
+            const handleChange = spy();
+            const wrapper = mount(
+                <HiDatePicker onChange={handleChange} showOverlay id="single-day" enableTime />,
+            );
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 0);
+
+            wrapper.find('input').simulate('focus');
+
+            const day = wrapper.find(`div.${classes.day}`).at(8);
+            // Click on day
+            day.simulate('click');
+
+            assert.strictEqual(wrapper.find(TimePickerOverlay).length, 1);
+
+            assert.strictEqual(
+                handleChange.callCount,
+                1,
+                'should have been called once handleChange',
+            );
+            assert.strictEqual(handleChange.args[0][0].getHours(), 0, 'should set hours to 0');
+            assert.strictEqual(handleChange.args[0][0].getMinutes(), 0, 'should set minutes to 0');
+
+            // Clik on hour
+            wrapper
+                .find(TimePickerOverlay)
+                .find('ul')
+                .find('li')
+                .at(5)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                2,
+                'should have been called twice handleChange',
+            );
+            assert.strictEqual(handleChange.args[1][0].getHours(), 5, 'should set hours to 5');
+
+            // Clik on minute
+            wrapper
+                .find(TimePickerOverlay)
+                .find('ul')
+                .at(1)
+                .find('li')
+                .at(37)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                3,
+                'should have been called twice handleChange',
+            );
+            assert.strictEqual(
+                handleChange.args[2][0].getMinutes(),
+                37,
+                'should set minutes to 37',
+            );
+        });
+
+        it('should mount with disabled date', () => {
+            const handleChange = spy();
+            const wrapper = mount(
+                <HiDatePicker
+                    onChange={handleChange}
+                    showOverlay
+                    id="single-day"
+                    disablePastDays
+                />,
+            );
+
+            assert.strictEqual(wrapper.find(Paper).length, 0);
+            wrapper.find('input').simulate('focus');
+            assert.strictEqual(wrapper.find(Paper).length, 1);
+            assert.strictEqual(wrapper.find(Overlay).length, 1);
+            assert.strictEqual(wrapper.type(), HiDatePicker);
+
+            // Click to past month
+            wrapper
+                .find('button')
+                .at(0)
+                .simulate('click');
+
+            // Click to disabled day
+            wrapper
+                .find(Overlay)
+                .find('div.disabled')
+                .at(5)
+                .simulate('click');
+            assert.strictEqual(
+                handleChange.callCount,
+                0,
+                'should not have been called handleChange',
+            );
+        });
+    });
+*/
+});

package/src/HiDatePicker/HiDatePickerMobile.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiFormControl from '../HiForm/HiFormControl';
+import moment from 'moment-timezone';
+import styles from './stylesheet';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import HiInput from '../HiForm/HiInput';
+
+class HiDatePickerMobile extends React.Component{
+
+    static propTypes = {
+        classes: PropTypes.object,
+        disabled: PropTypes.bool,
+        disableFutureDays: PropTypes.bool,
+        disablePastDays: PropTypes.bool,
+        enableTime: PropTypes.bool,
+        error: PropTypes.bool,
+        errorText: PropTypes.string,
+        format: PropTypes.string,
+        helperIcon: PropTypes.string,
+        helperText: PropTypes.string,
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        label: PropTypes.string,
+        minimumDate: PropTypes.any,
+        onChange: PropTypes.func,
+        range: PropTypes.bool,
+        required: PropTypes.bool,
+        today: PropTypes.any,
+        value: PropTypes.any,
+    };
+
+    render () {
+        const {
+            classes,
+            id,
+            label,
+            required,
+            disabled,
+            error,
+            errorText,
+            helperIcon,
+            helperText,
+            enableTime,
+            value,
+            disablePastDays,
+            disableFutureDays,
+            minimumDate,
+            today,
+            range,
+            format,
+        } = this.props;
+
+        const addtionalProps = {
+            ...(this.props.disabled && {
+                disabled: "disabled",
+            }),
+        };
+
+        return (
+            <HiFormControl
+                id={id}
+                label={label}
+                required={required}
+                disabled={disabled}
+                error={error}
+                errorText={errorText}
+                helperText={helperText}
+                helperIcon={helperIcon}
+            >
+                <HiInput
+                    inputId={id}
+                    name={id}
+                    type="text"
+                    placeholder={this.props.placeholder}
+                    value={!value ? '' : moment(value).format(format)}
+                    disabled={disabled}
+                />
+                <input
+                    className={classNames(classes.root, classes.rootMobile, { [classes.mobileRangeRoot]: range })}
+                    id={id}
+                    type={enableTime ? "datetime-local" : "date"}
+                    value={!value ? '' : enableTime ? moment(value).format('YYYY-MM-DDTHH:mm') : moment(value).format('YYYY-MM-DD')}
+                    onChange={this.props.onChange}
+                    min={disablePastDays ? today.format('YYYY-MM-DD') : minimumDate ? moment(minimumDate).format('YYYY-MM-DD') : ''}
+                    max={disableFutureDays ? today.format('YYYY-MM-DD') : ''}
+                    {...addtionalProps}
+                />
+            </HiFormControl>
+        );
+    }
+}
+
+export default withStyles(styles)(HiDatePickerMobile);