@widergy/mobile-ui 1.27.0 → 1.28.0

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