@widergy/mobile-ui 1.27.0 → 1.28.0

package/lib/components/UTCheckList/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 
+import { BUTTON_VARIANT } from '../UTCheckBox/constants';
 import { formatErrorToValidation } from '../UTValidation/utils';
 import UTCheckBox from '../UTCheckBox';
 import UTFieldLabel from '../UTFieldLabel';
@@ -9,7 +10,7 @@ import UTValidation from '../UTValidation';
 import { keyExtractor, isChecked, convertIfIsString, getPropValueBasedOnVariant } from './utils';
 import styles from './styles';
 import { defaultProps, propTypes } from './proptypes';
-import { BUTTON_VARIANT, SPACING } from './constants';
+import { SPACING } from './constants';
 
 const UTCheckList = ({
   error,
@@ -54,7 +55,7 @@ const UTCheckList = ({
   );
 
   const handleChange = useCallback(
-    receivedValue => () => {
+    receivedValue => {
       if (isSimple) {
         onChange([receivedValue]);
       } else {
@@ -89,10 +90,10 @@ const UTCheckList = ({
       >
         {showSelectAll && !isSimple && (
           <UTCheckBox
-            checked={areAllSelected}
+            value={areAllSelected}
             indeterminate={isIndeterminate}
             title={selectAllLabel}
-            onPress={handleCheckAll}
+            onChange={handleCheckAll}
             reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}
             style={style.selectAll}
@@ -102,11 +103,11 @@ const UTCheckList = ({
         {options?.map((item, index) => (
           <UTCheckBox
             isSimple={isSimple}
-            checked={isChecked(item, value)}
+            value={isChecked(item, value)}
             disabled={item.disabled}
             key={keyExtractor(item, index)}
             title={item.label}
-            onPress={handleChange(item.value)}
+            onChange={() => handleChange(item.value)}
             reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}
             style={style.item}

package/lib/components/UTCheckList/styles.js

@@ -11,7 +11,8 @@ export default StyleSheet.create({
   },
   checkboxesContainer: {
     alignSelf: 'flex-start',
-    rowGap: SPACING.LARGE
+    rowGap: SPACING.LARGE,
+    width: '100%'
   },
   container: {
     rowGap: SPACING.LARGE

package/lib/components/UTCheckList/utils.js

@@ -1,11 +1,11 @@
 import { isString } from 'lodash';
 
-import { BUTTON_VARIANT } from './constants';
+import { BUTTON_VARIANT } from '../UTCheckBox/constants';
 
 export const keyExtractor = (_, index) => `CB-${index}`;
 
 export const isChecked = (item, inputValue) =>
-  !!inputValue?.find(elem => elem === item.value) || (item.disabled && item.checked);
+  (inputValue && !!inputValue?.find(elem => elem === item.value)) || (item.disabled && item.checked);
 
 export const convertIfIsString = value =>
   isString(value) ? (value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"'))) : value;

package/lib/components/UTFieldLabel/index.js

@@ -7,9 +7,9 @@ import UTLabel from '../UTLabel';
 import { REQUIRED_LABEL } from './constants';
 import styles from './styles';
 
-const UTFieldLabel = ({ children, colorTheme, required, style, variant, weight }) => (
+const UTFieldLabel = ({ children, colorTheme, required, style, variant, weight, withMarkdown }) => (
   <View style={[styles.label, style]}>
-    <UTLabel colorTheme={colorTheme} variant={variant}>
+    <UTLabel colorTheme={colorTheme} variant={variant} withMarkdown={withMarkdown}>
       {children}
     </UTLabel>
     {required && (
@@ -24,7 +24,8 @@ UTFieldLabel.propTypes = {
   colorTheme: string,
   required: bool,
   variant: string,
-  weight: string
+  weight: string,
+  withMarkdown: bool
 };
 
 export default UTFieldLabel;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [

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;