diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-14 15:10:31 +0200 |
commit | e5021187e96b78b53203bd95d08d6818aea47d17 (patch) | |
tree | 37ec45d00eb963db53cd4bb4f04a770414b351cc /app/components/button/button.tsx |
New Ignite 7.0.6 app
Diffstat (limited to 'app/components/button/button.tsx')
-rw-r--r-- | app/components/button/button.tsx | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/app/components/button/button.tsx b/app/components/button/button.tsx new file mode 100644 index 0000000..a5662ff --- /dev/null +++ b/app/components/button/button.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { TouchableOpacity } from "react-native" +import { Text } from "../text/text" +import { viewPresets, textPresets } from "./button.presets" +import { ButtonProps } from "./button.props" + +/** + * For your text displaying needs. + * + * This component is a HOC over the built-in React Native one. + */ +export function Button(props: ButtonProps) { + // grab the props + const { + preset = "primary", + tx, + text, + style: styleOverride, + textStyle: textStyleOverride, + children, + ...rest + } = props + + const viewStyle = viewPresets[preset] || viewPresets.primary + const viewStyles = [viewStyle, styleOverride] + const textStyle = textPresets[preset] || textPresets.primary + const textStyles = [textStyle, textStyleOverride] + + const content = children || <Text tx={tx} text={text} style={textStyles} /> + + return ( + <TouchableOpacity style={viewStyles} {...rest}> + {content} + </TouchableOpacity> + ) +} |