@itwin/itwinui-layouts-react
Version:
iTwinUI package that provides React components for most common layouts
93 lines (92 loc) • 3.52 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React from 'react';
import cx from 'classnames';
var columnSpanProps = function (key, value) {
var _a;
if (value) {
return _a = {},
_a[key] = "span ".concat(value),
_a;
}
return undefined;
};
var columnProps = function (key, value) {
var _a;
if (value) {
return _a = {},
_a[key] = value,
_a;
}
return undefined;
};
var getColumnSpan = function (columnSpan, accessor) {
if (typeof columnSpan === 'number') {
return columnSpan;
}
if (columnSpan) {
return columnSpan[accessor];
}
return undefined;
};
var getColumnStart = function (columnOffset, accessor) {
if (typeof columnOffset === 'number' || typeof columnOffset === 'string') {
return columnOffset;
}
if (columnOffset) {
return columnOffset[accessor];
}
return undefined;
};
/**
* Grid item component to use with our `Grid`.
* Default size is 1 column. You can change this by providing `columnSpan` prop.
* Grid item starts at the next available position in grid. To change that provide `columnStart` prop.
*
* @example
* <GridItem
* columnSpan={12}
* />
* <GridItem
* columnSpan={{
monitor: 8,
smallMonitor: 6,
tablet: 4,
mobile: 12,
}}
* />
*
* @example
* <GridItem
* columnSpan={4}
* columnStart={2}
* />
* <GridItem
* columnSpan={4}
* columnStart={{
monitor: 2,
smallMonitor: 2,
tablet: 1,
mobile: 'auto',
}}
* />
*/
export var GridItem = function (props) {
var className = props.className, style = props.style, children = props.children, columnSpan = props.columnSpan, columnStart = props.columnStart;
return (React.createElement("div", { className: cx('iui-layouts-grid-item', className), style: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, columnSpanProps('--_iui-grid-item-column-span-mobile', getColumnSpan(columnSpan, 'mobile'))), columnSpanProps('--_iui-grid-item-column-span-tablet', getColumnSpan(columnSpan, 'tablet'))), columnSpanProps('--_iui-grid-item-column-span-small-monitor', getColumnSpan(columnSpan, 'smallMonitor'))), columnSpanProps('--_iui-grid-item-column-span-monitor', getColumnSpan(columnSpan, 'monitor'))), columnProps('--_iui-grid-item-column-start-mobile', getColumnStart(columnStart, 'mobile'))), columnProps('--_iui-grid-item-column-start-tablet', getColumnStart(columnStart, 'tablet'))), columnProps('--_iui-grid-item-column-start-small-monitor', getColumnStart(columnStart, 'smallMonitor'))), columnProps('--_iui-grid-item-column-start-monitor', getColumnStart(columnStart, 'monitor'))), style) }, children));
};
GridItem.displayName = 'Grid.Item';
export default GridItem;