Merge pull request #16 from platformbuilders/feat/refactor

Feat/refactor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/react-native-elements",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Platform Builders Shared Components Library For React Native",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/Button/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { ButtonProps } from '../../types';
-import { ButtonWrapper, Loading, TextButton, Touchable } from './styles';
+import { ButtonWrapper, Icon, Loading, TextButton, Touchable } from './styles';
 
 const Button: FC<ButtonProps> = ({
   id,
@@ -17,6 +17,11 @@ const Button: FC<ButtonProps> = ({
   contrast = false,
   variant = 'primary',
   typographyVariant = 'body',
+  minWidth,
+  maxWidth,
+  rightIconName,
+  leftIconName,
+  hasBorder = false,
 }) => {
   return (
     <Touchable
@@ -29,14 +34,26 @@ const Button: FC<ButtonProps> = ({
       rounded={rounded}
     >
       <ButtonWrapper
+        hasBorder={hasBorder}
         buttonVariant={variant}
         style={style}
         disabled={disabled}
         rounded={rounded}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
       >
         {loading && <Loading contrast={contrast} />}
         {!loading && (
           <>
+            {!!leftIconName && (
+              <Icon
+                accessibility=""
+                name={leftIconName as string}
+                buttonVariant={variant}
+                style={style}
+                leftIcon
+              />
+            )}
             <TextButton
               style={textStyle}
               disabled={disabled}
@@ -45,6 +62,15 @@ const Button: FC<ButtonProps> = ({
             >
               {children}
             </TextButton>
+            {!!rightIconName && (
+              <Icon
+                accessibility=""
+                name={rightIconName as string}
+                buttonVariant={variant}
+                style={style}
+                rightIcon
+              />
+            )}
           </>
         )}
       </ButtonWrapper>

src/components/Button/styles.ts

@@ -1,7 +1,8 @@
 import { moderateScale } from 'react-native-size-matters';
 import styled from 'styled-components/native';
 import { ButtonVariants, TypographyVariants } from '../../types';
-import { getTheme } from '../../utils/helpers';
+import { getTheme, ifStyle } from '../../utils/helpers';
+import DefaultIcon from '../Icon';
 import LoadingIndicator from '../LoadingIndicator';
 import TouchableComponent from '../Touchable';
 import TypographyComponent from '../Typography';
@@ -18,12 +19,18 @@ const accentMain = getTheme('accent.main');
 const accentContrast = getTheme('accent.contrast');
 const buttonRadius = getTheme('buttonRadius');
 const minimumSpacing = getTheme('minimumSpacing');
+const smallSpacing = getTheme('smallSpacing');
+const isLeftIcon = ifStyle('leftIcon');
+const isRightIcon = ifStyle('rightIcon');
 
 type ButtonWrapperProps = {
   rounded: boolean;
+  hasBorder: boolean;
   buttonVariant: ButtonVariants;
   disabled?: boolean;
   style: any;
+  minWidth?: string | number;
+  maxWidth?: string | number;
 };
 
 const buttonSize = moderateScale(45);
@@ -88,7 +95,10 @@ export const ButtonWrapper = styled.View<ButtonWrapperProps>`
   height: ${buttonSize}px;
   flex-direction: row;
   align-items: center;
-  min-width: ${moderateScale(180)}px;
+  min-width: ${({ minWidth }: ButtonWrapperProps) =>
+    minWidth || moderateScale(180) + 'px'};
+  max-width: ${({ maxWidth }: ButtonWrapperProps) => maxWidth || '100%'};
+  overflow: hidden;
   padding: ${(props: ButtonWrapperProps): string =>
     props.rounded ? '0' : minimumSpacing(props)};
   border-radius: ${(props: ButtonWrapperProps): string =>
@@ -97,7 +107,9 @@ export const ButtonWrapper = styled.View<ButtonWrapperProps>`
   background-color: ${getBackgroundColor};
   border-color: ${getTextColor};
   border: ${(props: ButtonWrapperProps) =>
-    props.buttonVariant === 'flat' ? `1px solid ${getTextColor(props)}` : '0'};
+    props.buttonVariant === 'flat' || props.hasBorder
+      ? `1px solid ${getTextColor(props)}`
+      : '0'};
 `;
 
 export const TextButton = styled(TypographyComponent)<TextButtonProps>`
@@ -112,3 +124,17 @@ export const Loading = styled(LoadingIndicator).attrs({
   align-self: center;
   width: ${moderateScale(55)}px;
 `;
+
+type IconProps = {
+  rightIcon?: boolean;
+  leftIcon?: boolean;
+  buttonVariant: ButtonVariants;
+  style: any;
+};
+
+export const Icon = styled(DefaultIcon).attrs((props: IconProps) => ({
+  color: getTextColor(props),
+}))<IconProps>`
+  margin-right: ${isLeftIcon(smallSpacing, 0)};
+  margin-left: ${isRightIcon(smallSpacing, 0)};
+`;

src/components/LabelDivider/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DividerText, Line, OptionsWrapper } from './styles';
+
+type Props = {
+  marginTop?: number;
+  marginBottom?: number;
+  text: string;
+};
+
+const LabelDivider: React.FC<Props> = ({ text, marginTop, marginBottom }) => (
+  <OptionsWrapper marginTop={marginTop} marginBottom={marginBottom}>
+    <Line />
+    <DividerText>{text}</DividerText>
+    <Line />
+  </OptionsWrapper>
+);
+
+export default LabelDivider;

src/components/LabelDivider/styles.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components/native';
+import { getTheme } from '../../utils/helpers';
+import Typography from '../Typography';
+
+const smallerSpacing = getTheme('smallerSpacing');
+const disabled = getTheme('texts.dark');
+
+type Props = {
+  marginTop?: number;
+  marginBottom?: number;
+};
+
+export const OptionsWrapper = styled.View`
+  margin-top: ${({ marginTop }: Props) => marginTop || 0}px;
+  margin-bottom: ${({ marginBottom }: Props) => marginBottom || 0}px;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Line = styled.View`
+  width: 33%;
+  height: 1px;
+  background-color: ${disabled}90;
+`;
+
+export const DividerText = styled(Typography)`
+  padding: ${smallerSpacing};
+  color: ${disabled}90;
+  font-weight: bold;
+`;

src/components/index.ts

@@ -21,3 +21,4 @@ export { default as Accordion } from './Accordion';
 export { default as RadioButton } from './RadioButton';
 export { default as SearchInput } from './SearchInput';
 export { default as DisplayVersion } from './DisplayVersion';
+export { default as LabelDivider } from './LabelDivider';

src/types/Button.ts

@@ -12,4 +12,9 @@ export type ButtonProps = {
   variant?: ButtonVariants;
   typographyVariant?: TypographyVariants;
   children?: string | ReactNode;
+  minWidth?: string | number;
+  maxWidth?: string | number;
+  leftIconName?: string;
+  rightIconName?: string;
+  hasBorder?: boolean;
 } & TouchableType;