@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.35

package/es/HiDatePicker/Overlays/YearPickerOverlay.spec.js

@@ -0,0 +1,92 @@
+// @flow
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import { createShallow } from '../../test-utils/index';
+import YearPickerOverlay from './YearPickerOverlay';
+import ListPicker from '../ListPicker';
+
+var _ref = React.createElement("span", null, "children");
+
+var _ref2 = React.createElement("span", null, "children");
+
+var _ref3 = React.createElement("span", null, "children");
+
+var _ref4 = React.createElement("span", null, "children");
+
+var _ref5 = React.createElement(YearPickerOverlay, {
+  disableFutureDays: true
+}, React.createElement("span", null, "children"));
+
+describe('<YearPickerOverlay />', () => {
+  let shallow;
+  before(() => {
+    shallow = createShallow({
+      dive: true
+    });
+  });
+  it('renders a functional year ListPicker', () => {
+    const handlerChange = spy();
+    const date = new Date(2018, 3, 9);
+    const dateUpYear = new Date(2022, 3, 9);
+    const dateDownYear = new Date(2014, 3, 9);
+    const wrapper = shallow(React.createElement(YearPickerOverlay, {
+      value: date,
+      onChange: handlerChange
+    }, _ref));
+    assert.strictEqual(wrapper.name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
+    assert.strictEqual(wrapper.dive().find(ListPicker).length, 1, 'should include 1 ListPicker'); // From 2013 to 2018 + 10
+
+    assert.strictEqual(wrapper.dive().find(ListPicker).props().itemList.length, 16, 'should include 1 ListPicker with 16 items');
+    wrapper.dive().find(ListPicker).props().onItemClick(2022);
+    assert.strictEqual(handlerChange.calledOnce, true, 'should call onChange callback once');
+    assert.strictEqual(handlerChange.calledWith(dateUpYear), true, 'should call onChange callback with updated year');
+    wrapper.dive().find(ListPicker).props().onItemClick(2014);
+    assert.strictEqual(handlerChange.calledTwice, true, 'should call onChange callback twice');
+    assert.strictEqual(handlerChange.calledWith(dateDownYear), true, 'should call onChange callback with updated year');
+  });
+  it('renders a functional year ListPicker with defaut date', () => {
+    const handlerChange = spy();
+    const currentDate = new Date();
+    const wrapper = shallow(React.createElement(YearPickerOverlay, {
+      onChange: handlerChange
+    }, _ref2));
+    assert.strictEqual(wrapper.name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
+    assert.strictEqual(wrapper.dive().find(ListPicker).length, 1, 'should include 1 ListPicker'); // From 2013 to 2018 + 10
+
+    assert.strictEqual(wrapper.dive().find(ListPicker).props().itemList.length, 16, 'should include 1 ListPicker with 16 items');
+    wrapper.dive().find(ListPicker).props().onItemClick(2022);
+    assert.strictEqual(handlerChange.calledOnce, true, 'should call onChange callback once');
+    currentDate.setFullYear(2022);
+    assert.isBelow(handlerChange.args[0][0].getTime() - currentDate.getTime(), 10, 'should call onChange callback with updated year');
+  });
+  it('renders a functional year ListPicker without callbacks', () => {
+    const date = new Date(2018, 3, 9);
+    const wrapper = shallow(React.createElement(YearPickerOverlay, {
+      value: date
+    }, _ref3));
+    assert.strictEqual(wrapper.name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
+    assert.strictEqual(wrapper.dive().find(ListPicker).length, 1, 'should include 1 ListPicker'); // From 2013 to 2018 + 10
+
+    assert.strictEqual(wrapper.dive().find(ListPicker).props().itemList.length, 16, 'should include 1 ListPicker with 16 items');
+    wrapper.dive().find(ListPicker).props().onItemClick(2022);
+  });
+  it('renders a functional year ListPicker with disabled past date', () => {
+    const handlerChange = spy();
+    const wrapper = shallow(React.createElement(YearPickerOverlay, {
+      onChange: handlerChange,
+      disablePastDays: true
+    }, _ref4));
+    assert.strictEqual(wrapper.name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
+    assert.strictEqual(wrapper.dive().find(ListPicker).length, 1, 'should include 1 ListPicker'); // 2018 + 10 (disabled past days)
+
+    assert.strictEqual(wrapper.dive().find(ListPicker).props().itemList.length, 11, 'should include 1 ListPicker with 11 items');
+  });
+  it('renders a functional year ListPicker with disabled future date', () => {
+    const wrapper = shallow(_ref5);
+    assert.strictEqual(wrapper.name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
+    assert.strictEqual(wrapper.dive().find(ListPicker).length, 1, 'should include 1 ListPicker'); // From 2013 to 2018 (disabled future days)
+
+    assert.strictEqual(wrapper.dive().find(ListPicker).props().itemList.length, 6, 'should include 1 ListPicker with 11 items');
+  });
+});

package/es/HiDatePicker/Overlays/index.js

@@ -1,3 +1,4 @@
+// @flow
 export { default as Overlay } from './Overlay';
 export { default as CustomOverlayLayout } from './CustomOverlayLayout';
 export { default as MonthPickerOverlay } from './MonthPickerOverlay';

package/es/HiDatePicker/Weekday.js

@@ -1,15 +1,18 @@
-//  weak
-
+// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Weekday = ({ weekday, className, localeUtils, locale }) => {
+const Weekday = ({
+  weekday,
+  className,
+  localeUtils,
+  locale
+}) => {
   const weekdayName = localeUtils.formatWeekdayLong(weekday, locale);
-  return React.createElement(
-    'div',
-    { className: className, title: weekdayName },
-    weekdayName.slice(0, 1)
-  );
+  return React.createElement("div", {
+    className: className,
+    title: weekdayName
+  }, weekdayName.slice(0, 1));
 };
 
 Weekday.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -17,18 +20,20 @@ Weekday.propTypes = process.env.NODE_ENV !== "production" ? {
    * ReactDayPicker prop
    */
   className: PropTypes.string,
+
   /**
    * ReactDayPicker prop
    */
   locale: PropTypes.string,
+
   /**
    * ReactDayPicker prop
    */
   localeUtils: PropTypes.object,
+
   /**
    * ReactDayPicker prop
    */
   weekday: PropTypes.number
 } : {};
-
 export default Weekday;

package/es/HiDatePicker/stylesheet.js

@@ -1,175 +1,191 @@
-import _extends from 'babel-runtime/helpers/extends';
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
 export default (theme => ({
-    root: {
-        position: 'relative',
-        display: 'inline-block',
-        width: '100%',
-        minWidth: 252,
-        maxWidth: 500
-    },
-    fromInput: {
-        position: 'relative',
-        display: 'inline-block',
-        width: 'calc(50% - 4px)',
-        paddingRight: 4
-    },
-    toInput: {
-        position: 'relative',
-        display: 'inline-block',
-        width: 'calc(50% - 4px)',
-        marginLeft: 4
-    },
-    // The container element
-    container: {
-        width: '100%',
-        display: 'inline-block',
-        fontFamily: theme.typography.fontFamily
-    },
-    // The wrapper element, used for keyboard interaction
-    wrapper: {
-        width: '100%',
-        position: 'relative',
-        userSelect: 'none',
-        flexDirection: 'row',
-        backgroundColor: theme.palette.background3
-    },
-    // TODO : Added to the container when there's no interaction with the calendar
-    interactionDisabled: {},
-    // The navigation bar with the arrows to switch between months
-    navBar: {},
-    // Button to switch to the previous month
-    navButtonPrev: {},
-    // Button to switch to the next month
-    navButtonNext: {},
-    // Added to the navbuttons when disabled with fromMonth/toMonth props
-    navButtonInteractionDisabled: {
-        display: 'none'
-    },
-    // Container of the months table
-    months: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        padding: '0 14px'
-    },
-    // The month's main table
-    month: {
-        display: 'table',
-        borderCollapse: 'collapse',
-        borderSpacing: 0,
-        userSelect: 'none'
-        // margin: '0 1rem',
-        // marginTop: '1rem',
-    },
-    // The caption element, containing the current month's name and year
-    caption: {
-        padding: '0 0.5rem',
-        display: 'table-caption',
-        textAlign: 'left',
-        marginBottom: '0.5rem',
-        '&div': {
-            fontSize: '1.15rem',
-            fontWeight: 500
-        }
-    },
-    // Table header displaying the weekdays names
-    weekdays: {
-        marginTop: '1rem',
-        display: 'table-header-group'
-    },
-    // Table row displaying the weekdays names
-    weekdaysRow: {
-        display: 'table-row',
-        height: 40
-    },
-    // Cell displaying the weekday name
-    weekday: _extends({
-        display: 'table-cell'
-    }, theme.typography.body2, {
-        color: theme.palette.neutral.normal,
-        fontWeight: theme.typography.fontWeightRegular,
-        textAlign: 'center',
-        verticalAlign: 'middle'
-    }),
-    // Table's body with the weeks
-    body: {
-        display: 'table-row-group',
-        padding: '12px 0'
-    },
-    week: {
-        display: 'table-row'
-    },
-    // Table's row for each week
-    weekNumber: {
-        display: 'table-cell',
-        padding: '0.5rem',
-        textAlign: 'right',
-        verticalAlign: 'middle',
-        minWidth: '1rem',
-        fontSize: '0.75em',
-        cursor: 'pointer',
-        color: '#8b9898',
-        borderRight: '1px solid #eaecec'
-    },
-    // The single day cell
-    day: _extends({
-        display: 'table-cell',
-        padding: '4px 8px',
-        textAlign: 'center',
-        cursor: 'pointer',
-        verticalAlign: 'middle',
-        outline: 'none'
-    }, theme.typography.body2, {
-        color: theme.palette.neutral.dark,
-        fontWeight: theme.typography.fontWeightRegular
-    }),
-    // The calendar footer (only with todayButton prop)
-    footer: {
-        marginTop: 12,
-        borderTop: '1px solid',
-        borderTopColor: theme.palette.line.stepper
-    },
-    // The today button (only with todayButton prop)
-    todayButton: _extends({
-        width: '100%',
-        border: 'none',
-        backgroundImage: 'none',
-        backgroundColor: 'transparent',
-        boxShadow: 'none',
-        cursor: 'pointer',
-        height: 40
-    }, theme.typography.body2, {
-        color: theme.palette.neutral.normal,
-        fontWeight: theme.typography.fontWeightMedium,
-        textTransform: 'uppercase'
-    }),
-    /* default modifiers */
-    // Added to the day's cell for the current day
-    today: {
-        color: theme.palette.business.primary.light,
-        fontWeight: theme.typography.fontWeightMedium
-    },
-    // Added to the day's cell outside the current month
-    outside: {
-        backgroundColor: '#F8F9FB',
-        color: theme.palette.neutral.normal
-    },
-    // Added to the day's cell specified in the "disabledDays" prop
-    disabled: {
-        color: '#dce0e0',
-        cursor: 'default'
-    },
-    // Added to the day's cell specified in the "selectedDays" prop
-    /*
-    selected: {
-        borderRadius: '50%',
-        backgroundColor: theme.palette.business.primary.normal,
-        color: theme.palette.business.primary.contrast,
-    },
-    */
-    selected: {
-        // backgroundColor: fade(theme.palette.business.primary.normal, 0.36),
-        backgroundColor: theme.palette.business.primary.normal,
-        color: theme.palette.business.primary.contrast
+  root: {
+    position: 'relative',
+    display: 'inline-block',
+    width: '100%',
+    minWidth: 252,
+    maxWidth: 500
+  },
+  fromInput: {
+    position: 'relative',
+    display: 'inline-block',
+    width: 'calc(50% - 4px)',
+    paddingRight: 4
+  },
+  toInput: {
+    position: 'relative',
+    display: 'inline-block',
+    width: 'calc(50% - 4px)',
+    marginLeft: 4
+  },
+  absolute: {
+    position: 'absolute'
+  },
+  right4: {
+    right: 4
+  },
+  dayPickerMargin: {
+    top: -337,
+    width: 'calc(100% - 4px)'
+  },
+  rangePickerContainer: {
+    display: 'flex',
+    alignItems: 'flex-start'
+  },
+  // The container element
+  container: {
+    width: '100%',
+    display: 'inline-block',
+    fontFamily: theme.typography.fontFamily
+  },
+  // The wrapper element, used for keyboard interaction
+  wrapper: {
+    width: '100%',
+    position: 'relative',
+    userSelect: 'none',
+    flexDirection: 'row',
+    backgroundColor: theme.palette.background3
+  },
+  // TODO : Added to the container when there's no interaction with the calendar
+  interactionDisabled: {},
+  // The navigation bar with the arrows to switch between months
+  navBar: {},
+  // Button to switch to the previous month
+  navButtonPrev: {},
+  // Button to switch to the next month
+  navButtonNext: {},
+  // Added to the navbuttons when disabled with fromMonth/toMonth props
+  navButtonInteractionDisabled: {
+    display: 'none'
+  },
+  // Container of the months table
+  months: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    padding: '0 14px'
+  },
+  // The month's main table
+  month: {
+    display: 'table',
+    borderCollapse: 'collapse',
+    borderSpacing: 0,
+    userSelect: 'none' // margin: '0 1rem',
+    // marginTop: '1rem',
+
+  },
+  // The caption element, containing the current month's name and year
+  caption: {
+    padding: '0 0.5rem',
+    display: 'table-caption',
+    textAlign: 'left',
+    marginBottom: '0.5rem',
+    '&div': {
+      fontSize: '1.15rem',
+      fontWeight: 500
     }
+  },
+  // Table header displaying the weekdays names
+  weekdays: {
+    marginTop: '1rem',
+    display: 'table-header-group'
+  },
+  // Table row displaying the weekdays names
+  weekdaysRow: {
+    display: 'table-row',
+    height: 40
+  },
+  // Cell displaying the weekday name
+  weekday: _objectSpread({
+    display: 'table-cell'
+  }, theme.typography.body2, {
+    color: theme.palette.neutral.main,
+    fontWeight: theme.typography.fontWeightRegular,
+    textAlign: 'center',
+    verticalAlign: 'middle'
+  }),
+  // Table's body with the weeks
+  body: {
+    display: 'table-row-group',
+    padding: '12px 0'
+  },
+  week: {
+    display: 'table-row'
+  },
+  // Table's row for each week
+  weekNumber: {
+    display: 'table-cell',
+    padding: '0.5rem',
+    textAlign: 'right',
+    verticalAlign: 'middle',
+    minWidth: '1rem',
+    fontSize: '0.75em',
+    cursor: 'pointer',
+    color: '#8b9898',
+    borderRight: '1px solid #eaecec'
+  },
+  // The single day cell
+  day: _objectSpread({
+    display: 'table-cell',
+    padding: '4px 8px',
+    textAlign: 'center',
+    cursor: 'pointer',
+    verticalAlign: 'middle',
+    outline: 'none'
+  }, theme.typography.body2, {
+    color: theme.palette.neutral.dark,
+    fontWeight: theme.typography.fontWeightRegular
+  }),
+  // The calendar footer (only with todayButton prop)
+  footer: {
+    marginTop: 12,
+    borderTop: '1px solid',
+    borderTopColor: theme.palette.divider
+  },
+  // The today button (only with todayButton prop)
+  todayButton: _objectSpread({
+    width: '100%',
+    border: 'none',
+    backgroundImage: 'none',
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
+    cursor: 'pointer',
+    height: 40
+  }, theme.typography.body2, {
+    color: theme.palette.neutral.main,
+    fontWeight: theme.typography.fontWeightMedium,
+    textTransform: 'uppercase'
+  }),
+
+  /* default modifiers */
+  // Added to the day's cell for the current day
+  today: {
+    color: theme.palette.primary.light,
+    fontWeight: theme.typography.fontWeightMedium
+  },
+  // Added to the day's cell outside the current month
+  outside: {
+    backgroundColor: '#F8F9FB',
+    color: theme.palette.neutral.main
+  },
+  // Added to the day's cell specified in the "disabledDays" prop
+  disabled: {
+    color: '#dce0e0',
+    cursor: 'default'
+  },
+  // Added to the day's cell specified in the "selectedDays" prop
+
+  /*
+  selected: {
+      borderRadius: '50%',
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.business.primary.contrastText,
+  },
+  */
+  selected: {
+    // backgroundColor: fade(theme.palette.business.primary.normal, 0.36),
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText
+  }
 }));