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

amis主题编辑器

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

import { __extends, __assign, __decorate } from 'tslib';
import React__default from 'react';
import { observer } from 'mobx-react';
import { FormItem } from 'amis-core';
import '../icons/index.js';
import cx from 'classnames';
import { Button } from 'amis-ui';
import ThemeSelect from './ThemeSelect.js';
import { find } from 'lodash';
import { getValueByPath, getInheritValue, formatInheritData, setInheritData } from '../util.js';
import { i18n } from 'i18n-runtime';
import { Icon } from 'amis';

/**
 * @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,
    label = props.label;
  var _b = React__default.useState(0),
    lock = _b[0],
    setLockValue = _b[1];
  var _c = React__default.useState({
      width: '',
      height: '',
      minWidth: ''
    }),
    value = _c[0],
    setValue = _c[1];
  var RULE = /[0-9\.]*/;
  var editorDefaultValue = getValueByPath(editorThemePath, data);
  var editorInheritValue = getInheritValue(editorThemePath, data);
  React__default.useEffect(function () {
    var timer = setTimeout(function () {
      if (defaultValue) {
        setValue(formatInheritData(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 = find(sizesOptions, function (item) {
          return item.realValue === valueTemp[key];
        });
        value_1[key] = sizeFind ? sizeFind.value : valueTemp[key];
      });
      onChange(setInheritData(value_1, editorInheritValue));
      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 originNum = getNumByOption(data);
      var num_1 = type === 'width' ? originNum / lock : originNum * lock;
      num_1 = Number(num_1.toFixed(2));
      if (lock === 1) {
        finalValue = data;
      } else if (data.indexOf('var') > -1) {
        var findItem = find(sizesOptions, function (item) {
          return item.realValue === num_1 + 'rem';
        });
        if (findItem) {
          finalValue = findItem.value;
        } else {
          finalValue = num_1 + 'rem';
        }
      } else {
        var unit = data.replace(originNum.toString(), '');
        finalValue = num_1 + unit;
      }
      var valueTemp = __assign(__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 = __assign(__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 = 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.createElement("div", {
    className: "Theme-SizeEditor"
  }, label ? React__default.createElement("div", {
    className: "Theme-SizeEditor-label"
  }, label) : null, React__default.createElement("div", {
    className: "Theme-SizeEditor-body"
  }, React__default.createElement("div", {
    className: cx('Theme-SizeEditor-line', (hideWidth || hideHeight) && 'Theme-SizeEditor-item-sigle', !hideWidth && !hideHeight && 'Theme-SizeEditor-line-no-hide')
  }, React__default.createElement("div", {
    className: "Theme-SizeEditor-size"
  }, !hideWidth && React__default.createElement("div", {
    className: "Theme-SizeEditor-item"
  }, React__default.createElement("div", {
    className: "Theme-SizeEditor-item-label"
  }, "W"), React__default.createElement(ThemeSelect, __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.createElement("div", {
    className: "Theme-SizeEditor-item"
  }, React__default.createElement("div", {
    className: "Theme-SizeEditor-item-label"
  }, "H"), React__default.createElement(ThemeSelect, __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.createElement("div", {
    className: "Theme-SizeEditor-lock"
  }, !lock ? React__default.createElement(Button, {
    tooltip: i18n("48110cb1579623335cf6a1e2327e5af1"),
    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.createElement(Icon, {
    icon: "unlock",
    className: "common-icon"
  })) : React__default.createElement(Button, {
    tooltip: i18n("17399f02e23b5f5b9b3dedee03a2d538"),
    tooltipPlacement: "left",
    onClick: function () {
      setLockValue(0);
    }
  }, React__default.createElement(Icon, {
    icon: "lock",
    className: "common-icon"
  })))), !hideMinWidth && React__default.createElement("div", {
    className: "Theme-SizeEditor-line Theme-SizeEditor-item-sigle"
  }, React__default.createElement("div", {
    className: "Theme-SizeEditor-item"
  }, React__default.createElement("div", {
    className: "Theme-SizeEditor-item-label"
  }, i18n("a2b62974f4d7564bb68b570116f25a10")), React__default.createElement(ThemeSelect, __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
  }))))));
}
observer(SizeEditor);
/** @class */(function (_super) {
  __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.createElement(SizeEditor, __assign({}, this.props));
    }
  });
  SizeEditorRenderer = __decorate([FormItem({
    type: 'amis-theme-size-editor',
    strictMode: false,
    renderLabel: false
  })], SizeEditorRenderer);
  return SizeEditorRenderer;
})(React__default.Component);