Блог

Компонент должен быть частью столбца действия и отображаться для типа «рабочий процесс» Компонент должен иметь возможность отображать только кнопку, при нажатии на которую запускается рабочий процесс, настроенный в действии, или выпадающий список с различными опциями, которые при нажатии запускают рабочий процесс с выбранной опцией в качестве аргументов рабочего процесса Компонент должен использовать декоратор connectWorkflow, который добавляет различные реквизиты для взаимодействия с workflow API, например startFlow, resumeFlow. Функции и их аргументы можно увидеть в классе WorkflowManager, когда пользователь нажимает кнопку или параметр, компонент должен вызывать функцию startFlow из реквизита, при этом workflowPath настроен в действии, компонент должен иметь возможность передавать входные данные в рабочий процесс, которые извлекаются из данных строки конкретной таблицы. Оно должно быть способно принимать параметр в определении действия в колонках ListPage prop, то есть объект, который будет передан в качестве входных данных в функцию startFlow. Перед передачей любого ключа или значения из этого объекта следует проверить, есть ли в них какие-либо значения, которые следует заменить данными строки таблицы

 type Props = {
    workflowPath: string;
    executionId: string,
    data: Object,
    actionHandlers: {
        [string]: {
            async: boolean,
            func: (data: { executionId: string, [string]: any }, context: Object) => any,
        },
    },
    startFlow: Function,
    resumeFlow: Function,
};


type State = {
    workflowCode: string,
    executionId: string,
    loading: boolean,
}


@connectWorkflow
class Workflow extends React.Component<Props, State> {
    static defaultProps = {
        executionId: '',
        data: {},
        actionHandlers: {},
        startFlow: () => undefined,
        resumeFlow: () => undefined,
    };

    state = {
        workflowCode: '',
        executionId: '',
        loading: true,
    };

    componentDidMount() {
        const {
            workflowPath, executionId, startFlow, resumeFlow, data, actionHandlers,
        } = this.props;

        if (executionId) {
            resumeFlow(executionId, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
                this.setState({ executionId: execId, workflowCode, loading: false });
            });
        } else {
            startFlow(workflowPath, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
                this.setState({ executionId: execId, workflowCode, loading: false });
            });
        }
    }

    componentDidUpdate(prevProps: Props) {
        const {
            workflowPath, executionId, startFlow, resumeFlow, data, actionHandlers,
        } = this.props;

        if (prevProps.workflowPath !== workflowPath) {
            if (executionId) {
                resumeFlow(executionId, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
                    this.setState({ executionId: execId, workflowCode, loading: false });
                });
            } else {
                startFlow(workflowPath, data, actionHandlers).then(({ id: execId, workflow_name: workflowCode }) => {
                    this.setState({ executionId: execId, workflowCode, loading: false });
                });
            }
        }
    }

    render() {
        const { executionId: executionIdProps } = this.props;
        const { executionId, loading, workflowCode } = this.state;

        // TODO: i18n
        return (
            <React.Fragment>
                <WorkflowForm
                    workflowCode={workflowCode}
                    executionId={executionIdProps || executionId}
                />
                {loading amp;amp; (
                    <Layer margin="medium" plain>
                        <Box>
                            <Text>Loading</Text>
                        </Box>
                    </Layer>
                )}
            </React.Fragment>
        );
    }
}

export default Workflow;
  

Тогда у меня здесь ошибка: супер-выражение должно быть либо нулевым, либо функцией

 // @flow

import * as React from 'react';
import { Box, Button } from 'grommet';
import { Launch } from 'grommet-icons';
import connectWorkflow from '../../../../../../../../src/components/workflows/connectWorkflow';

type Props = {
    startFlow: Function,
}

@connectWorkflow
class WorkflowComponent extends React.ComponentType<Props> {
    static defaultProps = {
        startFlow: () => {
        },
    };

    handleStart = () => {
        this.props.startFlow();
    };

    render() {
        return (
            <Box>
                <Button
                    label="Star Flow"
                    position="right"
                    icon={<Launch />}
                    onClick={this.handleStart}
                />
            </Box>
        );
    }
}

export default WorkflowComponent;

  

Ошибка означает, что родительский класс является недопустимым классом, а чем-то другим.

React.ComponentType это тип, а не класс. Оно не существует во время выполнения, другой класс не может его расширить. WorkflowComponent должно расширяться React.Component . С типами это, вероятно, должно быть:

 class WorkflowComponent extends React.Component<Props> {...}