@hipay/hipay-material-ui 1.0.0-beta.8 → 2.0.0-beta.35

package/es/HiAlertModal/HiAlertModal.js

@@ -1,189 +1,174 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 // @inheritedComponent Dialog
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import Dialog, { DialogActions, DialogContent, DialogContentText, DialogTitle } from 'material-ui/Dialog';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
 import { withStyles } from '../styles';
 import HiButton from '../HiButton';
-
 export const styles = theme => ({
-    classContent: {
-        fontSize: 14,
-        lineHeight: '24px',
-        color: '#484848'
-    },
-    classPaper: {
-        maxWidth: 300
-    },
-    classCancelButton: {
-        float: 'right'
-    },
-    classTitle: {
-        fontSize: 20,
-        fontFamily: theme.typography.fontFamily,
-        fontWeight: theme.typography.fontWeightLight,
-        lineHeight: '24px'
-    },
-    classAction: {
-        display: 'inline-block'
-    },
-    classDialogRoot: {
-        backgroundColor: 'rgba(0, 0, 0, 0.28)'
-    }
+  classContent: {
+    fontSize: 14,
+    lineHeight: '24px',
+    color: '#484848'
+  },
+  classPaper: {
+    maxWidth: 300
+  },
+  classCancelButton: {
+    float: 'right'
+  },
+  classTitle: {
+    fontSize: 20,
+    fontFamily: theme.typography.fontFamily,
+    fontWeight: theme.typography.fontWeightLight,
+    lineHeight: '24px'
+  },
+  classAction: {
+    display: 'inline-block'
+  },
+  classDialogRoot: {
+    backgroundColor: 'rgba(0, 0, 0, 0.28)'
+  }
 });
-
 /**
  * Pop up d'alert
  */
+
 class HiAlertModal extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleClickCancel = () => {
+      if (this.props.onCancelClick) {
+        this.props.onCancelClick();
+      }
+    };
+
+    this.handleClickSubmit = () => {
+      if (this.props.onSubmitClick) {
+        this.props.onSubmitClick();
+      }
+    };
+
+    this.handleOnClose = () => {
+      if (this.props.onClose) {
+        this.props.onClose();
+      }
+    };
+
+    this.handleOnClose = this.handleOnClose.bind(this);
+    this.handleClickCancel = this.handleClickCancel.bind(this);
+    this.handleClickSubmit = this.handleClickSubmit.bind(this);
+  } // Appelé au clic du bouton d'annulation
+
+
+  // Render
+  render() {
+    const _this$props = this.props,
+          {
+      classes,
+      content,
+      labelCancelButton,
+      labelSubmitButton,
+      onCancelClick,
+      onSubmitClick,
+      open,
+      submitColor,
+      title
+    } = _this$props,
+          props = _objectWithoutProperties(_this$props, ["classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "submitColor", "title"]);
+
+    return React.createElement(Dialog, _extends({
+      open: open,
+      onClose: this.handleOnClose,
+      classes: {
+        paper: classes.classPaper,
+        root: classes.classDialogRoot
+      }
+    }, props), React.createElement(DialogTitle, {
+      disableTypography: true,
+      classes: {
+        root: classes.classTitle
+      }
+    }, title), React.createElement(DialogContent, null, React.createElement(DialogContentText, {
+      classes: {
+        root: classes.classContent
+      }
+    }, content)), React.createElement(DialogActions, {
+      classes: {
+        root: classes.classAction
+      }
+    }, React.createElement(HiButton, {
+      onClick: this.handleClickSubmit,
+      color: submitColor
+    }, labelSubmitButton), React.createElement(HiButton, {
+      classes: {
+        root: classes.classCancelButton
+      },
+      onClick: this.handleClickCancel,
+      color: "neutral"
+    }, labelCancelButton)));
+  }
 
-    constructor(props) {
-        super(props);
-
-        this.handleClickCancel = () => {
-            if (this.props.onCancelClick) {
-                this.props.onCancelClick();
-            }
-        };
-
-        this.handleClickSubmit = () => {
-            if (this.props.onSubmitClick) {
-                this.props.onSubmitClick();
-            }
-        };
-
-        this.handleOnClose = () => {
-            if (this.props.onClose) {
-                this.props.onClose();
-            }
-        };
-
-        this.handleOnClose = this.handleOnClose.bind(this);
-        this.handleClickCancel = this.handleClickCancel.bind(this);
-        this.handleClickSubmit = this.handleClickSubmit.bind(this);
-    }
-
-    // Appelé au clic du bouton d'annulation
-
-
-    // Appelé au clic du bouton de soumission
-
-
-    // Appelé si clic en dehors de la pop up
-
-
-    // Render
-    render() {
-        const _props = this.props,
-              {
-            labelSubmitButton,
-            labelCancelButton,
-            content,
-            title,
-            positive,
-            negative,
-            open,
-            onCancelClick,
-            onSubmitClick,
-            classes
-        } = _props,
-              props = _objectWithoutProperties(_props, ['labelSubmitButton', 'labelCancelButton', 'content', 'title', 'positive', 'negative', 'open', 'onCancelClick', 'onSubmitClick', 'classes']);
-        return React.createElement(
-            Dialog,
-            _extends({
-                open: open,
-                onClose: this.handleOnClose,
-                classes: { paper: classes.classPaper, root: classes.classDialogRoot }
-            }, props),
-            React.createElement(
-                DialogTitle,
-                { disableTypography: true, classes: { root: classes.classTitle } },
-                title
-            ),
-            React.createElement(
-                DialogContent,
-                null,
-                React.createElement(
-                    DialogContentText,
-                    { classes: { root: classes.classContent } },
-                    content
-                )
-            ),
-            React.createElement(
-                DialogActions,
-                { classes: { root: classes.classAction } },
-                React.createElement(
-                    HiButton,
-                    {
-                        onClick: this.handleClickSubmit,
-                        positive: positive,
-                        negative: negative
-                    },
-                    labelSubmitButton
-                ),
-                React.createElement(
-                    HiButton,
-                    {
-                        classes: { root: classes.classCancelButton },
-                        onClick: this.handleClickCancel
-                    },
-                    labelCancelButton
-                )
-            )
-        );
-    }
 }
 
-HiAlertModal.defaultProps = {
-    negative: false,
-    positive: false
-};
 HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Surcharge les classes du composant
-     */
-    classes: PropTypes.object,
-    /**
-     * Texte contenu dans la modal
-     */
-    content: PropTypes.string,
-    /**
-     * Texte sur le bouton d'annulation
-     */
-    labelCancelButton: PropTypes.string,
-    /**
-     * Texte sur le bouton de soumission
-     */
-    labelSubmitButton: PropTypes.string,
-    /**
-     * Colore le bouton de soumission en rouge
-     */
-    negative: PropTypes.bool,
-    /**
-     * Fonction de callback appelée au clic sur le bouton d'annulation
-     */
-    onCancelClick: PropTypes.func,
-    /**
-     * Fonction de callback appelée au clic en dehors de la pop up
-     */
-    onClose: PropTypes.func,
-    /**
-     * Fonction de callback appelée au clic sur le bouton de soumission
-     */
-    onSubmitClick: PropTypes.func,
-    /**
-     * pop up ouverte ou pas
-     */
-    open: PropTypes.bool.isRequired,
-    /**
-     * Colore le bouton de soumission en vert
-     */
-    positive: PropTypes.bool,
-    /**
-     * Titre de la modal
-     */
-    title: PropTypes.string
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Texte contenu dans la modal
+   */
+  content: PropTypes.string,
+
+  /**
+   * Texte sur le bouton d'annulation
+   */
+  labelCancelButton: PropTypes.string,
+
+  /**
+   * Texte sur le bouton de soumission
+   */
+  labelSubmitButton: PropTypes.string,
+
+  /**
+   * Fonction de callback appelée au clic sur le bouton d'annulation
+   */
+  onCancelClick: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée au clic en dehors de la pop up
+   */
+  onClose: PropTypes.func,
+
+  /**
+   * Fonction de callback appelée au clic sur le bouton de soumission
+   */
+  onSubmitClick: PropTypes.func,
+
+  /**
+   * pop up ouverte ou pas
+   */
+  open: PropTypes.bool.isRequired,
+
+  /**
+   * The color of the submit button. It supports those theme colors that make sense for this component.
+   */
+  submitColor: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+
+  /**
+   * Titre de la modal
+   */
+  title: PropTypes.string
 } : {};
-export default withStyles(styles, { name: 'HmuiHiAlertModal' })(HiAlertModal);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiAlertModal'
+})(HiAlertModal);

package/es/HiAppBar/HiAppBar.js

@@ -0,0 +1,151 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+// @inheritedComponent AppBar
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '../styles';
+import AppBar from '@material-ui/core/AppBar';
+import Collapse from '@material-ui/core/Collapse';
+import Toolbar from '@material-ui/core/Toolbar';
+import HiIcon from '../HiIcon';
+import HiIconButton from '../HiIconButton';
+export const styles = theme => ({
+  root: {},
+  bar: {
+    backgroundColor: theme.palette.background3,
+    color: theme.palette.text.secondary
+  },
+  flexDiv: {
+    flexGrow: 1
+  },
+  focused: {
+    backgroundColor: theme.palette.background2
+  },
+  iconButton: {},
+  collapseOverflow: {
+    overflow: 'inherit'
+  },
+  collapseButton: {
+    position: 'absolute',
+    right: 56,
+    marginTop: 8
+  }
+});
+
+var _ref = React.createElement(HiIcon, {
+  icon: "keyboard_arrow_up"
+});
+
+var _ref2 = React.createElement(HiIcon, {
+  icon: "keyboard_arrow_down"
+});
+
+class HiAppBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      collapsed: false
+    };
+    this.handleCollapse = this.handleCollapse.bind(this);
+  }
+
+  handleCollapse() {
+    if (this.props.onCollapse) {
+      this.props.onCollapse();
+      console.log('oncollapse');
+    } else {
+      this.setState(prevState => ({
+        collapsed: !prevState.collapsed
+      }));
+      console.log('setState');
+    }
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      children,
+      classes,
+      className,
+      collapsed = this.state.collapsed,
+      // enable controlled & uncontrolled prop
+      focused,
+      hideable,
+      position
+    } = _this$props,
+          other = _objectWithoutProperties(_this$props, ["children", "classes", "className", "collapsed", "focused", "hideable", "position"]);
+
+    return React.createElement(AppBar, _extends({
+      className: classNames(className, classes.bar, {
+        [classes.focused]: focused
+      }),
+      classes: {
+        root: classes.root
+      },
+      elevation: 2,
+      position: position,
+      color: "default"
+    }, other), React.createElement(Collapse, {
+      className: classNames({
+        [classes.collapseOverflow]: !hideable
+      }),
+      in: !collapsed
+    }, React.createElement("div", null, React.createElement(Toolbar, null, children, hideable && React.createElement(HiIconButton, {
+      onClick: this.handleCollapse,
+      color: "inherit",
+      className: classes.iconButton
+    }, _ref)))), hideable && collapsed && React.createElement(HiIconButton, {
+      onClick: this.handleCollapse,
+      color: "inherit",
+      className: classes.collapseButton
+    }, _ref2));
+  }
+
+}
+
+HiAppBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge des classes
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Surcharge des classes
+   */
+  className: PropTypes.string,
+
+  /**
+   * Is collapsed
+   */
+  collapsed: PropTypes.bool,
+
+  /**
+   * If focused, change background color
+   */
+  focused: PropTypes.bool,
+
+  /**
+   * Could be hidden
+   */
+  hideable: PropTypes.bool,
+
+  /**
+   * Fonction de callback au click sur le bouton chevron
+   */
+  onCollapse: PropTypes.func,
+
+  /**
+   * Positionement de la topBar. The behavior of the different options is described
+   * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+   */
+  position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static'])
+} : {};
+HiAppBar.defaultProps = {
+  focused: false,
+  hideable: false
+};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiAppBar'
+})(HiAppBar);

package/es/HiAppBar/index.js

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

package/es/HiBadge/HiBadge.js

@@ -1,76 +1,118 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Badge from 'material-ui/Badge';
+import Badge from '@material-ui/core/Badge';
 import withStyles from '../styles/withStyles';
-
 export const styles = theme => ({
-    // Usefull for style overriding
-    root: {},
-    colorPrimary: {
-        backgroundColor: theme.palette.business.primary.normal
-    },
-    badge: {
-        borderRadius: 4,
-        fontSize: 14,
-        fontWeight: 500,
-        fontFamily: theme.typography.fontFamily,
-        color: theme.palette.business.primary.contrast,
-        height: 18,
-        top: -6,
-        paddingTop: 2
-    },
-    shortBadge: {
-        left: 12
-    },
-    mediumBadge: {
-        left: 10
-    },
-    longBadge: {
-        minWidth: 40,
-        left: -6
-    }
+  // Usefull for style overriding
+  root: {},
+  primary: {
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText
+  },
+  secondary: {
+    backgroundColor: theme.palette.secondary.main,
+    color: theme.palette.secondary.contrastText
+  },
+  positive: {
+    backgroundColor: theme.palette.positive.main,
+    color: theme.palette.positive.contrastText
+  },
+  negative: {
+    backgroundColor: theme.palette.negative.main,
+    color: theme.palette.negative.contrastText
+  },
+  middle: {
+    backgroundColor: theme.palette.middle.main,
+    color: theme.palette.middle.contrastText
+  },
+  neutral: {
+    backgroundColor: theme.palette.neutral.main,
+    color: theme.palette.neutral.contrastText
+  },
+  badge: {
+    borderRadius: 4,
+    fontWeight: 500,
+    fontFamily: theme.typography.fontFamily,
+    color: theme.palette.primary.contrastText,
+    height: 18,
+    top: -6,
+    right: -6,
+    paddingTop: 2
+  },
+  shortBadge: {
+    width: 18
+  },
+  mediumBadge: {
+    minWidth: 24
+  },
+  longBadge: {
+    minWidth: 40
+  }
 });
 
 function HiBadge(props) {
-    const { classes, value, children } = props;
-    const length = value.toString().length;
-    const finalValue = value > 100 ? '+100' : value;
-
-    const badgeClass = classNames(classes.badge, {
-        [classes.shortBadge]: length < 2,
-        [classes.mediumBadge]: length === 2,
-        [classes.longBadge]: length > 2
-    });
-
-    return React.createElement(
-        Badge,
-        {
-            classes: {
-                root: classes.root,
-                badge: badgeClass,
-                colorPrimary: classes.colorPrimary
-            },
-            badgeContent: finalValue,
-            color: 'primary'
-        },
-        children
-    );
+  const {
+    classes,
+    className,
+    children,
+    color,
+    value
+  } = props;
+  const length = value.toString().length;
+  const finalValue = value > 100 ? '+100' : value;
+  const badgeClass = classNames(classes.badge, {
+    [classes.primary]: color === 'primary',
+    [classes.secondary]: color === 'secondary',
+    [classes.positive]: color === 'positive',
+    [classes.negative]: color === 'negative',
+    [classes.middle]: color === 'middle',
+    [classes.neutral]: color === 'neutral',
+    [classes.shortBadge]: length < 2,
+    [classes.mediumBadge]: length === 2,
+    [classes.longBadge]: length > 2
+  });
+  return React.createElement(Badge, {
+    className: className,
+    classes: {
+      root: classes.root,
+      badge: badgeClass,
+      colorPrimary: classes.primary
+    },
+    badgeContent: finalValue
+  }, children);
 }
 
 HiBadge.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * L'élément auquel le badge va se fixer
-     */
-    children: PropTypes.object,
-    /**
-     * Permet des surcharges de style
-     */
-    classes: PropTypes.object,
-    /**
-     * Valeur de notification à passer au badge
-     */
-    value: PropTypes.number
-} : {};
+  /**
+   * L'élément auquel le badge va se fixer
+   */
+  children: PropTypes.object,
+
+  /**
+   * Permet des surcharges de style
+   */
+  classes: PropTypes.object,
 
-export default withStyles(styles, { name: 'HmuiHiBadge' })(HiBadge);
+  /**
+   * Css to apply on the component
+   */
+  className: PropTypes.object,
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+
+  /**
+   * Valeur de notification à passer au badge
+   */
+  value: PropTypes.number
+} : {};
+HiBadge.defaultProps = {
+  color: 'primary'
+};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiBadge'
+})(HiBadge);