@wufengteam/inputs/es/TabStyleSelect/index.js

平台提供的右侧属性编辑器，需要在主工程中注册

// @ts-ignore
import React from 'react';
import { Form, Select } from 'antd';
import { cssPrefixCls } from '../utils';
// @ts-ignore
import TabStyle1 from '../assets/img/TabStyleSelect/style1.png';
// @ts-ignore
import TabStyle2 from '../assets/img/TabStyleSelect/style2.png';
// @ts-ignore
import TabStyle3 from '../assets/img/TabStyleSelect/style3.png';
import "./index.css";
var cssClsPrefix = "".concat(cssPrefixCls, "-tabStyleSelect");
var Option = Select.Option;
var InnerTabStyleSelect = function InnerTabStyleSelect(props) {
  var defaultValue = props.defaultValue,
    value = props.value,
    _onChange = props.onChange,
    DSLCore = props.DSLCore,
    selectedComp = props.selectedComp;
  var options = [{
    value: '1',
    label: /*#__PURE__*/React.createElement("img", {
      src: TabStyle1,
      alt: "",
      width: "100%"
    })
  }, {
    value: '2',
    label: /*#__PURE__*/React.createElement("img", {
      src: TabStyle2,
      alt: "",
      width: "100%"
    })
  }, {
    value: '3',
    label: /*#__PURE__*/React.createElement("img", {
      src: TabStyle3,
      alt: "",
      width: "100%"
    })
  }];
  return /*#__PURE__*/React.createElement(Select, {
    allowClear: true,
    className: "".concat(cssClsPrefix, "-wrap"),
    defaultValue: defaultValue,
    value: value,
    onChange: function onChange(e) {
      var _a, _b, _c;
      if (e === '3') {
        (_a = DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.current) === null || _a === void 0 ? void 0 : _a.setProps({
          tabFontColor: 'rgba(255, 255, 255, 1)',
          tabBgColor: 'rgba(65, 127, 251, 1)'
        });
        DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.render({
          mode: '13000',
          id: selectedComp === null || selectedComp === void 0 ? void 0 : selectedComp.id
        });
      } else if (e === '2') {
        (_b = DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.current) === null || _b === void 0 ? void 0 : _b.setProps({
          tabFontColor: 'rgba(65, 127, 251, 1)',
          tabBgColor: 'rgba(255, 255, 255, 1)'
        });
        DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.render({
          mode: '13000',
          id: selectedComp === null || selectedComp === void 0 ? void 0 : selectedComp.id
        });
      } else {
        (_c = DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.current) === null || _c === void 0 ? void 0 : _c.setProps({
          tabFontColor: 'rgba(65, 127, 251, 1)',
          tabBgColor: 'rgba(65, 127, 251, 1)'
        });
        DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.render({
          mode: '13000',
          id: selectedComp === null || selectedComp === void 0 ? void 0 : selectedComp.id
        });
      }
      _onChange === null || _onChange === void 0 ? void 0 : _onChange(e);
    }
  }, options.map(function (item) {
    return /*#__PURE__*/React.createElement(Option, {
      style: {
        padding: 0,
        margin: '4px 10px',
        border: value === item.value ? '1px solid #417FFB' : '1px solid #E5E6EB',
        background: 'none'
      },
      key: item.value,
      value: item.value
    }, item.label);
  }));
};
var TabStyleSelect = function TabStyleSelect(props) {
  var name = props.name,
    label = props.label;
  return /*#__PURE__*/React.createElement(Form.Item, {
    name: name,
    label: label
  }, /*#__PURE__*/React.createElement(InnerTabStyleSelect, Object.assign({}, props)));
};
export default TabStyleSelect;