@widergy/mobile-ui 1.27.1 → 1.28.1

package/lib/components/MultipleFilePicker/components/Input/README.md

@@ -1,77 +0,0 @@
-# Input
-
-## Input
-
-Material Text Input with Title and Underline.
-
-### Props
-
-
-| NAME                                                                             | TYPE            | REQUIRED | DESCRIPTION                                                                                                                | DEFAULT VALUE              |
-| ---                                                                              | ---             | ---      | ---                                                                                                                        | ---                        |
-| [TextInput](https://facebook.github.io/react-native/docs/textinput#props) props. | TextInput props | No       |                                                                                                                            | -                          |
-| activeColor                                                                      | string          | No       | The color the input will have when active. If this prop is not specified, the color defaults to `theme.colors.primary`.    | -                          |
-| backgroundColor                                                                  | string          | No       | Background color for the input. Defaults to `theme.colors.inputBackground`.                                                | -                          |
-| caption                                                                          | string          | No       | Helper text to show below the input if no error is present.                                                                | -                          |
-| captionProps                                                                     | CaptionType     | No       | Additional props for caption.                                                                                              | -                          |
-| containerStyle                                                                   | ViewStyle       | No       | Style for the outer container of the input.                                                                                | -                          |
-| disabled                                                                         | bool            | No       | If `true` sets all styles to disabled and disables interactions with the input.                                            | -                          |
-| error                                                                            | string          | No       | Error to display instead of the caption. Also sets colors to the error color.                                              | -                          |
-| errorColor                                                                       | string          | No       | The color that errors will be displayed in. Defaults to `theme.colors.error`.                                              | -                          |
-| iconSize                                                                         | number          | No       | The size that applies to all icons.                                                                                        | DEFAULT ICON SIZE          |
-| inactiveColor                                                                    | string          | No       | The color the input will have when inactive. If this prop is not specified, the color defaults to `theme.fonts.fontColor`. | -                          |
-| inputRef                                                                         | func            | No       | A way to pass a `ref` from outside the component to the input.                                                             | -                          |
-| leadingIcon                                                                      | IconType        | No       | Icon to display on the left side.                                                                                          | -                          |
-| showEye                                                                          | bool            | No       | Show eye icon to show `secureTextEntry` text if that prop is enabled.                                                      | -                          |
-| textStyles                                                                       | TextStyle       | No       | Style for the input.                                                                                                       | -                          |
-| title                                                                            | string          | No       | Input title to show when the input is not active. Will float to the top once it is active.                                 | -                          |
-| trailingIcon                                                                     | IconButtonType  | No       | Icon button to display on the right side.                                                                                  | -                          |
-| underlineHeight                                                                  | number          | No       | The underline component height (reminder: underline is scaled twice as big when active).                                   | `portraitVerticalScale(1)` |
-| withValueColor                                                                   | string          | No       | The color of the title when it has values, but is not focused.                                                             | -                          |
-
-
-#### Example
-```js
-import React, { PureComponent } from 'react';
-import { Input } from '@widergy/mobile-ui';
-
-class InputShowcase extends PureComponent {
-  state = {
-    value: '',
-    error: ''
-  };
-
-  changeValue = value => this.setState({ value });
-
-  handleBlur = () => {
-    const { value } = this.state;
-    this.validate(value);
-  };
-
-  handleFocus = () => {
-    this.setState({ error: '' });
-  };
-
-  validate = text => {
-    const error =
-      text && text.length < 5 ? 'Debe tener más de 5 caracteres y este mensaje es de dos líneas' : '';
-
-    this.setState({ error });
-  };
-
-  render() {
-    return (
-      <Input
-        {...this.state}
-        {...this.props}
-        onBlur={this.handleBlur}
-        onFocus={this.handleFocus}
-        onChange={this.changeValue}
-        onSubmit={this.validate}
-        containerStyle={styles.input}
-      />
-    );
-  }
-}
-
-```

package/lib/components/MultipleFilePicker/components/Input/components/ShowPassword/constants.js

@@ -1,2 +0,0 @@
-export const VISIBILITY = 'eye';
-export const VISIBILITY_OFF = 'eye-off';

package/lib/components/MultipleFilePicker/components/Input/components/ShowPassword/index.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import UTButton from '../../../../../UTButton';
-
-import propTypes from './propTypes';
-import styles from './styles';
-
-const ShowPassword = ({ onShowPassword, passwordVisible }) => (
-  <View style={styles.container}>
-    <UTButton Icon={passwordVisible ? 'IconEye' : 'IconEyeOff'} onPress={onShowPassword} variant="text" />
-  </View>
-);
-
-ShowPassword.displayName = 'ShowPassword';
-
-ShowPassword.propTypes = propTypes;
-
-export default ShowPassword;

package/lib/components/MultipleFilePicker/components/Input/components/ShowPassword/propTypes.js

@@ -1,8 +0,0 @@
-import { bool, func, number, string } from 'prop-types';
-
-export default {
-  color: string,
-  onShowPassword: func.isRequired,
-  passwordVisible: bool.isRequired,
-  size: number
-};

package/lib/components/MultipleFilePicker/components/Input/components/ShowPassword/styles.js

@@ -1,11 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-import { INPUT_ICON_MARGIN } from '../../styles';
-
-export default StyleSheet.create({
-  container: {
-    alignItems: 'flex-end',
-    flexDirection: 'row',
-    marginLeft: INPUT_ICON_MARGIN
-  }
-});

package/lib/components/MultipleFilePicker/components/Input/components/Title/index.js

@@ -1,78 +0,0 @@
-import React, { Component } from 'react';
-import { Animated, View } from 'react-native';
-
-import Label from '../../../../../Label';
-import { DURATION } from '../../constants';
-
-import propTypes from './propTypes';
-import styles, { getLabelStyle } from './styles';
-
-class Title extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      translate: new Animated.Value(props.active ? 1 : 0),
-      width: 0
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const { active } = this.props;
-    if (!prevProps.active && active) this.translate(1);
-    else if (prevProps.active && !active) this.translate(0);
-  }
-
-  handleLayout = ({
-    nativeEvent: {
-      layout: { width }
-    }
-  }) =>
-    this.setState({
-      width
-    });
-
-  translate = toValue => {
-    const { onAnimationEnd } = this.props;
-    const { translate } = this.state;
-    Animated.timing(translate, {
-      toValue,
-      duration: DURATION
-    }).start(onAnimationEnd);
-  };
-
-  render() {
-    const {
-      active,
-      activeColor,
-      children,
-      disabled,
-      error,
-      errorColor,
-      focused,
-      fontSize,
-      inactiveColor,
-      withValueColor
-    } = this.props;
-    const { translate, width } = this.state;
-    const color =
-      (active && !error && (focused ? activeColor : withValueColor || inactiveColor)) ||
-      (error && errorColor) ||
-      inactiveColor;
-    const labelStyle = getLabelStyle(translate, width, fontSize);
-
-    return (
-      <View style={styles.container}>
-        <Animated.View onLayout={this.handleLayout} style={[styles.label, labelStyle]}>
-          <Label color={color} disabled={disabled} error={error && !errorColor} style={{ fontSize }}>
-            {children}
-          </Label>
-        </Animated.View>
-      </View>
-    );
-  }
-}
-
-Title.propTypes = propTypes;
-
-export default Title;

package/lib/components/MultipleFilePicker/components/Input/components/Title/propTypes.js

@@ -1,14 +0,0 @@
-import { bool, func, number, string } from 'prop-types';
-
-export default {
-  active: bool,
-  activeColor: string,
-  disabled: bool,
-  error: bool,
-  errorColor: string,
-  focused: bool,
-  fontSize: number,
-  inactiveColor: string,
-  onAnimationEnd: func,
-  withValueColor: string
-};

package/lib/components/MultipleFilePicker/components/Input/components/Title/styles.js

@@ -1,42 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-import { RATIO } from '../../constants';
-
-export const getLabelStyle = (translate, width, fontSize) => ({
-  transform: [
-    {
-      translateY: translate.interpolate({
-        inputRange: [0, 1],
-        outputRange: [fontSize / (2 - RATIO), -fontSize / 3]
-      })
-    },
-    {
-      translateX: translate.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, (-width * (1 - RATIO)) / 2]
-      })
-    },
-    {
-      scale: translate.interpolate({
-        inputRange: [0, 1],
-        outputRange: [1, RATIO]
-      })
-    }
-  ]
-});
-
-const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start'
-  },
-  label: {
-    textAlignVertical: 'top',
-    justifyContent: 'flex-start',
-    alignItems: 'flex-start'
-  }
-});
-
-export default styles;

package/lib/components/MultipleFilePicker/components/Input/components/Underline/index.js

@@ -1,80 +0,0 @@
-import React, { Component } from 'react';
-import { Animated, PixelRatio, View } from 'react-native';
-import PropTypes from 'prop-types';
-
-import { withTheme, themeType } from '../../../../../../theming';
-import { DURATION } from '../../constants';
-
-import styles, { getAnimatedStyles, getUnderlineBaseStyle } from './styles';
-
-class Underline extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      color: new Animated.Value(props.error ? 0 : 1),
-      scale: new Animated.Value(0)
-    };
-  }
-
-  componentDidMount() {
-    const { active } = this.props;
-    const { scale } = this.state;
-
-    if (active) {
-      scale.setValue(1);
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const { active, error } = this.props;
-
-    if (prevProps.active && !active) this.scale(0);
-    else if (!prevProps.active && active) this.scale(1);
-    if (error && !prevProps.error) this.color(0);
-    else if (!error && prevProps.error) this.color(1);
-  }
-
-  color = toValue => {
-    const { color } = this.state;
-    Animated.timing(color, {
-      duration: 115,
-      toValue
-    }).start();
-  };
-
-  scale = toValue => {
-    const { scale } = this.state;
-    Animated.timing(scale, {
-      toValue,
-      duration: DURATION
-    }).start();
-  };
-
-  render() {
-    const { activeColor, errorColor, inactiveColor, height, theme, disabled } = this.props;
-    const { color, scale } = this.state;
-
-    const animatedStyle = getAnimatedStyles(color, scale, theme, activeColor, errorColor);
-    const baseUnderlineStyle = getUnderlineBaseStyle(theme, disabled, inactiveColor);
-
-    return (
-      <View style={[styles.baseSytle, { height: PixelRatio.roundToNearestPixel(height) }]}>
-        <View style={[styles.expand, baseUnderlineStyle]} />
-        <Animated.View style={[styles.absolute, animatedStyle]} />
-      </View>
-    );
-  }
-}
-
-Underline.propTypes = {
-  activeColor: PropTypes.string,
-  error: PropTypes.bool,
-  errorColor: PropTypes.string,
-  inactiveColor: PropTypes.string,
-  height: PropTypes.number,
-  theme: themeType,
-  disabled: PropTypes.bool,
-  active: PropTypes.bool
-};
-
-export default withTheme(Underline);

package/lib/components/MultipleFilePicker/components/Input/components/Underline/styles.js

@@ -1,39 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  baseSytle: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  expand: {
-    flex: 1
-  },
-  absolute: {
-    ...StyleSheet.absoluteFillObject
-  }
-});
-
-export const getAnimatedStyles = (color, value, theme, activeColor, errorColor) => ({
-  backgroundColor: color.interpolate({
-    inputRange: [0, 1],
-    outputRange: [errorColor || theme.colors.error, activeColor || theme.colors.primary]
-  }),
-  transform: [
-    { scaleX: value },
-    {
-      scaleY: value.interpolate({
-        inputRange: [0, 1],
-        outputRange: [1, 2]
-      })
-    }
-  ],
-  opacity: value
-});
-
-export const getUnderlineBaseStyle = (theme, disabled, inactiveColor) => ({
-  backgroundColor: disabled ? theme.colors.disabled : inactiveColor
-});
-
-export default styles;

package/lib/components/MultipleFilePicker/components/Input/constants.js

@@ -1,2 +0,0 @@
-export const DURATION = 200;
-export const RATIO = 0.8;

package/lib/components/MultipleFilePicker/components/Input/index.js

@@ -1,299 +0,0 @@
-import React, { PureComponent, createRef } from 'react';
-import { TextInput, Text, TouchableWithoutFeedback, View } from 'react-native';
-
-import CaptionLabel from '../../../CaptionLabel';
-import Icon from '../../../Icon';
-import IconButton from '../../../IconButton';
-import { DEFAULT_ICON_SIZE } from '../../../Icon/constants';
-import { withTheme } from '../../../../theming';
-import UTTooltip from '../../../UTTooltip';
-import { ICON_MARGIN } from '../../../IconButton/styles';
-
-import ShowPassword from './components/ShowPassword';
-import Title from './components/Title';
-import Underline from './components/Underline';
-import propTypes from './propTypes';
-import styles, { INPUT_ICON_MARGIN } from './styles';
-import { RATIO } from './constants';
-
-class Input extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      focused: false,
-      passwordVisible: false,
-      showPlaceholder: false
-    };
-
-    this.textInput = createRef();
-  }
-
-  getContainerStyle() {
-    const { backgroundColor, theme, containerButtonPadding, containerPadding, maxWidth, minHeight } =
-      this.props;
-    return {
-      backgroundColor: backgroundColor || theme.colors.inputBackground,
-      paddingHorizontal: containerButtonPadding || containerPadding,
-      paddingVertical: containerPadding,
-      maxWidth,
-      minHeight
-    };
-  }
-
-  getCaptionStyle = () => {
-    const { iconSize, leadingIcon, trailingIcon } = this.props;
-    const marginLeft = leadingIcon ? 2 * INPUT_ICON_MARGIN + iconSize : INPUT_ICON_MARGIN;
-    const marginRight = trailingIcon ? 2 * INPUT_ICON_MARGIN + iconSize : INPUT_ICON_MARGIN;
-
-    return {
-      marginLeft,
-      marginRight
-    };
-  };
-
-  getInputStyle() {
-    const { textStyles, theme, disabledTextStyles } = this.props;
-    const additionalStyle = { flex: 1 };
-
-    return [
-      {
-        fontSize: theme.fonts.fontSizes.base,
-        fontFamily: theme.fonts.fontFamily,
-        color: theme.fonts.fontColor
-      },
-      textStyles,
-      this.isDisabled() && disabledTextStyles,
-      additionalStyle
-    ];
-  }
-
-  getPaddingStyle() {
-    const { theme } = this.props;
-
-    return {
-      paddingBottom: theme.fonts.fontSizes.base * (1 - RATIO),
-      paddingTop: theme.fonts.fontSizes.base * RATIO
-    };
-  }
-
-  isDisabled = () => {
-    const { disabled, editable } = this.props;
-
-    return !editable || disabled;
-  };
-
-  composeRefs = ref => {
-    const { inputRef } = this.props;
-    if (inputRef) {
-      if (typeof inputRef === 'function') inputRef(ref);
-      else inputRef.current = ref;
-    }
-    this.textInput.current = ref;
-  };
-
-  handleFocus = event => {
-    const { onFocus } = this.props;
-    this.setState({ focused: true });
-    if (onFocus) {
-      onFocus(event);
-    }
-  };
-
-  focus = () => {
-    if (this.textInput && this.textInput.current) {
-      this.textInput.current.focus();
-    }
-  };
-
-  togglePasswordVisibility = () =>
-    this.setState(state => ({
-      passwordVisible: !state.passwordVisible
-    }));
-
-  toggleShowPlaceholder = () =>
-    this.setState(state => ({
-      showPlaceholder: !state.showPlaceholder
-    }));
-
-  handleBlur = event => {
-    const { onBlur } = this.props;
-
-    this.setState({ focused: false });
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-
-  render() {
-    const { focused, passwordVisible, showPlaceholder } = this.state;
-    const {
-      activeColor,
-      backgroundColor,
-      caption,
-      captionProps,
-      containerStyle,
-      error,
-      errorColor,
-      fileSize,
-      iconColor,
-      iconSize,
-      inactiveColor,
-      leadingIcon,
-      multiline,
-      onChange,
-      onSubmit,
-      placeholder,
-      placeholderTextColor,
-      secureTextEntry,
-      showEye,
-      textStyles,
-      theme,
-      title,
-      trailingIcon,
-      underlineHeight,
-      value,
-      withValueColor,
-      textColor,
-      titleActiveColor,
-      tooltip,
-      tooltipProps,
-      tooltipIconProps,
-      ...textInputProps
-    } = this.props;
-
-    const placeholderText = !title || (focused && showPlaceholder) ? placeholder : '';
-    const hasError = !!error;
-    const hasValue = !!value;
-    const active = hasError || focused;
-    const finalActiveColor = activeColor || theme.colors.primary;
-    const finalTitleActiveColor = titleActiveColor || finalActiveColor;
-    const finalInactiveColor = inactiveColor || theme.fonts.fontColor;
-    const paddingStyle = this.getPaddingStyle();
-    const inputStyle = !textStyles ? styles.input : {};
-
-    return (
-      <View style={[styles.root, { minHeight: theme.fonts.fontSizes.base * (2 + RATIO) }, containerStyle]}>
-        <View style={styles.withTooltipContainer}>
-          <TouchableWithoutFeedback disabled={this.isDisabled()} onPress={this.focus}>
-            <View style={[styles.container, this.getContainerStyle(), containerStyle]}>
-              <View>
-                {trailingIcon && (
-                  <Icon
-                    color={iconColor}
-                    size={iconSize}
-                    width={iconSize}
-                    height={iconSize}
-                    style={[styles.trailingIcon, paddingStyle.paddingTop]}
-                    {...trailingIcon}
-                  />
-                )}
-              </View>
-              <View style={[styles.innerContainer]}>
-                <TextInput
-                  {...textInputProps}
-                  allowFontScaling={false}
-                  editable={!this.isDisabled()}
-                  multiline={multiline}
-                  onBlur={this.handleBlur}
-                  onFocus={this.handleFocus}
-                  onSubmitEditing={onSubmit}
-                  onChangeText={onChange}
-                  placeholder={placeholderText}
-                  placeholderTextColor={placeholderTextColor}
-                  ref={this.composeRefs}
-                  secureTextEntry={secureTextEntry && !passwordVisible}
-                  underlineColorAndroid="transparent"
-                  style={[inputStyle, this.getInputStyle(), { color: textColor }]}
-                  value={value}
-                />
-                {fileSize && <Text style={styles.sizeText}>{fileSize}</Text>}
-                <Title
-                  active={focused || hasValue}
-                  activeColor={finalTitleActiveColor}
-                  disabled={this.isDisabled()}
-                  error={hasError}
-                  errorColor={errorColor}
-                  focused={focused}
-                  fontSize={theme.fonts.fontSizes.base}
-                  inactiveColor={finalInactiveColor}
-                  onAnimationEnd={this.toggleShowPlaceholder}
-                  withValueColor={withValueColor}
-                >
-                  {title}
-                </Title>
-              </View>
-              <View style={{ paddingBottom: paddingStyle.paddingBottom }}>
-                {secureTextEntry && showEye && (
-                  <ShowPassword
-                    color={iconColor}
-                    onShowPassword={this.togglePasswordVisibility}
-                    passwordVisible={passwordVisible}
-                    size={iconSize}
-                  />
-                )}
-              </View>
-              <View>
-                {leadingIcon && (
-                  <IconButton
-                    color={iconColor}
-                    size={iconSize}
-                    width={iconSize}
-                    height={iconSize}
-                    style={paddingStyle.paddingTop}
-                    {...leadingIcon}
-                  />
-                )}
-              </View>
-              <Underline
-                active={active}
-                activeColor={activeColor}
-                disabled={this.isDisabled()}
-                error={hasError}
-                errorColor={errorColor}
-                height={underlineHeight}
-                inactiveColor={(hasValue && withValueColor) || finalInactiveColor}
-              />
-            </View>
-          </TouchableWithoutFeedback>
-          {!!tooltip && (
-            <View
-              style={{
-                ...styles.tooltipContainer,
-                height: ICON_MARGIN + iconSize,
-                paddingBottom: paddingStyle.paddingBottom,
-                marginBottom: underlineHeight
-              }}
-            >
-              <UTTooltip content={tooltip} position="left" {...tooltipProps}>
-                <Icon name="questioncircleo" type="antdesign" size={25} {...tooltipIconProps} />
-              </UTTooltip>
-            </View>
-          )}
-        </View>
-
-        <CaptionLabel
-          color={activeColor}
-          error={error}
-          errorColor={errorColor}
-          style={this.getCaptionStyle()}
-          {...captionProps}
-        >
-          {caption}
-        </CaptionLabel>
-      </View>
-    );
-  }
-}
-
-Input.propTypes = propTypes;
-
-Input.defaultProps = {
-  autoCorrect: false,
-  editable: true,
-  iconSize: DEFAULT_ICON_SIZE,
-  underlineHeight: 1,
-  defaultContainerPadding: INPUT_ICON_MARGIN
-};
-
-export default withTheme(Input);