UNPKG

@workday/canvas-kit-react-layout

Version:

Layout module for canvas-kit-react

94 lines (93 loc) 3.63 kB
"use strict"; var __extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return extendStatics(d, b); }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); 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 __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; var __importStar = (this && this.__importStar) || function (mod) { if (mod && mod.__esModule) return mod; var result = {}; if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; result["default"] = mod; return result; }; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); var React = __importStar(require("react")); var styled_1 = __importDefault(require("@emotion/styled")); var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid")); var ColumnContainer = styled_1.default('div', { shouldForwardProp: function (prop) { return is_prop_valid_1.default(prop) && prop !== 'spacing'; }, })({ '&:first-of-type': { paddingLeft: 0, }, '&:last-child': { paddingRight: 0, }, }, function (_a) { var spacing = _a.spacing; if (spacing === 0) { return; } return { padding: "0 " + spacing + "px" }; }, function (_a) { var columns = _a.columns, width = _a.width, spacing = _a.spacing; if (width) { return { width: width }; } if (columns) { if (columns === 12) { return { width: "100%" }; } else { var compensation = ((12 - columns) / 12) * ((spacing || 0) * 2); return { width: "calc(" + (columns / 12) * 100 + "% - " + compensation + "px)" }; } } return { flex: 1 }; }); var Column = (function (_super) { __extends(Column, _super); function Column() { return _super !== null && _super.apply(this, arguments) || this; } Column.prototype.render = function () { var _a = this.props, children = _a.children, spacing = _a.spacing, columns = _a.columns, width = _a.width, elemProps = __rest(_a, ["children", "spacing", "columns", "width"]); return (React.createElement(ColumnContainer, __assign({ spacing: spacing, columns: columns, width: width }, elemProps), children)); }; return Column; }(React.Component)); exports.default = Column;