@chayns-components/translation 5.0.0-beta.1270 → 5.0.0-beta.1272
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.
|
@@ -27,15 +27,33 @@ const AdaptiveTranslation = ({
|
|
|
27
27
|
to,
|
|
28
28
|
textType
|
|
29
29
|
});
|
|
30
|
+
|
|
31
|
+
// eslint-disable-next-line no-nested-ternary
|
|
32
|
+
const opacity = isLoading ? 0 : isFetching ? 0.5 : 1;
|
|
30
33
|
return /*#__PURE__*/_react.default.createElement(TagName, {
|
|
31
|
-
className: (0, _clsx.default)('notranslate', className),
|
|
34
|
+
className: (0, _clsx.default)('notranslate adaptive-translation', className),
|
|
32
35
|
style: {
|
|
33
|
-
// eslint-disable-next-line no-nested-ternary
|
|
34
|
-
opacity: isLoading ? 0 : isFetching ? 0.5 : 1,
|
|
35
36
|
transition: 'opacity 0.5s ease',
|
|
36
37
|
...style
|
|
37
38
|
}
|
|
38
|
-
}, typeof children === 'function' ? children(translated) : translated
|
|
39
|
+
}, typeof children === 'function' ? children(translated) : translated, /*#__PURE__*/_react.default.createElement("style", null, `
|
|
40
|
+
.adaptive-translation > *:not(img) {
|
|
41
|
+
opacity: ${opacity};
|
|
42
|
+
transition: opacity 0.5s ease;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.adaptive-translation img {
|
|
46
|
+
opacity: 1 !important;
|
|
47
|
+
|
|
48
|
+
.media-wrapper {
|
|
49
|
+
opacity: 1 !important;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.media-wrapper span {
|
|
53
|
+
opacity: 1 !important;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
`));
|
|
39
57
|
};
|
|
40
58
|
var _default = exports.default = AdaptiveTranslation;
|
|
41
59
|
//# sourceMappingURL=AdaptiveTranslation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AdaptiveTranslation.js","names":["_react","_interopRequireDefault","require","_clsx","_useAdaptiveTranslation","e","__esModule","default","AdaptiveTranslation","children","to","from","tagName","TagName","style","className","textType","text","translated","isLoading","isFetching","useAdaptiveTranslation","
|
|
1
|
+
{"version":3,"file":"AdaptiveTranslation.js","names":["_react","_interopRequireDefault","require","_clsx","_useAdaptiveTranslation","e","__esModule","default","AdaptiveTranslation","children","to","from","tagName","TagName","style","className","textType","text","translated","isLoading","isFetching","useAdaptiveTranslation","opacity","createElement","clsx","transition","_default","exports"],"sources":["../../../src/components/AdaptiveTranslation.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useAdaptiveTranslation } from '../hooks/useAdaptiveTranslation';\nimport { Language } from 'chayns-api';\n\ntype TranslationChildren = ((text: string) => ReactNode) | string;\n\ntype AdaptiveTranslationProps = {\n /**\n * The Text that should be translated.\n */\n children: TranslationChildren;\n /**\n * The className of the element.\n */\n className?: string;\n /**\n * The language from which the text should be translated.\n */\n from?: Exclude<Language, Language.Unknown>;\n /**\n * Optional styles of the HTML element.\n */\n style?: CSSProperties;\n /**\n * The HTML tag of the children.\n */\n tagName?: keyof HTMLElementTagNameMap;\n /**\n * The text that should be translated. Only active if the children is type of function.\n */\n text?: string;\n /**\n * The type of the text.\n */\n textType?: string;\n /**\n * The language to which the text should be translated.\n */\n to?: Exclude<Language, Language.Unknown>;\n};\n\nconst AdaptiveTranslation = ({\n children,\n to,\n from,\n tagName: TagName = 'span',\n style,\n className,\n textType,\n text = '',\n}: AdaptiveTranslationProps) => {\n const {\n text: translated,\n isLoading,\n isFetching,\n } = useAdaptiveTranslation(typeof children === 'function' ? text : children, {\n from,\n to,\n textType,\n });\n\n // eslint-disable-next-line no-nested-ternary\n const opacity = isLoading ? 0 : isFetching ? 0.5 : 1;\n\n return (\n <TagName\n className={clsx('notranslate adaptive-translation', className)}\n style={{\n transition: 'opacity 0.5s ease',\n ...style,\n }}\n >\n {typeof children === 'function' ? children(translated) : translated}\n\n <style>\n {`\n .adaptive-translation > *:not(img) {\n opacity: ${opacity};\n transition: opacity 0.5s ease;\n }\n \n .adaptive-translation img {\n opacity: 1 !important;\n \n .media-wrapper {\n opacity: 1 !important;\n }\n \n .media-wrapper span {\n opacity: 1 !important;\n } \n }\n `}\n </style>\n </TagName>\n );\n};\nexport default AdaptiveTranslation;\n"],"mappings":";;;;;;AAAC,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACD,IAAAC,KAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AAAyE,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAwCzE,MAAMG,mBAAmB,GAAGA,CAAC;EACzBC,QAAQ;EACRC,EAAE;EACFC,IAAI;EACJC,OAAO,EAAEC,OAAO,GAAG,MAAM;EACzBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,IAAI,GAAG;AACe,CAAC,KAAK;EAC5B,MAAM;IACFA,IAAI,EAAEC,UAAU;IAChBC,SAAS;IACTC;EACJ,CAAC,GAAG,IAAAC,8CAAsB,EAAC,OAAOZ,QAAQ,KAAK,UAAU,GAAGQ,IAAI,GAAGR,QAAQ,EAAE;IACzEE,IAAI;IACJD,EAAE;IACFM;EACJ,CAAC,CAAC;;EAEF;EACA,MAAMM,OAAO,GAAGH,SAAS,GAAG,CAAC,GAAGC,UAAU,GAAG,GAAG,GAAG,CAAC;EAEpD,oBACIpB,MAAA,CAAAO,OAAA,CAAAgB,aAAA,CAACV,OAAO;IACJE,SAAS,EAAE,IAAAS,aAAI,EAAC,kCAAkC,EAAET,SAAS,CAAE;IAC/DD,KAAK,EAAE;MACHW,UAAU,EAAE,mBAAmB;MAC/B,GAAGX;IACP;EAAE,GAED,OAAOL,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAACS,UAAU,CAAC,GAAGA,UAAU,eAEnElB,MAAA,CAAAO,OAAA,CAAAgB,aAAA,gBACK;AACjB;AACA,mCAAmCD,OAAO;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBACmB,CACF,CAAC;AAElB,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAApB,OAAA,GACaC,mBAAmB","ignoreList":[]}
|
|
@@ -20,15 +20,33 @@ const AdaptiveTranslation = ({
|
|
|
20
20
|
to,
|
|
21
21
|
textType
|
|
22
22
|
});
|
|
23
|
+
|
|
24
|
+
// eslint-disable-next-line no-nested-ternary
|
|
25
|
+
const opacity = isLoading ? 0 : isFetching ? 0.5 : 1;
|
|
23
26
|
return /*#__PURE__*/React.createElement(TagName, {
|
|
24
|
-
className: clsx('notranslate', className),
|
|
27
|
+
className: clsx('notranslate adaptive-translation', className),
|
|
25
28
|
style: {
|
|
26
|
-
// eslint-disable-next-line no-nested-ternary
|
|
27
|
-
opacity: isLoading ? 0 : isFetching ? 0.5 : 1,
|
|
28
29
|
transition: 'opacity 0.5s ease',
|
|
29
30
|
...style
|
|
30
31
|
}
|
|
31
|
-
}, typeof children === 'function' ? children(translated) : translated
|
|
32
|
+
}, typeof children === 'function' ? children(translated) : translated, /*#__PURE__*/React.createElement("style", null, `
|
|
33
|
+
.adaptive-translation > *:not(img) {
|
|
34
|
+
opacity: ${opacity};
|
|
35
|
+
transition: opacity 0.5s ease;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.adaptive-translation img {
|
|
39
|
+
opacity: 1 !important;
|
|
40
|
+
|
|
41
|
+
.media-wrapper {
|
|
42
|
+
opacity: 1 !important;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.media-wrapper span {
|
|
46
|
+
opacity: 1 !important;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
`));
|
|
32
50
|
};
|
|
33
51
|
export default AdaptiveTranslation;
|
|
34
52
|
//# sourceMappingURL=AdaptiveTranslation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AdaptiveTranslation.js","names":["React","clsx","useAdaptiveTranslation","AdaptiveTranslation","children","to","from","tagName","TagName","style","className","textType","text","translated","isLoading","isFetching","
|
|
1
|
+
{"version":3,"file":"AdaptiveTranslation.js","names":["React","clsx","useAdaptiveTranslation","AdaptiveTranslation","children","to","from","tagName","TagName","style","className","textType","text","translated","isLoading","isFetching","opacity","createElement","transition"],"sources":["../../../src/components/AdaptiveTranslation.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useAdaptiveTranslation } from '../hooks/useAdaptiveTranslation';\nimport { Language } from 'chayns-api';\n\ntype TranslationChildren = ((text: string) => ReactNode) | string;\n\ntype AdaptiveTranslationProps = {\n /**\n * The Text that should be translated.\n */\n children: TranslationChildren;\n /**\n * The className of the element.\n */\n className?: string;\n /**\n * The language from which the text should be translated.\n */\n from?: Exclude<Language, Language.Unknown>;\n /**\n * Optional styles of the HTML element.\n */\n style?: CSSProperties;\n /**\n * The HTML tag of the children.\n */\n tagName?: keyof HTMLElementTagNameMap;\n /**\n * The text that should be translated. Only active if the children is type of function.\n */\n text?: string;\n /**\n * The type of the text.\n */\n textType?: string;\n /**\n * The language to which the text should be translated.\n */\n to?: Exclude<Language, Language.Unknown>;\n};\n\nconst AdaptiveTranslation = ({\n children,\n to,\n from,\n tagName: TagName = 'span',\n style,\n className,\n textType,\n text = '',\n}: AdaptiveTranslationProps) => {\n const {\n text: translated,\n isLoading,\n isFetching,\n } = useAdaptiveTranslation(typeof children === 'function' ? text : children, {\n from,\n to,\n textType,\n });\n\n // eslint-disable-next-line no-nested-ternary\n const opacity = isLoading ? 0 : isFetching ? 0.5 : 1;\n\n return (\n <TagName\n className={clsx('notranslate adaptive-translation', className)}\n style={{\n transition: 'opacity 0.5s ease',\n ...style,\n }}\n >\n {typeof children === 'function' ? children(translated) : translated}\n\n <style>\n {`\n .adaptive-translation > *:not(img) {\n opacity: ${opacity};\n transition: opacity 0.5s ease;\n }\n \n .adaptive-translation img {\n opacity: 1 !important;\n \n .media-wrapper {\n opacity: 1 !important;\n }\n \n .media-wrapper span {\n opacity: 1 !important;\n } \n }\n `}\n </style>\n </TagName>\n );\n};\nexport default AdaptiveTranslation;\n"],"mappings":"AAAC,OAAOA,KAAK,MAAoC,OAAO;AACxD,OAAOC,IAAI,MAAM,MAAM;AACvB,SAASC,sBAAsB,QAAQ,iCAAiC;AAwCxE,MAAMC,mBAAmB,GAAGA,CAAC;EACzBC,QAAQ;EACRC,EAAE;EACFC,IAAI;EACJC,OAAO,EAAEC,OAAO,GAAG,MAAM;EACzBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,IAAI,GAAG;AACe,CAAC,KAAK;EAC5B,MAAM;IACFA,IAAI,EAAEC,UAAU;IAChBC,SAAS;IACTC;EACJ,CAAC,GAAGb,sBAAsB,CAAC,OAAOE,QAAQ,KAAK,UAAU,GAAGQ,IAAI,GAAGR,QAAQ,EAAE;IACzEE,IAAI;IACJD,EAAE;IACFM;EACJ,CAAC,CAAC;;EAEF;EACA,MAAMK,OAAO,GAAGF,SAAS,GAAG,CAAC,GAAGC,UAAU,GAAG,GAAG,GAAG,CAAC;EAEpD,oBACIf,KAAA,CAAAiB,aAAA,CAACT,OAAO;IACJE,SAAS,EAAET,IAAI,CAAC,kCAAkC,EAAES,SAAS,CAAE;IAC/DD,KAAK,EAAE;MACHS,UAAU,EAAE,mBAAmB;MAC/B,GAAGT;IACP;EAAE,GAED,OAAOL,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAACS,UAAU,CAAC,GAAGA,UAAU,eAEnEb,KAAA,CAAAiB,aAAA,gBACK;AACjB;AACA,mCAAmCD,OAAO;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBACmB,CACF,CAAC;AAElB,CAAC;AACD,eAAeb,mBAAmB","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/translation",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1272",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
"publishConfig": {
|
|
80
80
|
"access": "public"
|
|
81
81
|
},
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "5932a255b34cf7bcefff039ec73e61fb4a0e652d"
|
|
83
83
|
}
|