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

amis主题编辑器

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

import { __extends, __assign, __decorate } from 'tslib';
import React__default, { useRef, useEffect, useState } from 'react';
import { TooltipWrapper, Icon, Overlay, PopOver } from 'amis-ui';
import cloneDeep from 'lodash/cloneDeep';
import debounce from 'lodash/debounce';
import { FormItem, resolveVariableAndFilter, highlight } from 'amis-core';
import cx from 'classnames';
import { formatInheritData, getValueByPath, getInheritValue, setInheritData } from '../util.js';
import { i18n } from 'i18n-runtime';

/**
 * @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(formatInheritData(props.value));
  var input = useRef(null);
  var _a = useState(undefined),
    currentItem = _a[0],
    setCurrentItem = _a[1];
  var _b = useState(originalOptions),
    options = _b[0],
    setOptions = _b[1];
  var _c = useState(false),
    showOptions = _c[0],
    setShowOptions = _c[1];
  var editorDefaultValue = getValueByPath(editorThemePath, data);
  var editorInheritValue = getInheritValue(editorThemePath, data);
  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 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' ? 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(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(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 __assign(__assign({}, item), {
        html: highlight(item.label, value)
      });
    }));
  }
  function valueOnChange(value) {
    return debounce(function () {
      if (value) {
        onChange(isEditorTpl ? setInheritData(value, editorInheritValue) : value);
      } else {
        onChange(undefined);
      }
    })();
  }
  function onInputChange(res) {
    var value = res.currentTarget.value;
    formatOptions(value);
    valueOnChange(value);
  }
  function onSelectValue(item) {
    onChange(isEditorTpl ? 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' ? i18n("a4f758412c3797290c957544c56db443") : (currentItem === null || currentItem === void 0 ? void 0 : currentItem.label) || i18n("d8a4e8cdc29e9aa576e669ed165892c9");
  return React__default.createElement(React__default.Fragment, null, currentItem || value === 'custom' || (value === null || value === void 0 ? void 0 : value.includes('var')) || value === 'inherit' ? React__default.createElement("div", {
    onClick: openOptions,
    className: cx('theme-select', disabled && 'theme-select--disabled', showOptions, showOptions && 'theme-select--active')
  }, React__default.createElement(TooltipWrapper, {
    trigger: "hover",
    placement: "top",
    tooltip: {
      children: function () {
        return React__default.createElement("div", null, tooltipLabel);
      }
    },
    disabled: !!menuTpl
  }, React__default.createElement("div", {
    className: "ThemeSelectContent-theme"
  }, menuTpl ? React__default.createElement("div", null, currentItem && currentItem[menuTpl] || i18n("d8a4e8cdc29e9aa576e669ed165892c9")) : React__default.createElement("div", null, tooltipLabel), !disabled ? React__default.createElement(Icon, {
    icon: "close",
    className: "icon",
    onClick: clearThemeValue
  }) : null))) : React__default.createElement("div", {
    className: cx('theme-select', disabled && 'theme-select--disabled', showOptions && 'theme-select--active')
  }, React__default.createElement("input", {
    className: "ThemeSelectContent-input",
    type: "text",
    onChange: onInputChange,
    onFocus: openOptions,
    ref: input,
    disabled: disabled,
    placeholder: getRealValue(isEditorTpl ? editorDefaultValue : placeholder)
  })), React__default.createElement(Overlay, {
    container: document.body,
    target: target,
    show: showOptions && !!(options === null || options === void 0 ? void 0 : options.length),
    rootClose: true
  }, React__default.createElement(PopOver, {
    overlay: true,
    onHide: function () {
      return setShowOptions(false);
    }
  }, React__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.createElement("div", {
      key: item.label,
      onClick: function () {
        return onSelectValue(item);
      },
      className: cx((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 = useRef(null);
  var _b = React__default.useState(getOptions()),
    options = _b[0],
    setOptions = _b[1];
  function getOptions() {
    var _a, _b;
    var list = cloneDeep(typeof originOptions === 'string' ? 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: i18n("a4f758412c3797290c957544c56db443"),
        value: inheritValue || name_1,
        realValue: i18n("a4f758412c3797290c957544c56db443")
      });
    }
    return list;
  }
  useEffect(function () {
    setOptions(getOptions());
  }, [originOptions]);
  return React__default.createElement("div", {
    ref: themeSelect
  }, React__default.createElement(ThemeSelectContent, __assign({}, props, {
    value: originValue || '',
    options: options,
    extraUnit: extraUnit,
    target: themeSelect.current,
    disabled: disabled
  })));
}
/** @class */(function (_super) {
  __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.createElement(ThemeSelect, __assign({}, this.props));
    }
  });
  ThemeSelectRenderer = __decorate([FormItem({
    type: 'amis-theme-select',
    strictMode: false,
    renderLabel: true
  })], ThemeSelectRenderer);
  return ThemeSelectRenderer;
})(React__default.Component);

export { ThemeSelect as default };