import { TextProps as RNTextProps } from 'react-native' ; import { createComponent , createElement , createHook } from 'bumbag/utils' ; import { Box , BoxProps } from '../Box' ; import * as styles from './Heading.styles' ; export type LocalHeadingProps = { } ; export type HeadingProps = BoxProps & RNTextProps & LocalHeadingProps ; const useProps = createHook < HeadingProps > ( ( props ) => { const boxProps = Box . useProps ( props ) ; return { ... boxProps } ; } , { defaultProps : { font : 'heading' } , themeKey : 'native.Heading' } ) ; export const Heading = createComponent < HeadingProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledHeading , htmlProps : { ... htmlProps , font : props . font || props . fontFamily } , } ) ; } , { attach : { useProps , displayName : 'native.Heading' , } , themeKey : 'native.Heading' , } ) ; export const H1 = createComponent < HeadingProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledHeading , htmlProps : { ... htmlProps , font : props . font || props . fontFamily , type : 'H1' , } , } ) ; } , { attach : { useProps , displayName : 'native.Heading.H1' , } , themeKey : 'native.Heading.H1' , } ) ; export const H2 = createComponent < HeadingProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledHeading , htmlProps : { ... htmlProps , font : props . font || props . fontFamily , type : 'H2' , } , } ) ; } , { attach : { useProps , displayName : 'native.Heading.H2' , } , themeKey : 'native.Heading.H2' , } ) ; export const H3 = createComponent < HeadingProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledHeading , htmlProps : { ... htmlProps , font : props . font || props . fontFamily , type : 'H3' , } , } ) ; } , { attach : { useProps , displayName : 'native.Heading.H3' , } , themeKey : 'native.Heading.H3' , } ) ; export const H4 = createComponent < HeadingProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledHeading , htmlProps : { ... htmlProps , font : props . font || props . fontFamily , type : 'H4' , } , } ) ; } , { attach : { useProps , displayName : 'native.Heading.H4' , } , themeKey : 'native.Heading.H4' , } ) ; export const H5 = createComponent < HeadingProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledHeading , htmlProps : { ... htmlProps , font : props . font || props . fontFamily , type : 'H5' , } , } ) ; } , { attach : { useProps , displayName : 'native.Heading.H5' , } , themeKey : 'native.Heading.H5' , } ) ; export const H6 = createComponent < HeadingProps > ( ( props ) => { const htmlProps = useProps ( props ) ; return createElement ( { children : props . children , component : styles . StyledHeading , htmlProps : { ... htmlProps , type : 'H6' , } , } ) ; } , { attach : { useProps , displayName : 'native.Heading.H6' , } , themeKey : 'native.Heading.H6' , } ) ;