sanity-plugin-internationalized-array 1.6.1 → 1.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/lib/index.esm.js +1 -1
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/package.json +4 -4
- package/src/components/Feedback.tsx +4 -4
- package/src/components/InternationalizedInput.tsx +35 -10
- package/src/components/Preload.tsx +6 -3
- package/src/plugin.tsx +33 -24
- package/src/components/Table.tsx +0 -88
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sanity-plugin-internationalized-array",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.2",
|
|
4
4
|
"description": "Store localized fields in an array to save on attributes",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sanity",
|
|
7
7
|
"sanity-plugin"
|
|
8
8
|
],
|
|
9
|
-
"homepage": "https://github.com/
|
|
9
|
+
"homepage": "https://github.com/sanity-io/sanity-plugin-internationalized-array#readme",
|
|
10
10
|
"bugs": {
|
|
11
|
-
"url": "https://github.com/
|
|
11
|
+
"url": "https://github.com/sanity-io/sanity-plugin-internationalized-array/issues"
|
|
12
12
|
},
|
|
13
13
|
"repository": {
|
|
14
14
|
"type": "git",
|
|
15
|
-
"url": "git@github.com:
|
|
15
|
+
"url": "git@github.com:sanity-io/sanity-plugin-internationalized-array.git"
|
|
16
16
|
},
|
|
17
17
|
"license": "MIT",
|
|
18
18
|
"author": "Sanity.io <hello@sanity.io>",
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import React from 'react'
|
|
1
|
+
import {Card, Code, Stack, Text} from '@sanity/ui'
|
|
3
2
|
|
|
4
3
|
const schemaExample = {
|
|
5
4
|
languages: [
|
|
@@ -13,8 +12,9 @@ export default function Feedback() {
|
|
|
13
12
|
<Card tone="caution" border radius={2} padding={3}>
|
|
14
13
|
<Stack space={4}>
|
|
15
14
|
<Text>
|
|
16
|
-
An array of language objects must be passed into the
|
|
17
|
-
helper function, each with an
|
|
15
|
+
An array of language objects must be passed into the{' '}
|
|
16
|
+
<code>internationalizedArray</code> helper function, each with an{' '}
|
|
17
|
+
<code>id</code> and <code>title</code> field. Example:
|
|
18
18
|
</Text>
|
|
19
19
|
<Card padding={2} border radius={2}>
|
|
20
20
|
<Code size={1} language="javascript">
|
|
@@ -1,8 +1,18 @@
|
|
|
1
|
-
import {ObjectItemProps, useFormValue} from 'sanity'
|
|
2
|
-
import React, {useCallback, useMemo} from 'react'
|
|
3
|
-
import {unset, set} from 'sanity'
|
|
4
|
-
import {Button, Flex, Label, MenuButton, Menu, MenuItem, Card, Spinner, Stack} from '@sanity/ui'
|
|
5
1
|
import {RemoveCircleIcon} from '@sanity/icons'
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
Card,
|
|
5
|
+
Flex,
|
|
6
|
+
Label,
|
|
7
|
+
Menu,
|
|
8
|
+
MenuButton,
|
|
9
|
+
MenuItem,
|
|
10
|
+
Spinner,
|
|
11
|
+
Stack,
|
|
12
|
+
} from '@sanity/ui'
|
|
13
|
+
import React, {useCallback, useMemo} from 'react'
|
|
14
|
+
import {ObjectItemProps, useFormValue} from 'sanity'
|
|
15
|
+
import {set, unset} from 'sanity'
|
|
6
16
|
|
|
7
17
|
import {getToneFromValidation} from './getToneFromValidation'
|
|
8
18
|
import {LanguageContext} from './languageContext'
|
|
@@ -13,13 +23,19 @@ type InternationalizedValue = {
|
|
|
13
23
|
value: string
|
|
14
24
|
}
|
|
15
25
|
|
|
16
|
-
export default function InternationalizedInput(
|
|
17
|
-
|
|
26
|
+
export default function InternationalizedInput(
|
|
27
|
+
props: ObjectItemProps<InternationalizedValue>
|
|
28
|
+
) {
|
|
29
|
+
const parentValue = useFormValue(
|
|
30
|
+
props.path.slice(0, -1)
|
|
31
|
+
) as InternationalizedValue[]
|
|
18
32
|
|
|
19
33
|
const inlineProps = {
|
|
20
34
|
...props.inputProps,
|
|
21
35
|
// This is the magic that makes inline editing work?
|
|
22
|
-
members: props.inputProps.members.filter(
|
|
36
|
+
members: props.inputProps.members.filter(
|
|
37
|
+
(m) => m.kind === 'field' && m.name === 'value'
|
|
38
|
+
),
|
|
23
39
|
// This just overrides the type
|
|
24
40
|
// TODO: Remove this as it shouldn't be necessary?
|
|
25
41
|
value: props.value as InternationalizedValue,
|
|
@@ -30,13 +46,22 @@ export default function InternationalizedInput(props: ObjectItemProps<Internatio
|
|
|
30
46
|
// The parent array contains the languages from the plugin config
|
|
31
47
|
const {languages} = React.useContext(LanguageContext)
|
|
32
48
|
|
|
33
|
-
const languageKeysInUse = useMemo(
|
|
34
|
-
|
|
49
|
+
const languageKeysInUse = useMemo(
|
|
50
|
+
() => parentValue?.map((v) => v._key) ?? [],
|
|
51
|
+
[parentValue]
|
|
52
|
+
)
|
|
53
|
+
const keyIsValid = languages?.length
|
|
54
|
+
? languages.find((l) => l.id === value._key)
|
|
55
|
+
: false
|
|
35
56
|
|
|
36
57
|
// Changes the key of this item, ideally to a valid language
|
|
37
58
|
const handleKeyChange = useCallback(
|
|
38
59
|
(languageId: string) => {
|
|
39
|
-
if (
|
|
60
|
+
if (
|
|
61
|
+
!value ||
|
|
62
|
+
!languages?.length ||
|
|
63
|
+
!languages.find((l) => l.id === languageId)
|
|
64
|
+
) {
|
|
40
65
|
return
|
|
41
66
|
}
|
|
42
67
|
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import {peek, preload} from '../cache'
|
|
2
1
|
import {memo} from 'react'
|
|
3
|
-
import type {PluginConfig} from '../types'
|
|
4
2
|
import {useClient} from 'sanity'
|
|
5
3
|
|
|
4
|
+
import {peek, preload} from '../cache'
|
|
5
|
+
import type {PluginConfig} from '../types'
|
|
6
|
+
|
|
6
7
|
export default memo(function Preload(
|
|
7
8
|
props: Required<Pick<PluginConfig, 'apiVersion' | 'languages'>>
|
|
8
9
|
) {
|
|
@@ -10,7 +11,9 @@ export default memo(function Preload(
|
|
|
10
11
|
if (!Array.isArray(peek({}))) {
|
|
11
12
|
// eslint-disable-next-line require-await
|
|
12
13
|
preload(async () =>
|
|
13
|
-
Array.isArray(props.languages)
|
|
14
|
+
Array.isArray(props.languages)
|
|
15
|
+
? props.languages
|
|
16
|
+
: props.languages(client, {})
|
|
14
17
|
)
|
|
15
18
|
}
|
|
16
19
|
|
package/src/plugin.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
1
|
import {definePlugin} from 'sanity'
|
|
2
|
+
|
|
3
3
|
import Preload from './components/Preload'
|
|
4
4
|
import array from './schema/array'
|
|
5
5
|
import object from './schema/object'
|
|
@@ -10,29 +10,38 @@ const CONFIG_DEFAULT: PluginConfig = {
|
|
|
10
10
|
fieldTypes: [],
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
export const internationalizedArray = definePlugin<PluginConfig>(
|
|
14
|
-
|
|
13
|
+
export const internationalizedArray = definePlugin<PluginConfig>(
|
|
14
|
+
(config = CONFIG_DEFAULT) => {
|
|
15
|
+
const {
|
|
16
|
+
apiVersion = '2022-11-27',
|
|
17
|
+
select,
|
|
18
|
+
languages,
|
|
19
|
+
fieldTypes,
|
|
20
|
+
} = {...CONFIG_DEFAULT, ...config}
|
|
15
21
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
22
|
+
return {
|
|
23
|
+
name: 'sanity-plugin-internationalized-array',
|
|
24
|
+
// If `languages` is a callback then let's preload it
|
|
25
|
+
studio: Array.isArray(languages)
|
|
26
|
+
? undefined
|
|
27
|
+
: {
|
|
28
|
+
components: {
|
|
29
|
+
layout: (props) => (
|
|
30
|
+
<>
|
|
31
|
+
<Preload apiVersion={apiVersion} languages={languages} />
|
|
32
|
+
{props.renderDefault(props)}
|
|
33
|
+
</>
|
|
34
|
+
),
|
|
35
|
+
},
|
|
29
36
|
},
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
schema: {
|
|
38
|
+
types: [
|
|
39
|
+
...fieldTypes.map((type) =>
|
|
40
|
+
array({type, apiVersion, select, languages})
|
|
41
|
+
),
|
|
42
|
+
...fieldTypes.map((type) => object({type})),
|
|
43
|
+
],
|
|
44
|
+
},
|
|
45
|
+
}
|
|
37
46
|
}
|
|
38
|
-
|
|
47
|
+
)
|
package/src/components/Table.tsx
DELETED
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import {Box, BoxProps, Card, CardProps} from '@sanity/ui'
|
|
2
|
-
import React from 'react'
|
|
3
|
-
import styled, {css} from 'styled-components'
|
|
4
|
-
|
|
5
|
-
// Wrappers required because of bug with passing down "as" prop
|
|
6
|
-
// https://github.com/styled-components/styled-components/issues/2449
|
|
7
|
-
|
|
8
|
-
// Table
|
|
9
|
-
const TableWrapper = (props = {}) => {
|
|
10
|
-
return <Box as="table" {...props} />
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const StyledTable = styled(TableWrapper)(
|
|
14
|
-
() =>
|
|
15
|
-
css`
|
|
16
|
-
display: table;
|
|
17
|
-
width: 100%;
|
|
18
|
-
|
|
19
|
-
&:not([hidden]) {
|
|
20
|
-
display: table;
|
|
21
|
-
}
|
|
22
|
-
`
|
|
23
|
-
)
|
|
24
|
-
|
|
25
|
-
type TableProps = BoxProps & {
|
|
26
|
-
children: React.ReactNode
|
|
27
|
-
style?: React.CSSProperties
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export function Table(props: TableProps) {
|
|
31
|
-
const {children, ...rest} = props
|
|
32
|
-
|
|
33
|
-
return <StyledTable {...rest}>{children}</StyledTable>
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// Row
|
|
37
|
-
const RowWrapper = (props = {}) => {
|
|
38
|
-
return <Card as="tr" {...props} />
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const StyledRow = styled(RowWrapper)(
|
|
42
|
-
() =>
|
|
43
|
-
css`
|
|
44
|
-
display: table-row;
|
|
45
|
-
|
|
46
|
-
&:not([hidden]) {
|
|
47
|
-
display: table-row;
|
|
48
|
-
}
|
|
49
|
-
`
|
|
50
|
-
)
|
|
51
|
-
|
|
52
|
-
type TableRowProps = CardProps & {
|
|
53
|
-
children: React.ReactNode
|
|
54
|
-
style?: React.CSSProperties
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export function TableRow(props: TableRowProps) {
|
|
58
|
-
const {children, ...rest} = props
|
|
59
|
-
|
|
60
|
-
return <StyledRow {...rest}>{children}</StyledRow>
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
// Cell
|
|
64
|
-
const CellWrapper = (props = {}) => {
|
|
65
|
-
return <Box as="td" {...props} />
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
const StyledCell = styled(CellWrapper)(
|
|
69
|
-
() =>
|
|
70
|
-
css`
|
|
71
|
-
display: table-cell;
|
|
72
|
-
|
|
73
|
-
&:not([hidden]) {
|
|
74
|
-
display: table-cell;
|
|
75
|
-
}
|
|
76
|
-
`
|
|
77
|
-
)
|
|
78
|
-
|
|
79
|
-
type TableCellProps = BoxProps & {
|
|
80
|
-
children: React.ReactNode
|
|
81
|
-
style?: React.CSSProperties
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
export function TableCell(props: TableCellProps) {
|
|
85
|
-
const {children, ...rest} = props
|
|
86
|
-
|
|
87
|
-
return <StyledCell {...rest}>{children}</StyledCell>
|
|
88
|
-
}
|