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

package/es/Tabs/Tabs.js

@@ -0,0 +1,425 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _Number$isNaN from 'babel-runtime/core-js/number/is-nan';
+import React from 'react';
+import PropTypes from 'prop-types';
+import warning from 'warning';
+import classNames from 'classnames';
+import EventListener from 'react-event-listener';
+import debounce from 'lodash/debounce';
+import ScrollbarSize from 'react-scrollbar-size';
+import { getNormalizedScrollLeft, detectScrollType } from 'normalize-scroll-left';
+import scroll from 'scroll';
+import withStyles from '../styles/withStyles';
+import TabIndicator from './TabIndicator';
+import TabScrollButton from './TabScrollButton';
+
+export const styles = theme => ({
+  root: {
+    overflow: 'hidden',
+    minHeight: 48,
+    WebkitOverflowScrolling: 'touch' // Add iOS momentum scrolling.
+  },
+  flexContainer: {
+    display: 'flex'
+  },
+  scroller: {
+    position: 'relative',
+    display: 'inline-block',
+    flex: '1 1 auto',
+    whiteSpace: 'nowrap'
+  },
+  fixed: {
+    overflowX: 'hidden',
+    width: '100%'
+  },
+  scrollable: {
+    overflowX: 'scroll'
+  },
+  centered: {
+    justifyContent: 'center'
+  },
+  scrollButtonsAuto: {
+    [theme.breakpoints.down('xs')]: {
+      display: 'none'
+    }
+  }
+});
+
+class Tabs extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.state = {
+      indicatorStyle: {},
+      scrollerStyle: {
+        marginBottom: 0
+      },
+      showLeftScroll: false,
+      showRightScroll: false,
+      mounted: false
+    }, this.getConditionalElements = () => {
+      const {
+        classes,
+        buttonClassName,
+        scrollable,
+        scrollButtons,
+        TabScrollButton: TabScrollButtonProp,
+        theme
+      } = this.props;
+      const conditionalElements = {};
+      conditionalElements.scrollbarSizeListener = scrollable ? React.createElement(ScrollbarSize, {
+        onLoad: this.handleScrollbarSizeChange,
+        onChange: this.handleScrollbarSizeChange
+      }) : null;
+
+      const showScrollButtons = scrollable && (scrollButtons === 'auto' || scrollButtons === 'on');
+
+      conditionalElements.scrollButtonLeft = showScrollButtons ? React.createElement(TabScrollButtonProp, {
+        direction: theme && theme.direction === 'rtl' ? 'right' : 'left',
+        onClick: this.handleLeftScrollClick,
+        visible: this.state.showLeftScroll,
+        className: classNames({
+          [classes.scrollButtonsAuto]: scrollButtons === 'auto'
+        }, buttonClassName)
+      }) : null;
+
+      conditionalElements.scrollButtonRight = showScrollButtons ? React.createElement(TabScrollButtonProp, {
+        direction: theme && theme.direction === 'rtl' ? 'left' : 'right',
+        onClick: this.handleRightScrollClick,
+        visible: this.state.showRightScroll,
+        className: classNames({
+          [classes.scrollButtonsAuto]: scrollButtons === 'auto'
+        }, buttonClassName)
+      }) : null;
+
+      return conditionalElements;
+    }, this.getTabsMeta = (value, direction) => {
+      let tabsMeta;
+      if (this.tabs) {
+        const rect = this.tabs.getBoundingClientRect();
+        // create a new object with ClientRect class props + scrollLeft
+        tabsMeta = {
+          clientWidth: this.tabs ? this.tabs.clientWidth : 0,
+          scrollLeft: this.tabs ? this.tabs.scrollLeft : 0,
+          scrollLeftNormalized: this.tabs ? getNormalizedScrollLeft(this.tabs, direction) : 0,
+          scrollWidth: this.tabs ? this.tabs.scrollWidth : 0,
+          left: rect.left,
+          right: rect.right
+        };
+      }
+
+      let tabMeta;
+      if (this.tabs && value !== false) {
+        const children = this.tabs.children[0].children;
+
+        if (children.length > 0) {
+          const tab = children[this.valueToIndex[value]];
+          process.env.NODE_ENV !== "production" ? warning(tab, `Material-UI: the value provided \`${value}\` is invalid`) : void 0;
+          tabMeta = tab ? tab.getBoundingClientRect() : null;
+        }
+      }
+      return { tabsMeta, tabMeta };
+    }, this.tabs = undefined, this.valueToIndex = {}, this.handleResize = debounce(() => {
+      this.updateIndicatorState(this.props);
+      this.updateScrollButtonState();
+    }, 166), this.handleLeftScrollClick = () => {
+      if (this.tabs) {
+        this.moveTabsScroll(-this.tabs.clientWidth);
+      }
+    }, this.handleRightScrollClick = () => {
+      if (this.tabs) {
+        this.moveTabsScroll(this.tabs.clientWidth);
+      }
+    }, this.handleScrollbarSizeChange = ({ scrollbarHeight }) => {
+      this.setState({
+        scrollerStyle: {
+          marginBottom: -scrollbarHeight
+        }
+      });
+    }, this.handleTabsScroll = debounce(() => {
+      this.updateScrollButtonState();
+    }, 166), this.moveTabsScroll = delta => {
+      const { theme } = this.props;
+
+      if (this.tabs) {
+        const multiplier = theme.direction === 'rtl' ? -1 : 1;
+        const nextScrollLeft = this.tabs.scrollLeft + delta * multiplier;
+        // Fix for Edge
+        const invert = theme.direction === 'rtl' && detectScrollType() === 'reverse' ? -1 : 1;
+        scroll.left(this.tabs, invert * nextScrollLeft);
+      }
+    }, this.scrollSelectedIntoView = () => {
+      const { theme, value } = this.props;
+      const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction);
+
+      if (!tabMeta || !tabsMeta) {
+        return;
+      }
+
+      if (tabMeta.left < tabsMeta.left) {
+        // left side of button is out of view
+        const nextScrollLeft = tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left);
+        scroll.left(this.tabs, nextScrollLeft);
+      } else if (tabMeta.right > tabsMeta.right) {
+        // right side of button is out of view
+        const nextScrollLeft = tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right);
+        scroll.left(this.tabs, nextScrollLeft);
+      }
+    }, this.updateScrollButtonState = () => {
+      const { scrollable, scrollButtons, theme } = this.props;
+
+      if (this.tabs && scrollable && scrollButtons !== 'off') {
+        const { scrollWidth, clientWidth } = this.tabs;
+        const scrollLeft = getNormalizedScrollLeft(this.tabs, theme.direction);
+
+        const showLeftScroll = theme.direction === 'rtl' ? scrollWidth > clientWidth + scrollLeft : scrollLeft > 0;
+
+        const showRightScroll = theme.direction === 'rtl' ? scrollLeft > 0 : scrollWidth > clientWidth + scrollLeft;
+
+        if (showLeftScroll !== this.state.showLeftScroll || showRightScroll !== this.state.showRightScroll) {
+          this.setState({ showLeftScroll, showRightScroll });
+        }
+      }
+    }, _temp;
+  }
+
+  componentDidMount() {
+    // eslint-disable-next-line react/no-did-mount-set-state
+    this.setState({ mounted: true });
+    this.updateIndicatorState(this.props);
+    this.updateScrollButtonState();
+
+    if (this.props.action) {
+      this.props.action({
+        updateIndicator: this.handleResize
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.updateScrollButtonState();
+
+    // The index might have changed at the same time.
+    // We need to check again the right indicator position.
+    this.updateIndicatorState(this.props);
+
+    if (this.state.indicatorStyle !== prevState.indicatorStyle) {
+      this.scrollSelectedIntoView();
+    }
+  }
+
+  componentWillUnmount() {
+    this.handleResize.cancel();
+    this.handleTabsScroll.cancel();
+  }
+
+  updateIndicatorState(props) {
+    const { theme, value } = props;
+
+    const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction);
+    let left = 0;
+
+    if (tabMeta && tabsMeta) {
+      const correction = theme.direction === 'rtl' ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;
+      left = tabMeta.left - tabsMeta.left + correction;
+    }
+
+    const indicatorStyle = {
+      left,
+      // May be wrong until the font is loaded.
+      width: tabMeta ? tabMeta.width : 0
+    };
+
+    if ((indicatorStyle.left !== this.state.indicatorStyle.left || indicatorStyle.width !== this.state.indicatorStyle.width) && !_Number$isNaN(indicatorStyle.left) && !_Number$isNaN(indicatorStyle.width)) {
+      this.setState({ indicatorStyle });
+    }
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      action,
+      buttonClassName,
+      centered,
+      children: childrenProp,
+      classes,
+      className: classNameProp,
+      fullWidth,
+      indicatorClassName,
+      indicatorColor,
+      onChange,
+      scrollable,
+      scrollButtons,
+      TabScrollButton: TabScrollButtonProp,
+      textColor,
+      theme,
+      value
+    } = _props,
+          other = _objectWithoutProperties(_props, ['action', 'buttonClassName', 'centered', 'children', 'classes', 'className', 'fullWidth', 'indicatorClassName', 'indicatorColor', 'onChange', 'scrollable', 'scrollButtons', 'TabScrollButton', 'textColor', 'theme', 'value']);
+
+    const className = classNames(classes.root, classNameProp);
+    const scrollerClassName = classNames(classes.scroller, {
+      [classes.fixed]: !scrollable,
+      [classes.scrollable]: scrollable
+    });
+    const flexContainerClassName = classNames(classes.flexContainer, {
+      [classes.centered]: centered && !scrollable
+    });
+
+    const indicator = React.createElement(TabIndicator, {
+      style: this.state.indicatorStyle,
+      className: indicatorClassName,
+      color: indicatorColor
+    });
+
+    this.valueToIndex = {};
+    let childIndex = 0;
+    const children = React.Children.map(childrenProp, child => {
+      if (!React.isValidElement(child)) {
+        return null;
+      }
+
+      const childValue = child.props.value || childIndex;
+      this.valueToIndex[childValue] = childIndex;
+      const selected = childValue === value;
+
+      childIndex += 1;
+      return React.cloneElement(child, {
+        fullWidth,
+        indicator: selected && !this.state.mounted && indicator,
+        selected,
+        onChange,
+        textColor,
+        value: childValue
+      });
+    });
+
+    const conditionalElements = this.getConditionalElements();
+
+    return React.createElement(
+      'div',
+      _extends({ className: className }, other),
+      React.createElement(EventListener, { target: 'window', onResize: this.handleResize }),
+      conditionalElements.scrollbarSizeListener,
+      React.createElement(
+        'div',
+        { className: classes.flexContainer },
+        conditionalElements.scrollButtonLeft,
+        React.createElement(
+          'div',
+          {
+            className: scrollerClassName,
+            style: this.state.scrollerStyle,
+            ref: node => {
+              this.tabs = node;
+            },
+            role: 'tablist',
+            onScroll: this.handleTabsScroll
+          },
+          React.createElement(
+            'div',
+            { className: flexContainerClassName },
+            children
+          ),
+          this.state.mounted && indicator
+        ),
+        conditionalElements.scrollButtonRight
+      )
+    );
+  }
+}
+
+Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Callback fired when the component mounts.
+   * This is useful when you want to trigger an action programmatically.
+   * It currently only supports `updateIndicator()` action.
+   *
+   * @param {object} actions This object contains all possible actions
+   * that can be triggered programmatically.
+   */
+  action: PropTypes.func,
+  /**
+   * The CSS class name of the scroll button elements.
+   */
+  buttonClassName: PropTypes.string,
+  /**
+   * If `true`, the tabs will be centered.
+   * This property is intended for large views.
+   */
+  centered: 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,
+  /**
+   * If `true`, the tabs will grow to use all the available space.
+   * This property is intended for small views, like on mobile.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The CSS class name of the indicator element.
+   */
+  indicatorClassName: PropTypes.string,
+  /**
+   * Determines the color of the indicator.
+   */
+  indicatorColor: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['secondary', 'primary'])]),
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {object} event The event source of the callback
+   * @param {number} value We default to the index of the child
+   */
+  onChange: PropTypes.func,
+  /**
+   * True invokes scrolling properties and allow for horizontally scrolling
+   * (or swiping) the tab bar.
+   */
+  scrollable: PropTypes.bool,
+  /**
+   * Determine behavior of scroll buttons when tabs are set to scroll
+   * `auto` will only present them on medium and larger viewports
+   * `on` will always present them
+   * `off` will never present them
+   */
+  scrollButtons: PropTypes.oneOf(['auto', 'on', 'off']),
+  /**
+   * The component used to render the scroll buttons.
+   */
+  TabScrollButton: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Determines the color of the `Tab`.
+   */
+  textColor: PropTypes.oneOf(['secondary', 'primary', 'inherit']),
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired,
+  /**
+   * The value of the currently selected `Tab`.
+   * If you don't want any selected `Tab`, you can set this property to `false`.
+   */
+  value: PropTypes.any
+} : {};
+
+Tabs.defaultProps = {
+  centered: false,
+  fullWidth: false,
+  indicatorColor: 'secondary',
+  scrollable: false,
+  scrollButtons: 'auto',
+  TabScrollButton,
+  textColor: 'inherit'
+};
+
+export default withStyles(styles, { name: 'MuiTabs', withTheme: true })(Tabs);

package/es/Tabs/index.js

@@ -0,0 +1,2 @@
+export { default } from './Tabs';
+export { default as Tab } from './Tab';

package/es/TextField/TextField.js

@@ -0,0 +1,259 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent FormControl
+
+import React from 'react';
+import warning from 'warning';
+import PropTypes from 'prop-types';
+import Input, { InputLabel } from '../Input';
+import FormControl from '../Form/FormControl';
+import FormHelperText from '../Form/FormHelperText';
+import Select from '../Select/Select';
+
+/**
+ * The `TextField` is a convenience wrapper for the most common cases (80%).
+ * It cannot be all things to all people, otherwise the API would grow out of control.
+ *
+ * ## Advanced Configuration
+ *
+ * It's important to understand that the text field is a simple abstraction
+ * on top of the following components:
+ * - [FormControl](/api/form-control)
+ * - [InputLabel](/api/input-label)
+ * - [Input](/api/input)
+ * - [FormHelperText](/api/form-helper-text)
+ *
+ * If you wish to alter the properties applied to the native input, you can do as follow:
+ *
+ * ```jsx
+ * const inputProps = {
+ *   step: 300,
+ * };
+ *
+ * return <TextField id="time" type="time" inputProps={inputProps} />;
+ * ```
+ *
+ * For advanced cases, please look at the source of TextField by clicking on the
+ * "Edit this page" button above. Consider either:
+ * - using the upper case props for passing values direct to the components.
+ * - using the underlying components directly as shown in the demos.
+ */
+function TextField(props) {
+  const {
+    autoComplete,
+    autoFocus,
+    children,
+    className,
+    defaultValue,
+    disabled,
+    error,
+    FormHelperTextProps,
+    fullWidth,
+    helperText,
+    helperTextClassName,
+    id,
+    InputLabelProps,
+    inputProps,
+    InputProps,
+    inputRef,
+    label,
+    labelClassName,
+    multiline,
+    name,
+    onChange,
+    placeholder,
+    required,
+    rows,
+    rowsMax,
+    select,
+    SelectProps,
+    type,
+    value
+  } = props,
+        other = _objectWithoutProperties(props, ['autoComplete', 'autoFocus', 'children', 'className', 'defaultValue', 'disabled', 'error', 'FormHelperTextProps', 'fullWidth', 'helperText', 'helperTextClassName', 'id', 'InputLabelProps', 'inputProps', 'InputProps', 'inputRef', 'label', 'labelClassName', 'multiline', 'name', 'onChange', 'placeholder', 'required', 'rows', 'rowsMax', 'select', 'SelectProps', 'type', 'value']);
+
+  process.env.NODE_ENV !== "production" ? warning(!select || Boolean(children), 'Material-UI: `children` must be passed when using the `TextField` component with `select`.') : void 0;
+
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const InputComponent = React.createElement(Input, _extends({
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
+    defaultValue: defaultValue,
+    disabled: disabled,
+    fullWidth: fullWidth,
+    multiline: multiline,
+    name: name,
+    rows: rows,
+    rowsMax: rowsMax,
+    type: type,
+    value: value,
+    id: id,
+    inputRef: inputRef,
+    onChange: onChange,
+    placeholder: placeholder,
+    inputProps: inputProps
+  }, InputProps));
+
+  return React.createElement(
+    FormControl,
+    _extends({
+      'aria-describedby': helperTextId,
+      className: className,
+      error: error,
+      fullWidth: fullWidth,
+      required: required
+    }, other),
+    label && React.createElement(
+      InputLabel,
+      _extends({ htmlFor: id, className: labelClassName }, InputLabelProps),
+      label
+    ),
+    select ? React.createElement(
+      Select,
+      _extends({ value: value, input: InputComponent }, SelectProps),
+      children
+    ) : InputComponent,
+    helperText && React.createElement(
+      FormHelperText,
+      _extends({ className: helperTextClassName, id: helperTextId }, FormHelperTextProps),
+      helperText
+    )
+  );
+}
+
+TextField.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * This property helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it here:
+   * https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
+   */
+  autoComplete: PropTypes.string,
+  /**
+   * If `true`, the input will be focused during the first mount.
+   */
+  autoFocus: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The default value of the `Input` element.
+   */
+  defaultValue: PropTypes.string,
+  /**
+   * If `true`, the input will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label will be displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * Properties applied to the `FormHelperText` element.
+   */
+  FormHelperTextProps: PropTypes.object,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * The CSS class name of the helper text element.
+   */
+  helperTextClassName: PropTypes.string,
+  /**
+   * The id of the `input` element.
+   * Use that property to make `label` and `helperText` accessible for screen readers.
+   */
+  id: PropTypes.string,
+  /**
+   * Properties applied to the `InputLabel` element.
+   */
+  InputLabelProps: PropTypes.object,
+  /**
+   * Properties applied to the `Input` element.
+   */
+  InputProps: PropTypes.object,
+  /**
+   * Properties applied to the native `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Use that property to pass a ref callback to the native input component.
+   */
+  inputRef: PropTypes.func,
+  /**
+   * The label content.
+   */
+  label: PropTypes.node,
+  /**
+   * The CSS class name of the label element.
+   */
+  labelClassName: PropTypes.string,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   */
+  margin: PropTypes.oneOf(['none', 'dense', 'normal']),
+  /**
+   * If `true`, a textarea element will be rendered instead of an input.
+   */
+  multiline: PropTypes.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * Callback fired when the value is changed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onChange: PropTypes.func,
+  /**
+   * The short hint displayed in the input before the user enters a value.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * If `true`, the label is displayed as required.
+   */
+  required: PropTypes.bool,
+  /**
+   * 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]),
+  /**
+   * Render a `Select` element while passing the `Input` element to `Select` as `input` parameter.
+   * If this option is set you must pass the options of the select as children.
+   */
+  select: PropTypes.bool,
+  /**
+   * Properties applied to the `Select` element.
+   */
+  SelectProps: PropTypes.object,
+  /**
+   * Type attribute of the `Input` element. It should be a valid HTML5 input type.
+   */
+  type: PropTypes.string,
+  /**
+   * The value of the `Input` element, required for a controlled component.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))])
+} : {};
+
+TextField.defaultProps = {
+  required: false,
+  select: false
+};
+
+export default TextField;

package/es/TextField/index.js

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