tandem-front-end/lib/components/root/workspace/right-gutter/styles/index.js

Visual editor for web components

"use strict";
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 });
require("./index.scss");
var React = require("react");
var recompose_1 = require("recompose");
var pane_1 = require("../../../../pane");
// import { PrettyStylesComponent } from "./pretty";
var paperclip_1 = require("paperclip");
var tandem_common_1 = require("tandem-common");
var __1 = require("../../../../..");
var BaseStylesPaneComponent = function (_a) {
    var root = _a.root, onCssChange = _a.onCssChange, onFocus = _a.onFocus, onBlur = _a.onBlur, value = _a.value, focused = _a.focused;
    return (React.createElement(pane_1.PaneComponent, { header: "Styles", className: "m-styles-pane" },
        React.createElement("div", null, "CSS (temporary)"),
        React.createElement("textarea", __assign({ onFocus: onFocus, onBlur: onBlur, defaultValue: value }, (focused ? tandem_common_1.EMPTY_OBJECT : { value: value }), { style: { height: 400 }, onChange: onCssChange }))));
};
var getSelectedNodeStyle = function (root) {
    var node = paperclip_1.getSyntheticNodeById(root.selectedNodeIds[0], root.documents);
    return (node &&
        tandem_common_1.stringifyStyle(node.style || tandem_common_1.EMPTY_OBJECT)
            .split(";")
            .join(";\n"));
};
exports.StylesPaneComponent = recompose_1.compose(recompose_1.pure, recompose_1.withState("focused", "setFocus", false), recompose_1.withState("value", "setValue", function (_a) {
    var root = _a.root;
    return getSelectedNodeStyle(root);
}), recompose_1.withHandlers({
    onCssChange: function (_a) {
        var dispatch = _a.dispatch, setValue = _a.setValue;
        return function (event) {
            setValue(event.target.value);
            dispatch(__1.rawCssTextChanged(event.target.value));
            event.stopPropagation();
        };
    },
    onFocus: function (_a) {
        var setFocus = _a.setFocus;
        return function () { return setFocus(true); };
    },
    onBlur: function (_a) {
        var setFocus = _a.setFocus;
        return function () { return setFocus(false); };
    }
}), recompose_1.lifecycle({
    componentDidUpdate: function (_a) {
        var focused = _a.focused, root = _a.root, setValue = _a.setValue;
        if (this.props.root) {
            var oldValue = getSelectedNodeStyle(root);
            var newValue = getSelectedNodeStyle(this.props.root);
            if (!this.props.focused && oldValue !== newValue) {
                setValue(newValue);
            }
        }
    }
}))(BaseStylesPaneComponent);
//# sourceMappingURL=index.js.map