amis-theme-editor/esm/renderers/Shadow.js

amis主题编辑器

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

import { __extends, __assign, __decorate, __spreadArray } from 'tslib';
import React__default from 'react';
import { observer } from 'mobx-react';
import { FormItem, render } from 'amis-core';
import '../icons/index.js';
import { Select, NumberInput, Overlay, PopOver } from 'amis-ui';
import ColorPicker from './ColorPicker.js';
import cloneDeep from 'lodash/cloneDeep';
import find from 'lodash/find';
import isEqual from 'lodash/isEqual';
import { ThemeWrapperHeader } from './ThemeWrapper.js';
import cx from 'classnames';
import { getValueByPath, getInheritValue, setInheritData } from '../util.js';
import { i18n } from 'i18n-runtime';
import { Icon } from 'amis';

/**
 * @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.createElement(Overlay
  // @ts-ignore
  , {
    // @ts-ignore
    container: document.body,
    target: target.current,
    show: show,
    placement: "top",
    offset: [0, -8]
  }, React__default.createElement(PopOver, {
    overlay: false,
    onHide: close
  }, React__default.createElement("div", {
    className: "Theme-ShadowView"
  }, React__default.createElement("div", {
    className: "Theme-ShadowView-header"
  }, i18n("9cf15d01ed2846c4104d1607836bbe79")), React__default.createElement("div", {
    className: "Theme-ShadowView-body"
  }, React__default.createElement("div", {
    className: "Theme-ShadowView-body-shadow"
  }, React__default.createElement("div", {
    className: "Theme-ShadowView-body-shadow-square",
    style: {
      boxShadow: (value === null || value === void 0 ? void 0 : value.join(', ')) || 'none'
    }
  })), React__default.createElement("div", {
    className: "Theme-ShadowView-body-title"
  }, name), React__default.createElement("div", {
    className: "Theme-ShadowView-body-value"
  }, value === null || value === void 0 ? void 0 : value.map(function (shadow, index) {
    return React__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.useRef(null);
  var _a = React__default.useState(true),
    open = _a[0],
    toggleOpen = _a[1];
  var _b = React__default.useState(false),
    senior = _b[0],
    toggleSenior = _b[1];
  var _c = React__default.useState(false),
    show = _c[0],
    toggleViewShow = _c[1];
  var customShadow = {
    label: i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
    value: 'custom',
    realValue: [{
      inset: false,
      x: '0px',
      y: '0px',
      blur: '0px',
      spread: '0px',
      color: 'transparent'
    }],
    visible: false
  };
  var shadowOptions = options ? __spreadArray(__spreadArray([], options, true), [customShadow], false) : __spreadArray(__spreadArray([], cloneDeep(data.shadowOptions || []), true), [customShadow], false);
  if (state && state !== 'default') {
    shadowOptions.unshift({
      value: editorThemePath ? 'inherit' : "var(".concat(data.default.token, "shadow)"),
      label: i18n("a4f758412c3797290c957544c56db443"),
      realValue: editorThemePath ? [i18n("a4f758412c3797290c957544c56db443")] : ["var(".concat(data.default.token).concat(itemName, ")")]
    });
  }
  var editorDefaultValue = getValueByPath(editorThemePath, data);
  var editorInheritValue = getInheritValue(editorThemePath, data);
  var defaultValue = value ? value.indexOf('inherit:') > -1 && 'inherit' || find(cloneDeep(shadowOptions), function (item) {
    return item.value === value;
  }) || formateCustomValue(value) : null;
  var _d = React__default.useState(defaultValue),
    shadowData = _d[0],
    setShadowData = _d[1];
  React__default.useEffect(function () {
    if (defaultValue && (!shadowData || defaultValue.value !== shadowData.value)) {
      setShadowData(defaultValue);
    }
  }, [defaultValue]);
  function formateCustomValue(value) {
    var color = {};
    var colorIndex = 0;
    value = value.trim().replace(/((rgba|rgb|var)\(.*?\))|(#.{6})/g, function ($1) {
      var key = '$' + colorIndex;
      colorIndex++;
      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: 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 || 'transparent');
    });
    return {
      value: res.join(', '),
      source: res
    };
  }
  function onShadowSelect(value) {
    if (value === 'custom') {
      return;
    }
    if (value) {
      var findItem = find(shadowOptions, function (item) {
        return item.value === value;
      });
      if (findItem === null || findItem === void 0 ? void 0 : findItem.value) {
        setShadowData(findItem);
        onChange(setInheritData(findItem.value, editorInheritValue));
      }
    } else {
      setShadowData(undefined);
      onChange(undefined);
    }
  }
  function changeToCustom(shadowData) {
    if (!shadowData.value) {
      return shadowData;
    }
    var findItem = find(shadowOptions, function (item) {
      return item.value === shadowData.value;
    });
    if (!isEqual(shadowData.realValue, findItem.realValue)) {
      return __assign(__assign({}, shadowData), {
        label: i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
        value: 'custom'
      });
    }
    return shadowData;
  }
  function handleAdd(inset) {
    var newData = changeToCustom(__assign(__assign({}, shadowData || {
      label: i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
      value: 'custom'
    }), {
      realValue: __spreadArray(__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 = 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.createElement("div", {
    className: "Theme-ShadowEditor"
  }, React__default.createElement(ThemeWrapperHeader, {
    title: i18n("803205e38834280d9e6a75993ac00764"),
    hasSenior: hasSenior,
    senior: senior,
    toggleSenior: toggleSenior,
    open: open,
    toggleOpen: toggleOpen
  }), open && React__default.createElement("div", {
    className: "Theme-ShadowEditor-body"
  }, React__default.createElement("div", {
    className: "Theme-ShadowEditor-line"
  }, React__default.createElement("div", {
    ref: target,
    className: "Theme-ShadowEditor-view",
    onMouseOver: function () {
      return toggleViewShow(true);
    },
    onMouseOut: function () {
      return toggleViewShow(false);
    }
  }, React__default.createElement("div", {
    style: {
      boxShadow: formatRealValue(shadowData === null || shadowData === void 0 ? void 0 : shadowData.realValue).value
    },
    className: "Theme-ShadowEditor-view-inner"
  })), React__default.createElement(ShadowView, {
    target: target,
    show: show,
    close: function () {
      toggleViewShow(false);
    },
    name: (shadowData === null || shadowData === void 0 ? void 0 : shadowData.label) || i18n("6f9c7d7109f2b4b5a759359a455201e9"),
    value: formatRealValue(shadowData === null || shadowData === void 0 ? void 0 : shadowData.realValue).source
  }), React__default.createElement("div", {
    className: "Theme-ShadowEditor-item"
  }, React__default.createElement(Select, {
    options: shadowOptions,
    clearable: true,
    value: shadowData === null || shadowData === void 0 ? void 0 : shadowData.value,
    onChange: function (res) {
      onShadowSelect(res.value);
    },
    placeholder: editorDefaultValue || i18n("6f9c7d7109f2b4b5a759359a455201e9")
  }))), senior || (shadowData === null || shadowData === void 0 ? void 0 : shadowData.value) === 'custom' ? React__default.createElement("div", {
    className: "Theme-ShadowEditor-customContent"
  }, React__default.createElement("div", {
    className: "Theme-Wrapper-header Theme-ShadowEditor-sub-header"
  }, React__default.createElement("div", {
    className: "Theme-Wrapper-header-left"
  }, i18n("26db990dad6d76c6725375b24c0941e1")), React__default.createElement("div", {
    className: "Theme-Wrapper-header-right"
  }, 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 ? i18n("b24a723b73f96ab3340fe9502370ee13") : 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.createElement("div", {
      className: "Theme-ShadowEditor-line",
      key: index
    }, React__default.createElement("div", {
      className: "Theme-ShadowEditor-item"
    }, React__default.createElement("div", {
      className: "Theme-ShadowEditor-color-picker"
    }, React__default.createElement(ColorPicker, {
      needCustom: true,
      needTheme: true,
      value: item.color,
      options: colorOptions || data.colorOptions || [],
      onChange: function (value) {
        handleEdit(value, 'color', index);
      }
    })), React__default.createElement("div", {
      className: "Theme-ShadowEditor-item-label"
    }, item.inset ? i18n("b24a723b73f96ab3340fe9502370ee13") : i18n("92d393c2ae53f424856479d090de718f"))), React__default.createElement("div", {
      className: "Theme-ShadowEditor-item"
    }, React__default.createElement(NumberInput, {
      value: parseFloat(item.x),
      parser: parser,
      formatter: formatter,
      onChange: function (value) {
        handleEdit(value, 'x', index);
      }
    }), React__default.createElement("div", {
      className: "Theme-ShadowEditor-item-label"
    }, "X")), React__default.createElement("div", {
      className: "Theme-ShadowEditor-item"
    }, React__default.createElement(NumberInput, {
      value: parseFloat(item.y),
      parser: parser,
      formatter: formatter,
      onChange: function (value) {
        handleEdit(value, 'y', index);
      }
    }), React__default.createElement("div", {
      className: "Theme-ShadowEditor-item-label"
    }, "Y")), React__default.createElement("div", {
      className: "Theme-ShadowEditor-item"
    }, React__default.createElement(NumberInput, {
      value: parseFloat(item.blur),
      parser: parser,
      formatter: formatter,
      onChange: function (value) {
        handleEdit(value, 'blur', index);
      }
    }), React__default.createElement("div", {
      className: "Theme-ShadowEditor-item-label"
    }, i18n("203bab8001257b60e1aed951a0939393"))), React__default.createElement("div", {
      className: "Theme-ShadowEditor-item"
    }, React__default.createElement(NumberInput, {
      value: parseFloat(item.spread),
      parser: parser,
      formatter: formatter,
      onChange: function (value) {
        handleEdit(value, 'spread', index);
      }
    }), React__default.createElement("div", {
      className: "Theme-ShadowEditor-item-label"
    }, i18n("2dc90225b8033d17c41b08f39fa42de2"))), React__default.createElement("div", {
      className: "Theme-ShadowEditor-item trash-icon"
    }, React__default.createElement(Icon, {
      icon: "trash",
      className: cx('common-icon', shadowData.realValue.length === 1 && 'disabled-icon'),
      onClick: function () {
        handleDelete(index);
      }
    })));
  }) : null) : null));
}
observer(ShadowEditor);
/** @class */(function (_super) {
  __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.createElement(ShadowEditor, __assign({}, this.props));
    }
  });
  ShadowEditorRenderer = __decorate([FormItem({
    type: 'amis-theme-shadow-editor',
    strictMode: false,
    renderLabel: false
  })], ShadowEditorRenderer);
  return ShadowEditorRenderer;
})(React__default.Component);