fix: optimize code

nexxtway · May 4, 2020 · 31ec5f9 · 31ec5f9
1 parent 00a6c9a
commit 31ec5f9
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 18 deletions.
diff --git a/src/components/VisualPicker/index.d.ts b/src/components/VisualPicker/index.d.ts
@@ -1,5 +1,5 @@
 import { ReactNode, ComponentType } from 'react';
-import { BaseProps } from '../types';
+import { BaseProps, VisualPickerSize } from '../types';
 
 type Value = string[] | string;
 
@@ -13,7 +13,7 @@ export interface VisualPickerProps extends BaseProps {
     error?: ReactNode;
     children?: ReactNode;
     multiple?: boolean;
-    size?: string;
+    size?: VisualPickerSize;
 }
 
 declare const VisualPicker: React.ComponentType<VisualPickerProps>;

diff --git a/src/components/VisualPickerOption/styled/content.js b/src/components/VisualPickerOption/styled/content.js
@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 
+const sizeMap = { large: '210px', medium: '142px', small: '100px' };
 const StyledContent = attachThemeAttrs(styled.span)`
-    height: 142px;
+    height: ${props => sizeMap[props.size] || '142px'};
     width: 100%;
     border-radius: 22px;
     box-shadow: ${props => props.shadows.shadow_4};
@@ -13,21 +14,6 @@ const StyledContent = attachThemeAttrs(styled.span)`
     justify-content: center;
     align-items: center;
     position: relative;
-    ${props =>
-        props.size === 'large' &&
-        `
-            height: 210px;
-        `};
-    ${props =>
-        props.size === 'medium' &&
-        `
-            height: 142px;
-        `};
-    ${props =>
-        props.size === 'small' &&
-        `
-            height: 100px;
-        `};
 `;
 
 export default StyledContent;
diff --git a/src/components/types.d.ts b/src/components/types.d.ts
@@ -18,6 +18,7 @@ export type ButtonIconVariant =
     | 'border-filled'
     | 'border-inverse'
     | 'inverse';
+export type VisualPickerSize = 'small' | 'medium' | 'large';
 
 export type IconPosition = 'left' | 'right';