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

package/HiDatePicker/HiDateRangeSelector.js

@@ -0,0 +1,414 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+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);
+
+exports.buildDateRangeOptionByKey = buildDateRangeOptionByKey;
+
+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 _reactDom = require('react-dom');
+
+var _Grid = require('material-ui/Grid');
+
+var _Grid2 = _interopRequireDefault(_Grid);
+
+var _styles = require('../styles');
+
+var _HiSelect = require('../HiSelect');
+
+var _HiDateRangePicker = require('./HiDateRangePicker');
+
+var _HiDateRangePicker2 = _interopRequireDefault(_HiDateRangePicker);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//  weak
+// @inheritedComponent HiDateRangePicker
+
+function buildDateRangeOptionByKey(key, t, format) {
+    var from = void 0;
+    var label = void 0;
+    var info = void 0;
+    var to = void 0;
+    var type = void 0;
+
+    _moment2.default.updateLocale('en', { week: { dow: 1 } });
+
+    switch (key) {
+        case 'custom':
+            label = t.custom_period;
+            type = 'primary-highlight';
+            break;
+        case 'cd':
+            label = t.last_24h;
+            from = (0, _moment2.default)().subtract(1, 'day');
+            to = (0, _moment2.default)();
+            info = from.calendar() + ' ' + t.to_now;
+            break;
+        case 'pd':
+            label = t.yesterday;
+            from = (0, _moment2.default)().subtract(1, 'day').startOf('day');
+            to = (0, _moment2.default)().subtract(1, 'day').endOf('day');
+            info = '' + from.format(format);
+            break;
+        case 'cw':
+            label = t.current_week;
+            from = (0, _moment2.default)().startOf('week');
+            to = (0, _moment2.default)();
+            info = t.week + ' ' + from.format('w') + ', \n ' + from.format(format) + ' ' + t.to_now;
+            break;
+        case 'pw':
+            label = t.previous_week;
+            from = (0, _moment2.default)().subtract(1, 'week').startOf('week');
+            to = (0, _moment2.default)().subtract(1, 'week').endOf('week');
+            info = t.week + ' ' + from.format('w') + ', ' + from.format(format) + ' ' + t.to + ' ' + to.format(format);
+            break;
+        case 'cm':
+            label = t.current_month;
+            from = (0, _moment2.default)().startOf('month');
+            to = (0, _moment2.default)();
+            info = from.format(format) + ' ' + t.to_now + ', ' + to.diff(from, 'days') + ' ' + t.days;
+            break;
+        case 'pm':
+            label = t.previous_month;
+            from = (0, _moment2.default)().subtract(1, 'month').startOf('month');
+            to = (0, _moment2.default)().subtract(1, 'month').endOf('month');
+            info = from.format('YYYY-MM') + ', ' + to.diff(from, 'days') + ' ' + t.days;
+            break;
+        case 'cq':
+            label = t.current_quarter;
+            from = (0, _moment2.default)().startOf('quarter');
+            to = (0, _moment2.default)();
+            info = from.format(format) + ' ' + t.to_now + ', ' + to.diff(from, 'days') + ' ' + t.days;
+            break;
+        case 'pq':
+            label = t.previous_quarter;
+            from = (0, _moment2.default)().subtract(1, 'quarter').startOf('quarter');
+            to = (0, _moment2.default)().subtract(1, 'quarter').endOf('quarter');
+            info = from.format('YYYY') + '-Q' + from.format('Q') + ', ' + to.diff(from, 'days') + ' ' + t.days;
+            break;
+        case 'cy':
+            label = t.current_year;
+            from = (0, _moment2.default)().startOf('year');
+            to = (0, _moment2.default)();
+            info = from.format(format) + ' ' + t.to_now + ', ' + to.diff(from, 'days') + ' ' + t.days;
+            break;
+        default:
+            break;
+    }
+
+    return {
+        id: key,
+        from: from,
+        info: info,
+        label: label,
+        to: to,
+        type: type
+    };
+}
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            maxWidth: 500,
+            marginLeft: -4
+        },
+        dateSelect: {
+            paddingTop: 1,
+            marginTop: 1
+        },
+        dateRangePicker: {
+            width: 'calc(100% + 8px)'
+        }
+    };
+};
+
+var HiDateRangeSelector = function (_React$Component) {
+    (0, _inherits3.default)(HiDateRangeSelector, _React$Component);
+
+    function HiDateRangeSelector(props) {
+        (0, _classCallCheck3.default)(this, HiDateRangeSelector);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiDateRangeSelector.__proto__ || (0, _getPrototypeOf2.default)(HiDateRangeSelector)).call(this));
+
+        _this.options = [];
+
+        _this.handleSelectChange = function (name) {
+            return function (event, value) {
+                _this.setState((0, _defineProperty3.default)({}, name, value));
+
+                if (value !== 'custom') {
+                    var selectedOption = _this.options.find(function (option) {
+                        return option.id === value;
+                    });
+                    if (selectedOption) {
+                        _this.props.onChange('from', selectedOption.from.toDate());
+                        _this.props.onChange('to', selectedOption.to.toDate());
+                    }
+                }
+            };
+        };
+
+        _this.state = {
+            selectedPreset: props.defaultPreset,
+            containerWidth: 0
+        };
+
+        _this.handleReset = _this.handleReset.bind(_this);
+        _this.handleSelectChange = _this.handleSelectChange.bind(_this);
+
+        _this.options = props.availableOptionKeys.map(function (key) {
+            return buildDateRangeOptionByKey(key, props.translations, props.format);
+        });
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiDateRangeSelector, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            if (this.container) {
+                this.setState({ containerWidth: (0, _reactDom.findDOMNode)(this.container).clientWidth });
+            }
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            clearTimeout(this.timeout); // TODO : supprimer ?
+        }
+    }, {
+        key: 'handleReset',
+        value: function handleReset(name) {
+            this.props.onChange(name, undefined);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                disabled = _props.disabled,
+                enableTime = _props.enableTime,
+                error = _props.error,
+                errorText = _props.errorText,
+                helperIcon = _props.helperIcon,
+                helperText = _props.helperText,
+                idRange = _props.idRange,
+                idSelect = _props.idSelect,
+                label = _props.label,
+                from = _props.from,
+                onChange = _props.onChange,
+                required = _props.required,
+                to = _props.to,
+                translations = _props.translations,
+                classes = _props.classes,
+                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'enableTime', 'error', 'errorText', 'helperIcon', 'helperText', 'idRange', 'idSelect', 'label', 'from', 'onChange', 'required', 'to', 'translations', 'classes']);
+            var selectedPreset = this.state.selectedPreset;
+
+
+            return _react2.default.createElement(
+                _Grid2.default,
+                {
+                    container: true,
+                    spacing: 8,
+                    className: classes.root,
+                    ref: function ref(container) {
+                        return _this2.container = container;
+                    }
+                },
+                _react2.default.createElement(
+                    _Grid2.default,
+                    { item: true, xs: 12, sm: 4 },
+                    _react2.default.createElement(_HiSelect.HiSelectField, {
+                        disabled: disabled,
+                        error: error,
+                        errorText: errorText,
+                        helperIcon: helperIcon,
+                        helperText: helperText,
+                        id: idSelect,
+                        label: label,
+                        name: 'selectedPreset',
+                        options: this.options,
+                        onChange: this.handleSelectChange('selectedPreset'),
+                        required: required,
+                        translations: translations,
+                        value: selectedPreset,
+                        containerWidth: this.state.containerWidth,
+                        classes: { root: classes.dateSelect }
+                    })
+                ),
+                _react2.default.createElement(
+                    _Grid2.default,
+                    { item: true, xs: 12, sm: 8 },
+                    _react2.default.createElement(_HiDateRangePicker2.default, (0, _extends3.default)({
+                        classes: { root: classes.dateRangePicker },
+                        id: idRange,
+                        from: from,
+                        to: to,
+                        enableTime: enableTime,
+                        onChange: onChange,
+                        onReset: this.handleReset,
+                        disabled: disabled || selectedPreset !== 'custom',
+                        translations: translations
+                    }, props))
+                )
+            );
+        }
+    }]);
+    return HiDateRangeSelector;
+}(_react2.default.Component);
+
+HiDateRangeSelector.defaultProps = {
+    availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
+    defaultPreset: 'cd',
+    enableTime: false,
+    locale: 'fr-FR',
+    format: 'YYYY-DD-MM',
+    translations: {
+        today: 'today',
+        hour: 'Hour',
+        minute: 'Minute',
+        month: 'Month',
+        quarter: 'Quarter',
+        week: 'Week',
+        year: 'Year',
+
+        days: 'days',
+
+        custom_period: 'Custom Period',
+        yesterday: 'Yesterday',
+        last_24h: 'Last 24h',
+        to: 'to',
+        to_now: 'to now',
+        current_week: 'Current Week',
+        previous_week: 'Previous Week',
+        current_month: 'Current Month',
+        previous_month: 'Previous Month',
+        current_quarter: 'Current Quarter',
+        previous_quarter: 'Previous Quarter',
+        current_year: 'Current Year'
+    }
+};
+HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Liste des ids des options disponibles
+     */
+    availableOptionKeys: _propTypes2.default.array,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Valeur du select par default
+     */
+    defaultPreset: _propTypes2.default.string,
+    /**
+     * Si `true`, l'input sera inactif.
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Ajoute la gestion de l'heure
+     */
+    enableTime: _propTypes2.default.bool,
+    /**
+     * Si `true`, le champs sera en erreur.
+     */
+    error: _propTypes2.default.bool,
+    /**
+     * Texte de l'erreur
+     */
+    errorText: _propTypes2.default.string,
+    /**
+     * Format de date utilisé
+     */
+    format: _propTypes2.default.string,
+    /**
+     * Date de début sélectionnée
+     */
+    from: _propTypes2.default.instanceOf(Date),
+    /**
+     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+     */
+    helperIcon: _propTypes2.default.bool,
+    /**
+     * Texte de l'aide
+     */
+    helperText: _propTypes2.default.string,
+    /**
+     * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
+     */
+    idRange: _propTypes2.default.string.isRequired,
+    /**
+     * id du champs select
+     */
+    idSelect: _propTypes2.default.string.isRequired,
+    /**
+     * Label du champs
+     */
+    label: _propTypes2.default.string,
+    /**
+     * Locale utilisée
+     */
+    locale: _propTypes2.default.string,
+    /**
+     * Callback à la sélection d'une date
+     */
+    onChange: _propTypes2.default.func.isRequired,
+    /**
+     * true si champs obligatoire
+     */
+    required: _propTypes2.default.bool,
+    /**
+     * Date de fin sélectionnée
+     */
+    to: _propTypes2.default.instanceOf(Date),
+    /**
+     * Traductions
+     */
+    translations: _propTypes2.default.object
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiDateRangeSelector' })(HiDateRangeSelector);