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

amis主题编辑器

/**
 * amis-theme-editor v2.0.22-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 i18nRuntime = require('i18n-runtime');
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,
    label = props.label;
  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);
  var editorInheritValue = util.getInheritValue(editorThemePath, data);
  React__default["default"].useEffect(function () {
    var timer = setTimeout(function () {
      if (defaultValue) {
        setValue(util.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 = lodash.find(sizesOptions, function (item) {
          return item.realValue === valueTemp[key];
        });
        value_1[key] = sizeFind ? sizeFind.value : valueTemp[key];
      });
      onChange(util.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 = lodash.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 = 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"
  }, label ? React__default["default"].createElement("div", {
    className: "Theme-SizeEditor-label"
  }, label) : null, 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-item-sigle', !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: i18nRuntime.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["default"].createElement(amis.Icon, {
    icon: "unlock",
    className: "common-icon"
  })) : React__default["default"].createElement(amisUi.Button, {
    tooltip: i18nRuntime.i18n("17399f02e23b5f5b9b3dedee03a2d538"),
    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"
  }, i18nRuntime.i18n("a2b62974f4d7564bb68b570116f25a10")), 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);