tandem-front-end
Version:
Visual editor for web components
92 lines • 4.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var tandem_common_1 = require("tandem-common");
var recompose_1 = require("recompose");
var actions_1 = require("actions");
var FONT_FAMILIES = ["Helvetica", "Roboto"].map(function (value) { return ({ label: value, value: value }); });
var FONT_WEIGHTS = ["100", "200", "300", "400"].map(function (value) { return ({ label: value, value: value }); });
var DECORATIONS = [
"underline",
"overline",
"line-through"
].map(function (value) { return ({ label: value, value: value }); });
var ALIGNMENTS = [
{
value: "left",
iconSrc: require("../../../../../../../icons/text-left.svg")
},
{
value: "center",
iconSrc: require("../../../../../../../icons/text-center.svg")
},
{
value: "justify",
iconSrc: require("../../../../../../../icons/text-justify.svg")
},
{
value: "right",
iconSrc: require("../../../../../../../icons/text-right.svg")
}
];
exports.default = recompose_1.compose(recompose_1.pure, recompose_1.withHandlers({
onPropertyChange: function (_a) {
var dispatch = _a.dispatch;
return function (name, value) {
dispatch(actions_1.cssPropertyChanged(name, value));
};
},
onPropertyChangeComplete: function (_a) {
var dispatch = _a.dispatch;
return function (name, value) {
dispatch(actions_1.cssPropertyChangeCompleted(name, value));
};
}
}), function (Base) { return function (_a) {
var selectedNodes = _a.selectedNodes, onPropertyChange = _a.onPropertyChange, onPropertyChangeComplete = _a.onPropertyChangeComplete;
var node = selectedNodes[0];
return (React.createElement(Base, { familyInputProps: {
options: FONT_FAMILIES,
value: node.style["font-family"],
onChange: propertyChangeCallback("font-family", onPropertyChange),
onChangeComplete: propertyChangeCallback("font-family", onPropertyChangeComplete)
}, weightInputProps: {
options: FONT_WEIGHTS,
value: node.style["font-weight"],
onChange: propertyChangeCallback("font-weight", onPropertyChange),
onChangeComplete: propertyChangeCallback("font-weight", onPropertyChangeComplete)
}, decorationInputProps: {
options: FONT_WEIGHTS,
value: node.style["text-decoration"],
onChange: propertyChangeCallback("text-decoration", onPropertyChange),
onChangeComplete: propertyChangeCallback("text-decoration", onPropertyChangeComplete)
}, lineInputProps: {
options: FONT_WEIGHTS,
value: node.style["line-height"],
onChange: propertyChangeCallback("line-height", onPropertyChange),
onChangeComplete: propertyChangeCallback("line-height", onPropertyChangeComplete)
}, spacingInputProps: {
options: FONT_WEIGHTS,
value: node.style["letter-spacing"],
onChange: propertyChangeCallback("letter-spacing", onPropertyChange),
onChangeComplete: propertyChangeCallback("letter-spacing", onPropertyChangeComplete)
}, alignmentInputProps: {
options: ALIGNMENTS,
value: node.style["text-align"],
onChange: propertyChangeCallback("text-align", onPropertyChange),
onChangeComplete: propertyChangeCallback("text-align", onPropertyChangeComplete)
}, sizeInputProps: {
options: FONT_FAMILIES,
value: node.style["font-size"],
onChange: propertyChangeCallback("font-size", onPropertyChange),
onChangeComplete: propertyChangeCallback("font-size", onPropertyChangeComplete)
}, colorInputProps: {
value: node.style.color,
onChange: propertyChangeCallback("color", onPropertyChange),
onChangeComplete: propertyChangeCallback("color", onPropertyChangeComplete)
} }));
}; });
var propertyChangeCallback = tandem_common_1.memoize(function (name, listener) { return function (value) {
return listener(name, value);
}; });
//# sourceMappingURL=typography-controller.js.map