@tolokoban/ui
Version:
React components with theme
42 lines • 4.03 kB
JavaScript
import { cssForGaps } from "./styles.js";
export function styleDisplay(props) {
const { display } = props;
if (!display)
return {};
if (display === "flex" || display === "inline-flex")
return styleDisplayFlex(props);
if (display === "grid" || display === "inline-grid")
return styleDisplayGrid(props);
return { display };
}
function styleDisplayFlex({ display, gap, rowGap, columnGap, justifyContent, alignItems, flexDirection, flexWrap, }) {
const style = Object.assign({ display }, styleGap({ gap, rowGap, columnGap }));
style.justifyContent = justifyContent;
style.alignItems = alignItems;
style.flexWrap = flexWrap;
style.flexDirection = flexDirection;
return style;
}
function styleDisplayGrid({ display, gap, rowGap, columnGap, gridTemplateRows, gridTemplateColumns, gridAutoFlow, gridAutoRows, gridAutoColumns, justifyContent, alignItems, placeItems, }) {
const style = Object.assign({ display }, styleGap({ gap, rowGap, columnGap }));
style.gridTemplateRows = gridTemplateRows;
style.gridTemplateColumns = gridTemplateColumns;
style.gridAutoRows = gridAutoRows;
style.gridAutoColumns = gridAutoColumns;
style.gridAutoFlow = gridAutoFlow;
style.justifyContent = justifyContent;
style.alignItems = alignItems;
style.placeItems = placeItems;
return style;
}
function styleGap({ gap, columnGap, rowGap, }) {
const style = {};
if (gap)
style.gap = cssForGaps(gap);
if (rowGap)
style.rowGap = cssForGaps(rowGap);
if (columnGap)
style.columnGap = cssForGaps(columnGap);
return style;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlzcGxheS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy90aGVtZS9zdHlsZXMvZGlzcGxheS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sYUFBYSxDQUFBO0FBcUd4QyxNQUFNLFVBQVUsWUFBWSxDQUFDLEtBQXdCO0lBQ2pELE1BQU0sRUFBRSxPQUFPLEVBQUUsR0FBRyxLQUFLLENBQUE7SUFDekIsSUFBSSxDQUFDLE9BQU87UUFBRSxPQUFPLEVBQUUsQ0FBQTtJQUV2QixJQUFJLE9BQU8sS0FBSyxNQUFNLElBQUksT0FBTyxLQUFLLGFBQWE7UUFDL0MsT0FBTyxnQkFBZ0IsQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNsQyxJQUFJLE9BQU8sS0FBSyxNQUFNLElBQUksT0FBTyxLQUFLLGFBQWE7UUFDL0MsT0FBTyxnQkFBZ0IsQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNsQyxPQUFPLEVBQUUsT0FBTyxFQUFFLENBQUE7QUFDdEIsQ0FBQztBQUVELFNBQVMsZ0JBQWdCLENBQUMsRUFDdEIsT0FBTyxFQUNQLEdBQUcsRUFDSCxNQUFNLEVBQ04sU0FBUyxFQUNULGNBQWMsRUFDZCxVQUFVLEVBQ1YsYUFBYSxFQUNiLFFBQVEsR0FDWTtJQUNwQixNQUFNLEtBQUssbUJBQ1AsT0FBTyxJQUNKLFFBQVEsQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLENBQUMsQ0FDMUMsQ0FBQTtJQUNELEtBQUssQ0FBQyxjQUFjLEdBQUcsY0FBYyxDQUFBO0lBQ3JDLEtBQUssQ0FBQyxVQUFVLEdBQUcsVUFBVSxDQUFBO0lBQzdCLEtBQUssQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFBO0lBQ3pCLEtBQUssQ0FBQyxhQUFhLEdBQUcsYUFBYSxDQUFBO0lBQ25DLE9BQU8sS0FBSyxDQUFBO0FBQ2hCLENBQUM7QUFFRCxTQUFTLGdCQUFnQixDQUFDLEVBQ3RCLE9BQU8sRUFDUCxHQUFHLEVBQ0gsTUFBTSxFQUNOLFNBQVMsRUFDVCxnQkFBZ0IsRUFDaEIsbUJBQW1CLEVBQ25CLFlBQVksRUFDWixZQUFZLEVBQ1osZUFBZSxFQUNmLGNBQWMsRUFDZCxVQUFVLEVBQ1YsVUFBVSxHQUNVO0lBQ3BCLE1BQU0sS0FBSyxtQkFDUCxPQUFPLElBQ0osUUFBUSxDQUFDLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsQ0FBQyxDQUMxQyxDQUFBO0lBQ0QsS0FBSyxDQUFDLGdCQUFnQixHQUFHLGdCQUFnQixDQUFBO0lBQ3pDLEtBQUssQ0FBQyxtQkFBbUIsR0FBRyxtQkFBbUIsQ0FBQTtJQUMvQyxLQUFLLENBQUMsWUFBWSxHQUFHLFlBQVksQ0FBQTtJQUNqQyxLQUFLLENBQUMsZUFBZSxHQUFHLGVBQWUsQ0FBQTtJQUN2QyxLQUFLLENBQUMsWUFBWSxHQUFHLFlBQVksQ0FBQTtJQUNqQyxLQUFLLENBQUMsY0FBYyxHQUFHLGNBQWMsQ0FBQTtJQUNyQyxLQUFLLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQTtJQUM3QixLQUFLLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQTtJQUM3QixPQUFPLEtBQUssQ0FBQTtBQUNoQixDQUFDO0FBRUQsU0FBUyxRQUFRLENBQUMsRUFDZCxHQUFHLEVBQ0gsU0FBUyxFQUNULE1BQU0sR0FLVDtJQUNHLE1BQU0sS0FBSyxHQUF3QixFQUFFLENBQUE7SUFDckMsSUFBSSxHQUFHO1FBQUUsS0FBSyxDQUFDLEdBQUcsR0FBRyxVQUFVLENBQUMsR0FBRyxDQUFDLENBQUE7SUFDcEMsSUFBSSxNQUFNO1FBQUUsS0FBSyxDQUFDLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUE7SUFDN0MsSUFBSSxTQUFTO1FBQUUsS0FBSyxDQUFDLFNBQVMsR0FBRyxVQUFVLENBQUMsU0FBUyxDQUFDLENBQUE7SUFDdEQsT0FBTyxLQUFLLENBQUE7QUFDaEIsQ0FBQyJ9