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

package/es/HiDatePicker/ListPicker.js

@@ -1,112 +1,113 @@
-//  weak
-
+// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Scrollbars } from 'react-custom-scrollbars';
-import { MenuList, MenuItem } from 'material-ui/Menu';
+import MenuList from '@material-ui/core/MenuList';
+import MenuItem from '@material-ui/core/MenuItem';
 import withStyles from '../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.business.primary.normal} !important`
+  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 {
+  constructor(...args) {
+    super(...args);
+    this.scrollbars = void 0;
+    this.position = void 0;
+  }
 
-    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);
-        }
+  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);
     }
+  }
 
-    render() {
-        const { classes, itemList, onItemClick, selectedItem, type } = this.props;
-
-        this.position = itemList.indexOf(selectedItem);
-        let now = new Date();
+  render() {
+    const {
+      classes,
+      itemList,
+      onItemClick,
+      selectedItem,
+      type
+    } = this.props;
+    this.position = itemList.indexOf(selectedItem);
+    let now = new Date();
+    return React.createElement(Scrollbars, {
+      autoHide: true,
+      ref: ref => {
+        this.scrollbars = ref;
+      }
+    }, React.createElement(MenuList, null, itemList.map((item, index) => {
+      const labelClass = classNames(classes.itemCentered, {
+        [classes.currentDateItem]: type === 'year' && now.getFullYear() === item || type === 'month' && now.getMonth() === index
+      });
+      return React.createElement(MenuItem, {
+        key: `item-${item}`,
+        classes: {
+          root: classes.itemRoot,
+          selected: classes.itemSelected
+        },
+        onClick: () => onItemClick(item),
+        selected: item === selectedItem
+      }, React.createElement("span", {
+        className: labelClass
+      }, item));
+    })));
+  }
 
-        return React.createElement(
-            Scrollbars,
-            {
-                autoHide: true,
-                ref: ref => {
-                    this.scrollbars = ref;
-                }
-            },
-            React.createElement(
-                MenuList,
-                null,
-                itemList.map((item, index) => {
-                    const labelClass = classNames(classes.itemCentered, {
-                        [classes.currentDateItem]: type === 'year' && now.getFullYear() === item || type === 'month' && now.getMonth() === index
-                    });
-
-                    return React.createElement(
-                        MenuItem,
-                        {
-                            key: `item-${item}`,
-                            classes: {
-                                root: classes.itemRoot,
-                                selected: classes.itemSelected
-                            },
-                            onClick: () => onItemClick(item),
-                            selected: item === selectedItem
-                        },
-                        React.createElement(
-                            'span',
-                            { className: labelClass },
-                            item
-                        )
-                    );
-                })
-            )
-        );
-    }
 }
 
 ListPicker.defaultProps = {
-    initAtMiddleScroll: true
+  initAtMiddleScroll: true
 };
 ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * 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'])
+  /**
+   * 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'])
 } : {};
-export default withStyles(styles, { name: 'HmuiListPicker' })(ListPicker);
+export default withStyles(styles, {
+  name: 'HmuiListPicker'
+})(ListPicker);

package/es/HiDatePicker/ListPicker.spec.js

@@ -0,0 +1,51 @@
+// @flow
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import { MenuList, MenuItem } from 'material-ui/Menu';
+import { createShallow, createMount } from '../test-utils/index';
+import ListPicker from './ListPicker';
+describe('<ListPicker />', () => {
+  let shallow;
+  let mount;
+  let itemList;
+  before(() => {
+    shallow = createShallow({
+      dive: true
+    });
+    mount = createMount();
+    itemList = [1, 2, 3, 4];
+  });
+  after(() => {
+    mount.cleanUp();
+  });
+  describe('shallow', () => {
+    it('renders a Scrollable MenuList', () => {
+      const handlerClick = spy();
+      const wrapper = shallow(React.createElement(ListPicker, {
+        itemList: itemList,
+        onItemClick: handlerClick,
+        selectedItem: 2,
+        initAtMiddleScroll: true
+      }));
+      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(React.createElement(ListPicker, {
+        itemList: itemList,
+        onItemClick: () => {},
+        selectedItem: 2,
+        initAtMiddleScroll: true
+      }));
+      assert.strictEqual(wrapper.name(), 'WithStyles(ListPicker)');
+    });
+  });
+});

package/es/HiDatePicker/NavBar.js

@@ -0,0 +1,117 @@
+// @flow weak
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import IconButton from '@material-ui/core/IconButton';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import AccessTime from '@material-ui/icons/AccessTime';
+import withStyles from '../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'
+  },
+  left: {
+    float: 'left'
+  },
+  right: {
+    float: 'right'
+  },
+  bottomLeft: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0
+  }
+});
+
+var _ref = React.createElement(ChevronLeftIcon, null);
+
+var _ref2 = React.createElement(ChevronRightIcon, null);
+
+var _ref3 = React.createElement(AccessTime, null);
+
+const NavBar = ({
+  classes,
+  localeUtils,
+  nextMonth,
+  onClockClick,
+  onPreviousClick,
+  onNextClick,
+  previousMonth,
+  showClockButton
+}) => {
+  const months = localeUtils.getMonths();
+  const prev = `${months[previousMonth.getMonth()]} ${previousMonth.getFullYear()}`;
+  const next = `${months[nextMonth.getMonth()]} ${nextMonth.getFullYear()}`;
+  return React.createElement("div", {
+    className: classes.root
+  }, React.createElement(IconButton, {
+    className: classNames(classes.button, classes.left),
+    onClick: () => onPreviousClick(),
+    title: prev
+  }, _ref), React.createElement(IconButton, {
+    className: classNames(classes.button, classes.right),
+    onClick: () => onNextClick(),
+    title: next
+  }, _ref2), showClockButton && React.createElement(IconButton, {
+    className: classNames(classes.button, classes.bottomLeft),
+    onClick: () => onClockClick()
+  }, _ref3));
+};
+
+NavBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * 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, {
+  name: 'HmuiNavbar'
+})(NavBar);

package/es/HiDatePicker/NavBar.spec.js

@@ -0,0 +1,40 @@
+// @flow
+import React from 'react';
+import { assert } from 'chai';
+import { spy } from 'sinon';
+import MomentLocaleUtils from 'react-day-picker/moment';
+import IconButton from 'material-ui/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(React.createElement(Navbar, {
+      nextMonth: nextMonth,
+      previousMonth: prevMonth,
+      onNextClick: handlerNextClick,
+      onPreviousClick: handlerPreviousClick,
+      onClockClick: handlerClockClick,
+      showClockButton: true,
+      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/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -1,114 +1,104 @@
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-import _extends from 'babel-runtime/helpers/extends';
-//  weak
-
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import Paper from 'material-ui/Paper';
-
+import Paper from '@material-ui/core/Paper';
 import withStyles from '../../styles/withStyles';
-
 export const styles = theme => ({
-    paper: {
-        position: 'absolute',
-        width: '100%',
-        zIndex: 10
-    },
-    left: {
-        width: '200%',
-        left: 0
-    },
-    right: {
-        width: '200%',
-        left: '-100%'
-    },
-    overlay: _extends({
-        padding: 0,
-        height: 325,
-        textAlign: 'center'
-    }, theme.typography.body2, {
-        fontWeight: theme.typography.fontWeightRegular
-    }),
-    header: _extends({
-        display: 'block',
-        height: 40,
-        textAlign: 'center',
-        padding: '10px 0'
-    }, theme.typography.body1, {
-        color: theme.palette.neutral.normal,
-        borderBottom: '1px solid',
-        borderBottomColor: theme.palette.line.stepper
-    }),
-    body: {
-        height: 245,
-        width: 224,
-        margin: 'auto'
-    },
-    footer: {
-        height: 40,
-        padding: '10px 0',
-        borderTop: '1px solid',
-        borderTopColor: theme.palette.line.stepper
-    }
+  paper: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 10
+  },
+  left: {
+    width: '200%',
+    left: 0
+  },
+  right: {
+    width: '200%',
+    left: '-100%'
+  },
+  overlay: _objectSpread({
+    padding: 0,
+    height: 325,
+    textAlign: 'center'
+  }, theme.typography.body2, {
+    fontWeight: theme.typography.fontWeightRegular
+  }),
+  header: _objectSpread({
+    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 = (_ref) => {
-    let {
-        classes,
-        children,
-        headerElement,
-        footerElement,
-        absoluteElement,
-        side
-    } = _ref,
-        props = _objectWithoutProperties(_ref, ['classes', 'children', 'headerElement', 'footerElement', 'absoluteElement', 'side']);
+  let {
+    classes,
+    children,
+    headerElement,
+    footerElement,
+    absoluteElement,
+    side
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["classes", "children", "headerElement", "footerElement", "absoluteElement", "side"]);
 
-    const paperClass = classNames(classes.paper, {
-        [classes.left]: side === 'from',
-        [classes.right]: side === 'to'
-    });
+  const paperClass = classNames(classes.paper, {
+    [classes.left]: side === 'from',
+    [classes.right]: side === 'to'
+  });
 
-    return React.createElement(
-        Paper,
-        { className: paperClass },
-        React.createElement(
-            'div',
-            { className: classes.overlay },
-            React.createElement(
-                'div',
-                { className: classes.header },
-                headerElement
-            ),
-            React.createElement(
-                'div',
-                { className: classes.body },
-                children
-            ),
-            React.createElement(
-                'div',
-                { className: classes.footer },
-                footerElement
-            ),
-            absoluteElement
-        )
-    );
+  let paperProps = _objectSpread({}, props);
+
+  return React.createElement(Paper, {
+    className: paperClass,
+    onBlur: paperProps.onBlur,
+    onFocus: paperProps.onFocus
+  }, React.createElement("div", {
+    className: classes.overlay
+  }, React.createElement("div", {
+    className: classes.header
+  }, headerElement), React.createElement("div", {
+    className: classes.body
+  }, children), React.createElement("div", {
+    className: classes.footer
+  }, footerElement), absoluteElement));
 };
 
 CustomOverlayLayout.propTypes = process.env.NODE_ENV !== "production" ? {
-    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
-} : {};
+  absoluteElement: PropTypes.any,
+  children: PropTypes.any,
 
-export default withStyles(styles, { name: 'HmuiCustomOverlayLayout' })(CustomOverlayLayout);
+  /**
+   * 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
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCustomOverlayLayout'
+})(CustomOverlayLayout);