tandem-front-end
Version:
Visual editor for web components
51 lines • 2.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var recompose_1 = require("recompose");
var actions_1 = require("actions");
var tandem_common_1 = require("tandem-common");
var BackgroundItem = require("./backgrounds.pc").BackgroundItem;
var DEFAULT_COLOR = "rgba(200, 200, 200, 1)";
exports.default = recompose_1.compose(recompose_1.pure, recompose_1.withHandlers({
onChange: function (_a) {
var dispatch = _a.dispatch, selectedNodes = _a.selectedNodes;
return function (item, index) {
var node = selectedNodes[0];
var value = node.style.background;
dispatch(actions_1.cssPropertyChanged("background", replaceBackground(value, item, index)));
};
},
onChangeComplete: function (_a) {
var dispatch = _a.dispatch, selectedNodes = _a.selectedNodes;
return function (item, index) {
var node = selectedNodes[0];
var value = node.style.background;
dispatch(actions_1.cssPropertyChangeCompleted("background", replaceBackground(value, item, index)));
};
},
onPlusButtonClick: function (_a) {
var dispatch = _a.dispatch, selectedNodes = _a.selectedNodes, value = _a.value;
return function () {
var node = selectedNodes[0];
var value = node.style.background;
dispatch(actions_1.cssPropertyChangeCompleted("background", value ? value + "," + DEFAULT_COLOR : DEFAULT_COLOR));
};
}
}), function (Base) { return function (_a) {
var onChange = _a.onChange, onChangeComplete = _a.onChangeComplete, onPlusButtonClick = _a.onPlusButtonClick, selectedNodes = _a.selectedNodes;
var node = selectedNodes[0];
var children = splitBackgrounds(node.style.background).map(function (background, i) {
return (React.createElement(BackgroundItem, { key: i, value: background, onChange: function (value) { return onChange(value, i); }, onChangeComplete: function (value) { return onChangeComplete(value, i); } }));
});
return (React.createElement(Base, { contentProps: { children: children }, plusButtonProps: { onClick: onPlusButtonClick } }));
}; });
var splitBackgrounds = function (value) {
return (value || "").match(/(rgba\(.*?\)|\w+|#[^,])/g) || [];
};
// TODO - validation here
var replaceBackground = function (oldValue, replacement, index) {
return tandem_common_1.arraySplice(splitBackgrounds(oldValue), index, 1, replacement)
.filter(function (v) { return Boolean(v.trim()); })
.join(",") || undefined;
};
//# sourceMappingURL=backgrounds-controller.js.map