Skip to content

Commit ac698b3

Browse files
robinpyonrobinpyon
committed
fix: re-enable references tab panel
1 parent 100f3eb commit ac698b3

File tree

3 files changed

+63
-102
lines changed

3 files changed

+63
-102
lines changed

‎README.md

-7
Original file line numberDiff line numberDiff line change
@@ -98,13 +98,6 @@ export default createConfig({
9898

9999
## Known issues
100100

101-
<details>
102-
<summary>(V3) Where has the references tab gone?</summary>
103-
104-
- This will be enabled in a future version!
105-
106-
</details>
107-
108101
<details>
109102
<summary>There isn't a way to edit asset fields directly from the desk (without opening the plugin)</summary>
110103

‎src/components/DialogAssetEdit/index.tsx

+4-11
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import {yupResolver} from '@hookform/resolvers/yup'
2-
import {useClient} from 'sanity'
32
import type {MutationEvent} from '@sanity/client'
4-
import {Box, Button, Card, Flex, Stack, TabPanel, Text} from '@sanity/ui'
3+
import {Box, Button, Card, Flex, Stack, Tab, TabList, TabPanel, Text} from '@sanity/ui'
54
import {Asset, DialogAssetEditProps, ReactSelectOption} from '@types'
65
import groq from 'groq'
76
import React, {ReactNode, useEffect, useRef, useState} from 'react'
87
import {useForm} from 'react-hook-form'
98
import {useDispatch} from 'react-redux'
9+
import {useClient} from 'sanity'
1010
import * as yup from 'yup'
1111
import useTypedSelector from '../../hooks/useTypedSelector'
1212
import {assetsActions, selectAssetById} from '../../modules/assets'
@@ -18,7 +18,7 @@ import sanitizeFormData from '../../utils/sanitizeFormData'
1818
import {isFileAsset, isImageAsset} from '../../utils/typeGuards'
1919
import AssetMetadata from '../AssetMetadata'
2020
import Dialog from '../Dialog'
21-
// import DocumentList from '../DocumentList'
21+
import DocumentList from '../DocumentList'
2222
import FileAssetPreview from '../FileAssetPreview'
2323
import FormFieldInputFilename from '../FormFieldInputFilename'
2424
import FormFieldInputTags from '../FormFieldInputTags'
@@ -62,10 +62,7 @@ const DialogAssetEdit = (props: Props) => {
6262
// State
6363
// - Generate a snapshot of the current asset
6464
const [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset)
65-
const [
66-
tabSection
67-
// setTabSection
68-
] = useState<'details' | 'references'>('details')
65+
const [tabSection, setTabSection] = useState<'details' | 'references'>('details')
6966

7067
const currentAsset = assetItem ? assetItem?.asset : assetSnapshot
7168
const allTagOptions = getTagSelectOptions(tags)
@@ -273,7 +270,6 @@ const DialogAssetEdit = (props: Props) => {
273270
<Flex direction={['column-reverse', 'column-reverse', 'row-reverse']}>
274271
<Box flex={1} marginTop={[5, 5, 0]} padding={4}>
275272
{/* Tabs */}
276-
{/*
277273
<TabList space={2}>
278274
<Tab
279275
aria-controls="details-panel"
@@ -294,7 +290,6 @@ const DialogAssetEdit = (props: Props) => {
294290
size={2}
295291
/>
296292
</TabList>
297-
*/}
298293

299294
{/* Form fields */}
300295
<Box as="form" marginTop={4} onSubmit={handleSubmit(onSubmit)}>
@@ -369,7 +364,6 @@ const DialogAssetEdit = (props: Props) => {
369364
</TabPanel>
370365

371366
{/* Panel: References */}
372-
{/*
373367
<TabPanel
374368
aria-labelledby="references"
375369
hidden={tabSection !== 'references'}
@@ -379,7 +373,6 @@ const DialogAssetEdit = (props: Props) => {
379373
{assetItem?.asset && <DocumentList assetId={assetItem?.asset._id} />}
380374
</Box>
381375
</TabPanel>
382-
*/}
383376
</Box>
384377
</Box>
385378

‎src/components/DocumentList/index.tsx

+59-84
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,82 @@
1-
/*
21
import type {SanityDocument} from '@sanity/client'
3-
import {Box, Card, Text} from '@sanity/ui'
4-
import {IntentLink} from 'part:sanity/router'
5-
import Preview from 'part:sanity/preview'
6-
import schema from 'part:sanity/schema'
7-
import {WithReferringDocuments} from 'part:sanity/with-referring-documents'
2+
import {Box, Button, Card, Stack, Text} from '@sanity/ui'
83
import React from 'react'
9-
import styled from 'styled-components'
4+
import {useIntentLink, useSchema} from 'sanity'
5+
import {SanityPreview, useDocumentStore, WithReferringDocuments} from 'sanity/_unstable'
106

117
type Props = {
128
assetId: string
139
}
1410

15-
// Brute force styles on all of Sanity's preview components.
16-
// TODO: Consider using a custom preview component that is able to resolve custom titles
17-
// (and potentially subtitles) defined at the document schema level. Or anything to ensure
18-
// that future upstream changes to Sanity's preview components don't break anything here.
19-
const Container = styled(Box)`
20-
* {
21-
color: ${props => props.theme.sanity.color.base.fg};
22-
}
23-
24-
a {
25-
text-decoration: none;
26-
}
27-
28-
h2 {
29-
font-size: ${props => props.theme.sanity.fonts.text.sizes[1]};
30-
}
31-
`
32-
3311
const DocumentList = (props: Props) => {
3412
const {assetId} = props
3513

36-
const renderChild = (renderProps: {isLoading: boolean; referringDocuments: SanityDocument}) => {
37-
const {isLoading, referringDocuments} = renderProps
14+
const documentStore = useDocumentStore()
3815

39-
const draftIds = referringDocuments.reduce(
40-
(acc: string[], doc: SanityDocument) =>
41-
doc._id.startsWith('drafts.') ? acc.concat(doc._id.slice(7)) : acc,
42-
[]
43-
)
16+
return (
17+
<WithReferringDocuments documentStore={documentStore} id={assetId}>
18+
{({isLoading, referringDocuments}) => (
19+
<ReferringDocuments isLoading={isLoading} referringDocuments={referringDocuments} />
20+
)}
21+
</WithReferringDocuments>
22+
)
23+
}
4424

45-
const filteredDocuments: SanityDocument[] = referringDocuments.filter(
46-
(doc: SanityDocument) => !draftIds.includes(doc._id)
47-
)
25+
const ReferringDocuments = (props: {isLoading: boolean; referringDocuments: SanityDocument[]}) => {
26+
const {isLoading, referringDocuments} = props
4827

49-
if (isLoading) {
50-
return <Text size={1}>Loading...</Text>
51-
}
28+
const schema = useSchema()
5229

53-
if (filteredDocuments.length === 0) {
54-
return <Text size={1}>No documents are referencing this asset</Text>
55-
}
30+
const draftIds = referringDocuments.reduce(
31+
(acc: string[], doc: SanityDocument) =>
32+
doc._id.startsWith('drafts.') ? acc.concat(doc._id.slice(7)) : acc,
33+
[]
34+
)
5635

57-
return filteredDocuments?.map(doc => {
58-
const schemaType = schema.get(doc._type)
36+
const filteredDocuments: SanityDocument[] = referringDocuments.filter(
37+
(doc: SanityDocument) => !draftIds.includes(doc._id)
38+
)
5939

60-
return (
61-
<Card
62-
key={doc._id}
63-
marginBottom={2}
64-
padding={2}
65-
radius={2}
66-
shadow={1}
67-
style={{overflow: 'hidden'}}
68-
>
69-
<Box>
70-
{schemaType ? (
71-
<IntentLink intent="edit" params={{id: doc._id}} key={doc._id}>
72-
<Preview layout="default" value={doc} type={schemaType} />
73-
</IntentLink>
74-
) : (
75-
<Box padding={2}>
76-
<Text size={1}>
77-
A document of the unknown type <em>{doc._type}</em>
78-
</Text>
79-
</Box>
80-
)}
81-
</Box>
82-
</Card>
83-
)
84-
})
40+
if (isLoading) {
41+
return <Text size={1}>Loading...</Text>
42+
}
43+
44+
if (filteredDocuments.length === 0) {
45+
return <Text size={1}>No documents are referencing this asset</Text>
8546
}
8647

8748
return (
88-
<Container>
89-
<WithReferringDocuments id={assetId}>{renderChild}</WithReferringDocuments>
90-
</Container>
49+
<Card flex={1} marginBottom={2} padding={2} radius={2} shadow={1}>
50+
<Stack space={2}>
51+
{filteredDocuments?.map(doc => {
52+
const schemaType = schema.get(doc._type)
53+
54+
const {onClick} = useIntentLink({
55+
intent: 'edit',
56+
params: {id: doc._id}
57+
})
58+
59+
return schemaType ? (
60+
<Button
61+
key={doc._id}
62+
mode="bleed"
63+
onClick={onClick}
64+
padding={2}
65+
style={{width: '100%'}}
66+
>
67+
<SanityPreview layout="default" schemaType={schemaType} value={doc} />
68+
</Button>
69+
) : (
70+
<Box padding={2}>
71+
<Text size={1}>
72+
A document of the unknown type <em>{doc._type}</em>
73+
</Text>
74+
</Box>
75+
)
76+
})}
77+
</Stack>
78+
</Card>
9179
)
9280
}
93-
*/
94-
95-
import React from 'react'
96-
import {Text} from '@sanity/ui'
97-
98-
type Props = {
99-
assetId: string
100-
}
101-
102-
const DocumentList = (props: Props) => {
103-
const {assetId} = props
104-
return <Text>Document list for Asset with ID {assetId} should go here</Text>
105-
}
10681

10782
export default DocumentList

0 commit comments

Comments
 (0)