@itwin/itwinui-layouts-react
Version:
iTwinUI package that provides React components for most common layouts
100 lines (99 loc) • 3.88 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);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GridItem = void 0;
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
var react_1 = __importDefault(require("react"));
var classnames_1 = __importDefault(require("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',
}}
* />
*/
var GridItem = function (props) {
var className = props.className, style = props.style, children = props.children, columnSpan = props.columnSpan, columnStart = props.columnStart;
return (react_1.default.createElement("div", { className: (0, classnames_1.default)('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));
};
exports.GridItem = GridItem;
exports.GridItem.displayName = 'Grid.Item';
exports.default = exports.GridItem;