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

package/HiForm/HiSearchField.js

@@ -0,0 +1,192 @@
+'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 _HiInput = require('../HiForm/HiInput');
+
+var _HiInput2 = _interopRequireDefault(_HiInput);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Construit une barre de recherche avec icône Search (Magnify),
+ * permet de filtrer une liste d'éléments en spécifiant le nom de la/les propriétés sur lesquelles filtrer,
+ * retour la liste d'élément filtré.
+ * Un bouton reset s'affiche à la saisie permettant de réinitialiser l'input.
+ */
+var HiSearchField = function (_React$Component) {
+    (0, _inherits3.default)(HiSearchField, _React$Component);
+
+    function HiSearchField(props) {
+        (0, _classCallCheck3.default)(this, HiSearchField);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiSearchField.__proto__ || (0, _getPrototypeOf2.default)(HiSearchField)).call(this, props));
+
+        _this.state = {
+            inputValue: ''
+        };
+
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.handleReset = _this.handleReset.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiSearchField, [{
+        key: 'filterOnProperties',
+        value: function filterOnProperties(item, search, properties) {
+            if (typeof properties === 'undefined' || properties.length < 1) {
+                // If no properties specify, search on item
+                return item.toString().toLowerCase().search(search.toLowerCase()) !== -1;
+            }
+            var searchSucceed = false;
+            properties.forEach(function (filter) {
+                var itemProperty = null;
+                if (filter.indexOf('.') > 0) {
+                    itemProperty = item[filter.split('.')[0]][filter.split('.')[1]];
+                } else {
+                    itemProperty = item[filter];
+                }
+                if (itemProperty.toString().toLowerCase().search(search.toLowerCase()) !== -1) {
+                    searchSucceed = true;
+                }
+            });
+            return searchSucceed;
+        }
+    }, {
+        key: 'handleChange',
+        value: function handleChange(event, inputValue) {
+            var _this2 = this;
+
+            var searchedValue = void 0;
+            if (typeof inputValue !== 'undefined' && typeof event.target.value === 'undefined') {
+                searchedValue = inputValue;
+            } else {
+                searchedValue = event.target.value;
+            }
+            this.setState({
+                inputValue: searchedValue
+            });
+
+            if (typeof this.props.onSearch === 'undefined') {
+                var currentParent = null;
+                var filteredList = [];
+                this.props.itemList.forEach(function (item) {
+                    var add = _this2.filterOnProperties(item, searchedValue, _this2.props.filterPropertyList);
+                    if (item.hasChildren === true && add === false) {
+                        currentParent = item;
+                    }
+                    if (add === true) {
+                        if (currentParent !== null && item.parentId === currentParent.id) {
+                            filteredList.push(currentParent);
+                            currentParent = null;
+                        }
+                        filteredList.push(item);
+                    }
+                });
+
+                this.props.callbackFilteredList(filteredList);
+            } else {
+                this.props.onSearch(searchedValue);
+            }
+        }
+    }, {
+        key: 'handleReset',
+        value: function handleReset() {
+            this.setState({
+                inputValue: ''
+            });
+
+            if (typeof this.props.onSearch === 'undefined') {
+                this.props.callbackFilteredList(this.props.itemList);
+            } else {
+                this.props.onSearch('');
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                placeholder = _props.placeholder,
+                others = (0, _objectWithoutProperties3.default)(_props, ['placeholder']);
+
+
+            return _react2.default.createElement(_HiInput2.default, (0, _extends3.default)({
+                placeholder: placeholder,
+                onReset: this.handleReset,
+                onChange: this.handleChange,
+                value: this.state.inputValue,
+                startAdornment: 'Magnify'
+            }, others));
+        }
+    }]);
+    return HiSearchField;
+}(_react2.default.Component);
+
+HiSearchField.defaultProps = {
+    placeholder: 'Search'
+};
+HiSearchField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Fonction de callback qui renvoie la liste d'éléments filtrée
+     *
+     * @param {array} suggestions
+     */
+    callbackFilteredList: _propTypes2.default.func.isRequired,
+    /**
+     * Liste des propriété de l'élément sur lesquelles filtrer (par défaut l'item lui même)
+     */
+    filterPropertyList: _propTypes2.default.array,
+    /**
+     * Liste d'éléments
+     */
+    itemList: _propTypes2.default.array.isRequired,
+    /**
+     * Fonction de callback qui renvoit le texte saisi
+     *
+     * @param {string} value
+     */
+    onSearch: _propTypes2.default.func,
+    /**
+     * Placeholder
+     */
+    placeholder: _propTypes2.default.string
+} : {};
+exports.default = HiSearchField;

package/HiForm/HiTextField.js

@@ -0,0 +1,293 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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('./HiFormControl');
+
+var _HiFormControl2 = _interopRequireDefault(_HiFormControl);
+
+var _HiInput = require('./HiInput');
+
+var _HiInput2 = _interopRequireDefault(_HiInput);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Champs input pour formulaire
+ */
+// @inheritedComponent TextField
+
+var HiTextField = function (_React$PureComponent) {
+  (0, _inherits3.default)(HiTextField, _React$PureComponent);
+
+  function HiTextField(props) {
+    (0, _classCallCheck3.default)(this, HiTextField);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (HiTextField.__proto__ || (0, _getPrototypeOf2.default)(HiTextField)).call(this, props));
+
+    _this.focus = function () {
+      _this.input.focus();
+    };
+
+    _this.state = {
+      nbChars: props.value ? props.value.length : 0
+    };
+
+    _this.handleBlur = _this.handleBlur.bind(_this);
+    _this.handleChange = _this.handleChange.bind(_this);
+    _this.handleFocus = _this.handleFocus.bind(_this);
+    return _this;
+  }
+
+  (0, _createClass3.default)(HiTextField, [{
+    key: 'handleBlur',
+    value: function handleBlur(event) {
+      if (this.props.onBlur) {
+        this.props.onBlur(event);
+      }
+    }
+  }, {
+    key: 'handleChange',
+    value: function handleChange(event) {
+      var value = event.target.value;
+      if (value.length <= this.props.maxLength) {
+        if (this.props.onChange) {
+          this.props.onChange(event);
+        }
+        if (this.props.multiline === true) {
+          this.setState({ nbChars: value.length });
+        }
+      }
+    }
+  }, {
+    key: 'handleFocus',
+    value: function handleFocus(event) {
+      if (this.props.onFocus) {
+        this.props.onFocus(event);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          className = _props.className,
+          disabled = _props.disabled,
+          error = _props.error,
+          errorText = _props.errorText,
+          id = _props.id,
+          label = _props.label,
+          helperText = _props.helperText,
+          helperIcon = _props.helperIcon,
+          fullWidth = _props.fullWidth,
+          required = _props.required,
+          type = _props.type,
+          multiline = _props.multiline,
+          placeholder = _props.placeholder,
+          value = _props.value,
+          HiInputProps = _props.HiInputProps,
+          name = _props.name,
+          rows = _props.rows,
+          maxLength = _props.maxLength;
+      var nbChars = this.state.nbChars;
+
+
+      return _react2.default.createElement(
+        _HiFormControl2.default,
+        {
+          label: label,
+          required: required,
+          disabled: disabled,
+          className: className,
+          error: error,
+          id: id,
+          errorText: errorText,
+          helperText: helperText,
+          helperIcon: helperIcon,
+          multiline: multiline,
+          maxLength: maxLength,
+          nbChars: nbChars
+        },
+        _react2.default.createElement(_HiInput2.default, (0, _extends3.default)({
+          inputId: id,
+          name: name,
+          type: type,
+          placeholder: placeholder,
+          value: value,
+          disabled: disabled,
+          error: error,
+          multiline: multiline,
+          fullWidth: fullWidth,
+          onBlur: this.handleBlur,
+          onChange: this.handleChange,
+          onReset: this.props.onReset,
+          onFocus: this.handleFocus,
+          onRightIconClick: this.props.onRightIconClick,
+          onLeftIconClick: this.props.onLeftIconClick,
+          rows: rows,
+          inputRef: function inputRef(input) {
+            _this2.input = input;
+          }
+        }, HiInputProps))
+      );
+    }
+  }]);
+  return HiTextField;
+}(_react2.default.PureComponent);
+
+HiTextField.defaultProps = {
+  name: '',
+  type: 'text',
+  fullWidth: true,
+  required: true,
+  disabled: false,
+  error: false,
+  errorText: '',
+  helperText: '',
+  helperIcon: false,
+  multiline: false,
+  maxLength: 280
+};
+HiTextField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object,
+  /**
+   * Classes CSS appliquées
+   */
+  className: _propTypes2.default.string,
+  /**
+   * 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 chamsp prendra toute la largeur.
+   */
+  fullWidth: _propTypes2.default.bool,
+  /**
+   * 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,
+  /**
+   * Propriétés appliquées au composant HiInput
+   */
+  HiInputProps: _propTypes2.default.object,
+  /**
+   * id de l'élément input, utile pour lié le label
+   */
+  id: _propTypes2.default.string.isRequired,
+  /**
+   * id de l'élément input
+   */
+  inputRef: _propTypes2.default.func,
+  /**
+   * Label du champs
+   */
+  label: _propTypes2.default.string,
+  /**
+   * Nombre de caractères max pour un text area
+   * Valable uniquement si l'option multiline est à true
+   */
+  maxLength: _propTypes2.default.number,
+  /**
+   * Si `true`, le champs input sera un textarea
+   */
+  multiline: _propTypes2.default.bool,
+  /**
+   * Attribute name de l'élément `input`.
+   */
+  name: _propTypes2.default.string,
+  /**
+   * Fonction de callback appelée lorsqu'on quitte le champs input
+   */
+  onBlur: _propTypes2.default.func,
+  /**
+   * Fonction de callback appelée lorsqu'on remplie le champs de recherche
+   */
+  onChange: _propTypes2.default.func,
+  /**
+   * Fonction de callback appelée au focus du champs
+   */
+  onFocus: _propTypes2.default.func,
+  /**
+   * Fonction de callback appelée lorsqu'on clic sur l'icône de gauche
+   */
+  onLeftIconClick: _propTypes2.default.func,
+  /**
+   * Fonction de callback appelée lorsqu'on vide le champs de recherche
+   */
+  onReset: _propTypes2.default.func,
+  /**
+   * Fonction de callback appelée lorsqu'on clic sur l'icône de droite
+   */
+  onRightIconClick: _propTypes2.default.func,
+  /**
+   * Placeholder
+   */
+  placeholder: _propTypes2.default.string,
+  /**
+   * true si champs obligatoire
+   */
+  required: _propTypes2.default.bool,
+  /**
+   * Nombre de lignes pour les textArea
+   */
+  rows: _propTypes2.default.number,
+  /**
+   * Type du champs input. Doit être un type HTML5 valide.
+   */
+  type: _propTypes2.default.string,
+  /**
+   * Valeur de l'élément input
+   */
+  value: _propTypes2.default.string
+} : {};
+exports.default = HiTextField;

package/HiForm/index.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _HiEmailField = require('./HiEmailField');
+
+Object.defineProperty(exports, 'HiEmailField', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiEmailField).default;
+  }
+});
+
+var _HiFormControl = require('./HiFormControl');
+
+Object.defineProperty(exports, 'HiFormControl', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiFormControl).default;
+  }
+});
+
+var _HiFormLabel = require('./HiFormLabel');
+
+Object.defineProperty(exports, 'HiFormLabel', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiFormLabel).default;
+  }
+});
+
+var _HiInput = require('./HiInput');
+
+Object.defineProperty(exports, 'HiInput', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiInput).default;
+  }
+});
+
+var _HiPasswordField = require('./HiPasswordField');
+
+Object.defineProperty(exports, 'HiPasswordField', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiPasswordField).default;
+  }
+});
+
+var _HiTextField = require('./HiTextField');
+
+Object.defineProperty(exports, 'HiTextField', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiTextField).default;
+  }
+});
+
+var _HiSearchField = require('./HiSearchField');
+
+Object.defineProperty(exports, 'HiSearchField', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiSearchField).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/HiLoader/HiLoader.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactSpinners = require('react-spinners');
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles() {
+    return {};
+};
+
+function HiLoader(props) {
+    var theme = props.theme,
+        loading = props.loading;
+
+
+    return _react2.default.createElement(_reactSpinners.PropagateLoader, {
+        loading: loading,
+        size: 12,
+        color: theme.palette.business.primary.normal
+    });
+}
+
+HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Displays loader if true
+     */
+    loading: _propTypes2.default.bool,
+    /**
+     * @ignore
+     */
+    theme: _propTypes2.default.object
+} : {};
+
+HiLoader.defaultProps = {
+    loading: false
+};
+
+exports.default = (0, _withStyles2.default)(styles, { withTheme: true, name: 'HmuiHiLoader' })(HiLoader);

package/HiLoader/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _HiLoader = require('./HiLoader');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiLoader).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }