@widergy/mobile-ui 1.27.1 → 1.28.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.28.1](https://github.com/widergy/mobile-ui/compare/v1.28.0...v1.28.1) (2024-10-15)
+
+
+### Bug Fixes
+
+* [UGC-934] text area fix ([#368](https://github.com/widergy/mobile-ui/issues/368)) ([32bcffc](https://github.com/widergy/mobile-ui/commit/32bcffc0e4b91e5c049fc548f3596bc7599a90ce))
+
+# [1.28.0](https://github.com/widergy/mobile-ui/compare/v1.27.1...v1.28.0) (2024-10-15)
+
+
+### Features
+
+* [EVE-4280] attachment list drawer ([#369](https://github.com/widergy/mobile-ui/issues/369)) ([c4570a7](https://github.com/widergy/mobile-ui/commit/c4570a79a683a758e581f537135137046f747064))
+
 ## [1.27.1](https://github.com/widergy/mobile-ui/compare/v1.27.0...v1.27.1) (2024-10-07)
 
 

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

@@ -1,95 +1,87 @@
-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 { string, bool, func, number, object, array } from 'prop-types';
+import { isEmpty } from 'lodash';
+import { View } from 'react-native';
+import React from 'react';
 
-import Label from '../../../Label';
-import Touchable from '../../../Touchable';
-import Input from '../Input';
-import { withTheme, themeType } from '../../../../theming';
+import UTLabel from '../../../UTLabel';
+import { withTheme } from '../../../../theming';
+import UploadedFile from '../UploadedFiles';
+import UTIcon from '../../../UTIcon';
+import UTButton from '../../../UTButton';
 
 import styles from './styles';
 
 const Picker = ({
-  icon,
+  maxFiles,
+  disabled = false,
   error,
-  onAdd,
   filePlaceholder,
-  uploadedFiles,
   helpText,
+  onAdd,
+  onDelete,
   pickerText,
-  showButton,
-  title,
   theme,
-  withMarkdownTitle,
-  markdownStyles,
-  disabled = false,
-  UploadIcon
+  title,
+  uploadedFiles
 }) => (
-  <Fragment>
-    {!!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 style={styles.container}>
+    <UTLabel>{title}</UTLabel>
+    <View style={styles.pickerContainer(error, theme)}>
+      {isEmpty(uploadedFiles) ? (
+        <UTIcon colorTheme="accent" name="IconCloudUpload" shade="03" size={64} />
+      ) : (
+        uploadedFiles.map((file, index) => (
+          <UploadedFile
+            disabled={disabled}
+            file={file}
+            filePlaceholder={filePlaceholder}
+            key={file.name}
+            onDelete={() => onDelete(index)}
+          />
+        ))
+      )}
+
+      {uploadedFiles.length < maxFiles && (
+        <UTButton
+          colorTheme="primary"
+          disabled={disabled}
+          Icon="IconUpload"
+          onPress={onAdd}
+          variant="semitransparent"
+        >
+          Subir archivo
+        </UTButton>
+      )}
+      <UTLabel colorTheme="gray" style={styles.pickerText} weight="medium">
+        {pickerText}
+      </UTLabel>
     </View>
-    <Text style={styles.helpText}>{helpText}</Text>
-  </Fragment>
+    <UTLabel colorTheme="gray">{helpText}</UTLabel>
+    {error && (
+      <View style={styles.error}>
+        <View style={[styles.errorIcon(theme)]}>
+          <UTIcon colorTheme="error" name="IconX" size={16} />
+        </View>
+        <UTLabel colorTheme="error" style={styles.errorMessage} variant="small">
+          {error}
+        </UTLabel>
+      </View>
+    )}
+  </View>
 );
 
 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 }),
+  maxFiles: number,
   disabled: bool,
+  error: string,
+  filePlaceholder: string,
   helpText: string,
+  onAdd: func,
+  onDelete: func,
   pickerText: string,
-  UploadIcon: ImagePropTypes
-};
-
-Picker.defaultProps = {
-  showButton: true
+  theme: object,
+  title: string,
+  uploadedFiles: array
 };
 
 export default withTheme(Picker);

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

@@ -1,47 +1,39 @@
 import { StyleSheet } from 'react-native';
 
-import { portraitVerticalScale } from '../../../../utils/portraitScalingUtils';
-
 export default StyleSheet.create({
   container: {
-    flexDirection: 'row'
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8
   },
-  containerInput: {
-    height: '100%',
+  pickerContainer: (error, theme) => ({
+    alignItems: 'center',
+    borderColor: error ? theme.Palette?.error?.['04'] : theme.Palette?.light?.['05'],
+    borderRadius: 4,
+    borderStyle: error ? 'solid' : 'dashed',
+    borderWidth: error ? 2 : 1,
+    gap: 16,
+    padding: 16,
     width: '100%'
+  }),
+  error: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginTop: 4
   },
-  containerStyle: {
-    flex: 1
-  },
-  fieldInput: {
-    flex: 1,
+  errorIcon: theme => ({
     alignItems: 'center',
-    borderRadius: 5,
-    borderStyle: 'dashed',
-    borderWidth: 1,
-    height: 'auto',
-    marginVertical: 10,
-    paddingBottom: portraitVerticalScale(24),
-    paddingTop: portraitVerticalScale(16),
-    width: '100%'
+    backgroundColor: theme.Palette?.error?.['01'],
+    borderRadius: 100,
+    height: 20,
+    justifyContent: 'center',
+    marginRight: 8,
+    width: 20
+  }),
+  errorMessage: {
+    flex: 1
   },
   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

@@ -1,140 +1,38 @@
-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 { string, bool, func, object } from 'prop-types';
+import { View } from 'react-native';
+import React from 'react';
 
-import { withTheme, themeType } from '../../../../theming';
-import Touchable from '../../../Touchable';
-import Input from '../Input';
-import Label from '../../../Label';
+import { withTheme } from '../../../../theming';
+import Surface from '../../../Surface';
+import UTButton from '../../../UTButton';
+import UTIcon from '../../../UTIcon';
+import UTLabel from '../../../UTLabel';
 
 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
-}) => (
-  <Fragment>
-    {!!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>
-  </Fragment>
-);
+const UploadedFiles = ({ disabled = false, file, filePlaceholder, onDelete }) => {
+  return (
+    <Surface style={styles.container}>
+      <UTIcon name="IconCheck" size={32} colorTheme="accent" shade="04" />
+      <View style={styles.texts}>
+        <UTLabel numberOfLines={1} weight="medium">
+          {file.name || filePlaceholder}
+        </UTLabel>
+        <UTLabel colorTheme="gray" weight="medium">
+          {bytesFormater(file.size)}
+        </UTLabel>
+      </View>
+      {!disabled && <UTButton Icon="IconTrash" colorTheme="primary" variant="text" onPress={onDelete} />}
+    </Surface>
+  );
+};
 
 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
+  file: object,
+  filePlaceholder: string,
+  onDelete: func
 };
 
 export default withTheme(UploadedFiles);

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

@@ -1,65 +1,16 @@
 import { StyleSheet } from 'react-native';
 
-import { portraitHorizontalScale, portraitVerticalScale } from '../../../../utils/portraitScalingUtils';
-
 export default StyleSheet.create({
   container: {
-    flexDirection: 'row'
-  },
-  containerInput: {
-    height: '100%',
-    width: '100%'
-  },
-  containerStyle: {
-    flex: 1,
-    shadowColor: '#E4E6EA',
-    elevation: 4
-  },
-  containerButtonPadding: {
-    padding: portraitHorizontalScale(65)
-  },
-  containerPadding: {
-    padding: portraitHorizontalScale(18)
-  },
-  fieldInput: {
-    borderRadius: 5,
-    borderStyle: 'dashed',
-    borderWidth: 1,
-    flex: 1,
-    height: 'auto',
-    paddingBottom: portraitVerticalScale(24),
-    paddingTop: portraitVerticalScale(16),
-    width: '100%',
-    marginVertical: 10
-  },
-  helpText: {
-    textAlign: 'center',
-    marginBottom: 10
-  },
-  pickerText: {
-    textAlign: 'center'
-  },
-  textStyles: {
-    marginLeft: 5,
-    marginTop: 16
-  },
-  textButtonStyles: {
-    flex: 1,
-    padding: 0,
-    textAlignVertical: 'center',
-    margin: 15
-  },
-  touchable: {
+    alignItems: 'center',
     borderRadius: 4,
-    paddingHorizontal: portraitHorizontalScale(12),
-    height: 80,
-    width: '100%'
+    flexDirection: 'row',
+    gap: 16,
+    padding: 16,
+    flexShrink: 1
   },
-  uploadTouchable: {
-    borderRadius: 4,
-    marginHorizontal: 16,
-    marginVertical: 10,
-    height: 38,
-    width: '90%'
+  texts: {
+    flex: 1,
+    flexGrow: 1
   }
 });

package/lib/components/MultipleFilePicker/constants.js

@@ -1,18 +1,4 @@
 // eslint-disable-next-line import/no-unresolved
-import DocumentPicker from 'react-native-document-picker';
-
 import { MEGABYTE } from '../../utils/fileUtils.js';
 
-export const FILE_UPLOAD_ICON = 'file-upload';
-
-export const UPLOAD_ICON = 'upload';
-
-export const CHECK_ICON = 'check';
-
-export const TRASH_ICON = 'trash-2';
-
-export const TYPE_ICON = 'feather';
-
-export const DEFAULT_ALLOWED_TYPES = [DocumentPicker.types.allFiles];
-
 export const DEFAULT_MAX_SIZE = 10 * MEGABYTE;