@devloops/react-native-variant/lib/commonjs/Components/Buttons/Button.js

react-native material ui library

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.Button=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _Ripple=_interopRequireDefault(require("../Core/Ripple"));var _Typography=_interopRequireDefault(require("../Core/Typography"));var _Surface=_interopRequireDefault(require("../Core/Surface"));var _Icon=_interopRequireDefault(require("../Core/Icon"));var _color=_interopRequireDefault(require("color"));var _Theming=require("../../Theming");var _styleGenerator=require("../../Helpers/styleGenerator");var _propTypes=_interopRequireDefault(require("prop-types"));var _jsxFileName="/Users/devloops/Desktop/reactNative/reactNativeMUI/src/Components/Buttons/Button.tsx";var Button=function Button(_ref){var _ref$variant=_ref.variant,variant=_ref$variant===void 0?'text':_ref$variant,children=_ref.children,_ref$cornerRadius=_ref.cornerRadius,cornerRadius=_ref$cornerRadius===void 0?4:_ref$cornerRadius,_ref$elevation=_ref.elevation,elevation=_ref$elevation===void 0?2:_ref$elevation,_ref$paperProps=_ref.paperProps,paperProps=_ref$paperProps===void 0?{padding:[0,8],margin:2}:_ref$paperProps,_ref$color=_ref.color,color=_ref$color===void 0?'#000':_ref$color,_ref$role=_ref.role,role=_ref$role===void 0?'button':_ref$role,style=_ref.style,_ref$size=_ref.size,size=_ref$size===void 0?20:_ref$size,_ref$type=_ref.type,type=_ref$type===void 0?'button':_ref$type,_ref$dense=_ref.dense,dense=_ref$dense===void 0?false:_ref$dense,_ref$fullWidth=_ref.fullWidth,fullWidth=_ref$fullWidth===void 0?false:_ref$fullWidth,iconFontFamily=_ref.iconFontFamily,rippleStyle=_ref.rippleStyle,onLayout=_ref.onLayout,buttonRef=_ref.buttonRef,theme=_ref.theme,containerStyle=_ref.containerStyle,icon=_ref.icon,textProps=_ref.textProps,_ref$transform=_ref.transform,transform=_ref$transform===void 0?'capitalize':_ref$transform,props=(0,_objectWithoutProperties2.default)(_ref,["variant","children","cornerRadius","elevation","paperProps","color","role","style","size","type","dense","fullWidth","iconFontFamily","rippleStyle","onLayout","buttonRef","theme","containerStyle","icon","textProps","transform"]);var themeControl=(0,_Theming.useTheme)(theme);var isDefaultButton=role==='button';color=color&&color in themeControl.color?themeControl.color[color]:color?color:themeControl.color.primary;var textColor=!color&&role==='button'?themeControl.color.primary:role!=='button'?themeControl.color.primary:(0,_color.default)(color).isDark()?variant==='contained'?'white':color:color;return _react.default.createElement(_Ripple.default,(0,_extends2.default)({rippleOpacity:(0,_color.default)(textColor).isDark()?0.4:undefined,style:[rippleStyle,{margin:4,borderRadius:cornerRadius,overflow:'hidden'},buttonStyleGenerator(isDefaultButton?variant:role==='fab'?'contained':'text',variant==='contained'?color:textColor),variant==='contained'&&(0,_styleGenerator.elevationShadowStyle)(elevation)],rippleDuration:300,rippleColor:(0,_color.default)(variant!=='contained'?color:textColor).isDark()?(0,_color.default)(variant!=='contained'?color:textColor).lighten(0.7).rgb().toString():(0,_color.default)(variant!=='contained'?color:textColor).darken(0.2).toString()},props,{__source:{fileName:_jsxFileName,lineNumber:82}}),_react.default.createElement(_reactNative.Animated.View,{ref:buttonRef,onLayout:onLayout,style:[{borderRadius:!isDefaultButton?dense?size-4:size+4:cornerRadius,overflow:'hidden'},containerStyle,!isDefaultButton&&fullWidth===false?{alignSelf:'flex-start'}:{}],__source:{fileName:_jsxFileName,lineNumber:109}},_react.default.createElement(_Surface.default,(0,_extends2.default)({},paperProps,{direction:"row",justify:type==='drawer'?'flex-start':'center',alignItems:"center",alignContent:"center",margin:[0,8],padding:0,style:_reactNative.StyleSheet.flatten([style,{backgroundColor:'transparent',borderRadius:cornerRadius,minHeight:36}]),__source:{fileName:_jsxFileName,lineNumber:126}}),icon&&_react.default.createElement(_Icon.default,{name:icon,color:type==='button'&&variant==='contained'?(0,_color.default)(textColor).isDark()?'white':textColor:textColor,family:iconFontFamily,size:size-(dense?4:0),style:{marginLeft:8},__source:{fileName:_jsxFileName,lineNumber:144}}),role==='button'&&_react.default.createElement(_react.default.Fragment,null,typeof children==='string'?_react.default.createElement(_Typography.default,(0,_extends2.default)({dense:dense,style:{textTransform:transform,textAlign:'center',marginHorizontal:8},weight:"500",variant:"button"},textProps,{contrast:1,color:type==='button'&&variant==='contained'?(0,_color.default)(textColor).isDark()?'white':themeControl.dark?'white':textColor:textColor,__source:{fileName:_jsxFileName,lineNumber:163}}),children):children))));};exports.Button=Button;var buttonStyleGenerator=function buttonStyleGenerator(variant,color){var style={};switch(variant){case'text':style['backgroundColor']='transparent';style['elevation']=0;style['shadowOpacity']=0;break;case'outlined':style['borderWidth']=1;style['borderColor']=(0,_color.default)(color).alpha(0.5).toString();style['backgroundColor']='transparent';style['elevation']=0;style['shadowOpacity']=0;break;case'contained':style['backgroundColor']=color;break;default:break;}return style;};Button.defaultProps={variant:'text',cornerRadius:4,elevation:2,paperProps:{padding:[0,8],margin:2},role:'button',size:20,type:'button',dense:false,fullWidth:false,transform:'capitalize'};Button.propTypes={iconFontFamily:_propTypes.default.oneOf(['material','materialCommunity','simpleLine','fa','fa5','fa5pro','foundation','evil','octicons','ionic','feather','entypo','zocial']),variant:_propTypes.default.oneOf(['text','outlined','contained']),type:_propTypes.default.oneOf(['button','drawer','dialog']),role:_propTypes.default.oneOf(['fab','icon','button']),paperProps:_propTypes.default.object,color:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.oneOf(['primary']),_propTypes.default.oneOf(['secondary'])]),cornerRadius:_propTypes.default.number,elevation:_propTypes.default.number,size:_propTypes.default.number,dense:_propTypes.default.bool,fullWidth:_propTypes.default.bool,onLayout:_propTypes.default.any,textProps:_propTypes.default.any,transform:_propTypes.default.oneOf(['none','capitalize','uppercase','lowercase']),icon:_propTypes.default.string,theme:_propTypes.default.object,containerStyle:_propTypes.default.any,style:_propTypes.default.any,rippleStyle:_propTypes.default.any,buttonRef:_propTypes.default.any};var _default=Button;exports.default=_default;
//# sourceMappingURL=Button.js.map