@hipay/hipay-material-ui 2.0.0-beta.54 → 2.0.0-beta.56

package/es/HiForm/HiSlider.js

@@ -0,0 +1,302 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import withStyles from '../styles/withStyles';
+import HiFormControl from './HiFormControl';
+import PropTypes from 'prop-types';
+import HiIcon from '../HiIcon/HiIcon';
+import classNames from 'classnames';
+export const styles = theme => ({
+  barContainer: {
+    width: '100%',
+    position: 'relative',
+    margin: '0 7px'
+  },
+  barHidden: {
+    width: '100%',
+    opacity: 0,
+    position: 'absolute',
+    top: '7px',
+    zIndex: '2',
+    cursor: 'pointer'
+  },
+  mainContainer: _objectSpread({}, 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
+ */
+
+class HiSlider extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleChange = event => {
+      this.props.onChange(parseFloat(event.target.value));
+      this.textValueWidth = this.textValue.offsetWidth;
+    };
+
+    this.handleFocus = isFocused => () => {
+      this.setState({
+        focused: isFocused
+      });
+    };
+
+    this.state = {
+      focused: false
+    };
+  }
+  /**
+   * Measures several components once they are mounted.
+   * If the value and a label (left or right) are hovered,
+   * we hide this label.
+   */
+
+
+  componentDidMount() {
+    this.leftLabelWidth = this.leftLabel.offsetWidth;
+    this.rightLabelWidth = this.rightLabel.offsetWidth;
+    this.textValueWidth = this.textValue.offsetWidth;
+    this.barContainerWidth = this.barContainer.offsetWidth;
+    const {
+      hoveringLeft,
+      hoveringRight
+    } = this.getHovering();
+
+    if (hoveringLeft || hoveringRight) {
+      this.forceUpdate();
+    }
+  }
+  /**
+   * Calculates if the labels are hovered.
+   */
+
+
+  getHovering() {
+    const ratio = (this.props.value - this.props.min) / (this.props.max - this.props.min);
+    const hoveringLeft = this.leftLabelWidth - (ratio * this.barContainerWidth - ratio * this.textValueWidth) > 0;
+    const hoveringRight = this.barContainerWidth - ratio * this.barContainerWidth - this.rightLabelWidth - (1 - ratio) * this.textValueWidth < 0;
+    return {
+      hoveringLeft,
+      hoveringRight
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      className,
+      min,
+      max,
+      leftLabel,
+      rightLabel,
+      step,
+      suffix,
+      id,
+      label,
+      value,
+      theme
+    } = this.props;
+    const {
+      focused
+    } = this.state;
+    const ratio = (value - min) / (max - min);
+    const percentage = ratio * 100;
+    const {
+      hoveringLeft,
+      hoveringRight
+    } = this.getHovering();
+    const barColor = focused ? theme.palette.primary.dark : theme.palette.primary.main;
+    return (// HiFormControl pour l'affichage du label
+      React.createElement(HiFormControl, {
+        id: id,
+        label: label,
+        className: className,
+        onFocus: this.handleFocus(true),
+        onBlur: this.handleFocus(false)
+      }, React.createElement("div", {
+        className: classes.mainContainer
+      }, React.createElement("div", null, min, suffix), React.createElement("div", {
+        className: classes.barContainer,
+        ref: div => {
+          this.barContainer = div;
+        }
+      }, React.createElement("div", {
+        className: classes.topContainer
+      }, !hoveringLeft && React.createElement("div", {
+        className: classes.leftLabel,
+        ref: div => {
+          this.leftLabel = div;
+        }
+      }, leftLabel), React.createElement("div", {
+        className: classes.textValue,
+        style: {
+          left: `${percentage}%`,
+          transform: `translate(-${percentage}%)`
+        },
+        ref: div => {
+          this.textValue = div;
+        }
+      }, value, suffix), !hoveringRight && React.createElement("div", {
+        className: classes.rightLabel,
+        ref: div => {
+          this.rightLabel = div;
+        }
+      }, rightLabel)), React.createElement("div", {
+        className: classes.barValue,
+        style: {
+          background: `linear-gradient(to right, ${barColor}, ${barColor} ${percentage}%, #E0E0E0 ${percentage}%, #E0E0E0)`
+        }
+      }), React.createElement("input", {
+        type: 'range',
+        min: min,
+        max: max,
+        value: value,
+        onChange: this.handleChange,
+        className: classes.barHidden,
+        step: step
+      }), React.createElement("div", {
+        className: classes.bottomContainer
+      }, React.createElement(HiIcon, {
+        className: classNames(classes.arrow, {
+          [classes.focused]: focused
+        }),
+        icon: 'play_arrow',
+        style: {
+          left: `${percentage}%`,
+          color: barColor
+        }
+      }))), React.createElement("div", null, max, suffix)))
+    );
+  }
+
+}
+
+HiSlider.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Classes CSS appliquées.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Id de l'élément input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Label du champ
+   */
+  label: PropTypes.string,
+
+  /**
+   * The label to show on the left.
+   */
+  leftLabel: PropTypes.string,
+
+  /**
+   * The Maximum value for the slider.
+   */
+  max: PropTypes.number.isRequired,
+
+  /**
+   * The Minimum value for the slider.
+   */
+  min: PropTypes.number.isRequired,
+
+  /**
+   * Fonction de callback appelée lorsqu'on change la valeur du slider.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The label to show on the right
+   */
+  rightLabel: PropTypes.string,
+
+  /**
+   * The step between two selectable values.
+   */
+  step: PropTypes.number,
+
+  /**
+   * The suffix to show after each number.
+   */
+  suffix: PropTypes.string,
+
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object,
+
+  /**
+   * The
+   * value of the input.
+   */
+  value: PropTypes.number
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HiSlider',
+  withTheme: true
+})(HiSlider);

package/es/HiForm/HiUpload.js

@@ -0,0 +1,158 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import HiUploadInput from './HiUploadInput';
+import HiIcon from '../HiIcon';
+export const styles = theme => ({
+  flexContainer: {
+    display: '  flex',
+    alignItems: 'center'
+  },
+  statusIcon: {
+    height: '80px',
+    width: '80px',
+    marginRight: '8px',
+    padding: '24px',
+    borderRadius: '2px',
+    backgroundColor: theme.palette.local.background2,
+    border: `1px solid ${theme.palette.middle.main}`,
+    color: `${theme.palette.middle.main} !important`,
+    fontSize: '80px'
+  },
+  inputContainer: {
+    flex: '1'
+  },
+  empty: {
+    border: `1px solid ${theme.palette.input.bottomLine}`,
+    color: `${theme.palette.neutral.main} !important`
+  },
+  complete: {
+    border: `1px solid ${theme.palette.positive.main}`,
+    color: `${theme.palette.positive.main} !important`,
+    fontSize: '32px'
+  },
+  error: {
+    border: `1px solid ${theme.palette.negative.main}`,
+    color: `${theme.palette.negative.main} !important`
+  }
+});
+
+class HiUpload extends React.PureComponent {
+  render() {
+    const _this$props = this.props,
+          {
+      inputs,
+      classes,
+      values
+    } = _this$props,
+          others = _objectWithoutProperties(_this$props, ["inputs", "classes", "values"]);
+
+    let complete = true;
+    let empty = true;
+    let error = false;
+
+    for (let i = 0, len = values.length; i < len; i += 1) {
+      const value = values[i];
+
+      if (value !== undefined) {
+        complete = value.value === null || value.error ? false : complete;
+        empty = value.value !== null && !value.error ? false : empty;
+        error = value.error || error;
+      } else {
+        complete = false;
+      }
+    }
+
+    const statusClass = classNames(classes.statusIcon, {
+      [classes.empty]: empty,
+      [classes.complete]: complete,
+      [classes.error]: error
+    });
+    let icon;
+
+    if (error) {
+      icon = 'warning';
+    } else if (complete) {
+      icon = 'check_circle';
+    } else {
+      icon = 'file_upload';
+    }
+
+    return React.createElement("div", {
+      className: classes.flexContainer
+    }, React.createElement(HiIcon, {
+      className: statusClass,
+      icon: icon,
+      size: 32
+    }), React.createElement("div", {
+      className: classes.inputContainer
+    }, inputs.map((item, index) => React.createElement(HiUploadInput, _extends({
+      maxSize: item.maxSize,
+      acceptedTypes: item.acceptedTypes,
+      placeholder: item.placeholder,
+      value: values[index] ? values[index].value : null,
+      error: values[index] ? values[index].error : null,
+      errorMessage: values[index] ? values[index].errorMessage : null,
+      onSeeFile: this.handleSeeFile,
+      onDeleteFile: this.props.onDeleteFile,
+      onChange: this.props.onChange,
+      index: index,
+      key: item.id
+    }, others)))));
+  }
+
+}
+
+HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Classes CSS appliquées.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: PropTypes.bool,
+
+  /**
+   * Texte de l'aide
+   */
+  helperText: PropTypes.string,
+
+  /**
+   * Array containing each of the inputs the component has to show (represented by an object).
+   */
+  inputs: PropTypes.array.isRequired,
+
+  /**
+   * The method given to change the file.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The method to delete a file.
+   */
+  onDeleteFile: PropTypes.func,
+
+  /**
+   * The method given to see the file.
+   */
+  onSeeFile: PropTypes.func,
+
+  /**
+   * Valeurs des inputs
+   */
+  values: PropTypes.array
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiUpload'
+})(HiUpload);

package/es/HiForm/HiUploadField.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import HiFormControl from './HiFormControl';
+import HiUpload from './HiUpload';
+export const styles = theme => ({
+  flexContainer: {
+    display: '  flex',
+    alignItems: 'center'
+  },
+  statusIcon: {
+    height: '80px',
+    width: '80px',
+    marginRight: '8px',
+    padding: '24px',
+    borderRadius: '2px',
+    backgroundColor: theme.palette.local.background2,
+    border: `1px solid ${theme.palette.middle.main}`,
+    color: `${theme.palette.middle.main} !important`,
+    fontSize: '80px'
+  },
+  inputContainer: {
+    flex: '1'
+  },
+  empty: {
+    border: `1px solid ${theme.palette.input.bottomLine}`,
+    color: `${theme.palette.neutral.main} !important`
+  },
+  complete: {
+    border: `1px solid ${theme.palette.positive.main}`,
+    color: `${theme.palette.positive.main} !important`,
+    fontSize: '32px'
+  },
+  error: {
+    border: `1px solid ${theme.palette.negative.main}`,
+    color: `${theme.palette.negative.main} !important`
+  }
+});
+
+class HiUploadField extends React.PureComponent {
+  render() {
+    const _this$props = this.props,
+          {
+      className,
+      label,
+      helperIcon,
+      helperText,
+      values
+    } = _this$props,
+          others = _objectWithoutProperties(_this$props, ["className", "label", "helperIcon", "helperText", "values"]);
+
+    let empty = true;
+    let error = false;
+    let errorText = '';
+
+    for (let i = 0, len = values.length; i < len; i += 1) {
+      const value = values[i];
+
+      if (value !== undefined) {
+        empty = value.value !== null && !value.error ? false : empty;
+        error = value.error || error;
+        errorText = errorText || value.errorMessage;
+      }
+    }
+
+    return React.createElement(HiFormControl, {
+      label: label,
+      className: className,
+      errorText: errorText,
+      error: error,
+      helperIcon: helperIcon,
+      helperText: helperText
+    }, React.createElement(HiUpload, _extends({
+      values: values
+    }, others)));
+  }
+
+}
+
+HiUploadField.defaultProps = {
+  helperText: '',
+  helperIcon: false
+};
+HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Classes CSS appliquées.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: PropTypes.bool,
+
+  /**
+   * Texte de l'aide
+   */
+  helperText: PropTypes.string,
+
+  /**
+   * Array containing each of the inputs the component has to show (represented by an object).
+   */
+  inputs: PropTypes.array.isRequired,
+
+  /**
+   * The label of the global input.
+   */
+  label: PropTypes.string,
+
+  /**
+   * The method given to change the file.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The method to delete a file.
+   */
+  onDeleteFile: PropTypes.func,
+
+  /**
+   * The method given to see the file.
+   */
+  onSeeFile: PropTypes.func,
+
+  /**
+   * Valeurs des inputs
+   */
+  values: PropTypes.array
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiUploadField'
+})(HiUploadField);