@masumdev/rn-fab
Version:
A highly customizable Floating Action Button (FAB) component for React Native. Supports multiple variants including single, extended, stacked, clustered, and doted layouts. Built with smooth animations and optimized for both iOS and Android platforms.
150 lines (149 loc) • 4.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Fab = void 0;
var _reactNative = require("react-native");
var _FabClustered = _interopRequireDefault(require("./FabClustered"));
var _FabDoted = _interopRequireDefault(require("./FabDoted"));
var _FabExtended = _interopRequireDefault(require("./FabExtended"));
var _FabSingle = _interopRequireDefault(require("./FabSingle"));
var _FabStacked = _interopRequireDefault(require("./FabStacked"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* Floating Action Button (FAB) component for React Native
*
* @component
* @example
* // Single FAB
* <Fab
* variant="single"
* icon={<YourIconComponent />} // Custom component for the icon
* onPress={() => console.log('FAB pressed')}
* theme="light" // or "dark"
* style={{ // Optional custom styles
* backgroundColor: '#007AFF'
* }}
* />
*
* @example
* // Extended FAB with label
* <Fab
* variant="extended"
* items={[
* {
* icon: <YourIconComponent />,
* label: "Edit",
* onPress: () => console.log('Edit pressed')
* }
* ]}
* theme="light"
* />
*
* @example
* // Stacked FAB with multiple actions
* <Fab
* variant="stacked"
* items={[
* {
* icon: <EditIcon />,
* onPress: () => console.log('Edit')
* },
* {
* icon: <DeleteIcon />,
* onPress: () => console.log('Delete')
* }
* ]}
* theme="light"
* style={{ backgroundColor: '#007AFF' }}
* />
*
* @example
* // Clustered FAB
* <Fab
* variant="clustered"
* items={[
* {
* icon: <CameraIcon />,
* label: "Camera",
* onPress: () => console.log('Camera')
* },
* {
* icon: <GalleryIcon />,
* label: "Gallery",
* onPress: () => console.log('Gallery')
* }
* ]}
* theme="light"
* />
*
* @example
* // Doted FAB with indicators
* <Fab
* variant="doted"
* items={[
* {
* icon: <HomeIcon />,
* onPress: () => console.log('Home')
* },
* {
* icon: <SettingsIcon />,
* onPress: () => console.log('Settings')
* }
* ]}
* theme="light"
* isOpen={isOpen}
* plusIcon={<CustomPlusIcon />} // Optional custom plus icon
* />
*
* @param {FabProps} props - The props for the FAB component
* @param {('single'|'extended'|'stacked'|'clustered'|'doted')} [props.variant='single'] - The variant of the FAB
* @param {ReactNode} [props.icon] - Custom icon for single variant
* @param {ReactNode} [props.plusIcon] - Custom plus icon for doted variant
* @param {Array<{ icon: ReactNode, label?: string, onPress: () => void }>} [props.items] - Items for extended, stacked, clustered, and doted variants
* @param {() => void} [props.onPress] - Callback function for single variant
* @param {'light'|'dark'} [props.theme='light'] - Theme of the FAB
* @param {ViewStyle} [props.style] - Custom styles for the FAB
* @param {boolean} [props.isOpen] - Control open state for doted variant
* @returns {JSX.Element} Rendered FAB component
*/const Fab = props => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
position: 'absolute',
bottom: 0,
right: 0,
left: 0
},
children: (() => {
switch (props.variant) {
case 'clustered':
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FabClustered.default, {
...props
});
case 'doted':
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FabDoted.default, {
...props
});
case 'extended':
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FabExtended.default, {
...props
});
case 'single':
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FabSingle.default, {
...props
});
case 'stacked':
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FabStacked.default, {
...props
});
default:
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FabSingle.default, {
...props
});
}
})()
});
};
exports.Fab = Fab;
//# sourceMappingURL=Fab.js.map