You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
"use strict";
|
|
|
|
const React = require("react");
|
|
const defaultValue = require("default-value");
|
|
|
|
const useTheme = require("../../util/themeable");
|
|
const defaultStyle = require("./style.css");
|
|
const generateGridItemStyle = require("../../util/generate-grid-item-style");
|
|
const generateGridTemplateString = require("../../util/generate-grid-template-string");
|
|
|
|
module.exports = function Grid({ x, y, rows, columns, rowGap, columnGap, children }) {
|
|
let { withTheme } = useTheme({ control: "grid", defaultStyle });
|
|
|
|
let rows_ = defaultValue(rows, [1]);
|
|
let columns_ = defaultValue(columns, [1]);
|
|
|
|
let style = {
|
|
gridTemplateRows: generateGridTemplateString(rows_),
|
|
gridTemplateColumns: generateGridTemplateString(columns_),
|
|
gridRowGap: rowGap,
|
|
gridColumnGap: columnGap,
|
|
... generateGridItemStyle({ x, y })
|
|
};
|
|
|
|
// FIXME: Context for x/y
|
|
|
|
return (
|
|
<div className={withTheme("uilibComponent", "grid")} style={style}>
|
|
{children}
|
|
</div>
|
|
);
|
|
|
|
// return (
|
|
// <div className="ribbonGrid" style={style}>
|
|
// {childrenWithProps(props.children, (item) => {
|
|
// let itemStyle = {};
|
|
|
|
// if (item.props.x != null) {
|
|
// itemStyle.gridColumnStart = item.props.x + 1;
|
|
|
|
// if (item.props.cellWidth != null) {
|
|
// itemStyle.gridColumnEnd = itemStyle.gridColumnStart + item.props.cellWidth;
|
|
// }
|
|
// }
|
|
|
|
// if (item.props.y != null) {
|
|
// itemStyle.gridRowStart = item.props.y + 1;
|
|
|
|
// if (item.props.cellHeight != null) {
|
|
// itemStyle.gridRowEnd = itemStyle.gridRowStart + item.props.cellHeight;
|
|
// }
|
|
// }
|
|
|
|
// return {
|
|
// style: itemStyle
|
|
// };
|
|
// })}
|
|
// </div>
|
|
// );
|
|
};
|