@cdek-it/react-native-ui-kit 0.4.1 → 0.5.0

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

@@ -6,7 +6,7 @@ import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, }
 import { useLoadingRotationAnimation } from '../../../hooks/useLoadingRotationAnimation';
 import { useMakeTestId } from '../../../hooks/useMakeTestId';
 import { InputTextBaseTestId } from './testIds';
-import { useStyles } from './useStyles';
+import { useInputStyle } from './useInputStyles';
 /**
  * Базовое поле
  * @link https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=484-5470&m=dev
@@ -14,11 +14,11 @@ 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, editable = true, size, ...otherProps
 // TODO: разделить float label и обычный инпут -> добавить во float label поддержку font scale
 // eslint-disable-next-line complexity
  }) => {
-    const styles = useStyles();
+    const styles = useInputStyle(size);
     const inputRef = useRef(null);
     const [valueState, setValueState] = useState('');
     const [isFocused, setIsFocused] = useState(otherProps.autoFocus || false);
@@ -80,7 +80,7 @@ export const InputTextBase = memo(
         allowFontScaling: floatLabel ? false : otherProps.allowFontScaling,
         placeholder: '',
         testID: makeTestId(),
-        editable: !disabled,
+        editable: disabled ? false : editable,
         secureTextEntry,
         style: [
             styles.inputFont,
@@ -97,6 +97,7 @@ export const InputTextBase = memo(
         floatLabel,
         makeTestId,
         disabled,
+        editable,
         secureTextEntry,
         styles.inputFont,
         styles.floatLabelInput,

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

@@ -1,7 +1,7 @@
 import type { Ref, ReactNode } from 'react';
 import type { TextInputProps, ViewStyle, TextInput } from 'react-native';
 /** @see TextInputProps */
-export interface InputTextBaseProps extends Omit<TextInputProps, 'style' | 'editable' | 'secureTextEntry'> {
+export interface InputTextBaseProps extends Omit<TextInputProps, 'style' | 'secureTextEntry'> {
     /**
      * Управление отображения иконки очистки поля
      * @default true
@@ -35,6 +35,13 @@ export interface InputTextBaseProps extends Omit<TextInputProps, 'style' | 'edit
      * @default false
      */
     floatLabel?: boolean;
+    /**
+     * Управление высотой поля ввода.
+     * Работает только если floatLabel = false.
+     * Можно передать число. Если переданное число меньше размера base, будет использован размер base.
+     * @default 'base'
+     */
+    size?: 'base' | 'large' | 'xlarge' | number;
 }
 export type RenderTextInputArgs = TextInputProps & {
     inputRef: Ref<TextInput>;

package/dist/components/Input/InputTextBase/{useStyles.d.ts → useInputStyles.d.ts}

@@ -1,4 +1,5 @@
-export declare const useStyles: () => {
+import type { InputTextBaseProps } from './types';
+export declare const useInputStyle: (size?: InputTextBaseProps["size"]) => {
     container: {
         minHeight: number;
         flexDirection: "row";
@@ -70,6 +71,7 @@ export declare const useStyles: () => {
         paddingHorizontal: number;
         gap: number;
         overflow: "hidden";
+        alignItems: "center";
     };
     rightButtonContainer: {
         justifyContent: "center";

package/dist/components/Input/InputTextBase/{useStyles.js → useInputStyles.js}

@@ -1,7 +1,23 @@
+import { useMemo } from 'react';
 import { makeStyles } from '../../../utils/makeStyles';
-export const useStyles = makeStyles(({ theme, border, typography, spacing, fonts }) => ({
+export const useInputStyle = (size = 'base') => {
+    const styles = useStyles();
+    const containerMinHeight = useContainerMinHeight();
+    const minHeight = useMemo(() => {
+        if (typeof size === 'number') {
+            return Math.max(size, containerMinHeight.base.minHeight);
+        }
+        return containerMinHeight[size].minHeight;
+    }, [size, containerMinHeight]);
+    return { ...styles, container: { ...styles.container, minHeight } };
+};
+const useContainerMinHeight = makeStyles(({ theme }) => ({
+    base: { minHeight: theme.InputSize.base['min-height'] },
+    large: { minHeight: theme.InputSize.large['min-height'] },
+    xlarge: { minHeight: theme.InputSize.xlarge['min-height'] },
+}));
+const useStyles = makeStyles(({ theme, border, typography, spacing, fonts }) => ({
     container: {
-        minHeight: theme.Button.Common.buttonHeight,
         flexDirection: 'row',
         borderWidth: border.Width.border,
         borderRadius: border.Radius['rounded-xl'],
@@ -65,6 +81,7 @@ export const useStyles = makeStyles(({ theme, border, typography, spacing, fonts
         paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
         gap: theme.Form.InputText.inputPaddingLeftRight,
         overflow: 'hidden',
+        alignItems: 'center',
     },
     rightButtonContainer: { justifyContent: 'center' },
     rightIcon: { color: theme.Form.InputText.inputIconColor },

package/dist/theme/assets/InputSize/base.json

@@ -0,0 +1,3 @@
+{
+    "min-height": 35
+}

package/dist/theme/assets/InputSize/index.d.ts

@@ -0,0 +1,11 @@
+export declare const InputSize: {
+    base: {
+        "min-height": number;
+    };
+    large: {
+        "min-height": number;
+    };
+    xlarge: {
+        "min-height": number;
+    };
+};

package/dist/theme/assets/InputSize/index.js

@@ -0,0 +1,4 @@
+import base from './base.json';
+import large from './large.json';
+import xlarge from './xlarge.json';
+export const InputSize = { base, large, xlarge };

package/dist/theme/assets/InputSize/large.json

@@ -0,0 +1,3 @@
+{
+    "min-height": 49
+}

package/dist/theme/assets/InputSize/xlarge.json

@@ -0,0 +1,3 @@
+{
+    "min-height": 56
+}

package/dist/theme/assets/ModalSize/index.d.ts

@@ -0,0 +1,18 @@
+export declare const ModalSize: {
+    sm: {
+        width: number;
+        height: number;
+    };
+    md: {
+        width: number;
+        height: number;
+    };
+    lg: {
+        width: number;
+        height: number;
+    };
+    xl: {
+        width: number;
+        height: number;
+    };
+};

package/dist/theme/assets/ModalSize/index.js

@@ -0,0 +1,5 @@
+import lg from './lg.json';
+import md from './md.json';
+import sm from './sm.json';
+import xl from './xl.json';
+export const ModalSize = { sm, md, lg, xl };

package/dist/theme/assets/ModalSize/lg.json

@@ -0,0 +1,4 @@
+{
+    "width": 420,
+    "height": 280
+}

package/dist/theme/assets/ModalSize/md.json

@@ -0,0 +1,4 @@
+{
+    "width": 350,
+    "height": 210
+}

package/dist/theme/assets/ModalSize/sm.json

@@ -0,0 +1,4 @@
+{
+    "width": 280,
+    "height": 140
+}

package/dist/theme/assets/ModalSize/xl.json

@@ -0,0 +1,4 @@
+{
+    "width": 630,
+    "height": 350
+}

package/dist/theme/darkTheme.js

@@ -1,7 +1,9 @@
+import { InputSize } from './assets/InputSize';
+import { ModalSize } from './assets/ModalSize';
 import { customDark } from './assets/customDark';
 import darkThemeAssets from './assets/themeDark.json';
 import { commonTheme } from './commonTheme';
 export const darkTheme = {
-    theme: { ...darkThemeAssets, custom: customDark },
+    theme: { ...darkThemeAssets, InputSize, ModalSize, custom: customDark },
     ...commonTheme,
 };

package/dist/theme/lightTheme.js

@@ -1,7 +1,9 @@
+import { InputSize } from './assets/InputSize';
+import { ModalSize } from './assets/ModalSize';
 import { customLight } from './assets/customLight';
 import lightThemeAssets from './assets/themeLight.json';
 import { commonTheme } from './commonTheme';
 export const lightTheme = {
-    theme: { ...lightThemeAssets, custom: customLight },
+    theme: { ...lightThemeAssets, InputSize, ModalSize, custom: customLight },
     ...commonTheme,
 };

package/dist/theme/types.d.ts

@@ -1,3 +1,5 @@
+import type { InputSize } from './assets/InputSize';
+import type { ModalSize } from './assets/ModalSize';
 import type background from './assets/background.json';
 import type border from './assets/border.json';
 import type { customCommon } from './assets/customCommon';
@@ -22,6 +24,8 @@ export interface ThemeType {
     spacing: typeof spacing;
     theme: typeof lightTheme & {
         custom: typeof customLight;
+        InputSize: typeof InputSize;
+        ModalSize: typeof ModalSize;
     };
     typography: typeof typography;
     custom: typeof customCommon;

package/package.json

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