1

React-Grid-Layout docによると

resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>)

グリッド項目のカスタム サイズ変更ハンドルを実装するために使用できます。

私の場合、これは機能していません。エラーをスローすることさえありません。

コード: https://codesandbox.io/s/react-playground-forked-jwfn3?file=/index.js

注:グリッド項目を削除するresizeHandle={<BottomRightHandle />}と、デフォルトのサイズ変更ハンドラーが取得されます。これは正常に機能しています。

CustomResizeHandle.js

import React from "react";

const SouthEastArrow = () => (
  <svg
    width="20px"
    height="20px"
    version="1.1"
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="m70.129 67.086l1.75-36.367c-0.035156-2.6523-2.9414-3.6523-4.8164-1.7773l-8.4531 8.4531-17.578-17.574c-2.3438-2.3438-5.7188-1.5625-8.0586 0.78125l-13.078 13.078c-2.3438 2.3438-2.4141 5.0117-0.074219 7.3516l17.574 17.574-8.4531 8.4531c-1.875 1.875-0.83594 4.8203 1.8164 4.8555l36.258-1.8594c1.6836 0.019531 3.1328-1.2812 3.1133-2.9688z" />
  </svg>
);

const CustomHandle = (props) => (
  <div
    style={{
      background: "#fff",
      borderRadius: "2px",
      border: "1px solid #ddd",
      position: "absolute",
      bottom: 0,
      right: 0,
      padding: 0,
      cursor: "se-resize"
    }}
    {...props}
  />
);

const BottomRightHandle = () => (
  <CustomHandle>
    <SouthEastArrow />
  </CustomHandle>
);

export default BottomRightHandle;

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row, Col } from "react-flexbox-grid";

import { Responsive, WidthProvider } from "react-grid-layout";

import "../../node_modules/react-grid-layout/css/styles.css";
import "../../node_modules/react-resizable/css/styles.css";

import BottomRightHandle from "./CustomResizeHandle";

const ResponsiveGridLayout = WidthProvider(Responsive);

const Layout = (props) => {
  const [items, setItems] = React.useState([
    { i: "a", x: 0, y: 0, w: 2, h: 1 },
    { i: "b", x: 2, y: 0, w: 2, h: 1 }
  ]);

  return (
    <ResponsiveGridLayout
      className="layout"
      layouts={{ lg: items }}
      breakpoints={{ lg: 1200, md: 996, sm: 768 }}
      cols={{ lg: 12, md: 10, sm: 6 }}
      resizeHandles={["se"]}
      resizeHandle={<BottomRightHandle />}
    >
      {items.map((item) => {
        return (
          <div
            key={item.i}
            style={{ backgroundColor: "#ccc" }}
            data-grid={{ x: item.x, y: item.y }}
          >
            {item.i}
          </div>
        );
      })}
    </ResponsiveGridLayout>
  );
};

class App extends React.Component {
  render() {
    return (
      <Grid>
        <Row>
          <Col>
            <Layout />
          </Col>
        </Row>
      </Grid>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));
4

1 に答える 1