eapp-amis-theme-editor
Version:
amis主题编辑器
167 lines (161 loc) • 8.89 kB
JavaScript
/**
* amis-theme-editor v2.0.11-beta.2
* Copyright 2018-2023 @fex
*/
'use strict';
var tslib = require('tslib');
var React = require('react');
var mobxReact = require('mobx-react');
var amisCore = require('amis-core');
require('../icons/index.js');
var cx = require('classnames');
var amisUi = require('amis-ui');
var ThemeSelect = require('./ThemeSelect.js');
var lodash = require('lodash');
var util = require('../util.js');
var amis = require('amis');
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 Size.tsx
* @description 设置尺寸
*/
function SizeEditor(props) {
var data = props.data, _a = props.sizesOptions, sizesOptions = _a === void 0 ? data.sizesOptions : _a, defaultValue = props.value, onChange = props.onChange, hideWidth = props.hideWidth, hideHeight = props.hideHeight, hideMinWidth = props.hideMinWidth, editorThemePath = props.editorThemePath;
var _b = React__default["default"].useState(0), lock = _b[0], setLockValue = _b[1];
var _c = React__default["default"].useState({
width: '',
height: '',
minWidth: ''
}), value = _c[0], setValue = _c[1];
var RULE = /[0-9\.]*/;
var editorDefaultValue = util.getValueByPath(editorThemePath, data);
React__default["default"].useEffect(function () {
var timer = setTimeout(function () {
if (defaultValue) {
setValue(defaultValue);
}
}, 100);
return function () { return clearTimeout(timer); };
}, [defaultValue]);
function handleChange(valueTemp) {
if (sizesOptions && sizesOptions.length) {
var value_1 = {};
['width', 'height', 'minWidth'].forEach(function (key) {
var sizeFind = lodash.find(sizesOptions, function (item) { return item.realValue === valueTemp[key]; });
value_1[key] = sizeFind ? sizeFind.value : valueTemp[key];
});
onChange(value_1);
return;
}
onChange(valueTemp);
}
function setValueByLock(_a) {
var _b;
var data = _a.data, type = _a.type;
if (lock) {
var changeType = type === 'width' ? 'height' : 'width';
var finalValue = '';
var num_1 = getNumByOption(data);
num_1 = type === 'width' ? num_1 / lock : num_1 * lock;
if (lock === 1) {
finalValue = data;
}
else if (data.indexOf('var') > -1) {
var findItem = lodash.find(sizesOptions, function (item) { return item.realValue === num_1 + 'rem'; });
if (findItem) {
finalValue = findItem.value;
}
}
else {
var unit = data.replace(num_1.toString(), '');
finalValue = num_1 + unit;
}
var valueTemp = tslib.__assign(tslib.__assign({}, value), (_b = {}, _b[type] = data, _b[changeType] = finalValue, _b));
setValue(valueTemp);
handleChange(valueTemp);
}
}
function setValueByType(data, type) {
var _a;
if (lock && (type === 'width' || type === 'height')) {
setValueByLock({ data: data, type: type });
return;
}
var valueTemp = tslib.__assign(tslib.__assign({}, value), (_a = {}, _a[type] = data, _a));
setValue(valueTemp);
handleChange(valueTemp);
}
function getNumByOption(value) {
if (!value) {
return 0;
}
var matchValue = value.match(RULE);
if (matchValue && matchValue[0]) {
return Number(matchValue[0]);
}
if (!sizesOptions || !sizesOptions.length) {
return 0;
}
var findItem = lodash.find(sizesOptions, function (item) { return item.value === value; });
var matchFindValue = findItem ? findItem.realValue.match(RULE) : 0;
return matchFindValue && matchFindValue[0] ? Number(matchFindValue[0]) : 0;
}
return (React__default["default"].createElement("div", { className: "Theme-SizeEditor" },
React__default["default"].createElement("div", { className: "Theme-SizeEditor-body" },
React__default["default"].createElement("div", { className: cx__default["default"]('Theme-SizeEditor-line', !hideWidth && !hideHeight && 'Theme-SizeEditor-line-no-hide') },
React__default["default"].createElement("div", { className: "Theme-SizeEditor-size" },
!hideWidth && (React__default["default"].createElement("div", { className: "Theme-SizeEditor-item" },
React__default["default"].createElement("div", { className: "Theme-SizeEditor-item-label" }, "W"),
React__default["default"].createElement(ThemeSelect["default"], tslib.__assign({}, props, { options: sizesOptions, value: value['width'], onChange: function (value) { return setValueByType(value, 'width'); }, itemName: "width", placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue.width })))),
!hideHeight && (React__default["default"].createElement("div", { className: "Theme-SizeEditor-item" },
React__default["default"].createElement("div", { className: "Theme-SizeEditor-item-label" }, "H"),
React__default["default"].createElement(ThemeSelect["default"], tslib.__assign({}, props, { options: sizesOptions, value: value['height'], onChange: function (value) { return setValueByType(value, 'height'); }, itemName: "height", placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue.height }))))),
!hideWidth && !hideHeight && (React__default["default"].createElement("div", { className: "Theme-SizeEditor-lock" }, !lock ? (React__default["default"].createElement(amisUi.Button, { tooltip: "\u9501\u5B9A\u6BD4\u4F8B", tooltipPlacement: "left", onClick: function () {
if (!value['width'] || !value['height']) {
setLockValue(0);
}
else {
var width = getNumByOption(value['width']);
var height = getNumByOption(value['height']);
if (width && height) {
setLockValue(Number((width / height).toFixed(2)));
}
else {
setLockValue(0);
}
}
} },
React__default["default"].createElement(amis.Icon, { icon: "unlock", className: "common-icon" }))) : (React__default["default"].createElement(amisUi.Button, { tooltip: "\u89E3\u9664\u9501\u5B9A", tooltipPlacement: "left", onClick: function () {
setLockValue(0);
} },
React__default["default"].createElement(amis.Icon, { icon: "lock", className: "common-icon" })))))),
!hideMinWidth && (React__default["default"].createElement("div", { className: "Theme-SizeEditor-line Theme-SizeEditor-item-sigle" },
React__default["default"].createElement("div", { className: "Theme-SizeEditor-item" },
React__default["default"].createElement("div", { className: "Theme-SizeEditor-item-label" }, "\u6700\u5C0F\u5BBD\u5EA6"),
React__default["default"].createElement(ThemeSelect["default"], tslib.__assign({}, props, { options: sizesOptions, value: value['minWidth'], onChange: function (value) { return setValueByType(value, 'minWidth'); }, itemName: "minWidth", placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue.minWidth }))))))));
}
mobxReact.observer(SizeEditor);
/** @class */ ((function (_super) {
tslib.__extends(SizeEditorRenderer, _super);
function SizeEditorRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(SizeEditorRenderer.prototype, "render", {
enumerable: false,
configurable: true,
writable: true,
value: function () {
return React__default["default"].createElement(SizeEditor, tslib.__assign({}, this.props));
}
});
SizeEditorRenderer = tslib.__decorate([
amisCore.FormItem({
type: 'amis-theme-size-editor',
strictMode: false,
renderLabel: false
})
], SizeEditorRenderer);
return SizeEditorRenderer;
})(React__default["default"].Component));