@wener/ui
Version:
116 lines • 5.5 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataGridPropLayout = exports.ControlledLayoutGrid = void 0;
const React = __importStar(require("react"));
const react_1 = require("react");
const react_grid_layout_1 = __importStar(require("react-grid-layout"));
const example_style_1 = require("./example-style");
const styled_components_1 = __importDefault(require("styled-components"));
const lodash_1 = __importDefault(require("lodash"));
exports.default = {
title: 'grid-layout/Demo',
};
const ReactGridLayout = react_grid_layout_1.WidthProvider(react_grid_layout_1.default);
function stringifyLayout(layout) {
return layout.map(function (l) {
const name = l.i === '__dropping-elem__' ? 'drop' : l.i;
return (React.createElement("div", { className: "layoutItem", key: l.i },
React.createElement("b", null, name),
`: [${l.x}, ${l.y}, ${l.w}, ${l.h}]`));
});
}
const RightTop = styled_components_1.default.div `
position: absolute;
right: 0;
top: 0;
`;
const MyItem = ({ children, onClose, ...props }) => {
return (React.createElement("div", Object.assign({}, props),
React.createElement(RightTop, null,
React.createElement("button", { onClick: onClose }, "X")),
children));
};
const Placeholder = styled_components_1.default.div `
width: 128px;
height: 64px;
border: 1px solid lightgrey;
`;
let ids = 1;
exports.ControlledLayoutGrid = () => {
const [layout, setLayout] = react_1.useState(() => [
{ i: 'a', x: 0, y: 0, w: 1, h: 2 },
{ i: 'b', x: 1, y: 0, w: 3, h: 2 },
{ i: 'c', x: 4, y: 0, w: 1, h: 2 },
]);
return (React.createElement("div", null,
React.createElement("div", null,
React.createElement(Placeholder, { onDragStart: (e) => e.dataTransfer.setData('text/plain', '' + ids), draggable: true, unselectable: "on" }, "Drag to Drop")),
React.createElement("div", null,
React.createElement("button", { onClick: () => {
// x: (this.state.items.length * 2) % (this.state.cols || 12),
// layout.length
setLayout([
...layout,
{
i: Date.now() + '',
w: 4,
h: 4,
y: Infinity,
// x: 0 ,
x: (layout.length * 2) % 24,
},
]);
} }, "Add")),
React.createElement(example_style_1.ExampleStyle, null),
React.createElement("div", { className: "layoutJSON" },
"Displayed as ",
React.createElement("code", null, "[x, y, w, h]"),
":",
React.createElement("div", { className: "columns" }, stringifyLayout(layout))),
React.createElement(ReactGridLayout, { isDroppable: true,
// 开启后不会推开其他元素
// preventCollision
useCSSTransforms: true, measureBeforeMount: false, droppingItem: { i: 'DROPING' + ids, w: 2, h: 2 }, onDrop: (event) => {
console.log(`DROP`, event, event.e);
const { x, y } = event;
setLayout((layout) => {
console.log(layout.map((v) => v.i));
return [...layout.filter((v) => !v.i.startsWith('DROPING')), { i: 'DROP' + ids, x, y, w: 2, h: 2 }];
});
ids += 2;
}, className: "layout", cols: 24, rowHeight: 30, layout: layout, onLayoutChange: setLayout }, layout.map(({ i }, ii) => (React.createElement(MyItem, { key: i || ii, onClose: () => setLayout(lodash_1.default.reject(layout, { i })) },
i,
"/",
ii))))));
};
exports.DataGridPropLayout = () => {
return (React.createElement("div", null,
React.createElement(example_style_1.ExampleStyle, null),
React.createElement(ReactGridLayout, { useCSSTransforms: true, className: "layout", cols: 24, rowHeight: 30 },
React.createElement("div", { key: "a", "data-grid": { x: 0, y: 0, w: 1, h: 2, static: true } }, "a"),
React.createElement("div", { key: "b", "data-grid": { x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 } }, "b"),
React.createElement("div", { key: "c", "data-grid": { x: 4, y: 0, w: 1, h: 2 } }, "c"))));
};
//# sourceMappingURL=grid-layout-demo.stories.js.map