sanity-plugin-internationalized-array 1.0.0 → 1.1.0
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 +70 -24
- package/lib/cjs/index.js +149 -130
- package/lib/cjs/index.js.map +1 -1
- package/lib/esm/index.js +148 -117
- package/lib/esm/index.js.map +1 -1
- package/lib/types/index.d.ts +4 -11
- package/lib/types/index.d.ts.map +1 -1
- package/package.json +6 -5
- package/src/components/InternationalizedArrayInput.tsx +7 -5
- package/src/components/createFieldName.ts +20 -0
- package/src/index.ts +1 -0
- package/src/plugin.tsx +23 -0
- package/src/schema/array.ts +69 -0
- package/src/schema/object.ts +29 -0
- package/src/types.ts +4 -2
- package/src/index.tsx +0 -51
- package/src/internationalizedArray.ts +0 -111
package/README.md
CHANGED
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> NOTE This is for the Studio v3 version of the plugin
|
|
4
4
|
|
|
5
|
-
A helper function that renders a custom input component for writing
|
|
6
|
-
|
|
7
|
-
**This an early proof-of-concept and should not yet be used without thorough testing.**
|
|
5
|
+
A helper function that renders a custom input component for writing localized fields of content into an array.
|
|
8
6
|
|
|
9
7
|

|
|
10
8
|
|
|
@@ -20,35 +18,81 @@ or
|
|
|
20
18
|
yarn add sanity-plugin-internationalized-array-v3@studio-v3
|
|
21
19
|
```
|
|
22
20
|
|
|
23
|
-
|
|
21
|
+
## Usage (simple)
|
|
24
22
|
|
|
25
|
-
|
|
23
|
+
Add it as a plugin in sanity.config.ts (or .js):
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
import {createConfig} from 'sanity'
|
|
26
27
|
import {internationalizedArray} from 'sanity-plugin-internationalized-array'
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
title: 'Person',
|
|
32
|
-
type: 'document',
|
|
33
|
-
fields: [
|
|
34
|
-
// ...all your other fields
|
|
29
|
+
export const createConfig({
|
|
30
|
+
// ...
|
|
31
|
+
plugins: [
|
|
35
32
|
internationalizedArray({
|
|
36
|
-
// Required, the `name` of the outer array
|
|
37
|
-
name: 'greeting',
|
|
38
|
-
// Required, the `type` of the inner field
|
|
39
|
-
// One of: string | text | number | boolean
|
|
40
|
-
type: 'string',
|
|
41
|
-
// Required, must be an array of objects
|
|
42
33
|
languages: [
|
|
43
34
|
{id: 'en', title: 'English'},
|
|
44
|
-
{id: 'fr', title: 'French'}
|
|
35
|
+
{id: 'fr', title: 'French'}
|
|
45
36
|
],
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
37
|
+
fieldTypes: ['string'],
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
})
|
|
49
41
|
```
|
|
50
42
|
|
|
51
|
-
This will
|
|
43
|
+
This will register two new fields to the schema, based on the settings passed into `fieldTypes`:
|
|
44
|
+
|
|
45
|
+
- `internationalizedArrayString` an array field of:
|
|
46
|
+
- `internationalizedArrayStringValue` an object field, with a single `string` field inside called `value`
|
|
47
|
+
|
|
48
|
+
You can pass in more registered schema type names to generate more internationalized arrays. Use them in your schema like this:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
defineField({
|
|
52
|
+
name: 'greeting',
|
|
53
|
+
type: 'internationalizedArrayString',
|
|
54
|
+
}),
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Usage (advanced)
|
|
58
|
+
|
|
59
|
+
For more control over the `value` field, you can pass a schema definition into the `fieldTypes` array.
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
import {createConfig} from 'sanity'
|
|
63
|
+
import {internationalizedArray} from 'sanity-plugin-internationalized-array'
|
|
64
|
+
|
|
65
|
+
export const createConfig({
|
|
66
|
+
// ...
|
|
67
|
+
plugins: [
|
|
68
|
+
internationalizedArray({
|
|
69
|
+
languages: [
|
|
70
|
+
{id: 'en', title: 'English'},
|
|
71
|
+
{id: 'fr', title: 'French'}
|
|
72
|
+
],
|
|
73
|
+
fieldTypes: [
|
|
74
|
+
defineField({
|
|
75
|
+
name: 'featuredProduct',
|
|
76
|
+
type: 'reference',
|
|
77
|
+
to: [{type: 'product'}]
|
|
78
|
+
hidden: (({document}) => !document?.title)
|
|
79
|
+
})
|
|
80
|
+
],
|
|
81
|
+
})
|
|
82
|
+
]
|
|
83
|
+
})
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
This would also create two new fields in your schema.
|
|
87
|
+
|
|
88
|
+
- `internationalizedArrayFeaturedProduct` an array field of:
|
|
89
|
+
- `internationalizedArrayFeaturedProductValue` an object field, with a single `string` field inside called `value`
|
|
90
|
+
|
|
91
|
+
Note that the `name` key in the field gets rewritten to `value` and is instead used to name the object field.
|
|
92
|
+
|
|
93
|
+
## Shape of stored data
|
|
94
|
+
|
|
95
|
+
The custom input contains buttons which will add new array items with the language as the `_key` value. Data returned from this array will look like this:
|
|
52
96
|
|
|
53
97
|
```json
|
|
54
98
|
"greeting": [
|
|
@@ -57,6 +101,8 @@ This will create an Array field where `string` fields can be added with the name
|
|
|
57
101
|
]
|
|
58
102
|
```
|
|
59
103
|
|
|
104
|
+
## Querying data
|
|
105
|
+
|
|
60
106
|
Using GROQ filters you can query for a specific language key like so:
|
|
61
107
|
|
|
62
108
|
```js
|
|
@@ -73,7 +119,7 @@ Follow the instructions inside the script and set the `_type` and field name you
|
|
|
73
119
|
|
|
74
120
|
Please take a backup first!
|
|
75
121
|
|
|
76
|
-
### Why store
|
|
122
|
+
### Why store localized field data like this?
|
|
77
123
|
|
|
78
124
|
The most popular way to store field-level translated content is in an object using the method prescribed in [@sanity/language-filter](https://www.npmjs.com/package/@sanity/language-filter). This works well and creates tidy object structures, but also create a unique field path for every unique field name, multiplied by the number of languages in your dataset.
|
|
79
125
|
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,36 +1,41 @@
|
|
|
1
|
-
var $
|
|
2
|
-
var $
|
|
3
|
-
var $
|
|
4
|
-
var $
|
|
5
|
-
var $
|
|
6
|
-
var $
|
|
7
|
-
var $
|
|
8
|
-
|
|
9
|
-
function $parcel$exportWildcard(dest, source) {
|
|
10
|
-
Object.keys(source).forEach(function(key) {
|
|
11
|
-
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
|
|
12
|
-
return;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
Object.defineProperty(dest, key, {
|
|
16
|
-
enumerable: true,
|
|
17
|
-
get: function get() {
|
|
18
|
-
return source[key];
|
|
19
|
-
}
|
|
20
|
-
});
|
|
21
|
-
});
|
|
1
|
+
var $k7rGe$sanity = require("sanity");
|
|
2
|
+
var $k7rGe$reactjsxruntime = require("react/jsx-runtime");
|
|
3
|
+
var $k7rGe$react = require("react");
|
|
4
|
+
var $k7rGe$sanityform = require("sanity/form");
|
|
5
|
+
var $k7rGe$sanityui = require("@sanity/ui");
|
|
6
|
+
var $k7rGe$sanityicons = require("@sanity/icons");
|
|
7
|
+
var $k7rGe$styledcomponents = require("styled-components");
|
|
22
8
|
|
|
23
|
-
return dest;
|
|
24
|
-
}
|
|
25
9
|
function $parcel$export(e, n, v, s) {
|
|
26
10
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
27
11
|
}
|
|
28
12
|
function $parcel$interopDefault(a) {
|
|
29
13
|
return a && a.__esModule ? a.default : a;
|
|
30
14
|
}
|
|
31
|
-
var $7594066088192472$exports = {};
|
|
32
15
|
|
|
33
|
-
$parcel$export(
|
|
16
|
+
$parcel$export(module.exports, "internationalizedArray", () => $45e3093e7de8dca2$export$bec7eb13daf35f0e);
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
function $a0eca5cb1c058e2c$export$8a7688a96d852767(string) {
|
|
20
|
+
return string.replace(/-([a-z])/g, (g)=>g[1].toUpperCase());
|
|
21
|
+
}
|
|
22
|
+
function $a0eca5cb1c058e2c$export$348afa8c9ff47183(string) {
|
|
23
|
+
return string.split(` `).map((word)=>word.charAt(0).toUpperCase() + word.slice(1)).join(` `);
|
|
24
|
+
}
|
|
25
|
+
function $a0eca5cb1c058e2c$export$26c6f48841fe1a8a(string) {
|
|
26
|
+
return $a0eca5cb1c058e2c$export$348afa8c9ff47183($a0eca5cb1c058e2c$export$8a7688a96d852767(string));
|
|
27
|
+
}
|
|
28
|
+
function $a0eca5cb1c058e2c$export$ab1ce2a474f41f52(name, addValue = false) {
|
|
29
|
+
return addValue ? [
|
|
30
|
+
`internationalizedArray`,
|
|
31
|
+
$a0eca5cb1c058e2c$export$26c6f48841fe1a8a(name),
|
|
32
|
+
`Value`
|
|
33
|
+
].join(``) : [
|
|
34
|
+
`internationalizedArray`,
|
|
35
|
+
$a0eca5cb1c058e2c$export$26c6f48841fe1a8a(name)
|
|
36
|
+
].join(``);
|
|
37
|
+
}
|
|
38
|
+
|
|
34
39
|
|
|
35
40
|
|
|
36
41
|
|
|
@@ -44,12 +49,12 @@ $parcel$export($7594066088192472$exports, "internationalizedArray", () => $75940
|
|
|
44
49
|
// https://github.com/styled-components/styled-components/issues/2449
|
|
45
50
|
// Table
|
|
46
51
|
const $acfbfc6ee2363807$var$TableWrapper = (props = {})=>{
|
|
47
|
-
return /*#__PURE__*/ (0, $
|
|
52
|
+
return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Box), {
|
|
48
53
|
as: "table",
|
|
49
54
|
...props
|
|
50
55
|
});
|
|
51
56
|
};
|
|
52
|
-
const $acfbfc6ee2363807$var$StyledTable = (0, ($parcel$interopDefault($
|
|
57
|
+
const $acfbfc6ee2363807$var$StyledTable = (0, ($parcel$interopDefault($k7rGe$styledcomponents)))($acfbfc6ee2363807$var$TableWrapper)(()=>(0, $k7rGe$styledcomponents.css)`
|
|
53
58
|
display: table;
|
|
54
59
|
width: 100%;
|
|
55
60
|
|
|
@@ -59,19 +64,19 @@ const $acfbfc6ee2363807$var$StyledTable = (0, ($parcel$interopDefault($dyHF6$sty
|
|
|
59
64
|
`);
|
|
60
65
|
function $acfbfc6ee2363807$export$54ec01a60f47d33d(props) {
|
|
61
66
|
const { children: children , ...rest } = props;
|
|
62
|
-
return /*#__PURE__*/ (0, $
|
|
67
|
+
return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)($acfbfc6ee2363807$var$StyledTable, {
|
|
63
68
|
...rest,
|
|
64
69
|
children: children
|
|
65
70
|
});
|
|
66
71
|
}
|
|
67
72
|
// Row
|
|
68
73
|
const $acfbfc6ee2363807$var$RowWrapper = (props = {})=>{
|
|
69
|
-
return /*#__PURE__*/ (0, $
|
|
74
|
+
return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Card), {
|
|
70
75
|
as: "tr",
|
|
71
76
|
...props
|
|
72
77
|
});
|
|
73
78
|
};
|
|
74
|
-
const $acfbfc6ee2363807$var$StyledRow = (0, ($parcel$interopDefault($
|
|
79
|
+
const $acfbfc6ee2363807$var$StyledRow = (0, ($parcel$interopDefault($k7rGe$styledcomponents)))($acfbfc6ee2363807$var$RowWrapper)(()=>(0, $k7rGe$styledcomponents.css)`
|
|
75
80
|
display: table-row;
|
|
76
81
|
|
|
77
82
|
&:not([hidden]) {
|
|
@@ -80,19 +85,19 @@ const $acfbfc6ee2363807$var$StyledRow = (0, ($parcel$interopDefault($dyHF6$style
|
|
|
80
85
|
`);
|
|
81
86
|
function $acfbfc6ee2363807$export$b05581f4e764e162(props) {
|
|
82
87
|
const { children: children , ...rest } = props;
|
|
83
|
-
return /*#__PURE__*/ (0, $
|
|
88
|
+
return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)($acfbfc6ee2363807$var$StyledRow, {
|
|
84
89
|
...rest,
|
|
85
90
|
children: children
|
|
86
91
|
});
|
|
87
92
|
}
|
|
88
93
|
// Cell
|
|
89
94
|
const $acfbfc6ee2363807$var$CellWrapper = (props = {})=>{
|
|
90
|
-
return /*#__PURE__*/ (0, $
|
|
95
|
+
return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Box), {
|
|
91
96
|
as: "td",
|
|
92
97
|
...props
|
|
93
98
|
});
|
|
94
99
|
};
|
|
95
|
-
const $acfbfc6ee2363807$var$StyledCell = (0, ($parcel$interopDefault($
|
|
100
|
+
const $acfbfc6ee2363807$var$StyledCell = (0, ($parcel$interopDefault($k7rGe$styledcomponents)))($acfbfc6ee2363807$var$CellWrapper)(()=>(0, $k7rGe$styledcomponents.css)`
|
|
96
101
|
display: table-cell;
|
|
97
102
|
|
|
98
103
|
&:not([hidden]) {
|
|
@@ -101,7 +106,7 @@ const $acfbfc6ee2363807$var$StyledCell = (0, ($parcel$interopDefault($dyHF6$styl
|
|
|
101
106
|
`);
|
|
102
107
|
function $acfbfc6ee2363807$export$1e4baea7053fc0e3(props) {
|
|
103
108
|
const { children: children , ...rest } = props;
|
|
104
|
-
return /*#__PURE__*/ (0, $
|
|
109
|
+
return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)($acfbfc6ee2363807$var$StyledCell, {
|
|
105
110
|
...rest,
|
|
106
111
|
children: children
|
|
107
112
|
});
|
|
@@ -125,37 +130,37 @@ const $aaf4d804384afd00$var$schemaExample = {
|
|
|
125
130
|
]
|
|
126
131
|
};
|
|
127
132
|
function $aaf4d804384afd00$export$2e2bcd8739ae039() {
|
|
128
|
-
return /*#__PURE__*/ (0, $
|
|
133
|
+
return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Card), {
|
|
129
134
|
tone: "caution",
|
|
130
135
|
border: true,
|
|
131
136
|
radius: 2,
|
|
132
137
|
padding: 3,
|
|
133
|
-
children: /*#__PURE__*/ (0, $
|
|
138
|
+
children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Stack), {
|
|
134
139
|
space: 4,
|
|
135
140
|
children: [
|
|
136
|
-
/*#__PURE__*/ (0, $
|
|
141
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Text), {
|
|
137
142
|
children: [
|
|
138
143
|
"An array of language objects must be passed into the ",
|
|
139
|
-
/*#__PURE__*/ (0, $
|
|
144
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)("code", {
|
|
140
145
|
children: "internationalizedArray"
|
|
141
146
|
}),
|
|
142
147
|
" ",
|
|
143
148
|
"helper function, each with an ",
|
|
144
|
-
/*#__PURE__*/ (0, $
|
|
149
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)("code", {
|
|
145
150
|
children: "id"
|
|
146
151
|
}),
|
|
147
152
|
" and ",
|
|
148
|
-
/*#__PURE__*/ (0, $
|
|
153
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)("code", {
|
|
149
154
|
children: "title"
|
|
150
155
|
}),
|
|
151
156
|
" field. Example:"
|
|
152
157
|
]
|
|
153
158
|
}),
|
|
154
|
-
/*#__PURE__*/ (0, $
|
|
159
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Card), {
|
|
155
160
|
padding: 2,
|
|
156
161
|
border: true,
|
|
157
162
|
radius: 2,
|
|
158
|
-
children: /*#__PURE__*/ (0, $
|
|
163
|
+
children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Code), {
|
|
159
164
|
size: 1,
|
|
160
165
|
language: "javascript",
|
|
161
166
|
children: JSON.stringify($aaf4d804384afd00$var$schemaExample, null, 2)
|
|
@@ -180,10 +185,10 @@ function $7e790a73eaf2b445$export$2e2bcd8739ae039(props) {
|
|
|
180
185
|
const { members: members , value: value , schemaType: schemaType , onChange: onChange } = props;
|
|
181
186
|
const readOnly = typeof schemaType.readOnly === "boolean" ? schemaType.readOnly : false;
|
|
182
187
|
const { options: options } = schemaType;
|
|
183
|
-
const languages = (0, $
|
|
188
|
+
const languages = (0, $k7rGe$react.useMemo)(()=>options?.languages ?? [], [
|
|
184
189
|
options
|
|
185
190
|
]);
|
|
186
|
-
const handleAddLanguage = (0, $
|
|
191
|
+
const handleAddLanguage = (0, $k7rGe$react.useCallback)((languageId)=>{
|
|
187
192
|
// Create new items
|
|
188
193
|
const newItems = languageId ? [
|
|
189
194
|
{
|
|
@@ -200,22 +205,23 @@ function $7e790a73eaf2b445$export$2e2bcd8739ae039(props) {
|
|
|
200
205
|
// What languages are there beyond that index?
|
|
201
206
|
const remainingLanguages = languages.slice(languageIndex + 1);
|
|
202
207
|
// So what is the index in the current value array of the next language in the language array?
|
|
203
|
-
const nextLanguageIndex = languagesInUse.findIndex((l)
|
|
208
|
+
const nextLanguageIndex = languagesInUse.findIndex((l)=>// eslint-disable-next-line max-nested-callbacks
|
|
209
|
+
remainingLanguages.find((r)=>r.id === l._key));
|
|
204
210
|
// Keep local state up to date incase multiple insertions are being made
|
|
205
211
|
if (nextLanguageIndex < 0) languagesInUse.push(item);
|
|
206
212
|
else languagesInUse.splice(nextLanguageIndex, 0, item);
|
|
207
|
-
return nextLanguageIndex < 0 ? (0, $
|
|
213
|
+
return nextLanguageIndex < 0 ? (0, $k7rGe$sanityform.insert)([
|
|
208
214
|
item
|
|
209
215
|
], "after", [
|
|
210
216
|
nextLanguageIndex
|
|
211
|
-
]) : (0, $
|
|
217
|
+
]) : (0, $k7rGe$sanityform.insert)([
|
|
212
218
|
item
|
|
213
219
|
], "before", [
|
|
214
220
|
nextLanguageIndex
|
|
215
221
|
]);
|
|
216
222
|
});
|
|
217
223
|
onChange([
|
|
218
|
-
(0, $
|
|
224
|
+
(0, $k7rGe$sanityform.setIfMissing)([]),
|
|
219
225
|
...insertions
|
|
220
226
|
]);
|
|
221
227
|
}, [
|
|
@@ -223,8 +229,8 @@ function $7e790a73eaf2b445$export$2e2bcd8739ae039(props) {
|
|
|
223
229
|
onChange,
|
|
224
230
|
value
|
|
225
231
|
]);
|
|
226
|
-
const handleUnsetByKey = (0, $
|
|
227
|
-
onChange((0, $
|
|
232
|
+
const handleUnsetByKey = (0, $k7rGe$react.useCallback)((_key)=>{
|
|
233
|
+
onChange((0, $k7rGe$sanityform.unset)([
|
|
228
234
|
{
|
|
229
235
|
_key: _key
|
|
230
236
|
}
|
|
@@ -233,7 +239,7 @@ function $7e790a73eaf2b445$export$2e2bcd8739ae039(props) {
|
|
|
233
239
|
onChange
|
|
234
240
|
]);
|
|
235
241
|
// TODO: This is lazy, reordering and re-setting the whole array – it could be surgical
|
|
236
|
-
const handleRestoreOrder = (0, $
|
|
242
|
+
const handleRestoreOrder = (0, $k7rGe$react.useCallback)(()=>{
|
|
237
243
|
if (!value?.length) return;
|
|
238
244
|
// Create a new value array in the correct order
|
|
239
245
|
// This would also strip out values that don't have a language as the key
|
|
@@ -242,20 +248,20 @@ function $7e790a73eaf2b445$export$2e2bcd8739ae039(props) {
|
|
|
242
248
|
if (newIndex) acc[newIndex] = v;
|
|
243
249
|
return acc;
|
|
244
250
|
}, []).filter(Boolean);
|
|
245
|
-
onChange((0, $
|
|
251
|
+
onChange((0, $k7rGe$sanityform.set)(updatedValue));
|
|
246
252
|
}, [
|
|
247
253
|
languages,
|
|
248
254
|
onChange,
|
|
249
255
|
value
|
|
250
256
|
]);
|
|
251
|
-
const allKeysAreLanguages = (0, $
|
|
257
|
+
const allKeysAreLanguages = (0, $k7rGe$react.useMemo)(()=>{
|
|
252
258
|
return value?.every((v)=>languages.find((l)=>l?.id === v?._key));
|
|
253
259
|
}, [
|
|
254
260
|
value,
|
|
255
261
|
languages
|
|
256
262
|
]);
|
|
257
263
|
// Check languages are in the correct order
|
|
258
|
-
const languagesOutOfOrder = (0, $
|
|
264
|
+
const languagesOutOfOrder = (0, $k7rGe$react.useMemo)(()=>{
|
|
259
265
|
if (!value?.length) return [];
|
|
260
266
|
const languagesInUse = languages.filter((l)=>value.find((v)=>v._key === l.id));
|
|
261
267
|
return value.map((v, vIndex)=>vIndex === languagesInUse.findIndex((l)=>l.id === v._key) ? null : v).filter(Boolean);
|
|
@@ -263,60 +269,60 @@ function $7e790a73eaf2b445$export$2e2bcd8739ae039(props) {
|
|
|
263
269
|
value,
|
|
264
270
|
languages
|
|
265
271
|
]);
|
|
266
|
-
const languagesAreValid = (0, $
|
|
272
|
+
const languagesAreValid = (0, $k7rGe$react.useMemo)(()=>!languages?.length || languages?.length && languages.every((item)=>item.id && item.title), [
|
|
267
273
|
languages
|
|
268
274
|
]);
|
|
269
|
-
if (!languagesAreValid) return /*#__PURE__*/ (0, $
|
|
270
|
-
return /*#__PURE__*/ (0, $
|
|
275
|
+
if (!languagesAreValid) return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $aaf4d804384afd00$export$2e2bcd8739ae039), {});
|
|
276
|
+
return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Stack), {
|
|
271
277
|
space: 2,
|
|
272
278
|
children: [
|
|
273
|
-
members?.length > 0 ? /*#__PURE__*/ (0, $
|
|
274
|
-
children: /*#__PURE__*/ (0, $
|
|
275
|
-
children: members.map((member)=>/*#__PURE__*/ (0, $
|
|
279
|
+
members?.length > 0 ? /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $acfbfc6ee2363807$export$54ec01a60f47d33d), {
|
|
280
|
+
children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)("tbody", {
|
|
281
|
+
children: members.map((member)=>/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $acfbfc6ee2363807$export$b05581f4e764e162), {
|
|
276
282
|
tone: member?.item?.validation?.length > 0 ? (0, $6a9b28384eb7074d$export$16423358d6ebe294)(member.item.validation) : undefined,
|
|
277
283
|
children: [
|
|
278
|
-
/*#__PURE__*/ (0, $
|
|
284
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $acfbfc6ee2363807$export$1e4baea7053fc0e3), {
|
|
279
285
|
style: {
|
|
280
286
|
verticalAlign: "bottom"
|
|
281
287
|
},
|
|
282
|
-
children: /*#__PURE__*/ (0, $
|
|
288
|
+
children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Box), {
|
|
283
289
|
paddingY: 3,
|
|
284
290
|
paddingRight: 2,
|
|
285
|
-
children: /*#__PURE__*/ (0, $
|
|
291
|
+
children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Label), {
|
|
286
292
|
muted: true,
|
|
287
293
|
size: 1,
|
|
288
294
|
children: member.key
|
|
289
295
|
})
|
|
290
296
|
})
|
|
291
297
|
}),
|
|
292
|
-
/*#__PURE__*/ (0, $
|
|
298
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $acfbfc6ee2363807$export$1e4baea7053fc0e3), {
|
|
293
299
|
paddingRight: 2,
|
|
294
300
|
style: {
|
|
295
301
|
width: `100%`
|
|
296
302
|
},
|
|
297
|
-
children: /*#__PURE__*/ (0, $
|
|
303
|
+
children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityform.MemberItem), {
|
|
298
304
|
...props,
|
|
299
305
|
member: member
|
|
300
306
|
})
|
|
301
307
|
}),
|
|
302
|
-
/*#__PURE__*/ (0, $
|
|
308
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $acfbfc6ee2363807$export$1e4baea7053fc0e3), {
|
|
303
309
|
style: {
|
|
304
310
|
verticalAlign: "bottom"
|
|
305
311
|
},
|
|
306
|
-
children: /*#__PURE__*/ (0, $
|
|
312
|
+
children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Flex), {
|
|
307
313
|
align: "center",
|
|
308
314
|
justify: "flex-end",
|
|
309
315
|
gap: 3,
|
|
310
316
|
children: [
|
|
311
|
-
member
|
|
317
|
+
member?.item?.validation?.length > 0 ? /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Box), {
|
|
312
318
|
paddingLeft: 2,
|
|
313
|
-
children: /*#__PURE__*/ (0, $
|
|
319
|
+
children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityform.FormFieldValidationStatus), {
|
|
314
320
|
validation: member.item.validation
|
|
315
321
|
})
|
|
316
322
|
}) : null,
|
|
317
|
-
/*#__PURE__*/ (0, $
|
|
323
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
|
|
318
324
|
mode: "ghost",
|
|
319
|
-
icon: (0, $
|
|
325
|
+
icon: (0, $k7rGe$sanityicons.RemoveIcon),
|
|
320
326
|
tone: "critical",
|
|
321
327
|
disabled: typeof readOnly === "boolean" ? readOnly : false,
|
|
322
328
|
onClick: ()=>handleUnsetByKey(member.key)
|
|
@@ -328,33 +334,33 @@ function $7e790a73eaf2b445$export$2e2bcd8739ae039(props) {
|
|
|
328
334
|
}, member.key))
|
|
329
335
|
})
|
|
330
336
|
}) : null,
|
|
331
|
-
languagesOutOfOrder.length > 0 && allKeysAreLanguages ? /*#__PURE__*/ (0, $
|
|
337
|
+
languagesOutOfOrder.length > 0 && allKeysAreLanguages ? /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
|
|
332
338
|
tone: "caution",
|
|
333
|
-
icon: (0, $
|
|
339
|
+
icon: (0, $k7rGe$sanityicons.RestoreIcon),
|
|
334
340
|
onClick: ()=>handleRestoreOrder(),
|
|
335
341
|
text: "Restore order of languages"
|
|
336
342
|
}) : null,
|
|
337
|
-
|
|
343
|
+
languages?.length > 0 ? /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Stack), {
|
|
338
344
|
space: 2,
|
|
339
345
|
children: [
|
|
340
|
-
/*#__PURE__*/ (0, $
|
|
346
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Grid), {
|
|
341
347
|
columns: Math.min(languages.length, 5),
|
|
342
348
|
gap: 2,
|
|
343
|
-
children: languages.map((language)=>/*#__PURE__*/ (0, $
|
|
349
|
+
children: languages.map((language)=>/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
|
|
344
350
|
tone: "primary",
|
|
345
351
|
mode: "ghost",
|
|
346
352
|
fontSize: 1,
|
|
347
353
|
disabled: readOnly || Boolean(value?.find((item)=>item._key === language.id)),
|
|
348
354
|
text: language.id.toUpperCase(),
|
|
349
|
-
icon: (0, $
|
|
355
|
+
icon: (0, $k7rGe$sanityicons.AddIcon),
|
|
350
356
|
onClick: ()=>handleAddLanguage(language.id)
|
|
351
357
|
}, language.id))
|
|
352
358
|
}),
|
|
353
|
-
/*#__PURE__*/ (0, $
|
|
359
|
+
/*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
|
|
354
360
|
tone: "primary",
|
|
355
361
|
mode: "ghost",
|
|
356
362
|
disabled: readOnly || value && value?.length >= languages?.length,
|
|
357
|
-
icon: (0, $
|
|
363
|
+
icon: (0, $k7rGe$sanityicons.AddIcon),
|
|
358
364
|
text: value?.length ? `Add missing languages` : `Add all languages`,
|
|
359
365
|
onClick: ()=>handleAddLanguage()
|
|
360
366
|
})
|
|
@@ -365,22 +371,14 @@ function $7e790a73eaf2b445$export$2e2bcd8739ae039(props) {
|
|
|
365
371
|
}
|
|
366
372
|
|
|
367
373
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
type
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
config?.validation
|
|
377
|
-
];
|
|
378
|
-
return (0, $dyHF6$sanity.defineField)({
|
|
379
|
-
name: name,
|
|
380
|
-
title: config?.title ?? undefined,
|
|
381
|
-
group: config?.group ?? undefined,
|
|
382
|
-
hidden: config?.hidden ?? undefined,
|
|
383
|
-
readOnly: config?.readOnly ?? undefined,
|
|
374
|
+
var $0437df2e2e149362$export$2e2bcd8739ae039 = (config)=>{
|
|
375
|
+
const { languages: languages , type: type } = config;
|
|
376
|
+
const typeName = typeof type === `string` ? type : type.name;
|
|
377
|
+
const arrayName = (0, $a0eca5cb1c058e2c$export$ab1ce2a474f41f52)(typeName);
|
|
378
|
+
const objectName = (0, $a0eca5cb1c058e2c$export$ab1ce2a474f41f52)(typeName, true);
|
|
379
|
+
return (0, $k7rGe$sanity.defineField)({
|
|
380
|
+
name: arrayName,
|
|
381
|
+
title: "Internationalized array",
|
|
384
382
|
type: "array",
|
|
385
383
|
components: {
|
|
386
384
|
input: (0, $7e790a73eaf2b445$export$2e2bcd8739ae039)
|
|
@@ -389,33 +387,12 @@ function $7594066088192472$export$bec7eb13daf35f0e(config = $7594066088192472$va
|
|
|
389
387
|
languages: languages
|
|
390
388
|
},
|
|
391
389
|
of: [
|
|
392
|
-
{
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
name: "value",
|
|
397
|
-
type: type
|
|
398
|
-
},
|
|
399
|
-
],
|
|
400
|
-
preview: {
|
|
401
|
-
select: {
|
|
402
|
-
title: "value",
|
|
403
|
-
key: "_key"
|
|
404
|
-
},
|
|
405
|
-
prepare (select) {
|
|
406
|
-
const { title: title , key: key } = select;
|
|
407
|
-
return {
|
|
408
|
-
title: title,
|
|
409
|
-
subtitle: key.toUpperCase()
|
|
410
|
-
};
|
|
411
|
-
}
|
|
412
|
-
}
|
|
413
|
-
},
|
|
390
|
+
(0, $k7rGe$sanity.defineField)({
|
|
391
|
+
name: objectName,
|
|
392
|
+
type: objectName
|
|
393
|
+
})
|
|
414
394
|
],
|
|
415
|
-
|
|
416
|
-
validation: (rule)=>{
|
|
417
|
-
const rules = [];
|
|
418
|
-
rules.push(rule.custom((value, context)=>{
|
|
395
|
+
validation: (rule)=>rule.max(languages?.length).custom((value, context)=>{
|
|
419
396
|
const { languages: contextLanguages } = context?.type?.options ?? {};
|
|
420
397
|
const nonLanguageKeys = value?.length ? value.filter((item)=>!contextLanguages.find((language)=>item._key === language.id)) : [];
|
|
421
398
|
if (nonLanguageKeys.length) return {
|
|
@@ -451,18 +428,60 @@ function $7594066088192472$export$bec7eb13daf35f0e(config = $7594066088192472$va
|
|
|
451
428
|
])
|
|
452
429
|
};
|
|
453
430
|
return true;
|
|
454
|
-
})
|
|
455
|
-
if (languages?.length) rules.push(rule.max(languages.length));
|
|
456
|
-
return [
|
|
457
|
-
...rules,
|
|
458
|
-
...configValidation
|
|
459
|
-
].filter(Boolean);
|
|
460
|
-
}
|
|
431
|
+
})
|
|
461
432
|
});
|
|
462
|
-
}
|
|
433
|
+
};
|
|
434
|
+
|
|
435
|
+
|
|
436
|
+
|
|
437
|
+
|
|
438
|
+
var $f727fb16d5d00f8f$export$2e2bcd8739ae039 = (config)=>{
|
|
439
|
+
const { type: type } = config;
|
|
440
|
+
const typeName = typeof type === `string` ? type : type.name;
|
|
441
|
+
const objectName = (0, $a0eca5cb1c058e2c$export$ab1ce2a474f41f52)(typeName, true);
|
|
442
|
+
return (0, $k7rGe$sanity.defineField)({
|
|
443
|
+
name: objectName,
|
|
444
|
+
title: `Internationalized array ${type}`,
|
|
445
|
+
type: "object",
|
|
446
|
+
fields: [
|
|
447
|
+
typeof type === `string` ? (0, $k7rGe$sanity.defineField)({
|
|
448
|
+
name: "value",
|
|
449
|
+
type: type
|
|
450
|
+
}) : {
|
|
451
|
+
...type,
|
|
452
|
+
name: "value"
|
|
453
|
+
},
|
|
454
|
+
]
|
|
455
|
+
});
|
|
456
|
+
};
|
|
457
|
+
|
|
458
|
+
|
|
459
|
+
const $45e3093e7de8dca2$var$CONFIG_DEFAULT = {
|
|
460
|
+
languages: [],
|
|
461
|
+
fieldTypes: []
|
|
462
|
+
};
|
|
463
|
+
const $45e3093e7de8dca2$export$bec7eb13daf35f0e = (0, $k7rGe$sanity.createPlugin)((config = $45e3093e7de8dca2$var$CONFIG_DEFAULT)=>{
|
|
464
|
+
const { languages: languages , fieldTypes: fieldTypes } = {
|
|
465
|
+
...$45e3093e7de8dca2$var$CONFIG_DEFAULT,
|
|
466
|
+
...config
|
|
467
|
+
};
|
|
468
|
+
return {
|
|
469
|
+
name: "sanity-plugin-internationalized-array",
|
|
470
|
+
schema: {
|
|
471
|
+
types: [
|
|
472
|
+
...fieldTypes.map((type)=>(0, $0437df2e2e149362$export$2e2bcd8739ae039)({
|
|
473
|
+
type: type,
|
|
474
|
+
languages: languages
|
|
475
|
+
})),
|
|
476
|
+
...fieldTypes.map((type)=>(0, $f727fb16d5d00f8f$export$2e2bcd8739ae039)({
|
|
477
|
+
type: type
|
|
478
|
+
})),
|
|
479
|
+
]
|
|
480
|
+
}
|
|
481
|
+
};
|
|
482
|
+
});
|
|
463
483
|
|
|
464
484
|
|
|
465
|
-
$parcel$exportWildcard(module.exports, $7594066088192472$exports);
|
|
466
485
|
|
|
467
486
|
|
|
468
487
|
//# sourceMappingURL=index.js.map
|