@hipay/hipay-material-ui 2.3.1-rc3 → 2.3.1-rc4

package/HiSelect/HiSelectInput.js

@@ -1,47 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
-
-var _ButtonBase = _interopRequireDefault(require("@material-ui/core/ButtonBase"));
-
-var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
-
-var _HiIcon = _interopRequireDefault(require("../HiIcon"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _keycode = _interopRequireDefault(require("keycode"));
-
-var _reactDeviceDetect = require("react-device-detect");
-
-var styles = function styles(theme) {
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import classNames from 'classnames';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import Icon from '@material-ui/core/Icon';
+import HiIcon from '../HiIcon';
+import { withStyles } from '@material-ui/core/styles';
+import keycode from 'keycode';
+import { isMobile } from 'react-device-detect';
+export var styles = function styles(theme) {
   return {
     root: {
       width: '100%',
@@ -125,7 +99,7 @@ var styles = function styles(theme) {
       backgroundColor: theme.palette.background3
     },
     error: {},
-    label: (0, _objectSpread2.default)({
+    label: _objectSpread({
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis'
@@ -155,23 +129,20 @@ var styles = function styles(theme) {
  * @ignore - internal component.
  */
 
-
-exports.styles = styles;
-
-var _ref = _react.default.createElement(_ArrowDropDown.default, null);
-
 var HiSelectInput =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  (0, _inherits2.default)(HiSelectInput, _React$PureComponent);
+  _inherits(HiSelectInput, _React$PureComponent);
 
   function HiSelectInput(props) {
     var _this;
 
-    (0, _classCallCheck2.default)(this, HiSelectInput);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelectInput).call(this, props));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
-      var key = (0, _keycode.default)(event);
+    _classCallCheck(this, HiSelectInput);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(HiSelectInput).call(this, props));
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
+      var key = keycode(event);
 
       if (_this.props.onKeyDown) {
         _this.props.onKeyDown(event);
@@ -183,8 +154,9 @@ function (_React$PureComponent) {
         _this.props.onSubmit(event);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDownReset", function (event) {
-      var key = (0, _keycode.default)(event);
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDownReset", function (event) {
+      var key = keycode(event);
 
       if (key === 'enter' || key === 'space') {
         _this.handleReset(event);
@@ -193,23 +165,26 @@ function (_React$PureComponent) {
         event.preventDefault();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
       // Do not open select if press on resetIcon
       if ((!_this.resetIcon || !_this.resetIcon.contains(event.target)) && _this.props.onClick) {
         // Do not open select if press enter on button => submit form
-        if (event.type !== 'keydown' || (0, _keycode.default)(event) !== 'enter') {
+        if (event.type !== 'keydown' || keycode(event) !== 'enter') {
           _this.props.onClick(event);
         }
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReset", function (event) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleReset", function (event) {
       _this.props.onReset(event);
 
       if (_this.input) {
         _this.input.focus();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBlur", function (event) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
       if ((!_this.input || !_this.input.contains(event.relatedTarget)) && _this.props.onBlur) {
         _this.props.onBlur(event);
       }
@@ -218,22 +193,24 @@ function (_React$PureComponent) {
       }*/
 
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ref", function (el) {
+
+    _defineProperty(_assertThisInitialized(_this), "ref", function (el) {
       _this.input = el;
 
       if (_this.props.refElement) {
         _this.props.refElement(el);
       }
     });
-    _this.handleKeyDown = _this.handleKeyDown.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
-    _this.ref = _this.ref.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
+
+    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
+    _this.ref = _this.ref.bind(_assertThisInitialized(_this));
+    _this.handleReset = _this.handleReset.bind(_assertThisInitialized(_this));
     return _this;
   }
 
-  (0, _createClass2.default)(HiSelectInput, [{
+  _createClass(HiSelectInput, [{
     key: "render",
     value: function render() {
       var _classNames,
@@ -253,9 +230,9 @@ function (_React$PureComponent) {
           id = _this$props.id,
           placeholder = _this$props.placeholder; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
-      var rootClass = (0, _classnames.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.focused, focused), (0, _defineProperty2.default)(_classNames, classes.error, error && !focused), (0, _defineProperty2.default)(_classNames, classes.rootMobile, _reactDeviceDetect.isMobile), _classNames));
-      var iconClass = (0, _classnames.default)(classes.icon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconOpen, open), (0, _defineProperty2.default)(_classNames2, classes.iconClose, !open), _classNames2));
-      return noButton ? _react.default.createElement("div", {
+      var rootClass = classNames(classes.root, classes.inkbar, classes.underline, (_classNames = {}, _defineProperty(_classNames, classes.disabled, disabled), _defineProperty(_classNames, classes.focused, focused), _defineProperty(_classNames, classes.error, error && !focused), _defineProperty(_classNames, classes.rootMobile, isMobile), _classNames));
+      var iconClass = classNames(classes.icon, (_classNames2 = {}, _defineProperty(_classNames2, classes.iconOpen, open), _defineProperty(_classNames2, classes.iconClose, !open), _classNames2));
+      return noButton ? React.createElement("div", {
         id: id,
         className: rootClass,
         onClick: onClick,
@@ -267,11 +244,11 @@ function (_React$PureComponent) {
         role: "button",
         tabIndex: "0",
         ref: this.ref
-      }, _react.default.createElement("span", {
-        className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
-      }, value || placeholder), _react.default.createElement(_ArrowDropDown.default, {
+      }, React.createElement("span", {
+        className: classNames(classes.label, _defineProperty({}, classes.placeholder, value === undefined))
+      }, value || placeholder), React.createElement(ArrowDropDownIcon, {
         className: iconClass
-      })) : _react.default.createElement(_ButtonBase.default, {
+      })) : React.createElement(ButtonBase, {
         component: "div",
         id: id,
         className: rootClass,
@@ -284,30 +261,31 @@ function (_React$PureComponent) {
         onBlur: this.handleBlur // buttref={this.ref}
         ,
         buttonRef: this.ref
-      }, _react.default.createElement("span", {
-        className: (0, _classnames.default)(classes.label, (0, _defineProperty2.default)({}, classes.placeholder, value === undefined))
-      }, value || placeholder), onReset && focused && _react.default.createElement("div", {
+      }, React.createElement("span", {
+        className: classNames(classes.label, _defineProperty({}, classes.placeholder, value === undefined))
+      }, value || placeholder), onReset && focused && React.createElement("div", {
         ref: function ref(el) {
           _this2.resetIcon = el;
         }
-      }, _react.default.createElement(_HiIcon.default, {
+      }, React.createElement(HiIcon, {
         icon: "close",
         size: 20,
         color: "neutral",
         onClick: this.handleReset,
         onKeyDown: this.handleKeyDownReset,
         tabIndex: 0
-      })), _react.default.createElement(_Icon.default, {
+      })), React.createElement(Icon, {
         classes: {
           root: iconClass
         }
-      }, _ref));
+      }, React.createElement(ArrowDropDownIcon, null)));
     }
   }]);
+
   return HiSelectInput;
-}(_react.default.PureComponent);
+}(React.PureComponent);
 
-(0, _defineProperty2.default)(HiSelectInput, "defaultProps", {
+_defineProperty(HiSelectInput, "defaultProps", {
   disabled: false,
   open: false,
   focused: false,
@@ -315,9 +293,7 @@ function (_React$PureComponent) {
   error: false
 });
 
-var _default = (0, _styles.withStyles)(styles, {
+export default withStyles(styles, {
   hiComponent: true,
   name: 'HmuiHiSelectInput'
-})(HiSelectInput);
-
-exports.default = _default;
+})(HiSelectInput);

package/HiSelect/HiSelectInput.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow } from '../test-utils';
+import HiSelectInput from './HiSelectInput';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import { spy } from 'sinon';
+describe('<SelectInput />', function () {
+  var shallow;
+  it('should render a ButtonBase', function () {
+    var handler = spy();
+    shallow = createShallow();
+    var wrapper = shallow(React.createElement(HiSelectInput, {
+      value: "Zin\xE9dine Zidane",
+      open: false,
+      focused: false,
+      disabled: false,
+      onClick: handler
+    }));
+    assert.strictEqual(wrapper.dive().find(ButtonBase).length, 1, 'should be a ButtonBase');
+  });
+});

package/HiSelect/HiSelectMobile.js

@@ -1,37 +1,15 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.styles = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
-
-var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styles = require("@material-ui/core/styles");
-
-var styles = function styles(theme) {
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+export var styles = function styles(theme) {
   return {
     root: {
       position: 'absolute',
@@ -42,26 +20,25 @@ var styles = function styles(theme) {
   };
 };
 
-exports.styles = styles;
-
 var HiSelectMobile =
 /*#__PURE__*/
 function (_React$Component) {
-  (0, _inherits2.default)(HiSelectMobile, _React$Component);
+  _inherits(HiSelectMobile, _React$Component);
 
   function HiSelectMobile() {
     var _getPrototypeOf2;
 
     var _this;
 
-    (0, _classCallCheck2.default)(this, HiSelectMobile);
+    _classCallCheck(this, HiSelectMobile);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiSelectMobile)).call.apply(_getPrototypeOf2, [this].concat(args)));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buildOptionList", function (itemList) {
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(HiSelectMobile)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "buildOptionList", function (itemList) {
       var optionList = [];
 
       if (itemList.length) {
@@ -80,9 +57,9 @@ function (_React$Component) {
             } else if (parentId) {
               groupList.push(item);
             } else if (item.children) {
-              optionList.push(_this.buildChildrenList([item].concat((0, _toConsumableArray2.default)(item.children))));
+              optionList.push(_this.buildChildrenList([item].concat(_toConsumableArray(item.children))));
             } else {
-              optionList.push(_react.default.createElement("option", {
+              optionList.push(React.createElement("option", {
                 key: item.id,
                 "data-item": JSON.stringify(item),
                 value: item.id
@@ -98,20 +75,22 @@ function (_React$Component) {
 
       return optionList;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buildChildrenList", function (itemList) {
+
+    _defineProperty(_assertThisInitialized(_this), "buildChildrenList", function (itemList) {
       var group = itemList.shift();
-      return _react.default.createElement("optgroup", {
+      return React.createElement("optgroup", {
         key: group.id,
         label: group.label
       }, itemList.map(function (item) {
-        return _react.default.createElement("option", {
+        return React.createElement("option", {
           key: item.id,
           "data-item": JSON.stringify(item),
           value: item.id
         }, item.label);
       }));
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (event) {
+
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (event) {
       if (!_this.props.multiple) {
         var itemSelected = event.target[event.target.selectedIndex];
 
@@ -128,10 +107,11 @@ function (_React$Component) {
         _this.props.onChange(event, optionsSelected);
       }
     });
+
     return _this;
   }
 
-  (0, _createClass2.default)(HiSelectMobile, [{
+  _createClass(HiSelectMobile, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -140,10 +120,12 @@ function (_React$Component) {
           itemList = _this$props.itemList,
           multiple = _this$props.multiple,
           value = _this$props.value;
-      var additionalProps = (0, _objectSpread2.default)({}, multiple && {
+
+      var additionalProps = _objectSpread({}, multiple && {
         multiple: 'multiple'
       });
-      return _react.default.createElement("select", (0, _extends2.default)({
+
+      return React.createElement("select", Object.assign({
         value: value,
         style: {
           width: this.props.width
@@ -155,13 +137,12 @@ function (_React$Component) {
       }, additionalProps), this.buildOptionList(itemList));
     }
   }]);
+
   return HiSelectMobile;
-}(_react.default.Component);
+}(React.Component);
 
-(0, _defineProperty2.default)(HiSelectMobile, "defaultProps", {
+_defineProperty(HiSelectMobile, "defaultProps", {
   itemList: []
 });
 
-var _default = (0, _styles.withStyles)(styles)(HiSelectMobile);
-
-exports.default = _default;
+export default withStyles(styles)(HiSelectMobile);