amis-theme-editor/esm/global/Border.js

amis主题编辑器

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

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

var ThemeBorderRadius = function (props) {
  var borders = props.borders,
    path = props.path,
    activeId = props.activeId,
    onEdit = props.onEdit;
  function handleRadiusEdit(i, border) {
    onEdit({
      title: i18n("6d7743c690d8567abef98c80cd0059e4"),
      path: "".concat(path, ".").concat(i),
      body: getSchemaTpl('normal', [{
        type: 'input-text',
        name: 'label',
        label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
        required: true
      }, {
        type: 'input-number',
        name: 'value',
        label: i18n("571676150e82f411aa2a6c068e770a3d"),
        unitOptions: [{
          label: 'px',
          value: 'px'
        }, {
          label: '%',
          value: '%'
        }, {
          label: 'rem',
          value: 'rem'
        }, {
          label: 'em',
          value: 'em'
        }],
        required: true
      }, {
        name: 'token',
        type: 'input-text',
        disabled: true,
        label: i18n("122afa60000b5367d28fe360cc1ab400"),
        required: true
      }])
    });
  }
  return React__default.createElement("div", {
    className: "ThemeEditor-cards"
  }, borders.map(function (item, i) {
    if (item.disabled) {
      return null;
    }
    return React__default.createElement("div", {
      key: item.token,
      className: cx('ThemeEditor-icon-card', 'ThemeEditor-icon-card-large', activeId === "".concat(path, ".").concat(i) && 'ThemeEditor-cards-item--active'),
      onClick: function () {
        return handleRadiusEdit(i);
      }
    }, React__default.createElement("div", {
      className: "ThemeEditor-cards-icon"
    }, React__default.createElement("div", {
      className: cx('ThemeEditor-icon-radius'),
      style: {
        borderRadius: item.value
      }
    })), React__default.createElement("div", {
      className: "ThemeEditor-cards-item-content"
    }, React__default.createElement("div", {
      className: "ThemeEditor-cards-item-label"
    }, item.label), React__default.createElement("div", {
      className: "ThemeEditor-cards-item-value"
    }, item.token, "\u00A0\u00A0\u00A0", item.value)));
  }));
};
var ThemeBorderLine = function (props) {
  var data = props.data,
    activeId = props.activeId,
    onEdit = props.onEdit;
  var borderLine = ['width', 'style'];
  function handleRadiusEdit(i, border, type) {
    if (type === 'style') {
      return;
    }
    onEdit({
      title: i18n("9771f4b7a5077b7d80e0f914047998f1"),
      path: "global.borders.".concat(type, ".body.").concat(i),
      body: getSchemaTpl('normal', [{
        type: 'input-text',
        name: 'label',
        label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
        required: true
      }, {
        type: 'input-number',
        name: 'value',
        label: i18n("c28479019e24e0e4745f4948e9e97ee7"),
        unitOptions: [{
          label: 'px',
          value: 'px'
        }],
        required: true
      }, {
        name: 'token',
        type: 'input-text',
        disabled: true,
        label: i18n("122afa60000b5367d28fe360cc1ab400"),
        required: true
      }])
    });
  }
  return React__default.createElement(React__default.Fragment, null, borderLine.map(function (type, index) {
    return React__default.createElement("div", {
      className: "ThemeEditor-body-content-item ThemeEditor-body-content-item--sub",
      key: index
    }, React__default.createElement("div", {
      className: "ThemeEditor-body-content-item-title ThemeEditor-body-content-item-title--sub"
    }, type === 'width' ? i18n("96b15b89fd7df6180780a7ac7305ba7c") : i18n("84fafbb9668c30ba550e8bd3ebab65a6"), type === 'style' && React__default.createElement("div", {
      className: "ThemeEditor-font-config-disabled"
    }, i18n("d2c934469bfa13f30a8ebc0433177d6d"))), React__default.createElement("div", {
      className: "ThemeEditor-cards"
    }, data.global.borders[type].body.map(function (item, i) {
      if (item.disabled) {
        return null;
      }
      var style = type === 'width' ? {
        borderWidth: item.value
      } : {
        borderStyle: item.value
      };
      return React__default.createElement("div", {
        key: item.token,
        className: cx('ThemeEditor-icon-card', 'ThemeEditor-icon-card-large', 'ThemeEditor-icon-card-no-background', activeId === "global.borders.".concat(type, ".body.").concat(i) && 'ThemeEditor-cards-item--active', type === 'style' && 'ThemeEditor-icon-card-item-disabled'),
        onClick: function () {
          return handleRadiusEdit(i, item, type);
        }
      }, React__default.createElement("div", {
        className: "ThemeEditor-cards-icon"
      }, React__default.createElement("div", {
        className: cx('ThemeEditor-icon-line'),
        style: style
      })), React__default.createElement("div", {
        className: "ThemeEditor-cards-item-content"
      }, React__default.createElement("div", {
        className: "ThemeEditor-cards-item-label"
      }, i18n(item.label)), React__default.createElement("div", {
        className: "ThemeEditor-cards-item-value"
      }, item.token, "\u00A0\u00A0\u00A0", item.value)));
    })));
  }));
};
var ThemeBorder = function (props) {
  var data = props.data;
    props.onChange;
  var borders = data.global.borders;
  return {
    title: i18n("961534b4ea37e4e88aada736b299d063"),
    body: [{
      title: i18n("961534b4ea37e4e88aada736b299d063"),
      body: function (onEdit) {
        return React__default.createElement(ThemeBorderLine, __assign({}, props, {
          onEdit: onEdit
        }));
      }
    }, {
      title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
      body: function (onEdit) {
        return React__default.createElement(ThemeBorderRadius, __assign({}, props, {
          borders: borders.radius.body,
          path: "global.borders.radius.body",
          onEdit: onEdit
        }));
      }
    }]
  };
};
var Border = (function () {
  return ThemeBorder;
});

export { Border as default };