@hipay/hipay-material-ui 1.0.0-beta.1

package/HiDatePicker/HiWeekPicker.js

@@ -0,0 +1,389 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+var _moment3 = require('react-day-picker/moment');
+
+var _DayPickerInput = require('react-day-picker/DayPickerInput');
+
+var _DayPickerInput2 = _interopRequireDefault(_DayPickerInput);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _Caption = require('./Caption');
+
+var _Caption2 = _interopRequireDefault(_Caption);
+
+var _Overlay = require('./Overlays/Overlay');
+
+var _Overlay2 = _interopRequireDefault(_Overlay);
+
+var _MonthPickerOverlay = require('./Overlays/MonthPickerOverlay');
+
+var _MonthPickerOverlay2 = _interopRequireDefault(_MonthPickerOverlay);
+
+var _YearPickerOverlay = require('./Overlays/YearPickerOverlay');
+
+var _YearPickerOverlay2 = _interopRequireDefault(_YearPickerOverlay);
+
+var _Navbar = require('./Navbar');
+
+var _Navbar2 = _interopRequireDefault(_Navbar);
+
+var _Weekday = require('./Weekday');
+
+var _Weekday2 = _interopRequireDefault(_Weekday);
+
+var _HiForm = require('../HiForm');
+
+var _stylesheet = require('./stylesheet');
+
+var _stylesheet2 = _interopRequireDefault(_stylesheet);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//  weak
+
+var HiWeekPicker = function (_React$Component) {
+    (0, _inherits3.default)(HiWeekPicker, _React$Component);
+
+    function HiWeekPicker(props) {
+        (0, _classCallCheck3.default)(this, HiWeekPicker);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiWeekPicker.__proto__ || (0, _getPrototypeOf2.default)(HiWeekPicker)).call(this));
+
+        _this.state = {
+            openedPanel: 'calendar',
+            currentMonth: props.from ? props.from : new Date()
+        };
+
+        _this.formatDate = _this.formatDate.bind(_this);
+        _this.handleCalendarClick = _this.handleCalendarClick.bind(_this);
+        _this.handleClockClick = _this.handleClockClick.bind(_this);
+        _this.handleMonthClick = _this.handleMonthClick.bind(_this);
+        _this.handleYearClick = _this.handleYearClick.bind(_this);
+        _this.handleDayChange = _this.handleDayChange.bind(_this);
+        _this.handleWeekClick = _this.handleWeekClick.bind(_this);
+        _this.handleCurrentMonthChange = _this.handleCurrentMonthChange.bind(_this);
+        _this.handleReset = _this.handleReset.bind(_this);
+        _this.openPanel = _this.openPanel.bind(_this);
+        _this.renderCaption = _this.renderCaption.bind(_this);
+        _this.renderOverlay = _this.renderOverlay.bind(_this);
+        _this.renderMonthPickerOverlay = _this.renderMonthPickerOverlay.bind(_this);
+        _this.renderYearPickerOverlay = _this.renderYearPickerOverlay.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiWeekPicker, [{
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            clearTimeout(this.timeout);
+        }
+    }, {
+        key: 'formatDate',
+        value: function formatDate(date) {
+            var day = (0, _moment2.default)(date).isoWeekday(1); // start week on monday
+            return day.year() + '-W' + day.isoWeek();
+        }
+    }, {
+        key: 'handleDayChange',
+        value: function handleDayChange(day, modifiers) {
+            var _this2 = this;
+
+            this.timeout = setTimeout(function () {
+                if (_this2.datePickerInput.getInput()) {
+                    _this2.datePickerInput.getInput().focus();
+                }
+            }, 0);
+
+            if (modifiers.disabled) {
+                return;
+            }
+
+            if (this.props.onChange) {
+                var date = (0, _moment2.default)(day).isoWeekday(1); // start week on monday
+                this.props.onChange('from', date.startOf('isoWeek').toDate());
+                this.props.onChange('to', date.endOf('isoWeek').toDate());
+            }
+        }
+    }, {
+        key: 'handleWeekClick',
+        value: function handleWeekClick(week, days) {
+            if (this.props.onChange) {
+                this.props.onChange('from', days[0]);
+                this.props.onChange('to', days[6]);
+            }
+        }
+    }, {
+        key: 'handleCalendarClick',
+        value: function handleCalendarClick() {
+            this.openPanel('calendar');
+        }
+    }, {
+        key: 'handleClockClick',
+        value: function handleClockClick() {
+            this.openPanel('time');
+        }
+    }, {
+        key: 'handleMonthClick',
+        value: function handleMonthClick() {
+            this.openPanel('months');
+        }
+    }, {
+        key: 'handleYearClick',
+        value: function handleYearClick() {
+            this.openPanel('years');
+        }
+    }, {
+        key: 'handleCurrentMonthChange',
+        value: function handleCurrentMonthChange(day) {
+            this.setState({
+                currentMonth: day,
+                openedPanel: 'calendar'
+            });
+        }
+    }, {
+        key: 'handleReset',
+        value: function handleReset() {
+            this.props.onReset('from');
+            this.props.onReset('to');
+        }
+    }, {
+        key: 'openPanel',
+        value: function openPanel(panel) {
+            this.setState({
+                openedPanel: panel
+            });
+        }
+    }, {
+        key: 'renderCaption',
+        value: function renderCaption(propsCaption) {
+            return _react2.default.createElement(_Caption2.default, (0, _extends3.default)({
+                onMonthClick: this.handleMonthClick,
+                onYearClick: this.handleYearClick
+            }, propsCaption));
+        }
+    }, {
+        key: 'renderOverlay',
+        value: function renderOverlay(propsOverlay) {
+            switch (this.state.openedPanel) {
+                case 'months':
+                    return this.renderMonthPickerOverlay(propsOverlay);
+                case 'years':
+                    return this.renderYearPickerOverlay(propsOverlay);
+                case 'calendar':
+                default:
+                    return _react2.default.createElement(_Overlay2.default, propsOverlay);
+            }
+        }
+    }, {
+        key: 'renderMonthPickerOverlay',
+        value: function renderMonthPickerOverlay(propsOverlay) {
+            var monthPickerProps = {
+                value: this.state.currentMonth,
+                onChange: this.handleCurrentMonthChange
+            };
+
+            return _react2.default.createElement(_MonthPickerOverlay2.default, (0, _extends3.default)({
+                key: 'month-picker-overlay'
+            }, monthPickerProps, propsOverlay));
+        }
+    }, {
+        key: 'renderYearPickerOverlay',
+        value: function renderYearPickerOverlay(propsOverlay) {
+            var yearPickerProps = {
+                value: this.state.currentMonth,
+                onChange: this.handleCurrentMonthChange
+            };
+
+            return _react2.default.createElement(_YearPickerOverlay2.default, (0, _extends3.default)({ key: 'year-picker-overlay' }, yearPickerProps, propsOverlay));
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this3 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                disabledDays = _props.disabledDays,
+                disablePastDays = _props.disablePastDays,
+                disableFutureDays = _props.disableFutureDays,
+                format = _props.format,
+                locale = _props.locale,
+                onReset = _props.onReset,
+                translations = _props.translations,
+                from = _props.from,
+                to = _props.to,
+                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'disabledDays', 'disablePastDays', 'disableFutureDays', 'format', 'locale', 'onReset', 'translations', 'from', 'to']);
+            var currentMonth = this.state.currentMonth;
+
+
+            var modifiers = {
+                start: from,
+                end: to
+            };
+
+            var modifiersStyles = {
+                start: {
+                    borderTopLeftRadius: '50%',
+                    borderBottomLeftRadius: '50%'
+                },
+                end: {
+                    borderTopRightRadius: '50%',
+                    borderBottomRightRadius: '50%'
+                }
+            };
+
+            var dayPickerProps = (0, _extends3.default)({
+                classNames: classes,
+                disabledDays: disabledDays,
+                locale: locale,
+                modifiers: modifiers,
+                modifiersStyles: modifiersStyles,
+                // Both are required ?
+                selectedDays: [from, { from: from, to: to }],
+                todayButton: translations.today,
+                onTodayButtonClick: this.handleCurrentMonthChange,
+                weekdayElement: _Weekday2.default,
+                navbarElement: _Navbar2.default,
+                captionElement: this.renderCaption,
+                firstDayOfWeek: 1
+
+            }, props, {
+
+                month: currentMonth,
+                showWeekNumbers: true,
+                onWeekClick: this.handleWeekClick
+            });
+
+            var inputProps = (0, _extends3.default)({}, onReset && {
+                onReset: this.handleReset
+            }, props);
+
+            return _react2.default.createElement(
+                'div',
+                { className: classes.root },
+                _react2.default.createElement(_DayPickerInput2.default, {
+                    ref: function ref(el) {
+                        _this3.datePickerInput = el;
+                    },
+                    value: from,
+                    hideOnDayClick: false,
+                    overlayComponent: this.renderOverlay,
+                    dayPickerProps: dayPickerProps,
+                    component: _HiForm.HiTextField,
+                    inputProps: inputProps,
+                    placeholder: '',
+                    format: format,
+                    formatDate: _moment3.formatDate,
+                    parseDate: _moment3.parseDate,
+                    onDayChange: this.handleDayChange
+                })
+            );
+        }
+    }]);
+    return HiWeekPicker;
+}(_react2.default.Component);
+
+HiWeekPicker.defaultProps = {
+    disabledDays: [],
+    disablePastDays: false,
+    disableFutureDays: false,
+    format: 'YYYY-DD-MM',
+    locale: 'fr-FR',
+    translations: {
+        today: 'today'
+    }
+};
+HiWeekPicker.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * ReactDayPicker prop
+     * Définie les jours non sélectionnables
+     */
+    disabledDays: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object, _propTypes2.default.instanceOf(Date)]),
+    /**
+     * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
+     */
+    disableFutureDays: _propTypes2.default.bool,
+    /**
+     * Uniquement la sélection de date postérieures à aujourd'hui (inclu)
+     */
+    disablePastDays: _propTypes2.default.bool,
+    /**
+     * Format des dates affichées
+     */
+    format: _propTypes2.default.string,
+    /**
+     * Date de début sélectionnée
+     */
+    from: _propTypes2.default.instanceOf(Date),
+    /**
+     * Locale utilisée
+     */
+    locale: _propTypes2.default.string,
+    /**
+     * Callback à la sélection d'une date
+     */
+    onChange: _propTypes2.default.func,
+    /**
+     * Callback au reset de l'input
+     */
+    onReset: _propTypes2.default.func,
+    /**
+     * Date de fin sélectionnée
+     */
+    to: _propTypes2.default.instanceOf(Date),
+    /**
+     * Traductions
+     */
+    translations: _propTypes2.default.object
+} : {};
+exports.default = (0, _withStyles2.default)(_stylesheet2.default, { name: 'HmuiHiWeekPicker' })(HiWeekPicker);

package/HiDatePicker/ListPicker.js

@@ -0,0 +1,154 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactCustomScrollbars = require('react-custom-scrollbars');
+
+var _Menu = require('material-ui/Menu');
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        itemRoot: {
+            '&:hover': {
+                backgroundColor: theme.palette.hover
+            }
+        },
+        itemSelected: {
+            fontWeight: theme.typography.fontWeightMedium,
+            backgroundColor: theme.palette.selected
+        },
+        itemCentered: {
+            margin: 'auto'
+        }
+    };
+}; //  weak
+
+var ListPicker = function (_React$PureComponent) {
+    (0, _inherits3.default)(ListPicker, _React$PureComponent);
+
+    function ListPicker() {
+        (0, _classCallCheck3.default)(this, ListPicker);
+        return (0, _possibleConstructorReturn3.default)(this, (ListPicker.__proto__ || (0, _getPrototypeOf2.default)(ListPicker)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(ListPicker, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            if (this.props.initAtMiddleScroll && this.scrollbars) {
+                this.scrollbars.scrollTop((this.scrollbars.getScrollHeight() - this.scrollbars.getClientHeight()) / 2 + 20);
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                itemList = _props.itemList,
+                onItemClick = _props.onItemClick,
+                selectedItem = _props.selectedItem;
+
+
+            return _react2.default.createElement(
+                _reactCustomScrollbars.Scrollbars,
+                {
+                    autoHide: true,
+                    ref: function ref(_ref) {
+                        _this2.scrollbars = _ref;
+                    }
+                },
+                _react2.default.createElement(
+                    _Menu.MenuList,
+                    null,
+                    itemList.map(function (item) {
+                        return _react2.default.createElement(
+                            _Menu.MenuItem,
+                            {
+                                key: 'item-' + item,
+                                classes: {
+                                    root: classes.itemRoot,
+                                    selected: classes.itemSelected
+                                },
+                                onClick: function onClick() {
+                                    return onItemClick(item);
+                                },
+                                selected: item === selectedItem
+                            },
+                            _react2.default.createElement(
+                                'span',
+                                { className: classes.itemCentered },
+                                item
+                            )
+                        );
+                    })
+                )
+            );
+        }
+    }]);
+    return ListPicker;
+}(_react2.default.PureComponent);
+
+ListPicker.defaultProps = {
+    initAtMiddleScroll: false
+};
+ListPicker.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Initialise la liste scrollée au milieu
+     */
+    initAtMiddleScroll: _propTypes2.default.bool,
+    /**
+     * Liste des items
+     */
+    itemList: _propTypes2.default.array,
+    /**
+     * Fonction de callback au click d'un item
+     */
+    onItemClick: _propTypes2.default.func,
+    /**
+     * Item sélectionné
+     */
+    selectedItem: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiListPicker' })(ListPicker);

package/HiDatePicker/Navbar.js

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _IconButton = require('material-ui/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _ChevronLeft = require('mdi-material-ui/ChevronLeft');
+
+var _ChevronLeft2 = _interopRequireDefault(_ChevronLeft);
+
+var _ChevronRight = require('mdi-material-ui/ChevronRight');
+
+var _ChevronRight2 = _interopRequireDefault(_ChevronRight);
+
+var _Clock = require('mdi-material-ui/Clock');
+
+var _Clock2 = _interopRequireDefault(_Clock);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//  weak
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            width: '100%',
+            height: 40,
+            marginBottom: -40,
+            borderBottom: '1px solid',
+            borderBottomColor: theme.palette.line.stepper
+        },
+        button: {
+            height: 32,
+            width: 32,
+            margin: '4px 24px'
+        },
+        left: {
+            float: 'left'
+        },
+        right: {
+            float: 'right'
+        },
+        bottomLeft: {
+            position: 'absolute',
+            left: 0,
+            bottom: 0
+        }
+    };
+};
+
+var _ref2 = _react2.default.createElement(_ChevronLeft2.default, null);
+
+var _ref3 = _react2.default.createElement(_ChevronRight2.default, null);
+
+var _ref4 = _react2.default.createElement(_Clock2.default, null);
+
+var Navbar = function Navbar(_ref) {
+    var classes = _ref.classes,
+        localeUtils = _ref.localeUtils,
+        nextMonth = _ref.nextMonth,
+        onClockClick = _ref.onClockClick,
+        onPreviousClick = _ref.onPreviousClick,
+        onNextClick = _ref.onNextClick,
+        previousMonth = _ref.previousMonth,
+        showClockButton = _ref.showClockButton;
+
+    var months = localeUtils.getMonths();
+    var prev = months[previousMonth.getMonth()] + ' ' + previousMonth.getFullYear();
+    var next = months[nextMonth.getMonth()] + ' ' + nextMonth.getFullYear();
+
+    return _react2.default.createElement(
+        'div',
+        { className: classes.root },
+        _react2.default.createElement(
+            _IconButton2.default,
+            {
+                className: (0, _classnames2.default)(classes.button, classes.left),
+                onClick: function onClick() {
+                    return onPreviousClick();
+                },
+                title: prev
+            },
+            _ref2
+        ),
+        _react2.default.createElement(
+            _IconButton2.default,
+            {
+                className: (0, _classnames2.default)(classes.button, classes.right),
+                onClick: function onClick() {
+                    return onNextClick();
+                },
+                title: next
+            },
+            _ref3
+        ),
+        showClockButton && _react2.default.createElement(
+            _IconButton2.default,
+            {
+                className: (0, _classnames2.default)(classes.button, classes.bottomLeft),
+                onClick: function onClick() {
+                    return onClockClick();
+                }
+            },
+            _ref4
+        )
+    );
+};
+
+Navbar.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * ReactDayPicker prop
+     */
+    localeUtils: _propTypes2.default.object,
+    /**
+     * ReactDayPicker prop
+     */
+    nextMonth: _propTypes2.default.object,
+    /**
+     * Fonction de callback au click sur la Clock
+     */
+    onClockClick: _propTypes2.default.func,
+    /**
+     * ReactDayPicker prop
+     */
+    onNextClick: _propTypes2.default.func,
+    /**
+     * ReactDayPicker prop
+     */
+    onPreviousClick: _propTypes2.default.func,
+    /**
+     * ReactDayPicker prop
+     */
+    previousMonth: _propTypes2.default.object,
+    /**
+     * Ajoute l'icône Clock dans le footer
+     */
+    showClockButton: _propTypes2.default.bool
+} : {};
+
+Navbar.defaultProps = {
+    showClockButton: false
+};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiNavbar' })(Navbar);