@widergy/mobile-ui 1.23.1 → 1.24.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.24.0](https://github.com/widergy/mobile-ui/compare/v1.23.2...v1.24.0) (2024-09-17)
+
+
+### Features
+
+* ut button group ([#356](https://github.com/widergy/mobile-ui/issues/356)) ([ebdb6a2](https://github.com/widergy/mobile-ui/commit/ebdb6a2d69ee182f2a1794aa7bb55eea6ce8e261))
+
+## [1.23.2](https://github.com/widergy/mobile-ui/compare/v1.23.1...v1.23.2) (2024-09-12)
+
+
+### Bug Fixes
+
+* fix input bug ([#355](https://github.com/widergy/mobile-ui/issues/355)) ([82869dd](https://github.com/widergy/mobile-ui/commit/82869ddabb526824d2fd2c6da0f86bf0c8fca92d))
+
 ## [1.23.1](https://github.com/widergy/mobile-ui/compare/v1.23.0...v1.23.1) (2024-09-04)
 
 

package/lib/components/UTBaseInputField/constants.js

@@ -5,6 +5,12 @@ import PrefixAdornment from './components/PrefixAdornment';
 import SuffixAdornment from './components/SuffixAdornment';
 import TooltipAdornment from './components/TooltipAdornment';
 
+export const DEBOUNCE_DELAY = 150;
+export const DEBOUNCE_CONFIG = {
+  leading: false,
+  trailing: true
+};
+
 export const TYPES = {
   EMAIL: 'email',
   NUMBER: 'number',

package/lib/components/UTBaseInputField/index.js

@@ -4,16 +4,19 @@ import React, {
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState
 } from 'react';
 import { View, TextInput } from 'react-native';
+import debounce from 'lodash/debounce';
 
 import { useTheme } from '../../theming';
 import UTLabel from '../UTLabel';
 
+import { COMPONENTS_MAPPER, DEBOUNCE_CONFIG, DEBOUNCE_DELAY } from './constants';
 import { defaultProps, propTypes } from './proptypes';
-import { KEYBOARD_BY_TYPE, TYPES, COMPONENTS_MAPPER } from './constants';
+import { getPropsByType } from './utils';
 import { LINE_HEIGHT, retrieveStyle } from './theme';
 
 const UTBaseInputField = forwardRef(
@@ -45,7 +48,6 @@ const UTBaseInputField = forwardRef(
     },
     ref
   ) => {
-    const [displayValue, setDisplayValue] = useState(value);
     const [focused, setFocused] = useState(false);
     const inputWidthRef = useRef(null);
     const inputRef = useRef(null);
@@ -53,35 +55,55 @@ const UTBaseInputField = forwardRef(
     const theme = useTheme();
     const multiline = maxRows > 1;
 
+    const { secureTextEntry, autoCapitalize, keyboardType } = getPropsByType(type);
+
+    const setNativeText = useMemo(
+      () => debounce(text => inputRef.current?.setNativeProps({ text }), DEBOUNCE_DELAY, DEBOUNCE_CONFIG),
+      []
+    );
+
     const handleFocus = useCallback(
       event => {
         setFocused(true);
-        if (!multiline) setDisplayValue(value);
+        setNativeText(value);
         onFocus?.(event);
       },
-      [onFocus, value, multiline]
+      [onFocus, value, setNativeText]
     );
 
-    const truncateText = (text, width) => {
-      const currentWidth = width || inputWidthRef.current;
-      if (!currentWidth || !text) return text;
-      const charWidth = 8;
-      const maxCharsPerLine = Math.floor(currentWidth / charWidth);
-      return text.length > maxCharsPerLine ? `${text.substring(0, maxCharsPerLine - 3)}...` : text;
-    };
+    const truncateText = useCallback(
+      (text, width) => {
+        if (multiline) return text;
+        const currentWidth = width || inputWidthRef.current;
+        if (!currentWidth || !text) return text;
+        const charWidth = 8;
+        const maxCharsPerLine = Math.floor(currentWidth / charWidth);
+        return text.length > maxCharsPerLine ? `${text.substring(0, maxCharsPerLine - 3)}...` : text;
+      },
+      [multiline, inputWidthRef]
+    );
+
+    useEffect(() => {
+      if (!focused && !multiline) {
+        const truncated = truncateText(value, inputWidthRef.current);
+        setNativeText(truncated);
+      } else {
+        setNativeText(value);
+      }
+    }, [value, focused, multiline, setNativeText, truncateText]);
 
     useLayoutEffect(() => {
       if (inputRef.current) {
         inputRef.current.measure((_x, _y, width) => {
           inputWidthRef.current = width;
-          setDisplayValue(truncateText(value, width));
         });
       }
-    }, [value]);
+    }, [value, focused]);
 
     const handleBlur = event => {
       setFocused(false);
-      if (!multiline) setDisplayValue(truncateText(value));
+      const truncated = truncateText(value, inputWidthRef.current);
+      setNativeText(truncated);
       onBlur?.(event);
     };
 
@@ -92,26 +114,27 @@ const UTBaseInputField = forwardRef(
       onSubmitEditing?.(event);
     };
 
-    const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle } = retrieveStyle({
-      disabled: disabled && !readOnly,
-      error,
-      focused,
-      inputSize,
-      maxRows,
-      multiline,
-      readOnly,
-      style,
-      theme,
-      variant
-    });
-
-    useEffect(() => {
-      setDisplayValue(value);
-    }, [value]);
+    const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle } = useMemo(
+      () =>
+        retrieveStyle({
+          disabled: disabled && !readOnly,
+          error,
+          focused,
+          inputSize,
+          maxRows,
+          multiline,
+          readOnly,
+          style,
+          theme,
+          variant
+        }),
+      [disabled, readOnly, error, focused, inputSize, maxRows, multiline, style, theme, variant]
+    );
 
     useImperativeHandle(ref, () => ({
       truncate: () => {
-        setDisplayValue(truncateText(value));
+        const truncated = truncateText(value, inputWidthRef.current);
+        setNativeText(truncated);
       },
       focus: () => {
         if (inputRef.current) {
@@ -126,10 +149,6 @@ const UTBaseInputField = forwardRef(
       ...inputRef.current
     }));
 
-    const secureTextEntry = [TYPES.PASSWORD, TYPES.PASSWORD_NUMERIC].includes(type);
-    const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
-    const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
-
     const renderElement = useCallback(
       element => {
         const Component = COMPONENTS_MAPPER[element.name];
@@ -160,15 +179,16 @@ const UTBaseInputField = forwardRef(
           <TextInput
             autoCapitalize={autoCapitalize}
             autoCorrect={false}
+            defaultValue={value}
             editable={!disabled && !readOnly && editable}
             id={id ? `${id}` : undefined}
             keyboardType={keyboardType}
             maxLength={maxLength}
             multiline={multiline}
             numberOfLines={maxRows}
-            onChangeText={onChange}
-            onEndEditing={handleBlur}
             onBlur={handleBlur}
+            onChangeText={text => setNativeText(value) || onChange(text)}
+            onEndEditing={handleBlur}
             onFocus={handleFocus}
             onSubmitEditing={handleSubmitEditing}
             placeholder={!focused && !alwaysShowPlaceholder ? '' : placeholder}
@@ -180,7 +200,6 @@ const UTBaseInputField = forwardRef(
             selectionColor={inputStyle.selectionColor}
             style={inputStyle.root}
             type={type}
-            value={focused || multiline ? value : displayValue}
           />
           {rightAdornments.map(renderElement)}
         </View>

package/lib/components/UTBaseInputField/utils.js

@@ -0,0 +1,13 @@
+import { KEYBOARD_BY_TYPE, TYPES } from './constants';
+
+export const getPropsByType = type => {
+  const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
+  const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
+  const secureTextEntry = [TYPES.PASSWORD, TYPES.PASSWORD_NUMERIC].includes(type);
+
+  return {
+    autoCapitalize,
+    keyboardType,
+    secureTextEntry
+  };
+};

package/lib/components/UTButtonGroup/README.md

@@ -0,0 +1,11 @@
+# UTButton
+
+## Props
+
+
+| Name       | Type            | Default   | Description                                                                            |
+| ------------ | :---------------- | ----------- | ---------------------------------------------------------------------------------------- |
+| actions    | array           |           | Array of actions to render. Each action must include:`Icon`, `id` and `onPress` props. |
+| colorTheme | string          | 'primary' | The color theme to use. One of:`primary`, `secondary`, `negative`.                     |
+| type       | string          | 'square'  | Type of the button. One of:`square`, `circle`.                                         |
+| selected   | string / number |           | Id of the active button.                                                               |

package/lib/components/UTButtonGroup/constants.js

@@ -0,0 +1,18 @@
+export const BACKGROUND_COLOR_MAPPER = theme => {
+  const negativeTheme = theme.Palette.negative;
+  const lightTheme = theme.Palette.light;
+
+  const lightBackground = { backgroundColor: lightTheme['03'] };
+  const negativeBackground = { backgroundColor: negativeTheme['02'] };
+
+  return {
+    primary: lightBackground,
+    negative: negativeBackground,
+    neutral: lightBackground
+  };
+};
+
+export const CIRCLE_TYPE = 'circle';
+export const SQUARE_TYPE = 'square';
+export const DEFAULT_TYPE = SQUARE_TYPE;
+export const DEFAULT_COLOR_THEME = 'primary';

package/lib/components/UTButtonGroup/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View } from 'react-native';
+import { arrayOf, element, func, number, oneOfType, shape, string } from 'prop-types';
+
+import { useTheme } from '../../theming';
+import { mergeMultipleStyles } from '../../utils/styleUtils';
+import UTButton from '../UTButton';
+
+import { BACKGROUND_COLOR_MAPPER, DEFAULT_COLOR_THEME, DEFAULT_TYPE } from './constants';
+import { getTypeStyles, ownStyles } from './styles';
+
+const UTButtonGroup = ({ actions, colorTheme = DEFAULT_COLOR_THEME, selected, type = DEFAULT_TYPE }) => {
+  const theme = useTheme();
+  const backgroundColor =
+    BACKGROUND_COLOR_MAPPER(theme)[colorTheme] || BACKGROUND_COLOR_MAPPER(theme).primary;
+  const themedStyles = mergeMultipleStyles(ownStyles, getTypeStyles(type), theme?.UTButtonGroup);
+
+  return (
+    <View style={[themedStyles.container, backgroundColor]}>
+      {actions.map(({ Icon, id, onPress }, index) => (
+        <UTButton
+          colorTheme={colorTheme}
+          Icon={Icon}
+          key={id}
+          onPress={onPress}
+          size="large"
+          style={{
+            root: {
+              ...themedStyles.buttonRoot,
+              ...(index === 0 ? themedStyles.firstButton : {}),
+              ...(index === actions.length - 1 ? themedStyles.lastButton : {}),
+              ...themedStyles.button
+            }
+          }}
+          variant={selected === id ? 'filled' : 'text'}
+        />
+      ))}
+    </View>
+  );
+};
+
+UTButtonGroup.propTypes = {
+  actions: arrayOf(
+    shape({
+      Icon: oneOfType([string, element]),
+      id: oneOfType([number, string]),
+      onClick: func
+    })
+  ).isRequired,
+  colorTheme: string,
+  selected: oneOfType([number, string]).isRequired,
+  type: string
+};
+
+export default UTButtonGroup;

package/lib/components/UTButtonGroup/styles.js

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+
+import { CIRCLE_TYPE, SQUARE_TYPE } from './constants';
+
+const BORDER_RADIUS_DEFAULT = 8;
+const BORDER_RADIUS_SQUARE = BORDER_RADIUS_DEFAULT - 1;
+const BORDER_RADIUS_ROUNDED = 100;
+
+export const getTypeStyles = type =>
+  ({
+    [CIRCLE_TYPE]: {
+      container: {
+        borderRadius: BORDER_RADIUS_ROUNDED
+      },
+      button: {
+        borderRadius: BORDER_RADIUS_ROUNDED
+      }
+    },
+    [SQUARE_TYPE]: {
+      container: {
+        borderRadius: BORDER_RADIUS_DEFAULT
+      },
+      firstButton: {
+        borderTopLeftRadius: BORDER_RADIUS_SQUARE,
+        borderBottomLeftRadius: BORDER_RADIUS_SQUARE
+      },
+      lastButton: {
+        borderTopRightRadius: BORDER_RADIUS_SQUARE,
+        borderBottomRightRadius: BORDER_RADIUS_SQUARE
+      }
+    }
+  })[type];
+
+export const ownStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  buttonRoot: {
+    borderRadius: 0
+  }
+});

package/lib/index.js

@@ -39,6 +39,7 @@ export { default as UTAutocomplete } from './components/UTAutocomplete';
 export { default as UTBadge } from './components/UTBadge';
 export { default as UTBottomSheet } from './components/UTBottomSheet';
 export { default as UTButton } from './components/UTButton';
+export { default as UTButtonGroup } from './components/UTButtonGroup';
 export { default as UTCBUInput } from './components/UTCBUInput';
 export { default as UTCheckBox } from './components/UTCheckBox';
 export { default as UTCheckList } from './components/UTCheckList';

package/package.json

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