amis-theme-editor/esm/renderers/Font.js

amis主题编辑器

/**
 * amis-theme-editor v2.0.22-beta.2
 * Copyright 2018-2023 @fex
 */

import { __extends, __assign, __decorate, __spreadArray } from 'tslib';
import React__default, { useEffect } from 'react';
import { FormItem } from 'amis-core';
import '../icons/index.js';
import cx from 'classnames';
import { TooltipWrapper } from 'amis-ui';
import ColorPicker from './ColorPicker.js';
import cloneDeep from 'lodash/cloneDeep';
import assign from 'lodash/assign';
import { ThemeWrapperHeader } from './ThemeWrapper.js';
import ThemeSelect from './ThemeSelect.js';
import { getValueByPath, getInheritValue, formatInheritData, setInheritData } from '../util.js';
import { i18n } from 'i18n-runtime';
import { Icon } from 'amis';

/**
 * @file Font.tsx
 * @description 设置文字
 */
var defaultFontSize = ['12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px'].map(function (n) {
  return {
    value: n,
    label: n,
    realValue: n
  };
});
var defaultFontWeight = ['100', '200', '300', '400', '500', '600', '700', '800', '900'].map(function (n) {
  return {
    value: n,
    label: n,
    realValue: n
  };
});
var defaultlineHeight = [{
  label: i18n("879f4e7bd863a00f77d30f05076ac6cb"),
  value: '1.3',
  realValue: '1.3'
}, {
  label: i18n("4905c69b940b0d94cf8aec83bc8dcc83"),
  value: '1.5',
  realValue: '1.5'
}, {
  label: i18n("268c43e529c54fb458397b9c13351a67"),
  value: '1.7',
  realValue: '1.7'
}];
var SYSTEM_FONT_FAMILY = [{
  label: 'Academy Engraved LET',
  value: 'Academy Engraved LET'
}, {
  label: 'Al Bayan',
  value: 'Al Bayan'
}, {
  label: 'Al Nile',
  value: 'Al Nile'
}, {
  label: 'Al Tarikh',
  value: 'Al Tarikh'
}, {
  label: 'American Typewriter',
  value: 'American Typewriter'
}, {
  label: 'Andale Mono',
  value: 'Andale Mono'
}, {
  label: 'Apple Braille',
  value: 'Apple Braille'
}, {
  label: 'Apple Chancery',
  value: 'Apple Chancery'
}, {
  label: 'Apple Color Emoji',
  value: 'Apple Color Emoji'
}, {
  label: 'Apple SD Gothic Neo',
  value: 'Apple SD Gothic Neo'
}, {
  label: 'Apple Symbols',
  value: 'Apple Symbols'
}, {
  label: 'AppleGothic',
  value: 'AppleGothic'
}, {
  label: 'AppleMyungjo',
  value: 'AppleMyungjo'
}, {
  label: 'Arial',
  value: 'Arial'
}, {
  label: 'Arial Black',
  value: 'Arial Black'
}, {
  label: 'Arial Hebrew',
  value: 'Arial Hebrew'
}, {
  label: 'Arial Hebrew Scholar',
  value: 'Arial Hebrew Scholar'
}, {
  label: 'Arial Narrow',
  value: 'Arial Narrow'
}, {
  label: 'Arial Rounded MT Bold',
  value: 'Arial Rounded MT Bold'
}, {
  label: 'Arial Unicode MS',
  value: 'Arial Unicode MS'
}, {
  label: 'Avenir',
  value: 'Avenir'
}, {
  label: 'Avenir Next',
  value: 'Avenir Next'
}, {
  label: 'Avenir Next Condensed',
  value: 'Avenir Next Condensed'
}, {
  label: 'Ayuthaya',
  value: 'Ayuthaya'
}, {
  label: 'Baghdad',
  value: 'Baghdad'
}, {
  label: 'Bangla MN',
  value: 'Bangla MN'
}, {
  label: 'Bangla Sangam MN',
  value: 'Bangla Sangam MN'
}, {
  label: 'Baskerville',
  value: 'Baskerville'
}, {
  label: 'Beirut',
  value: 'Beirut'
}, {
  label: 'Big Caslon',
  value: 'Big Caslon'
}, {
  label: 'Bodoni 72',
  value: 'Bodoni 72'
}, {
  label: 'Bodoni 72 Oldstyle',
  value: 'Bodoni 72 Oldstyle'
}, {
  label: 'Bodoni 72 Smallcaps',
  value: 'Bodoni 72 Smallcaps'
}, {
  label: 'Bodoni Ornaments',
  value: 'Bodoni Ornaments'
}, {
  label: 'Bradley Hand',
  value: 'Bradley Hand'
}, {
  label: 'Brush Script MT',
  value: 'Brush Script MT'
}, {
  label: 'Chalkboard',
  value: 'Chalkboard'
}, {
  label: 'Chalkboard SE',
  value: 'Chalkboard SE'
}, {
  label: 'Chalkduster',
  value: 'Chalkduster'
}, {
  label: 'Charter',
  value: 'Charter'
}, {
  label: 'Cochin',
  value: 'Cochin'
}, {
  label: 'Comic Sans MS',
  value: 'Comic Sans MS'
}, {
  label: 'Copperplate',
  value: 'Copperplate'
}, {
  label: 'Corsiva Hebrew',
  value: 'Corsiva Hebrew'
}, {
  label: 'Courier New',
  value: 'Courier New'
}, {
  label: 'Damascus',
  value: 'Damascus'
}, {
  label: 'DecoType Naskh',
  value: 'DecoType Naskh'
}, {
  label: 'Devanagari MT',
  value: 'Devanagari MT'
}, {
  label: 'Devanagari Sangam MN',
  value: 'Devanagari Sangam MN'
}, {
  label: 'Didot',
  value: 'Didot'
}, {
  label: 'DIN Alternate',
  value: 'DIN Alternate'
}, {
  label: 'DIN Condensed',
  value: 'DIN Condensed'
}, {
  label: 'Diwan Kufi',
  value: 'Diwan Kufi'
}, {
  label: 'Diwan Thuluth',
  value: 'Diwan Thuluth'
}, {
  label: 'Euphemia UCAS',
  value: 'Euphemia UCAS'
}, {
  label: 'Farah',
  value: 'Farah'
}, {
  label: 'Farisi',
  value: 'Farisi'
}, {
  label: 'Futura',
  value: 'Futura'
}, {
  label: 'Galvji',
  value: 'Galvji'
}, {
  label: 'GB18030 Bitmap',
  value: 'GB18030 Bitmap'
}, {
  label: 'Geeza Pro',
  value: 'Geeza Pro'
}, {
  label: 'Geneva',
  value: 'Geneva'
}, {
  label: 'Georgia',
  value: 'Georgia'
}, {
  label: 'Gill Sans',
  value: 'Gill Sans'
}, {
  label: 'Grantha Sangam MN',
  value: 'Grantha Sangam MN'
}, {
  label: 'Gujarati MT',
  value: 'Gujarati MT'
}, {
  label: 'Gujarati Sangam MN',
  value: 'Gujarati Sangam MN'
}, {
  label: 'Gurmukhi MN',
  value: 'Gurmukhi MN'
}, {
  label: 'Gurmukhi MT',
  value: 'Gurmukhi MT'
}, {
  label: 'Gurmukhi Sangam MN',
  value: 'Gurmukhi Sangam MN'
}, {
  label: i18n("efb399e557c1f444ba215c8e2dbfb891"),
  value: i18n("efb399e557c1f444ba215c8e2dbfb891")
}, {
  label: i18n("4e9edbb054a1fc52fe2012ff8cb3b20e"),
  value: i18n("4e9edbb054a1fc52fe2012ff8cb3b20e")
}, {
  label: 'Helvetica',
  value: 'Helvetica'
}, {
  label: 'Helvetica Neue',
  value: 'Helvetica Neue'
}, {
  label: 'Herculanum',
  value: 'Herculanum'
}, {
  label: 'Hiragino Maru Gothic ProN',
  value: 'Hiragino Maru Gothic ProN'
}, {
  label: 'Hiragino Mincho ProN',
  value: 'Hiragino Mincho ProN'
}, {
  label: 'Hiragino Sans',
  value: 'Hiragino Sans'
}, {
  label: i18n("bd8e7ebd31bd804a20986f7dd3739900"),
  value: i18n("bd8e7ebd31bd804a20986f7dd3739900")
}, {
  label: 'Hoefler Text',
  value: 'Hoefler Text'
}, {
  label: 'Impact',
  value: 'Impact'
}, {
  label: 'InaiMathi',
  value: 'InaiMathi'
}, {
  label: 'ITF Devanagari',
  value: 'ITF Devanagari'
}, {
  label: 'ITF Devanagari Marathi',
  value: 'ITF Devanagari Marathi'
}, {
  label: 'Kailasa',
  value: 'Kailasa'
}, {
  label: 'Kannada MN',
  value: 'Kannada MN'
}, {
  label: 'Kannada Sangam MN',
  value: 'Kannada Sangam MN'
}, {
  label: 'Kefa',
  value: 'Kefa'
}, {
  label: 'Khmer MN',
  value: 'Khmer MN'
}, {
  label: 'Khmer Sangam MN',
  value: 'Khmer Sangam MN'
}, {
  label: 'Kohinoor Bangla',
  value: 'Kohinoor Bangla'
}, {
  label: 'Kohinoor Devanagari',
  value: 'Kohinoor Devanagari'
}, {
  label: 'Kohinoor Gujarati',
  value: 'Kohinoor Gujarati'
}, {
  label: 'Kohinoor Telugu',
  value: 'Kohinoor Telugu'
}, {
  label: 'Kokonor',
  value: 'Kokonor'
}, {
  label: 'Krungthep',
  value: 'Krungthep'
}, {
  label: 'KufiStandardGK',
  value: 'KufiStandardGK'
}, {
  label: 'Lao MN',
  value: 'Lao MN'
}, {
  label: 'Lao Sangam MN',
  value: 'Lao Sangam MN'
}, {
  label: 'Lucida Grande',
  value: 'Lucida Grande'
}, {
  label: 'Luminari',
  value: 'Luminari'
}, {
  label: 'Malayalam MN',
  value: 'Malayalam MN'
}, {
  label: 'Malayalam Sangam MN',
  value: 'Malayalam Sangam MN'
}, {
  label: 'Marker Felt',
  value: 'Marker Felt'
}, {
  label: 'Menlo',
  value: 'Menlo'
}, {
  label: 'Microsoft Sans Serif',
  value: 'Microsoft Sans Serif'
}, {
  label: 'Mishafi',
  value: 'Mishafi'
}, {
  label: 'Mishafi Gold',
  value: 'Mishafi Gold'
}, {
  label: 'Monaco',
  value: 'Monaco'
}, {
  label: 'Mshtakan',
  value: 'Mshtakan'
}, {
  label: 'Mukta Mahee',
  value: 'Mukta Mahee'
}, {
  label: 'Muna',
  value: 'Muna'
}, {
  label: 'Myanmar MN',
  value: 'Myanmar MN'
}, {
  label: 'Myanmar Sangam MN',
  value: 'Myanmar Sangam MN'
}, {
  label: 'Nadeem',
  value: 'Nadeem'
}, {
  label: 'New Peninim MT',
  value: 'New Peninim MT'
}, {
  label: 'Noteworthy',
  value: 'Noteworthy'
}, {
  label: 'Noto Nastaliq Urdu',
  value: 'Noto Nastaliq Urdu'
}, {
  label: 'Noto Sans Kannada',
  value: 'Noto Sans Kannada'
}, {
  label: 'Noto Sans Myanmar',
  value: 'Noto Sans Myanmar'
}, {
  label: 'Noto Sans Oriya',
  value: 'Noto Sans Oriya'
}, {
  label: 'Noto Serif Myanman',
  value: 'Noto Serif Myanman'
}, {
  label: 'Optima',
  value: 'Optima'
}, {
  label: 'Oriya MN',
  value: 'Oriya MN'
}, {
  label: 'Oriya Sangam MN',
  value: 'Oriya Sangam MN'
}, {
  label: 'Palatino',
  value: 'Palatino'
}, {
  label: 'Papyrus',
  value: 'Papyrus'
}, {
  label: 'Party LET',
  value: 'Party LET'
}, {
  label: 'Phosphate',
  value: 'Phosphate'
}, {
  label: i18n("d55a1b98030839c3ce3606d7d2c80235"),
  value: i18n("d55a1b98030839c3ce3606d7d2c80235")
}, {
  label: i18n("c9045965fa0fbf29323518d79c9da0f1"),
  value: i18n("c9045965fa0fbf29323518d79c9da0f1")
}, {
  label: i18n("c1ef096e25d96c451fd39c172b3f569a"),
  value: i18n("c1ef096e25d96c451fd39c172b3f569a")
}, {
  label: 'Plantagenet Cherokee',
  value: 'Plantagenet Cherokee'
}, {
  label: 'PT Mono',
  value: 'PT Mono'
}, {
  label: 'PT Sans',
  value: 'PT Sans'
}, {
  label: 'PT Sans Caption',
  value: 'PT Sans Caption'
}, {
  label: 'PT Sans Narrow',
  value: 'PT Sans Narrow'
}, {
  label: 'PT Serif',
  value: 'PT Serif'
}, {
  label: 'PT Serif Caption',
  value: 'PT Serif Caption'
}, {
  label: 'Raanana',
  value: 'Raanana'
}, {
  label: 'Rockwell',
  value: 'Rockwell'
}, {
  label: 'Sana',
  value: 'Sana'
}, {
  label: 'Sathu',
  value: 'Sathu'
}, {
  label: 'Savoye LET',
  value: 'Savoye LET'
}, {
  label: 'Shree Devanagari 714',
  value: 'Shree Devanagari 714'
}, {
  label: 'SignPainter',
  value: 'SignPainter'
}, {
  label: 'Silom',
  value: 'Silom'
}, {
  label: 'Sinhala MN',
  value: 'Sinhala MN'
}, {
  label: 'Sinhala Sangam MN',
  value: 'Sinhala Sangam MN'
}, {
  label: 'Skia',
  value: 'Skia'
}, {
  label: 'Snell Roundhand',
  value: 'Snell Roundhand'
}, {
  label: i18n("09e4d5659a11cf8a55f59e867b30ab75"),
  value: i18n("09e4d5659a11cf8a55f59e867b30ab75")
}, {
  label: i18n("56d3dcaab79fe10dfbc4b80f0d9d72a4"),
  value: i18n("56d3dcaab79fe10dfbc4b80f0d9d72a4")
}, {
  label: i18n("2c1605abdc63ac897a76aeba5dcf36a4"),
  value: i18n("2c1605abdc63ac897a76aeba5dcf36a4")
}, {
  label: 'STIXGeneral',
  value: 'STIXGeneral'
}, {
  label: 'STIXIntegralsD',
  value: 'STIXIntegralsD'
}, {
  label: 'STIXIntegralsSm',
  value: 'STIXIntegralsSm'
}, {
  label: 'STIXIntegralsUp',
  value: 'STIXIntegralsUp'
}, {
  label: 'STIXIntegralsUpD',
  value: 'STIXIntegralsUpD'
}, {
  label: 'STIXIntegralsUpSm',
  value: 'STIXIntegralsUpSm'
}, {
  label: 'STIXNonUnicode',
  value: 'STIXNonUnicode'
}, {
  label: 'STIXSizeFiveSym',
  value: 'STIXSizeFiveSym'
}, {
  label: 'STIXSizeFourSym',
  value: 'STIXSizeFourSym'
}, {
  label: 'STIXSizeOneSym',
  value: 'STIXSizeOneSym'
}, {
  label: 'STIXSizeThreeSym',
  value: 'STIXSizeThreeSym'
}, {
  label: 'STIXSizeTwoSym',
  value: 'STIXSizeTwoSym'
}, {
  label: 'STIXVariants',
  value: 'STIXVariants'
}, {
  label: i18n("db37a0bd2e60503e939e8eee02511550"),
  value: i18n("db37a0bd2e60503e939e8eee02511550")
}, {
  label: 'Sukhumvit Set',
  value: 'Sukhumvit Set'
}, {
  label: 'Symbol',
  value: 'Symbol'
}, {
  label: 'Tahoma',
  value: 'Tahoma'
}, {
  label: 'Tamil MN',
  value: 'Tamil MN'
}, {
  label: 'Tamil Sangam MN',
  value: 'Tamil Sangam MN'
}, {
  label: 'Telugu MN',
  value: 'Telugu MN'
}, {
  label: 'Teluau nasmln',
  value: 'Teluau nasmln'
}, {
  label: 'Thonburi',
  value: 'Thonburi'
}, {
  label: 'Times New Roman',
  value: 'Times New Roman'
}, {
  label: 'Trattatello',
  value: 'Trattatello'
}, {
  label: 'Trebuchet MS',
  value: 'Trebuchet MS'
}, {
  label: 'Verdana',
  value: 'Verdana'
}, {
  label: 'Waseem',
  value: 'Waseem'
}, {
  label: 'Webdings',
  value: 'Webdings'
}, {
  label: 'Wingdings',
  value: 'Wingdings'
}, {
  label: 'Wingdings 2',
  value: 'Wingdings 2'
}, {
  label: 'Wingdings 3',
  value: 'Wingdings 3'
}, {
  label: 'Zapf Dingbats',
  value: 'Zapf Dingbats'
}, {
  label: 'Zapfino',
  value: 'Zapfino'
}];
var fontStyleOptions = [{
  label: i18n("81d6da77d656c6a9c3cbd795ae4444ea"),
  type: 'font-style',
  value: 'italic'
}, {
  label: i18n("f6f8ea0815881fe9a4aa9352a7fe2299"),
  type: 'text-decoration',
  value: 'underline'
}, {
  label: i18n("a120a873412470089bec1dfd1b581fc9"),
  type: 'text-decoration',
  value: 'line-through'
}];
var textAlignOptions = [{
  label: i18n("413f48cc71f71083ce532a86e3efdc21"),
  type: 'text-align',
  value: 'left'
}, {
  label: i18n("56c17ba6a56c01706ae00a31611deb03"),
  type: 'text-align',
  value: 'center'
}, {
  label: i18n("fd8e9572cc6bf87653c4d8f8b8dd0db9"),
  type: 'text-align',
  value: 'right'
}, {
  label: i18n("da1b972efb29f850b50e219ad4d98ba5"),
  type: 'text-align',
  value: 'justify'
}];
var verticalAlignOptions = [{
  label: i18n("2af8c8235ae57c6a7486883f86701ab3"),
  type: 'vertical-align',
  value: 'top'
}, {
  label: i18n("8bc0ba58bf73b03668ca9b6a74c99f89"),
  type: 'vertical-align',
  value: 'middle'
}, {
  label: i18n("a6d154c4db5068074e32863821c450e1"),
  type: 'vertical-align',
  value: 'bottom'
}];
function FontEditor(props) {
  var state = props.state,
    data = props.data,
    title = props.title,
    label = props.label,
    value = props.value,
    onChange = props.onChange,
    hideColor = props.hideColor,
    hideFontSize = props.hideFontSize,
    hideFontWeight = props.hideFontWeight,
    hideLineHeight = props.hideLineHeight,
    hideFontFamily = props.hideFontFamily,
    _a = props.hasSenior,
    hasSenior = _a === void 0 ? true : _a,
    _b = props.hasVertical,
    hasVertical = _b === void 0 ? true : _b,
    _c = props.fontStyle,
    fontStyle = _c === void 0 ? true : _c,
    _d = props.textAlign,
    textAlign = _d === void 0 ? true : _d,
    _e = props.needColorCustom,
    needColorCustom = _e === void 0 ? false : _e,
    _f = props.colorOptions,
    colorOptions = _f === void 0 ? data.colorOptions : _f,
    _g = props.fontSizeOptions,
    fontSizeOptions = _g === void 0 ? data.fontSizeOptions || defaultFontSize : _g,
    _h = props.fontWeightOptions,
    fontWeightOptions = _h === void 0 ? data.fontWeightOptions || defaultFontWeight : _h,
    _j = props.lineHeightOptions,
    lineHeightOptions = _j === void 0 ? data.lineHeightOptions || defaultlineHeight : _j,
    _k = props.fontFamilyOptions,
    fontFamilyOptions = _k === void 0 ? data.fontFamilyOptions || SYSTEM_FONT_FAMILY : _k,
    editorThemePath = props.editorThemePath;
  var alignOptions = hasVertical ? __spreadArray(__spreadArray([], textAlignOptions, true), verticalAlignOptions, true) : textAlignOptions;
  var _l = React__default.useState(true),
    open = _l[0],
    toggleOpen = _l[1];
  var _m = React__default.useState(false),
    senior = _m[0],
    toggleSenior = _m[1];
  var editorDefaultValue = getValueByPath(editorThemePath, data);
  var editorInheritValue = getInheritValue(editorThemePath, data);
  var _o = React__default.useState(assign({}, formatInheritData(value))),
    sizeData = _o[0],
    setSizeData = _o[1];
  useEffect(function () {
    var timer = setTimeout(function () {
      if (value) {
        setSizeData(assign({}, formatInheritData(value)));
      }
    }, 100);
    return function () {
      return clearTimeout(timer);
    };
  }, [value]);
  function handleEdit(value, type) {
    var data = cloneDeep(sizeData);
    if (['font-style', 'text-decoration', 'text-align', 'vertical-align'].includes(type) && data[type] === value // 这些属性是点击事件，所以如果第二次点击说明是要取消当前的选中状态
    ) {
      data[type] = undefined;
    } else {
      data[type] = value;
    }
    setSizeData(data);
    onChange(setInheritData(data, editorInheritValue));
  }
  return React__default.createElement("div", {
    className: "Theme-FontEditor"
  }, React__default.createElement(ThemeWrapperHeader, {
    title: title || label || i18n("9c07532d0c9acfecfc4ec2eb265c3e03"),
    hasSenior: hasSenior,
    senior: senior,
    toggleSenior: toggleSenior,
    open: open,
    toggleOpen: toggleOpen
  }), open && React__default.createElement("div", {
    className: "Theme-FontEditor-body"
  }, React__default.createElement("div", {
    className: "Theme-FontEditor-line"
  }, !hideColor && React__default.createElement("div", {
    className: "Theme-FontEditor-item Theme-FontEditor-item-color-picker"
  }, React__default.createElement(ColorPicker, __assign({}, props, {
    needCustom: needColorCustom !== null && needColorCustom !== void 0 ? needColorCustom : false,
    value: sizeData.color,
    options: colorOptions,
    onChange: function (value) {
      handleEdit(value, 'color');
    },
    itemName: "color",
    state: state,
    placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue.color,
    editorInheritValue: editorInheritValue === null || editorInheritValue === void 0 ? void 0 : editorInheritValue.color
  }))), !hideFontSize && React__default.createElement("div", {
    className: "Theme-FontEditor-item"
  }, React__default.createElement(ThemeSelect, __assign({}, props, {
    options: fontSizeOptions,
    value: sizeData['fontSize'],
    onChange: function (value) {
      handleEdit(value, 'fontSize');
    },
    itemName: "fontSize",
    menuTpl: "label",
    state: state,
    inheritValue: editorThemePath ? 'inherit' : '',
    placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue.fontSize
  })))), React__default.createElement("div", {
    className: "Theme-FontEditor-line Theme-FontEditor-font-line"
  }, !hideFontWeight && React__default.createElement("div", {
    className: "Theme-FontEditor-item"
  }, React__default.createElement(ThemeSelect, __assign({}, props, {
    options: fontWeightOptions,
    value: sizeData['fontWeight'],
    onChange: function (value) {
      handleEdit(value, 'fontWeight');
    },
    itemName: "fontWeight",
    menuTpl: "label",
    state: state,
    inheritValue: editorThemePath ? 'inherit' : '',
    placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue.fontWeight
  })), (!hideLineHeight || !hideFontFamily) && React__default.createElement("div", {
    className: "Theme-FontEditor-item-label"
  }, i18n("c988dd65ce45c335db5c4354eec7c110"))), !hideLineHeight && React__default.createElement("div", {
    className: "Theme-FontEditor-item"
  }, React__default.createElement(ThemeSelect, __assign({}, props, {
    options: lineHeightOptions,
    value: sizeData['lineHeight'],
    onChange: function (value) {
      handleEdit(value, 'lineHeight');
    },
    itemName: "lineHeight",
    menuTpl: "label",
    state: state,
    inheritValue: editorThemePath ? 'inherit' : '',
    placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue.lineHeight
  })), React__default.createElement("div", {
    className: "Theme-FontEditor-item-label"
  }, i18n("17169fd8c2ffa82c4e1d08e7267725f4"))), !hideFontFamily && React__default.createElement("div", {
    className: "Theme-FontEditor-item Theme-FontEditor-item-font-family"
  }, React__default.createElement(ThemeSelect, __assign({}, props, {
    options: fontFamilyOptions,
    value: sizeData['font-family'],
    onChange: function (value) {
      handleEdit(value, 'font-family');
    },
    itemName: "fontFamily",
    menuTpl: "label",
    state: state,
    inheritValue: editorThemePath ? 'inherit' : ''
  })), React__default.createElement("div", {
    className: "Theme-FontEditor-item-label"
  }, i18n("8456bc40d48da5af833f1c63385e9879")))), senior && fontStyle && React__default.createElement("div", {
    className: "Theme-FontEditor-font-style"
  }, fontStyleOptions.map(function (item, index) {
    return React__default.createElement(TooltipWrapper, {
      tooltip: item.label,
      tooltipTheme: "dark",
      key: item.value
    }, React__default.createElement("div", {
      className: cx('Theme-FontEditor-font-style-icon', sizeData[item.type] === item.value && 'Theme-FontEditor-font-style-selected')
    }, React__default.createElement(Icon, {
      icon: item.value,
      className: "common-icon",
      onClick: function () {
        return handleEdit(item.value, item.type);
      }
    })));
  })), senior && textAlign && React__default.createElement("div", {
    className: "Theme-FontEditor-font-style"
  }, alignOptions.map(function (item, index) {
    return React__default.createElement(TooltipWrapper, {
      tooltip: item.label,
      tooltipTheme: "dark",
      key: item.value
    }, React__default.createElement("div", {
      className: cx('Theme-FontEditor-font-style-icon', hasVertical && index === 3 && 'right-line', sizeData[item.type] === item.value && 'Theme-FontEditor-font-style-selected')
    }, React__default.createElement(Icon, {
      icon: "".concat(item.type, "-").concat(item.value),
      className: "common-icon",
      onClick: function () {
        return handleEdit(item.value, item.type);
      }
    })));
  }))));
}
/** @class */(function (_super) {
  __extends(FontEditorRenderer, _super);
  function FontEditorRenderer() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Object.defineProperty(FontEditorRenderer.prototype, "render", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function () {
      return React__default.createElement(FontEditor, __assign({}, this.props));
    }
  });
  FontEditorRenderer = __decorate([FormItem({
    type: 'amis-theme-font-editor',
    strictMode: false,
    renderLabel: false
  })], FontEditorRenderer);
  return FontEditorRenderer;
})(React__default.Component);