#FlowModel 이벤트 플로우 및 설정

class MyModel extends FlowModel {
  render() {
    return <Button {...this.props} />;
  }
}

MyModel.registerFlow({
  key: 'buttonSettings',
  title: '버튼 설정',
  steps: {
    general: {
      title: '일반 설정',
      uiSchema: {
        title: {
          type: 'string',
          title: '버튼 제목',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
      },
      defaultParams: {
        type: 'primary',
      },
      handler(ctx, params) {
        ctx.model.setProps('children', params.title);
        ctx.model.setProps('type', params.type);
      },
    },
  },
});

<FlowModelRenderer model={model} showFlowSettings />

flowSettings.open(options: FlowSettingsOpenOptions): Promise<boolean>;
model.openFlowSettings(options?: Omit<FlowSettingsOpenOptions, 'model'>): Promise<boolean>;

interface FlowSettingsOpenOptions {
  model: FlowModel;               // 필수, 해당 모델 인스턴스
  preset?: boolean;               // `preset=true`로 표시된 단계만 렌더링합니다 (기본값은 `false`).
  flowKey?: string;               // 단일 플로우를 지정합니다.
  flowKeys?: string[];            // 여러 플로우를 지정합니다 (`flowKey`가 함께 제공되면 무시됩니다).
  stepKey?: string;               // 단일 단계를 지정합니다 (일반적으로 `flowKey`와 함께 사용됩니다).
  uiMode?: 'dialog' | 'drawer';   // 폼 표시 컨테이너이며, 기본값은 `'dialog'`입니다.
  onCancel?: () => void;          // 취소 버튼 클릭 시 호출되는 콜백 함수입니다.
  onSaved?: () => void;           // 설정이 성공적으로 저장된 후 호출되는 콜백 함수입니다.
}

await model.openFlowSettings({
  flowKey: 'buttonSettings',
  uiMode: 'drawer',
  onSaved: () => {
    console.log('버튼 설정이 저장되었습니다');
  },
});