在上一篇博文中,我们讲到了使用react-grid-layout
和echarts-for-react
实现一个自定义的dashboar页面
《使用react-grid-layout和echarts-for-react实现一个支持拖拽的自定义响应式dashboard页面》
import React, {useState} from "react";
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'
import {Button} from "antd";
import {findIndex, uniqueId} from "lodash";
import './dashboard.css'
import WidgetLoadingSpin from "@/pages/Dashboard/Detail/WidgetLoadingSpin";
import {CloseOutlined, LockOutlined, QuestionCircleOutlined, UnlockOutlined} from "@ant-design/icons";
import RGL, {Layout, WidthProvider} from "react-grid-layout";
import {cloneDeep} from "lodash-es";
const BarChartWidgetLazy = React.lazy(() => import('@/pages/Dashboard/Detail/Widget/BarChartWidget'));
const PieChartWidgetLazy = React.lazy(() => import('@/pages/Dashboard/Detail/Widget/PieChartWidget'));
const ReactGridLayout = WidthProvider(RGL);
interface DashboardWidgetInfo {
widgetName: string,
layout: Layout
}
function DashboardGird() {
const [widgets, setWidgets] = useState<DashboardWidgetInfo[]>([]);
const getLayouts: any = () => {
return cloneDeep(widgets.map(item => item.layout));
}
const setLayoutStatic = (widget: DashboardWidgetInfo, staticFlag: boolean) => {
const index = findIndex(widgets, (w: any) => w.widgetName === widget.widgetName);
if (index !== -1) {
const updateWidget = widgets[index];
updateWidget.layout.static = staticFlag;
widgets.splice(index, 1, {...updateWidget});
const newWidgets = [...widgets];
setWidgets(newWidgets);
}
}
const lockWidget = (widget: DashboardWidgetInfo) => {
setLayoutStatic(widget, true);
}
const unlockWidget = (widget: DashboardWidgetInfo) => {
setLayoutStatic(widget, false);
}
const onRemoveWidget = (widget: DashboardWidgetInfo) => {
const widgetIndex = findIndex(widgets, (w: any) => w.layout.i === widget.layout.i);
if (widgetIndex !== -1) {
widgets.splice(widgetIndex, 1);
const newWidgets = [...widgets];
setWidgets(newWidgets);
}
}
const getWidgetComponent = (widgetName: string) => {
if (widgetName === 'PieChartWidget') { //可以改成策略
return (<React.Suspense fallback={<WidgetLoadingSpin/>}>
<PieChartWidgetLazy/>
</React.Suspense>);
} else {
return (<React.Suspense fallback={<WidgetLoadingSpin/>}>
<BarChartWidgetLazy/>
</React.Suspense>);
}
}
const createWidget = (widget: DashboardWidgetInfo) => {
return (
<div className={'dashboard-widget-wrapper'} key={widget.layout.i} data-grid={widget.layout}>
<span className='dashboard-widget-header'>
<QuestionCircleOutlined className={'dashboard-widget-header-icon'}/>
{widget.layout.static ? <LockOutlined className={'dashboard-widget-header-icon'} onClick={() => unlockWidget(widget)}/> : (
<UnlockOutlined className={'dashboard-widget-header-icon'} onClick={() => lockWidget(widget)}/>)}
<CloseOutlined className={'dashboard-widget-header-icon'} onClick={() => onRemoveWidget(widget)}/>
</span>
{getWidgetComponent(widget.widgetName)}
</div>
);
}
const onAddWidget = () => {
const x = (widgets.length * 3) % 12;
const widgetName = x % 2 == 0 ? 'BarChartWidget' : 'PieChartWidget'
const newWidgets = [...widgets, {
widgetName: widgetName,
layout: {i: uniqueId(widgetName), x: x, y: Infinity, w: 3, h: 2, static: false}
}] as DashboardWidgetInfo[];
setWidgets(newWidgets);
}
const onLayoutChange = (layouts: any[]) => {
for (const layout of layouts) {
const updateIndex = findIndex(widgets, (w) => w.layout.i === layout.i);
if (updateIndex !== -1) {
const updateWidget = widgets[updateIndex];
updateWidget.layout = {
...layout,
};
widgets.splice(updateIndex, 1, {...updateWidget});
}
}
const newWidgets = [...widgets];
setWidgets(newWidgets);
}
return (
<>
<Button onClick={onAddWidget}>add widget</Button>
<ReactGridLayout
cols={12}
rowHeight={100}
autoSize={true}
isDraggable={true}
isResizable={true}
isBounded={true}
layout={getLayouts()}
className={'layouts'}
onLayoutChange={onLayoutChange}>
{widgets?.map(item => createWidget(item))}
</ReactGridLayout>
</>
);
}
export default DashboardGird
最终效果可以看到,当我们侧栏(抽屉)移动时并不会自动帮我们调整react-grid-layout
中元素的占位,也就是在最右边我们可以看到,当侧栏(抽屉)隐藏的时候,最右边是有空白的,并不会自适应填充。
那其实在官网中给出了解决方案:https://github.com/react-grid-layout/react-grid-layout
Have a more complicated layout? WidthProvider is very simple and only listens to window ‘resize’ events. If you need more power and flexibility, try the SizeMe React HOC as an alternative to WidthProvider.
在react-grid-layout
中提供的WidthProvider
只是很简单的监听了浏览器窗口’resize’的事件,根本没办法监听到当前容器大小更变的事件,所以我们需要react-sizeme
来帮助我们知道当前容器的大小
所以我们需要首先npm install react-sizeme
,然后我们就可以使用了。这里就不过多介绍如何使用,直接给出解决的代码
import React, {useState} from "react";
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'
import {Button} from "antd";
import {findIndex, uniqueId} from "lodash";
import './dashboard.css'
import WidgetLoadingSpin from "@/pages/Dashboard/Detail/WidgetLoadingSpin";
import {CloseOutlined, LockOutlined, QuestionCircleOutlined, UnlockOutlined} from "@ant-design/icons";
import ReactGridLayout from "react-grid-layout";
import {cloneDeep} from "lodash-es";
import {withSize} from 'react-sizeme';
const BarChartWidgetLazy = React.lazy(() => import('@/pages/Dashboard/Detail/Widget/BarChartWidget'));
const PieChartWidgetLazy = React.lazy(() => import('@/pages/Dashboard/Detail/Widget/PieChartWidget'));
interface DashboardWidgetInfo {
widgetName: string,
layout: ReactGridLayout.Layout
}
function DashboardGird({ size: { width } }: any) {
const [widgets, setWidgets] = useState<DashboardWidgetInfo[]>([]);
const getLayouts: any = () => {
return cloneDeep(widgets.map(item => item.layout));
}
const setLayoutStatic = (widget: DashboardWidgetInfo, staticFlag: boolean) => {
const index = findIndex(widgets, (w: any) => w.widgetName === widget.widgetName);
if (index !== -1) {
const updateWidget = widgets[index];
updateWidget.layout.static = staticFlag;
widgets.splice(index, 1, {...updateWidget});
const newWidgets = [...widgets];
setWidgets(newWidgets);
}
}
const lockWidget = (widget: DashboardWidgetInfo) => {
setLayoutStatic(widget, true);
}
const unlockWidget = (widget: DashboardWidgetInfo) => {
setLayoutStatic(widget, false);
}
const onRemoveWidget = (widget: DashboardWidgetInfo) => {
const widgetIndex = findIndex(widgets, (w: any) => w.layout.i === widget.layout.i);
if (widgetIndex !== -1) {
widgets.splice(widgetIndex, 1);
const newWidgets = [...widgets];
setWidgets(newWidgets);
}
}
const getWidgetComponent = (widgetName: string) => {
if (widgetName === 'PieChartWidget') { //可以改成策略
return (<React.Suspense fallback={<WidgetLoadingSpin/>}>
<PieChartWidgetLazy/>
</React.Suspense>);
} else {
return (<React.Suspense fallback={<WidgetLoadingSpin/>}>
<BarChartWidgetLazy/>
</React.Suspense>);
}
}
const createWidget = (widget: DashboardWidgetInfo) => {
return (
<div className={'dashboard-widget-wrapper'} key={widget.layout.i} data-grid={widget.layout}>
<span className='dashboard-widget-header'>
<QuestionCircleOutlined className={'dashboard-widget-header-icon'}/>
{widget.layout.static ? <LockOutlined className={'dashboard-widget-header-icon'} onClick={() => unlockWidget(widget)}/> : (
<UnlockOutlined className={'dashboard-widget-header-icon'} onClick={() => lockWidget(widget)}/>)}
<CloseOutlined className={'dashboard-widget-header-icon'} onClick={() => onRemoveWidget(widget)}/>
</span>
{getWidgetComponent(widget.widgetName)}
</div>
);
}
const onAddWidget = () => {
const x = (widgets.length * 3) % 12;
const widgetName = x % 2 == 0 ? 'BarChartWidget' : 'PieChartWidget'
const newWidgets = [...widgets, {
widgetName: widgetName,
layout: {i: uniqueId(widgetName), x: x, y: Infinity, w: 3, h: 2, static: false}
}] as DashboardWidgetInfo[];
setWidgets(newWidgets);
}
const onLayoutChange = (layouts: any[]) => {
for (const layout of layouts) {
const updateIndex = findIndex(widgets, (w) => w.layout.i === layout.i);
if (updateIndex !== -1) {
const updateWidget = widgets[updateIndex];
updateWidget.layout = {
...layout,
};
widgets.splice(updateIndex, 1, {...updateWidget});
}
}
const newWidgets = [...widgets];
setWidgets(newWidgets);
}
return (
<div>
<Button onClick={onAddWidget}>add widget</Button>
<ReactGridLayout
cols={12}
rowHeight={100}
width={width}
autoSize={true}
isDraggable={true}
isResizable={true}
isBounded={true}
layout={getLayouts()}
className={'layouts'}
onLayoutChange={onLayoutChange}>
{widgets?.map(item => createWidget(item))}
</ReactGridLayout>
</div>
);
}
export default withSize({ refreshMode: 'debounce', refreshRate: 60 })(DashboardGird);
接下来我们来看看效果
这样我们就通过react-sizeme
解决react-grid-layout
中侧栏(抽屉)移动时不会调整大小的问题了
react-sizeme: 让你的React Components知道它们的宽度和高度!
Tired of Boring Static Dashboards? Let’s Build a Fully Customizable Dashboard in React