cosmo-ui
Version:
Common React components
105 lines • 4.75 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var cx = require("classnames");
var utils_1 = require("../utils");
var constants_1 = require("../constants");
var styles = require('../../src/styles/components/flex.scss');
var Flex = (function (_super) {
tslib_1.__extends(Flex, _super);
function Flex() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.defaultClasses = [];
_this.shortcutProps = constants_1.FLEX_SHORTCUT_PROPS;
return _this;
}
/**
* Basically we are normalising class for comparison of values so we don't get overlaps
*/
Flex.classAndNormalised = function (key, width, value) {
return [
styles[utils_1.dasherize(key) + "-" + width + "-" + value],
utils_1.dasherize(key) + "-" + width,
];
};
Flex.prototype.componentWillMount = function () {
this.flexClassesCache = this.flexClasses(this.props);
};
Flex.prototype.componentWillUpdate = function (nextProps) {
this.updateFlexClasses(nextProps);
};
Flex.prototype.render = function () {
return (React.createElement("div", tslib_1.__assign({}, this.baseProps()), this.props.children));
};
Flex.prototype.baseProps = function () {
var _a = this.props, id = _a.id, children = _a.children, style = _a.style, onClick = _a.onClick, tooltip = _a.tooltip, tooltipPos = _a.tooltipPos;
return {
id: id,
onClick: onClick,
style: style,
'className': this.classNames(),
'data-tooltip': tooltip,
'data-tooltip-pos': tooltipPos,
};
};
Flex.prototype.classNames = function () {
var props = this.props;
// Use classnames to build up a string of classnames
return cx.apply(void 0, [this.defaultClasses,
styles.container].concat(this.flexClassesCache, [(_a = {},
_a[styles.fullWidth] = props.fullWidth,
_a[styles.expandLeft] = props.expand === 'left',
_a[styles.expandRight] = props.expand === 'right',
_a), props.className]));
var _a;
};
Flex.prototype.updateFlexClasses = function (nextProps) {
var props = this.props;
var shortcutPropsUpdated = Object.keys(constants_1.FLEX_SHORTCUT_PROPS).reduce(function (acc, key) { return acc || nextProps[key] !== props[key]; }, false);
var breakpointsUpdated = Object.keys(constants_1.BREAKPOINTS).reduce(function (acc, key) { return acc || nextProps[key] !== props[key]; }, false);
if (shortcutPropsUpdated || breakpointsUpdated) {
this.flexClassesCache = this.flexClasses(nextProps);
}
};
Flex.prototype.flexClasses = function (props) {
var _this = this;
// Build a map of classes keyed by their normal name
var shortcutClasses = utils_1.flatten(Object.keys(this.shortcutProps)
.filter(function (prop) { return props[prop] !== undefined; })
.map(function (prop) {
return _this.classesFromProp(prop, props[prop]);
}))
.reduce(function (dst, _a) {
var cls = _a[0], nrmCls = _a[1];
return (tslib_1.__assign({}, dst, (_b = {}, _b[nrmCls] = cls, _b)));
var _b;
}, {});
// Reduce override classes into the initial map, overriding based on normalised name
var classes = utils_1.flatten(constants_1.BREAKPOINTS.map(function (width) { return constants_1.FLEX_WIDTH_CONFIG
.filter(function (key) { return props[width] !== undefined
&& props[width][key] !== undefined; })
.map(function (key) {
return _this.classFromOverride(props, width, key);
}); }))
.reduce(function (dst, _a) {
var cls = _a[0], nrmCls = _a[1];
return (tslib_1.__assign({}, dst, (_b = {}, _b[nrmCls] = cls, _b)));
var _b;
}, shortcutClasses);
return Object.values(classes);
};
Flex.prototype.classFromOverride = function (props, width, key) {
return Flex.classAndNormalised(key, width, props[width][key]);
};
Flex.prototype.classesFromProp = function (prop, value) {
var _a = this.shortcutProps[prop], key = _a.key, propIsValue = _a.propIsValue;
return propIsValue
? [Flex.classAndNormalised(key, value, utils_1.dasherize(prop))]
: [Flex.classAndNormalised(key, constants_1.BREAKPOINTS[0], value)];
};
return Flex;
}(React.Component));
Flex.defaultProps = {};
exports.Flex = Flex;
//# sourceMappingURL=flex.js.map