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

amis主题编辑器

/**
 * amis-theme-editor v2.0.11-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 lodash = require('lodash');
var amisCore = require('amis-core');
var cx = require('classnames');
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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

/**
 * @file ThemeSelect.tsx
 * @description 可选择、可联想的输入框
 */
function ThemeSelectContent(props) {
  var originalOptions = props.options,
    value = props.value,
    onChange = props.onChange,
    extraUnit = props.extraUnit,
    target = props.target,
    disabled = props.disabled,
    menuTpl = props.menuTpl,
    onBlur = props.onBlur,
    placeholder = props.placeholder;
  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 _d = React.useState(null),
    timer = _d[0],
    setTimer = _d[1];
  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;
  }
  function clearThemeValue() {
    onChange('');
    setTimeout(function () {
      var _a;
      (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus();
    }, 10);
  }
  function formatOptions(value) {
    var tempList = lodash.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) {
      list.push.apply(list, tempList);
      setOptions(list);
      return;
    } else if (items.length > 0) {
      list.push.apply(list, items);
    }
    var number = parseFloat(value);
    var extraUnitList = extraUnit.map(function (unit) {
      return {
        value: number + unit,
        label: number + unit,
        realValue: number + unit
      };
    }) || [];
    list.unshift.apply(list, extraUnitList);
    setOptions(list.map(function (item) {
      return tslib.__assign(tslib.__assign({}, item), {
        label: amisCore.highlight(item.label, value)
      });
    }));
  }
  function onInputChange(res) {
    var value = res.currentTarget.value;
    formatOptions(value);
  }
  function onInputBlur(res, invalid) {
    if (timer) {
      clearTimeout(timer);
    }
    if (invalid) {
      setTimer(null);
    } else {
      var value_1 = res.currentTarget.value;
      setTimer(setTimeout(function () {
        onBlur && onBlur(value_1);
        if (value_1) {
          onChange(value_1);
        }
      }, 100));
    }
  }
  function onSelectValue(item) {
    // 无效掉blur事件
    onInputBlur({}, true);
    onChange(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,
    onBlur: onInputBlur,
    ref: input,
    disabled: disabled,
    placeholder: getRealValue(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.value,
      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.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;
  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 = lodash.cloneDeep(typeof originOptions === 'string' ? amisCore.resolveVariableAndFilter(originOptions, data, '| raw') : 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 = "".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 || "var(".concat(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;