@syncfusion/react-buttons
Version:
Syncfusion React Buttons package is a feature-rich collection of UI components including Button, CheckBox, RadioButton, Switch, Chip, and more for building modern, interactive React applications.
133 lines (132 loc) • 4.79 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useRef, useImperativeHandle, forwardRef, useEffect, useMemo, memo } from 'react';
import { Button } from '../button/button';
import { preRender, useProviderContext, Color, Position } from '@syncfusion/react-base';
/**
* Defines the position of FAB (Floating Action Button) in target.
*/
export var FabPosition;
(function (FabPosition) {
/**
* Positions the FAB at the target's top left corner.
*/
FabPosition["TopLeft"] = "TopLeft";
/**
* Places the FAB on the top-center position of the target.
*/
FabPosition["TopCenter"] = "TopCenter";
/**
* Positions the FAB at the target's top right corner.
*/
FabPosition["TopRight"] = "TopRight";
/**
* Positions the FAB in the middle of target's left side.
*/
FabPosition["MiddleLeft"] = "MiddleLeft";
/**
* Positions the FAB in the center of target.
*/
FabPosition["MiddleCenter"] = "MiddleCenter";
/**
* Positions the FAB in the middle of target's right side.
*/
FabPosition["MiddleRight"] = "MiddleRight";
/**
* Positions the FAB at the target's bottom left corner.
*/
FabPosition["BottomLeft"] = "BottomLeft";
/**
* Places the FAB on the bottom-center position of the target.
*/
FabPosition["BottomCenter"] = "BottomCenter";
/**
* Positions the FAB at the target's bottom right corner.
*/
FabPosition["BottomRight"] = "BottomRight";
})(FabPosition || (FabPosition = {}));
const getFabPositionClasses = (position) => {
let vertical = '';
let horizontal = '';
switch (position) {
case FabPosition.TopLeft:
vertical = 'sf-fab-top';
horizontal = 'sf-fab-left';
break;
case FabPosition.TopCenter:
vertical = 'sf-fab-top';
horizontal = 'sf-fab-center';
break;
case FabPosition.TopRight:
vertical = 'sf-fab-top';
horizontal = 'sf-fab-right';
break;
case FabPosition.MiddleLeft:
vertical = 'sf-fab-middle';
horizontal = 'sf-fab-left';
break;
case FabPosition.MiddleCenter:
vertical = 'sf-fab-middle';
horizontal = 'sf-fab-center';
break;
case FabPosition.MiddleRight:
vertical = 'sf-fab-middle';
horizontal = 'sf-fab-right';
break;
case FabPosition.BottomLeft:
vertical = 'sf-fab-bottom';
horizontal = 'sf-fab-left';
break;
case FabPosition.BottomCenter:
vertical = 'sf-fab-bottom';
horizontal = 'sf-fab-center';
break;
case FabPosition.BottomRight:
default:
vertical = 'sf-fab-bottom';
horizontal = 'sf-fab-right';
break;
}
return [vertical, horizontal].filter(Boolean);
};
/**
* The Floating Action Button (FAB) component offers a prominent primary action for an application interface, prominently positioned and styled to stand out with custom icon support.
*
* ```typescript
* import { Fab, Color, FabPosition } from "@syncfusion/react-buttons";
*
* <Fab color={Color.Success} position={FabPosition.BottomLeft}>FAB</Fab>
* ```
*/
export const Fab = forwardRef((props, ref) => {
const buttonRef = useRef(null);
const { dir } = useProviderContext();
const { disabled = false, position = FabPosition.BottomRight, iconPosition = Position.Left, className = '', toggleable = false, icon, children, color = Color.Primary, size, visible = true, ...domProps } = props;
const fabPositionClasses = useMemo(() => getFabPositionClasses(position), [position]);
const classNames = useMemo(() => ([
'sf-control',
'sf-fab',
'sf-btn',
className || '',
visible ? '' : 'sf-fab-hidden',
dir === 'rtl' ? 'sf-rtl' : '',
icon && !children ? 'sf-icon-btn' : '',
...fabPositionClasses
].filter(Boolean).join(' ')), [className, visible, dir, icon, children, fabPositionClasses]);
const publicAPI = useMemo(() => ({
iconPosition,
icon,
toggleable,
visible,
color,
size
}), [iconPosition, icon, toggleable, visible, color, size]);
useImperativeHandle(ref, () => ({
...publicAPI,
element: buttonRef.current?.element
}), [publicAPI]);
useEffect(() => {
preRender('fab');
}, []);
return (_jsx(Button, { ref: buttonRef, className: classNames, icon: icon, color: color, size: size, disabled: disabled, iconPosition: icon ? iconPosition : undefined, toggleable: toggleable, ...domProps, children: children }));
});
export default memo(Fab);