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

package/es/Progress/CircularProgress.js

@@ -1,201 +0,0 @@
-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 { capitalize } from '../utils/helpers';
-
-const SIZE = 50;
-
-function getRelativeValue(value, min, max) {
-  const clampedValue = Math.min(Math.max(min, value), max);
-  return (clampedValue - min) / (max - min);
-}
-
-function easeOut(t) {
-  t = getRelativeValue(t, 0, 1);
-  // https://gist.github.com/gre/1650294
-  t = (t -= 1) * t * t + 1;
-  return t;
-}
-
-function easeIn(t) {
-  return t * t;
-}
-
-export const styles = theme => ({
-  root: {
-    display: 'inline-block'
-  },
-  colorPrimary: {
-    color: theme.palette.primary.main
-  },
-  colorSecondary: {
-    color: theme.palette.secondary.main
-  },
-  svg: {},
-  svgIndeterminate: {
-    animation: 'mui-progress-circular-rotate 1.4s linear infinite'
-  },
-  circle: {
-    stroke: 'currentColor',
-    strokeLinecap: 'round'
-  },
-  circleIndeterminate: {
-    animation: 'mui-progress-circular-dash 1.4s ease-in-out infinite',
-    // Some default value that looks fine waiting for the animation to kicks in.
-    strokeDasharray: '80px, 200px',
-    strokeDashoffset: '0px' // Add the unit to fix a Edge 16 and below bug.
-  },
-  '@keyframes mui-progress-circular-rotate': {
-    '100%': {
-      transform: 'rotate(360deg)'
-    }
-  },
-  '@keyframes mui-progress-circular-dash': {
-    '0%': {
-      strokeDasharray: '1px, 200px',
-      strokeDashoffset: '0px'
-    },
-    '50%': {
-      strokeDasharray: '100px, 200px',
-      strokeDashoffset: '-15px'
-    },
-    '100%': {
-      strokeDasharray: '100px, 200px',
-      strokeDashoffset: '-120px'
-    }
-  }
-});
-
-/**
- * ## ARIA
- *
- * If the progress bar is describing the loading progress of a particular region of a page,
- * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
- * attribute to `true` on that region until it has finished loading.
- */
-function CircularProgress(props) {
-  const {
-    classes,
-    className,
-    color,
-    max,
-    min,
-    size,
-    style,
-    thickness,
-    value,
-    variant
-  } = props,
-        other = _objectWithoutProperties(props, ['classes', 'className', 'color', 'max', 'min', 'size', 'style', 'thickness', 'value', 'variant']);
-
-  const circleStyle = {};
-  const rootStyle = {};
-  const rootProps = {};
-
-  if (variant === 'determinate' || variant === 'static') {
-    const relVal = getRelativeValue(value, min, max) * 100;
-    const circumference = 2 * Math.PI * (SIZE / 2 - 5);
-    circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps['aria-valuenow'] = Math.round(relVal);
-
-    if (variant === 'static') {
-      circleStyle.strokeDashoffset = `${((100 - relVal) / 100 * circumference).toFixed(3)}px`;
-      rootStyle.transform = 'rotate(-90deg)';
-    } else {
-      circleStyle.strokeDashoffset = `${(easeIn((100 - relVal) / 100) * circumference).toFixed(3)}px`;
-      rootStyle.transform = `rotate(${(easeOut(relVal / 70) * 270).toFixed(3)}deg)`;
-    }
-  }
-
-  return React.createElement(
-    'div',
-    _extends({
-      className: classNames(classes.root, {
-        [classes[`color${capitalize(color)}`]]: color !== 'inherit'
-      }, className),
-      style: _extends({ width: size, height: size }, rootStyle, style),
-      role: 'progressbar'
-    }, rootProps, other),
-    React.createElement(
-      'svg',
-      {
-        className: classNames(classes.svg, {
-          [classes.svgIndeterminate]: variant === 'indeterminate',
-          [classes.svgStatic]: variant === 'static'
-        }),
-        viewBox: `0 0 ${SIZE} ${SIZE}`
-      },
-      React.createElement('circle', {
-        className: classNames(classes.circle, {
-          [classes.circleIndeterminate]: variant === 'indeterminate'
-        }),
-        style: circleStyle,
-        cx: SIZE / 2,
-        cy: SIZE / 2,
-        r: SIZE / 2 - 5,
-        fill: 'none',
-        strokeWidth: thickness
-      })
-    )
-  );
-}
-
-CircularProgress.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object.isRequired,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   */
-  color: PropTypes.oneOf(['primary', 'secondary', 'inherit']),
-  /**
-   * The max value of progress in determinate variant.
-   */
-  max: PropTypes.number,
-  /**
-   * The min value of progress in determinate variant.
-   */
-  min: PropTypes.number,
-  /**
-   * The size of the circle.
-   */
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * The thickness of the circle.
-   */
-  thickness: PropTypes.number,
-  /**
-   * The value of the progress indicator for the determinate and static variants.
-   * Value between 0 and 100.
-   */
-  value: PropTypes.number,
-  /**
-   * The variant of progress indicator. Use indeterminate
-   * when there is no progress value.
-   */
-  variant: PropTypes.oneOf(['determinate', 'indeterminate', 'static'])
-} : {};
-
-CircularProgress.defaultProps = {
-  color: 'primary',
-  max: 100,
-  min: 0,
-  size: 40,
-  thickness: 3.6,
-  value: 0,
-  variant: 'indeterminate'
-};
-
-export default withStyles(styles, { name: 'MuiCircularProgress', flip: false })(CircularProgress);

package/es/Progress/LinearProgress.js

@@ -1,235 +0,0 @@
-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 warning from 'warning';
-import withStyles from '../styles/withStyles';
-import { lighten } from '../styles/colorManipulator';
-
-const TRANSITION_DURATION = 4; // 400ms
-
-export const styles = theme => ({
-  root: {
-    position: 'relative',
-    overflow: 'hidden',
-    height: 5
-  },
-  colorPrimary: {
-    backgroundColor: lighten(theme.palette.primary.light, 0.6)
-  },
-  colorSecondary: {
-    backgroundColor: lighten(theme.palette.secondary.light, 0.4)
-  },
-  buffer: {
-    backgroundColor: 'transparent'
-  },
-  query: {
-    transform: 'rotate(180deg)'
-  },
-  dashed: {
-    position: 'absolute',
-    marginTop: 0,
-    height: '100%',
-    width: '100%',
-    animation: 'buffer 3s infinite linear'
-  },
-  dashedColorPrimary: {
-    backgroundImage: `radial-gradient(${lighten(theme.palette.primary.light, 0.6)} 0%, ${lighten(theme.palette.primary.light, 0.6)} 16%, transparent 42%)`,
-    backgroundSize: '10px 10px',
-    backgroundPosition: '0px -23px'
-  },
-  dashedColorSecondary: {
-    backgroundImage: `radial-gradient(${lighten(theme.palette.secondary.light, 0.4)} 0%, ${lighten(theme.palette.secondary.light, 0.6)} 16%, transparent 42%)`,
-    backgroundSize: '10px 10px',
-    backgroundPosition: '0px -23px'
-  },
-  bar: {
-    width: '100%',
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-    top: 0,
-    transition: 'transform 0.2s linear',
-    transformOrigin: 'left'
-  },
-  barColorPrimary: {
-    backgroundColor: theme.palette.primary.main
-  },
-  barColorSecondary: {
-    backgroundColor: theme.palette.secondary.main
-  },
-  bar1Indeterminate: {
-    width: 'auto',
-    willChange: 'left, right',
-    animation: 'mui-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite'
-  },
-  bar2Indeterminate: {
-    width: 'auto',
-    willChange: 'left, right',
-    animation: 'mui-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite',
-    animationDelay: '1.15s'
-  },
-  bar1Determinate: {
-    willChange: 'transform',
-    transition: `transform .${TRANSITION_DURATION}s linear`
-  },
-  bar1Buffer: {
-    zIndex: 1,
-    transition: `transform .${TRANSITION_DURATION}s linear`
-  },
-  bar2Buffer: {
-    transition: `transform .${TRANSITION_DURATION}s linear`
-  },
-  // Legends:
-  // || represents the viewport
-  // -  represents a light background
-  // x  represents a dark background
-  '@keyframes mui-indeterminate1': {
-    //  |-----|---x-||-----||-----|
-    '0%': {
-      left: '-35%',
-      right: '100%'
-    },
-    //  |-----|-----||-----||xxxx-|
-    '60%': {
-      left: '100%',
-      right: '-90%'
-    },
-    '100%': {
-      left: '100%',
-      right: '-90%'
-    }
-  },
-  '@keyframes mui-indeterminate2': {
-    //  |xxxxx|xxxxx||-----||-----|
-    '0%': {
-      left: '-200%',
-      right: '100%'
-    },
-    //  |-----|-----||-----||-x----|
-    '60%': {
-      left: '107%',
-      right: '-8%'
-    },
-    '100%': {
-      left: '107%',
-      right: '-8%'
-    }
-  },
-  '@keyframes buffer': {
-    '0%': {
-      opacity: 1,
-      backgroundPosition: '0px -23px'
-    },
-    '50%': {
-      opacity: 0,
-      backgroundPosition: '0px -23px'
-    },
-    '100%': {
-      opacity: 1,
-      backgroundPosition: '-200px -23px'
-    }
-  }
-});
-
-/**
- * ## ARIA
- *
- * If the progress bar is describing the loading progress of a particular region of a page,
- * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
- * attribute to `true` on that region until it has finished loading.
- */
-function LinearProgress(props) {
-  const { classes, className: classNameProp, color, value, valueBuffer, variant } = props,
-        other = _objectWithoutProperties(props, ['classes', 'className', 'color', 'value', 'valueBuffer', 'variant']);
-
-  const className = classNames(classes.root, {
-    [classes.colorPrimary]: color === 'primary',
-    [classes.colorSecondary]: color === 'secondary',
-    [classes.buffer]: variant === 'buffer',
-    [classes.query]: variant === 'query'
-  }, classNameProp);
-  const dashedClass = classNames(classes.dashed, {
-    [classes.dashedColorPrimary]: color === 'primary',
-    [classes.dashedColorSecondary]: color === 'secondary'
-  });
-  const bar1ClassName = classNames(classes.bar, {
-    [classes.barColorPrimary]: color === 'primary',
-    [classes.barColorSecondary]: color === 'secondary',
-    [classes.bar1Indeterminate]: variant === 'indeterminate' || variant === 'query',
-    [classes.bar1Determinate]: variant === 'determinate',
-    [classes.bar1Buffer]: variant === 'buffer'
-  });
-  const bar2ClassName = classNames(classes.bar, {
-    [classes.barColorPrimary]: color === 'primary' && variant !== 'buffer',
-    [classes.colorPrimary]: color === 'primary' && variant === 'buffer',
-    [classes.barColorSecondary]: color === 'secondary' && variant !== 'buffer',
-    [classes.colorSecondary]: color === 'secondary' && variant === 'buffer',
-    [classes.bar2Indeterminate]: variant === 'indeterminate' || variant === 'query',
-    [classes.bar2Buffer]: variant === 'buffer'
-  });
-  const rootProps = {};
-  const inlineStyles = { bar1: {}, bar2: {} };
-
-  if (variant === 'determinate' || variant === 'buffer') {
-    if (value !== undefined) {
-      rootProps['aria-valuenow'] = Math.round(value);
-      inlineStyles.bar1.transform = `scaleX(${value / 100})`;
-    } else {
-      process.env.NODE_ENV !== "production" ? warning(false, 'Material-UI: you need to provide a value property ' + 'when using the determinate or buffer variant of LinearProgress .') : void 0;
-    }
-  }
-  if (variant === 'buffer') {
-    if (valueBuffer !== undefined) {
-      inlineStyles.bar2.transform = `scaleX(${(valueBuffer || 0) / 100})`;
-    } else {
-      process.env.NODE_ENV !== "production" ? warning(false, 'Material-UI: you need to provide a valueBuffer property ' + 'when using the buffer variant of LinearProgress.') : void 0;
-    }
-  }
-
-  return React.createElement(
-    'div',
-    _extends({ className: className, role: 'progressbar' }, rootProps, other),
-    variant === 'buffer' ? React.createElement('div', { className: dashedClass }) : null,
-    React.createElement('div', { className: bar1ClassName, style: inlineStyles.bar1 }),
-    variant === 'determinate' ? null : React.createElement('div', { className: bar2ClassName, style: inlineStyles.bar2 })
-  );
-}
-
-LinearProgress.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object.isRequired,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   */
-  color: PropTypes.oneOf(['primary', 'secondary']),
-  /**
-   * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
-   */
-  value: PropTypes.number,
-  /**
-   * The value for the buffer variant.
-   * Value between 0 and 100.
-   */
-  valueBuffer: PropTypes.number,
-  /**
-   * The variant of progress indicator. Use indeterminate or query
-   * when there is no progress value.
-   */
-  variant: PropTypes.oneOf(['determinate', 'indeterminate', 'buffer', 'query'])
-} : {};
-
-LinearProgress.defaultProps = {
-  color: 'primary',
-  variant: 'indeterminate'
-};
-
-export default withStyles(styles, { name: 'MuiLinearProgress' })(LinearProgress);

package/es/Progress/index.js

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

package/es/Radio/Radio.js

@@ -1,113 +0,0 @@
-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 SwitchBase from '../internal/SwitchBase';
-import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
-import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
-import withStyles from '../styles/withStyles';
-
-export const styles = theme => ({
-  default: {
-    color: theme.palette.text.secondary
-  },
-  checked: {},
-  checkedPrimary: {
-    color: theme.palette.primary.main
-  },
-  checkedSecondary: {
-    color: theme.palette.secondary.main
-  },
-  disabled: {
-    color: theme.palette.action.disabled
-  }
-});
-
-var _ref = React.createElement(RadioButtonUncheckedIcon, null);
-
-var _ref2 = React.createElement(RadioButtonCheckedIcon, null);
-
-function Radio(props) {
-  const { classes, color } = props,
-        other = _objectWithoutProperties(props, ['classes', 'color']);
-  const checkedClass = classNames(classes.checked, {
-    [classes.checkedPrimary]: color === 'primary',
-    [classes.checkedSecondary]: color === 'secondary'
-  });
-
-  return React.createElement(SwitchBase, _extends({
-    type: 'radio',
-    icon: _ref,
-    checkedIcon: _ref2,
-    classes: {
-      default: classes.default,
-      checked: checkedClass,
-      disabled: classes.disabled
-    }
-  }, other));
-}
-
-Radio.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * If `true`, the component is checked.
-   */
-  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /**
-   * The icon to display when the component is checked.
-   */
-  checkedIcon: PropTypes.node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: PropTypes.object.isRequired,
-  /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   */
-  color: PropTypes.oneOf(['primary', 'secondary']),
-  /**
-   * If `true`, the switch will be disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the ripple effect will be disabled.
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * The icon to display when the component is unchecked.
-   */
-  icon: PropTypes.node,
-  /**
-   * The id of the `input` element.
-   */
-  id: PropTypes.string,
-  /**
-   * Properties applied to the `input` element.
-   */
-  inputProps: PropTypes.object,
-  /**
-   * Use that property to pass a ref callback to the native input component.
-   */
-  inputRef: PropTypes.func,
-  /**
-   * Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback
-   * @param {boolean} checked The `checked` value of the switch
-   */
-  onChange: PropTypes.func,
-  /**
-   * The input component property `type`.
-   */
-  type: PropTypes.string,
-  /**
-   * The value of the component.
-   */
-  value: PropTypes.string
-} : {};
-
-Radio.defaultProps = {
-  color: 'secondary'
-};
-
-export default withStyles(styles, { name: 'MuiRadio' })(Radio);

package/es/Radio/RadioGroup.js

@@ -1,101 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-// @inheritedComponent FormGroup
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import FormGroup from '../Form/FormGroup';
-import { find } from '../utils/helpers';
-
-class RadioGroup extends React.Component {
-  constructor(...args) {
-    var _temp;
-
-    return _temp = super(...args), this.radios = [], this.focus = () => {
-      if (!this.radios || !this.radios.length) {
-        return;
-      }
-
-      const focusRadios = this.radios.filter(n => !n.disabled);
-
-      if (!focusRadios.length) {
-        return;
-      }
-
-      const selectedRadio = find(focusRadios, n => n.checked);
-
-      if (selectedRadio) {
-        selectedRadio.focus();
-        return;
-      }
-
-      focusRadios[0].focus();
-    }, this.handleRadioChange = (event, checked) => {
-      if (checked && this.props.onChange) {
-        this.props.onChange(event, event.target.value);
-      }
-    }, _temp;
-  }
-
-  render() {
-    const _props = this.props,
-          { children, name, value, onChange } = _props,
-          other = _objectWithoutProperties(_props, ['children', 'name', 'value', 'onChange']);
-
-    this.radios = [];
-
-    return React.createElement(
-      FormGroup,
-      _extends({ role: 'radiogroup' }, other),
-      React.Children.map(children, (child, index) => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-
-        return React.cloneElement(child, {
-          key: index,
-          name,
-          inputRef: node => {
-            if (node) {
-              this.radios.push(node);
-            }
-          },
-          checked: value === child.props.value,
-          onChange: this.handleRadioChange
-        });
-      })
-    );
-  }
-}
-
-RadioGroup.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * The name used to reference the value of the control.
-   */
-  name: PropTypes.string,
-  /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Callback fired when a radio button is selected.
-   *
-   * @param {object} event The event source of the callback
-   * @param {string} value The `value` of the selected radio button
-   */
-  onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * Value of the selected radio button.
-   */
-  value: PropTypes.string
-} : {};
-
-export default RadioGroup;

package/es/Radio/index.js

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