@hipay/hipay-material-ui 2.3.0-rcstyleguide-beta3 → 2.3.0-rcstyleguide-beta4

package/old_components/HiForm/HiSearchField.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiInput = _interopRequireDefault(require("./HiInput"));
+
+/**
+ * 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 =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiSearchField, _React$Component);
+
+  function HiSearchField(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiSearchField);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSearchField).call(this, props));
+    _this.state = {
+      inputValue: ''
+    };
+    _this.filterOnProperties = _this.filterOnProperties.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiSearchField, [{
+    key: "filterOnProperties",
+    value: function filterOnProperties(item, search) {
+      if (!this.props.filterPropertyList || this.props.filterPropertyList.length < 1) {
+        // If no properties specify, search on item
+        return item.toString().toLowerCase().search(search.toLowerCase()) !== -1;
+      }
+
+      var searchSucceed = false;
+      this.props.filterPropertyList.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;
+
+      if (typeof inputValue !== 'undefined' && typeof event.target.value === 'undefined') {
+        searchedValue = inputValue;
+      } else {
+        searchedValue = event.target.value;
+      }
+
+      this.setState({
+        inputValue: searchedValue
+      });
+
+      if (this.props.onSearch === undefined) {
+        var currentParent = null;
+        var filteredList = [];
+        this.props.itemList.forEach(function (item) {
+          var add = _this2.filterOnProperties(item, searchedValue);
+
+          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.onFilteredList(filteredList);
+      } else {
+        this.props.onSearch(event, searchedValue);
+      }
+    }
+  }, {
+    key: "handleReset",
+    value: function handleReset() {
+      this.setState({
+        inputValue: ''
+      });
+
+      if (typeof this.props.onSearch === 'undefined') {
+        this.props.onFilteredList(this.props.itemList);
+      } else {
+        this.props.onSearch(undefined, '');
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          placeholder = _this$props.placeholder,
+          others = (0, _objectWithoutProperties2.default)(_this$props, ["placeholder"]);
+      return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
+        placeholder: placeholder,
+        onReset: this.handleReset,
+        onChange: this.handleChange,
+        value: this.state.inputValue,
+        startAdornment: 'search'
+      }, others));
+    }
+  }]);
+  return HiSearchField;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(HiSearchField, "defaultProps", {
+  placeholder: 'Search'
+});
+var _default = HiSearchField;
+exports.default = _default;

package/old_components/HiForm/HiSlider.js

@@ -0,0 +1,281 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon/HiIcon"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var styles = function styles(theme) {
+  return {
+    barContainer: {
+      width: '100%',
+      position: 'relative',
+      margin: '0 7px'
+    },
+    barHidden: {
+      width: '100%',
+      opacity: 0,
+      position: 'absolute',
+      top: '7px',
+      zIndex: '2',
+      cursor: 'pointer'
+    },
+    mainContainer: (0, _objectSpread2.default)({}, theme.typography.body1, {
+      display: 'flex',
+      flexWrap: 'nowrap',
+      alignItems: 'center'
+    }),
+    topContainer: {
+      display: 'flex',
+      flexWrap: 'nowrap',
+      height: '18px'
+    },
+    bottomContainer: {
+      display: 'flex',
+      flexWrap: 'nowrap',
+      height: '18px'
+    },
+    barValue: {
+      display: 'flex',
+      width: '100%',
+      height: '4px',
+      borderRadius: '2px',
+      backgroundColor: theme.palette.primary.main,
+      position: 'absolute',
+      zIndex: '2'
+    },
+    arrow: {
+      position: 'absolute',
+      zIndex: '1',
+      transform: 'rotate(-90deg) translate(0%,-50%)',
+      transition: 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+      transitionProperty: 'transform color',
+      fontSize: 20,
+      cursor: 'pointer'
+    },
+    leftLabel: {
+      color: theme.palette.primary.main,
+      left: '0px',
+      position: 'absolute',
+      fontSize: '11px',
+      alignSelf: 'flex-end'
+    },
+    rightLabel: {
+      color: '#737373',
+      right: '0px',
+      position: 'absolute',
+      fontSize: '11px',
+      alignSelf: 'flex-end'
+    },
+    textValue: {
+      position: 'absolute',
+      zIndex: '2'
+    },
+    trackAfter: {
+      backgroundColor: 'gray',
+      opacity: 0.24
+    },
+    focused: {
+      fontSize: 24,
+      color: theme.palette.primary.dark
+    }
+  };
+};
+/**
+ * HiSlider component
+ */
+
+
+exports.styles = styles;
+
+var HiSlider =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiSlider, _React$Component);
+
+  function HiSlider(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiSlider);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSlider).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (event) {
+      _this.props.onChange(parseFloat(event.target.value));
+
+      _this.textValueWidth = _this.textValue.offsetWidth;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFocus", function (isFocused) {
+      return function () {
+        _this.setState({
+          focused: isFocused
+        });
+      };
+    });
+    _this.state = {
+      focused: false
+    };
+    return _this;
+  }
+  /**
+   * Measures several components once they are mounted.
+   * If the value and a label (left or right) are hovered,
+   * we hide this label.
+   */
+
+
+  (0, _createClass2.default)(HiSlider, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.leftLabelWidth = this.leftLabel.offsetWidth;
+      this.rightLabelWidth = this.rightLabel.offsetWidth;
+      this.textValueWidth = this.textValue.offsetWidth;
+      this.barContainerWidth = this.barContainer.offsetWidth;
+
+      var _this$getHovering = this.getHovering(),
+          hoveringLeft = _this$getHovering.hoveringLeft,
+          hoveringRight = _this$getHovering.hoveringRight;
+
+      if (hoveringLeft || hoveringRight) {
+        this.forceUpdate();
+      }
+    }
+    /**
+     * Calculates if the labels are hovered.
+     */
+
+  }, {
+    key: "getHovering",
+    value: function getHovering() {
+      var ratio = (this.props.value - this.props.min) / (this.props.max - this.props.min);
+      var hoveringLeft = this.leftLabelWidth - (ratio * this.barContainerWidth - ratio * this.textValueWidth) > 0;
+      var hoveringRight = this.barContainerWidth - ratio * this.barContainerWidth - this.rightLabelWidth - (1 - ratio) * this.textValueWidth < 0;
+      return {
+        hoveringLeft: hoveringLeft,
+        hoveringRight: hoveringRight
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          min = _this$props.min,
+          max = _this$props.max,
+          leftLabel = _this$props.leftLabel,
+          rightLabel = _this$props.rightLabel,
+          step = _this$props.step,
+          suffix = _this$props.suffix,
+          id = _this$props.id,
+          label = _this$props.label,
+          value = _this$props.value,
+          theme = _this$props.theme;
+      var focused = this.state.focused;
+      var ratio = (value - min) / (max - min);
+      var percentage = ratio * 100;
+
+      var _this$getHovering2 = this.getHovering(),
+          hoveringLeft = _this$getHovering2.hoveringLeft,
+          hoveringRight = _this$getHovering2.hoveringRight;
+
+      var barColor = focused ? theme.palette.primary.dark : theme.palette.primary.main;
+      return (// HiFormControl pour l'affichage du label
+        _react.default.createElement(_HiFormControl.default, {
+          id: id,
+          label: label,
+          className: className,
+          onFocus: this.handleFocus(true),
+          onBlur: this.handleFocus(false)
+        }, _react.default.createElement("div", {
+          className: classes.mainContainer
+        }, _react.default.createElement("div", null, min, suffix), _react.default.createElement("div", {
+          className: classes.barContainer,
+          ref: function ref(div) {
+            _this2.barContainer = div;
+          }
+        }, _react.default.createElement("div", {
+          className: classes.topContainer
+        }, !hoveringLeft && _react.default.createElement("div", {
+          className: classes.leftLabel,
+          ref: function ref(div) {
+            _this2.leftLabel = div;
+          }
+        }, leftLabel), _react.default.createElement("div", {
+          className: classes.textValue,
+          style: {
+            left: "".concat(percentage, "%"),
+            transform: "translate(-".concat(percentage, "%)")
+          },
+          ref: function ref(div) {
+            _this2.textValue = div;
+          }
+        }, value, suffix), !hoveringRight && _react.default.createElement("div", {
+          className: classes.rightLabel,
+          ref: function ref(div) {
+            _this2.rightLabel = div;
+          }
+        }, rightLabel)), _react.default.createElement("div", {
+          className: classes.barValue,
+          style: {
+            background: "linear-gradient(to right, ".concat(barColor, ", ").concat(barColor, " ").concat(percentage, "%, #E0E0E0 ").concat(percentage, "%, #E0E0E0)")
+          }
+        }), _react.default.createElement("input", {
+          type: 'range',
+          min: min,
+          max: max,
+          value: value,
+          onChange: this.handleChange,
+          className: classes.barHidden,
+          step: step
+        }), _react.default.createElement("div", {
+          className: classes.bottomContainer
+        }, _react.default.createElement(_HiIcon.default, {
+          className: (0, _classnames.default)(classes.arrow, (0, _defineProperty2.default)({}, classes.focused, focused)),
+          icon: 'play_arrow',
+          style: {
+            left: "".concat(percentage, "%"),
+            color: barColor
+          }
+        }))), _react.default.createElement("div", null, max, suffix)))
+      );
+    }
+  }]);
+  return HiSlider;
+}(_react.default.Component);
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HiSlider',
+  withTheme: true
+})(HiSlider);
+
+exports.default = _default;

package/old_components/HiForm/HiTextField.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireDefault = require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hmui-styleguide/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiFormControl = _interopRequireDefault(require("./HiFormControl"));
+
+var _HiInput = _interopRequireDefault(require("./HiInput"));
+
+// @inheritedComponent TextField
+
+/**
+ * Champs input pour formulaire
+ */
+var HiTextField =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiTextField, _React$PureComponent);
+
+  function HiTextField(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiTextField);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiTextField).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focus", function () {
+      _this.input.focus();
+    });
+    _this.state = {
+      nbChars: props.value ? props.value.length : 0
+    };
+    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+
+  (0, _createClass2.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 _this$props = this.props,
+          className = _this$props.className,
+          disabled = _this$props.disabled,
+          error = _this$props.error,
+          errorText = _this$props.errorText,
+          id = _this$props.id,
+          label = _this$props.label,
+          helperText = _this$props.helperText,
+          helperIcon = _this$props.helperIcon,
+          fullWidth = _this$props.fullWidth,
+          required = _this$props.required,
+          type = _this$props.type,
+          multiline = _this$props.multiline,
+          placeholder = _this$props.placeholder,
+          value = _this$props.value,
+          HiInputProps = _this$props.HiInputProps,
+          HiInputLabelProps = _this$props.HiInputLabelProps,
+          name = _this$props.name,
+          rows = _this$props.rows,
+          maxLength = _this$props.maxLength;
+      var nbChars = this.state.nbChars;
+      return _react.default.createElement(_HiFormControl.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,
+        InputLabelProps: HiInputLabelProps
+      }, _react.default.createElement(_HiInput.default, (0, _extends2.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;
+}(_react.default.PureComponent);
+
+(0, _defineProperty2.default)(HiTextField, "defaultProps", {
+  name: '',
+  type: 'text',
+  fullWidth: true,
+  required: true,
+  disabled: false,
+  error: false,
+  errorText: '',
+  helperText: '',
+  helperIcon: false,
+  multiline: false,
+  maxLength: 280
+});
+var _default = HiTextField;
+exports.default = _default;