GridCard效果图

  • 支持上下调整高度
  • 支持左右调整列宽
  • 图表自适应拖拽宽高
  • 支持拖拽后的排序

image.png

GridLayoutCard

  1. import React, {useMemo} from 'react';
  2. import {array, number} from 'prop-types';
  3. import {Card, Empty} from 'antd';
  4. import {WidthProvider, Responsive} from 'react-grid-layout';
  5. import 'react-grid-layout/css/styles.css';
  6. import 'react-resizable/css/styles.css';
  8. import {LineChart} from '@/components';
  10. const WithGridLayout = WidthProvider(Responsive);
  12. const GridItemComponent = React.forwardRef(({item, style, children, ...rest}, ref) => {
  13.   const height = window.parseInt(style.height) - 60 || 200;
  14.   return (
  15.     <Card
  16.       {...rest}
  17.       title={item.title}
  18.       size='small'
  19.       style={style}
  20.       ref={ref}
  21.     >
  22.       <LineChart
  23.         dataSource={item.dataSource}
  24.         xAxisData={item.xAxisData}
  25.         height={height}
  26.       />
  27.       {children}
  28.     </Card>
  29.   );
  30. });
  32. GridLayoutCard.propTypes = {
  33.   dataSource: array.isRequired,
  34.   gutter: array,
  35.   rowHeight: number,
  36. };
  37. GridLayoutCard.defaultProps = {
  38.   gutter: [16, 24],
  39.   rowHeight: 80,
  40. }
  42. function GridLayoutCard({dataSource, gutter, rowHeight}) {
  44.   const layout = useMemo(() => {
  45.     return dataSource.map((it, index) => ({
  46.       i: String(it.id), // 组件key值
  47.       x: (index % 3) * 4, // 组件在x轴坐标
  48.       y: Math.floor(index / 3), // 组件在y轴坐标
  49.       w: 4, // 组件宽度，占多少列
  50.       h: 3, // 组件高度 = rowHeight的倍数，3倍
  51.       minW: 3,  // 最小宽度
  52.       // placeholder: index,
  53.     }));
  54.   }, [dataSource])
  56.   if (!dataSource?.length) {
  57.     return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
  58.   }
  60.   return (
  61.     <WithGridLayout
  62.       layouts={{lg: layout, md: layout, sm: layout}}
  63.       cols={{lg: 12, md: 12, sm: 6, xs: 4, xxs: 2}}
  64.       breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
  65.       rowHeight={rowHeight}
  66.       margin={gutter}
  67.       containerPadding={[0, 0]}
  68.       resizeHandles={['ne', 'se']}
  69.       // innerRef={ref}
  70.       // compactType="horizontal"
  71.     >
  72.       {dataSource.map(it => {
  73.         return (
  74.           <GridItemComponent
  75.             key={it.id}
  76.             item={it}
  77.           />
  78.         );
  79.       })}
  80.     </WithGridLayout>
  81.   );
  82. }
  84. export default GridLayoutCard;

使用组件

  1. import GridLayout from '@/components';
  2. const mockData = [
  3.   {
  4.     id: 10,
  5.     title: '00',
  6.     dataSource: [{label: 'ONE', value: [150, 230, 224, 218, 135, 147, 260]}],
  7.     xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  8.   },
  9.   {
  10.     id: 11,
  11.     title: '11',
  12.     dataSource: [{label: 'ONE', value: [150, 230, 224, 218, 135, 147, 260]}],
  13.     xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  14.   },
  15.   {
  16.     id: 22,
  17.     title: '22',
  18.     dataSource: [{label: 'ONE', value: [150, 230, 224, 218, 135, 147, 260]}],
  19.     xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  20.   },
  21.   {
  22.     id: 33,
  23.     title: '33',
  24.     dataSource: [{label: 'ONE', value: [150, 230, 224, 218, 135, 147, 260]}],
  25.     xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  26.   },
  27.   {
  28.     id: 44,
  29.     title: '44',
  30.     dataSource: [{label: 'ONE', value: [150, 230, 224, 218, 135, 147, 260]}],
  31.     xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  32.   },
  33.   {
  34.     id: 55,
  35.     title: '55',
  36.     dataSource: [{label: 'ONE', value: [150, 230, 224, 218, 135, 147, 260]}],
  37.     xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  38.   },
  39.   {
  40.     id: 66,
  41.     title: '66',
  42.     dataSource: [{label: 'ONE', value: [150, 230, 224, 218, 135, 147, 260]}],
  43.     xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  44.   },
  45. ];
  47. function App() 
  48.   return (
  49.     <Spin spinning={loading}>
  50.       <GridCard
  51.         dataSource={mockData}
  52.         onDragEnd={onDragEnd}
  53.         gutter={[16, 24]}
  54.       />
  55.     </Spin>
  56.   )
  57. }

GridLayoutComponent

  1. import React, {useMemo} from 'react';
  2. import {array, number} from 'prop-types';
  3. import {Empty} from "antd";
  4. import {WidthProvider, Responsive} from 'react-grid-layout';
  5. import 'react-grid-layout/css/styles.css';
  6. import 'react-resizable/css/styles.css';
  8. import GridLayoutItem from './GridLayoutItem'
  9. // import styles from './style.module.less';
  11. const WithGridLayout = WidthProvider(Responsive);
  13. GridLayoutCard.propTypes = {
  14.   dataSource: array.isRequired,
  15.   gutter: array,
  16.   rowHeight: number,
  17. };
  18. GridLayoutCard.defaultProps = {
  19.   gutter: [16, 24],
  20.   rowHeight: 80,
  21. }
  23. function GridLayoutCard({dataSource, gutter, rowHeight}) {
  24.   const layout = useMemo(() => {
  25.     return dataSource.map((it, index) => ({
  26.       i: String(it.id), // 组件key值，唯一的
  27.       x: (index % 3) * 4, // 组件在x轴坐标
  28.       y: Math.floor(index / 3), // 组件在y轴坐标
  29.       w: 4, // 组件宽度，占多少列
  30.       h: 3, // 组件高度 = rowHeight的倍数，3就是 rowHeight的3倍
  31.       minW: 3, // 最小宽度
  32.       minH: 2, // 最小高度
  33.       // placeholder: index,
  34.     }));
  35.   }, [dataSource])
  37.   if (!dataSource?.length) {
  38.     return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
  39.   }
  41.   return (
  42.     <WithGridLayout
  43.       layouts={{lg: layout, md: layout, sm: layout}}
  44.       cols={{lg: 12, md: 12, sm: 6, xs: 4, xxs: 2}}
  45.       breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
  46.       rowHeight={rowHeight}
  47.       margin={gutter}
  48.       containerPadding={[0, 0]}
  49.       resizeHandles={['ne', 'se']}
  50.       // className={styles.grid}
  51.       // compactType="horizontal"
  52.     >
  53.       {dataSource.map(it => {
  54.         return (
  55.           <GridLayoutItem
  56.             extra
  57.             key={it.id}
  58.             item={it}
  59.             onEdit={() => {
  60.             }}
  61.             onDelete={() => {
  62.             }}
  63.           />
  64.         );
  65.       })}
  66.     </WithGridLayout>
  67.   );
  68. }
  70. export default GridLayoutCard;

GridLayoutItem

  1. import {useMemo, forwardRef} from 'react';
  2. import {string, bool, object} from 'prop-types';
  3. import {Card} from 'antd';
  4. import moment from 'moment';
  6. import {LineChart, BarChart, PieChart} from '@/components';
  7. import Table from '../SortableHocCard/Table'
  8. import DropdownMenu from '../SortableHocCard/DropdownMenu'
  10. const COMPONENT = {
  11.   LINE: LineChart,
  12.   BAR: BarChart,
  13.   PIE: PieChart,
  14.   TABLE: Table,
  15. }
  17. function GridLayoutItem(props, ref) {
  18.   const {extra, item, theme, style, children, onEdit, onDelete, ...rest} = props;
  19.   const {name, type, source} = item;
  20.   const Component = COMPONENT[type];
  22.   const height = useMemo(() => {
  23.     return window.parseInt(style.height) - 60 || 200;
  24.   }, [style.height]);
  26.   const chartProps = useMemo(initSource, [source]);
  28.   function initSource() {
  29.     const _props = {xAxisData: [], dataSource: []}
  30.     if (!source) return _props;
  32.     if (type === 'TABLE') {
  33.       _props.dataSource = source;
  34.     } else if (type === 'PIE') {
  35.       _props.dataSource = source.map(it => {
  36.         return {name: it.name, value: it.metricValue}
  37.       });
  38.     } else if (['BAR', 'LINE'].includes(type)) {
  39.       _props.dataSource = source.map(it => {
  40.         return {label: it.name, value: it.values[1]}
  41.       });
  42.       const {values} = source[0];
  43.       _props.xAxisData = values[0].map(it => moment(it).format('HH:mm[\n]MM-DD'))
  44.     }
  45.     return _props;
  46.   }
  48.   return (
  49.     <Card
  50.       {...rest}
  51.       size='small'
  52.       style={style}
  53.       ref={ref}
  54.       title={name}
  55.       bodyStyle={{padding: (type === 'TABLE') ? 0 : 12}}
  56.       extra={extra && <DropdownMenu onEdit={onEdit} onDelete={onDelete}/>}
  57.     >
  58.       {Component && (
  59.         <Component
  60.           {...chartProps}
  61.           height={height}
  62.           theme={theme}
  63.         />
  64.       )}
  65.       {children}
  66.     </Card>
  67.   );
  68. }
  70. const GridLayoutItemRef = forwardRef(GridLayoutItem)
  72. GridLayoutItemRef.propTypes = {
  73.   item: object.isRequired,
  74.   extra: bool,
  75.   theme: string,
  76. };
  78. export default GridLayoutItemRef;

antd 3x Card组件报错

react-grid-layout Error: not mounted on DragStart
image.png
不是 react版本的问题；是：antd 3x版本的 Card组件引起的 React.forwardRef，无法获取 ref
解决：

  1. 升级 antd到 4x版本
  2. 用 div代替 Card组件

�