hrw-certificate-editor/lib/Certificate/editors/imagemap/properties/TextProperty.js

Design Editor Tools with React.js + ant.design + fabric.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const antd_1 = require("antd");
const sortBy_1 = __importDefault(require("lodash/sortBy"));
const Icon_1 = __importDefault(require("../../../components/icon/Icon"));
const fonts_1 = __importDefault(require("../../../components/font/fonts"));
const fonts = fonts_1.default.getFonts();
exports.default = {
    render(canvasRef, form, data) {
        const { getFieldDecorator } = form;
        return (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(antd_1.Col, { span: 16 },
                react_1.default.createElement(antd_1.Form.Item, { label: "Font Family", colon: false }, getFieldDecorator('fontFamily', {
                    initialValue: data.fontFamily,
                })(react_1.default.createElement(antd_1.Select, null, Object.keys(fonts).map(font => {
                    return (react_1.default.createElement(antd_1.Select.OptGroup, { key: font, label: font.toUpperCase() }, sortBy_1.default(fonts[font], ['name']).map(f => (react_1.default.createElement(antd_1.Select.Option, { key: f.name, value: f.name }, f.name)))));
                }))))),
            react_1.default.createElement(antd_1.Col, { span: 8 },
                react_1.default.createElement(antd_1.Form.Item, { label: "Font Size", colon: false }, getFieldDecorator('fontSize', {
                    initialValue: data.fontSize || '32',
                })(react_1.default.createElement(antd_1.Select, null, Array.from({ length: 60 }, (v, k) => (react_1.default.createElement(antd_1.Select.Option, { key: k, value: `${k + 1}` }, k + 1))))))),
            react_1.default.createElement(antd_1.Col, { span: 6 },
                react_1.default.createElement(antd_1.Form.Item, null, getFieldDecorator('fontWeight', {
                    valuePropName: 'checked',
                    initialValue: data.fontWeight === 'bold',
                })(react_1.default.createElement(antd_1.Tag.CheckableTag, { className: "rde-action-tag" },
                    react_1.default.createElement(Icon_1.default, { name: "bold" }))))),
            react_1.default.createElement(antd_1.Col, { span: 6 },
                react_1.default.createElement(antd_1.Form.Item, null, getFieldDecorator('fontStyle', {
                    valuePropName: 'checked',
                    initialValue: data.fontStyle === 'italic',
                })(react_1.default.createElement(antd_1.Tag.CheckableTag, { className: "rde-action-tag" },
                    react_1.default.createElement(Icon_1.default, { name: "italic" }))))),
            react_1.default.createElement(antd_1.Col, { span: 6 },
                react_1.default.createElement(antd_1.Form.Item, null, getFieldDecorator('linethrough', {
                    valuePropName: 'checked',
                    initialValue: data.linethrough,
                })(react_1.default.createElement(antd_1.Tag.CheckableTag, { className: "rde-action-tag" },
                    react_1.default.createElement(Icon_1.default, { name: "strikethrough" }))))),
            react_1.default.createElement(antd_1.Col, { span: 6 },
                react_1.default.createElement(antd_1.Form.Item, null, getFieldDecorator('underline', {
                    valuePropName: 'checked',
                    initialValue: data.underline,
                })(react_1.default.createElement(antd_1.Tag.CheckableTag, { className: "rde-action-tag" },
                    react_1.default.createElement(Icon_1.default, { name: "underline" }))))),
            react_1.default.createElement(antd_1.Col, { span: 6 },
                react_1.default.createElement(antd_1.Form.Item, null, getFieldDecorator('textAlign.left', {
                    valuePropName: 'checked',
                    initialValue: data.textAlign === 'left',
                })(react_1.default.createElement(antd_1.Tag.CheckableTag, { className: "rde-action-tag" },
                    react_1.default.createElement(Icon_1.default, { name: "align-left" }))))),
            react_1.default.createElement(antd_1.Col, { span: 6 },
                react_1.default.createElement(antd_1.Form.Item, null, getFieldDecorator('textAlign.center', {
                    valuePropName: 'checked',
                    initialValue: data.textAlign === 'center',
                })(react_1.default.createElement(antd_1.Tag.CheckableTag, { className: "rde-action-tag" },
                    react_1.default.createElement(Icon_1.default, { name: "align-center" }))))),
            react_1.default.createElement(antd_1.Col, { span: 6 },
                react_1.default.createElement(antd_1.Form.Item, null, getFieldDecorator('textAlign.right', {
                    valuePropName: 'checked',
                    initialValue: data.textAlign === 'right',
                })(react_1.default.createElement(antd_1.Tag.CheckableTag, { className: "rde-action-tag" },
                    react_1.default.createElement(Icon_1.default, { name: "align-right" }))))),
            react_1.default.createElement(antd_1.Col, { span: 6 },
                react_1.default.createElement(antd_1.Form.Item, null, getFieldDecorator('textAlign.justify', {
                    valuePropName: 'checked',
                    initialValue: data.textAlign === 'justify',
                })(react_1.default.createElement(antd_1.Tag.CheckableTag, { className: "rde-action-tag" },
                    react_1.default.createElement(Icon_1.default, { name: "align-justify" })))))));
    },
};
//# sourceMappingURL=TextProperty.js.map