amis-theme-editor/esm/global/Shadow.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 ThemeShadow = function (props) {
  var shadows = props.shadows,
    path = props.path,
    activeId = props.activeId,
    onEdit = props.onEdit;
  function handleShadowEdit(i, shadow) {
    onEdit({
      title: i18n("8a987304fa8cbb29e9299ab98644814d"),
      path: "".concat(path, ".").concat(i),
      body: getSchemaTpl('normal', [{
        name: 'example',
        label: '',
        asFormItem: true,
        labelClassName: 'ThemeEditor-without-label',
        value: '',
        component: function (_a) {
          var data = _a.data;
          var boxShadow = ((data === null || data === void 0 ? void 0 : data.value) || shadow.value).map(function (shadow) {
            return "".concat(shadow.inset ? 'inset' : '', " ").concat(shadow.x || '', " ").concat(shadow.y || '', " ").concat(shadow.blur || '', " ").concat(shadow.spread || '', " ").concat(shadow.color || '');
          }).join(', ');
          return React__default.createElement("div", {
            className: "ThemeEditor-shadow-example"
          }, React__default.createElement("div", {
            className: "ThemeEditor-shadow-square",
            style: {
              boxShadow: boxShadow
            }
          }));
        }
      }, {
        type: 'input-text',
        name: 'label',
        label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
        value: shadow.label,
        required: true
      }, {
        name: 'token',
        type: 'input-text',
        disabled: true,
        label: i18n("122afa60000b5367d28fe360cc1ab400"),
        required: true
      }, {
        type: 'fieldSet',
        title: i18n("5f36fee5ac7f5a7201e8a7b0a719d7e3"),
        collapsable: false,
        collapsed: false,
        headingClassName: 'ThemeEditor-shadow-title',
        body: [{
          type: 'combo',
          name: 'value',
          label: '',
          multiple: true,
          multiLine: true,
          labelClassName: 'ThemeEditor-without-label',
          className: 'ThemeEditor-shadow-combo',
          deleteBtn: {
            type: 'button',
            body: {
              type: 'icon',
              icon: 'trash'
            },
            className: 'ThemeEditor-shadow-delete-button'
          },
          addBtn: {
            type: 'button',
            label: i18n("5f36fee5ac7f5a7201e8a7b0a719d7e3"),
            level: 'enhance',
            block: true
          },
          items: [React__default.createElement("div", {
            className: "ThemeEditor-shadow-combo-title",
            key: "${index}"
          }, i18n("803205e38834280d9e6a75993ac00764")), {
            type: 'input-number',
            name: 'x',
            label: 'X',
            unitOptions: [{
              label: 'px',
              value: 'px'
            }],
            description: 'px',
            className: 'ThemeEditor-shadow-form-number'
          }, {
            type: 'input-number',
            name: 'y',
            label: 'Y',
            unitOptions: [{
              label: 'px',
              value: 'px'
            }],
            description: 'px',
            className: 'ThemeEditor-shadow-form-number'
          }, {
            type: 'input-number',
            name: 'blur',
            label: 'B',
            unitOptions: [{
              label: 'px',
              value: 'px'
            }],
            description: 'px',
            className: 'ThemeEditor-shadow-form-number'
          }, {
            type: 'input-number',
            name: 'spread',
            label: 'S',
            unitOptions: [{
              label: 'px',
              value: 'px'
            }],
            description: 'px',
            className: 'ThemeEditor-shadow-form-number'
          }, {
            type: 'select',
            name: 'inset',
            value: false,
            options: [{
              label: i18n("92d393c2ae53f424856479d090de718f"),
              value: false
            }, {
              label: i18n("b24a723b73f96ab3340fe9502370ee13"),
              value: true
            }],
            className: 'ThemeEditor-shadow-form-inset'
          }, {
            type: 'input-color',
            name: 'color',
            size: 'full',
            label: false,
            format: 'rgba',
            className: 'ThemeEditor-shadow-form-color'
          }]
        }]
      }])
    });
  }
  return React__default.createElement("div", {
    className: "ThemeEditor-cards"
  }, shadows.map(function (item, i) {
    if (item.disabled) {
      return null;
    }
    var boxShadow = item.value.map(function (shadow) {
      return "".concat(shadow.inset ? 'inset' : '', " ").concat(shadow.x || '', " ").concat(shadow.y || '', " ").concat(shadow.blur || '', " ").concat(shadow.spread || '', " ").concat(shadow.color || '');
    });
    return React__default.createElement("div", {
      key: item.token,
      className: cx('ThemeEditor-icon-card', 'ThemeEditor-icon-card-large', 'ThemeEditor-icon-card-shadow', activeId === "".concat(path, ".").concat(i) && 'ThemeEditor-cards-item--active'),
      onClick: function () {
        return handleShadowEdit(i, item);
      }
    }, React__default.createElement("div", {
      className: "ThemeEditor-cards-icon"
    }, React__default.createElement("div", {
      className: cx('ThemeEditor-icon-shadow'),
      style: {
        boxShadow: boxShadow.join(', ')
      }
    })), 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-token"
    }, item.token), boxShadow.map(function (shadow, index) {
      return React__default.createElement("div", {
        className: "ThemeEditor-cards-item-value",
        key: index
      }, shadow);
    })));
  }));
};
var ThemeShadowRender = function (props) {
  var data = props.data;
    props.onChange;
  var shadows = data.global.shadows;
  return {
    title: i18n("803205e38834280d9e6a75993ac00764"),
    body: [{
      title: i18n("803205e38834280d9e6a75993ac00764"),
      body: function (onEdit) {
        return React__default.createElement(ThemeShadow, __assign({}, props, {
          shadows: shadows.shadow.body,
          path: "global.shadows.shadow.body",
          onEdit: onEdit
        }));
      }
    }]
  };
};
var Shadow = (function () {
  return ThemeShadowRender;
});

export { Shadow as default };