2018-09-20 11:58:47 -07:00
|
|
|
import React from 'react';
|
2019-03-18 11:35:08 -07:00
|
|
|
import { Form, Alert } from 'antd';
|
2018-09-20 11:58:47 -07:00
|
|
|
import MarkdownEditor from 'components/MarkdownEditor';
|
2018-11-14 08:43:00 -08:00
|
|
|
import { ProposalDraft } from 'types';
|
2019-03-18 11:35:08 -07:00
|
|
|
import { getCreateErrors } from 'modules/create/utils';
|
2018-09-20 11:58:47 -07:00
|
|
|
|
|
|
|
interface State {
|
2018-11-14 09:59:48 -08:00
|
|
|
content: string;
|
2018-09-20 11:58:47 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
initialState?: Partial<State>;
|
2018-11-14 08:43:00 -08:00
|
|
|
updateForm(form: Partial<ProposalDraft>): void;
|
2018-09-20 11:58:47 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class CreateFlowTeam extends React.Component<Props, State> {
|
|
|
|
constructor(props: Props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
2018-11-14 09:59:48 -08:00
|
|
|
content: '',
|
2018-09-20 11:58:47 -07:00
|
|
|
...(props.initialState || {}),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2019-03-18 11:35:08 -07:00
|
|
|
const errors = getCreateErrors(this.state, true);
|
|
|
|
|
2018-09-20 11:58:47 -07:00
|
|
|
return (
|
|
|
|
<Form layout="vertical" style={{ maxWidth: 980, margin: '0 auto' }}>
|
|
|
|
<MarkdownEditor
|
|
|
|
onChange={this.handleChange}
|
2018-11-14 09:59:48 -08:00
|
|
|
initialMarkdown={this.state.content}
|
2019-03-06 10:56:01 -08:00
|
|
|
minHeight={200}
|
2018-09-20 11:58:47 -07:00
|
|
|
/>
|
2019-03-18 11:35:08 -07:00
|
|
|
{errors.content && <Alert type="error" message={errors.content} showIcon />}
|
2018-09-20 11:58:47 -07:00
|
|
|
</Form>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
private handleChange = (markdown: string) => {
|
2018-11-16 08:57:03 -08:00
|
|
|
if (markdown !== this.state.content) {
|
|
|
|
this.setState({ content: markdown }, () => {
|
|
|
|
this.props.updateForm(this.state);
|
|
|
|
});
|
|
|
|
}
|
2018-09-20 11:58:47 -07:00
|
|
|
};
|
|
|
|
}
|