@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
215 lines (213 loc) • 7.05 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
var __rest =
(this && this.__rest) ||
function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === 'function')
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import Drawer from '@mui/material/Drawer';
import React, { useCallback, useRef, useState } from 'react';
import { makeStyles } from 'tss-react/mui';
import palette from '../../styles/palette';
const useStyles = makeStyles()(
(
theme,
{
root,
drawerBody,
drawerPaper,
drawerPaperBelowToolbar,
drawerPaperLeft,
drawerPaperRight,
resizeHandle,
resizeHandleLeft,
resizeHandleRight,
resizeHandleActive,
resizingOverlay
} = {}
) => ({
root: Object.assign({ flexShrink: 0 }, root),
drawerBody: Object.assign({ width: '100%', height: '100%', overflowY: 'auto' }, drawerBody),
drawerPaper: Object.assign({ bottom: 0, overflow: 'hidden', maxWidth: '95% !important' }, drawerPaper),
drawerPaperBelowToolbar: Object.assign(
{ top: 65, height: 'auto', zIndex: theme.zIndex.appBar - 1 },
drawerPaperBelowToolbar
),
drawerPaperLeft: Object.assign({ borderRight: 'none' }, drawerPaperLeft),
drawerPaperRight: Object.assign({ borderLeft: 'none' }, drawerPaperRight),
resizeHandle: Object.assign(
{
width: '1px',
cursor: 'ew-resize',
padding: '4px 0 0',
position: 'absolute',
top: 0,
bottom: 0,
zIndex: 100,
backgroundColor: 'rgba(0, 0, 0, 0.12)',
transition: 'width 200ms',
'&:hover': {
width: '4px',
visibility: 'visible',
backgroundColor: palette.blue.tint
}
},
resizeHandle
),
resizeHandleLeft: Object.assign({ left: 0 }, resizeHandleLeft),
resizeHandleRight: Object.assign({ right: 0 }, resizeHandleRight),
resizeHandleActive: Object.assign(
{ width: '4px', visibility: 'visible', backgroundColor: palette.blue.tint },
resizeHandleActive
),
resizingOverlay: {
'&::before': Object.assign(
{ content: '""', position: 'fixed', top: 0, bottom: 0, left: 0, right: 0 },
resizingOverlay
)
}
})
);
export function ResizeableDrawer(props) {
const { classes, cx } = useStyles(props.styles);
const [resizeActive, setResizeActive] = useState(false);
const drawerRef = useRef();
const {
open,
children,
width,
maxWidth = 500,
onWidthChange,
className,
classes: propsClasses = {},
PaperProps,
anchor = 'left',
belowToolbar = false
} = props,
rest = __rest(props, [
'open',
'children',
'width',
'maxWidth',
'onWidthChange',
'className',
'classes',
'PaperProps',
'anchor',
'belowToolbar'
]);
const {
root,
drawerBody,
drawerPaper,
drawerPaperBelowToolbar,
resizeHandle,
resizeHandleActive,
resizeHandleLeft,
resizeHandleRight
} = propsClasses,
drawerClasses = __rest(propsClasses, [
'root',
'drawerBody',
'drawerPaper',
'drawerPaperBelowToolbar',
'resizeHandle',
'resizeHandleActive',
'resizeHandleLeft',
'resizeHandleRight'
]);
const handleMouseMove = useCallback(
(e) => {
if (onWidthChange) {
e.preventDefault();
const newWidth =
(anchor === 'left'
? e.clientX - drawerRef.current.getBoundingClientRect().left
: window.innerWidth - (e.clientX - drawerRef.current.getBoundingClientRect().left)) + 5;
onWidthChange(newWidth <= maxWidth ? newWidth : maxWidth);
}
},
[anchor, onWidthChange, maxWidth]
);
const handleMouseDown = onWidthChange
? () => {
setResizeActive(true);
const handleMouseUp = () => {
setResizeActive(false);
document.removeEventListener('mouseup', handleMouseUp, true);
document.removeEventListener('mousemove', handleMouseMove, true);
};
document.addEventListener('mouseup', handleMouseUp, true);
document.addEventListener('mousemove', handleMouseMove, true);
}
: null;
return React.createElement(
Drawer,
Object.assign(
{
open: open,
ref: drawerRef,
anchor: anchor,
variant: 'persistent',
className: cx(classes.root, className),
classes: Object.assign(Object.assign({}, drawerClasses), {
paper: cx(
classes.drawerPaper,
belowToolbar && classes.drawerPaperBelowToolbar,
drawerPaper,
belowToolbar && drawerPaperBelowToolbar,
onWidthChange && (anchor === 'left' ? classes.drawerPaperLeft : classes.drawerPaperRight),
resizeActive && classes.resizingOverlay
)
}),
PaperProps: Object.assign(Object.assign({}, PaperProps), { style: { width } })
},
rest
),
onWidthChange &&
React.createElement('div', {
onMouseDown: handleMouseDown,
className: cx(
classes.resizeHandle,
resizeActive && classes.resizeHandleActive,
anchor === 'left' ? classes.resizeHandleRight : classes.resizeHandleLeft
)
}),
React.createElement('section', { className: cx(classes.drawerBody, drawerBody) }, children)
);
}
export default ResizeableDrawer;