alm
Version:
The best IDE for TypeScript
268 lines (267 loc) • 13 kB
JavaScript
;
var __assign = (this && this.__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;
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* This is a level above CSX
* - It wraps up the CSX primitives into components
*/
var csx = require("./csx");
var csx_1 = require("./csx");
var typestyle = require("typestyle");
var React = require("react");
/** Creates a copy of an object without the mentioned keys */
function _objectWithoutProperties(obj, keys) {
var target = {};
for (var i in obj) {
if (keys.indexOf(i) >= 0)
continue;
if (!Object.prototype.hasOwnProperty.call(obj, i))
continue;
target[i] = obj[i];
}
return target;
}
/********
*
* Primitives
*
********/
/**
* For that time you just need a visual vertical seperation
*/
exports.SmallVerticalSpace = function (props) {
return React.createElement("div", { style: { height: props.space || 24 } });
};
exports.SmallVerticalSpace.displayName = "SmallVerticalSpace";
/**
* For that time you just need a visual horizontal seperation
*/
exports.SmallHorizontalSpace = function (props) {
return React.createElement("div", { style: { width: props.space || 24, display: 'inline-block' } });
};
exports.SmallVerticalSpace.displayName = "SmallHorizontalSpace";
;
var ClassNames;
(function (ClassNames) {
ClassNames.content = typestyle.style(csx_1.vendorPrefixed.content);
ClassNames.flex = typestyle.style(csx_1.vendorPrefixed.pass, csx_1.vendorPrefixed.flex);
ClassNames.flexScrollY = typestyle.style(csx_1.vendorPrefixed.pass, csx_1.vendorPrefixed.flex, csx_1.vendorPrefixed.vertical, { overflowY: 'auto' });
ClassNames.pass = typestyle.style(csx_1.vendorPrefixed.pass);
ClassNames.contentVertical = typestyle.style(csx_1.vendorPrefixed.content, csx_1.vendorPrefixed.vertical);
ClassNames.contentVerticalCentered = typestyle.style(csx_1.vendorPrefixed.content, csx_1.vendorPrefixed.vertical, csx_1.vendorPrefixed.center);
ClassNames.contentHorizontal = typestyle.style(csx_1.vendorPrefixed.content, csx_1.vendorPrefixed.horizontal);
ClassNames.contentHorizontalCentered = typestyle.style(csx_1.vendorPrefixed.content, csx_1.vendorPrefixed.horizontal, csx_1.vendorPrefixed.center);
ClassNames.flexVertical = typestyle.style(csx_1.vendorPrefixed.flex, csx_1.vendorPrefixed.vertical, { maxWidth: '100%' /*normalizing browser bugs*/ });
ClassNames.flexHorizontal = typestyle.style(csx_1.vendorPrefixed.flex, csx_1.vendorPrefixed.horizontal);
})(ClassNames || (ClassNames = {}));
/**
* Generally prefer an inline block (as that will wrap).
* Use this for critical `content` driven *vertical* height
*
* Takes as much space as it needs, no more, no less
*/
exports.Content = function (props) {
var className = ClassNames.content + (props.className ? " " + props.className : '');
return (React.createElement("div", __assign({ "data-comment": "Content" }, props, { className: className }), props.children));
};
exports.Content.displayName = "Content";
/**
* Takes as much space as it needs, no more, no less
*/
exports.InlineBlock = function (props) {
var style = csx.extend({ display: 'inline-block' }, props.style || {});
return (React.createElement("div", __assign({ "data-comment": "InlineBlock" }, props, { style: style }), props.children));
};
exports.InlineBlock.displayName = "InlineBlock";
/**
* Takes up all the parent space, no more, no less
*/
exports.Flex = function (props) {
var className = ClassNames.flex + (props.className ? " " + props.className : '');
return (React.createElement("div", __assign({ "data-comment": "Flex" }, props, { className: className }), props.children));
};
exports.Flex.displayName = "Flex";
/**
* Takes up all the parent space, no more, no less and scrolls the children in Y if needed
*/
exports.FlexScrollY = function (props) {
var className = ClassNames.flexScrollY + (props.className ? " " + props.className : '');
return (React.createElement("div", __assign({ "data-comment": "FlexScrollY" }, props, { className: className }), props.children));
};
exports.FlexScrollY.displayName = "FlexScrollY";
/**
* When you need a general purpose container. Use this instead of a `div`
*/
exports.Pass = function (props) {
var className = ClassNames.pass + (props.className ? " " + props.className : '');
return (React.createElement("div", __assign({ "data-comment": "Pass" }, props, { className: className }), props.children));
};
exports.Pass.displayName = "Pass";
/**
* Provides a Vertical Container. For the parent it behaves like content.
*/
exports.ContentVertical = function (props) {
var className = ClassNames.contentVertical + (props.className ? " " + props.className : '');
return (React.createElement("div", __assign({ "data-comment": "ContentVertical" }, props, { className: className }), props.children));
};
exports.ContentVertical.displayName = "ContentVertical";
/**
* Quite commonly need horizontally centered text
*/
exports.ContentVerticalCentered = function (props) {
var className = ClassNames.contentVerticalCentered + (props.className ? " " + props.className : '');
return (React.createElement("div", __assign({ "data-comment": "ContentVerticalCentered" }, props, { className: className }), props.children));
};
exports.ContentVerticalCentered.displayName = "ContentVerticalCentered";
/**
* Provides a Horizontal Container. For the parent it behaves like content.
*/
exports.ContentHorizontal = function (props) {
var className = ClassNames.contentHorizontal + (props.className ? " " + props.className : '');
return (React.createElement("div", __assign({ "data-comment": "ContentHorizontal" }, props, { className: className }), props.children));
};
exports.ContentHorizontal.displayName = "ContentHorizontal";
/**
* Provides a Horizontal Container and centers its children in the cross dimension
*/
exports.ContentHorizontalCentered = function (props) {
var className = ClassNames.contentHorizontalCentered + (props.className ? " " + props.className : '');
return (React.createElement("div", __assign({ "data-comment": "ContentHorizontalCentered" }, props, { className: className }), props.children));
};
exports.ContentHorizontalCentered.displayName = "ContentHorizontalCentered";
/**
* Provides a Vertical Container. For the parent it behaves like flex.
*/
exports.FlexVertical = function (props) {
var className = ClassNames.flexVertical + (props.className ? " " + props.className : '');
return (React.createElement("div", __assign({ "data-comment": "FlexVertical" }, props, { className: className }), props.children));
};
exports.FlexVertical.displayName = "FlexVertical";
/**
* Provides a Horizontal Container. For the parent it behaves like flex.
*/
exports.FlexHorizontal = function (props) {
var className = ClassNames.flexHorizontal + (props.className ? " " + props.className : '');
return (React.createElement("div", __assign({ "data-comment": "FlexHorizontal" }, props, { className: className }), props.children));
};
exports.FlexHorizontal.displayName = "FlexHorizontal";
/**
* Lays out the children horizontally with
* - ThisComponent: gets the overall Height (by max) of the children
* - Children: get the Width : equally distributed from the parent Width
* - Children: get the Height : sized by content
* - ThisComponent: Puts a horizontal padding between each item
*/
exports.ContentHorizontalFlexPadded = function (props) {
var padding = props.padding;
var otherProps = _objectWithoutProperties(props, ['padding', 'children']);
var children = React.Children.toArray(props.children).filter(function (c) { return !!c; });
var last = children.length - 1;
var itemPadding = function (index) {
if (index == last) {
return csx.Box.padding(0);
}
else {
return csx.Box.padding(0, padding, 0, 0);
}
};
return (React.createElement(exports.ContentHorizontal, __assign({}, otherProps), children.map(function (child, i) { return React.createElement(exports.Flex, { key: child.key || i, style: itemPadding(i) }, child); })));
};
exports.ContentHorizontalFlexPadded.displayName = "ContentHorizontalFlexPadded";
/**
* Lays out the children horizontally with
* - Parent: gets to chose the Width
* - ThisComponent: gets the overall Height (by max) of the children
* - Children: get the Width : equally distributed from the parent Width
* - Children: get the Height : sized by content
* - ThisComponent: Puts a horizontal padding between each item
*/
exports.FlexHorizontalFlexPadded = function (props) {
var padding = props.padding;
var otherProps = _objectWithoutProperties(props, ['padding', 'children']);
var children = React.Children.toArray(props.children).filter(function (c) { return !!c; });
var last = children.length - 1;
var itemPadding = function (index) {
if (index == last) {
return csx.Box.padding(0);
}
else {
return csx.Box.padding(0, padding, 0, 0);
}
};
return (React.createElement(exports.FlexHorizontal, __assign({}, otherProps), children.map(function (child, i) { return React.createElement(exports.Flex, { key: child.key || i, style: itemPadding(i) }, child); })));
};
exports.FlexHorizontalFlexPadded.displayName = "FlexHorizontalFlexPadded";
/**
* Lays out the children horizontally with
* - Parent: gets to chose the Width
* - ThisComponent: gets the overall Height (by max) of the children
* - Children: get the Width : equally distributed from the parent Width
* - Children: get the Height : sized by content
* - ThisComponent: Puts a horizontal padding between each item
*/
exports.ContentHorizontalContentPadded = function (props) {
var padding = props.padding;
var otherProps = _objectWithoutProperties(props, ['padding', 'children']);
var children = React.Children.toArray(props.children).filter(function (c) { return !!c; });
var last = children.length - 1;
var itemPadding = function (index) {
if (index == last) {
return csx.Box.padding(0);
}
else {
return csx.Box.padding(0, padding, 0, 0);
}
};
return (React.createElement(exports.ContentHorizontal, __assign({}, otherProps), children.map(function (child, i) { return React.createElement(exports.Content, { key: child.key || i, style: itemPadding(i) }, child); })));
};
exports.ContentHorizontalContentPadded.displayName = "ContentHorizontalContentPadded";
/**
* Lays out the children vertically with
* - Parent: gets to chose the Width
* - ThisComponent: gets the Height : (by sum) of the children
* - Children: get the Width : parent
* - Children: get the Height : sized by content
* - ThisComponent: Puts a vertical padding between each item
*/
exports.ContentVerticalContentPadded = function (props) {
var padding = props.padding;
var otherProps = _objectWithoutProperties(props, ['padding', 'children']);
var children = React.Children.toArray(props.children).filter(function (c) { return !!c; });
var last = children.length - 1;
var itemPadding = function (index) {
if (index == last) {
return csx.Box.padding(0);
}
else {
return csx.Box.padding(0, 0, padding, 0);
}
};
return (React.createElement(exports.ContentVertical, __assign({}, otherProps), children.map(function (child, i) { return React.createElement(exports.Content, { key: child.key || i, style: itemPadding(i) }, child); })));
};
exports.ContentVerticalContentPadded.displayName = "ContentVerticalContentPadded";
/**
* Lays out the children vertically with
* - Parent: gets to chose the overall Width
* - ThisComponent: gets the Height : (by sum) of the children
* - Children: get the Width : sized by content
* - Children: get the Height : sized by content
* - ThisComponent: Puts a margin between each item.
* - ThisComponent: Puts a negative margin on itself to offset the margins of the children (prevents them from leaking out)
*/
exports.GridMargined = function (props) {
var margin = props.margin;
var otherProps = _objectWithoutProperties(props, ['margin', 'children']);
var marginPx = margin + "px";
var style = csx.extend(csx.wrap, { marginTop: '-' + marginPx, marginLeft: '-' + marginPx }, props.style || {});
var children = React.Children.toArray(props.children).filter(function (c) { return !!c; });
return (React.createElement(exports.ContentHorizontal, __assign({}, otherProps, { style: style }), children.map(function (child, i) { return React.createElement(exports.Content, { key: child.key || i, style: { marginLeft: marginPx, marginTop: marginPx } }, child); })));
};
exports.GridMargined.displayName = "GridMargined";