@guestbell/react-page-plugins
Version:
Plugins we use in GuestBell for working with amazing react-page package
121 lines • 3.98 kB
JavaScript
import Avatar from '@mui/material/Avatar';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
// import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Drawer from '@mui/material/Drawer';
import * as React from 'react';
import { DraftSwitch } from '../draftSwitch/DraftSwitch';
import { DuplicateButton } from '../duplicateButton/DuplicateButton';
import { PaddingButton } from '../paddingButton/PaddingButton';
import { SelectParentButton } from '../selectParentButton/SelectParentButton';
import classNames from 'classnames';
import DeleteButton from '../deleteButton/DeleteButton';
import Portal from '@mui/material/Portal';
import makeStyles from '@mui/styles/makeStyles';
import { usePluginOfCell } from '@react-page/editor';
var drawerSlideProps = {
unmountOnExit: true
};
var drawerPaperProps = {
style: {
backgroundColor: 'transparent',
border: 'none',
overflow: 'visible',
pointerEvents: 'none',
zIndex: 1001
}
};
var useStyles = makeStyles(function (theme) {
return {
childrenContainer: {
// width: '100%',
// overflow: 'auto',
'& > div > div': {
flex: 'initial !important',
overflow: 'initial !important'
}
},
paper: {
pointerEvents: 'all',
borderRadius: '4px 4px 0 0',
padding: '1rem',
paddingBottom: '0.5rem',
paddingTop: '0.5rem',
margin: 'auto',
// boxShadow: '0px 1px 8px -1px rgba(0,0,0,0.4)',
position: 'relative',
maxWidth: 'calc(100vw - 2rem)'
},
divider: {
marginLeft: '-1rem',
marginRight: '-1rem',
marginTop: '0.5rem',
marginBottom: '0.5rem'
},
avatar: {
marginRight: 'auto'
},
bottomGrid: {
overflow: 'auto'
},
pluginName: {
marginRight: 'auto'
}
};
});
var BottomToolbar = function BottomToolbar(_ref) {
var _usePluginOfCell;
var _ref$open = _ref.open,
open = _ref$open === void 0 ? false : _ref$open,
children = _ref.children,
className = _ref.className,
_ref$anchor = _ref.anchor,
anchor = _ref$anchor === void 0 ? 'bottom' : _ref$anchor,
pluginControls = _ref.pluginControls,
nodeId = _ref.nodeId;
var _useStyles = useStyles(),
paper = _useStyles.paper,
avatar = _useStyles.avatar,
bottomGrid = _useStyles.bottomGrid,
childrenContainer = _useStyles.childrenContainer,
divider = _useStyles.divider;
var _ref2 = (_usePluginOfCell = usePluginOfCell(nodeId)) !== null && _usePluginOfCell !== void 0 ? _usePluginOfCell : {},
title = _ref2.title,
icon = _ref2.icon;
return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Drawer, {
SlideProps: drawerSlideProps,
variant: "persistent",
className: className,
open: open,
anchor: anchor,
PaperProps: drawerPaperProps
}, /*#__PURE__*/React.createElement(Paper, {
className: classNames(paper, 'bottomToolbar')
}, /*#__PURE__*/React.createElement("div", {
className: childrenContainer
}, children, pluginControls), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(Divider, {
className: divider
}), /*#__PURE__*/React.createElement(Grid, {
container: true,
direction: "row",
alignItems: "center",
wrap: "nowrap",
className: bottomGrid
}, icon || title ? /*#__PURE__*/React.createElement(Avatar, {
children: icon || (title ? title[0] : ''),
className: avatar
}) : null, /*#__PURE__*/React.createElement(DraftSwitch, {
nodeId: nodeId
}), /*#__PURE__*/React.createElement(PaddingButton, {
nodeId: nodeId
}), /*#__PURE__*/React.createElement(SelectParentButton, {
nodeId: nodeId
}), /*#__PURE__*/React.createElement(DuplicateButton, {
nodeId: nodeId
}), /*#__PURE__*/React.createElement(DeleteButton, {
nodeId: nodeId
})))));
};
export default BottomToolbar;
//# sourceMappingURL=BottomToolbar.js.map