@cdek-it/react-native-ui-kit 0.2.5 → 0.2.7

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

@@ -109,10 +109,9 @@ export const InputTextBase = memo(
 
             {input}
           </>) : (<View style={styles.inputContainer}>
-            {input}
-
-            <Text style={[
+            <Text pointerEvents='none' style={[
                 styles.inputFont,
+                styles.placeholder,
                 styles.placeholderTextColor,
                 otherProps.placeholderTextColor && {
                     color: otherProps.placeholderTextColor,
@@ -121,6 +120,8 @@ export const InputTextBase = memo(
             ]} testID={makeTestId(InputTextBaseTestId.placeholder)}>
               {placeholder}
             </Text>
+
+            {input}
           </View>)}
 
         <View style={styles.rightContainer}>

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

@@ -6,7 +6,6 @@ export declare const useStyles: () => {
         borderRadius: number;
         borderColor: string;
         backgroundColor: string;
-        alignItems: "center";
     };
     containerFocused: {
         outlineColor: string;
@@ -16,7 +15,6 @@ export declare const useStyles: () => {
         minHeight: number;
         maxHeight: number;
         height: number;
-        alignItems: "stretch";
     };
     danger: {
         borderColor: string;
@@ -31,15 +29,17 @@ export declare const useStyles: () => {
     };
     inputContainer: {
         flex: number;
-        marginHorizontal: number;
         paddingLeft: number;
         justifyContent: "center";
     };
     input: {
         padding: number;
+        paddingHorizontal: number;
         position: "absolute";
         left: number;
         right: number;
+        top: number;
+        bottom: number;
     };
     floatLabelInput: {
         flex: number;
@@ -56,6 +56,9 @@ export declare const useStyles: () => {
         fontFamily: string;
         verticalAlign: "middle";
     };
+    placeholder: {
+        paddingHorizontal: number;
+    };
     placeholderTextColor: {
         color: string;
     };

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

@@ -7,7 +7,6 @@ export const useStyles = makeStyles(({ theme, border, typography, spacing, fonts
         borderRadius: border.Radius['rounded-xl'],
         borderColor: theme.Form.InputText.inputBorderColor,
         backgroundColor: theme.Form.InputText.inputBg,
-        alignItems: 'center',
     },
     containerFocused: {
         outlineColor: theme.General.focusOutlineColor,
@@ -17,7 +16,6 @@ export const useStyles = makeStyles(({ theme, border, typography, spacing, fonts
         minHeight: theme.Button.Common.buttonHeightXL,
         maxHeight: theme.Button.Common.buttonHeightXL,
         height: theme.Button.Common.buttonHeightXL,
-        alignItems: 'stretch',
     },
     danger: { borderColor: theme.Form.InputText.inputErrorBorderColor },
     dangerFocused: { outlineColor: theme.General.focusOutlineErrorColor },
@@ -28,11 +26,18 @@ export const useStyles = makeStyles(({ theme, border, typography, spacing, fonts
     },
     inputContainer: {
         flex: 1,
-        marginHorizontal: theme.Form.InputText.inputPaddingLeftRight,
         paddingLeft: 2, // отступ для курсора
         justifyContent: 'center',
     },
-    input: { padding: 0, position: 'absolute', left: 0, right: 0 },
+    input: {
+        padding: 0,
+        paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+    },
     floatLabelInput: {
         flex: 1,
         paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
@@ -48,6 +53,9 @@ export const useStyles = makeStyles(({ theme, border, typography, spacing, fonts
         fontFamily: fonts.secondary,
         verticalAlign: 'middle',
     },
+    placeholder: {
+        paddingHorizontal: theme.Form.InputText.inputPaddingLeftRight,
+    },
     placeholderTextColor: {
         color: theme.Form.InputText.inputPlaceholderTextColor,
     },

package/package.json

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