@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.36

package/es/Tabs/Tabs.js

@@ -1,425 +0,0 @@
-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

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

package/es/TextField/TextField.js

@@ -1,259 +0,0 @@
-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

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