@cdek-it/react-native-ui-kit 0.2.6 → 0.2.8

package/README.md

@@ -4,9 +4,34 @@
 
 ## Installation
 
+**Yarn**
+
+```shell
+yarn add \
+  react \
+  react-native \
+  @tabler/icons-react-native \
+  react-native-svg \
+  react-native-reanimated
+```
+
+```shell
+yarn add @cdek-it/react-native-ui-kit
+```
+
+**npm**
+
 ```shell
-yarn add --save-exact @cdek-it/react-native-ui-kit
-yarn add react react-native @tabler/icons-react-native react-native-svg react-native-reanimated
+npm i \
+  react \
+  react-native \
+  @tabler/icons-react-native \
+  react-native-svg \
+  react-native-reanimated
+```
+
+```shell
+npm i @cdek-it/react-native-ui-kit
 ```
 
 ## Шрифты
@@ -137,15 +162,3 @@ UI kit использует следующие виды шрифтов.
 - @tabler/icons-react-native - начиная с 3 major версии(от 3.0.0)
 - react-native-svg - начиная с 15 major версии(от 15.0.0)
 - react-native-reanimated - начиная с 3 major версии(от 3.0.0)
-
-## Development
-
-`yarn install` - установка зависимостей `yarn start` - запуск Metro Bundler для
-Storybook `yarn ios` - запуск Storybook на iOS `yarn android` - запуск Storybook
-на Android
-
-Storybook проект создан с помощью Expo
-
-### Макеты
-
-[https://developer.cdek.ru/design-system](https://developer.cdek.ru/design-system)

package/dist/components/Input/InputTextBase/InputTextBase.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { IconEye, IconEyeOff, IconLoader2, IconLock, IconX, } from '@tabler/icons-react-native';
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { TextInput, View, Text, TouchableOpacity, Pressable, } from 'react-native';
@@ -13,7 +14,10 @@ import { useStyles } from './useStyles';
  */
 export const InputTextBase = memo(
 // eslint-disable-next-line max-lines-per-function
-({ state, clearable = true, secureTextEntry: secureTextEntryProp = false, inputRef: propsInputRef, disabled, containerStyle, loading, renderTextInput, clearButtonAccessibilityLabel, floatLabel = false, placeholder, ...otherProps }) => {
+({ state, clearable = true, secureTextEntry: secureTextEntryProp = false, inputRef: propsInputRef, disabled, containerStyle, loading, renderTextInput, clearButtonAccessibilityLabel, floatLabel = false, placeholder, ...otherProps
+// TODO: разделить float label и обычный инпут -> добавить во float label поддержку font scale
+// eslint-disable-next-line complexity
+ }) => {
     const styles = useStyles();
     const inputRef = useRef(null);
     const [valueState, setValueState] = useState('');
@@ -32,11 +36,10 @@ export const InputTextBase = memo(
         setValueState(nextValue);
     }, [otherProps]);
     const clear = useCallback(() => {
-        inputRef.current?.clear();
         onChangeText('');
     }, [onChangeText]);
     const value = useMemo(() => otherProps.value ?? valueState, [otherProps.value, valueState]);
-    const showClearButton = useMemo(() => clearable && !!value.length, [clearable, value.length]);
+    const showClearButton = useMemo(() => clearable && !!value.length && !disabled, [clearable, disabled, value.length]);
     const onContainerPress = useCallback(() => {
         inputRef.current?.focus();
     }, []);
@@ -55,13 +58,21 @@ export const InputTextBase = memo(
         });
     }, [isFocused, labelAnimation, value]);
     const iconSize = useMemo(() => (floatLabel ? styles.iconSizeFloatLabel : styles.iconSize), [floatLabel, styles.iconSize, styles.iconSizeFloatLabel]);
-    useImperativeHandle(propsInputRef, () => (inputRef.current ? inputRef.current : null), [inputRef]);
+    useImperativeHandle(propsInputRef, () => (inputRef.current ? { ...inputRef.current, clear } : null), [inputRef, clear]);
     const { makeTestId } = useMakeTestId(otherProps.testID || InputTextBaseTestId.default);
     const [userDefinedSecureTextEntry, setUserDefinedSecureTextEntry] = useState(true);
     const secureTextEntry = useMemo(() => secureTextEntryProp === 'toggleable'
         ? userDefinedSecureTextEntry
         : secureTextEntryProp, [secureTextEntryProp, userDefinedSecureTextEntry]);
     const toggleUserDefinedSecureTextEntry = useCallback(() => setUserDefinedSecureTextEntry((old) => !old), []);
+    const showSecureToggle = secureTextEntryProp === 'toggleable';
+    const hasRightContent = loading || showClearButton || showSecureToggle || disabled;
+    const rightButtonHitSlop = useMemo(() => ({
+        top: 0,
+        bottom: 0,
+        left: styles.rightContainer.gap / 2,
+        right: styles.rightContainer.gap / 2,
+    }), [styles.rightContainer.gap]);
     const texInputProps = useMemo(() => ({
         ...otherProps,
         allowFontScaling: floatLabel ? false : otherProps.allowFontScaling,
@@ -72,6 +83,7 @@ export const InputTextBase = memo(
         style: [
             styles.inputFont,
             floatLabel ? styles.floatLabelInput : styles.input,
+            hasRightContent && styles.inputWithRightContent,
         ],
         inputRef,
         value,
@@ -84,9 +96,11 @@ export const InputTextBase = memo(
         makeTestId,
         disabled,
         secureTextEntry,
-        styles.floatLabelInput,
         styles.inputFont,
+        styles.floatLabelInput,
         styles.input,
+        styles.inputWithRightContent,
+        hasRightContent,
         value,
         onBlur,
         onChangeText,
@@ -109,8 +123,6 @@ export const InputTextBase = memo(
 
             {input}
           </>) : (<View style={styles.inputContainer}>
-            {input}
-
             <Text pointerEvents='none' style={[
                 styles.inputFont,
                 styles.placeholder,
@@ -122,22 +134,24 @@ export const InputTextBase = memo(
             ]} testID={makeTestId(InputTextBaseTestId.placeholder)}>
               {placeholder}
             </Text>
+
+            {input}
           </View>)}
 
-        <View style={styles.rightContainer}>
-          {loading ? (<Animated.View style={loadingAnimatedStyle} testID={makeTestId(InputTextBaseTestId.loading)}>
-              <IconLoader2 color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>
-            </Animated.View>) : null}
+        {hasRightContent ? (<View style={styles.rightContainer}>
+            {loading ? (<Animated.View style={[styles.rightButtonContainer, loadingAnimatedStyle]} testID={makeTestId(InputTextBaseTestId.loading)}>
+                <IconLoader2 color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>
+              </Animated.View>) : null}
 
-          {showClearButton && !disabled ? (<TouchableOpacity accessibilityLabel={clearButtonAccessibilityLabel} testID={makeTestId(InputTextBaseTestId.clearButton)} onPress={clear}>
-              <IconX color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>
-            </TouchableOpacity>) : null}
+            {showClearButton ? (<TouchableOpacity accessibilityLabel={clearButtonAccessibilityLabel} hitSlop={rightButtonHitSlop} style={styles.rightButtonContainer} testID={makeTestId(InputTextBaseTestId.clearButton)} onPress={clear}>
+                <IconX color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>
+              </TouchableOpacity>) : null}
 
-          {secureTextEntryProp === 'toggleable' ? (<TouchableOpacity testID={makeTestId(InputTextBaseTestId.secureInputButton)} onPress={toggleUserDefinedSecureTextEntry}>
-              {userDefinedSecureTextEntry ? (<IconEye color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>) : (<IconEyeOff color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>)}
-            </TouchableOpacity>) : null}
+            {showSecureToggle ? (<TouchableOpacity hitSlop={rightButtonHitSlop} style={styles.rightButtonContainer} testID={makeTestId(InputTextBaseTestId.secureInputButton)} onPress={toggleUserDefinedSecureTextEntry}>
+                {userDefinedSecureTextEntry ? (<IconEye color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>) : (<IconEyeOff color={styles.rightIcon.color} height={iconSize.height} width={iconSize.width}/>)}
+              </TouchableOpacity>) : null}
 
-          {disabled ? (<IconLock color={styles.rightIcon.color} height={iconSize.height} testID={makeTestId(InputTextBaseTestId.disabledIcon)} width={iconSize.width}/>) : null}
-        </View>
+            {disabled ? (<IconLock color={styles.rightIcon.color} height={iconSize.height} testID={makeTestId(InputTextBaseTestId.disabledIcon)} width={iconSize.width}/>) : null}
+          </View>) : null}
       </Pressable>);
 });

package/dist/components/Input/InputTextBase/useStyles.d.ts

@@ -41,6 +41,9 @@ export declare const useStyles: () => {
         top: number;
         bottom: number;
     };
+    inputWithRightContent: {
+        paddingRight: number;
+    };
     floatLabelInput: {
         flex: number;
         paddingHorizontal: number;
@@ -64,11 +67,13 @@ export declare const useStyles: () => {
     };
     rightContainer: {
         flexDirection: "row";
-        alignItems: "center";
-        paddingRight: number;
+        paddingHorizontal: number;
         gap: number;
         overflow: "hidden";
     };
+    rightButtonContainer: {
+        justifyContent: "center";
+    };
     rightIcon: {
         color: string;
     };

package/dist/components/Input/InputTextBase/useStyles.js

@@ -38,6 +38,7 @@ export const useStyles = makeStyles(({ theme, border, typography, spacing, fonts
         top: 0,
         bottom: 0,
     },
+    inputWithRightContent: { paddingRight: 0 },
     floatLabelInput: {
         flex: 1,
         paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
@@ -61,11 +62,11 @@ export const useStyles = makeStyles(({ theme, border, typography, spacing, fonts
     },
     rightContainer: {
         flexDirection: 'row',
-        alignItems: 'center',
-        paddingRight: theme.Form.InputText.inputPaddingLeftRight,
+        paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
         gap: theme.Form.InputText.inputPaddingLeftRight,
         overflow: 'hidden',
     },
+    rightButtonContainer: { justifyContent: 'center' },
     rightIcon: { color: theme.Form.InputText.inputIconColor },
     iconSize: {
         width: typography.Size['text-base'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdek-it/react-native-ui-kit",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "UI kit на основе Prime Faces, Prime Flex для React Native",
   "license": "MIT",
   "homepage": "https://developer.cdek.ru/design-system",