@widergy/mobile-ui 1.15.0 → 1.15.1

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

@@ -0,0 +1,171 @@
+import React, { useState, useCallback, useRef } from 'react';
+import { View, Pressable, ScrollView } from 'react-native';
+import isEmpty from 'lodash/isEmpty';
+
+import { COMPONENT_KEYS } from '../../../UTBaseInputField/constants';
+import UTBaseInputField from '../../../UTBaseInputField';
+import UTBottomSheet from '../../../UTBottomSheet';
+import UTCheckList from '../../../UTCheckList';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTLabel from '../../../UTLabel';
+import UTSearchField from '../../../UTSearchField';
+
+import { defaultProps, propTypes } from './proptypes';
+import styles from './styles';
+
+const UTSelect = ({
+  action,
+  alwaysShowPlaceholder,
+  closeButtonText,
+  helpText,
+  input,
+  isMultiple,
+  label,
+  noMatchesText,
+  options,
+  placeholder,
+  prefix,
+  required,
+  searchPlaceholder,
+  selectAllLabel,
+  showSelectAll,
+  style,
+  suffix
+}) => {
+  const [bottomSheetVisible, setBottomSheetVisible] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedOptions, setSelectedOptions] = useState(input.value || []);
+  const [sortedOptions, setSortedOptions] = useState(options);
+  const inputFieldRef = useRef(null);
+
+  const sortOptions = useCallback(() => {
+    const selectedOptionsList = options.filter(option => selectedOptions.includes(option.value));
+    const unselectedOptionsList = options.filter(option => !selectedOptions.includes(option.value));
+    setSortedOptions([...selectedOptionsList, ...unselectedOptionsList]);
+  }, [options, selectedOptions]);
+
+  const handleOpenBottomSheet = () => {
+    sortOptions();
+    setBottomSheetVisible(true);
+  };
+
+  const handleCloseBottomSheet = () => {
+    if (inputFieldRef.current) {
+      inputFieldRef.current.truncate();
+    }
+    setBottomSheetVisible(false);
+  };
+
+  const clearSelectedOptions = () => {
+    setSelectedOptions([]);
+    input.onChange([]);
+  };
+
+  const handleSelect = useCallback(
+    newValues => {
+      setSelectedOptions(newValues);
+      input.onChange(newValues);
+      if (!isMultiple) handleCloseBottomSheet();
+    },
+    [input, isMultiple]
+  );
+
+  const displayValue = selectedOptions
+    .map(optionValue => {
+      const option = options.find(o => o.value === optionValue);
+      return option ? option.label : '';
+    })
+    .join(', ');
+
+  const filteredOptions = sortedOptions.filter(option =>
+    option.label.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const clearAction = {
+    Icon: 'IconX',
+    onPress: clearSelectedOptions,
+    size: 'small'
+  };
+
+  const leftAdornments = [
+    ...(isMultiple && !isEmpty(selectedOptions)
+      ? [{ name: COMPONENT_KEYS.BADGE, props: { text: selectedOptions.length, colorTheme: 'identity' } }]
+      : []),
+    { name: COMPONENT_KEYS.PREFIX, props: { text: prefix } }
+  ];
+
+  const rightAdornments = [
+    { name: COMPONENT_KEYS.SUFFIX, props: { text: suffix } },
+    ...(displayValue ? [{ name: COMPONENT_KEYS.ACTION, props: { action: clearAction } }] : []),
+    { name: COMPONENT_KEYS.ICON, props: { Icon: 'IconChevronDown' } },
+    { name: COMPONENT_KEYS.ACTION, props: { action } }
+  ];
+
+  return (
+    <View>
+      <View style={[styles.container, style]}>
+        {label && (
+          <UTFieldLabel required={required} variant="body">
+            {label}
+          </UTFieldLabel>
+        )}
+        <Pressable onPress={handleOpenBottomSheet}>
+          <UTBaseInputField
+            ref={inputFieldRef}
+            alwaysShowPlaceholder={alwaysShowPlaceholder}
+            editable={false}
+            leftAdornments={leftAdornments}
+            placeholder={placeholder}
+            rightAdornments={rightAdornments}
+            input={{ value: displayValue }}
+            variant="button"
+          />
+        </Pressable>
+        {helpText && (
+          <UTLabel colorTheme="gray" variant="small">
+            {helpText}
+          </UTLabel>
+        )}
+      </View>
+      <UTBottomSheet
+        title={label}
+        description={helpText}
+        visible={bottomSheetVisible}
+        onClose={handleCloseBottomSheet}
+        buttonText={closeButtonText}
+      >
+        <View style={styles.bottomSheetBodyContainer}>
+          <UTSearchField
+            input={{
+              value: searchTerm,
+              onChange: setSearchTerm
+            }}
+            placeholder={searchPlaceholder}
+            variant="gray"
+          />
+          {isEmpty(filteredOptions) ? (
+            <UTLabel colorTheme="gray" style={styles.noMatchesText}>
+              {noMatchesText}
+            </UTLabel>
+          ) : (
+            <ScrollView keyboardShouldPersistTaps="handled">
+              <UTCheckList
+                showSelectAll={showSelectAll}
+                input={{ value: selectedOptions, onChange: handleSelect }}
+                options={filteredOptions}
+                isSimple={!isMultiple}
+                selectAllLabel={selectAllLabel}
+                variant="button"
+              />
+            </ScrollView>
+          )}
+        </View>
+      </UTBottomSheet>
+    </View>
+  );
+};
+
+UTSelect.defaultProps = defaultProps;
+UTSelect.propTypes = propTypes;
+
+export default UTSelect;

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

@@ -0,0 +1,45 @@
+import { arrayOf, bool, func, number, oneOfType, shape, string } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+export const defaultProps = {
+  alwaysShowPlaceholder: true,
+  input: {
+    value: [],
+    onChange: () => {}
+  },
+  showSelectAll: false,
+  isMultiple: false,
+  style: {}
+};
+
+export const propTypes = {
+  action: shape({
+    Icon: string,
+    onPress: func,
+    size: string
+  }),
+  alwaysShowPlaceholder: bool,
+  closeButtonText: string,
+  helpText: string,
+  input: shape({
+    value: arrayOf(oneOfType([string, number])),
+    onChange: func
+  }),
+  isMultiple: bool,
+  label: string,
+  noMatchesText: string,
+  options: arrayOf(
+    shape({
+      label: string,
+      value: oneOfType([string, number])
+    })
+  ),
+  placeholder: string,
+  prefix: string,
+  required: bool,
+  searchPlaceholder: string,
+  selectAllLabel: string,
+  showSelectAll: bool,
+  style: ViewPropTypes.style,
+  suffix: string
+};

package/lib/components/UTSelect/versions/V1/styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  bottomSheetBodyContainer: {
+    height: '100%',
+    rowGap: 16
+  },
+  container: {
+    rowGap: 8
+  },
+  noMatchesText: {
+    alignSelf: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 24
+  }
+});
+
+export default styles;

package/lib/components/UTTextArea/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import UTTextInput from '../UTTextInput';
-import propTypes from '../UTTextInput/versions/V1/proptypes';
+import { propTypes } from '../UTTextInput/versions/V1/proptypes';
 
 import { DEFAULT_PROPS } from './constants';
 

package/lib/components/UTTextInput/versions/V0/components/BaseInput/index.js

@@ -8,7 +8,7 @@ import React, {
   Fragment
 } from 'react';
 import _ from 'lodash';
-import { bool, elementType, func, oneOf, shape, string } from 'prop-types';
+import { bool, elementType, func, number, oneOfType, shape, string } from 'prop-types';
 import { TextInput } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
@@ -129,8 +129,8 @@ BaseInput.propTypes = {
   onChange: func.isRequired,
   disabled: bool,
   value: string,
-  id: string,
-  RightIcon: oneOf([shape({ name: string, type: string, color: string }), elementType]),
+  id: oneOfType([number, string]),
+  RightIcon: oneOfType([shape({ name: string, type: string, color: string }), elementType]),
   hiddenInput: bool,
   onRightIconPress: func,
   placeholder: string,

package/lib/components/UTTextInput/versions/V1/README.md

@@ -1,39 +1,41 @@
 # UTTextInput
 
-Component used for displaying a text input field with various customization options.
+## Description
+
+`UTTextInput` is a customizable text input component that supports various customization options such as icons, validation messages, and action buttons.
 
 ## Props
 
-| Name                  | Type        | Default   | Description                                                                                              |
-| --------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------- |
-| action                | object      |           | Action button configuration object.                                                                      |
-| alwaysShowPlaceholder | bool        | false     | Whether to always show the placeholder.                                                                  |
-| disabled              | bool        | false     | Disables the input field.                                                                                |
-| error                 | string      |           | Error message to be displayed.                                                                           |
-| helpText              | string      |           | Help text to be displayed below the input field.                                                         |
-| InputRef              | ref         |           | Reference to the input field.                                                                            |
-| inputSize             | string      | 'l'       | Size of the input field.                                                                                 |
-| label                 | string      |           | Label text for the input field.                                                                          |
-| labelVariant          | string      | 'l'       | Variant of the label.                                                                                    |
-| LeftIcon              | elementType |           | Icon to be displayed on the left side of the input field.                                                |
-| maxCount              | number      |           | Maximum number of characters allowed in the input field.                                                 |
-| maxRows               | number      | 1         | Maximum number of rows allowed in the input field.                                                       |
-| onBlur                | func        |           | Function to call when the input field loses focus.                                                       |
-| onChange              | func        |           | Function to call when the input field value changes.                                                     |
-| onFocus               | func        |           | Function to call when the input field gains focus.                                                       |
-| onSubmitEditing       | func        |           | Function to call when the input field is submitted.                                                      |
-| placeholder           | string      |           | Placeholder text for the input field.                                                                    |
-| prefix                | string      |           | Prefix text to be displayed inside the input field.                                                      |
-| readOnly              | bool        | false     | Makes the input field read-only.                                                                         |
-| required              | bool        | false     | Whether the input field is required.                                                                     |
-| returnKeyType         | string      | 'done'    | Determines the return key type on the keyboard.                                                          |
-| RightIcon             | elementType |           | Icon to be displayed on the right side of the input field.                                               |
-| style                 | object      |           | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |
-| suffix                | string      |           | Suffix text to be displayed inside the input field.                                                      |
-| tooltip               | string      |           | Tooltip text to be displayed.                                                                            |
-| type                  | string      | 'default' | Type of input (e.g., 'text', 'password', 'email').                                                       |
-| validations           | array       |           | Array of validation rules to be applied to the input field.                                              |
-| value                 | string      | ''        | Value of the input field.                                                                                |
+| Name                  | Type                                                                      | Default   | Description                                                                                              |
+| --------------------- | ------------------------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------- |
+| action                | object                                                                    |           | Action button configuration object.                                                                      |
+| alwaysShowPlaceholder | bool                                                                      | false     | Whether to always show the placeholder.                                                                  |
+| disabled              | bool                                                                      | false     | Disables the input field.                                                                                |
+| error                 | string                                                                    |           | Error message to be displayed.                                                                           |
+| helpText              | string                                                                    |           | Help text to be displayed below the input field.                                                         |
+| id                    | oneOfType([number, string])                                               |           | Unique identifier for the input field.                                                                   |
+| inputRef              | func                                                                      |           | Reference to the input field.                                                                            |
+| input                 | shape({ value: string.isRequired, onChange: func.isRequired }).isRequired |           | Input object containing the value and onChange handler.                                                  |
+| inputSize             | string                                                                    | 'large'   | Size of the input field. One of: `small`, `large`.                                                       |
+| label                 | string                                                                    |           | Label text for the input field.                                                                          |
+| labelVariant          | string                                                                    | 'large'   | Variant of the label.                                                                                    |
+| LeftIcon              | elementType                                                               |           | Icon to be displayed on the left side of the input field.                                                |
+| maxCount              | number                                                                    |           | Maximum number of characters allowed in the input field.                                                 |
+| maxRows               | number                                                                    | 1         | Maximum number of rows allowed in the input field.                                                       |
+| onBlur                | func                                                                      |           | Function to call when the input field loses focus.                                                       |
+| onFocus               | func                                                                      |           | Function to call when the input field gains focus.                                                       |
+| onSubmitEditing       | func                                                                      |           | Function to call when the input field is submitted.                                                      |
+| placeholder           | string                                                                    |           | Placeholder text for the input field.                                                                    |
+| prefix                | string                                                                    |           | Prefix text to be displayed inside the input field.                                                      |
+| readOnly              | bool                                                                      | false     | Makes the input field read-only.                                                                         |
+| required              | bool                                                                      | false     | Whether the input field is required.                                                                     |
+| returnKeyType         | string                                                                    | 'done'    | Determines the return key type on the keyboard.                                                          |
+| RightIcon             | elementType                                                               |           | Icon to be displayed on the right side of the input field.                                               |
+| style                 | shape({ container: object, input: object, root: object })                 |           | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |
+| suffix                | string                                                                    |           | Suffix text to be displayed inside the input field.                                                      |
+| tooltip               | string                                                                    |           | Tooltip text to be displayed.                                                                            |
+| type                  | string                                                                    | 'default' | Type of input (e.g., 'text', 'password', 'email').                                                       |
+| validations           | array                                                                     |           | Array of validation rules to be applied to the input field.                                              |
 
 ### action
 
@@ -69,7 +71,7 @@ It must be one of these:
 - "password"
 - "numeric"
 
-### Methods via `InputRef`
+### Methods via `inputRef`
 
 | Name     | Description                          |
 | -------- | ------------------------------------ |
@@ -93,8 +95,7 @@ If a RightIcon is provided and an error occurs, the RightIcon will be replaced b
 
 ### Structure of validations
 
-The validations prop expects an array of objects, where each object can have a title, status, and an items array. Each item in the items array represents a specific validation rule with a status and text.
-It is no neccesary to indicate status value if it is "default".
+The validations prop expects an array of objects, where each object can have a title, status, and an items array. Each item in the items array represents a specific validation rule with a status and text. It is not necessary to indicate status value if it is "default".
 
 #### Example structure:
 
@@ -140,7 +141,7 @@ const validationData = [
 Errors can be displayed below the input field using either the `error` prop or the `validations` prop.
 
 - **error**: A string that represents a general error message.
-- **validations**: An array of validation rules, where each rule is an object containing a `rule` and a `message`.
+- **validations**: An array of validation rules, where each rule is an object containing a `status` and a `text`.
 
 If both `error` and `validations` are provided, `validations` will take precedence, and its messages will be displayed.
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { bool, elementType, func, number, shape, string } from 'prop-types';
+import { bool, elementType, func, instanceOf, number, oneOfType, shape, string } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import UTBaseInputField from '../../../../../UTBaseInputField';
@@ -8,15 +8,17 @@ import { COMPONENT_KEYS } from '../../../../../UTBaseInputField/constants';
 const TextInputField = ({
   action,
   alwaysShowPlaceholder,
+  blurOnSubmit,
   disabled,
   error,
-  InputRef,
+  id,
+  input,
+  inputRef,
   inputSize,
   LeftIcon,
   maxLength,
   maxRows,
   onBlur,
-  onChange,
   onFocus,
   onSubmitEditing,
   placeholder,
@@ -28,8 +30,7 @@ const TextInputField = ({
   style,
   suffix,
   tooltip,
-  type,
-  value
+  type
 }) => {
   const leftAdornments = [
     { name: COMPONENT_KEYS.ICON, props: { Icon: LeftIcon } },
@@ -46,25 +47,26 @@ const TextInputField = ({
   return (
     <UTBaseInputField
       alwaysShowPlaceholder={alwaysShowPlaceholder}
+      blurOnSubmit={blurOnSubmit}
       disabled={disabled}
       error={error}
+      id={id}
+      input={input}
       inputSize={inputSize}
       leftAdornments={leftAdornments}
       maxLength={maxLength}
       maxRows={maxRows}
       onBlur={onBlur}
-      onChange={onChange}
       onFocus={onFocus}
       onSubmitEditing={onSubmitEditing}
       placeholder={placeholder}
       readOnly={readOnly}
-      ref={InputRef}
+      ref={inputRef}
       returnKeyType={returnKeyType}
       rightAdornments={rightAdornments}
       showCharacterCount={showCharacterCount}
       style={style}
       type={type}
-      value={value}
     />
   );
 };
@@ -74,15 +76,20 @@ TextInputField.displayName = 'TextInputField';
 TextInputField.propTypes = {
   action: shape({ icon: elementType, action: func, colorTheme: string, text: string }),
   alwaysShowPlaceholder: bool,
+  blurOnSubmit: bool,
   disabled: bool,
   error: string,
-  InputRef: func,
+  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,
@@ -98,8 +105,7 @@ TextInputField.propTypes = {
   }),
   suffix: string,
   tooltip: string,
-  type: string,
-  value: string
+  type: string
 };
 
 export default TextInputField;

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

@@ -1,6 +1,4 @@
-export const DEFAULT_PROPS = {
-  maxRows: 1,
-  style: {}
+export const SIZES = {
+  SMALL: 'small',
+  LARGE: 'large'
 };
-
-export const SMALL = 'small';

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

@@ -1,23 +1,26 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View } from 'react-native';
 
 import { formatErrorToValidation } from '../../../UTValidation/utils';
-import UTLabel from '../../../UTLabel';
 import UTFieldLabel from '../../../UTFieldLabel';
+import UTLabel from '../../../UTLabel';
 import UTValidation from '../../../UTValidation';
 
-import { DEFAULT_PROPS, SMALL } from './constants';
-import propTypes from './proptypes';
+import { defaultProps, propTypes } from './proptypes';
+import { SIZES } from './constants';
 import styles from './styles';
 import TextInputField from './components/TextInputField';
 
 const UTTextInput = ({
   action,
   alwaysShowPlaceholder,
+  blurOnSubmit,
   disabled,
   error,
   helpText,
-  InputRef,
+  id,
+  input,
+  inputRef,
   inputSize,
   label,
   labelVariant,
@@ -25,7 +28,6 @@ const UTTextInput = ({
   maxLength,
   maxRows,
   onBlur,
-  onChange,
   onFocus,
   onSubmitEditing,
   placeholder,
@@ -39,12 +41,15 @@ const UTTextInput = ({
   suffix,
   tooltip,
   type,
-  validations,
-  value
+  validations
 }) => {
   const labelColorTheme = readOnly ? 'gray' : 'dark';
-  const labelComponentVariant = labelVariant === SMALL ? 'small' : 'body';
-  const validationData = validations || (error && formatErrorToValidation(error));
+  const labelComponentVariant = labelVariant === SIZES.SMALL ? 'small' : 'body';
+
+  const validationData = useMemo(
+    () => validations || (error && formatErrorToValidation(error)),
+    [error, validations]
+  );
 
   return (
     <View style={[styles.container, style.root]}>
@@ -56,15 +61,17 @@ const UTTextInput = ({
       <TextInputField
         action={action}
         alwaysShowPlaceholder={alwaysShowPlaceholder}
+        blurOnSubmit={blurOnSubmit}
         disabled={disabled}
         error={error}
-        InputRef={InputRef}
+        id={id}
+        input={input}
+        inputRef={inputRef}
         inputSize={inputSize}
         LeftIcon={LeftIcon}
         maxLength={maxLength}
         maxRows={maxRows}
         onBlur={onBlur}
-        onChange={onChange}
         onFocus={onFocus}
         onSubmitEditing={onSubmitEditing}
         placeholder={placeholder}
@@ -77,7 +84,6 @@ const UTTextInput = ({
         suffix={suffix}
         tooltip={tooltip}
         type={type}
-        value={value}
       />
       {helpText && (
         <UTLabel colorTheme="gray" variant="small">
@@ -89,10 +95,7 @@ const UTTextInput = ({
   );
 };
 
-UTTextInput.defaultProps = DEFAULT_PROPS;
-
-UTTextInput.propTypes = {
-  ...propTypes
-};
+UTTextInput.defaultProps = defaultProps;
+UTTextInput.propTypes = propTypes;
 
 export default UTTextInput;

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

@@ -1,15 +1,34 @@
-import { bool, elementType, func, number, shape, string } from 'prop-types';
+import { bool, elementType, func, instanceOf, number, oneOfType, shape, string } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { validationDataProptypes } from '../../../UTValidation/constants';
 
-export default {
+import { SIZES } from './constants';
+
+export const defaultProps = {
+  input: {
+    value: [],
+    onChange: () => {}
+  },
+  inputSize: SIZES.LARGE,
+  labelVariant: SIZES.LARGE,
+  maxRows: 1,
+  style: {}
+};
+
+export const propTypes = {
   action: shape({ icon: elementType, action: func, colorTheme: string, text: string }),
   alwaysShowPlaceholder: bool,
+  blurOnSubmit: bool,
   disabled: bool,
   error: string,
   helpText: string,
-  InputRef: func,
+  id: oneOfType([number, string]),
+  input: shape({
+    value: string,
+    onChange: func
+  }),
+  inputRef: oneOfType([func, instanceOf(Object)]),
   inputSize: string,
   label: string,
   labelVariant: string,
@@ -17,7 +36,6 @@ export default {
   maxLength: number,
   maxRows: number,
   onBlur: func,
-  onChange: func,
   onFocus: func,
   onSubmitEditing: func,
   placeholder: string,
@@ -35,6 +53,5 @@ export default {
   suffix: string,
   tooltip: string,
   type: string,
-  validations: validationDataProptypes,
-  value: string
+  validations: validationDataProptypes
 };