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

package/es/Input/InputLabel.js

@@ -0,0 +1,138 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent FormLabel
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import { FormLabel } from '../Form';
+
+export const styles = theme => ({
+  root: {
+    transformOrigin: 'top left'
+  },
+  formControl: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    // slight alteration to spec spacing to match visual spec result
+    transform: `translate(0, ${theme.spacing.unit * 3}px) scale(1)`
+  },
+  marginDense: {
+    // Compensation for the `Input.inputDense` style.
+    transform: `translate(0, ${theme.spacing.unit * 2.5 + 1}px) scale(1)`
+  },
+  shrink: {
+    transform: 'translate(0, 1.5px) scale(0.75)',
+    transformOrigin: 'top left'
+  },
+  animated: {
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shorter,
+      easing: theme.transitions.easing.easeOut
+    })
+  },
+  disabled: {
+    color: theme.palette.text.disabled
+  }
+});
+
+function InputLabel(props, context) {
+  const {
+    children,
+    classes,
+    className: classNameProp,
+    disableAnimation,
+    disabled,
+    FormControlClasses,
+    margin: marginProp,
+    shrink: shrinkProp
+  } = props,
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'disableAnimation', 'disabled', 'FormControlClasses', 'margin', 'shrink']);
+
+  const { muiFormControl } = context;
+  let shrink = shrinkProp;
+
+  if (typeof shrink === 'undefined' && muiFormControl) {
+    shrink = muiFormControl.dirty || muiFormControl.focused || muiFormControl.adornedStart;
+  }
+
+  let margin = marginProp;
+  if (typeof margin === 'undefined' && muiFormControl) {
+    margin = muiFormControl.margin;
+  }
+
+  const className = classNames(classes.root, {
+    [classes.formControl]: muiFormControl,
+    [classes.animated]: !disableAnimation,
+    [classes.shrink]: shrink,
+    [classes.disabled]: disabled,
+    [classes.marginDense]: margin === 'dense'
+  }, classNameProp);
+
+  return React.createElement(
+    FormLabel,
+    _extends({ 'data-shrink': shrink, className: className, classes: FormControlClasses }, other),
+    children
+  );
+}
+
+InputLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The contents of the `InputLabel`.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the transition animation is disabled.
+   */
+  disableAnimation: PropTypes.bool,
+  /**
+   * If `true`, apply disabled class.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label will be displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the input of this label is focused.
+   */
+  focused: PropTypes.bool,
+  /**
+   * `classes` property applied to the `FormControl` element.
+   */
+  FormControlClasses: PropTypes.object,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: PropTypes.oneOf(['dense']),
+  /**
+   * if `true`, the label will indicate that the input is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * If `true`, the label is shrunk.
+   */
+  shrink: PropTypes.bool
+} : {};
+
+InputLabel.defaultProps = {
+  disabled: false,
+  disableAnimation: false
+};
+
+InputLabel.contextTypes = {
+  muiFormControl: PropTypes.object
+};
+
+export default withStyles(styles, { name: 'MuiInputLabel' })(InputLabel);

package/es/Input/Textarea.js

@@ -0,0 +1,234 @@
+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 debounce from 'lodash/debounce';
+import EventListener from 'react-event-listener';
+import withStyles from '../styles/withStyles';
+
+const ROWS_HEIGHT = 19;
+
+export const styles = {
+  root: {
+    position: 'relative', // because the shadow has position: 'absolute',
+    width: '100%'
+  },
+  textarea: {
+    width: '100%',
+    height: '100%',
+    resize: 'none',
+    font: 'inherit',
+    padding: 0,
+    cursor: 'inherit',
+    boxSizing: 'border-box',
+    lineHeight: 'inherit',
+    border: 'none',
+    outline: 'none',
+    background: 'transparent'
+  },
+  shadow: {
+    resize: 'none',
+    // Overflow also needed to here to remove the extra row
+    // added to textareas in Firefox.
+    overflow: 'hidden',
+    // Visibility needed to hide the extra text area on ipads
+    visibility: 'hidden',
+    position: 'absolute',
+    height: 'auto',
+    whiteSpace: 'pre-wrap'
+  }
+};
+
+/**
+ * @ignore - internal component.
+ */
+class Textarea extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    // <Input> expects the components it renders to respond to 'value'
+    // so that it can check whether they are dirty
+    this.state = {
+      height: null
+    };
+    this.shadow = null;
+    this.singlelineShadow = null;
+    this.input = null;
+    this.value = null;
+    this.handleResize = debounce(() => {
+      this.syncHeightWithShadow();
+    }, 166);
+
+    this.handleRefInput = node => {
+      this.input = node;
+      if (this.props.textareaRef) {
+        this.props.textareaRef(node);
+      }
+    };
+
+    this.handleRefSinglelineShadow = node => {
+      this.singlelineShadow = node;
+    };
+
+    this.handleRefShadow = node => {
+      this.shadow = node;
+    };
+
+    this.handleChange = event => {
+      this.value = event.target.value;
+
+      if (typeof this.props.value === 'undefined' && this.shadow) {
+        // The component is not controlled, we need to update the shallow value.
+        this.shadow.value = this.value;
+        this.syncHeightWithShadow();
+      }
+
+      if (this.props.onChange) {
+        this.props.onChange(event);
+      }
+    };
+
+    this.value = props.value || props.defaultValue || '';
+    this.state = {
+      height: Number(props.rows) * ROWS_HEIGHT
+    };
+  }
+
+  componentDidMount() {
+    this.syncHeightWithShadow();
+  }
+
+  componentDidUpdate() {
+    this.syncHeightWithShadow();
+  }
+
+  componentWillUnmount() {
+    this.handleResize.cancel();
+  }
+
+  syncHeightWithShadow(props = this.props) {
+    if (!this.shadow || !this.singlelineShadow) {
+      return;
+    }
+
+    // The component is controlled, we need to update the shallow value.
+    if (typeof this.props.value !== 'undefined') {
+      this.shadow.value = props.value == null ? '' : String(props.value);
+    }
+
+    const lineHeight = this.singlelineShadow.scrollHeight;
+    let newHeight = this.shadow.scrollHeight;
+
+    // Guarding for jsdom, where scrollHeight isn't present.
+    // See https://github.com/tmpvar/jsdom/issues/1013
+    if (newHeight === undefined) {
+      return;
+    }
+
+    if (Number(props.rowsMax) >= Number(props.rows)) {
+      newHeight = Math.min(Number(props.rowsMax) * lineHeight, newHeight);
+    }
+
+    newHeight = Math.max(newHeight, lineHeight);
+
+    if (this.state.height !== newHeight) {
+      this.setState({
+        height: newHeight
+      });
+    }
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      classes,
+      className,
+      defaultValue,
+      onChange,
+      rows,
+      rowsMax,
+      textareaRef,
+      value
+    } = _props,
+          other = _objectWithoutProperties(_props, ['classes', 'className', 'defaultValue', 'onChange', 'rows', 'rowsMax', 'textareaRef', 'value']);
+
+    return React.createElement(
+      'div',
+      { className: classes.root, style: { height: this.state.height } },
+      React.createElement(EventListener, { target: 'window', onResize: this.handleResize }),
+      React.createElement('textarea', {
+        ref: this.handleRefSinglelineShadow,
+        className: classnames(classes.shadow, classes.textarea),
+        tabIndex: -1,
+        rows: '1',
+        readOnly: true,
+        'aria-hidden': 'true',
+        value: ''
+      }),
+      React.createElement('textarea', {
+        ref: this.handleRefShadow,
+        className: classnames(classes.shadow, classes.textarea),
+        tabIndex: -1,
+        rows: rows,
+        'aria-hidden': 'true',
+        readOnly: true,
+        defaultValue: defaultValue,
+        value: value
+      }),
+      React.createElement('textarea', _extends({
+        rows: rows,
+        className: classnames(classes.textarea, className),
+        defaultValue: defaultValue,
+        value: value,
+        onChange: this.handleChange,
+        ref: this.handleRefInput
+      }, other))
+    );
+  }
+}
+
+Textarea.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onChange: PropTypes.func,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Maximum number of rows to display when multiline option is set to true.
+   */
+  rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Use that property to pass a ref callback to the native textarea element.
+   */
+  textareaRef: PropTypes.func,
+  /**
+   * @ignore
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+} : {};
+
+Textarea.defaultProps = {
+  rows: 1
+};
+
+export default withStyles(styles, { name: 'MuiTextarea' })(Textarea);

package/es/Input/index.js

@@ -0,0 +1,3 @@
+export { default } from './Input';
+export { default as InputAdornment } from './InputAdornment';
+export { default as InputLabel } from './InputLabel';

package/es/List/List.js

@@ -0,0 +1,106 @@
+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';
+
+export const styles = theme => ({
+  root: {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    position: 'relative'
+  },
+  padding: {
+    paddingTop: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit
+  },
+  dense: {
+    paddingTop: theme.spacing.unit / 2,
+    paddingBottom: theme.spacing.unit / 2
+  },
+  subheader: {
+    paddingTop: 0
+  }
+});
+
+class List extends React.Component {
+  getChildContext() {
+    return {
+      dense: this.props.dense
+    };
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      children,
+      classes,
+      className: classNameProp,
+      component: Component,
+      dense,
+      disablePadding,
+      subheader
+    } = _props,
+          other = _objectWithoutProperties(_props, ['children', 'classes', 'className', 'component', 'dense', 'disablePadding', 'subheader']);
+    const className = classNames(classes.root, {
+      [classes.dense]: dense && !disablePadding,
+      [classes.padding]: !disablePadding,
+      [classes.subheader]: subheader
+    }, classNameProp);
+
+    return React.createElement(
+      Component,
+      _extends({ className: className }, other),
+      subheader,
+      children
+    );
+  }
+}
+
+List.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input will be used for
+   * the list and list items. The property is available to descendant components as the
+   * `dense` context.
+   */
+  dense: PropTypes.bool,
+  /**
+   * If `true`, vertical padding will be removed from the list.
+   */
+  disablePadding: PropTypes.bool,
+  /**
+   * The content of the subheader, normally `ListSubheader`.
+   */
+  subheader: PropTypes.node
+} : {};
+
+List.defaultProps = {
+  component: 'ul',
+  dense: false,
+  disablePadding: false
+};
+
+List.childContextTypes = {
+  dense: PropTypes.bool
+};
+
+export default withStyles(styles, { name: 'MuiList' })(List);

package/es/List/ListItem.js

@@ -0,0 +1,212 @@
+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 ButtonBase from '../ButtonBase';
+import { isMuiElement } from '../utils/reactHelpers';
+
+export const styles = theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    position: 'relative',
+    textDecoration: 'none',
+    width: '100%',
+    boxSizing: 'border-box',
+    textAlign: 'left'
+  },
+  container: {
+    position: 'relative'
+  },
+  keyboardFocused: {
+    backgroundColor: theme.palette.action.hover
+  },
+  default: {
+    paddingTop: 12,
+    paddingBottom: 12
+  },
+  dense: {
+    paddingTop: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  divider: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    backgroundClip: 'padding-box'
+  },
+  gutters: theme.mixins.gutters(),
+  button: {
+    transition: theme.transitions.create('background-color', {
+      duration: theme.transitions.duration.shortest
+    }),
+    '&:hover': {
+      textDecoration: 'none',
+      backgroundColor: theme.palette.action.hover,
+      // Reset on mouse devices
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    }
+  },
+  secondaryAction: {
+    // Add some space to avoid collision as `ListItemSecondaryAction`
+    // is absolutely positionned.
+    paddingRight: theme.spacing.unit * 4
+  }
+});
+
+class ListItem extends React.Component {
+  getChildContext() {
+    return {
+      dense: this.props.dense || this.context.dense || false
+    };
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      button,
+      children: childrenProp,
+      classes,
+      className: classNameProp,
+      component: componentProp,
+      ContainerComponent,
+      ContainerProps: { className: ContainerClassName } = {},
+      dense,
+      disabled,
+      disableGutters,
+      divider
+    } = _props,
+          ContainerProps = _objectWithoutProperties(_props.ContainerProps, ['className']),
+          other = _objectWithoutProperties(_props, ['button', 'children', 'classes', 'className', 'component', 'ContainerComponent', 'ContainerProps', 'dense', 'disabled', 'disableGutters', 'divider']);
+
+    const isDense = dense || this.context.dense || false;
+    const children = React.Children.toArray(childrenProp);
+    const hasAvatar = children.some(value => isMuiElement(value, ['ListItemAvatar']));
+    const hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
+
+    const className = classNames(classes.root, isDense || hasAvatar ? classes.dense : classes.default, {
+      [classes.gutters]: !disableGutters,
+      [classes.divider]: divider,
+      [classes.disabled]: disabled,
+      [classes.button]: button,
+      [classes.secondaryAction]: hasSecondaryAction
+    }, classNameProp);
+
+    const componentProps = _extends({ className, disabled }, other);
+    let Component = componentProp || 'li';
+
+    if (button) {
+      componentProps.component = componentProp || 'div';
+      componentProps.keyboardFocusedClassName = classes.keyboardFocused;
+      Component = ButtonBase;
+    }
+
+    if (hasSecondaryAction) {
+      // Use div by default.
+      Component = !componentProps.component && !componentProp ? 'div' : Component;
+
+      // Avoid nesting of li > li.
+      if (ContainerComponent === 'li') {
+        if (Component === 'li') {
+          Component = 'div';
+        } else if (componentProps.component === 'li') {
+          componentProps.component = 'div';
+        }
+      }
+
+      return React.createElement(
+        ContainerComponent,
+        _extends({
+          className: classNames(classes.container, ContainerClassName)
+        }, ContainerProps),
+        React.createElement(
+          Component,
+          componentProps,
+          children
+        ),
+        children.pop()
+      );
+    }
+
+    return React.createElement(
+      Component,
+      componentProps,
+      children
+    );
+  }
+}
+
+ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If `true`, the list item will be a button (using `ButtonBase`).
+   */
+  button: PropTypes.bool,
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   * By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * The container component. Useful when a `ListItemSecondaryAction` is rendered.
+   */
+  ContainerComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Properties applied to the container element when the component
+   * is used to display a `ListItemSecondaryAction`.
+   */
+  ContainerProps: PropTypes.object,
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input will be used.
+   */
+  dense: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the left and right padding is removed.
+   */
+  disableGutters: PropTypes.bool,
+  /**
+   * If `true`, a 1px light border is added to the bottom of the list item.
+   */
+  divider: PropTypes.bool
+} : {};
+
+ListItem.defaultProps = {
+  button: false,
+  ContainerComponent: 'li',
+  dense: false,
+  disabled: false,
+  disableGutters: false,
+  divider: false
+};
+
+ListItem.contextTypes = {
+  dense: PropTypes.bool
+};
+
+ListItem.childContextTypes = {
+  dense: PropTypes.bool
+};
+
+export default withStyles(styles, { name: 'MuiListItem' })(ListItem);