@chayns-components/translation 5.0.0-beta.1274 → 5.0.0-beta.1279
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/lib/cjs/components/AdaptiveTranslation.js +11 -3
- package/lib/cjs/components/AdaptiveTranslation.js.map +1 -1
- package/lib/esm/components/AdaptiveTranslation.js +10 -3
- package/lib/esm/components/AdaptiveTranslation.js.map +1 -1
- package/lib/types/components/AdaptiveTranslation.d.ts +9 -1
- package/package.json +2 -2
|
@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
9
9
|
var _useAdaptiveTranslation = require("../hooks/useAdaptiveTranslation");
|
|
10
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
11
12
|
const AdaptiveTranslation = ({
|
|
12
13
|
children,
|
|
13
14
|
to,
|
|
@@ -16,7 +17,9 @@ const AdaptiveTranslation = ({
|
|
|
16
17
|
style,
|
|
17
18
|
className,
|
|
18
19
|
textType,
|
|
19
|
-
text = ''
|
|
20
|
+
text = '',
|
|
21
|
+
onStateChange,
|
|
22
|
+
shouldDisableOpacity = false
|
|
20
23
|
}) => {
|
|
21
24
|
const {
|
|
22
25
|
text: translated,
|
|
@@ -27,12 +30,17 @@ const AdaptiveTranslation = ({
|
|
|
27
30
|
to,
|
|
28
31
|
textType
|
|
29
32
|
});
|
|
33
|
+
(0, _react.useEffect)(() => {
|
|
34
|
+
if (typeof onStateChange === 'function') {
|
|
35
|
+
onStateChange(isLoading, isFetching);
|
|
36
|
+
}
|
|
37
|
+
}, [isFetching, isLoading, onStateChange]);
|
|
30
38
|
|
|
31
39
|
// eslint-disable-next-line no-nested-ternary
|
|
32
40
|
const opacity = isLoading ? 0 : isFetching ? 0.5 : 1;
|
|
33
41
|
return /*#__PURE__*/_react.default.createElement(TagName, {
|
|
34
42
|
className: (0, _clsx.default)('notranslate', className),
|
|
35
|
-
style: {
|
|
43
|
+
style: shouldDisableOpacity ? style : {
|
|
36
44
|
opacity,
|
|
37
45
|
transition: 'opacity 0.5s ease',
|
|
38
46
|
...style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AdaptiveTranslation.js","names":["_react","
|
|
1
|
+
{"version":3,"file":"AdaptiveTranslation.js","names":["_react","_interopRequireWildcard","require","_clsx","_interopRequireDefault","_useAdaptiveTranslation","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AdaptiveTranslation","children","to","from","tagName","TagName","style","className","textType","text","onStateChange","shouldDisableOpacity","translated","isLoading","isFetching","useAdaptiveTranslation","useEffect","opacity","createElement","clsx","transition","_default","exports"],"sources":["../../../src/components/AdaptiveTranslation.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode, useEffect } 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 * Function to be executed when the state of the translation is changed.\n */\n onStateChange?: (isLoading: boolean, isFetching: boolean) => void;\n /**\n * Whether the opacity change should be disabled.\n */\n shouldDisableOpacity?: boolean;\n};\n\nconst AdaptiveTranslation = ({\n children,\n to,\n from,\n tagName: TagName = 'span',\n style,\n className,\n textType,\n text = '',\n onStateChange,\n shouldDisableOpacity = false,\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 useEffect(() => {\n if (typeof onStateChange === 'function') {\n onStateChange(isLoading, isFetching);\n }\n }, [isFetching, isLoading, onStateChange]);\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', className)}\n style={\n shouldDisableOpacity\n ? style\n : {\n opacity,\n transition: 'opacity 0.5s ease',\n ...style,\n }\n }\n >\n {typeof children === 'function' ? children(translated) : translated}\n </TagName>\n );\n};\nexport default AdaptiveTranslation;\n"],"mappings":";;;;;;AAAC,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACD,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AAAyE,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAK,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAgDzE,MAAMgB,mBAAmB,GAAGA,CAAC;EACzBC,QAAQ;EACRC,EAAE;EACFC,IAAI;EACJC,OAAO,EAAEC,OAAO,GAAG,MAAM;EACzBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,IAAI,GAAG,EAAE;EACTC,aAAa;EACbC,oBAAoB,GAAG;AACD,CAAC,KAAK;EAC5B,MAAM;IACFF,IAAI,EAAEG,UAAU;IAChBC,SAAS;IACTC;EACJ,CAAC,GAAG,IAAAC,8CAAsB,EAAC,OAAOd,QAAQ,KAAK,UAAU,GAAGQ,IAAI,GAAGR,QAAQ,EAAE;IACzEE,IAAI;IACJD,EAAE;IACFM;EACJ,CAAC,CAAC;EAEF,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACG,SAAS,EAAEC,UAAU,CAAC;IACxC;EACJ,CAAC,EAAE,CAACA,UAAU,EAAED,SAAS,EAAEH,aAAa,CAAC,CAAC;;EAE1C;EACA,MAAMO,OAAO,GAAGJ,SAAS,GAAG,CAAC,GAAGC,UAAU,GAAG,GAAG,GAAG,CAAC;EAEpD,oBACIvC,MAAA,CAAAQ,OAAA,CAAAmC,aAAA,CAACb,OAAO;IACJE,SAAS,EAAE,IAAAY,aAAI,EAAC,aAAa,EAAEZ,SAAS,CAAE;IAC1CD,KAAK,EACDK,oBAAoB,GACdL,KAAK,GACL;MACIW,OAAO;MACPG,UAAU,EAAE,mBAAmB;MAC/B,GAAGd;IACP;EACT,GAEA,OAAOL,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAACW,UAAU,CAAC,GAAGA,UACpD,CAAC;AAElB,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAvC,OAAA,GACaiB,mBAAmB","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useAdaptiveTranslation } from '../hooks/useAdaptiveTranslation';
|
|
4
4
|
const AdaptiveTranslation = ({
|
|
@@ -9,7 +9,9 @@ const AdaptiveTranslation = ({
|
|
|
9
9
|
style,
|
|
10
10
|
className,
|
|
11
11
|
textType,
|
|
12
|
-
text = ''
|
|
12
|
+
text = '',
|
|
13
|
+
onStateChange,
|
|
14
|
+
shouldDisableOpacity = false
|
|
13
15
|
}) => {
|
|
14
16
|
const {
|
|
15
17
|
text: translated,
|
|
@@ -20,12 +22,17 @@ const AdaptiveTranslation = ({
|
|
|
20
22
|
to,
|
|
21
23
|
textType
|
|
22
24
|
});
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (typeof onStateChange === 'function') {
|
|
27
|
+
onStateChange(isLoading, isFetching);
|
|
28
|
+
}
|
|
29
|
+
}, [isFetching, isLoading, onStateChange]);
|
|
23
30
|
|
|
24
31
|
// eslint-disable-next-line no-nested-ternary
|
|
25
32
|
const opacity = isLoading ? 0 : isFetching ? 0.5 : 1;
|
|
26
33
|
return /*#__PURE__*/React.createElement(TagName, {
|
|
27
34
|
className: clsx('notranslate', className),
|
|
28
|
-
style: {
|
|
35
|
+
style: shouldDisableOpacity ? style : {
|
|
29
36
|
opacity,
|
|
30
37
|
transition: 'opacity 0.5s ease',
|
|
31
38
|
...style
|
|
@@ -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","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', className)}\n style={{\n
|
|
1
|
+
{"version":3,"file":"AdaptiveTranslation.js","names":["React","useEffect","clsx","useAdaptiveTranslation","AdaptiveTranslation","children","to","from","tagName","TagName","style","className","textType","text","onStateChange","shouldDisableOpacity","translated","isLoading","isFetching","opacity","createElement","transition"],"sources":["../../../src/components/AdaptiveTranslation.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode, useEffect } 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 * Function to be executed when the state of the translation is changed.\n */\n onStateChange?: (isLoading: boolean, isFetching: boolean) => void;\n /**\n * Whether the opacity change should be disabled.\n */\n shouldDisableOpacity?: boolean;\n};\n\nconst AdaptiveTranslation = ({\n children,\n to,\n from,\n tagName: TagName = 'span',\n style,\n className,\n textType,\n text = '',\n onStateChange,\n shouldDisableOpacity = false,\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 useEffect(() => {\n if (typeof onStateChange === 'function') {\n onStateChange(isLoading, isFetching);\n }\n }, [isFetching, isLoading, onStateChange]);\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', className)}\n style={\n shouldDisableOpacity\n ? style\n : {\n opacity,\n transition: 'opacity 0.5s ease',\n ...style,\n }\n }\n >\n {typeof children === 'function' ? children(translated) : translated}\n </TagName>\n );\n};\nexport default AdaptiveTranslation;\n"],"mappings":"AAAC,OAAOA,KAAK,IAA8BC,SAAS,QAAQ,OAAO;AACnE,OAAOC,IAAI,MAAM,MAAM;AACvB,SAASC,sBAAsB,QAAQ,iCAAiC;AAgDxE,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,EAAE;EACTC,aAAa;EACbC,oBAAoB,GAAG;AACD,CAAC,KAAK;EAC5B,MAAM;IACFF,IAAI,EAAEG,UAAU;IAChBC,SAAS;IACTC;EACJ,CAAC,GAAGf,sBAAsB,CAAC,OAAOE,QAAQ,KAAK,UAAU,GAAGQ,IAAI,GAAGR,QAAQ,EAAE;IACzEE,IAAI;IACJD,EAAE;IACFM;EACJ,CAAC,CAAC;EAEFX,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOa,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACG,SAAS,EAAEC,UAAU,CAAC;IACxC;EACJ,CAAC,EAAE,CAACA,UAAU,EAAED,SAAS,EAAEH,aAAa,CAAC,CAAC;;EAE1C;EACA,MAAMK,OAAO,GAAGF,SAAS,GAAG,CAAC,GAAGC,UAAU,GAAG,GAAG,GAAG,CAAC;EAEpD,oBACIlB,KAAA,CAAAoB,aAAA,CAACX,OAAO;IACJE,SAAS,EAAET,IAAI,CAAC,aAAa,EAAES,SAAS,CAAE;IAC1CD,KAAK,EACDK,oBAAoB,GACdL,KAAK,GACL;MACIS,OAAO;MACPE,UAAU,EAAE,mBAAmB;MAC/B,GAAGX;IACP;EACT,GAEA,OAAOL,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAACW,UAAU,CAAC,GAAGA,UACpD,CAAC;AAElB,CAAC;AACD,eAAeZ,mBAAmB","ignoreList":[]}
|
|
@@ -34,6 +34,14 @@ type AdaptiveTranslationProps = {
|
|
|
34
34
|
* The language to which the text should be translated.
|
|
35
35
|
*/
|
|
36
36
|
to?: Exclude<Language, Language.Unknown>;
|
|
37
|
+
/**
|
|
38
|
+
* Function to be executed when the state of the translation is changed.
|
|
39
|
+
*/
|
|
40
|
+
onStateChange?: (isLoading: boolean, isFetching: boolean) => void;
|
|
41
|
+
/**
|
|
42
|
+
* Whether the opacity change should be disabled.
|
|
43
|
+
*/
|
|
44
|
+
shouldDisableOpacity?: boolean;
|
|
37
45
|
};
|
|
38
|
-
declare const AdaptiveTranslation: ({ children, to, from, tagName: TagName, style, className, textType, text, }: AdaptiveTranslationProps) => React.JSX.Element;
|
|
46
|
+
declare const AdaptiveTranslation: ({ children, to, from, tagName: TagName, style, className, textType, text, onStateChange, shouldDisableOpacity, }: AdaptiveTranslationProps) => React.JSX.Element;
|
|
39
47
|
export default AdaptiveTranslation;
|
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.1279",
|
|
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": "1c88b848d5db18cfb72eef46d67f4ab2ad989ca2"
|
|
83
83
|
}
|