jjb-lc-designable/formily-setters/components/ReactionsSetter/FieldPropertySetter.js

基于alibaba-designable源码二次封装的表单设计器。

import React, { useState } from 'react';
import { TextWidget, usePrefix } from 'jjb-lc-designable/react';
import { Menu } from 'antd';
import { MonacoInput } from 'jjb-lc-designable/react-settings-form';
import { isPlainObj, reduce } from 'jjb-lc-formily/shared';
import { FieldProperties } from './properties';
const template = code => {
  if (!code) return;
  return code.trim();
};
export const FieldPropertySetter = props => {
  const [selectKeys, setSelectKeys] = useState(['visible']);
  const prefix = usePrefix('field-property-setter');
  const value = {
    ...props.value
  };
  const parseExpression = expression => {
    if (!expression) return '';
    return String(expression).match(/^\{\{([\s\S]*)\}\}$/)?.[1] || '';
  };
  const filterEmpty = value => {
    return reduce(value, (buf, value, key) => {
      if (!value || value === '{{}}') return buf;
      buf[key] = value;
      return buf;
    }, {});
  };
  const currentProperty = FieldProperties.find(item => item.key === selectKeys[0]);
  return /*#__PURE__*/React.createElement("div", {
    className: prefix
  }, /*#__PURE__*/React.createElement(Menu, {
    mode: "vertical",
    style: {
      width: 200,
      height: 300,
      paddingRight: 4,
      overflowY: 'auto',
      overflowX: 'hidden'
    },
    defaultSelectedKeys: selectKeys,
    selectedKeys: selectKeys,
    onSelect: ({
      selectedKeys
    }) => {
      setSelectKeys(selectedKeys);
    }
  }, FieldProperties.map(key => {
    if (isPlainObj(key)) {
      return /*#__PURE__*/React.createElement(Menu.Item, {
        key: key.key
      }, /*#__PURE__*/React.createElement(TextWidget, {
        token: `SettingComponents.ReactionsSetter.${key.token || key.key}`
      }));
    }
    return /*#__PURE__*/React.createElement(Menu.Item, {
      key: key
    }, /*#__PURE__*/React.createElement(TextWidget, {
      token: `SettingComponents.ReactionsSetter.${key}`
    }));
  })), /*#__PURE__*/React.createElement("div", {
    className: prefix + '-coder-wrapper'
  }, /*#__PURE__*/React.createElement("div", {
    className: prefix + '-coder-start'
  }, `$self.${selectKeys[0]} = (`, /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 14,
      marginLeft: 10,
      color: '#888',
      fontWeight: 'normal'
    }
  }, '//', ' ', /*#__PURE__*/React.createElement(TextWidget, {
    token: "SettingComponents.ReactionsSetter.expressionValueTypeIs"
  }), ' ', '`', currentProperty?.type, '`')), /*#__PURE__*/React.createElement("div", {
    className: prefix + '-coder'
  }, /*#__PURE__*/React.createElement(MonacoInput, {
    key: selectKeys[0],
    language: "javascript.expression",
    extraLib: props.extraLib,
    helpCode: template(currentProperty?.helpCode),
    value: parseExpression(value[selectKeys[0]]),
    options: {
      lineNumbers: 'off',
      wordWrap: 'on',
      glyphMargin: false,
      folding: false,
      lineDecorationsWidth: 0,
      lineNumbersMinChars: 0,
      minimap: {
        enabled: false
      }
    },
    onChange: expression => {
      props.onChange?.(filterEmpty({
        ...value,
        [selectKeys[0]]: `{{${expression}}}`
      }));
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: prefix + '-coder-end'
  }, `)`)));
};