@hipay/hipay-material-ui 2.0.0-beta.55 → 2.0.0-beta.57

package/HiRadio/HiRadio.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("../styles");
+
+var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
+
+// @inheritedComponent Radio
+var styles = function styles(theme) {
+  return {
+    checked: {
+      color: theme.palette.neutral.main
+    },
+    disabled: {
+      color: theme.palette.action.disabled
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiRadio = function HiRadio(_ref) {
+  var checked = _ref.checked,
+      classes = _ref.classes,
+      className = _ref.className,
+      color = _ref.color,
+      disabled = _ref.disabled,
+      label = _ref.label,
+      onChange = _ref.onChange,
+      value = _ref.value;
+  var hcolor = ['positive', 'negative', 'middle', 'neutral', 'inherit'].includes(color) ? 'default' : color;
+  return _react.default.createElement(_Radio.default, {
+    className: className,
+    classes: {
+      checked: classes.checked,
+      disabled: classes.disabled
+    },
+    checked: checked,
+    color: hcolor,
+    label: label,
+    onChange: onChange,
+    disabled: disabled,
+    value: value
+  });
+};
+
+HiRadio.propTypes = process.env.NODE_ENV !== "production" ? {
+  checked: _propTypes.default.bool,
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
+  color: _propTypes.default.oneOf(['inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+  disabled: _propTypes.default.bool,
+  label: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  value: _propTypes.default.string
+} : {};
+HiRadio.defaultProps = {};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiRadio'
+})(HiRadio);
+
+exports.default = _default;

package/HiRadio/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiRadio.default;
+  }
+});
+
+var _HiRadio = _interopRequireDefault(require("./HiRadio"));

package/HiSelect/HiSelect.js

@@ -23,8 +23,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -126,30 +124,6 @@ function (_React$PureComponent) {
     (0, _classCallCheck2.default)(this, HiSelect);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, _props));
 
-    _this.handleClick = function () {
-      if (_this.state.open) {
-        _this.handleClose();
-      } else {
-        _this.setState({
-          open: true
-        });
-
-        var options = _this.props.options.slice();
-
-        _this.handleSuggestions(options);
-
-        if (_this.props.onClick) {
-          _this.props.onClick();
-        } // Gestion du focus
-
-
-        if (!_this.props.searchable) {
-          // sinon focus sur le dernier élément selectionné
-          _this.focusOnSelectedItem();
-        }
-      }
-    };
-
     _this.buildHierarchyTrees = function (props) {
       // Construct two associative arrays
       // hierarchy[parentId] => children
@@ -211,6 +185,63 @@ function (_React$PureComponent) {
       }, 1);
     };
 
+    _this.handleBlur = function () {
+      _this.setState({
+        focused: false
+      });
+    };
+
+    _this.handleClick = function () {
+      if (_this.state.open) {
+        _this.handleClose();
+      } else {
+        _this.setState({
+          open: true
+        });
+
+        var options = _this.props.options.slice();
+
+        _this.handleSuggestions(options);
+
+        if (_this.props.onClick) {
+          _this.props.onClick();
+        } // Gestion du focus
+
+
+        if (!_this.props.searchable) {
+          // sinon focus sur le dernier élément selectionné
+          _this.focusOnSelectedItem();
+        }
+      }
+    };
+
+    _this.handleClickAway = function (event) {
+      // Au clic sur le bouton, on laisse le handleClick fermer le select
+      if (!_this.selectInputElement.contains(event.target)) {
+        _this.handleClose(event);
+      }
+    };
+
+    _this.handleClose = function () {
+      if (_this.props.onClose) {
+        _this.props.onClose();
+      }
+
+      if (_this.selectInputElement) {
+        _this.selectInputElement.focus();
+      }
+
+      _this.setState({
+        open: false
+      });
+    };
+
+    _this.handleFocus = function () {
+      _this.setState({
+        focused: true
+      });
+    };
+
     _this.handleKeyDown = function (event) {
       var nextItem;
 
@@ -244,36 +275,29 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleFocus = function () {
-      _this.setState({
-        focused: true
-      });
-    };
+    _this.handleRequestDelete = function (event) {
+      event.stopPropagation();
 
-    _this.handleBlur = function () {
-      _this.setState({
-        focused: false
-      });
+      _this.props.onChange(_this.props.name, []);
     };
 
-    _this.handleClose = function () {
-      if (_this.props.onClose) {
-        _this.props.onClose();
-      }
+    _this.handleReset = function (event) {
+      if (_this.props.onReset) {
+        event.stopPropagation();
 
-      if (_this.selectInputElement) {
-        _this.selectInputElement.focus();
+        _this.props.onReset(event);
       }
-
-      _this.setState({
-        open: false
-      });
     };
 
-    _this.handleClickAway = function (event) {
-      // Au clic sur le bouton, on laisse le handleClick fermer le select
-      if (!_this.selectInputElement.contains(event.target)) {
-        _this.handleClose(event);
+    _this.handleScroll = function (event) {
+      if (!_this.props.loadingMoreResults && _this.props.hasMore && event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop < 15) {
+        _this.props.loadMoreResults(_this.state.resultsPageNumber + 1);
+
+        _this.setState(function (prevState) {
+          return {
+            resultsPageNumber: prevState.resultsPageNumber + 1
+          };
+        });
       }
     };
 
@@ -446,24 +470,6 @@ function (_React$PureComponent) {
       });
     };
 
-    _this.handleRequestDelete = function (evt) {
-      evt.stopPropagation();
-
-      _this.props.onChange(_this.props.name, []);
-    };
-
-    _this.handleScroll = function (event) {
-      if (!_this.props.loadingMoreResults && _this.props.hasMore && event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop < 15) {
-        _this.props.loadMoreResults(_this.state.resultsPageNumber + 1);
-
-        _this.setState(function (prevState) {
-          return {
-            resultsPageNumber: prevState.resultsPageNumber + 1
-          };
-        });
-      }
-    };
-
     _this.state = {
       open: false,
       focused: false,
@@ -521,15 +527,6 @@ function (_React$PureComponent) {
       _this.state.dynamic = true;
     }
 
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClickAway = _this.handleClickAway.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleRequestDelete = _this.handleRequestDelete.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleScroll = _this.handleScroll.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
@@ -557,14 +554,6 @@ function (_React$PureComponent) {
         });
       }
     }
-  }, {
-    key: "handleReset",
-    value: function handleReset(event) {
-      if (this.props.onReset) {
-        event.stopPropagation();
-        this.props.onReset(event);
-      }
-    }
   }, {
     key: "render",
     value: function render() {

package/HiSelect/HiSuggestSelect.js

@@ -47,6 +47,8 @@ var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
 
 var _helpers = require("../utils/helpers");
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 // @inheritedComponent HiInput
 var styles = function styles(theme) {
   return {
@@ -115,13 +117,24 @@ function (_React$PureComponent) {
 
     _this.handleKeyDown = function (event) {
       var nextItem;
+      var key = (0, _keycode.default)(event);
 
-      if (event.key === 'ArrowDown') {
+      if (key === 'down') {
+        event.preventDefault();
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
-      } else if (event.key === 'ArrowUp') {
+      } else if (key === 'up') {
+        event.preventDefault();
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
-      } else if (event.key === 'Tab') {
+      } else if (key === 'tab') {
         document.body.style.overflow = 'auto';
+      } else if (key === 'escape' || 'enter') {
+        event.preventDefault();
+
+        var item = _this.props.options.find(function (elem) {
+          return String(elem.id) === event.target.id;
+        });
+
+        _this.handleSelect(null, item);
       }
 
       if (nextItem) {
@@ -172,10 +185,14 @@ function (_React$PureComponent) {
     }
   }, {
     key: "handleFocus",
-    value: function handleFocus() {
+    value: function handleFocus(event) {
       this.setState({
         focused: true
       });
+
+      if (this.props.onFocusInput) {
+        this.props.onFocusInput(event);
+      }
     }
   }, {
     key: "handleBlur",
@@ -188,6 +205,10 @@ function (_React$PureComponent) {
           focused: false
         });
       }
+
+      if (this.props.onBlurInput) {
+        this.props.onBlurInput(event);
+      }
     }
   }, {
     key: "render",
@@ -307,6 +328,16 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   loading: _propTypes.default.bool,
 
+  /**
+   * Fonction de callback appelée lorsqu'on blur le champ de recherche
+   */
+  onBlurInput: _propTypes.default.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on focus le champs de recherche
+   */
+  onFocusInput: _propTypes.default.func,
+
   /**
    * Fonction de callback appelée lorsqu'on écrit dans le champ
    */

package/HiSelect/SelectInput.js

@@ -45,7 +45,10 @@ var styles = function styles(theme) {
       maxWidth: 500,
       display: 'flex',
       justifyContent: 'center',
-      padding: 8,
+      paddingTop: 7,
+      paddingBottom: 9,
+      paddingRight: 8,
+      paddingLeft: 8,
       cursor: 'pointer'
     },
     underline: {
@@ -345,6 +348,11 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   refElement: _propTypes.default.func,
 
+  /**
+   * Theme object
+   */
+  theme: _propTypes.default.object,
+
   /**
    * Valeur à afficher (déjà formattée)
    */

package/HiSelectNew/HiNestedSelectContent.js

@@ -235,7 +235,6 @@ function (_React$PureComponent) {
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       var _this$props2 = _this.props,
-          classes = _this$props2.classes,
           disabledParent = _this$props2.disabledParent,
           hasAll = _this$props2.hasAll,
           iconAll = _this$props2.iconAll,
@@ -353,6 +352,11 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   hasAll: _propTypes.default.bool,
 
+  /**
+   * Propriétés du composant HiSelectableList
+   */
+  hiSelectableListProps: _propTypes.default.object,
+
   /**
    * id du select
    */