@widergy/mobile-ui 1.27.1 → 1.28.0

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);

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

@@ -1,43 +0,0 @@
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import { bool, func, instanceOf, number, oneOfType, shape, string } from 'prop-types';
-
-import captionPropTypes from '../../../CaptionLabel/propTypes';
-import iconPropTypes from '../../../Icon/propTypes';
-import iconButtonPropTypes from '../../../IconButton/propTypes';
-import { themeType } from '../../../../theming';
-
-export default {
-  activeColor: string,
-  autoCorrect: bool,
-  backgroundColor: string,
-  caption: string,
-  captionProps: shape(captionPropTypes),
-  containerStyle: ViewPropTypes.style,
-  containerPadding: number,
-  disabled: bool,
-  editable: bool,
-  disabledTextStyles: ViewPropTypes.style,
-  titleActiveColor: string,
-  error: oneOfType([bool, string]),
-  errorColor: string,
-  iconColor: string,
-  iconSize: number,
-  inactiveColor: string,
-  inputRef: oneOfType([func, instanceOf(Object)]),
-  leadingIcon: shape(iconPropTypes),
-  multiline: bool,
-  onBlur: func,
-  onChange: func,
-  onFocus: func,
-  onSubmit: func,
-  placeholder: string,
-  secureTextEntry: bool,
-  showEye: bool,
-  textStyles: ViewPropTypes.style,
-  title: string,
-  theme: themeType,
-  trailingIcon: shape(iconButtonPropTypes),
-  underlineHeight: number,
-  value: string,
-  withValueColor: string
-};

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

@@ -1,47 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-import {
-  portraitModerateHorizontalScale,
-  portraitModerateVerticalScale
-} from '../../../../utils/portraitScalingUtils';
-
-export const INPUT_ICON_MARGIN = portraitModerateHorizontalScale(5);
-
-export default StyleSheet.create({
-  root: {
-    flex: 1
-  },
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    borderTopLeftRadius: 3,
-    borderTopRightRadius: 3,
-    flexDirection: 'row',
-    paddingTop: portraitModerateVerticalScale(4)
-  },
-  innerContainer: {
-    flex: 1,
-    justifyContent: 'flex-start'
-  },
-  input: {
-    flex: 1,
-    padding: 0,
-    textAlignVertical: 'top'
-  },
-  leadingIcon: {
-    paddingBottom: INPUT_ICON_MARGIN
-  },
-  sizeText: { paddingHorizontal: 8, paddingVertical: 0 },
-  trailingIcon: {
-    marginBottom: 1 / INPUT_ICON_MARGIN,
-    marginRight: 1 / INPUT_ICON_MARGIN
-  },
-  withTooltipContainer: {
-    flexDirection: 'row'
-  },
-  tooltipContainer: {
-    alignSelf: 'flex-end',
-    justifyContent: 'center',
-    paddingLeft: 10
-  }
-});