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

package/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _Paper = require('material-ui/Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+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 {
+        paper: {
+            position: 'absolute',
+            width: '100%',
+            zIndex: 10
+        },
+        left: {
+            width: '200%',
+            left: 0
+        },
+        right: {
+            width: '200%',
+            left: '-100%'
+        },
+        overlay: (0, _extends3.default)({
+            padding: 0,
+            height: 325,
+            textAlign: 'center'
+        }, theme.typography.body2, {
+            fontWeight: theme.typography.fontWeightRegular
+        }),
+        header: (0, _extends3.default)({
+            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
+        }
+    };
+}; //  weak
+
+var CustomOverlayLayout = function CustomOverlayLayout(_ref) {
+    var _classNames;
+
+    var classes = _ref.classes,
+        children = _ref.children,
+        headerElement = _ref.headerElement,
+        footerElement = _ref.footerElement,
+        absoluteElement = _ref.absoluteElement,
+        side = _ref.side,
+        props = (0, _objectWithoutProperties3.default)(_ref, ['classes', 'children', 'headerElement', 'footerElement', 'absoluteElement', 'side']);
+
+    var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
+
+    return _react2.default.createElement(
+        _Paper2.default,
+        { className: paperClass },
+        _react2.default.createElement(
+            'div',
+            { className: classes.overlay },
+            _react2.default.createElement(
+                'div',
+                { className: classes.header },
+                headerElement
+            ),
+            _react2.default.createElement(
+                'div',
+                { className: classes.body },
+                children
+            ),
+            _react2.default.createElement(
+                'div',
+                { className: classes.footer },
+                footerElement
+            ),
+            absoluteElement
+        )
+    );
+};
+
+CustomOverlayLayout.propTypes = process.env.NODE_ENV !== "production" ? {
+    absoluteElement: _propTypes2.default.any,
+    children: _propTypes2.default.any,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    footerElement: _propTypes2.default.any,
+    headerElement: _propTypes2.default.any,
+    /**
+     * Définit comment construire le Paper dans le cas d'un double input
+     */
+    side: _propTypes2.default.string
+} : {};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiCustomOverlayLayout' })(CustomOverlayLayout);

package/HiDatePicker/Overlays/MonthPickerOverlay.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+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 _CustomOverlayLayout = require('./CustomOverlayLayout');
+
+var _CustomOverlayLayout2 = _interopRequireDefault(_CustomOverlayLayout);
+
+var _ListPicker = require('../ListPicker');
+
+var _ListPicker2 = _interopRequireDefault(_ListPicker);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//  weak
+
+var MonthPickerOverlay = function (_React$Component) {
+    (0, _inherits3.default)(MonthPickerOverlay, _React$Component);
+
+    function MonthPickerOverlay(props) {
+        (0, _classCallCheck3.default)(this, MonthPickerOverlay);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (MonthPickerOverlay.__proto__ || (0, _getPrototypeOf2.default)(MonthPickerOverlay)).call(this));
+
+        _this.months = [];
+
+
+        _this.handleMonthClick = _this.handleMonthClick.bind(_this);
+
+        _this.months = props.localeUtils ? props.localeUtils.getMonths() : props.children.props.localeUtils.getMonths();
+        return _this;
+    }
+
+    (0, _createClass3.default)(MonthPickerOverlay, [{
+        key: 'handleMonthClick',
+        value: function handleMonthClick(month) {
+            var monthIndex = this.months.indexOf(month);
+
+            if (monthIndex >= 0 && monthIndex < 12 && this.props.onChange) {
+                var date = this.props.value ? new Date(this.props.value) : new Date();
+                date.setMonth(monthIndex);
+                this.props.onChange(date);
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                value = _props.value,
+                translations = _props.translations,
+                props = (0, _objectWithoutProperties3.default)(_props, ['value', 'translations']);
+
+
+            return _react2.default.createElement(
+                _CustomOverlayLayout2.default,
+                (0, _extends3.default)({ headerElement: translations.month }, props),
+                _react2.default.createElement(_ListPicker2.default, {
+                    itemList: this.months,
+                    onItemClick: this.handleMonthClick,
+                    selectedItem: value ? value.getMonth() : null
+                })
+            );
+        }
+    }]);
+    return MonthPickerOverlay;
+}(_react2.default.Component);
+
+MonthPickerOverlay.defaultProps = {
+    translations: {
+        month: 'Month'
+    }
+};
+MonthPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * ReactDayPicker prop
+     */
+    children: _propTypes2.default.element,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * ReactDayPicker prop
+     */
+    localeUtils: _propTypes2.default.object,
+    /**
+     * Fonction de callback
+     */
+    onChange: _propTypes2.default.func,
+    /**
+     * Traductions
+     */
+    translations: _propTypes2.default.object,
+    /**
+     * Date du mois affiché
+     */
+    value: _propTypes2.default.instanceOf(Date)
+} : {};
+exports.default = MonthPickerOverlay;

package/HiDatePicker/Overlays/Overlay.js

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+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 _Paper = require('material-ui/Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+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() {
+    return {
+        paper: {
+            position: 'absolute',
+            width: '100%',
+            zIndex: 10
+        },
+        left: {
+            width: '200%',
+            left: 0
+        },
+        right: {
+            width: '200%',
+            left: '-100%'
+        },
+        overlay: {
+            padding: 0
+        }
+    };
+}; //  weak
+
+var Overlay = function Overlay(_ref) {
+    var _classNames;
+
+    var classes = _ref.classes,
+        children = _ref.children,
+        side = _ref.side;
+
+    var paperClass = (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty3.default)(_classNames, classes.right, side === 'to'), _classNames));
+
+    return _react2.default.createElement(
+        _Paper2.default,
+        { className: paperClass },
+        _react2.default.createElement(
+            'div',
+            { className: classes.overlay },
+            children
+        )
+    );
+};
+
+Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * ReactDayPicker prop
+     */
+    children: _propTypes2.default.element,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * ReactDayPicker prop
+     * The input field
+     */
+    input: _propTypes2.default.object,
+    /**
+     * ReactDayPicker prop
+     * The month displayed in the calendar
+     */
+    month: _propTypes2.default.object,
+    /**
+     * ReactDayPicker prop
+     * The currently selected day or selected days
+     */
+    selectedDay: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array]),
+    /**
+     * Définit comment construire le Paper dans le cas d'un double input
+     */
+    side: _propTypes2.default.string
+} : {};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiOverlay' })(Overlay);

package/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -0,0 +1,291 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _from = require('babel-runtime/core-js/array/from');
+
+var _from2 = _interopRequireDefault(_from);
+
+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 _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _IconButton = require('material-ui/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _Calendar = require('mdi-material-ui/Calendar');
+
+var _Calendar2 = _interopRequireDefault(_Calendar);
+
+var _CustomOverlayLayout = require('./CustomOverlayLayout');
+
+var _CustomOverlayLayout2 = _interopRequireDefault(_CustomOverlayLayout);
+
+var _ListPicker = require('../ListPicker');
+
+var _ListPicker2 = _interopRequireDefault(_ListPicker);
+
+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 {
+        paper: {
+            position: 'absolute',
+            width: '100%',
+            zIndex: 10
+        },
+        overlay: (0, _extends3.default)({
+            padding: 0,
+            height: 325,
+            textAlign: 'center'
+        }, theme.typography.body2, {
+            fontWeight: theme.typography.fontWeightRegular
+        }),
+        header: (0, _extends3.default)({
+            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
+        }),
+        titles: {
+            width: 224,
+            margin: 'auto'
+        },
+        timeTitle: {
+            display: 'inline-block',
+            width: '50%'
+        },
+        body: {
+            height: 245,
+            width: 224,
+            margin: 'auto'
+        },
+        columnWrapper: {
+            height: '100%',
+            width: '100%'
+        },
+        column: {
+            display: 'inline-block',
+            height: '100%',
+            width: '50%'
+        },
+        listItem: {
+            height: 40,
+            textAlign: 'center'
+        },
+        itemRoot: {
+            '&:hover': {
+                backgroundColor: theme.palette.hover
+            }
+        },
+        itemSelected: {
+            fontWeight: theme.typography.fontWeightMedium,
+            backgroundColor: theme.palette.selected
+        },
+        itemCentered: {
+            margin: 'auto'
+        },
+        footer: {
+            height: 40,
+            padding: '10px 0',
+            borderTop: '1px solid',
+            borderTopColor: theme.palette.line.stepper
+        },
+        clockIconButton: {
+            position: 'absolute',
+            left: 0,
+            bottom: 0,
+            height: 32,
+            width: 32,
+            margin: '4px 24px'
+        },
+        calendarButton: {
+            fontWeight: theme.typography.fontWeightMedium
+        }
+    };
+}; //  weak
+
+var _ref = _react2.default.createElement(_Calendar2.default, null);
+
+var TimePickerOverlay = function (_React$Component) {
+    (0, _inherits3.default)(TimePickerOverlay, _React$Component);
+
+    function TimePickerOverlay(props) {
+        (0, _classCallCheck3.default)(this, TimePickerOverlay);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (TimePickerOverlay.__proto__ || (0, _getPrototypeOf2.default)(TimePickerOverlay)).call(this));
+
+        _this.hours = (0, _from2.default)(Array(24).keys());
+        _this.minutes = (0, _from2.default)(Array(60).keys());
+
+
+        _this.handleHourClick = _this.handleHourClick.bind(_this);
+        _this.handleMinuteClick = _this.handleMinuteClick.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(TimePickerOverlay, [{
+        key: 'handleHourClick',
+        value: function handleHourClick(hour) {
+            if (this.props.onChange) {
+                var date = this.props.value ? new Date(this.props.value) : new Date();
+                date.setHours(hour);
+                this.props.onChange(date, 'hour');
+            }
+        }
+    }, {
+        key: 'handleMinuteClick',
+        value: function handleMinuteClick(minute) {
+            if (this.props.onChange) {
+                var date = this.props.value ? new Date(this.props.value) : new Date();
+                date.setMinutes(minute);
+                this.props.onChange(date, 'minute');
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                onCalendarClick = _props.onCalendarClick,
+                translations = _props.translations,
+                value = _props.value,
+                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'onCalendarClick', 'translations', 'value']);
+
+
+            var hour = value ? value.getHours() : 0;
+            var minute = value ? value.getMinutes() : 0;
+
+            return _react2.default.createElement(
+                _CustomOverlayLayout2.default,
+                (0, _extends3.default)({
+                    headerElement: _react2.default.createElement(
+                        'div',
+                        { className: classes.titles },
+                        _react2.default.createElement(
+                            'div',
+                            { className: classes.timeTitle },
+                            translations.hour
+                        ),
+                        _react2.default.createElement(
+                            'div',
+                            { className: classes.timeTitle },
+                            translations.minute
+                        )
+                    ),
+                    absoluteElement: _react2.default.createElement(
+                        _IconButton2.default,
+                        {
+                            className: classes.clockIconButton,
+                            onClick: function onClick() {
+                                return onCalendarClick();
+                            }
+                        },
+                        _ref
+                    )
+                }, props),
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.column },
+                    _react2.default.createElement(_ListPicker2.default, {
+                        itemList: this.hours,
+                        onItemClick: this.handleHourClick,
+                        selectedItem: hour
+                    })
+                ),
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.column },
+                    _react2.default.createElement(_ListPicker2.default, {
+                        itemList: this.minutes,
+                        onItemClick: this.handleMinuteClick,
+                        selectedItem: minute
+                    })
+                )
+            );
+        }
+    }]);
+    return TimePickerOverlay;
+}(_react2.default.Component);
+
+TimePickerOverlay.defaultProps = {
+    translations: {
+        hour: 'Hour',
+        minute: 'Minute'
+    }
+};
+TimePickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * ReactDayPicker prop
+     */
+    children: _propTypes2.default.element,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Fonction de callback au click sur l'icône Calendar
+     */
+    onCalendarClick: _propTypes2.default.func,
+    /**
+     * Callback à la sélection d'une date
+     */
+    onChange: _propTypes2.default.func,
+    /**
+     * Définit comment construire le Paper dans le cas d'un double input
+     */
+    side: _propTypes2.default.string,
+    /**
+     * Traductions
+     */
+    translations: _propTypes2.default.object,
+    /**
+     * Date sélectionné
+     */
+    value: _propTypes2.default.instanceOf(Date)
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiTimePickerOverlay' })(TimePickerOverlay);