react-native-cross-components
Version:
Beautiful React-Native components using RN Paper by Callstack
1 lines • 6.29 kB
Source Map (JSON)
{"file":"/Users/thomas/Source/react-native-core/source/components/buttons/CrossButton.tsx","mappings":";;;;;;;;;;;;AAAA,kDAA0B;AAC1B,aAAa;AACb,2DAA4C;AAC5C,+CAAqE;AACrE,wFAAgE;AAEhE,oDAAuB;AACvB,uDAA8C;AAsE9C;;;;;;;;;;GAUG;AACH,MAAa,WAAY,SAAQ,eAAK,CAAC,SAA4B;IACjE,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC;QACvC,OAAO,CACL,8BAAC,mBAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAM,CAAC,SAAS,IAChE,gBAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAC5D,8BAAC,qBAAW,CAAC,MAAM,oBACb,IAAI,CAAC,KAAK,IACd,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,gBAAM,CAAC,SAAsB,EAC5D,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;oBACtB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;iBACtB;YACH,CAAC,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,eAAM,CAAC,UAAU,EAC5C,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE,IACpC,CACH,CAAC,CAAC,CAAC,CACF,8BAAC,2BAAM,kBACL,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,IAAI,eAAM,CAAC,UAAU,EACtD,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,IAClC,IAAI,CAAC,KAAK,IACd,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CACxB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACpB,8BAAC,qBAAW,IACV,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EACzB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,EAC7B,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAChC,KAAK,EAAE,KAAK,GACZ,CACH,CAAC,CAAC,CAAC,IAAI,EAEV,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,gBAAM,CAAC,MAAM,EAC9C,OAAO,EACL,IAAI,CAAC,KAAK,CAAC,OAAO;gBAChB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO;gBACpB,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,EAElD,IAAI,EAAE,IAAI,KAET,IAAI,CAAC,KAAK,CAAC,KAAK,CACV,CACV,CACI,CACR,CAAC;IACJ,CAAC;CACF;AA9CD,kCA8CC;AAED,kBAAe,WAAW,CAAC","names":[],"sources":["/Users/thomas/Source/react-native-core/source/components/buttons/CrossButton.tsx"],"sourcesContent":["import React from 'react';\n// @ts-ignore\nimport { Button } from 'react-native-paper';\nimport { ViewStyle, StyleProp, View, TextStyle } from 'react-native';\nimport FontAwesome from 'react-native-vector-icons/FontAwesome';\nimport { Color } from 'csstype';\nimport _ from 'lodash';\nimport styles, { Colors } from '../../styles';\n\n/**\n * Properties for the {@link CrossButton} component.\n *\n * Note the difference between {@link buttonStyle} and the regular {@link style} property.\n *\n * Remarks: react-native-paper is currently missing the option to customize `fontSize`.\n *\n * {@link iconName} is for a {@link https://fontawesome.com/v4.7.0/icons/ FontAwesome v4 icon}.\n *\n * {@link mode} is 'text'\n *\n * @typedef ICrossButtonProps\n * @type ICrossButtonProps\n */\nexport interface ICrossButtonProps {\n /**\n * Foreground (icon) color. Default is {@link Colors.CrossBlack}\n */\n color?: Color;\n /**\n * Font-Awesome 4 icon name using `react-native-vector-icons/FontAwesome`\n *\n * https://fontawesome.com/v4.7.0/icons/\n */\n iconName?: string;\n /**\n * Background color. Default value is {@link Colors.NextButton} if {@link title} was supplied\n */\n backgroundColor?: Color;\n /**\n * Style for outer container.\n *\n * See also {@link iconStyle}, {@link buttonStyle}\n */\n style?: StyleProp<ViewStyle>;\n /**\n * Optional style for the icons. See also {@link iconName}\n *\n * See also {@link buttonStyle}, {@link style}\n */\n iconStyle?: ViewStyle | TextStyle;\n /**\n * Title for the button. If not supplied a clickable icon will be displayed instead of react-native-paper button\n *\n * https://callstack.github.io/react-native-paper/button.html\n */\n title?: string;\n /**\n * Size of the icon\n */\n size?: number;\n disabled?: boolean;\n /**\n * Button visual appearence. Default is 'text'\n *\n * https://callstack.github.io/react-native-paper/button.html\n */\n mode?: 'text' | 'outlined' | 'contained';\n /**\n * Optional button styles to apply to {@link https://callstack.github.io/react-native-paper/button.html Button}.\n *\n * See also {@link iconStyle}, {@link style}\n */\n buttonStyle?: StyleProp<ViewStyle>;\n onPress?: () => void;\n compact?: boolean;\n}\n\n/**\n * A custom button that displays as an Paper Button with icon or just an icon if {@link ICrossButtonProps.title} is not supplied.\n *\n * Remarks:\n *\n * * All icons are {@link https://fontawesome.com/v4.7.0/icons/ FontAwesome v4}.\n * * react-native-paper is currently missing the option to customize `fontSize`.\n * * Default appearence is \"text\", see {@link ICrossButtonProps.mode}\n *\n * Properties are {@link ICrossButtonProps}\n */\nexport class CrossButton extends React.Component<ICrossButtonProps> {\n render() {\n const mode = this.props.mode || 'text';\n return (\n <View style={this.props.style ? this.props.style : styles.container}>\n {_.isNil(this.props.title) && !_.isNil(this.props.iconName) ? (\n <FontAwesome.Button\n {...this.props}\n style={this.props.iconStyle || styles.container as ViewStyle}\n onPress={() => {\n if (this.props.onPress) {\n this.props.onPress();\n }\n }}\n color={this.props.color || Colors.CrossBlack}\n name={this.props.iconName.toString()}\n />\n ) : (\n <Button\n color={this.props.backgroundColor || Colors.NextButton}\n disabled={this.props.disabled || false}\n {...this.props}\n icon={({ size, color }) =>\n this.props.iconName ? (\n <FontAwesome\n name={this.props.iconName}\n size={this.props.size || size}\n style={{ margin: 0, padding: 0 }}\n color={color}\n />\n ) : null\n }\n style={this.props.buttonStyle || styles.button}\n onPress={\n this.props.onPress\n ? this.props.onPress\n : () => console.log('** CrossButton press **')\n }\n mode={mode}\n >\n {this.props.title}\n </Button>\n )}\n </View>\n );\n }\n}\n\nexport default CrossButton;\n"],"version":3}