@contentful/field-editor-radio 1.1.11 → 1.2.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/CHANGELOG.md +10 -0
- package/dist/field-editor-radio.cjs.development.js +24 -22
- package/dist/field-editor-radio.cjs.development.js.map +1 -1
- package/dist/field-editor-radio.cjs.production.min.js +1 -1
- package/dist/field-editor-radio.cjs.production.min.js.map +1 -1
- package/dist/field-editor-radio.esm.js +24 -22
- package/dist/field-editor-radio.esm.js.map +1 -1
- package/package.json +5 -15
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [1.2.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-radio@1.1.12...@contentful/field-editor-radio@1.2.0) (2023-04-19)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- upgrade cypress [TOL-1036] ([#1391](https://github.com/contentful/field-editors/issues/1391)) ([9c1aec9](https://github.com/contentful/field-editors/commit/9c1aec98aabbe464cdc3f1236c3bb1cc29b8208d))
|
|
11
|
+
|
|
12
|
+
## [1.1.12](https://github.com/contentful/field-editors/compare/@contentful/field-editor-radio@1.1.11...@contentful/field-editor-radio@1.1.12) (2023-03-14)
|
|
13
|
+
|
|
14
|
+
**Note:** Version bump only for package @contentful/field-editor-radio
|
|
15
|
+
|
|
6
16
|
## [1.1.11](https://github.com/contentful/field-editors/compare/@contentful/field-editor-radio@1.1.10...@contentful/field-editor-radio@1.1.11) (2023-03-10)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package @contentful/field-editor-radio
|
|
@@ -5,56 +5,58 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
6
6
|
|
|
7
7
|
var React = require('react');
|
|
8
|
-
var
|
|
9
|
-
var fieldEditorShared = require('@contentful/field-editor-shared');
|
|
8
|
+
var f36Components = require('@contentful/f36-components');
|
|
10
9
|
var fieldEditorDropdown = require('@contentful/field-editor-dropdown');
|
|
10
|
+
var fieldEditorShared = require('@contentful/field-editor-shared');
|
|
11
|
+
var emotion = require('emotion');
|
|
11
12
|
var tokens = _interopDefault(require('@contentful/f36-tokens'));
|
|
12
|
-
var f36Components = require('@contentful/f36-components');
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
const form = /*#__PURE__*/emotion.css({
|
|
15
15
|
marginTop: tokens.spacingS
|
|
16
16
|
});
|
|
17
|
-
|
|
17
|
+
const rightToLeft = /*#__PURE__*/emotion.css({
|
|
18
18
|
direction: 'rtl'
|
|
19
19
|
});
|
|
20
|
-
|
|
20
|
+
const clearBtn = /*#__PURE__*/emotion.css({
|
|
21
21
|
marginLeft: tokens.spacingL
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
function RadioEditor(props) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
const {
|
|
26
|
+
field,
|
|
27
|
+
locales
|
|
28
|
+
} = props;
|
|
29
|
+
const options = fieldEditorDropdown.getOptions(field);
|
|
30
|
+
const misconfigured = options.length === 0;
|
|
29
31
|
|
|
30
32
|
if (misconfigured) {
|
|
31
33
|
return React.createElement(fieldEditorShared.PredefinedValuesError, null);
|
|
32
34
|
}
|
|
33
35
|
|
|
34
|
-
|
|
36
|
+
const direction = locales.direction[field.locale] || 'ltr';
|
|
35
37
|
return React.createElement(fieldEditorShared.FieldConnector, {
|
|
36
38
|
throttle: 0,
|
|
37
39
|
field: field,
|
|
38
40
|
isInitiallyDisabled: props.isInitiallyDisabled
|
|
39
|
-
},
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
}, ({
|
|
42
|
+
disabled,
|
|
43
|
+
value,
|
|
44
|
+
setValue
|
|
45
|
+
}) => {
|
|
46
|
+
const setOption = value => {
|
|
45
47
|
setValue(fieldEditorDropdown.parseValue(value, field.type));
|
|
46
48
|
};
|
|
47
49
|
|
|
48
|
-
|
|
50
|
+
const clearOption = () => {
|
|
49
51
|
setValue(undefined);
|
|
50
52
|
};
|
|
51
53
|
|
|
52
54
|
return React.createElement(f36Components.Form, {
|
|
53
55
|
testId: "radio-editor",
|
|
54
56
|
className: emotion.cx(form, direction === 'rtl' ? rightToLeft : '')
|
|
55
|
-
}, options.map(
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
}, options.map((item, index) => {
|
|
58
|
+
const id = ['entity', field.id, field.locale, index, item.id].join('.');
|
|
59
|
+
const checked = value === item.value;
|
|
58
60
|
return React.createElement(f36Components.Flex, {
|
|
59
61
|
key: id,
|
|
60
62
|
alignItems: "center",
|
|
@@ -64,7 +66,7 @@ function RadioEditor(props) {
|
|
|
64
66
|
isDisabled: disabled,
|
|
65
67
|
value: item.value === undefined ? '' : String(item.value),
|
|
66
68
|
isChecked: checked,
|
|
67
|
-
onChange:
|
|
69
|
+
onChange: e => {
|
|
68
70
|
if (e.target.checked) {
|
|
69
71
|
setOption(e.target.value);
|
|
70
72
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-radio.cjs.development.js","sources":["../src/styles.ts","../src/RadioEditor.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"field-editor-radio.cjs.development.js","sources":["../src/styles.ts","../src/RadioEditor.tsx"],"sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport const form = css({\n marginTop: tokens.spacingS,\n});\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n\nexport const clearBtn = css({ marginLeft: tokens.spacingL });\n","import * as React from 'react';\n\nimport { TextLink, Flex, Radio, Form } from '@contentful/f36-components';\nimport { getOptions, parseValue } from '@contentful/field-editor-dropdown';\nimport {\n FieldAPI,\n FieldConnector,\n PredefinedValuesError,\n LocalesAPI,\n} from '@contentful/field-editor-shared';\nimport { cx } from 'emotion';\n\nimport * as styles from './styles';\n\n\nexport interface RadioEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\nexport function RadioEditor(props: RadioEditorProps) {\n const { field, locales } = props;\n\n const options = getOptions(field);\n const misconfigured = options.length === 0;\n\n if (misconfigured) {\n return <PredefinedValuesError />;\n }\n\n const direction = locales.direction[field.locale] || 'ltr';\n\n return (\n <FieldConnector<string | number>\n throttle={0}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ disabled, value, setValue }) => {\n const setOption = (value: string) => {\n setValue(parseValue(value, field.type));\n };\n const clearOption = () => {\n setValue(undefined);\n };\n\n return (\n <Form\n testId=\"radio-editor\"\n className={cx(styles.form, direction === 'rtl' ? styles.rightToLeft : '')}>\n {options.map((item, index) => {\n const id = ['entity', field.id, field.locale, index, item.id].join('.');\n const checked = value === item.value;\n return (\n <Flex key={id} alignItems=\"center\" marginBottom=\"spacingS\">\n <Radio\n id={id}\n isDisabled={disabled}\n value={item.value === undefined ? '' : String(item.value)}\n isChecked={checked}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.checked) {\n setOption(e.target.value);\n }\n }}>\n {item.label}\n </Radio>\n {checked && !disabled && (\n <TextLink as=\"button\" className={styles.clearBtn} onClick={clearOption}>\n Clear\n </TextLink>\n )}\n </Flex>\n );\n })}\n </Form>\n );\n }}\n </FieldConnector>\n );\n}\n\nRadioEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["form","css","marginTop","tokens","spacingS","rightToLeft","direction","clearBtn","marginLeft","spacingL","RadioEditor","props","field","locales","options","getOptions","misconfigured","length","React","PredefinedValuesError","locale","FieldConnector","throttle","isInitiallyDisabled","disabled","value","setValue","setOption","parseValue","type","clearOption","undefined","Form","testId","className","cx","styles","map","item","index","id","join","checked","Flex","key","alignItems","marginBottom","Radio","isDisabled","String","isChecked","onChange","e","target","label","TextLink","as","onClick","defaultProps"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),i=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),i=require("@contentful/f36-components"),r=require("@contentful/field-editor-dropdown"),l=require("@contentful/field-editor-shared"),n=require("emotion"),a=(e=require("@contentful/f36-tokens"))&&"object"==typeof e&&"default"in e?e.default:e;const o=n.css({marginTop:a.spacingS}),s=n.css({direction:"rtl"}),c=n.css({marginLeft:a.spacingL});function d(e){const{field:a,locales:d}=e,u=r.getOptions(a);if(0===u.length)return t.createElement(l.PredefinedValuesError,null);const f=d.direction[a.locale]||"ltr";return t.createElement(l.FieldConnector,{throttle:0,field:a,isInitiallyDisabled:e.isInitiallyDisabled},({disabled:e,value:l,setValue:d})=>{const m=()=>{d(void 0)};return t.createElement(i.Form,{testId:"radio-editor",className:n.cx(o,"rtl"===f?s:"")},u.map((n,o)=>{const s=["entity",a.id,a.locale,o,n.id].join("."),u=l===n.value;return t.createElement(i.Flex,{key:s,alignItems:"center",marginBottom:"spacingS"},t.createElement(i.Radio,{id:s,isDisabled:e,value:void 0===n.value?"":String(n.value),isChecked:u,onChange:e=>{e.target.checked&&(e=>{d(r.parseValue(e,a.type))})(e.target.value)}},n.label),u&&!e&&t.createElement(i.TextLink,{as:"button",className:c,onClick:m},"Clear"))}))})}d.defaultProps={isInitiallyDisabled:!0},exports.RadioEditor=d;
|
|
2
2
|
//# sourceMappingURL=field-editor-radio.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-radio.cjs.production.min.js","sources":["../src/styles.ts","../src/RadioEditor.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"field-editor-radio.cjs.production.min.js","sources":["../src/styles.ts","../src/RadioEditor.tsx"],"sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport const form = css({\n marginTop: tokens.spacingS,\n});\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n\nexport const clearBtn = css({ marginLeft: tokens.spacingL });\n","import * as React from 'react';\n\nimport { TextLink, Flex, Radio, Form } from '@contentful/f36-components';\nimport { getOptions, parseValue } from '@contentful/field-editor-dropdown';\nimport {\n FieldAPI,\n FieldConnector,\n PredefinedValuesError,\n LocalesAPI,\n} from '@contentful/field-editor-shared';\nimport { cx } from 'emotion';\n\nimport * as styles from './styles';\n\n\nexport interface RadioEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\nexport function RadioEditor(props: RadioEditorProps) {\n const { field, locales } = props;\n\n const options = getOptions(field);\n const misconfigured = options.length === 0;\n\n if (misconfigured) {\n return <PredefinedValuesError />;\n }\n\n const direction = locales.direction[field.locale] || 'ltr';\n\n return (\n <FieldConnector<string | number>\n throttle={0}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ disabled, value, setValue }) => {\n const setOption = (value: string) => {\n setValue(parseValue(value, field.type));\n };\n const clearOption = () => {\n setValue(undefined);\n };\n\n return (\n <Form\n testId=\"radio-editor\"\n className={cx(styles.form, direction === 'rtl' ? styles.rightToLeft : '')}>\n {options.map((item, index) => {\n const id = ['entity', field.id, field.locale, index, item.id].join('.');\n const checked = value === item.value;\n return (\n <Flex key={id} alignItems=\"center\" marginBottom=\"spacingS\">\n <Radio\n id={id}\n isDisabled={disabled}\n value={item.value === undefined ? '' : String(item.value)}\n isChecked={checked}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.checked) {\n setOption(e.target.value);\n }\n }}>\n {item.label}\n </Radio>\n {checked && !disabled && (\n <TextLink as=\"button\" className={styles.clearBtn} onClick={clearOption}>\n Clear\n </TextLink>\n )}\n </Flex>\n );\n })}\n </Form>\n );\n }}\n </FieldConnector>\n );\n}\n\nRadioEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["form","css","marginTop","tokens","spacingS","rightToLeft","direction","clearBtn","marginLeft","spacingL","RadioEditor","props","field","locales","options","getOptions","length","React","PredefinedValuesError","locale","FieldConnector","throttle","isInitiallyDisabled","disabled","value","setValue","clearOption","undefined","Form","testId","className","cx","styles","map","item","index","id","join","checked","Flex","key","alignItems","marginBottom","Radio","isDisabled","String","isChecked","onChange","e","target","parseValue","type","setOption","label","TextLink","as","onClick","defaultProps"],"mappings":"6UAGO,MAAMA,EAAOC,MAAI,CACtBC,UAAWC,EAAOC,WAGPC,EAAcJ,MAAI,CAC7BK,UAAW,QAGAC,EAAWN,MAAI,CAAEO,WAAYL,EAAOM,oBCqBjCC,EAAYC,SACpBC,MAAEA,EAAFC,QAASA,GAAYF,EAErBG,EAAUC,aAAWH,MACc,IAAnBE,EAAQE,cAGrBC,gBAACC,oCAGJZ,EAAYO,EAAQP,UAAUM,EAAMO,SAAW,aAGnDF,gBAACG,kBACCC,SAAU,EACVT,MAAOA,EACPU,oBAAqBX,EAAMW,qBAC1B,EAAGC,SAAAA,EAAUC,MAAAA,EAAOC,SAAAA,YAIbC,EAAc,KAClBD,OAASE,WAITV,gBAACW,QACCC,OAAO,eACPC,UAAWC,KAAGC,EAA2B,QAAd1B,EAAsB0B,EAAqB,KACrElB,EAAQmB,IAAI,CAACC,EAAMC,WACZC,EAAK,CAAC,SAAUxB,EAAMwB,GAAIxB,EAAMO,OAAQgB,EAAOD,EAAKE,IAAIC,KAAK,KAC7DC,EAAUd,IAAUU,EAAKV,aAE7BP,gBAACsB,QAAKC,IAAKJ,EAAIK,WAAW,SAASC,aAAa,YAC9CzB,gBAAC0B,SACCP,GAAIA,EACJQ,WAAYrB,EACZC,WAAsBG,IAAfO,EAAKV,MAAsB,GAAKqB,OAAOX,EAAKV,OACnDsB,UAAWR,EACXS,SAAWC,IACLA,EAAEC,OAAOX,SAtBRd,CAAAA,IACjBC,EAASyB,aAAW1B,EAAOZ,EAAMuC,QAsBnBC,CAAUJ,EAAEC,OAAOzB,SAGtBU,EAAKmB,OAEPf,IAAYf,GACXN,gBAACqC,YAASC,GAAG,SAASzB,UAAWE,EAAiBwB,QAAS9B,kBAc/EhB,EAAY+C,aAAe,CACzBnC,qBAAqB"}
|
|
@@ -1,54 +1,56 @@
|
|
|
1
1
|
import { createElement } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { PredefinedValuesError, FieldConnector } from '@contentful/field-editor-shared';
|
|
2
|
+
import { Form, Flex, Radio, TextLink } from '@contentful/f36-components';
|
|
4
3
|
import { getOptions, parseValue } from '@contentful/field-editor-dropdown';
|
|
4
|
+
import { PredefinedValuesError, FieldConnector } from '@contentful/field-editor-shared';
|
|
5
|
+
import { css, cx } from 'emotion';
|
|
5
6
|
import tokens from '@contentful/f36-tokens';
|
|
6
|
-
import { Form, Flex, Radio, TextLink } from '@contentful/f36-components';
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
const form = /*#__PURE__*/css({
|
|
9
9
|
marginTop: tokens.spacingS
|
|
10
10
|
});
|
|
11
|
-
|
|
11
|
+
const rightToLeft = /*#__PURE__*/css({
|
|
12
12
|
direction: 'rtl'
|
|
13
13
|
});
|
|
14
|
-
|
|
14
|
+
const clearBtn = /*#__PURE__*/css({
|
|
15
15
|
marginLeft: tokens.spacingL
|
|
16
16
|
});
|
|
17
17
|
|
|
18
18
|
function RadioEditor(props) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
const {
|
|
20
|
+
field,
|
|
21
|
+
locales
|
|
22
|
+
} = props;
|
|
23
|
+
const options = getOptions(field);
|
|
24
|
+
const misconfigured = options.length === 0;
|
|
23
25
|
|
|
24
26
|
if (misconfigured) {
|
|
25
27
|
return createElement(PredefinedValuesError, null);
|
|
26
28
|
}
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
const direction = locales.direction[field.locale] || 'ltr';
|
|
29
31
|
return createElement(FieldConnector, {
|
|
30
32
|
throttle: 0,
|
|
31
33
|
field: field,
|
|
32
34
|
isInitiallyDisabled: props.isInitiallyDisabled
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
}, ({
|
|
36
|
+
disabled,
|
|
37
|
+
value,
|
|
38
|
+
setValue
|
|
39
|
+
}) => {
|
|
40
|
+
const setOption = value => {
|
|
39
41
|
setValue(parseValue(value, field.type));
|
|
40
42
|
};
|
|
41
43
|
|
|
42
|
-
|
|
44
|
+
const clearOption = () => {
|
|
43
45
|
setValue(undefined);
|
|
44
46
|
};
|
|
45
47
|
|
|
46
48
|
return createElement(Form, {
|
|
47
49
|
testId: "radio-editor",
|
|
48
50
|
className: cx(form, direction === 'rtl' ? rightToLeft : '')
|
|
49
|
-
}, options.map(
|
|
50
|
-
|
|
51
|
-
|
|
51
|
+
}, options.map((item, index) => {
|
|
52
|
+
const id = ['entity', field.id, field.locale, index, item.id].join('.');
|
|
53
|
+
const checked = value === item.value;
|
|
52
54
|
return createElement(Flex, {
|
|
53
55
|
key: id,
|
|
54
56
|
alignItems: "center",
|
|
@@ -58,7 +60,7 @@ function RadioEditor(props) {
|
|
|
58
60
|
isDisabled: disabled,
|
|
59
61
|
value: item.value === undefined ? '' : String(item.value),
|
|
60
62
|
isChecked: checked,
|
|
61
|
-
onChange:
|
|
63
|
+
onChange: e => {
|
|
62
64
|
if (e.target.checked) {
|
|
63
65
|
setOption(e.target.value);
|
|
64
66
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-editor-radio.esm.js","sources":["../src/styles.ts","../src/RadioEditor.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"field-editor-radio.esm.js","sources":["../src/styles.ts","../src/RadioEditor.tsx"],"sourcesContent":["import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport const form = css({\n marginTop: tokens.spacingS,\n});\n\nexport const rightToLeft = css({\n direction: 'rtl',\n});\n\nexport const clearBtn = css({ marginLeft: tokens.spacingL });\n","import * as React from 'react';\n\nimport { TextLink, Flex, Radio, Form } from '@contentful/f36-components';\nimport { getOptions, parseValue } from '@contentful/field-editor-dropdown';\nimport {\n FieldAPI,\n FieldConnector,\n PredefinedValuesError,\n LocalesAPI,\n} from '@contentful/field-editor-shared';\nimport { cx } from 'emotion';\n\nimport * as styles from './styles';\n\n\nexport interface RadioEditorProps {\n /**\n * is the field disabled initially\n */\n isInitiallyDisabled: boolean;\n\n /**\n * sdk.field\n */\n field: FieldAPI;\n\n /**\n * sdk.locales\n */\n locales: LocalesAPI;\n}\n\nexport function RadioEditor(props: RadioEditorProps) {\n const { field, locales } = props;\n\n const options = getOptions(field);\n const misconfigured = options.length === 0;\n\n if (misconfigured) {\n return <PredefinedValuesError />;\n }\n\n const direction = locales.direction[field.locale] || 'ltr';\n\n return (\n <FieldConnector<string | number>\n throttle={0}\n field={field}\n isInitiallyDisabled={props.isInitiallyDisabled}>\n {({ disabled, value, setValue }) => {\n const setOption = (value: string) => {\n setValue(parseValue(value, field.type));\n };\n const clearOption = () => {\n setValue(undefined);\n };\n\n return (\n <Form\n testId=\"radio-editor\"\n className={cx(styles.form, direction === 'rtl' ? styles.rightToLeft : '')}>\n {options.map((item, index) => {\n const id = ['entity', field.id, field.locale, index, item.id].join('.');\n const checked = value === item.value;\n return (\n <Flex key={id} alignItems=\"center\" marginBottom=\"spacingS\">\n <Radio\n id={id}\n isDisabled={disabled}\n value={item.value === undefined ? '' : String(item.value)}\n isChecked={checked}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.checked) {\n setOption(e.target.value);\n }\n }}>\n {item.label}\n </Radio>\n {checked && !disabled && (\n <TextLink as=\"button\" className={styles.clearBtn} onClick={clearOption}>\n Clear\n </TextLink>\n )}\n </Flex>\n );\n })}\n </Form>\n );\n }}\n </FieldConnector>\n );\n}\n\nRadioEditor.defaultProps = {\n isInitiallyDisabled: true,\n};\n"],"names":["form","css","marginTop","tokens","spacingS","rightToLeft","direction","clearBtn","marginLeft","spacingL","RadioEditor","props","field","locales","options","getOptions","misconfigured","length","React","PredefinedValuesError","locale","FieldConnector","throttle","isInitiallyDisabled","disabled","value","setValue","setOption","parseValue","type","clearOption","undefined","Form","testId","className","cx","styles","map","item","index","id","join","checked","Flex","key","alignItems","marginBottom","Radio","isDisabled","String","isChecked","onChange","e","target","label","TextLink","as","onClick","defaultProps"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-radio",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/field-editor-radio.esm.js",
|
|
6
6
|
"typings": "dist/index.d.ts",
|
|
@@ -23,29 +23,19 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@contentful/f36-components": "^4.0.27",
|
|
25
25
|
"@contentful/f36-tokens": "^4.0.0",
|
|
26
|
-
"@contentful/field-editor-dropdown": "^1.
|
|
27
|
-
"@contentful/field-editor-shared": "^1.
|
|
26
|
+
"@contentful/field-editor-dropdown": "^1.2.0",
|
|
27
|
+
"@contentful/field-editor-shared": "^1.2.0",
|
|
28
28
|
"emotion": "^10.0.17",
|
|
29
29
|
"lodash": "^4.17.15",
|
|
30
30
|
"lodash-es": "^4.17.15",
|
|
31
31
|
"nanoid": "^3.1.3"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@contentful/field-editor-test-utils": "^1.
|
|
34
|
+
"@contentful/field-editor-test-utils": "^1.3.0",
|
|
35
35
|
"contentful-management": "^10.0.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": ">=16.8.0"
|
|
39
39
|
},
|
|
40
|
-
"
|
|
41
|
-
"testMatch": [
|
|
42
|
-
"**/?(*.)+(spec|test).[jt]s?(x)"
|
|
43
|
-
],
|
|
44
|
-
"globals": {
|
|
45
|
-
"ts-jest": {
|
|
46
|
-
"diagnostics": false
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
"gitHead": "1e4a7d92c48f0e1949f2b48b3c9974da1602fd5c"
|
|
40
|
+
"gitHead": "de7e74e3485dd69c240cfe9c545e6e50e41fb295"
|
|
51
41
|
}
|