@chayns-components/core 5.0.0-beta.242 → 5.0.0-beta.244
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/components/number-input/NumberInput.js +5 -4
- package/lib/components/number-input/NumberInput.js.map +1 -1
- package/lib/components/textstring/TextString.d.ts +5 -1
- package/lib/components/textstring/TextString.js +9 -4
- package/lib/components/textstring/TextString.js.map +1 -1
- package/package.json +2 -2
|
@@ -22,7 +22,7 @@ const NumberInput = _ref => {
|
|
|
22
22
|
isDisabled
|
|
23
23
|
} = _ref;
|
|
24
24
|
const [stringValue, setStringValue] = (0, _react.useState)('');
|
|
25
|
-
const handleChange = function () {
|
|
25
|
+
const handleChange = (0, _react.useCallback)(function () {
|
|
26
26
|
let newValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
27
27
|
if (typeof newValue !== 'number') {
|
|
28
28
|
setStringValue('');
|
|
@@ -32,9 +32,10 @@ const NumberInput = _ref => {
|
|
|
32
32
|
stringValue: newValue === null || newValue === void 0 ? void 0 : newValue.toString()
|
|
33
33
|
});
|
|
34
34
|
setStringValue((0, _number2.formateNumber)({
|
|
35
|
-
number: parsedValue
|
|
35
|
+
number: parsedValue,
|
|
36
|
+
isMoneyInput
|
|
36
37
|
}));
|
|
37
|
-
};
|
|
38
|
+
}, [isMoneyInput]);
|
|
38
39
|
const onChange = event => {
|
|
39
40
|
const newValue = event.target.value;
|
|
40
41
|
const sanitizedValue = newValue
|
|
@@ -96,7 +97,7 @@ const NumberInput = _ref => {
|
|
|
96
97
|
};
|
|
97
98
|
(0, _react.useEffect)(() => {
|
|
98
99
|
handleChange(number);
|
|
99
|
-
}, [number]);
|
|
100
|
+
}, [handleChange, number]);
|
|
100
101
|
return /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
101
102
|
onChange: onChange,
|
|
102
103
|
value: stringValue,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_number","_number2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","NumberInput","_ref","isDecimalInput","isMoneyInput","maxNumber","Infinity","number","placeholder","onNumberChange","isDisabled","stringValue","setStringValue","useState","handleChange","newValue","arguments","length","undefined","parsedValue","parseFloatAndRound","toString","formateNumber","onChange","event","target","value","sanitizedValue","replace","NUMBER_CLEAR_REGEX","trim","DECIMAL_TEST","test","parsedNumber","MONEY_TEST","decimals","INTEGER_TEST","Number","onBlur","onFocus","replaceAll","useEffect","createElement","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, parseFloatAndRound } from './utils/number';\n\nexport type NumberInputProps = {\n /**\n * Whether the user can add decimal places. Enables the user to input a zero as first number\n */\n isDecimalInput?: boolean;\n /**\n * Applies rules for money input.\n * Rules: only two decimal places, one leading zero\n */\n isMoneyInput?: boolean;\n /**\n * Limits the number to this value\n */\n maxNumber?: number;\n /**\n * The number that should be displayed formatted in the input field. NOTE: A zero as number is not allowed\n */\n number: number | null;\n /**\n * The placeholder that should be in the input\n */\n placeholder?: string;\n /**\n * Callback function that is called when the input gets out of focus\n */\n onNumberChange: (newNumber: number | null) => void;\n /**\n * Whether the input is disabled\n */\n isDisabled?: boolean;\n};\n\nconst NumberInput: FC<NumberInputProps> = (\n {\n isDecimalInput,\n isMoneyInput,\n maxNumber = Infinity,\n number,\n placeholder,\n onNumberChange,\n isDisabled\n }) => {\n const [stringValue, setStringValue] = useState<string>('');\n\n const handleChange = (newValue: number | null = null) => {\n if (typeof newValue !== 'number') {\n setStringValue('');\n\n return;\n }\n\n const parsedValue = parseFloatAndRound({ stringValue: newValue?.toString() });\n\n setStringValue(formateNumber({ number: parsedValue }));\n };\n\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = event.target.value;\n\n const sanitizedValue = newValue\n // Removes everything except numbers and commas (decimals should be indicated with a comma)\n .replace(NUMBER_CLEAR_REGEX, '')\n // Calculations need points for decimal indication\n .replace(',', '.');\n\n if (sanitizedValue.trim().length > 0) {\n\n // Allows numbers, a comma and any number of decimal places\n if (isDecimalInput && DECIMAL_TEST.test(sanitizedValue)) {\n const parsedNumber = parseFloatAndRound({ stringValue: sanitizedValue });\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue.replace('.', ','));\n\n return;\n }\n\n // Allows numbers, a comma and 2 numbers of decimal places\n if (isMoneyInput && MONEY_TEST.test(sanitizedValue)) {\n const parsedNumber = parseFloatAndRound({\n stringValue: sanitizedValue,\n decimals: 2,\n });\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue.replace('.', ','));\n\n return;\n }\n\n // Allows numbers but excludes numbers with leading 0\n if (INTEGER_TEST.test(sanitizedValue)) {\n const parsedNumber = Number(sanitizedValue);\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue);\n }\n } else {\n setStringValue('');\n }\n };\n\n const onBlur = () => {\n const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;\n const parsedValue = parseFloatAndRound({ stringValue: sanitizedValue });\n\n setStringValue(\n stringValue.length === 0\n ? ''\n : formateNumber({\n number: parsedValue,\n isMoneyInput\n })\n );\n\n onNumberChange(parsedValue === 0 ? null : parsedValue);\n };\n\n const onFocus = () => {\n setStringValue(stringValue.replaceAll('.', ''));\n };\n\n useEffect(() => {\n handleChange(number);\n }, [number]);\n\n return (\n <Input\n onChange={onChange}\n value={stringValue}\n placeholder={placeholder}\n onBlur={onBlur}\n onFocus={onFocus}\n isDisabled={isDisabled}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAmE,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAV,wBAAAM,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAkCnE,MAAMW,WAAiC,GAAGC,IAAA,IAShC;EAAA,IARN;IACIC,cAAc;IACdC,YAAY;IACZC,SAAS,GAAGC,QAAQ;IACpBC,MAAM;IACNC,WAAW;IACXC,cAAc;IACdC;EACJ,CAAC,GAAAR,IAAA;EACD,MAAM,CAACS,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAS,EAAE,CAAC;EAE1D,MAAMC,YAAY,GAAG,
|
|
1
|
+
{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_number","_number2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","NumberInput","_ref","isDecimalInput","isMoneyInput","maxNumber","Infinity","number","placeholder","onNumberChange","isDisabled","stringValue","setStringValue","useState","handleChange","useCallback","newValue","arguments","length","undefined","parsedValue","parseFloatAndRound","toString","formateNumber","onChange","event","target","value","sanitizedValue","replace","NUMBER_CLEAR_REGEX","trim","DECIMAL_TEST","test","parsedNumber","MONEY_TEST","decimals","INTEGER_TEST","Number","onBlur","onFocus","replaceAll","useEffect","createElement","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, parseFloatAndRound } from './utils/number';\n\nexport type NumberInputProps = {\n /**\n * Whether the user can add decimal places. Enables the user to input a zero as first number\n */\n isDecimalInput?: boolean;\n /**\n * Applies rules for money input.\n * Rules: only two decimal places, one leading zero\n */\n isMoneyInput?: boolean;\n /**\n * Limits the number to this value\n */\n maxNumber?: number;\n /**\n * The number that should be displayed formatted in the input field. NOTE: A zero as number is not allowed\n */\n number: number | null;\n /**\n * The placeholder that should be in the input\n */\n placeholder?: string;\n /**\n * Callback function that is called when the input gets out of focus\n */\n onNumberChange: (newNumber: number | null) => void;\n /**\n * Whether the input is disabled\n */\n isDisabled?: boolean;\n};\n\nconst NumberInput: FC<NumberInputProps> = (\n {\n isDecimalInput,\n isMoneyInput,\n maxNumber = Infinity,\n number,\n placeholder,\n onNumberChange,\n isDisabled\n }) => {\n const [stringValue, setStringValue] = useState<string>('');\n\n const handleChange = useCallback((newValue: number | null = null) => {\n if (typeof newValue !== 'number') {\n setStringValue('');\n\n return;\n }\n\n const parsedValue = parseFloatAndRound({ stringValue: newValue?.toString() });\n\n setStringValue(formateNumber({ number: parsedValue, isMoneyInput }));\n }, [isMoneyInput]);\n\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = event.target.value;\n\n const sanitizedValue = newValue\n // Removes everything except numbers and commas (decimals should be indicated with a comma)\n .replace(NUMBER_CLEAR_REGEX, '')\n // Calculations need points for decimal indication\n .replace(',', '.');\n\n if (sanitizedValue.trim().length > 0) {\n\n // Allows numbers, a comma and any number of decimal places\n if (isDecimalInput && DECIMAL_TEST.test(sanitizedValue)) {\n const parsedNumber = parseFloatAndRound({ stringValue: sanitizedValue });\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue.replace('.', ','));\n\n return;\n }\n\n // Allows numbers, a comma and 2 numbers of decimal places\n if (isMoneyInput && MONEY_TEST.test(sanitizedValue)) {\n const parsedNumber = parseFloatAndRound({\n stringValue: sanitizedValue,\n decimals: 2,\n });\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue.replace('.', ','));\n\n return;\n }\n\n // Allows numbers but excludes numbers with leading 0\n if (INTEGER_TEST.test(sanitizedValue)) {\n const parsedNumber = Number(sanitizedValue);\n\n if (parsedNumber > maxNumber) {\n return;\n }\n\n setStringValue(sanitizedValue);\n }\n } else {\n setStringValue('');\n }\n };\n\n const onBlur = () => {\n const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;\n const parsedValue = parseFloatAndRound({ stringValue: sanitizedValue });\n\n setStringValue(\n stringValue.length === 0\n ? ''\n : formateNumber({\n number: parsedValue,\n isMoneyInput\n })\n );\n\n onNumberChange(parsedValue === 0 ? null : parsedValue);\n };\n\n const onFocus = () => {\n setStringValue(stringValue.replaceAll('.', ''));\n };\n\n useEffect(() => {\n handleChange(number);\n }, [handleChange, number]);\n\n return (\n <Input\n onChange={onChange}\n value={stringValue}\n placeholder={placeholder}\n onBlur={onBlur}\n onFocus={onFocus}\n isDisabled={isDisabled}\n />\n );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAmE,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAV,wBAAAM,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAkCnE,MAAMW,WAAiC,GAAGC,IAAA,IAShC;EAAA,IARN;IACIC,cAAc;IACdC,YAAY;IACZC,SAAS,GAAGC,QAAQ;IACpBC,MAAM;IACNC,WAAW;IACXC,cAAc;IACdC;EACJ,CAAC,GAAAR,IAAA;EACD,MAAM,CAACS,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAS,EAAE,CAAC;EAE1D,MAAMC,YAAY,GAAG,IAAAC,kBAAW,EAAC,YAAoC;IAAA,IAAnCC,QAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;IAC5D,IAAI,OAAOD,QAAQ,KAAK,QAAQ,EAAE;MAC9BJ,cAAc,CAAC,EAAE,CAAC;MAElB;IACJ;IAEA,MAAMQ,WAAW,GAAG,IAAAC,2BAAkB,EAAC;MAAEV,WAAW,EAAEK,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEM,QAAQ,CAAC;IAAE,CAAC,CAAC;IAE7EV,cAAc,CAAC,IAAAW,sBAAa,EAAC;MAAEhB,MAAM,EAAEa,WAAW;MAAEhB;IAAa,CAAC,CAAC,CAAC;EACxE,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMoB,QAAQ,GAAIC,KAAoC,IAAK;IACvD,MAAMT,QAAQ,GAAGS,KAAK,CAACC,MAAM,CAACC,KAAK;IAEnC,MAAMC,cAAc,GAAGZ;IACnB;IAAA,CACCa,OAAO,CAACC,0BAAkB,EAAE,EAAE;IAC/B;IAAA,CACCD,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;IAEtB,IAAID,cAAc,CAACG,IAAI,CAAC,CAAC,CAACb,MAAM,GAAG,CAAC,EAAE;MAElC;MACA,IAAIf,cAAc,IAAI6B,oBAAY,CAACC,IAAI,CAACL,cAAc,CAAC,EAAE;QACrD,MAAMM,YAAY,GAAG,IAAAb,2BAAkB,EAAC;UAAEV,WAAW,EAAEiB;QAAe,CAAC,CAAC;QAExE,IAAIM,YAAY,GAAG7B,SAAS,EAAE;UAC1B;QACJ;QAEAO,cAAc,CAACgB,cAAc,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAEhD;MACJ;;MAEA;MACA,IAAIzB,YAAY,IAAI+B,kBAAU,CAACF,IAAI,CAACL,cAAc,CAAC,EAAE;QACjD,MAAMM,YAAY,GAAG,IAAAb,2BAAkB,EAAC;UACpCV,WAAW,EAAEiB,cAAc;UAC3BQ,QAAQ,EAAE;QACd,CAAC,CAAC;QAEF,IAAIF,YAAY,GAAG7B,SAAS,EAAE;UAC1B;QACJ;QAEAO,cAAc,CAACgB,cAAc,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAEhD;MACJ;;MAEA;MACA,IAAIQ,oBAAY,CAACJ,IAAI,CAACL,cAAc,CAAC,EAAE;QACnC,MAAMM,YAAY,GAAGI,MAAM,CAACV,cAAc,CAAC;QAE3C,IAAIM,YAAY,GAAG7B,SAAS,EAAE;UAC1B;QACJ;QAEAO,cAAc,CAACgB,cAAc,CAAC;MAClC;IACJ,CAAC,MAAM;MACHhB,cAAc,CAAC,EAAE,CAAC;IACtB;EACJ,CAAC;EAED,MAAM2B,MAAM,GAAGA,CAAA,KAAM;IACjB,MAAMX,cAAc,GAAGjB,WAAW,CAACO,MAAM,KAAK,CAAC,GAAG,GAAG,GAAGP,WAAW;IACnE,MAAMS,WAAW,GAAG,IAAAC,2BAAkB,EAAC;MAAEV,WAAW,EAAEiB;IAAe,CAAC,CAAC;IAEvEhB,cAAc,CACVD,WAAW,CAACO,MAAM,KAAK,CAAC,GAClB,EAAE,GACF,IAAAK,sBAAa,EAAC;MACZhB,MAAM,EAAEa,WAAW;MACnBhB;IACJ,CAAC,CACT,CAAC;IAEDK,cAAc,CAACW,WAAW,KAAK,CAAC,GAAG,IAAI,GAAGA,WAAW,CAAC;EAC1D,CAAC;EAED,MAAMoB,OAAO,GAAGA,CAAA,KAAM;IAClB5B,cAAc,CAACD,WAAW,CAAC8B,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;EACnD,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACZ5B,YAAY,CAACP,MAAM,CAAC;EACxB,CAAC,EAAE,CAACO,YAAY,EAAEP,MAAM,CAAC,CAAC;EAE1B,oBACInC,MAAA,CAAAS,OAAA,CAAA8D,aAAA,CAACpE,MAAA,CAAAM,OAAK;IACF2C,QAAQ,EAAEA,QAAS;IACnBG,KAAK,EAAEhB,WAAY;IACnBH,WAAW,EAAEA,WAAY;IACzB+B,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjB9B,UAAU,EAAEA;EAAW,CAC1B,CAAC;AAEV,CAAC;AAEDT,WAAW,CAAC2C,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAEzB5C,WAAW;AAAA6C,OAAA,CAAAjE,OAAA,GAAAgE,QAAA"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import { FC, ReactHTML, ReactNode } from 'react';
|
|
1
|
+
import { CSSProperties, FC, ReactHTML, ReactNode } from 'react';
|
|
2
2
|
import type { ITextstring, TextstringReplacement } from './types';
|
|
3
3
|
export type TextStringProps = {
|
|
4
4
|
/**
|
|
5
5
|
* The element that the text should be displayed in.
|
|
6
6
|
*/
|
|
7
7
|
children?: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* The styles of the HTML element that the text should be displayed in.
|
|
10
|
+
*/
|
|
11
|
+
childrenStyles?: CSSProperties;
|
|
8
12
|
/**
|
|
9
13
|
* The tag of the HTML element that the text should be displayed in.
|
|
10
14
|
*/
|
|
@@ -16,7 +16,8 @@ const TextString = _ref => {
|
|
|
16
16
|
textString,
|
|
17
17
|
replacements,
|
|
18
18
|
childrenTagName,
|
|
19
|
-
children
|
|
19
|
+
children,
|
|
20
|
+
childrenStyles
|
|
20
21
|
} = _ref;
|
|
21
22
|
const textStrings = (0, _react.useContext)(_TextStringProvider.TextStringContext);
|
|
22
23
|
const text = (0, _react.useMemo)(() => {
|
|
@@ -36,12 +37,16 @@ const TextString = _ref => {
|
|
|
36
37
|
return newValue;
|
|
37
38
|
}, [replacements, textString, textStrings]);
|
|
38
39
|
const childElement = (0, _react.useMemo)(() => {
|
|
39
|
-
let element = /*#__PURE__*/(0, _react.createElement)('',
|
|
40
|
+
let element = /*#__PURE__*/(0, _react.createElement)('', childrenStyles ? {
|
|
41
|
+
style: childrenStyles
|
|
42
|
+
} : null, children);
|
|
40
43
|
if (!children) {
|
|
41
|
-
element = /*#__PURE__*/(0, _react.createElement)(childrenTagName || 'span',
|
|
44
|
+
element = /*#__PURE__*/(0, _react.createElement)(childrenTagName || 'span', childrenStyles ? {
|
|
45
|
+
style: childrenStyles
|
|
46
|
+
} : null, text);
|
|
42
47
|
}
|
|
43
48
|
return element;
|
|
44
|
-
}, [children, childrenTagName, text]);
|
|
49
|
+
}, [children, childrenStyles, childrenTagName, text]);
|
|
45
50
|
const handleClick = (0, _react.useCallback)(event => {
|
|
46
51
|
if (event.ctrlKey) {
|
|
47
52
|
void (0, _isTobitEmployee.isTobitEmployee)().then(inGroup => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextString.js","names":["_react","_interopRequireWildcard","require","_isTobitEmployee","_TextStringProvider","_utils","_TextString","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","TextString","_ref","textString","replacements","childrenTagName","children","textStrings","useContext","TextStringContext","text","useMemo","_textStrings$textStri","value","name","fallback","newValue","forEach","_ref2","replacement","replace","childElement","element","createElement","handleClick","useCallback","event","ctrlKey","isTobitEmployee","then","inGroup","selectLanguageToChange","textstringName","StyledTextString","onClick","displayName","_default","exports"],"sources":["../../../src/components/textstring/TextString.tsx"],"sourcesContent":["import React, {\n createElement,\n FC,\n MouseEventHandler,\n ReactHTML,\n ReactNode,\n useCallback,\n useContext,\n useMemo,\n} from 'react';\nimport { isTobitEmployee } from '../../utils/isTobitEmployee';\nimport { TextStringContext } from '../textstring-provider/TextStringProvider';\nimport { selectLanguageToChange } from '../textstring-provider/utils';\nimport { StyledTextString } from './TextString.styles';\nimport type { ITextstring, TextstringReplacement } from './types';\
|
|
1
|
+
{"version":3,"file":"TextString.js","names":["_react","_interopRequireWildcard","require","_isTobitEmployee","_TextStringProvider","_utils","_TextString","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","TextString","_ref","textString","replacements","childrenTagName","children","childrenStyles","textStrings","useContext","TextStringContext","text","useMemo","_textStrings$textStri","value","name","fallback","newValue","forEach","_ref2","replacement","replace","childElement","element","createElement","style","handleClick","useCallback","event","ctrlKey","isTobitEmployee","then","inGroup","selectLanguageToChange","textstringName","StyledTextString","onClick","displayName","_default","exports"],"sources":["../../../src/components/textstring/TextString.tsx"],"sourcesContent":["import React, {\n createElement,\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactHTML,\n ReactNode,\n useCallback,\n useContext,\n useMemo,\n} from 'react';\nimport { isTobitEmployee } from '../../utils/isTobitEmployee';\nimport { TextStringContext } from '../textstring-provider/TextStringProvider';\nimport { selectLanguageToChange } from '../textstring-provider/utils';\nimport { StyledTextString } from './TextString.styles';\nimport type { ITextstring, TextstringReplacement } from './types';\n\nexport type TextStringProps = {\n /**\n * The element that the text should be displayed in.\n */\n children?: ReactNode;\n /**\n * The styles of the HTML element that the text should be displayed in.\n */\n childrenStyles?: CSSProperties;\n /**\n * The tag of the HTML element that the text should be displayed in.\n */\n childrenTagName?: keyof ReactHTML;\n /**\n * A part of the text that should be replaced.\n */\n replacements?: TextstringReplacement[];\n /**\n * The text that should be displayed.\n */\n textString: ITextstring;\n};\n\nconst TextString: FC<TextStringProps> = ({\n textString,\n replacements,\n childrenTagName,\n children,\n childrenStyles,\n}) => {\n const textStrings = useContext(TextStringContext);\n\n const text = useMemo(() => {\n const value = textStrings[textString.name] ?? textString.fallback;\n\n if (!replacements) {\n return value;\n }\n\n let newValue = value;\n\n replacements.forEach(({ replacement, key }) => {\n newValue = newValue.replace(key, replacement);\n });\n\n return newValue;\n }, [replacements, textString, textStrings]);\n\n const childElement = useMemo(() => {\n let element = createElement(\n '',\n childrenStyles ? { style: childrenStyles } : null,\n children\n );\n\n if (!children) {\n element = createElement(\n childrenTagName || 'span',\n childrenStyles ? { style: childrenStyles } : null,\n text\n );\n }\n\n return element;\n }, [children, childrenStyles, childrenTagName, text]);\n\n const handleClick: MouseEventHandler<HTMLDivElement> = useCallback(\n (event) => {\n if (event.ctrlKey) {\n void isTobitEmployee().then((inGroup) => {\n if (inGroup) {\n selectLanguageToChange({\n textstringName: textString.name,\n });\n }\n });\n }\n },\n [textString.name]\n );\n\n return useMemo(\n () => <StyledTextString onClick={handleClick}>{childElement}</StyledTextString>,\n [childElement, handleClick]\n );\n};\n\nTextString.displayName = 'TextString';\n\nexport default TextString;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.244",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"publishConfig": {
|
|
66
66
|
"access": "public"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "49f861ccc526feeeb6dadb13a530f10d788e59bf"
|
|
69
69
|
}
|