amis-theme-editor/lib/renderers/ThemeSelect.js

amis主题编辑器

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var amisUi = require('amis-ui');
var cloneDeep = require('lodash/cloneDeep');
var debounce = require('lodash/debounce');
var amisCore = require('amis-core');
var cx = require('classnames');
var util = require('../util.js');
var i18nRuntime = require('i18n-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

/**
 * @file ThemeSelect.tsx
 * @description 可选择、可联想的输入框
 */
var remFactor = parseFloat(getComputedStyle(window.document.documentElement).fontSize) || 16;
function ThemeSelectContent(props) {
  var originalOptions = props.options,
    onChange = props.onChange,
    extraUnit = props.extraUnit,
    target = props.target,
    disabled = props.disabled,
    menuTpl = props.menuTpl,
    placeholder = props.placeholder,
    editorThemePath = props.editorThemePath,
    data = props.data,
    isEditorTpl = props.isEditorTpl;
  // 期望value是string类型
  var value = String(util.formatInheritData(props.value));
  var input = React.useRef(null);
  var _a = React.useState(undefined),
    currentItem = _a[0],
    setCurrentItem = _a[1];
  var _b = React.useState(originalOptions),
    options = _b[0],
    setOptions = _b[1];
  var _c = React.useState(false),
    showOptions = _c[0],
    setShowOptions = _c[1];
  var editorDefaultValue = util.getValueByPath(editorThemePath, data);
  var editorInheritValue = util.getInheritValue(editorThemePath, data);
  React.useEffect(function () {
    var res = originalOptions === null || originalOptions === void 0 ? void 0 : originalOptions.find(function (item) {
      return item.value === value;
    });
    setCurrentItem(res);
    if (!res) {
      formatOptions(value);
      input.current && (input.current.value = value);
    }
  }, [value]);
  function getRealValue(value) {
    if (value === 'inherit') {
      return i18nRuntime.i18n("a4f758412c3797290c957544c56db443");
    }
    var res = originalOptions === null || originalOptions === void 0 ? void 0 : originalOptions.find(function (item) {
      return item.value === value;
    });
    if (res) {
      return res.label;
    }
    return value === 'custom' ? i18nRuntime.i18n("d8a4e8cdc29e9aa576e669ed165892c9") : value;
  }
  function clearThemeValue() {
    onChange(undefined);
    setTimeout(function () {
      var _a;
      (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
    }, 10);
  }
  function formatOptions(value) {
    var tempList = cloneDeep__default["default"](originalOptions) || [];
    var items = tempList.filter(function (item) {
      var _a;
      return (_a = item.realValue) === null || _a === void 0 ? void 0 : _a.includes(value);
    });
    var list = [];
    if (!value || Number.isNaN(parseFloat(value))) {
      list.push.apply(list, tempList);
      setOptions(list);
      return;
    } else if (items.length > 0) {
      list.push.apply(list, items);
    }
    var number = parseFloat(value);
    var unit = cloneDeep__default["default"](extraUnit);
    if (!/^\d*$/.test(value)) {
      unit = unit.filter(function (item) {
        return (number + item).includes(value);
      });
    }
    var extraUnitList = unit.map(function (unit) {
      var label = number + unit;
      if (unit === 'rem') {
        label += "(".concat(number * remFactor, "px)");
      }
      return {
        value: number + unit,
        label: label,
        realValue: number + unit
      };
    }) || [];
    list.unshift.apply(list, extraUnitList);
    if (extraUnit.includes('rem') && unit.includes('px')) {
      list.unshift({
        value: number / remFactor + 'rem',
        label: "".concat(number, "px->").concat(number / remFactor, "rem"),
        realValue: number / remFactor + 'rem'
      });
    }
    setOptions(list.map(function (item) {
      return tslib.__assign(tslib.__assign({}, item), {
        html: amisCore.highlight(item.label, value)
      });
    }));
  }
  function valueOnChange(value) {
    return debounce__default["default"](function () {
      if (value) {
        onChange(isEditorTpl ? util.setInheritData(value, editorInheritValue) : value);
      } else {
        onChange(undefined);
      }
    })();
  }
  function onInputChange(res) {
    var value = res.currentTarget.value;
    formatOptions(value);
    valueOnChange(value);
  }
  function onSelectValue(item) {
    onChange(isEditorTpl ? util.setInheritData(item.value, editorInheritValue) : item.value);
    setShowOptions(false);
    input.current && (input.current.value = item.value);
  }
  function openOptions() {
    if (!disabled) {
      setShowOptions(true);
    }
  }
  var tooltipLabel = value === 'inherit' ? i18nRuntime.i18n("a4f758412c3797290c957544c56db443") : (currentItem === null || currentItem === void 0 ? void 0 : currentItem.label) || i18nRuntime.i18n("d8a4e8cdc29e9aa576e669ed165892c9");
  return React__default["default"].createElement(React__default["default"].Fragment, null, currentItem || value === 'custom' || (value === null || value === void 0 ? void 0 : value.includes('var')) || value === 'inherit' ? React__default["default"].createElement("div", {
    onClick: openOptions,
    className: cx__default["default"]('theme-select', disabled && 'theme-select--disabled', showOptions, showOptions && 'theme-select--active')
  }, React__default["default"].createElement(amisUi.TooltipWrapper, {
    trigger: "hover",
    placement: "top",
    tooltip: {
      children: function () {
        return React__default["default"].createElement("div", null, tooltipLabel);
      }
    },
    disabled: !!menuTpl
  }, React__default["default"].createElement("div", {
    className: "ThemeSelectContent-theme"
  }, menuTpl ? React__default["default"].createElement("div", null, currentItem && currentItem[menuTpl] || i18nRuntime.i18n("d8a4e8cdc29e9aa576e669ed165892c9")) : React__default["default"].createElement("div", null, tooltipLabel), !disabled ? React__default["default"].createElement(amisUi.Icon, {
    icon: "close",
    className: "icon",
    onClick: clearThemeValue
  }) : null))) : React__default["default"].createElement("div", {
    className: cx__default["default"]('theme-select', disabled && 'theme-select--disabled', showOptions && 'theme-select--active')
  }, React__default["default"].createElement("input", {
    className: "ThemeSelectContent-input",
    type: "text",
    onChange: onInputChange,
    onFocus: openOptions,
    ref: input,
    disabled: disabled,
    placeholder: getRealValue(isEditorTpl ? editorDefaultValue : placeholder)
  })), React__default["default"].createElement(amisUi.Overlay, {
    container: document.body,
    target: target,
    show: showOptions && !!(options === null || options === void 0 ? void 0 : options.length),
    rootClose: true
  }, React__default["default"].createElement(amisUi.PopOver, {
    overlay: true,
    onHide: function () {
      return setShowOptions(false);
    }
  }, React__default["default"].createElement("div", {
    className: "ThemeSelectContent-input-select",
    style: {
      minWidth: (target === null || target === void 0 ? void 0 : target.clientWidth) + 'px'
    }
  }, options === null || options === void 0 ? void 0 : options.map(function (item) {
    return React__default["default"].createElement("div", {
      key: item.label,
      onClick: function () {
        return onSelectValue(item);
      },
      className: cx__default["default"]((currentItem === null || currentItem === void 0 ? void 0 : currentItem.value) === item.value && 'ThemeSelectContent-input-select-item--active')
    }, item.html || item.label);
  })))));
}
function ThemeSelect(props) {
  var data = props.data,
    originValue = props.value,
    originOptions = props.options,
    _a = props.extraUnit,
    extraUnit = _a === void 0 ? ['px', 'rem', '%'] : _a,
    disabled = props.disabled,
    state = props.state,
    itemName = props.itemName,
    inheritValue = props.inheritValue,
    isEditorTpl = props.isEditorTpl;
  var themeSelect = React.useRef(null);
  var _b = React__default["default"].useState(getOptions()),
    options = _b[0],
    setOptions = _b[1];
  function getOptions() {
    var _a, _b;
    var list = cloneDeep__default["default"](typeof originOptions === 'string' ? amisCore.resolveVariableAndFilter(originOptions, data, '| raw') : isEditorTpl && !originOptions ? (data === null || data === void 0 ? void 0 : data.sizesOptions) || [] : originOptions || []);
    if (state && state !== 'default' && list[0] && list[0].value !== "var(".concat((_a = data === null || data === void 0 ? void 0 : data.default) === null || _a === void 0 ? void 0 : _a.token).concat(itemName, ")")) {
      var name_1 = isEditorTpl ? 'inherit' : "var(".concat((_b = data === null || data === void 0 ? void 0 : data.default) === null || _b === void 0 ? void 0 : _b.token).concat(itemName, ")");
      list.unshift({
        label: i18nRuntime.i18n("a4f758412c3797290c957544c56db443"),
        value: inheritValue || name_1,
        realValue: i18nRuntime.i18n("a4f758412c3797290c957544c56db443")
      });
    }
    return list;
  }
  React.useEffect(function () {
    setOptions(getOptions());
  }, [originOptions]);
  return React__default["default"].createElement("div", {
    ref: themeSelect
  }, React__default["default"].createElement(ThemeSelectContent, tslib.__assign({}, props, {
    value: originValue || '',
    options: options,
    extraUnit: extraUnit,
    target: themeSelect.current,
    disabled: disabled
  })));
}
/** @class */(function (_super) {
  tslib.__extends(ThemeSelectRenderer, _super);
  function ThemeSelectRenderer() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Object.defineProperty(ThemeSelectRenderer.prototype, "render", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function () {
      return React__default["default"].createElement(ThemeSelect, tslib.__assign({}, this.props));
    }
  });
  ThemeSelectRenderer = tslib.__decorate([amisCore.FormItem({
    type: 'amis-theme-select',
    strictMode: false,
    renderLabel: true
  })], ThemeSelectRenderer);
  return ThemeSelectRenderer;
})(React__default["default"].Component);

exports["default"] = ThemeSelect;