@widergy/mobile-ui 1.18.1 → 1.18.3

package/lib/components/UTTextInput/versions/V1/components/TextInputField/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { bool, elementType, func, instanceOf, number, oneOfType, shape, string } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, elementType, func, instanceOf, number, object, oneOfType, shape, string } from 'prop-types';
 
 import UTBaseInputField from '../../../../../UTBaseInputField';
 import { COMPONENT_KEYS } from '../../../../../UTBaseInputField/constants';
@@ -12,13 +11,13 @@ const TextInputField = ({
   disabled,
   error,
   id,
-  input,
   inputRef,
   inputSize,
   LeftIcon,
   maxLength,
   maxRows,
   onBlur,
+  onChange,
   onFocus,
   onSubmitEditing,
   placeholder,
@@ -30,7 +29,8 @@ const TextInputField = ({
   style,
   suffix,
   tooltip,
-  type
+  type,
+  value
 }) => {
   const leftAdornments = [
     { name: COMPONENT_KEYS.ICON, props: { Icon: LeftIcon } },
@@ -48,15 +48,15 @@ const TextInputField = ({
     <UTBaseInputField
       alwaysShowPlaceholder={alwaysShowPlaceholder}
       blurOnSubmit={blurOnSubmit}
-      disabled={disabled}
+      disabled={disabled && !readOnly}
       error={error}
       id={id}
-      input={input}
       inputSize={inputSize}
       leftAdornments={leftAdornments}
       maxLength={maxLength}
       maxRows={maxRows}
       onBlur={onBlur}
+      onChange={onChange}
       onFocus={onFocus}
       onSubmitEditing={onSubmitEditing}
       placeholder={placeholder}
@@ -67,6 +67,7 @@ const TextInputField = ({
       showCharacterCount={showCharacterCount}
       style={style}
       type={type}
+      value={value}
     />
   );
 };
@@ -80,16 +81,13 @@ TextInputField.propTypes = {
   disabled: bool,
   error: string,
   id: oneOfType([number, string]),
-  input: shape({
-    value: string,
-    onChange: func
-  }),
   inputRef: oneOfType([func, instanceOf(Object)]),
   inputSize: string,
   LeftIcon: elementType,
   maxLength: number,
   maxRows: number,
   onBlur: func,
+  onChange: func,
   onFocus: func,
   onSubmitEditing: func,
   placeholder: string,
@@ -99,13 +97,14 @@ TextInputField.propTypes = {
   RightIcon: elementType,
   showCharacterCount: bool,
   style: shape({
-    container: ViewPropTypes.style,
-    input: ViewPropTypes.style,
-    root: ViewPropTypes.style
+    container: object,
+    input: object,
+    root: object
   }),
   suffix: string,
   tooltip: string,
-  type: string
+  type: string,
+  value: string
 };
 
 export default TextInputField;

package/lib/components/UTTextInput/versions/V1/index.js

@@ -19,15 +19,15 @@ const UTTextInput = ({
   error,
   helpText,
   id,
-  input,
   inputRef,
   inputSize,
-  label,
-  labelVariant,
+  title,
+  titleVariant,
   LeftIcon,
   maxLength,
   maxRows,
   onBlur,
+  onChange,
   onFocus,
   onSubmitEditing,
   placeholder,
@@ -41,10 +41,11 @@ const UTTextInput = ({
   suffix,
   tooltip,
   type,
-  validations
+  validations,
+  value
 }) => {
-  const labelColorTheme = readOnly ? 'gray' : 'dark';
-  const labelComponentVariant = labelVariant === SIZES.SMALL ? 'small' : 'body';
+  const titleColorTheme = readOnly ? 'gray' : 'dark';
+  const titleComponentVariant = titleVariant === SIZES.SMALL ? 'small' : 'body';
 
   const validationData = useMemo(
     () => validations || (error && formatErrorToValidation(error)),
@@ -53,9 +54,9 @@ const UTTextInput = ({
 
   return (
     <View style={[styles.container, style.root]}>
-      {label && (
-        <UTFieldLabel colorTheme={labelColorTheme} required={required} variant={labelComponentVariant}>
-          {label}
+      {title && (
+        <UTFieldLabel colorTheme={titleColorTheme} required={required} variant={titleComponentVariant}>
+          {title}
         </UTFieldLabel>
       )}
       <TextInputField
@@ -65,13 +66,13 @@ const UTTextInput = ({
         disabled={disabled}
         error={error}
         id={id}
-        input={input}
         inputRef={inputRef}
         inputSize={inputSize}
         LeftIcon={LeftIcon}
         maxLength={maxLength}
         maxRows={maxRows}
         onBlur={onBlur}
+        onChange={onChange}
         onFocus={onFocus}
         onSubmitEditing={onSubmitEditing}
         placeholder={placeholder}
@@ -84,6 +85,7 @@ const UTTextInput = ({
         suffix={suffix}
         tooltip={tooltip}
         type={type}
+        value={value}
       />
       {helpText && (
         <UTLabel colorTheme="gray" variant="small">

package/lib/components/UTTextInput/versions/V1/proptypes.js

@@ -1,41 +1,39 @@
-import { bool, elementType, func, instanceOf, number, oneOfType, shape, string } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { bool, elementType, func, instanceOf, number, object, oneOfType, shape, string } from 'prop-types';
 
 import { validationDataProptypes } from '../../../UTValidation/constants';
 
 import { SIZES } from './constants';
 
 export const defaultProps = {
-  input: {
-    value: [],
-    onChange: () => {}
-  },
   inputSize: SIZES.LARGE,
-  labelVariant: SIZES.LARGE,
   maxRows: 1,
-  style: {}
+  onChange: () => {},
+  style: {},
+  titleVariant: SIZES.LARGE,
+  value: null
 };
 
 export const propTypes = {
-  action: shape({ icon: elementType, action: func, colorTheme: string, text: string }),
+  action: shape({
+    action: func,
+    colorTheme: string,
+    icon: elementType,
+    text: string
+  }),
   alwaysShowPlaceholder: bool,
   blurOnSubmit: bool,
   disabled: bool,
   error: string,
   helpText: string,
   id: oneOfType([number, string]),
-  input: shape({
-    value: string,
-    onChange: func
-  }),
   inputRef: oneOfType([func, instanceOf(Object)]),
   inputSize: string,
-  label: string,
-  labelVariant: string,
+  keyboardType: string,
   LeftIcon: elementType,
   maxLength: number,
   maxRows: number,
   onBlur: func,
+  onChange: func,
   onFocus: func,
   onSubmitEditing: func,
   placeholder: string,
@@ -46,12 +44,15 @@ export const propTypes = {
   RightIcon: elementType,
   showCharacterCount: bool,
   style: shape({
-    container: ViewPropTypes.style,
-    input: ViewPropTypes.style,
-    root: ViewPropTypes.style
+    container: object,
+    input: object,
+    root: object
   }),
   suffix: string,
+  title: string,
+  titleVariant: string,
   tooltip: string,
   type: string,
-  validations: validationDataProptypes
+  validations: validationDataProptypes,
+  value: string
 };

package/lib/components/UTValidation/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { isEmpty } from 'lodash';
 import { View } from 'react-native';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { object } from 'prop-types';
 
 import { useTheme } from '../../theming';
 import UTIcon from '../UTIcon';
@@ -51,7 +51,7 @@ const UTValidation = ({ style, validationData }) => {
                     )}
                   </View>
                 )}
-                <UTLabel colorTheme={STATUS_COLOR_MAPPER[itemStatus]} variant="small">
+                <UTLabel colorTheme={STATUS_COLOR_MAPPER[itemStatus]} variant="small" style={styles.itemText}>
                   {text}
                 </UTLabel>
               </View>
@@ -66,7 +66,7 @@ const UTValidation = ({ style, validationData }) => {
 UTValidation.defaultProps = DEFAULT_PROPS;
 
 UTValidation.propTypes = {
-  style: ViewPropTypes.style,
+  style: object,
   validationData: validationDataProptypes
 };
 

package/lib/components/UTValidation/styles.js

@@ -16,6 +16,9 @@ export default StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row'
   },
+  itemText: {
+    flex: 1
+  },
   itemsContainer: {
     rowGap: 8
   },

package/lib/constants/inputs.js

@@ -1,4 +1,4 @@
-export const LABEL_VARIANTS = {
+export const TITLE_VARIANTS = {
   large: 'body',
   small: 'small'
 };

package/package.json

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