render()

in public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx [295:346]


  render() {
    const { onCloseFlyout, policy, state } = this.props;
    const { name, createAction, editAction, createTransition, editTransition, actions } = this.state;
    const isEditing = !!state;

    let title = `${isEditing ? "Edit" : "Create"} state`;
    if (createTransition || createAction || !!editTransition || !!editAction) title = "State";
    if (name) title += `: ${name}`;

    // Filter out the current editing state if we are editing
    const stateOptions = policy.states.map((s) => s.name);

    let flyoutContent;
    if (createAction || !!editAction)
      flyoutContent = () => (
        <CreateAction
          actions={actions}
          editAction={editAction}
          stateName={name}
          onClickCancelAction={this.onClickCancelAction}
          onClickSaveAction={this.onClickSaveAction}
        />
      );
    if (createTransition || editTransition)
      flyoutContent = () => (
        <CreateTransition
          stateOptions={stateOptions}
          editTransition={editTransition}
          onCloseCreateTransition={() => this.setState({ createTransition: false, editTransition: null })}
          onClickSaveTransition={this.onClickSaveTransition}
        />
      );
    if (!flyoutContent)
      flyoutContent = () => (
        <>
          <EuiFlyoutBody>{this.renderDefault()}</EuiFlyoutBody>
          <EuiFlyoutFooter>{this.renderDefaultFooter()}</EuiFlyoutFooter>
        </>
      );
    return (
      <EuiPortal>
        <EuiFlyout hideCloseButton ownFocus={false} onClose={onCloseFlyout} maxWidth={600} size="m" aria-labelledby="flyoutTitle">
          <EuiFlyoutHeader hasBorder>
            <EuiTitle size="m">
              <h2 id="flyoutTitle">{title}</h2>
            </EuiTitle>
          </EuiFlyoutHeader>
          {flyoutContent()}
        </EuiFlyout>
      </EuiPortal>
    );
  }