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

package/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -0,0 +1,173 @@
+'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 _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 _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 YearPickerOverlay = function (_React$Component) {
+    (0, _inherits3.default)(YearPickerOverlay, _React$Component);
+
+    function YearPickerOverlay(props) {
+        (0, _classCallCheck3.default)(this, YearPickerOverlay);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (YearPickerOverlay.__proto__ || (0, _getPrototypeOf2.default)(YearPickerOverlay)).call(this));
+
+        _this.years = [];
+
+
+        _this.handleYearClick = _this.handleYearClick.bind(_this);
+
+        var currentYear = new Date().getFullYear();
+        var minimumYear = props.minimumDate.getFullYear();
+
+        _this.years = [currentYear];
+
+        // get years from minimum date to now
+        if (!props.disablePastDays && currentYear > minimumYear) {
+            _this.years = _this.years.concat((0, _from2.default)(Array(currentYear - minimumYear).keys(), function (key) {
+                return key + minimumYear;
+            }));
+        }
+
+        // get years from now to at least 10 years forward or as much as past years
+        if (!props.disableFutureDays) {
+            _this.years = _this.years.concat((0, _from2.default)(Array(Math.max(currentYear - minimumYear, 10)).keys(), function (key) {
+                return key + currentYear + 1;
+            }));
+        }
+
+        _this.years.sort();
+        return _this;
+    }
+
+    (0, _createClass3.default)(YearPickerOverlay, [{
+        key: 'handleYearClick',
+        value: function handleYearClick(year) {
+            if (this.props.onChange) {
+                var date = this.props.value ? new Date(this.props.value) : new Date();
+                date.setFullYear(year);
+                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.year }, props),
+                _react2.default.createElement(_ListPicker2.default, {
+                    itemList: this.years,
+                    onItemClick: this.handleYearClick,
+                    selectedItem: value ? value.getFullYear() : null
+                })
+            );
+        }
+    }]);
+    return YearPickerOverlay;
+}(_react2.default.Component);
+
+YearPickerOverlay.defaultProps = {
+    disableFutureDays: false,
+    disablePastDays: false,
+    minimumDate: new Date(2013, 4, 1), // by default 1 May 2013
+    translations: {
+        year: 'Year'
+    }
+};
+YearPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * ReactDayPicker prop
+     */
+    children: _propTypes2.default.element,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * 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,
+    /**
+     * ReactDayPicker prop
+     */
+    localeUtils: _propTypes2.default.object,
+    /**
+     * Date minimale sélectionnable
+     */
+    minimumDate: _propTypes2.default.instanceOf(Date),
+    /**
+     * Fonction de callback
+     */
+    onChange: _propTypes2.default.func,
+    /**
+     * Traductions
+     */
+    translations: _propTypes2.default.object,
+    /**
+     * Date du mois affiché
+     */
+    value: _propTypes2.default.instanceOf(Date)
+} : {};
+exports.default = YearPickerOverlay;

package/HiDatePicker/Overlays/index.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Overlay = require('./Overlay');
+
+Object.defineProperty(exports, 'Overlay', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Overlay).default;
+  }
+});
+
+var _CustomOverlayLayout = require('./CustomOverlayLayout');
+
+Object.defineProperty(exports, 'CustomOverlayLayout', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_CustomOverlayLayout).default;
+  }
+});
+
+var _MonthPickerOverlay = require('./MonthPickerOverlay');
+
+Object.defineProperty(exports, 'MonthPickerOverlay', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_MonthPickerOverlay).default;
+  }
+});
+
+var _TimePickerOverlay = require('./TimePickerOverlay');
+
+Object.defineProperty(exports, 'TimePickerOverlay', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_TimePickerOverlay).default;
+  }
+});
+
+var _YearPickerOverlay = require('./YearPickerOverlay');
+
+Object.defineProperty(exports, 'YearPickerOverlay', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_YearPickerOverlay).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/HiDatePicker/Weekday.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//  weak
+
+var Weekday = function Weekday(_ref) {
+  var weekday = _ref.weekday,
+      className = _ref.className,
+      localeUtils = _ref.localeUtils,
+      locale = _ref.locale;
+
+  var weekdayName = localeUtils.formatWeekdayLong(weekday, locale);
+  return _react2.default.createElement(
+    'div',
+    { className: className, title: weekdayName },
+    weekdayName.slice(0, 1)
+  );
+};
+
+Weekday.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * ReactDayPicker prop
+   */
+  className: _propTypes2.default.string,
+  /**
+   * ReactDayPicker prop
+   */
+  locale: _propTypes2.default.string,
+  /**
+   * ReactDayPicker prop
+   */
+  localeUtils: _propTypes2.default.object,
+  /**
+   * ReactDayPicker prop
+   */
+  weekday: _propTypes2.default.number
+} : {};
+
+exports.default = Weekday;

package/HiDatePicker/index.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HiWeekPicker = exports.HiDateRangeSelector = exports.HiDateRangePicker = exports.default = undefined;
+
+var _HiDatePicker = require('./HiDatePicker');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiDatePicker).default;
+  }
+});
+
+var _HiDateRangePicker2 = require('./HiDateRangePicker');
+
+var _HiDateRangePicker3 = _interopRequireDefault(_HiDateRangePicker2);
+
+var _HiDateRangeSelector2 = require('./HiDateRangeSelector');
+
+var _HiDateRangeSelector3 = _interopRequireDefault(_HiDateRangeSelector2);
+
+var _HiWeekPicker2 = require('./HiWeekPicker');
+
+var _HiWeekPicker3 = _interopRequireDefault(_HiWeekPicker2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.HiDateRangePicker = _HiDateRangePicker3.default;
+exports.HiDateRangeSelector = _HiDateRangeSelector3.default;
+exports.HiWeekPicker = _HiWeekPicker3.default;

package/HiDatePicker/stylesheet.js

@@ -0,0 +1,188 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = function (theme) {
+    return {
+        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: (0, _extends3.default)({
+            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: (0, _extends3.default)({
+            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: (0, _extends3.default)({
+            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
+        }
+    };
+};

package/HiForm/HiEmailField.js

@@ -0,0 +1,126 @@
+'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 _validator = require('validator');
+
+var _validator2 = _interopRequireDefault(_validator);
+
+var _HiTextField = require('./HiTextField');
+
+var _HiTextField2 = _interopRequireDefault(_HiTextField);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Champs input email pour formulaire
+ */
+// @inheritedComponent HiTextField
+
+var HiEmailField = function (_React$Component) {
+    (0, _inherits3.default)(HiEmailField, _React$Component);
+
+    function HiEmailField(props) {
+        (0, _classCallCheck3.default)(this, HiEmailField);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiEmailField.__proto__ || (0, _getPrototypeOf2.default)(HiEmailField)).call(this, props));
+
+        _this.handleBlur = function () {
+            if (_this.props.onError && _this.props.value !== '' && !_validator2.default.isEmail(_this.props.value)) {
+                _this.props.onError();
+            }
+
+            if (_this.props.onBlur) {
+                _this.props.onBlur();
+            }
+        };
+
+        _this.handleBlur = _this.handleBlur.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiEmailField, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                error = _props.error,
+                errorText = _props.errorText,
+                otherProps = (0, _objectWithoutProperties3.default)(_props, ['error', 'errorText']);
+
+
+            return _react2.default.createElement(_HiTextField2.default, (0, _extends3.default)({}, otherProps, {
+                type: 'email',
+                error: error,
+                errorText: errorText,
+                onBlur: this.handleBlur
+            }));
+        }
+    }]);
+    return HiEmailField;
+}(_react2.default.Component);
+
+HiEmailField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Si `true`, le champs sera en erreur.
+     */
+    error: _propTypes2.default.bool,
+    /**
+     * Texte de l'erreur
+     */
+    errorText: _propTypes2.default.string,
+    /**
+     * Fonction de callback appelée lorsqu'on quitte le champs input
+     */
+    onBlur: _propTypes2.default.func,
+    /**
+     * Fonction appelée en cas d'erreur
+     */
+    onError: _propTypes2.default.func,
+    /**
+     * Valeur de l'élément input
+     */
+    value: _propTypes2.default.string
+} : {};
+exports.default = HiEmailField;