amis-theme-editor/lib/global/Font.js

amis主题编辑器

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var cx = require('classnames');
var tpl = require('../tpl.js');
var i18nRuntime = require('i18n-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

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: i18nRuntime.i18n("efb399e557c1f444ba215c8e2dbfb891"),
  value: i18nRuntime.i18n("efb399e557c1f444ba215c8e2dbfb891")
}, {
  label: i18nRuntime.i18n("4e9edbb054a1fc52fe2012ff8cb3b20e"),
  value: i18nRuntime.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: i18nRuntime.i18n("bd8e7ebd31bd804a20986f7dd3739900"),
  value: i18nRuntime.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: i18nRuntime.i18n("d55a1b98030839c3ce3606d7d2c80235"),
  value: i18nRuntime.i18n("d55a1b98030839c3ce3606d7d2c80235")
}, {
  label: i18nRuntime.i18n("c9045965fa0fbf29323518d79c9da0f1"),
  value: i18nRuntime.i18n("c9045965fa0fbf29323518d79c9da0f1")
}, {
  label: i18nRuntime.i18n("c1ef096e25d96c451fd39c172b3f569a"),
  value: i18nRuntime.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: i18nRuntime.i18n("09e4d5659a11cf8a55f59e867b30ab75"),
  value: i18nRuntime.i18n("09e4d5659a11cf8a55f59e867b30ab75")
}, {
  label: i18nRuntime.i18n("56d3dcaab79fe10dfbc4b80f0d9d72a4"),
  value: i18nRuntime.i18n("56d3dcaab79fe10dfbc4b80f0d9d72a4")
}, {
  label: i18nRuntime.i18n("2c1605abdc63ac897a76aeba5dcf36a4"),
  value: i18nRuntime.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: i18nRuntime.i18n("db37a0bd2e60503e939e8eee02511550"),
  value: i18nRuntime.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 ThemeFontCards = function (props) {
  var fonts = props.fonts,
    path = props.path,
    activeId = props.activeId,
    onEdit = props.onEdit,
    name = props.name,
    editConfig = props.editConfig,
    disabled = props.disabled;
  function onFontEdit(index) {
    if (disabled) {
      return;
    }
    onEdit(tslib.__assign({
      path: "".concat(path, ".").concat(index),
      activeId: "".concat(path, ".").concat(index)
    }, editConfig));
  }
  return React__default["default"].createElement("div", {
    className: "ThemeEditor-font-cards"
  }, fonts.map(function (item, i) {
    var _a;
    return React__default["default"].createElement("div", {
      key: item.token,
      className: cx__default["default"]('ThemeEditor-font-cards-item', activeId === "".concat(path, ".").concat(i) && 'ThemeEditor-font-cards-item--active', disabled && 'ThemeEditor-font-cards-item--disabled'),
      onClick: function () {
        onFontEdit(i);
      }
    }, React__default["default"].createElement("div", {
      className: "ThemeEditor-font-cards-title",
      style: (_a = {}, _a[name] = item.value, _a)
    }, i18nRuntime.i18n("f85468b5bdcaf00f836ad9adac470e4a")), React__default["default"].createElement("div", {
      className: "ThemeEditor-font-cards-des"
    }, React__default["default"].createElement("div", {
      className: "ThemeEditor-font-cards-token"
    }, item.token), React__default["default"].createElement("div", {
      className: "ThemeEditor-font-cards-label"
    }, name === 'lineHeight' ? 'line-height: ' + item.value : name === 'fontWeight' ? 'line-height: ' + item.value : item.value + '-' + item.label)));
  }));
};
var ThemeFontSize = function (props) {
  var editConfig = {
    title: i18nRuntime.i18n("7ff29e9085ecbdf1af3e2e5d53af90d3"),
    body: tpl.getSchemaTpl('normal', [{
      name: 'label',
      type: 'input-text',
      label: i18nRuntime.i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
      required: true
    }, {
      name: 'value',
      type: 'input-number',
      label: i18nRuntime.i18n("fc55aff8c7e01416e93ac218d98b3b74"),
      max: 48,
      min: 12,
      required: true,
      unitOptions: ['px', 'em']
    }, {
      name: 'token',
      type: 'input-text',
      label: i18nRuntime.i18n("122afa60000b5367d28fe360cc1ab400"),
      required: true,
      disabled: true
    }])
  };
  return React__default["default"].createElement("div", {
    className: "ThemeEditor-font-size"
  }, React__default["default"].createElement(ThemeFontCards, tslib.__assign({}, props, {
    fonts: props.data.global.fonts.size.body,
    path: "global.fonts.size.body",
    onEdit: props.onEdit,
    name: "fontSize",
    editConfig: editConfig
  })));
};
var ThemeFontLineHeight = function (props) {
  var editConfig = {
    title: i18nRuntime.i18n("9c8031130d6ad438fa8a532888a698b5"),
    path: 'global.fonts.lineHeight',
    body: tpl.getSchemaTpl('normal', [{
      type: 'input-number',
      name: 'body.0.value',
      label: '${body.0.label}',
      labelWidth: 100,
      unitOptions: [{
        label: i18nRuntime.i18n("a9071b454b601bc837a3703ca215bc56"),
        value: ''
      }, {
        label: 'px',
        value: 'px'
      }, {
        label: 'rem',
        value: 'rem'
      }, {
        label: 'em',
        value: 'em'
      }]
    }, {
      type: 'input-number',
      name: 'body.1.value',
      label: '${body.1.label}',
      labelWidth: 100,
      unitOptions: [{
        label: i18nRuntime.i18n("a9071b454b601bc837a3703ca215bc56"),
        value: ''
      }, {
        label: 'px',
        value: 'px'
      }, {
        label: 'rem',
        value: 'rem'
      }, {
        label: 'em',
        value: 'em'
      }]
    }, {
      type: 'input-number',
      name: 'body.2.value',
      label: '${body.2.label}',
      labelWidth: 100,
      unitOptions: [{
        label: i18nRuntime.i18n("a9071b454b601bc837a3703ca215bc56"),
        value: ''
      }, {
        label: 'px',
        value: 'px'
      }, {
        label: 'rem',
        value: 'rem'
      }, {
        label: 'em',
        value: 'em'
      }]
    }])
  };
  return React__default["default"].createElement(ThemeFontCards, tslib.__assign({}, props, {
    fonts: props.data.global.fonts.lineHeight.body,
    path: "global.fonts.lineHeight.body",
    onEdit: props.onEdit,
    name: "lineHeight",
    editConfig: editConfig
  }));
};
var ThemeFontWeight = function (props) {
  return React__default["default"].createElement(ThemeFontCards, tslib.__assign({}, props, {
    fonts: props.data.global.fonts.weight.body,
    path: "global.fonts.weight.body",
    onEdit: props.onEdit,
    name: "fontWeight",
    disabled: true
  }));
};
var ThemeFont = function (props) {
  return {
    title: i18nRuntime.i18n("8456bc40d48da5af833f1c63385e9879"),
    body: [{
      title: i18nRuntime.i18n("8456bc40d48da5af833f1c63385e9879"),
      action: {
        editButton: {
          title: i18nRuntime.i18n("8456bc40d48da5af833f1c63385e9879"),
          path: 'global.fonts.base',
          body: tpl.getSchemaTpl('normal', [{
            type: 'combo',
            name: 'body',
            label: i18nRuntime.i18n("e55434b9eb24e90b62631515be590f07"),
            multiple: true,
            draggable: true,
            items: [{
              type: 'input-text',
              label: false,
              name: 'value',
              options: SYSTEM_FONT_FAMILY
            }]
          }])
        }
      },
      body: function () {
        return React__default["default"].createElement("div", {
          className: "ThemeEditor-font-base"
        }, React__default["default"].createElement("div", {
          className: "ThemeEditor-font-base-item"
        }, React__default["default"].createElement("p", {
          className: "ThemeEditor-font-base-title"
        }, "Aa"), React__default["default"].createElement("p", {
          className: "ThemeEditor-font-base-des"
        }, "Take what you want.")), React__default["default"].createElement("div", {
          className: "ThemeEditor-font-base-item"
        }, React__default["default"].createElement("p", {
          className: "ThemeEditor-font-base-title"
        }, "123"), React__default["default"].createElement("p", {
          className: "ThemeEditor-font-base-des"
        }, "0123456789")), React__default["default"].createElement("div", {
          className: "ThemeEditor-font-base-item"
        }, React__default["default"].createElement("p", {
          className: "ThemeEditor-font-base-title"
        }, i18nRuntime.i18n("4325df71731e219dcaf9f279cde5a0d8")), React__default["default"].createElement("p", {
          className: "ThemeEditor-font-base-des"
        }, i18nRuntime.i18n("f85468b5bdcaf00f836ad9adac470e4a"))));
      }
    }, {
      title: i18nRuntime.i18n("fc55aff8c7e01416e93ac218d98b3b74"),
      body: function (onEdit) {
        return React__default["default"].createElement(ThemeFontSize, tslib.__assign({}, props, {
          onEdit: onEdit
        }));
      }
    }, {
      title: i18nRuntime.i18n("17169fd8c2ffa82c4e1d08e7267725f4"),
      body: function (onEdit) {
        return React__default["default"].createElement(ThemeFontLineHeight, tslib.__assign({}, props, {
          onEdit: onEdit
        }));
      }
    }, {
      title: i18nRuntime.i18n("c988dd65ce45c335db5c4354eec7c110"),
      subtitle: React__default["default"].createElement("div", {
        className: "ThemeEditor-font-config-disabled"
      }, i18nRuntime.i18n("d2c934469bfa13f30a8ebc0433177d6d")),
      body: function (onEdit) {
        return React__default["default"].createElement(ThemeFontWeight, tslib.__assign({}, props, {
          onEdit: onEdit
        }));
      }
    }]
  };
};
var Font = (function () {
  return ThemeFont;
});

exports["default"] = Font;