urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-28 05:22:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

publish: add 'cancel' button to edit form

Browse Source
This commit is contained in:
Matilde Park 2020-12-01 18:18:32 -05:00
parent 29850cdfa0
commit 85cd81be1c
2 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/views/apps/publish/components/EditPost.tsx
View File

@ -50,6 +50,8 @@ export function EditPost(props: EditPostProps & RouteComponentProps) {
return (
<PostForm
initial={initial}
cancel
history={history}
onSubmit={onSubmit}
submitLabel="Update"
loadingText="Updating..."

50
pkg/interface/src/views/apps/publish/components/NoteForm.tsx
View File

@ -1,17 +1,19 @@
import React from "react";
import * as Yup from "yup";
import React from 'react';
import * as Yup from 'yup';
import {
Box,
ManagedTextInputField as Input,
Row,
Col,
} from "@tlon/indigo-react";
import { AsyncButton } from "../../../components/AsyncButton";
import { Formik, Form, FormikHelpers } from "formik";
import { MarkdownField } from "./MarkdownField";
Button
} from '@tlon/indigo-react';
import { AsyncButton } from '../../../components/AsyncButton';
import { Formik, Form, FormikHelpers } from 'formik';
import { MarkdownField } from './MarkdownField';
interface PostFormProps {
initial: PostFormSchema;
cancel?: boolean;
history?: any;
onSubmit: (
values: PostFormSchema,
actions: FormikHelpers<PostFormSchema>
@ -21,8 +23,8 @@ interface PostFormProps {
}
const formSchema = Yup.object({
title: Yup.string().required("Title cannot be blank"),
body: Yup.string().required("Post cannot be blank"),
title: Yup.string().required('Title cannot be blank'),
body: Yup.string().required('Post cannot be blank')
});
export interface PostFormSchema {
@ -31,7 +33,7 @@ export interface PostFormSchema {
}
export function PostForm(props: PostFormProps) {
const { initial, onSubmit, submitLabel, loadingText } = props;
const { initial, onSubmit, cancel, submitLabel, loadingText, history } = props;
return (
<Col width="100%" height="100%" p={[2, 4]}>
@ -41,18 +43,26 @@ export function PostForm(props: PostFormProps) {
onSubmit={onSubmit}
validateOnBlur
>
<Form style={{ display: "contents"}}>
<Row flexShrink='0' flexDirection={["column-reverse", "row"]} mb={4} gapX={4} justifyContent='space-between'>
<Form style={{ display: 'contents' }}>
<Row flexShrink='0' flexDirection={['column-reverse', 'row']} mb={4} gapX={4} justifyContent='space-between'>
<Input maxWidth='40rem' width='100%' flexShrink={[0, 1]} placeholder="Post Title" id="title" />
<AsyncButton
<Row flexDirection={['column', 'row']} mb={[4,0]}>
<AsyncButton
ml={[0,2]}
flexShrink={0}
primary
loadingText={loadingText}
>
{submitLabel}
</AsyncButton>
{cancel && <Button
ml={[0,2]}
mb={[4,0]}
flexShrink={0}
primary
loadingText={loadingText}
>
{submitLabel}
</AsyncButton>
mt={[2,0]}
onClick={() => {
history.goBack();
}}
type="button">Cancel</Button>}
</Row>
</Row>
<MarkdownField flexGrow={1} id="body" />
</Form>