52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import * as React from "react";
|
|
import Loader from "../loader/Loader";
|
|
|
|
export interface IFixedActionBarProps {
|
|
/** Content to be displayed on the left side of the fixed action bar */
|
|
leftContent?: React.ReactNode;
|
|
|
|
/** Content to be displayed on the right side of the fixed action bar */
|
|
rightContent?: React.ReactNode;
|
|
|
|
/** Is the fixed action bar visible. Default is true */
|
|
visible?: boolean;
|
|
|
|
/** Height of the fixed action bar. Default is 53px */
|
|
height?: number;
|
|
|
|
|
|
/** Show loading mask */
|
|
loading?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Fixed Action Bar that contains actions and is anchored at the bottom of the page or section
|
|
* @beta
|
|
*/
|
|
const FixedActionBar: React.FC<IFixedActionBarProps> = (props) => {
|
|
const { visible = true, height = 53, leftContent, rightContent, children, loading } = props;
|
|
|
|
let containerClassName = `tempo-fixed-action-bar`;
|
|
if (visible) {
|
|
containerClassName += ` tempo-fixed-action-bar--visible`;
|
|
}
|
|
|
|
return (
|
|
<Loader loading={loading}>
|
|
<div className={containerClassName} style={{ paddingBottom: visible ? height : 0 }}>
|
|
{children}
|
|
<div className="tempo-fixed-action-bar__actions" style={{ height: height }}>
|
|
{leftContent ? (
|
|
<div className="tempo-fixed-action-bar__left-content">{leftContent}</div>
|
|
) : (
|
|
<div></div>
|
|
)}
|
|
{rightContent && <div className="tempo-fixed-action-bar__right-content">{rightContent}</div>}
|
|
</div>
|
|
</div>
|
|
</Loader>
|
|
)
|
|
}
|
|
|
|
export default FixedActionBar;
|