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.
74 lines
1.8 KiB
React
74 lines
1.8 KiB
React
4 years ago
|
"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");
|
||
|
|
||
|
function normalizeGridCellSize(value) {
|
||
|
if (typeof value === "number") {
|
||
|
return `${value}fr`;
|
||
|
} else {
|
||
|
return value;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function generateGridTemplateString(values) {
|
||
|
return values
|
||
|
.map((value) => normalizeGridCellSize(value))
|
||
|
.join(" ");
|
||
|
}
|
||
|
|
||
|
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("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>
|
||
|
// );
|
||
|
};
|