From 63391549287d893b4095ed59e4bcf590535292de Mon Sep 17 00:00:00 2001 From: vpsmolina Date: Thu, 11 Jan 2024 15:23:24 +0300 Subject: [PATCH 1/4] fix(InputField): changed styles for click-through rate --- .../__snapshots__/ChatInput.test.tsx.snap | 24 +++- .../ChatInputField.test.tsx.snap | 32 ++++-- .../components/InputField/InputField.tsx | 2 +- .../__snapshots__/InputField.test.tsx.snap | 104 +++++++++++++----- .../components/InputField/stylesCreate.ts | 6 +- 5 files changed, 125 insertions(+), 43 deletions(-) diff --git a/packages/core/src/chat/components/__tests__/__snapshots__/ChatInput.test.tsx.snap b/packages/core/src/chat/components/__tests__/__snapshots__/ChatInput.test.tsx.snap index c74741b66..d27f3cad4 100644 --- a/packages/core/src/chat/components/__tests__/__snapshots__/ChatInput.test.tsx.snap +++ b/packages/core/src/chat/components/__tests__/__snapshots__/ChatInput.test.tsx.snap @@ -62,9 +62,7 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly 1`] = ` "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingLeft": 27, "paddingRight": 24, - "paddingVertical": 18, }, { "minHeight": 120, @@ -97,10 +95,16 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly 1`] = ` style={ [ { + "borderRadius": 12, "flex": 1, "padding": 0, + "paddingLeft": 27, + "paddingVertical": 18, "textAlignVertical": "top", }, + { + "minHeight": 120, + }, { "color": "#20242D", "fontFamily": "Inter-Regular", @@ -240,9 +244,7 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly android 1`] = ` "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingLeft": 27, "paddingRight": 24, - "paddingVertical": 18, }, { "minHeight": 120, @@ -275,10 +277,16 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly android 1`] = ` style={ [ { + "borderRadius": 12, "flex": 1, "padding": 0, + "paddingLeft": 27, + "paddingVertical": 18, "textAlignVertical": "top", }, + { + "minHeight": 120, + }, [ { "color": "#20242D", @@ -423,9 +431,7 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly with containerStyle "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingLeft": 27, "paddingRight": 24, - "paddingVertical": 18, }, { "minHeight": 120, @@ -458,10 +464,16 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly with containerStyle style={ [ { + "borderRadius": 12, "flex": 1, "padding": 0, + "paddingLeft": 27, + "paddingVertical": 18, "textAlignVertical": "top", }, + { + "minHeight": 120, + }, { "color": "#20242D", "fontFamily": "Inter-Regular", diff --git a/packages/core/src/chat/components/__tests__/__snapshots__/ChatInputField.test.tsx.snap b/packages/core/src/chat/components/__tests__/__snapshots__/ChatInputField.test.tsx.snap index dc082d804..71baa6f97 100644 --- a/packages/core/src/chat/components/__tests__/__snapshots__/ChatInputField.test.tsx.snap +++ b/packages/core/src/chat/components/__tests__/__snapshots__/ChatInputField.test.tsx.snap @@ -31,9 +31,7 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly 1`] = ` "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingLeft": 27, "paddingRight": 24, - "paddingVertical": 18, }, { "minHeight": 120, @@ -67,10 +65,16 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly 1`] = ` style={ [ { + "borderRadius": 12, "flex": 1, "padding": 0, + "paddingLeft": 27, + "paddingVertical": 18, "textAlignVertical": "top", }, + { + "minHeight": 120, + }, { "color": "#20242D", "fontFamily": "Inter-Regular", @@ -124,9 +128,7 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 1 "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingLeft": 27, "paddingRight": 24, - "paddingVertical": 18, }, { "minHeight": 120, @@ -159,10 +161,16 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 1 style={ [ { + "borderRadius": 12, "flex": 1, "padding": 0, + "paddingLeft": 27, + "paddingVertical": 18, "textAlignVertical": "top", }, + { + "minHeight": 120, + }, { "color": "#20242D", "fontFamily": "Inter-Regular", @@ -215,9 +223,7 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 2 "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingLeft": 27, "paddingRight": 24, - "paddingVertical": 18, }, { "minHeight": 120, @@ -250,10 +256,16 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 2 style={ [ { + "borderRadius": 12, "flex": 1, "padding": 0, + "paddingLeft": 27, + "paddingVertical": 18, "textAlignVertical": "top", }, + { + "minHeight": 120, + }, { "color": "#20242D", "fontFamily": "Inter-Regular", @@ -306,9 +318,7 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly with props 1`] "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingLeft": 27, "paddingRight": 24, - "paddingVertical": 18, }, { "minHeight": 120, @@ -344,10 +354,16 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly with props 1`] style={ [ { + "borderRadius": 12, "flex": 1, "padding": 0, + "paddingLeft": 27, + "paddingVertical": 18, "textAlignVertical": "top", }, + { + "minHeight": 120, + }, { "color": "#20242D", "fontFamily": "Inter-Regular", diff --git a/packages/core/src/inputs/components/InputField/InputField.tsx b/packages/core/src/inputs/components/InputField/InputField.tsx index d3a701e13..a90f3e814 100644 --- a/packages/core/src/inputs/components/InputField/InputField.tsx +++ b/packages/core/src/inputs/components/InputField/InputField.tsx @@ -98,7 +98,7 @@ const InputField = forwardRef((props, ref) => { Date: Thu, 11 Jan 2024 23:32:17 +0300 Subject: [PATCH 2/4] chore(InputField): deleted comment --- packages/core/src/inputs/components/InputField/stylesCreate.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/src/inputs/components/InputField/stylesCreate.ts b/packages/core/src/inputs/components/InputField/stylesCreate.ts index 321b6b8bb..be2e0d884 100644 --- a/packages/core/src/inputs/components/InputField/stylesCreate.ts +++ b/packages/core/src/inputs/components/InputField/stylesCreate.ts @@ -32,7 +32,6 @@ const defaultStyle = ( padding: 0, // Android по дефолту ставит padding на input's paddingVertical: multiline ? spaces.Space12 : 0, borderRadius: spaces.Space8, - // backgroundColor: 'red', }, androidTextInput: { From 2e20b7dedd9887da35ea59d2482d0c7d1d1efcd4 Mon Sep 17 00:00:00 2001 From: vpsmolina Date: Fri, 12 Jan 2024 10:27:50 +0300 Subject: [PATCH 3/4] chore(InputField): added paddingRight for rightIcon --- .../__snapshots__/ChatInput.test.tsx.snap | 9 +++-- .../ChatInputField.test.tsx.snap | 12 ++++-- .../components/InputField/InputField.tsx | 14 ++++++- .../__snapshots__/InputField.test.tsx.snap | 39 ++++++++++++------- .../components/InputField/stylesCreate.ts | 2 +- 5 files changed, 53 insertions(+), 23 deletions(-) diff --git a/packages/core/src/chat/components/__tests__/__snapshots__/ChatInput.test.tsx.snap b/packages/core/src/chat/components/__tests__/__snapshots__/ChatInput.test.tsx.snap index d27f3cad4..9b9be65e2 100644 --- a/packages/core/src/chat/components/__tests__/__snapshots__/ChatInput.test.tsx.snap +++ b/packages/core/src/chat/components/__tests__/__snapshots__/ChatInput.test.tsx.snap @@ -62,11 +62,11 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly 1`] = ` "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingRight": 24, }, { "minHeight": 120, }, + null, [ { "alignItems": "center", @@ -99,6 +99,7 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly 1`] = ` "flex": 1, "padding": 0, "paddingLeft": 27, + "paddingRight": 24, "paddingVertical": 18, "textAlignVertical": "top", }, @@ -244,11 +245,11 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly android 1`] = ` "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingRight": 24, }, { "minHeight": 120, }, + null, [ { "alignItems": "center", @@ -281,6 +282,7 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly android 1`] = ` "flex": 1, "padding": 0, "paddingLeft": 27, + "paddingRight": 24, "paddingVertical": 18, "textAlignVertical": "top", }, @@ -431,11 +433,11 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly with containerStyle "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingRight": 24, }, { "minHeight": 120, }, + null, [ { "alignItems": "center", @@ -468,6 +470,7 @@ exports[`@lad-tech/mobydick-core/ChatInput renders correctly with containerStyle "flex": 1, "padding": 0, "paddingLeft": 27, + "paddingRight": 24, "paddingVertical": 18, "textAlignVertical": "top", }, diff --git a/packages/core/src/chat/components/__tests__/__snapshots__/ChatInputField.test.tsx.snap b/packages/core/src/chat/components/__tests__/__snapshots__/ChatInputField.test.tsx.snap index 71baa6f97..2220bfc49 100644 --- a/packages/core/src/chat/components/__tests__/__snapshots__/ChatInputField.test.tsx.snap +++ b/packages/core/src/chat/components/__tests__/__snapshots__/ChatInputField.test.tsx.snap @@ -31,11 +31,11 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly 1`] = ` "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingRight": 24, }, { "minHeight": 120, }, + null, [ { "alignItems": "center", @@ -69,6 +69,7 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly 1`] = ` "flex": 1, "padding": 0, "paddingLeft": 27, + "paddingRight": 24, "paddingVertical": 18, "textAlignVertical": "top", }, @@ -128,11 +129,11 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 1 "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingRight": 24, }, { "minHeight": 120, }, + null, [ { "alignItems": "center", @@ -165,6 +166,7 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 1 "flex": 1, "padding": 0, "paddingLeft": 27, + "paddingRight": 24, "paddingVertical": 18, "textAlignVertical": "top", }, @@ -223,11 +225,11 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 2 "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingRight": 24, }, { "minHeight": 120, }, + null, [ { "alignItems": "center", @@ -260,6 +262,7 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly focused/blur 2 "flex": 1, "padding": 0, "paddingLeft": 27, + "paddingRight": 24, "paddingVertical": 18, "textAlignVertical": "top", }, @@ -318,11 +321,11 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly with props 1`] "flexDirection": "row", "justifyContent": "space-between", "marginVertical": 12, - "paddingRight": 24, }, { "minHeight": 120, }, + null, [ { "alignItems": "center", @@ -358,6 +361,7 @@ exports[`@lad-tech/mobydick-core/ChatInputField renders correctly with props 1`] "flex": 1, "padding": 0, "paddingLeft": 27, + "paddingRight": 24, "paddingVertical": 18, "textAlignVertical": "top", }, diff --git a/packages/core/src/inputs/components/InputField/InputField.tsx b/packages/core/src/inputs/components/InputField/InputField.tsx index a90f3e814..464fc0e9f 100644 --- a/packages/core/src/inputs/components/InputField/InputField.tsx +++ b/packages/core/src/inputs/components/InputField/InputField.tsx @@ -67,7 +67,7 @@ const InputField = forwardRef((props, ref) => { } else { return fontStyle; } - }, [fontStyle.color]); + }, [fontStyle]); const onFocusInput = useCallback( (event: NativeSyntheticEvent) => { @@ -87,6 +87,11 @@ const InputField = forwardRef((props, ref) => { const getHeight = () => { return multiline ? {minHeight: rem(80)} : {height: rem(48)}; }; + + const getPadding = useCallback(() => { + return rightIcon ? {paddingRight: rem(16)} : null; + }, [rightIcon]); + return ( {title && ( @@ -94,7 +99,12 @@ const InputField = forwardRef((props, ref) => { )} + style={[ + styles.inputContainer, + getHeight(), + getPadding(), + textInputContainerStyle, + ]}> Date: Fri, 12 Jan 2024 10:30:51 +0300 Subject: [PATCH 4/4] chore(InputField): changed deps --- packages/core/src/inputs/components/InputField/InputField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/inputs/components/InputField/InputField.tsx b/packages/core/src/inputs/components/InputField/InputField.tsx index 464fc0e9f..b945c7503 100644 --- a/packages/core/src/inputs/components/InputField/InputField.tsx +++ b/packages/core/src/inputs/components/InputField/InputField.tsx @@ -67,7 +67,7 @@ const InputField = forwardRef((props, ref) => { } else { return fontStyle; } - }, [fontStyle]); + }, [fontStyle.color]); const onFocusInput = useCallback( (event: NativeSyntheticEvent) => {