@widergy/mobile-ui 1.15.0 → 1.16.0

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

@@ -0,0 +1,103 @@
+import React, { useState, useMemo } from 'react';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { View } from 'react-native';
+
+import Label from '../../../Label';
+import UTMenu from '../../../UTMenu';
+import UTTextInput from '../../../UTTextInput';
+
+import MultipleItem from './componentes/MultipleItem';
+import styles from './styles';
+import UTSelectTypes from './proptypes';
+
+const UTSelect = ({
+  options = [],
+  value,
+  onChange,
+  error,
+  UTMenuProps,
+  label,
+  styles: propStyles,
+  variant,
+  disabled,
+  UTTextInputProps,
+  isMultiple,
+  verticalOffset = 5,
+  title,
+  titleProps,
+  changeOnClose
+}) => {
+  const [focused, setFocused] = useState(false);
+
+  const selectedOption = useMemo(
+    () => (!isMultiple ? options.find(option => option.value === value) : value || []),
+    [isMultiple, options, value]
+  );
+
+  const handleChange = option => {
+    if (!changeOnClose) onChange(option.value);
+  };
+
+  const handleChangeMultiple = newValue => {
+    const newValues = !selectedOption?.find?.(elem => elem === newValue.value)
+      ? [...(selectedOption || []), newValue.value]
+      : selectedOption?.filter(elem => elem !== newValue.value);
+
+    const finalValue = isEmpty(newValues) ? null : newValues;
+    if (!changeOnClose) {
+      onChange(finalValue);
+    }
+  };
+
+  const handleOpen = () => setFocused(true);
+  // eslint-disable-next-line consistent-return
+  const handleClose = () => {
+    setFocused(false);
+    if (changeOnClose) {
+      return isMultiple
+        ? onChange(selectedOption)
+        : onChange(options.find(_option => _option.id === selectedOption.id).value);
+    }
+  };
+
+  return (
+    <View style={[styles.container, propStyles]}>
+      {title && (
+        <Label medium primary {...titleProps}>
+          {title}
+        </Label>
+      )}
+      <UTMenu
+        options={options}
+        selectedOption={isMultiple ? selectedOption : selectedOption?.id}
+        fullWidth
+        verticalOffset={verticalOffset}
+        disabled={disabled}
+        onPress={isMultiple ? handleChangeMultiple : handleChange}
+        onOpen={handleOpen}
+        onClose={handleClose}
+        withoutOpacity
+        MenuOptionComponent={isMultiple && MultipleItem}
+        isMultiple={isMultiple}
+        {...UTMenuProps}
+      >
+        <UTTextInput
+          variant={variant}
+          value={isMultiple ? value?.join(', ') || '' : selectedOption?.label || selectedOption?.value || ''}
+          error={error}
+          label={label}
+          select
+          controlledFocus={focused}
+          disabled={disabled}
+          version="V0"
+          RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
+          {...UTTextInputProps}
+        />
+      </UTMenu>
+    </View>
+  );
+};
+
+UTSelect.propTypes = UTSelectTypes;
+
+export default UTSelect;

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

@@ -0,0 +1,82 @@
+# UTSelect
+
+## Description
+
+`UTSelect` is a customizable dropdown select component that allows users to select single or multiple options from a provided list. It includes features like search, select all, and dynamic option filtering.
+
+## Props
+
+| Name                  | Type   | Default | Description                                                                                          |
+| --------------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------- |
+| action                | shape  |         | Action object containing `Icon`, `onPress`, and `size` for the action button.                        |
+| alwaysShowPlaceholder | bool   | true    | Determines if the placeholder should always be shown.                                                |
+| helpText              | string |         | Help text displayed below the input field.                                                           |
+| noMatchesText         | string |         | Text to display when no matches are found in the search.                                             |
+| input                 | shape  |         | Input configuration object containing `value` and `onChange`.                                        |
+| isMultiple            | bool   | false   | Allows multiple selection if true.                                                                   |
+| label                 | string |         | Label for the select field.                                                                          |
+| options               | array  |         | Array of options to be displayed in the dropdown. Each option is an object with `label` and `value`. |
+| placeholder           | string |         | Placeholder text for the select field.                                                               |
+| prefix                | string |         | Text to display as a prefix inside the input field.                                                  |
+| required              | bool   | false   | Indicates if the select field is required.                                                           |
+| searchPlaceholder     | string |         | Placeholder text for the search field.                                                               |
+| selectAllLabel        | string |         | Label for the "Select All" checkbox.                                                                 |
+| showSelectAll         | bool   | false   | Determines whether to show the "Select All" checkbox.                                                |
+| style                 | shape  | {}      | Custom styles to apply to the select field. Can contain `root`, `noMatchesText`, `scrollview`.       |
+| suffix                | string |         | Text to display as a suffix inside the input field.                                                  |
+
+### Input Object
+
+The `input` prop is an object that should contain the following keys:
+
+| Name     | Type                    | Description                                  |
+| -------- | ----------------------- | -------------------------------------------- |
+| value    | arrayOf(string, number) | Array of selected values.                    |
+| onChange | func                    | Function to call when the selection changes. |
+
+### Option Object
+
+The `options` prop is an array of objects, each representing an option:
+
+| Name  | Type           | Description                      |
+| ----- | -------------- | -------------------------------- |
+| label | string         | Label to display for the option. |
+| value | string, number | Value of the option.             |
+
+## Usage
+
+```jsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import UTSelect from './UTSelect';
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' }
+];
+
+const UTSelectExample = () => {
+  const [selectedOptions, setSelectedOptions] = useState([]);
+
+  return (
+    <View style={{ padding: 20 }}>
+      <UTSelect
+        label="Select Options"
+        options={options}
+        input={{
+          value: selectedOptions,
+          onChange: setSelectedOptions
+        }}
+        placeholder="Select an option"
+        searchPlaceholder="Search options"
+        selectAllLabel="Select All"
+        noMatchesText="No matches found"
+      />
+      <Text>Selected Options: {selectedOptions.join(', ')}</Text>
+    </View>
+  );
+};
+
+export default UTSelectExample;
+```

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;