From 3dff1a19a8ddf116e007cd00f17e426b2a4d81b4 Mon Sep 17 00:00:00 2001 From: Du Spada Date: Fri, 16 Jul 2021 14:20:31 -0300 Subject: [PATCH 1/2] feat(refactor): buttons --- src/components/Button/index.tsx | 26 +++++++++++++++++++++- src/components/Button/styles.ts | 23 ++++++++++++++++++-- src/components/LabelDivider/index.tsx | 18 ++++++++++++++++ src/components/LabelDivider/styles.ts | 31 +++++++++++++++++++++++++++ src/components/index.ts | 1 + src/types/Button.ts | 6 ++++++ 6 files changed, 102 insertions(+), 3 deletions(-) create mode 100644 src/components/LabelDivider/index.tsx create mode 100644 src/components/LabelDivider/styles.ts diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 77459245..8ff85dd8 100644 --- a/src/components/Button/index.tsx +++ b/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 = ({ id, @@ -17,6 +17,12 @@ const Button: FC = ({ contrast = false, variant = 'primary', typographyVariant = 'body', + minWidth, + maxWidth, + rightIconColor, + rightIconName, + leftIconName, + leftIconColor, }) => { return ( = ({ style={style} disabled={disabled} rounded={rounded} + minWidth={minWidth} + maxWidth={maxWidth} > {loading && } {!loading && ( <> + {!!leftIconName && ( + + )} = ({ > {children} + {!!rightIconName && ( + + )} )} diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts index 9ad2d26b..766f88de 100644 --- a/src/components/Button/styles.ts +++ b/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,17 @@ 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; buttonVariant: ButtonVariants; disabled?: boolean; style: any; + minWidth?: string | number; + maxWidth?: string | number; }; const buttonSize = moderateScale(45); @@ -88,7 +94,10 @@ export const ButtonWrapper = styled.View` 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 => @@ -112,3 +121,13 @@ export const Loading = styled(LoadingIndicator).attrs({ align-self: center; width: ${moderateScale(55)}px; `; + +type Props = { + rightIcon?: boolean; + leftIcon?: boolean; +}; + +export const Icon = styled(DefaultIcon)` + margin-right: ${isLeftIcon(smallSpacing, 0)}; + margin-left: ${isRightIcon(smallSpacing, 0)}; +`; diff --git a/src/components/LabelDivider/index.tsx b/src/components/LabelDivider/index.tsx new file mode 100644 index 00000000..2d34ab83 --- /dev/null +++ b/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 = ({ text, marginTop, marginBottom }) => ( + + + {text} + + +); + +export default LabelDivider; diff --git a/src/components/LabelDivider/styles.ts b/src/components/LabelDivider/styles.ts new file mode 100644 index 00000000..b7ff8e6f --- /dev/null +++ b/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; +`; diff --git a/src/components/index.ts b/src/components/index.ts index 1ce0286a..5546d521 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/types/Button.ts b/src/types/Button.ts index c273e6b7..3e52f6bd 100644 --- a/src/types/Button.ts +++ b/src/types/Button.ts @@ -12,4 +12,10 @@ export type ButtonProps = { variant?: ButtonVariants; typographyVariant?: TypographyVariants; children?: string | ReactNode; + minWidth?: string | number; + maxWidth?: string | number; + leftIconColor?: string; + leftIconName?: string; + rightIconName?: string; + rightIconColor?: string; } & TouchableType; From 64d3c9973ab2ff3d42b12031d3bd541379c7839b Mon Sep 17 00:00:00 2001 From: Du Spada Date: Fri, 16 Jul 2021 16:17:29 -0300 Subject: [PATCH 2/2] feat(refactor): buttons and border --- package.json | 2 +- src/components/Button/index.tsx | 10 ++++++---- src/components/Button/styles.ts | 13 ++++++++++--- src/types/Button.ts | 3 +-- 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 7d1be015..5fc53570 100644 --- a/package.json +++ b/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", diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 8ff85dd8..339554fd 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -19,10 +19,9 @@ const Button: FC = ({ typographyVariant = 'body', minWidth, maxWidth, - rightIconColor, rightIconName, leftIconName, - leftIconColor, + hasBorder = false, }) => { return ( = ({ rounded={rounded} > = ({ )} @@ -65,7 +66,8 @@ const Button: FC = ({ )} diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts index 766f88de..10c1164b 100644 --- a/src/components/Button/styles.ts +++ b/src/components/Button/styles.ts @@ -25,6 +25,7 @@ const isRightIcon = ifStyle('rightIcon'); type ButtonWrapperProps = { rounded: boolean; + hasBorder: boolean; buttonVariant: ButtonVariants; disabled?: boolean; style: any; @@ -106,7 +107,9 @@ export const ButtonWrapper = styled.View` 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)` @@ -122,12 +125,16 @@ export const Loading = styled(LoadingIndicator).attrs({ width: ${moderateScale(55)}px; `; -type Props = { +type IconProps = { rightIcon?: boolean; leftIcon?: boolean; + buttonVariant: ButtonVariants; + style: any; }; -export const Icon = styled(DefaultIcon)` +export const Icon = styled(DefaultIcon).attrs((props: IconProps) => ({ + color: getTextColor(props), +}))` margin-right: ${isLeftIcon(smallSpacing, 0)}; margin-left: ${isRightIcon(smallSpacing, 0)}; `; diff --git a/src/types/Button.ts b/src/types/Button.ts index 3e52f6bd..1c886d82 100644 --- a/src/types/Button.ts +++ b/src/types/Button.ts @@ -14,8 +14,7 @@ export type ButtonProps = { children?: string | ReactNode; minWidth?: string | number; maxWidth?: string | number; - leftIconColor?: string; leftIconName?: string; rightIconName?: string; - rightIconColor?: string; + hasBorder?: boolean; } & TouchableType;