eapp-amis-theme-editor/esm/component/Link.js

amis主题编辑器

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

import { __assign } from 'tslib';
import { render } from 'amis-core';
import React__default from 'react';
import cx from 'classnames';
import { getSchemaTpl } from '../tpl.js';
import { registerComponent } from './index.js';
import { i18n } from 'i18n-runtime';

var ThemeLinkBase = function (props) {
  var onEdit = props.onEdit,
    activeId = props.activeId;
  var content = [{
    type: 'default',
    title: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
    body: i18n("a4a6add4d9e91273e7e405e895011c64"),
    disabled: false
  }, {
    type: 'hover',
    title: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
    body: i18n("e8a0ca6c8deddec868ee3875e6609a4e"),
    disabled: false
  }, {
    type: 'click',
    title: i18n("4363c17ebb346b646af55bd8c8075915"),
    body: i18n("8d35e7e473227c7e314e6033ec127db4"),
    disabled: false
  }, {
    type: 'disabled',
    title: i18n("710ad08b11419332713360d2750cd707"),
    body: i18n("04deb1572a3d86a8a96022645ca243ea"),
    disabled: true
  }];
  function handleEdit(type, title) {
    onEdit({
      title: title + i18n("8f68a7f0132dfa55224f88a21dbb12fa"),
      path: "component.link.base.".concat(type, ".body"),
      body: getSchemaTpl('normal', [{
        type: 'amis-theme-font-editor',
        label: false,
        textAlign: false,
        hideFontFamily: true,
        hideLineHeight: true,
        name: 'font'
      }, {
        type: 'amis-theme-wrapper',
        label: false,
        title: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
        body: [{
          type: 'amis-theme-color-picker',
          label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
          name: 'bg-color',
          labelMode: 'input',
          options: '${colorOptions}'
        }]
      }])
    });
  }
  return React__default.createElement("div", {
    className: "Theme-Link-base"
  }, content.map(function (item) {
    return React__default.createElement("div", {
      className: "Theme-Link-base-item"
    }, React__default.createElement("div", {
      className: "Theme-Link-base-item-title"
    }, item.title), React__default.createElement("div", {
      className: cx('Theme-Link-base-item-content', 'Theme-Link-base-item-content--' + item.type, activeId === "component.link.base.".concat(item.type, ".body") && 'Theme-Link-base-item-content--active'),
      onClick: function () {
        return handleEdit(item.type, item.title + i18n("faf1f0172b1960d369011c68794e5056"));
      }
    }, render({
      type: 'link',
      body: item.body,
      disabled: item.disabled
    })));
  }));
};
var ThemeLinkIcon = function (props) {
  var activeId = props.activeId,
    onEdit = props.onEdit;
  function handleEdit() {
    onEdit({
      title: i18n("774b2bcaca8a64f46c84b510cec89109"),
      path: 'component.link.icon.body',
      body: getSchemaTpl('normal', [{
        type: 'amis-theme-select',
        name: 'size',
        label: i18n("ef79da787ad206e5d5f8cf62e195c836"),
        extraUnit: ['px'],
        options: '${sizesOptions}'
      }, {
        type: 'amis-theme-select',
        name: 'margin',
        label: i18n("a68e1efc4cfb1c098588ba307a83e5b7"),
        options: '${sizesOptions}'
      }])
    });
  }
  return React__default.createElement("div", {
    className: "Theme-Link-icon"
  }, React__default.createElement("div", {
    className: "Theme-Link-icon-item"
  }, React__default.createElement("div", {
    className: cx('Theme-Link-icon-item-content', activeId === "component.link.icon.body" && 'Theme-Link-icon-item-content--active'),
    onClick: handleEdit
  }, render({
    type: 'link',
    body: i18n("b783fe0ed9ccac4709fa53e48626e7f7"),
    icon: 'iconfont icon-search',
    rightIcon: 'iconfont icon-copy'
  }))));
};
var ThemeLink = function (props) {
  return {
    title: i18n("a570fb905a78a803b76ec27eee4bfbef"),
    body: [{
      title: i18n("4af1215ffa45b8245f055eb676fd6970"),
      body: function (onEdit) {
        return React__default.createElement(ThemeLinkBase, __assign({}, props, {
          onEdit: onEdit
        }));
      }
    }, {
      title: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
      body: function (onEdit) {
        return React__default.createElement(ThemeLinkIcon, __assign({}, props, {
          onEdit: onEdit
        }));
      }
    }]
  };
};
registerComponent('link', {
  type: 'common',
  label: i18n("bfe68d5844f8e54602760e18f45954f7"),
  key: 'link',
  component: function () {
    return ThemeLink;
  }
});