Behavior Setter

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ExampleComponent from '@alilc/lowcode-setter-behavior';
import { Input, Box, Select, Message } from '@alifd/next';

const responseFormatter = (response) => response.hits.map((item) => ({
  label: item.title,
  value: item.author
}));
const App = () => {
  const [value, setValue] = React.useState();
  console.log('behavior: ', value);
  const props = {
    onChange: setValue,
    value,
    actions: ['onActionClick', 'onClick'],
    url: 'https://hn.algolia.com/api/v1/search?query',
    responseFormatter,
    enableTooltipAction: true,
    enableMessageAction: true,
    extendedOptions: {
      tooltip: {
        id: 'domId'
      },
      message: {
        types: [
          'notice',
          'success',
          'loading',
          'warning',
          'error',
        ],
        defaultType: 'notice',
        library: 'Next',
        component: 'Message',
      },
    },
    field: {
      parent: {
        setPropValue() {
          console.log('set prop value: ', { ...arguments })
        },
        getPropValue(propName) {
          return propName + '- value';
        }
      },
      getNode() {
        return {
          document: {
            modalNodesManager: {
              getModalNodes() {
                return [
                  {
                    componentName: 'ProDialog',
                    id: 'mockId',
                    propsData: {
                      title: 'mockTitle',
                      ref: 'mockRef'
                    }
                  }
                ]
              }
            }
          }
        }
      }
    },
    extraBehaviorActions: [
      {
        name: 'test',
        title: '测试',
        render: ({ value = {}, onChange }) => {
          return (
            <Box direction="row" align="center" className="behavior-item">
              <Box style={{ width: 70 }}>通知内容</Box>
              <Box direction="row" className="behavior-radio" spacing={10}>
                <Select
                  hasClear
                  showSearch
                  dataSource={[
                    'notice',
                    'success',
                    'warning',
                    'error',
                  ]}
                  value={value?.type}
                  onChange={(val) => {
                    onChange({
                      ...value,
                      type: val,
                    });
                  }}
                />
                <Input
                  hasClear
                  placeholder="请输入内容"
                  value={value.content}
                  onChange={(content) => {
                    onChange({
                      ...value,
                      content,
                    });
                  }}
                />
              </Box>
            </Box>
          )
        },
        toActionValue: (value) => ({
          type: 'JSExpression',
          value: `function() {Next.Message['${value.type || 'notice'}']('${value.content}')}`,
        }),
      }
    ]
  };
  return (
    <div style={{ width: 360 }}>
      <ExampleComponent {...props}  />
    </div>
  );
}


ReactDOM.render(<App />, mountNode);