eapp-amis-theme-editor/lib/renderers/Shadow.js

amis主题编辑器

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

'use strict';

var tslib = require('tslib');
var React = require('react');
var mobxReact = require('mobx-react');
var amisCore = require('amis-core');
require('../icons/index.js');
var amisUi = require('amis-ui');
var ColorPicker = require('./ColorPicker.js');
var lodash = require('lodash');
var ThemeWrapper = require('./ThemeWrapper.js');
var cx = require('classnames');
var util = require('../util.js');
var i18nRuntime = require('i18n-runtime');
var amis = require('amis');

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);

/**
 * @file Shadow.tsx
 * @description 设置阴影
 */
function ShadowView(props) {
  var show = props.show,
    target = props.target,
    name = props.name,
    value = props.value,
    close = props.close;
  return React__default["default"].createElement(amisUi.Overlay
  // @ts-ignore
  , {
    // @ts-ignore
    container: document.body,
    target: target.current,
    show: show,
    placement: "top",
    offset: [0, -8]
  }, React__default["default"].createElement(amisUi.PopOver, {
    overlay: false,
    onHide: close
  }, React__default["default"].createElement("div", {
    className: "Theme-ShadowView"
  }, React__default["default"].createElement("div", {
    className: "Theme-ShadowView-header"
  }, "\u9634\u5F71\u9884\u89C8"), React__default["default"].createElement("div", {
    className: "Theme-ShadowView-body"
  }, React__default["default"].createElement("div", {
    className: "Theme-ShadowView-body-shadow"
  }, React__default["default"].createElement("div", {
    className: "Theme-ShadowView-body-shadow-square",
    style: {
      boxShadow: (value === null || value === void 0 ? void 0 : value.join(', ')) || 'none'
    }
  })), React__default["default"].createElement("div", {
    className: "Theme-ShadowView-body-title"
  }, name), React__default["default"].createElement("div", {
    className: "Theme-ShadowView-body-value"
  }, value === null || value === void 0 ? void 0 : value.map(function (shadow, index) {
    return React__default["default"].createElement("div", {
      className: "Theme-ShadowView-body-value-item",
      key: index
    }, shadow);
  }))))));
}
function ShadowEditor(props) {
  var data = props.data,
    onChange = props.onChange,
    value = props.value,
    hasSenior = props.hasSenior,
    options = props.options,
    colorOptions = props.colorOptions,
    state = props.state,
    itemName = props.itemName,
    editorThemePath = props.editorThemePath;
  var target = React__default["default"].useRef(null);
  var _a = React__default["default"].useState(true),
    open = _a[0],
    toggleOpen = _a[1];
  var _b = React__default["default"].useState(false),
    senior = _b[0],
    toggleSenior = _b[1];
  var _c = React__default["default"].useState(false),
    show = _c[0],
    toggleViewShow = _c[1];
  var customShadow = {
    label: i18nRuntime.i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
    value: 'custom',
    realValue: [{
      inset: false,
      x: '0px',
      y: '0px',
      blur: '0px',
      spread: '0px',
      color: 'transparent'
    }],
    visible: false
  };
  var shadowOptions = options ? tslib.__spreadArray(tslib.__spreadArray([], options, true), [customShadow], false) : tslib.__spreadArray(tslib.__spreadArray([], lodash.cloneDeep(data.shadowOptions || []), true), [customShadow], false);
  if (state && state !== 'default') {
    shadowOptions.unshift({
      value: editorThemePath ? 'inherit' : "var(".concat(data.default.token, "shadow)"),
      label: i18nRuntime.i18n("a4f758412c3797290c957544c56db443"),
      realValue: editorThemePath ? [i18nRuntime.i18n("a4f758412c3797290c957544c56db443")] : ["var(".concat(data.default.token).concat(itemName, ")")]
    });
  }
  var editorDefaultValue = util.getValueByPath(editorThemePath, data);
  var defaultValue = value ? lodash.find(lodash.cloneDeep(data.shadowOptions), function (item) {
    return item.value === value;
  }) || formateCustomValue(value) : null;
  var _d = React__default["default"].useState(defaultValue),
    shadowData = _d[0],
    setShadowData = _d[1];
  function formateCustomValue(value) {
    var color = {};
    value = value.trim().replace(/((rgba|rgb|var)\(.*?\))|(#.{6})/g, function ($1, $2, index) {
      var key = '$' + index;
      color[key] = $1;
      return key;
    });
    var realValue = value.split(',').map(function (item) {
      var inset = false;
      if (item.includes('inset')) {
        inset = true;
        item = item.replace('inset', '');
      }
      item = item.trim();
      var css = item.split(' ');
      return {
        inset: inset,
        x: css[0],
        y: css[1],
        blur: css[2],
        spread: css[3],
        color: color[css[4]]
      };
    });
    return {
      label: i18nRuntime.i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
      value: 'custom',
      realValue: realValue
    };
  }
  function formatRealValue(value) {
    if (!value) {
      return {
        value: '',
        source: []
      };
    }
    var res = 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 {
      value: res.join(', '),
      source: res
    };
  }
  function onShadowSelect(value) {
    if (value === 'custom') {
      return;
    }
    if (value) {
      var findItem = lodash.find(shadowOptions, function (item) {
        return item.value === value;
      });
      if (findItem === null || findItem === void 0 ? void 0 : findItem.value) {
        setShadowData(findItem);
        onChange(findItem.value);
      }
    } else {
      setShadowData(undefined);
      onChange(undefined);
    }
  }
  function changeToCustom(shadowData) {
    if (!shadowData.value) {
      return shadowData;
    }
    var findItem = lodash.find(shadowOptions, function (item) {
      return item.value === shadowData.value;
    });
    if (!lodash.isEqual(shadowData.realValue, findItem.realValue)) {
      return tslib.__assign(tslib.__assign({}, shadowData), {
        label: i18nRuntime.i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
        value: 'custom'
      });
    }
    return shadowData;
  }
  function handleAdd(inset) {
    var newData = changeToCustom(tslib.__assign(tslib.__assign({}, shadowData || {
      label: i18nRuntime.i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
      value: 'custom'
    }), {
      realValue: tslib.__spreadArray(tslib.__spreadArray([], (shadowData === null || shadowData === void 0 ? void 0 : shadowData.realValue) || [], true), [{
        inset: inset,
        x: '0px',
        y: '0px',
        blur: '0px',
        spread: '0px',
        color: 'transparent'
      }], false)
    }));
    setShadowData(newData);
    onChange(formatRealValue(newData.realValue).value);
  }
  function handleDelete(index) {
    if (shadowData.realValue.length === 1) {
      return;
    }
    var data = lodash.cloneDeep(shadowData);
    data.realValue.splice(index, 1);
    var newData = changeToCustom(data);
    setShadowData(newData);
    onChange(formatRealValue(newData.realValue).value);
  }
  function handleEdit(value, type, index) {
    if (type !== 'color') {
      value += 'px';
    }
    shadowData.realValue[index][type] = value;
    var newData = changeToCustom(shadowData);
    setShadowData(newData);
    onChange(formatRealValue(newData.realValue).value);
  }
  // 数据格式化
  var formatter = function (value) {
    return value + 'px';
  };
  // 还原数据
  var parser = function (value) {
    return parseFloat(value);
  };
  return React__default["default"].createElement("div", {
    className: "Theme-ShadowEditor"
  }, React__default["default"].createElement(ThemeWrapper.ThemeWrapperHeader, {
    title: "\u9634\u5F71",
    hasSenior: hasSenior,
    senior: senior,
    toggleSenior: toggleSenior,
    open: open,
    toggleOpen: toggleOpen
  }), open && React__default["default"].createElement("div", {
    className: "Theme-ShadowEditor-body"
  }, React__default["default"].createElement("div", {
    className: "Theme-ShadowEditor-line"
  }, React__default["default"].createElement("div", {
    ref: target,
    className: "Theme-ShadowEditor-view",
    onMouseOver: function () {
      return toggleViewShow(true);
    },
    onMouseOut: function () {
      return toggleViewShow(false);
    }
  }, React__default["default"].createElement("div", {
    style: {
      boxShadow: formatRealValue(shadowData === null || shadowData === void 0 ? void 0 : shadowData.realValue).value
    },
    className: "Theme-ShadowEditor-view-inner"
  })), React__default["default"].createElement(ShadowView, {
    target: target,
    show: show,
    close: function () {
      toggleViewShow(false);
    },
    name: (shadowData === null || shadowData === void 0 ? void 0 : shadowData.label) || '无阴影',
    value: formatRealValue(shadowData === null || shadowData === void 0 ? void 0 : shadowData.realValue).source
  }), React__default["default"].createElement("div", {
    className: "Theme-ShadowEditor-item"
  }, amisCore.render({
    type: 'select',
    options: shadowOptions,
    name: 'shadow',
    clearable: true,
    value: shadowData === null || shadowData === void 0 ? void 0 : shadowData.value,
    onChange: function (value) {
      onShadowSelect(value);
    },
    placeholder: editorDefaultValue || '无阴影'
  }))), senior || (shadowData === null || shadowData === void 0 ? void 0 : shadowData.value) === 'custom' ? React__default["default"].createElement("div", {
    className: "Theme-ShadowEditor-customContent"
  }, React__default["default"].createElement("div", {
    className: "Theme-Wrapper-header Theme-ShadowEditor-sub-header"
  }, React__default["default"].createElement("div", {
    className: "Theme-Wrapper-header-left"
  }, "\u9634\u5F71\u5C42"), React__default["default"].createElement("div", {
    className: "Theme-Wrapper-header-right"
  }, amisCore.render({
    type: 'dropdown-button',
    level: 'link',
    btnClassName: 'Theme-ShadowEditor-add',
    icon: 'plus',
    hideCaret: true,
    closeOnClick: true,
    align: 'right',
    buttons: ['', 'inset'].map(function (item) {
      return {
        label: item ? i18nRuntime.i18n("b24a723b73f96ab3340fe9502370ee13") : i18nRuntime.i18n("92d393c2ae53f424856479d090de718f"),
        onClick: function () {
          return handleAdd(!!item);
        }
      };
    })
  }))), (shadowData === null || shadowData === void 0 ? void 0 : shadowData.realValue.length) ? shadowData.realValue.map(function (item, index) {
    return React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-line",
      key: index
    }, React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item"
    }, React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-color-picker"
    }, React__default["default"].createElement(ColorPicker["default"], {
      needCustom: true,
      needTheme: true,
      value: item.color,
      options: colorOptions || data.colorOptions || [],
      onChange: function (value) {
        handleEdit(value, 'color', index);
      }
    })), React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item-label"
    }, item.inset ? i18nRuntime.i18n("b24a723b73f96ab3340fe9502370ee13") : i18nRuntime.i18n("92d393c2ae53f424856479d090de718f"))), React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item"
    }, React__default["default"].createElement(amisUi.NumberInput, {
      value: parseFloat(item.x),
      parser: parser,
      formatter: formatter,
      onChange: function (value) {
        handleEdit(value, 'x', index);
      }
    }), React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item-label"
    }, "X")), React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item"
    }, React__default["default"].createElement(amisUi.NumberInput, {
      value: parseFloat(item.y),
      parser: parser,
      formatter: formatter,
      onChange: function (value) {
        handleEdit(value, 'y', index);
      }
    }), React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item-label"
    }, "Y")), React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item"
    }, React__default["default"].createElement(amisUi.NumberInput, {
      value: parseFloat(item.blur),
      parser: parser,
      formatter: formatter,
      onChange: function (value) {
        handleEdit(value, 'blur', index);
      }
    }), React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item-label"
    }, "\u6A21\u7CCA")), React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item"
    }, React__default["default"].createElement(amisUi.NumberInput, {
      value: parseFloat(item.spread),
      parser: parser,
      formatter: formatter,
      onChange: function (value) {
        handleEdit(value, 'spread', index);
      }
    }), React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item-label"
    }, "\u6269\u5C55")), React__default["default"].createElement("div", {
      className: "Theme-ShadowEditor-item trash-icon"
    }, React__default["default"].createElement(amis.Icon, {
      icon: "trash",
      className: cx__default["default"]('common-icon', shadowData.realValue.length === 1 && 'disabled-icon'),
      onClick: function () {
        handleDelete(index);
      }
    })));
  }) : null) : null));
}
mobxReact.observer(ShadowEditor);
/** @class */(function (_super) {
  tslib.__extends(ShadowEditorRenderer, _super);
  function ShadowEditorRenderer() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Object.defineProperty(ShadowEditorRenderer.prototype, "render", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function () {
      return React__default["default"].createElement(ShadowEditor, tslib.__assign({}, this.props));
    }
  });
  ShadowEditorRenderer = tslib.__decorate([amisCore.FormItem({
    type: 'amis-theme-shadow-editor',
    strictMode: false,
    renderLabel: false
  })], ShadowEditorRenderer);
  return ShadowEditorRenderer;
})(React__default["default"].Component);