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

package/es/HiForm/HiSearchField.js

@@ -0,0 +1,135 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiInput from '../HiForm/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.
+ */
+class HiSearchField extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            inputValue: ''
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleReset = this.handleReset.bind(this);
+    }
+
+    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;
+        }
+        let searchSucceed = false;
+        properties.forEach(filter => {
+            let 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;
+    }
+
+    handleChange(event, inputValue) {
+        let searchedValue;
+        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') {
+            let currentParent = null;
+            const filteredList = [];
+            this.props.itemList.forEach(item => {
+                const add = this.filterOnProperties(item, searchedValue, this.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);
+        }
+    }
+
+    handleReset() {
+        this.setState({
+            inputValue: ''
+        });
+
+        if (typeof this.props.onSearch === 'undefined') {
+            this.props.callbackFilteredList(this.props.itemList);
+        } else {
+            this.props.onSearch('');
+        }
+    }
+
+    render() {
+        const _props = this.props,
+              { placeholder } = _props,
+              others = _objectWithoutProperties(_props, ['placeholder']);
+
+        return React.createElement(HiInput, _extends({
+            placeholder: placeholder,
+            onReset: this.handleReset,
+            onChange: this.handleChange,
+            value: this.state.inputValue,
+            startAdornment: 'Magnify'
+        }, others));
+    }
+}
+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: PropTypes.func.isRequired,
+    /**
+     * Liste des propriété de l'élément sur lesquelles filtrer (par défaut l'item lui même)
+     */
+    filterPropertyList: PropTypes.array,
+    /**
+     * Liste d'éléments
+     */
+    itemList: PropTypes.array.isRequired,
+    /**
+     * Fonction de callback qui renvoit le texte saisi
+     *
+     * @param {string} value
+     */
+    onSearch: PropTypes.func,
+    /**
+     * Placeholder
+     */
+    placeholder: PropTypes.string
+} : {};
+export default HiSearchField;

package/es/HiForm/HiTextField.js

@@ -0,0 +1,239 @@
+import _extends from 'babel-runtime/helpers/extends';
+// @inheritedComponent TextField
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiFormControl from './HiFormControl';
+import HiInput from './HiInput';
+
+/**
+ * Champs input pour formulaire
+ */
+class HiTextField extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+
+    this.focus = () => {
+      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);
+  }
+
+  handleBlur(event) {
+    if (this.props.onBlur) {
+      this.props.onBlur(event);
+    }
+  }
+
+  handleChange(event) {
+    const 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 });
+      }
+    }
+  }
+
+  handleFocus(event) {
+    if (this.props.onFocus) {
+      this.props.onFocus(event);
+    }
+  }
+
+  render() {
+    const {
+      className,
+      disabled,
+      error,
+      errorText,
+      id,
+      label,
+      helperText,
+      helperIcon,
+      fullWidth,
+      required,
+      type,
+      multiline,
+      placeholder,
+      value,
+      HiInputProps,
+      name,
+      rows,
+      maxLength
+    } = this.props;
+
+    const { nbChars } = this.state;
+
+    return React.createElement(
+      HiFormControl,
+      {
+        label: label,
+        required: required,
+        disabled: disabled,
+        className: className,
+        error: error,
+        id: id,
+        errorText: errorText,
+        helperText: helperText,
+        helperIcon: helperIcon,
+        multiline: multiline,
+        maxLength: maxLength,
+        nbChars: nbChars
+      },
+      React.createElement(HiInput, _extends({
+        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: input => {
+          this.input = input;
+        }
+      }, HiInputProps))
+    );
+  }
+}
+
+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: PropTypes.object,
+  /**
+   * Classes CSS appliquées
+   */
+  className: PropTypes.string,
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: PropTypes.bool,
+  /**
+   * Texte de l'erreur
+   */
+  errorText: PropTypes.string,
+  /**
+   * Si `true`, le chamsp prendra toute la largeur.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * 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,
+  /**
+   * Propriétés appliquées au composant HiInput
+   */
+  HiInputProps: PropTypes.object,
+  /**
+   * id de l'élément input, utile pour lié le label
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   * id de l'élément input
+   */
+  inputRef: PropTypes.func,
+  /**
+   * Label du champs
+   */
+  label: PropTypes.string,
+  /**
+   * Nombre de caractères max pour un text area
+   * Valable uniquement si l'option multiline est à true
+   */
+  maxLength: PropTypes.number,
+  /**
+   * Si `true`, le champs input sera un textarea
+   */
+  multiline: PropTypes.bool,
+  /**
+   * Attribute name de l'élément `input`.
+   */
+  name: PropTypes.string,
+  /**
+   * Fonction de callback appelée lorsqu'on quitte le champs input
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Fonction de callback appelée lorsqu'on remplie le champs de recherche
+   */
+  onChange: PropTypes.func,
+  /**
+   * Fonction de callback appelée au focus du champs
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Fonction de callback appelée lorsqu'on clic sur l'icône de gauche
+   */
+  onLeftIconClick: PropTypes.func,
+  /**
+   * Fonction de callback appelée lorsqu'on vide le champs de recherche
+   */
+  onReset: PropTypes.func,
+  /**
+   * Fonction de callback appelée lorsqu'on clic sur l'icône de droite
+   */
+  onRightIconClick: PropTypes.func,
+  /**
+   * Placeholder
+   */
+  placeholder: PropTypes.string,
+  /**
+   * true si champs obligatoire
+   */
+  required: PropTypes.bool,
+  /**
+   * Nombre de lignes pour les textArea
+   */
+  rows: PropTypes.number,
+  /**
+   * Type du champs input. Doit être un type HTML5 valide.
+   */
+  type: PropTypes.string,
+  /**
+   * Valeur de l'élément input
+   */
+  value: PropTypes.string
+} : {};
+export default HiTextField;

package/es/HiForm/index.js

@@ -0,0 +1,7 @@
+export { default as HiEmailField } from './HiEmailField';
+export { default as HiFormControl } from './HiFormControl';
+export { default as HiFormLabel } from './HiFormLabel';
+export { default as HiInput } from './HiInput';
+export { default as HiPasswordField } from './HiPasswordField';
+export { default as HiTextField } from './HiTextField';
+export { default as HiSearchField } from './HiSearchField';

package/es/HiLoader/HiLoader.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PropagateLoader } from 'react-spinners';
+import withStyles from '../styles/withStyles';
+
+export const styles = () => ({});
+
+function HiLoader(props) {
+    const { theme, loading } = props;
+
+    return React.createElement(PropagateLoader, {
+        loading: loading,
+        size: 12,
+        color: theme.palette.business.primary.normal
+    });
+}
+
+HiLoader.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Displays loader if true
+     */
+    loading: PropTypes.bool,
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object
+} : {};
+
+HiLoader.defaultProps = {
+    loading: false
+};
+
+export default withStyles(styles, { withTheme: true, name: 'HmuiHiLoader' })(HiLoader);

package/es/HiLoader/index.js

@@ -0,0 +1 @@
+export { default } from './HiLoader';

package/es/HiPins/HiPins.js

@@ -0,0 +1,66 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+import { getContrastedTextColor } from '../styles/colorManipulator';
+
+export const styles = theme => ({
+    root: {
+        display: 'inline-block',
+        padding: '0 9px',
+        height: 16,
+        lineHeight: '16px',
+        minWidth: 25,
+        textAlign: 'center',
+        borderRadius: '45px',
+        verticalAlign: 'middle',
+        margin: 0.5 * theme.spacing.unit,
+        fontSize: 11,
+        fontWeight: theme.typography.fontWeightMedium,
+        fontFamily: theme.typography.fontFamily
+    },
+    clicable: {
+        cursor: 'pointer'
+    }
+});
+
+/**
+ * HiPins
+ *
+ * Tiny raised button used to display subsidiary datas like item count, (...), and throw an onClick event.
+ * Used in:
+ * - CellStatus to display operations count and to deploy operation rows on click.
+ *
+ */
+function HiPins(props) {
+    const { classes, children, color, onClick, className } = props;
+
+    const textColor = getContrastedTextColor(color, props.theme.palette.neutral.dark, '#FFF');
+
+    const divProps = {
+        style: { backgroundColor: color, color: textColor }
+    };
+    if (onClick) {
+        divProps.onClick = onClick;
+        divProps.role = 'button';
+    }
+    return React.createElement(
+        'div',
+        _extends({
+            className: classNames(classes.root, {
+                [classes.clicable]: onClick
+            }, className)
+        }, divProps),
+        children
+    );
+}
+
+HiPins.propTypes = process.env.NODE_ENV !== "production" ? {
+    children: PropTypes.node.isRequired,
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    color: PropTypes.string.isRequired,
+    onClick: PropTypes.func
+} : {};
+export default withStyles(styles, { withTheme: true, name: 'HmuiHiPins' })(HiPins);

package/es/HiPins/index.js

@@ -0,0 +1 @@
+export { default } from './HiPins';

package/es/HiRadio/HiRadio.js

@@ -0,0 +1,41 @@
+// @inheritedComponent Radio
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Radio from 'material-ui/Radio';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+    checked: {
+        color: theme.palette.business.primary.normal
+    },
+    disabled: {
+        color: theme.palette.action.disabled
+    }
+});
+
+class HiRadio extends React.Component {
+
+    render() {
+
+        const { classes, disabled, checked, onChange, name, value } = this.props;
+
+        return React.createElement(Radio, {
+            name: name,
+            classes: {
+                checked: classes.checked, disabled: classes.disabled },
+            checked: checked,
+            onChange: onChange,
+            disabled: disabled,
+            value: value
+        });
+    }
+}
+
+HiRadio.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object
+} : {};
+export default withStyles(styles, { name: 'HmuiHiRadio' })(HiRadio);

package/es/HiRadio/index.js

@@ -0,0 +1 @@
+export { default } from './HiRadio';