eapp-amis-theme-editor
Version:
amis主题编辑器
248 lines (244 loc) • 8.63 kB
JavaScript
/**
* amis-theme-editor v2.0.11-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';
import { FormItem, resolveVariableAndFilter, highlight } from 'amis-core';
import cx from 'classnames';
import { i18n } from 'i18n-runtime';
/**
* @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 = 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 _d = useState(null),
timer = _d[0],
setTimer = _d[1];
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;
}
function clearThemeValue() {
onChange('');
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) {
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 __assign(__assign({}, item), {
label: 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' ? 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,
onBlur: onInputBlur,
ref: input,
disabled: disabled,
placeholder: getRealValue(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.value,
onClick: function () {
return onSelectValue(item);
},
className: cx((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 = 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') : 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: i18n("a4f758412c3797290c957544c56db443"),
value: inheritValue || "var(".concat(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 };