-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
369 additions
and
296 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
...ore/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "main": "dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-CreateItemPage.cjs.js", | ||
| "module": "dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-CreateItemPage.esm.js" | ||
| } |
85 changes: 85 additions & 0 deletions
85
...re/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| /** @jsxRuntime classic */ | ||
| /** @jsx jsx */ | ||
|
|
||
| import { Box, jsx } from '@keystone-ui/core'; | ||
| import { LoadingDots } from '@keystone-ui/loading'; | ||
| import { Button } from '@keystone-ui/button'; | ||
| import { useRouter } from 'next/router'; | ||
| import { Fields } from '../../../../admin-ui/utils'; | ||
| import { PageContainer } from '../../../../admin-ui/components/PageContainer'; | ||
| import { useKeystone, useList } from '../../../../admin-ui'; | ||
| import { GraphQLErrorNotice } from '../../../../../admin-ui/components/dist/keystone-6-core-admin-ui-components.cjs'; | ||
| import { ListMeta } from '../../../../types'; | ||
| import { useCreateItem } from '../../../../admin-ui/utils/useCreateItem'; | ||
| import { BaseToolbar, ColumnLayout, ItemPageHeader } from '../ItemPage/common'; | ||
|
|
||
| function CreatePageForm(props: { list: ListMeta }) { | ||
| const createItem = useCreateItem(props.list); | ||
| const router = useRouter(); | ||
| return ( | ||
| <Box paddingTop="xlarge"> | ||
| {createItem.error && ( | ||
| <GraphQLErrorNotice | ||
| networkError={createItem.error?.networkError} | ||
| errors={createItem.error?.graphQLErrors} | ||
| /> | ||
| )} | ||
|
|
||
| <form | ||
| onSubmit={async event => { | ||
| event.preventDefault(); | ||
| const item = await createItem.create(); | ||
| if (item) { | ||
| router.push(`/${props.list.path}/${item.id}`); | ||
| } | ||
| }} | ||
| > | ||
| <Fields {...createItem.props} /> | ||
| <BaseToolbar> | ||
| <Button | ||
| isLoading={createItem.state === 'loading'} | ||
| type="submit" | ||
| weight="bold" | ||
| tone="active" | ||
| > | ||
| Create {props.list.singular} | ||
| </Button> | ||
| </BaseToolbar> | ||
| </form> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| type CreateItemPageProps = { listKey: string }; | ||
|
|
||
| export const getCreateItemPage = (props: CreateItemPageProps) => () => | ||
| <CreateItemPage {...props} />; | ||
|
|
||
| function CreateItemPage(props: CreateItemPageProps) { | ||
| const list = useList(props.listKey); | ||
| const { createViewFieldModes } = useKeystone(); | ||
|
|
||
| return ( | ||
| <PageContainer | ||
| title={`Create ${list.singular}`} | ||
| header={<ItemPageHeader list={list} label="Create" />} | ||
| > | ||
| <ColumnLayout> | ||
| <Box> | ||
| {createViewFieldModes.state === 'error' && ( | ||
| <GraphQLErrorNotice | ||
| networkError={ | ||
| createViewFieldModes.error instanceof Error ? createViewFieldModes.error : undefined | ||
| } | ||
| errors={ | ||
| createViewFieldModes.error instanceof Error ? undefined : createViewFieldModes.error | ||
| } | ||
| /> | ||
| )} | ||
| {createViewFieldModes.state === 'loading' && <LoadingDots label="Loading create form" />} | ||
| <CreatePageForm list={list} /> | ||
| </Box> | ||
| </ColumnLayout> | ||
| </PageContainer> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 105 additions & 0 deletions
105
...es/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| /** @jsxRuntime classic */ | ||
| /** @jsx jsx */ | ||
|
|
||
| import { Heading, jsx, useTheme } from '@keystone-ui/core'; | ||
| import { ChevronRightIcon } from '@keystone-ui/icons/icons/ChevronRightIcon'; | ||
| import { HTMLAttributes, ReactNode } from 'react'; | ||
| import { Container } from '../../../../admin-ui/components/Container'; | ||
| import { Link } from '../../../../admin-ui/router'; | ||
| import { ListMeta } from '../../../../types'; | ||
|
|
||
| export function ItemPageHeader(props: { list: ListMeta; label: string }) { | ||
| const { palette, spacing } = useTheme(); | ||
|
|
||
| return ( | ||
| <Container | ||
| css={{ | ||
| alignItems: 'center', | ||
| display: 'flex', | ||
| flex: 1, | ||
| justifyContent: 'space-between', | ||
| }} | ||
| > | ||
| <div | ||
| css={{ | ||
| alignItems: 'center', | ||
| display: 'flex', | ||
| flex: 1, | ||
| minWidth: 0, | ||
| }} | ||
| > | ||
| <Heading type="h3"> | ||
| <Link href={`/${props.list.path}`} css={{ textDecoration: 'none' }}> | ||
| {props.list.label} | ||
| </Link> | ||
| </Heading> | ||
| <div | ||
| css={{ | ||
| color: palette.neutral500, | ||
| marginLeft: spacing.xsmall, | ||
| marginRight: spacing.xsmall, | ||
| }} | ||
| > | ||
| <ChevronRightIcon /> | ||
| </div> | ||
| <Heading | ||
| as="h1" | ||
| type="h3" | ||
| css={{ | ||
| minWidth: 0, | ||
| maxWidth: '100%', | ||
| overflow: 'hidden', | ||
| flex: 1, | ||
| textOverflow: 'ellipsis', | ||
| whiteSpace: 'nowrap', | ||
| }} | ||
| > | ||
| {props.label} | ||
| </Heading> | ||
| </div> | ||
| </Container> | ||
| ); | ||
| } | ||
|
|
||
| export function ColumnLayout(props: HTMLAttributes<HTMLDivElement>) { | ||
| const { spacing } = useTheme(); | ||
|
|
||
| return ( | ||
| // this container must be relative to catch absolute children | ||
| // particularly the "expanded" document-field, which needs a height of 100% | ||
| <Container css={{ position: 'relative', height: '100%' }}> | ||
| <div | ||
| css={{ | ||
| alignItems: 'start', | ||
| display: 'grid', | ||
| gap: spacing.xlarge, | ||
| gridTemplateColumns: `2fr 1fr`, | ||
| }} | ||
| {...props} | ||
| /> | ||
| </Container> | ||
| ); | ||
| } | ||
|
|
||
| export function BaseToolbar(props: { children: ReactNode }) { | ||
| const { colors, spacing } = useTheme(); | ||
|
|
||
| return ( | ||
| <div | ||
| css={{ | ||
| background: colors.background, | ||
| borderTop: `1px solid ${colors.border}`, | ||
| bottom: 0, | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| marginTop: spacing.xlarge, | ||
| paddingBottom: spacing.xlarge, | ||
| paddingTop: spacing.xlarge, | ||
| position: 'sticky', | ||
| zIndex: 20, | ||
| }} | ||
| > | ||
| {props.children} | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.