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

package/HiSelect/HiSelectField.js

@@ -0,0 +1,160 @@
+'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 _HiFormControl = require('../HiForm/HiFormControl');
+
+var _HiFormControl2 = _interopRequireDefault(_HiFormControl);
+
+var _HiSelect = require('./HiSelect');
+
+var _HiSelect2 = _interopRequireDefault(_HiSelect);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Champs input pour formulaire
+ */
+// @inheritedComponent HiSelect
+
+var HiSelectField = function (_React$PureComponent) {
+  (0, _inherits3.default)(HiSelectField, _React$PureComponent);
+
+  function HiSelectField() {
+    (0, _classCallCheck3.default)(this, HiSelectField);
+    return (0, _possibleConstructorReturn3.default)(this, (HiSelectField.__proto__ || (0, _getPrototypeOf2.default)(HiSelectField)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(HiSelectField, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          label = _props.label,
+          required = _props.required,
+          disabled = _props.disabled,
+          error = _props.error,
+          errorText = _props.errorText,
+          helperText = _props.helperText,
+          helperIcon = _props.helperIcon,
+          id = _props.id,
+          name = _props.name,
+          value = _props.value,
+          options = _props.options,
+          type = _props.type,
+          multiple = _props.multiple,
+          iconAll = _props.iconAll,
+          checkbox = _props.checkbox,
+          searchable = _props.searchable,
+          translations = _props.translations,
+          others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations']);
+
+
+      return _react2.default.createElement(
+        _HiFormControl2.default,
+        {
+          id: id,
+          label: label,
+          required: required,
+          disabled: disabled,
+          error: error,
+          errorText: errorText,
+          helperText: helperText,
+          helperIcon: helperIcon
+        },
+        _react2.default.createElement(_HiSelect2.default, (0, _extends3.default)({
+          id: id,
+          name: name,
+          value: value,
+          options: options,
+          type: type,
+          multiple: multiple,
+          iconAll: iconAll,
+          checkbox: checkbox,
+          searchable: searchable,
+          translations: translations,
+          onClick: this.handleClick,
+          onMouseEnter: this.handleMouseEnter,
+          onMouseLeave: this.handleMouseLeave,
+          onClose: this.handleClose,
+          disabled: disabled,
+          error: error
+        }, others))
+      );
+    }
+  }]);
+  return HiSelectField;
+}(_react2.default.PureComponent);
+
+HiSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: _propTypes2.default.bool,
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: _propTypes2.default.bool,
+  /**
+   * Texte de l'erreur
+   */
+  errorText: _propTypes2.default.string,
+  /**
+   * 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,
+  /**
+   * id de l'élément input
+   */
+  id: _propTypes2.default.string.isRequired,
+  /**
+   * Label du champs
+   */
+  label: _propTypes2.default.string,
+  /**
+   * true si champs obligatoire
+   */
+  required: _propTypes2.default.bool
+} : {};
+exports.default = HiSelectField;

package/HiSelect/HiSuggestSelect.js

@@ -0,0 +1,306 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+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 _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactDom = require('react-dom');
+
+var _Grow = require('material-ui/transitions/Grow');
+
+var _Grow2 = _interopRequireDefault(_Grow);
+
+var _Paper = require('material-ui/Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+var _ClickAwayListener = require('material-ui/utils/ClickAwayListener');
+
+var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
+
+var _reactPopper = require('react-popper');
+
+var _HiSelectableList = require('../HiSelectableList');
+
+var _HiSelectableList2 = _interopRequireDefault(_HiSelectableList);
+
+var _HiInput = require('../HiForm/HiInput');
+
+var _HiInput2 = _interopRequireDefault(_HiInput);
+
+var _styles = require('../styles');
+
+var _hiHelpers = require('../utils/hiHelpers');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @inheritedComponent HiInput
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            backgroundColor: theme.palette.background2,
+            maxWidth: 500,
+            minWidth: 250,
+            width: '100%'
+        },
+        popper: {
+            width: '100%',
+            transform: 'none',
+            zIndex: 9,
+            top: '100%'
+        },
+        popperClose: {
+            pointerEvents: 'none'
+        },
+        paper: {
+            borderRadius: '0px 2px',
+            maxHeight: 440,
+            transition: 'none'
+        }
+    };
+};
+
+var HiSuggestSelect = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiSuggestSelect, _React$PureComponent);
+
+    function HiSuggestSelect(props) {
+        (0, _classCallCheck3.default)(this, HiSuggestSelect);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiSuggestSelect.__proto__ || (0, _getPrototypeOf2.default)(HiSuggestSelect)).call(this, props));
+
+        _this.handleSelect = function (event, value) {
+            document.body.style.overflow = 'auto';
+            _this.props.onSelect(event, value);
+            var textInput = _this.textInput;
+            if (textInput) {
+                setTimeout(function () {
+                    textInput.focus();
+                }, 1);
+            }
+        };
+
+        _this.handleKeyDown = function (event) {
+            var nextItem = void 0;
+            if (event.key === 'ArrowDown') {
+                nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'down');
+            } else if (event.key === 'ArrowUp') {
+                nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'up');
+            } else if (event.key === 'Tab') {
+                document.body.style.overflow = 'auto';
+                _this.setState({ open: false });
+            }
+            if (nextItem) {
+                nextItem.focus();
+            }
+        };
+
+        _this.handleKeyDownSearch = function (event) {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                document.body.style.overflow = 'hidden';
+                // On récupère la div parent "overlay"
+                var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
+                setTimeout(function () {
+                    // On recupère tous les items
+                    var items = overlay.getElementsByTagName('li');
+                    if (items.length) {
+                        // On focus sur le premier
+                        items[0].focus();
+                    }
+                }, 1);
+            }
+        };
+
+        _this.state = {
+            focused: false,
+            options: props.options
+        };
+
+        _this.handleSelect = _this.handleSelect.bind(_this);
+        _this.handleClose = _this.handleClose.bind(_this);
+        _this.handleBlur = _this.handleBlur.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiSuggestSelect, [{
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            this.setState({ options: nextProps.options });
+        }
+    }, {
+        key: 'handleClose',
+        value: function handleClose() {
+            document.body.style.overflow = 'auto';
+            this.setState({
+                focused: false, // TODO - Make difference between open and focus
+                options: []
+            });
+        }
+
+        // Key down on list items
+
+
+        // Key down on search input
+
+    }, {
+        key: 'handleBlur',
+        value: function handleBlur(event) {
+            // Si on click sur un élément de HiInput, on garde le focus
+            // Par exemple sur l'icone reset
+            var overlay = this.overlay;
+            if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
+                this.setState({ options: [] });
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                translations = _props.translations,
+                id = _props.id,
+                onSearch = _props.onSearch,
+                otherProps = (0, _objectWithoutProperties3.default)(_props, ['classes', 'translations', 'id', 'onSearch']);
+            var _state = this.state,
+                focused = _state.focused,
+                options = _state.options;
+
+            var open = !!options.length;
+            return _react2.default.createElement(
+                'div',
+                {
+                    className: classes.root,
+                    ref: function ref(el) {
+                        _this2.overlay = el;
+                    }
+                },
+                _react2.default.createElement(
+                    _reactPopper.Manager,
+                    null,
+                    _react2.default.createElement(
+                        _reactPopper.Target,
+                        null,
+                        _react2.default.createElement(_HiInput2.default, (0, _extends3.default)({}, otherProps, {
+                            inputId: id,
+                            focused: focused,
+                            inputRef: function inputRef(input) {
+                                _this2.textInput = input;
+                            },
+                            onChange: onSearch,
+                            onKeyDown: this.handleKeyDownSearch,
+                            onBlur: this.handleBlur
+                        }))
+                    ),
+                    open && _react2.default.createElement(
+                        _reactPopper.Popper,
+                        {
+                            placement: 'bottom-start',
+                            eventsEnabled: open,
+                            className: (0, _classnames2.default)(classes.popper, (0, _defineProperty3.default)({}, classes.popperClose, !open))
+                        },
+                        _react2.default.createElement(
+                            _ClickAwayListener2.default,
+                            { onClickAway: this.handleClose },
+                            _react2.default.createElement(
+                                _Grow2.default,
+                                { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
+                                _react2.default.createElement(
+                                    _Paper2.default,
+                                    { className: classes.paper },
+                                    _react2.default.createElement(_HiSelectableList2.default, {
+                                        itemList: options,
+                                        selectedIdList: [],
+                                        checkbox: false,
+                                        onSelect: this.handleSelect,
+                                        translations: translations,
+                                        onKeyDown: this.handleKeyDown
+                                    })
+                                )
+                            )
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return HiSuggestSelect;
+}(_react2.default.PureComponent);
+
+HiSuggestSelect.defaultProps = {
+    translations: {},
+    options: []
+};
+HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * id de l'élément input
+     */
+    id: _propTypes2.default.string,
+    /**
+     * Fonction de callback appelée lorsqu'on écrit dans le champ
+     */
+    onSearch: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on sélectionne une suggestion.
+     */
+    onSelect: _propTypes2.default.func,
+    /**
+     * Liste de suggestions.
+     */
+    options: _propTypes2.default.array,
+    /**
+     * Traductions (par défaut en anglais)
+     */
+    translations: _propTypes2.default.object
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiSuggestSelect' })(HiSuggestSelect);

package/HiSelect/HiSuggestSelectField.js

@@ -0,0 +1,143 @@
+'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 _HiFormControl = require('../HiForm/HiFormControl');
+
+var _HiFormControl2 = _interopRequireDefault(_HiFormControl);
+
+var _HiSuggestSelect = require('./HiSuggestSelect');
+
+var _HiSuggestSelect2 = _interopRequireDefault(_HiSuggestSelect);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Champs input autosuggest pour formulaire avec label
+ */
+// @inheritedComponent HiSuggestSelect
+
+var HiSuggestSelectField = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiSuggestSelectField, _React$PureComponent);
+
+    function HiSuggestSelectField() {
+        (0, _classCallCheck3.default)(this, HiSuggestSelectField);
+        return (0, _possibleConstructorReturn3.default)(this, (HiSuggestSelectField.__proto__ || (0, _getPrototypeOf2.default)(HiSuggestSelectField)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiSuggestSelectField, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                label = _props.label,
+                required = _props.required,
+                disabled = _props.disabled,
+                error = _props.error,
+                errorText = _props.errorText,
+                helperText = _props.helperText,
+                helperIcon = _props.helperIcon,
+                id = _props.id,
+                others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id']);
+
+
+            return _react2.default.createElement(
+                _HiFormControl2.default,
+                {
+                    id: id,
+                    label: label,
+                    required: required,
+                    disabled: disabled,
+                    error: error,
+                    errorText: errorText,
+                    helperText: helperText,
+                    helperIcon: helperIcon
+                },
+                _react2.default.createElement(_HiSuggestSelect2.default, (0, _extends3.default)({
+                    id: id,
+                    translations: {
+                        all: 'Tous les pays',
+                        no_result_match: 'Aucun résultat correspondant',
+                        search: 'Recherche',
+                        n_items_selected: '%s pays sélectionnés',
+                        one_item_selected: '%s pays sélectionné'
+                    }
+                }, others))
+            );
+        }
+    }]);
+    return HiSuggestSelectField;
+}(_react2.default.PureComponent);
+
+HiSuggestSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Si `true`, l'input sera inactif.
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Si `true`, le champs sera en erreur.
+     */
+    error: _propTypes2.default.bool,
+    /**
+     * Texte de l'erreur
+     */
+    errorText: _propTypes2.default.string,
+    /**
+     * 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,
+    /**
+     * id de l'élément input
+     */
+    id: _propTypes2.default.string,
+    /**
+     * Label du champs
+     */
+    label: _propTypes2.default.string,
+    /**
+     * true si champs obligatoire
+     */
+    required: _propTypes2.default.bool
+} : {};
+exports.default = HiSuggestSelectField;