feat(input): update input styles when view & flex props are intercros…

…sed each other (#1351)
akveo · Mar 26, 2021 · b9dbd58 · b9dbd58
1 parent ab5cac7
commit b9dbd58
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/src/components/devsupport/index.ts b/src/components/devsupport/index.ts
@@ -33,6 +33,7 @@ export {
   PropsService,
   TextStyleProps,
   FlexStyleProps,
+  FlexViewCrossStyleProps,
 } from './services/props/props.service';
 
 export * from './typings';
diff --git a/src/components/devsupport/services/props/props.service.ts b/src/components/devsupport/services/props/props.service.ts
@@ -91,6 +91,16 @@ export const FlexStyleProps: string[] = [
   'direction',
 ];
 
+const FlexViewCrossStyleValues = [
+  'borderBottomWidth',
+  'borderLeftWidth',
+  'borderRightWidth',
+  'borderTopWidth',
+  'borderWidth',
+];
+
+export const FlexViewCrossStyleProps: string[] = FlexStyleProps.filter((el) => !FlexViewCrossStyleValues.includes(el));
+
 export interface Props {
   [key: string]: any;
 }

diff --git a/src/components/ui/input/input.component.tsx b/src/components/ui/input/input.component.tsx
@@ -25,6 +25,7 @@ import {
   FalsyFC,
   FalsyText,
   FlexStyleProps,
+  FlexViewCrossStyleProps,
   PropsService,
   RenderProp,
   WebEventResponder,
@@ -181,7 +182,7 @@ export class Input extends React.Component<InputProps> implements WebEventRespon
 
   private getComponentStyle = (source: StyleType) => {
     const flatStyles: ViewStyle = StyleSheet.flatten(this.props.style);
-    const { rest: inputContainerStyle, ...containerStyle } = PropsService.allWithRest(flatStyles, FlexStyleProps);
+    const { rest: inputContainerStyle, ...containerStyle } = PropsService.allWithRest(flatStyles, FlexViewCrossStyleProps);
 
     const {
       textMarginHorizontal,