@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
37 lines (36 loc) • 2.58 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import clsx from 'clsx';
import flattenChildren from 'react-keyed-flatten-children';
import InternalGrid from '../grid/internal';
import { getBaseProps } from '../internal/base-component';
import { repeat } from './util';
import styles from './styles.css.js';
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
var COLUMN_DEFS = {
1: { colspan: { "default": 12, xxs: 12, xs: 12 } },
2: { colspan: { "default": 12, xxs: 6, xs: 6 } },
3: { colspan: { "default": 12, xxs: 6, xs: 4 } },
4: { colspan: { "default": 12, xxs: 6, xs: 3 } }
};
export default function ColumnLayout(_a) {
var _b;
var _c;
var _d = _a.columns, columns = _d === void 0 ? 1 : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.borders, borders = _f === void 0 ? 'none' : _f, _g = _a.disableGutters, disableGutters = _g === void 0 ? false : _g, children = _a.children, restProps = __rest(_a, ["columns", "variant", "borders", "disableGutters", "children"]);
useTelemetry('ColumnLayout');
var _h = useContainerBreakpoints(COLUMN_TRIGGERS), breakpoint = _h[0], ref = _h[1];
var baseProps = getBaseProps(restProps);
var isTextGridVariant = variant === 'text-grid';
var shouldDisableGutters = !isTextGridVariant && disableGutters;
var shouldHaveHorizontalBorders = !isTextGridVariant && (borders === 'horizontal' || borders === 'all');
var shouldHaveVerticalBorders = !isTextGridVariant && (borders === 'vertical' || borders === 'all');
var flattenedChildren = flattenChildren(children);
return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles['column-layout']) }),
React.createElement(InternalGrid, { ref: ref, disableGutters: true, gridDefinition: repeat((_c = COLUMN_DEFS[columns]) !== null && _c !== void 0 ? _c : {}, flattenedChildren.length), className: clsx(styles.grid, styles["grid-columns-" + columns], styles["grid-variant-" + variant], (_b = {},
_b[styles['grid-horizontal-borders']] = shouldHaveHorizontalBorders,
_b[styles['grid-vertical-borders']] = shouldHaveVerticalBorders,
_b[styles['grid-no-gutters']] = shouldDisableGutters,
_b)), breakpoint: breakpoint, responsiveClassName: function (breakpoint) { return breakpoint && styles["grid-breakpoint-" + breakpoint]; } }, children)));
}