@widergy/mobile-ui 1.6.0 → 1.8.0

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

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

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

@@ -0,0 +1,47 @@
+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
+  }
+});

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

@@ -0,0 +1,95 @@
+import React, { Fragment } from 'react';
+import { ImagePropTypes, ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { Text, View } from 'react-native';
+import { arrayOf, string, bool, oneOfType, shape, func } from 'prop-types';
+
+import Label from '../../../Label';
+import Touchable from '../../../Touchable';
+import Input from '../Input';
+import { withTheme, themeType } from '../../../../theming';
+
+import styles from './styles';
+
+const Picker = ({
+  icon,
+  error,
+  onAdd,
+  filePlaceholder,
+  uploadedFiles,
+  helpText,
+  pickerText,
+  showButton,
+  title,
+  theme,
+  withMarkdownTitle,
+  markdownStyles,
+  disabled = false,
+  UploadIcon
+}) => (
+  <>
+    {!!title && (
+      <Label
+        useMarkdown={withMarkdownTitle}
+        {...theme.forms.fieldsTitleProps}
+        markdownStyles={markdownStyles}
+      >
+        {title}
+      </Label>
+    )}
+    <View style={[styles.fieldInput, { borderColor: theme.picker.accentColor }]}>
+      <UploadIcon height={64} width={64} fill={theme.picker.trashIconColor} />
+      <Touchable borderless style={styles.touchable} disabled={disabled} onPress={onAdd}>
+        <Input
+          backgroundColor={theme.picker.inputBackgroundColor}
+          maxWidth={styles.containerInput.width}
+          minHeight={styles.containerInput.height}
+          value={uploadedFiles}
+          editable={false}
+          placeholder={filePlaceholder}
+          placeholderTextColor={theme.picker.buttonTextColor}
+          disabledTextStyles={{ color: theme.colors.disabled }}
+          trailingIcon={
+            showButton && {
+              name: icon,
+              color: theme.picker.buttonTextColor,
+              onPress: onAdd,
+              type: 'feather',
+              disabled
+            }
+          }
+          error={error}
+          containerStyle={styles.containerStyle}
+          containerPadding={18}
+          textStyles={styles.textStyles}
+          underlineHeight={0}
+        />
+      </Touchable>
+      <Text style={styles.pickerText}>{pickerText}</Text>
+    </View>
+    <Text style={styles.helpText}>{helpText}</Text>
+  </>
+);
+
+Picker.propTypes = {
+  icon: string.isRequired,
+  error: oneOfType([string, bool]),
+  onAdd: func.isRequired,
+  onDelete: func.isRequired,
+  filePlaceholder: string,
+  uploadedFiles: arrayOf(string),
+  title: string,
+  showButton: bool,
+  theme: themeType,
+  withMarkdownTitle: bool,
+  markdownStyles: shape({ ViewPropTypes }),
+  disabled: bool,
+  helpText: string,
+  pickerText: string,
+  UploadIcon: ImagePropTypes
+};
+
+Picker.defaultProps = {
+  showButton: true
+};
+
+export default withTheme(Picker);

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

@@ -0,0 +1,47 @@
+import { StyleSheet } from 'react-native';
+
+import { portraitVerticalScale } from '../../../../utils/portraitScalingUtils';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  containerInput: {
+    height: '100%',
+    width: '100%'
+  },
+  containerStyle: {
+    flex: 1
+  },
+  fieldInput: {
+    flex: 1,
+    alignItems: 'center',
+    borderRadius: 5,
+    borderStyle: 'dashed',
+    borderWidth: 1,
+    height: 'auto',
+    marginVertical: 10,
+    paddingBottom: portraitVerticalScale(24),
+    paddingTop: portraitVerticalScale(16),
+    width: '100%'
+  },
+  pickerText: {
+    textAlign: 'center'
+  },
+  helpText: {
+    textAlign: 'center',
+    marginBottom: 10
+  },
+  textStyles: {
+    flex: 1,
+    padding: 0,
+    textAlignVertical: 'center',
+    margin: 5
+  },
+  touchable: {
+    borderRadius: 4,
+    margin: 7,
+    height: 38,
+    width: '50%'
+  }
+});

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

@@ -0,0 +1,140 @@
+import React, { Fragment } from 'react';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { Text, View } from 'react-native';
+import { string, bool, oneOfType, shape, func, arrayOf } from 'prop-types';
+
+import { withTheme, themeType } from '../../../../theming';
+import Touchable from '../../../Touchable';
+import Input from '../Input';
+import Label from '../../../Label';
+
+import { bytesFormater } from './utils';
+import styles from './styles';
+
+const UploadedFiles = ({
+  disabled = false,
+  error,
+  filePlaceholder,
+  helpText,
+  icon,
+  markdownStyles,
+  onAdd,
+  onDelete,
+  pickerText,
+  showButton,
+  theme,
+  title,
+  uploadedFiles,
+  withMarkdownTitle
+}) => (
+  <>
+    {!!title && (
+      <Label
+        useMarkdown={withMarkdownTitle}
+        {...theme.forms.fieldsTitleProps}
+        markdownStyles={markdownStyles}
+      >
+        {title}
+      </Label>
+    )}
+    <View style={[styles.fieldInput, { borderColor: theme.picker.accentColor }]}>
+      {uploadedFiles.map((file, index) => {
+        return (
+          <Touchable
+            key={`${file.name}-${Math.random()}`}
+            borderless
+            style={styles.touchable}
+            disabled={disabled}
+          >
+            <Input
+              backgroundColor="transparent"
+              maxWidth={styles.containerInput.width}
+              minHeight={styles.containerInput.height}
+              value={file.name}
+              editable={false}
+              fileSize={bytesFormater(file.size)}
+              placeholder={filePlaceholder}
+              disabledTextStyles={{ color: theme.colors.disabled }}
+              trailingIcon={
+                showButton && {
+                  name: 'check',
+                  color: theme.picker.accentColor,
+                  type: 'feather',
+                  disabled
+                }
+              }
+              leadingIcon={
+                showButton && {
+                  name: 'trash-2',
+                  color: theme.picker.trashIconColor,
+                  type: 'feather',
+                  onPress: () => onDelete(index),
+                  disabled
+                }
+              }
+              error={error}
+              containerStyle={styles.containerStyle}
+              textStyles={styles.textStyles}
+              containerPadding={styles.containerPadding.padding}
+              underlineHeight={0}
+              iconSize={32}
+              textColor={theme.picker.dark05}
+            />
+          </Touchable>
+        );
+      })}
+      <Touchable borderless style={styles.uploadTouchable} disabled={disabled} onPress={onAdd}>
+        <Input
+          backgroundColor={theme.picker.inputBackgroundColor}
+          maxWidth={styles.containerInput.width}
+          minHeight={38}
+          value={uploadedFiles}
+          editable={false}
+          placeholder={filePlaceholder}
+          placeholderTextColor={theme.picker.buttonTextColor}
+          disabledTextStyles={{ color: theme.colors.disabled }}
+          trailingIcon={
+            showButton && {
+              name: icon,
+              type: 'feather',
+              color: theme.picker.buttonTextColor,
+              onPress: onAdd,
+              disabled
+            }
+          }
+          error={error}
+          textStyles={styles.textButtonStyles}
+          containerButtonPadding={styles.containerButtonPadding.padding}
+          containerPadding={styles.containerPadding.padding}
+          underlineHeight={0}
+          iconSize={20}
+        />
+      </Touchable>
+      <Text style={styles.pickerText}>{pickerText}</Text>
+    </View>
+    <Text style={styles.helpText}>{helpText}</Text>
+  </>
+);
+
+UploadedFiles.propTypes = {
+  icon: string.isRequired,
+  error: oneOfType([string, bool]),
+  onAdd: func.isRequired,
+  onDelete: func.isRequired,
+  filePlaceholder: string,
+  uploadedFiles: arrayOf(string),
+  title: string,
+  showButton: bool,
+  theme: themeType,
+  withMarkdownTitle: bool,
+  markdownStyles: shape({ ViewPropTypes }),
+  disabled: bool,
+  helpText: string,
+  pickerText: string
+};
+
+UploadedFiles.defaultProps = {
+  showButton: true
+};
+
+export default withTheme(UploadedFiles);