Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | 1x 1x 3x 3x 6x 150x 3x 3x 3x 5x 3x 3x 6x 3x 75x 75x 1x | import React from "react";
import _ from "lodash";
import { Responsive, WidthProvider } from "react-grid-layout";
const ResponsiveReactGridLayout = WidthProvider(Responsive);
export default class DragFromOutsideLayout extends React.Component {
static defaultProps = {
className: "layout",
rowHeight: 30,
onLayoutChange: function() {},
cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
};
state = {
currentBreakpoint: "lg",
compactType: "vertical",
mounted: false,
layouts: { lg: generateLayout() }
};
componentDidMount() {
this.setState({ mounted: true });
}
generateDOM() {
return _.map(this.state.layouts.lg, function(l, i) {
return (
<div key={i} className={l.static ? "static" : ""}>
{l.static ? (
<span
className="text"
title="This item is static and cannot be removed or resized."
>
Static - {i}
</span>
) : (
<span className="text">{i}</span>
)}
</div>
);
});
}
onBreakpointChange = breakpoint => {
this.setState({
currentBreakpoint: breakpoint
});
};
onCompactTypeChange = () => {
const { compactType: oldCompactType } = this.state;
const compactType =
oldCompactType === "horizontal"
? "vertical"
: oldCompactType === "vertical"
? null
: "horizontal";
this.setState({ compactType });
};
onLayoutChange = (layout, layouts) => {
this.props.onLayoutChange(layout, layouts);
};
onNewLayout = () => {
this.setState({
layouts: { lg: generateLayout() }
});
};
onDrop = (layout, layoutItem, _event) => {
alert(`Dropped element props:\n${JSON.stringify(layoutItem, ['x', 'y', 'w', 'h'], 2)}`);
};
render() {
return (
<div>
<div>
Current Breakpoint: {this.state.currentBreakpoint} (
{this.props.cols[this.state.currentBreakpoint]} columns)
</div>
<div>
Compaction type:{" "}
{_.capitalize(this.state.compactType) || "No Compaction"}
</div>
<button onClick={this.onNewLayout}>Generate New Layout</button>
<button onClick={this.onCompactTypeChange}>
Change Compaction Type
</button>
<div
className="droppable-element"
draggable={true}
unselectable="on"
// this is a hack for firefox
// Firefox requires some kind of initialization
// which we can do by adding this attribute
// @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
onDragStart={e => e.dataTransfer.setData("text/plain", "")}
>
Droppable Element (Drag me!)
</div>
<ResponsiveReactGridLayout
{...this.props}
layouts={this.state.layouts}
onBreakpointChange={this.onBreakpointChange}
onLayoutChange={this.onLayoutChange}
onDrop={this.onDrop}
// WidthProvider option
measureBeforeMount={false}
// I like to have it animate on mount. If you don't, delete `useCSSTransforms` (it's default `true`)
// and set `measureBeforeMount={true}`.
useCSSTransforms={this.state.mounted}
compactType={this.state.compactType}
preventCollision={!this.state.compactType}
isDroppable={true}
>
{this.generateDOM()}
</ResponsiveReactGridLayout>
</div>
);
}
}
function generateLayout() {
return _.map(_.range(0, 25), function(item, i) {
var y = Math.ceil(Math.random() * 4) + 1;
return {
x: Math.round(Math.random() * 5) * 2,
y: Math.floor(i / 6) * y,
w: 2,
h: y,
i: i.toString(),
static: Math.random() < 0.05
};
});
}
Iif (process.env.STATIC_EXAMPLES === true) {
import("../test-hook.jsx").then(fn => fn.default(DragFromOutsideLayout));
}
|