@m4l/components 9.1.75 → 9.1.77
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/components/DataGrid/formatters/ColumnPriceFormatter/index.js +1 -1
- package/components/DataGrid/formatters/ColumnUncertaintyFormatter/index.js +1 -1
- package/components/formatters/PriceFormatter/PriceFormatter.d.ts +43 -0
- package/components/formatters/PriceFormatter/PriceFormatter.js +69 -0
- package/components/formatters/PriceFormatter/PriceFormatter.styles.d.ts +2 -0
- package/components/formatters/PriceFormatter/PriceFormatter.styles.js +11 -0
- package/components/formatters/PriceFormatter/constants.d.ts +1 -0
- package/components/formatters/PriceFormatter/constants.js +4 -0
- package/components/formatters/PriceFormatter/slots/PriceFormatterEnum.d.ts +3 -0
- package/components/formatters/PriceFormatter/slots/PriceFormatterEnum.js +7 -0
- package/components/formatters/PriceFormatter/slots/PriceFormatterSlots.d.ts +1 -0
- package/components/formatters/PriceFormatter/slots/PriceFormatterSlots.js +12 -0
- package/components/formatters/PriceFormatter/tests/PriceFormatter.test.d.ts +1 -0
- package/components/formatters/PriceFormatter/types.d.ts +21 -1
- package/components/formatters/UncertaintyFormatter/UncertaintyFormatter.d.ts +53 -0
- package/components/formatters/UncertaintyFormatter/UncertaintyFormatter.js +54 -0
- package/components/formatters/UncertaintyFormatter/UncertaintyFormatter.styles.d.ts +2 -0
- package/components/formatters/UncertaintyFormatter/UncertaintyFormatter.styles.js +11 -0
- package/components/formatters/UncertaintyFormatter/constants.d.ts +1 -0
- package/components/formatters/UncertaintyFormatter/constants.js +4 -0
- package/components/formatters/UncertaintyFormatter/slots/UncertaintyFormatterEnum.d.ts +3 -0
- package/components/formatters/UncertaintyFormatter/slots/UncertaintyFormatterEnum.js +7 -0
- package/components/formatters/UncertaintyFormatter/slots/UncertaintyFormatterSlots.d.ts +1 -0
- package/components/formatters/UncertaintyFormatter/slots/UncertaintyFormatterSlots.js +12 -0
- package/components/formatters/UncertaintyFormatter/tests/UncertaintyFormatter.test.d.ts +1 -0
- package/components/formatters/UncertaintyFormatter/types.d.ts +45 -1
- package/components/formatters/index.d.ts +2 -2
- package/index.js +2 -2
- package/package.json +1 -1
- package/components/formatters/PriceFormatter/index.d.ts +0 -9
- package/components/formatters/PriceFormatter/index.js +0 -35
- package/components/formatters/UncertaintyFormatter/index.d.ts +0 -9
- package/components/formatters/UncertaintyFormatter/index.js +0 -29
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { P as PriceFormatter } from "../../../formatters/PriceFormatter/
|
|
2
|
+
import { P as PriceFormatter } from "../../../formatters/PriceFormatter/PriceFormatter.js";
|
|
3
3
|
function ColumnPriceFormatter(props) {
|
|
4
4
|
return (obProps) => {
|
|
5
5
|
return /* @__PURE__ */ jsx(PriceFormatter, { obProps, ...props });
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { U as UncertaintyFormatter } from "../../../formatters/UncertaintyFormatter/
|
|
2
|
+
import { U as UncertaintyFormatter } from "../../../formatters/UncertaintyFormatter/UncertaintyFormatter.js";
|
|
3
3
|
function ColumnUncertaintyFormatter(props) {
|
|
4
4
|
return (obProps) => {
|
|
5
5
|
return /* @__PURE__ */ jsx(UncertaintyFormatter, { obProps, ...props });
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { PriceFormatterProps } from './types';
|
|
3
|
+
import { PriceFormatterRootStyled } from './slots/PriceFormatterSlots';
|
|
4
|
+
/**
|
|
5
|
+
* Formatea un valor numérico como un precio en una moneda específica.
|
|
6
|
+
* @param {any} obProps - El objeto que contiene las propiedades.
|
|
7
|
+
* @param {string} fieldValue - El nombre de la propiedad dentro de obProps que contiene el valor a formatear.
|
|
8
|
+
* @param {string} currency - El código de la moneda (por ejemplo, 'USD' para dólares estadounidenses).
|
|
9
|
+
* @param {number} decimalDigits - La cantidad de dígitos decimales a mostrar.
|
|
10
|
+
* @returns {string} - El valor formateado como un precio en la moneda especificada.
|
|
11
|
+
* @example
|
|
12
|
+
* ```
|
|
13
|
+
* const obProps = { price: '1234.56' };
|
|
14
|
+
* const formattedPrice = getFormatPrice(obProps, 'price', 'USD', 2);
|
|
15
|
+
* console.log(formattedPrice); // "$1,234.56" (suponiendo que el idioma del navegador es 'en-US')
|
|
16
|
+
*
|
|
17
|
+
* const formattedPriceEUR = getFormatPrice(obProps, 'price', 'EUR', 2);
|
|
18
|
+
* console.log(formattedPriceEUR); // "1.234,56 €" (suponiendo que el idioma del navegador es 'es-ES')
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare function getFormatPrice(obProps: any, fieldValue: string, currency: string, decimalDigits: number): string;
|
|
22
|
+
/**
|
|
23
|
+
* El `PriceFormatter` es un componente de presentación diseñado para mostrar valores monetarios en el formato correcto según la configuración del sistema.
|
|
24
|
+
* Este componente asegura que los valores se representen en la divisa esperada, respetando las configuraciones de idioma, número de decimales y estilo visual definidos.
|
|
25
|
+
* @param {PriceFormatterProps} props - Las propiedades del componente.
|
|
26
|
+
* @returns {JSX.Element} - El componente `PriceFormatter` renderizado.
|
|
27
|
+
* @example
|
|
28
|
+
* ```
|
|
29
|
+
* import React from 'react';
|
|
30
|
+
* import { PriceFormatter } from './PriceFormatter';
|
|
31
|
+
*
|
|
32
|
+
* const obProps = { price: '1234.56' };
|
|
33
|
+
*
|
|
34
|
+
* function App() {
|
|
35
|
+
* return (
|
|
36
|
+
* <PriceFormatter obProps={obProps} fieldValue="price" size="medium" variant="body" />
|
|
37
|
+
* );
|
|
38
|
+
* }
|
|
39
|
+
*
|
|
40
|
+
* export default App;
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
43
|
+
export declare function PriceFormatter<T extends React.ElementType = typeof PriceFormatterRootStyled>(props: PriceFormatterProps): JSX.Element;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import React, { useMemo } from "react";
|
|
3
|
+
import { clsx } from "clsx";
|
|
4
|
+
import { getPropertyByString } from "@m4l/core";
|
|
5
|
+
import { useFormatter } from "@m4l/graphics";
|
|
6
|
+
import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
|
|
7
|
+
import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
|
|
8
|
+
import { P as PriceFormatterRootStyled } from "./slots/PriceFormatterSlots.js";
|
|
9
|
+
import { P as PRICE_FORMATTER_KEY_COMPONENT } from "./constants.js";
|
|
10
|
+
import { P as PriceFormatterSlots } from "./slots/PriceFormatterEnum.js";
|
|
11
|
+
import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
|
|
12
|
+
function getFormatPrice(obProps, fieldValue, currency, decimalDigits) {
|
|
13
|
+
let result = "";
|
|
14
|
+
const value = getPropertyByString(obProps, fieldValue);
|
|
15
|
+
if (isNaN(Number(value))) {
|
|
16
|
+
return Number("").toLocaleString(navigator.language, {
|
|
17
|
+
currency,
|
|
18
|
+
style: "currency",
|
|
19
|
+
currencyDisplay: "symbol",
|
|
20
|
+
useGrouping: true,
|
|
21
|
+
maximumFractionDigits: decimalDigits
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
try {
|
|
25
|
+
result = Number(value).toLocaleString(navigator.language, {
|
|
26
|
+
currency,
|
|
27
|
+
style: "currency",
|
|
28
|
+
currencyDisplay: "symbol",
|
|
29
|
+
useGrouping: true,
|
|
30
|
+
maximumFractionDigits: decimalDigits
|
|
31
|
+
}) || "";
|
|
32
|
+
} catch (_e) {
|
|
33
|
+
result = Number(value).toLocaleString("en-US", {
|
|
34
|
+
style: "currency",
|
|
35
|
+
currency: "USD",
|
|
36
|
+
currencyDisplay: "symbol",
|
|
37
|
+
useGrouping: true,
|
|
38
|
+
maximumFractionDigits: decimalDigits
|
|
39
|
+
}) || "";
|
|
40
|
+
}
|
|
41
|
+
return result;
|
|
42
|
+
}
|
|
43
|
+
function PriceFormatter(props) {
|
|
44
|
+
const { obProps, fieldValue, Component = PriceFormatterRootStyled, size = "medium", color, dataTestid, className } = props;
|
|
45
|
+
const { currentSize } = useComponentSize(size);
|
|
46
|
+
const { currencyFormatter } = useFormatter();
|
|
47
|
+
const formatterPrice = useMemo(
|
|
48
|
+
() => getFormatPrice(obProps, fieldValue, currencyFormatter.code, currencyFormatter.decimalDigits),
|
|
49
|
+
[obProps, fieldValue, currencyFormatter.code, currencyFormatter.decimalDigits]
|
|
50
|
+
);
|
|
51
|
+
if (Component === React.Fragment) {
|
|
52
|
+
return /* @__PURE__ */ jsx(Fragment, { children: formatterPrice });
|
|
53
|
+
}
|
|
54
|
+
return /* @__PURE__ */ jsx(
|
|
55
|
+
Component,
|
|
56
|
+
{
|
|
57
|
+
variant: "body",
|
|
58
|
+
size: currentSize,
|
|
59
|
+
color,
|
|
60
|
+
className: clsx(getComponentSlotRoot(PRICE_FORMATTER_KEY_COMPONENT), className),
|
|
61
|
+
...getPropDataTestId(PRICE_FORMATTER_KEY_COMPONENT, PriceFormatterSlots.root, dataTestid),
|
|
62
|
+
children: formatterPrice
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
export {
|
|
67
|
+
PriceFormatter as P,
|
|
68
|
+
getFormatPrice as g
|
|
69
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const PRICE_FORMATTER_KEY_COMPONENT = "M4LPriceFormatter";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const PriceFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { styled } from "@mui/material";
|
|
2
|
+
import { P as PRICE_FORMATTER_KEY_COMPONENT } from "../constants.js";
|
|
3
|
+
import { p as priceFormatterStyles } from "../PriceFormatter.styles.js";
|
|
4
|
+
import { P as PriceFormatterSlots } from "./PriceFormatterEnum.js";
|
|
5
|
+
import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
|
|
6
|
+
const PriceFormatterRootStyled = styled(Typography, {
|
|
7
|
+
name: PRICE_FORMATTER_KEY_COMPONENT,
|
|
8
|
+
slot: PriceFormatterSlots.root
|
|
9
|
+
})(priceFormatterStyles?.root);
|
|
10
|
+
export {
|
|
11
|
+
PriceFormatterRootStyled as P
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,5 +1,25 @@
|
|
|
1
|
-
|
|
1
|
+
import { Theme } from '@mui/material';
|
|
2
|
+
import { Sizes } from '@m4l/styles';
|
|
3
|
+
import { M4LOverridesStyleRules } from 'src/@types/augmentations';
|
|
4
|
+
import { TypographyProps } from '../../mui_extended/Typography/types';
|
|
5
|
+
import { PriceFormatterSlots } from './slots/PriceFormatterEnum';
|
|
6
|
+
import { PRICE_FORMATTER_KEY_COMPONENT } from './constants';
|
|
7
|
+
export interface PriceFormatterProps extends Pick<TypographyProps, 'color' | 'dataTestid' | 'className'> {
|
|
8
|
+
/**
|
|
9
|
+
* Componente personalizado que puede dar la presentación del formatter.
|
|
10
|
+
*/
|
|
2
11
|
Component?: React.ElementType;
|
|
12
|
+
/**
|
|
13
|
+
*Objeto de información que contine los valores que se van a utilizar en la propiedad price.
|
|
14
|
+
*/
|
|
3
15
|
obProps: any;
|
|
16
|
+
/**
|
|
17
|
+
* Valor del campo que debe ser expresado en notación de cadena.
|
|
18
|
+
*/
|
|
4
19
|
fieldValue: string;
|
|
20
|
+
/**
|
|
21
|
+
* Tamaño del componente.
|
|
22
|
+
*/
|
|
23
|
+
size?: Extract<Sizes, 'small' | 'medium'>;
|
|
5
24
|
}
|
|
25
|
+
export type PriceFormatterStyles = M4LOverridesStyleRules<keyof typeof PriceFormatterSlots, typeof PRICE_FORMATTER_KEY_COMPONENT, Theme>;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { UncertaintyFormatterProps } from './types';
|
|
3
|
+
import { UncertaintyFormatterRootStyled } from './slots/UncertaintyFormatterSlots';
|
|
4
|
+
/**
|
|
5
|
+
* Formatea un conjunto de rangos de incertidumbre en una cadena legible.
|
|
6
|
+
* @param obProps - Objeto que contiene las propiedades de los rangos de incertidumbre.
|
|
7
|
+
* @param fieldValue - Nombre del campo que contiene los valores de los rangos.
|
|
8
|
+
* @param fieldSymbol - Nombre del campo que contiene el símbolo a utilizar.
|
|
9
|
+
* @param fieldUnit - Nombre del campo que contiene la unidad de medida.
|
|
10
|
+
* @returns Una cadena que representa los rangos de incertidumbre formateados.
|
|
11
|
+
* @example
|
|
12
|
+
* const obProps = {
|
|
13
|
+
* ranges: [
|
|
14
|
+
* { cmc_min: -20, cmc_max: 0.0, cmc_min_closed: true, cmc_max_closed: false, cmc_uncertainty: 0.5 },
|
|
15
|
+
* ],
|
|
16
|
+
* symbol: 'T',
|
|
17
|
+
* unit: '°C'
|
|
18
|
+
* };
|
|
19
|
+
* const result = getUncertaintyFormat(obProps, 'ranges', 'symbol', 'unit');
|
|
20
|
+
* console.log(result); // "[-20°C ≤ T < 0°C ± 0.5]"
|
|
21
|
+
*/
|
|
22
|
+
export declare function getUncertaintyFormat(obProps: any, fieldValue: string, fieldSymbol: string, fieldUnit: string): string;
|
|
23
|
+
/**
|
|
24
|
+
* Formatea y muestra valores de incertidumbre con estilo opcional.
|
|
25
|
+
* @param props - Las propiedades para el componente UncertaintyFormatter.
|
|
26
|
+
* @returns El valor de incertidumbre formateado envuelto en el componente especificado.
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
*
|
|
30
|
+
* const ObjFormatter = {
|
|
31
|
+
* ranges: [
|
|
32
|
+
* { cmc_min: -20,
|
|
33
|
+
* cmc_max: 0.0,
|
|
34
|
+
* cmc_min_closed: true,
|
|
35
|
+
* cmc_max_closed: false,
|
|
36
|
+
* cmc_uncertainty: 0.5 },
|
|
37
|
+
* ],
|
|
38
|
+
* symbol: 'T',
|
|
39
|
+
* unit: '°C',
|
|
40
|
+
* },
|
|
41
|
+
*
|
|
42
|
+
* <UncertaintyFormatter
|
|
43
|
+
* obProps = {ObjFormatter}
|
|
44
|
+
* fieldValue='ranges'
|
|
45
|
+
* fieldSymbol='symbol'
|
|
46
|
+
* fieldUnit='unit'
|
|
47
|
+
* color='text.primary'
|
|
48
|
+
* size='medium'
|
|
49
|
+
* variant='body'
|
|
50
|
+
* />
|
|
51
|
+
* ```
|
|
52
|
+
*/
|
|
53
|
+
export declare function UncertaintyFormatter<T extends React.ElementType = typeof UncertaintyFormatterRootStyled>(props: UncertaintyFormatterProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import React, { useMemo } from "react";
|
|
3
|
+
import { clsx } from "clsx";
|
|
4
|
+
import { getPropertyByString } from "@m4l/core";
|
|
5
|
+
import { U as UncertaintyFormatterRootStyled } from "./slots/UncertaintyFormatterSlots.js";
|
|
6
|
+
import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
|
|
7
|
+
import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
|
|
8
|
+
import { U as UNCERTAINTY_FORMATTER_KEY_COMPONENT } from "./constants.js";
|
|
9
|
+
import { U as UncertaintyFormatterSlots } from "./slots/UncertaintyFormatterEnum.js";
|
|
10
|
+
import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
|
|
11
|
+
function getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit) {
|
|
12
|
+
let result = "";
|
|
13
|
+
const ranges = getPropertyByString(obProps, fieldValue);
|
|
14
|
+
const symbol = getPropertyByString(obProps, fieldSymbol);
|
|
15
|
+
const unit = getPropertyByString(obProps, fieldUnit);
|
|
16
|
+
if (ranges === void 0 || ranges === null || !Array.isArray(ranges) || typeof symbol !== "string" || typeof unit !== "string") {
|
|
17
|
+
return "[]";
|
|
18
|
+
}
|
|
19
|
+
ranges.map((obj, idx) => {
|
|
20
|
+
const cmc_min_closed = obj.cmc_min_closed !== true ? "<" : "≤";
|
|
21
|
+
const cmc_max_closed = obj.cmc_max_closed !== true ? "<" : "≤";
|
|
22
|
+
result = result.concat(
|
|
23
|
+
`${idx > 0 ? " " : ""}`,
|
|
24
|
+
obj.cmc_min !== obj.cmc_max ? `[${obj.cmc_min}${unit} ${cmc_min_closed} ${symbol} ${cmc_max_closed} ${obj.cmc_max}${unit} ± ${obj.cmc_uncertainty}]` : `[${obj.cmc_min}${unit} ± ${obj.cmc_uncertainty}]`
|
|
25
|
+
);
|
|
26
|
+
});
|
|
27
|
+
return result;
|
|
28
|
+
}
|
|
29
|
+
function UncertaintyFormatter(props) {
|
|
30
|
+
const { obProps, fieldValue, fieldSymbol, fieldUnit, Component = UncertaintyFormatterRootStyled, size = "medium", color, dataTestid, className } = props;
|
|
31
|
+
const { currentSize } = useComponentSize(size);
|
|
32
|
+
const formatterUncertainty = useMemo(
|
|
33
|
+
() => getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit),
|
|
34
|
+
[obProps, fieldValue, fieldSymbol, fieldUnit]
|
|
35
|
+
);
|
|
36
|
+
if (Component === React.Fragment) {
|
|
37
|
+
return /* @__PURE__ */ jsx(Fragment, { children: formatterUncertainty });
|
|
38
|
+
}
|
|
39
|
+
return /* @__PURE__ */ jsx(
|
|
40
|
+
Component,
|
|
41
|
+
{
|
|
42
|
+
size: currentSize,
|
|
43
|
+
variant: "body",
|
|
44
|
+
color,
|
|
45
|
+
className: clsx(getComponentSlotRoot(UNCERTAINTY_FORMATTER_KEY_COMPONENT), className),
|
|
46
|
+
...getPropDataTestId(UNCERTAINTY_FORMATTER_KEY_COMPONENT, UncertaintyFormatterSlots.root, dataTestid),
|
|
47
|
+
children: formatterUncertainty
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
export {
|
|
52
|
+
UncertaintyFormatter as U,
|
|
53
|
+
getUncertaintyFormat as g
|
|
54
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const UNCERTAINTY_FORMATTER_KEY_COMPONENT = "M4LUncertaintyFormatter";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const UncertaintyFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Typography/types').TypographyProps, keyof import('../../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { styled } from "@mui/material/styles";
|
|
2
|
+
import { U as UNCERTAINTY_FORMATTER_KEY_COMPONENT } from "../constants.js";
|
|
3
|
+
import { u as uncertaintyFormatterStyles } from "../UncertaintyFormatter.styles.js";
|
|
4
|
+
import { U as UncertaintyFormatterSlots } from "./UncertaintyFormatterEnum.js";
|
|
5
|
+
import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
|
|
6
|
+
const UncertaintyFormatterRootStyled = styled(Typography, {
|
|
7
|
+
name: UNCERTAINTY_FORMATTER_KEY_COMPONENT,
|
|
8
|
+
slot: UncertaintyFormatterSlots.root
|
|
9
|
+
})(uncertaintyFormatterStyles.root);
|
|
10
|
+
export {
|
|
11
|
+
UncertaintyFormatterRootStyled as U
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,14 +1,58 @@
|
|
|
1
|
+
import { Sizes } from '@m4l/styles';
|
|
2
|
+
import { Theme } from '@mui/material';
|
|
3
|
+
import { M4LOverridesStyleRules } from 'src/@types/augmentations';
|
|
4
|
+
import { TypographyProps } from '../../mui_extended/Typography/types';
|
|
5
|
+
import { UncertaintyFormatterSlots as Slots } from './slots/UncertaintyFormatterEnum';
|
|
6
|
+
import { UNCERTAINTY_FORMATTER_KEY_COMPONENT } from './constants';
|
|
7
|
+
/**
|
|
8
|
+
* Representa un rango de incertidumbre con límites y una incertidumbre asociada.
|
|
9
|
+
*/
|
|
1
10
|
export interface UncertaintyRange {
|
|
11
|
+
/**
|
|
12
|
+
* Indica si el límite inferior está cerrado (≤) o abierto (<).
|
|
13
|
+
*/
|
|
2
14
|
cmc_min_closed: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Valor mínimo del rango.
|
|
17
|
+
*/
|
|
3
18
|
cmc_min: number;
|
|
19
|
+
/**
|
|
20
|
+
* Indica si el límite superior está cerrado (≤) o abierto (<).
|
|
21
|
+
*/
|
|
4
22
|
cmc_max_closed: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Valor máximo del rango.
|
|
25
|
+
*/
|
|
5
26
|
cmc_max: number;
|
|
27
|
+
/**
|
|
28
|
+
* Incertidumbre asociada al rango.
|
|
29
|
+
*/
|
|
6
30
|
cmc_uncertainty: number;
|
|
7
31
|
}
|
|
8
|
-
export interface UncertaintyFormatterProps {
|
|
32
|
+
export interface UncertaintyFormatterProps extends Pick<TypographyProps, 'color' | 'dataTestid' | 'className'> {
|
|
33
|
+
/**
|
|
34
|
+
* Componente personalizado que puede dar la presentación del formatter.
|
|
35
|
+
*/
|
|
9
36
|
Component?: React.ElementType;
|
|
37
|
+
/**
|
|
38
|
+
* Objeto de información que contine los valores que se van a utilizar en las propiedades fieldUnit y fieldValue.
|
|
39
|
+
*/
|
|
10
40
|
obProps: any;
|
|
41
|
+
/**
|
|
42
|
+
* Valor del campo que debe ser expresado en notación de cadena.
|
|
43
|
+
*/
|
|
11
44
|
fieldValue: string;
|
|
45
|
+
/**
|
|
46
|
+
* Valor del simbolo que debe ser expresado en notación de cadena.
|
|
47
|
+
*/
|
|
12
48
|
fieldSymbol: string;
|
|
49
|
+
/**
|
|
50
|
+
* Valor de la unidad de medida que debe ser expresado en notación de cadena.
|
|
51
|
+
*/
|
|
13
52
|
fieldUnit: string;
|
|
53
|
+
/**
|
|
54
|
+
* Tamaño del componente.
|
|
55
|
+
*/
|
|
56
|
+
size?: Extract<Sizes, 'small' | 'medium'>;
|
|
14
57
|
}
|
|
58
|
+
export type UncertaintyFormatterStyles = M4LOverridesStyleRules<keyof typeof Slots, typeof UNCERTAINTY_FORMATTER_KEY_COMPONENT, Theme>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export { BooleanFormatter } from './BooleanFormatter/BooleanFormatter';
|
|
2
2
|
export { useFormatDate as getFormatDate, DateFormatter } from './DateFormatter/DateFormatter';
|
|
3
|
-
export { UncertaintyFormatter, getUncertaintyFormat } from './UncertaintyFormatter';
|
|
3
|
+
export { UncertaintyFormatter, getUncertaintyFormat } from './UncertaintyFormatter/UncertaintyFormatter';
|
|
4
4
|
export { PointsFormatter, getFormatPoints } from './PointsFormatter/PointsFormatter';
|
|
5
5
|
export { getFormatConcatenated, ConcatenatedFormatter } from './ConcatenatedFormatter/ConcatenatedFormatter';
|
|
6
6
|
export { useFormatPeriod, PeriodFormatter } from './PeriodFormatter/PeriodFormatter';
|
|
7
|
-
export { PriceFormatter, getFormatPrice } from './PriceFormatter';
|
|
7
|
+
export { PriceFormatter, getFormatPrice } from './PriceFormatter/PriceFormatter';
|
|
8
8
|
export * from './DistanceToNowFormatter';
|
|
9
9
|
export type { UncertaintyRange } from './UncertaintyFormatter/types';
|
package/index.js
CHANGED
|
@@ -43,11 +43,11 @@ import { R as R12 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFie
|
|
|
43
43
|
import { R as R13 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
|
|
44
44
|
import { B } from "./components/formatters/BooleanFormatter/BooleanFormatter.js";
|
|
45
45
|
import { D as D2, u as u4 } from "./components/formatters/DateFormatter/DateFormatter.js";
|
|
46
|
-
import { U, g as g7 } from "./components/formatters/UncertaintyFormatter/
|
|
46
|
+
import { U, g as g7 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
|
|
47
47
|
import { P as P2, g as g8 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
|
|
48
48
|
import { C, g as g9 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
|
|
49
49
|
import { P as P3, u as u5 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
|
|
50
|
-
import { P as P4, g as g10 } from "./components/formatters/PriceFormatter/
|
|
50
|
+
import { P as P4, g as g10 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
|
|
51
51
|
import { g as g11 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
|
|
52
52
|
import { D as D3 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
|
|
53
53
|
import { g as g12 } from "./components/formatters/dictionary.js";
|
package/package.json
CHANGED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { PriceFormatterProps } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* TODO: Documentar
|
|
4
|
-
*/
|
|
5
|
-
export declare function getFormatPrice(obProps: any, fieldValue: string, currency: string, decimalDigits: number): string;
|
|
6
|
-
/**
|
|
7
|
-
* TODO: Documentar
|
|
8
|
-
*/
|
|
9
|
-
export declare function PriceFormatter(props: PriceFormatterProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { getPropertyByString } from "@m4l/core";
|
|
3
|
-
import { useFormatter } from "@m4l/graphics";
|
|
4
|
-
import { W as WrapperComponent } from "../../WrapperComponent/index.js";
|
|
5
|
-
function getFormatPrice(obProps, fieldValue, currency, decimalDigits) {
|
|
6
|
-
let result = "";
|
|
7
|
-
const value = getPropertyByString(obProps, fieldValue);
|
|
8
|
-
try {
|
|
9
|
-
result = Number(value).toLocaleString(navigator.language, {
|
|
10
|
-
currency,
|
|
11
|
-
style: "currency",
|
|
12
|
-
currencyDisplay: "symbol",
|
|
13
|
-
useGrouping: true,
|
|
14
|
-
maximumFractionDigits: decimalDigits
|
|
15
|
-
}) || "";
|
|
16
|
-
} catch (_e) {
|
|
17
|
-
result = Number(value).toLocaleString("en-US", {
|
|
18
|
-
style: "currency",
|
|
19
|
-
currency: "USD",
|
|
20
|
-
currencyDisplay: "symbol",
|
|
21
|
-
useGrouping: true,
|
|
22
|
-
maximumFractionDigits: decimalDigits
|
|
23
|
-
}) || "";
|
|
24
|
-
}
|
|
25
|
-
return result;
|
|
26
|
-
}
|
|
27
|
-
function PriceFormatter(props) {
|
|
28
|
-
const { obProps, fieldValue, Component = WrapperComponent } = props;
|
|
29
|
-
const { currencyFormatter } = useFormatter();
|
|
30
|
-
return /* @__PURE__ */ jsx(Component, { children: getFormatPrice(obProps, fieldValue, currencyFormatter.code, currencyFormatter.decimalDigits) });
|
|
31
|
-
}
|
|
32
|
-
export {
|
|
33
|
-
PriceFormatter as P,
|
|
34
|
-
getFormatPrice as g
|
|
35
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { UncertaintyFormatterProps } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* TODO: Documentar
|
|
4
|
-
*/
|
|
5
|
-
export declare function getUncertaintyFormat(obProps: any, fieldValue: string, fieldSymbol: string, fieldUnit: string): string;
|
|
6
|
-
/**
|
|
7
|
-
* TODO: Documentar
|
|
8
|
-
*/
|
|
9
|
-
export declare function UncertaintyFormatter(props: UncertaintyFormatterProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { getPropertyByString } from "@m4l/core";
|
|
3
|
-
import { W as WrapperComponent } from "../../WrapperComponent/index.js";
|
|
4
|
-
function getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit) {
|
|
5
|
-
let result = "";
|
|
6
|
-
const ranges = getPropertyByString(obProps, fieldValue);
|
|
7
|
-
const symbol = getPropertyByString(obProps, fieldSymbol);
|
|
8
|
-
const unit = getPropertyByString(obProps, fieldUnit);
|
|
9
|
-
if (ranges === void 0 || ranges === null || !Array.isArray(ranges) || typeof symbol !== "string" || typeof unit !== "string") {
|
|
10
|
-
return "[]";
|
|
11
|
-
}
|
|
12
|
-
ranges.map((obj, idx) => {
|
|
13
|
-
const cmc_min_closed = obj.cmc_min_closed !== true ? "<" : "≤";
|
|
14
|
-
const cmc_max_closed = obj.cmc_max_closed !== true ? "<" : "≤";
|
|
15
|
-
result = result.concat(
|
|
16
|
-
`${idx > 0 ? " " : ""}`,
|
|
17
|
-
obj.cmc_min !== obj.cmc_max ? `[${obj.cmc_min}${unit} ${cmc_min_closed} ${symbol} ${cmc_max_closed} ${obj.cmc_max}${unit} ± ${obj.cmc_uncertainty}]` : `[${obj.cmc_min}${unit} ± ${obj.cmc_uncertainty}]`
|
|
18
|
-
);
|
|
19
|
-
});
|
|
20
|
-
return result;
|
|
21
|
-
}
|
|
22
|
-
function UncertaintyFormatter(props) {
|
|
23
|
-
const { obProps, fieldValue, fieldSymbol, fieldUnit, Component = WrapperComponent } = props;
|
|
24
|
-
return /* @__PURE__ */ jsx(Component, { children: getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit) });
|
|
25
|
-
}
|
|
26
|
-
export {
|
|
27
|
-
UncertaintyFormatter as U,
|
|
28
|
-
getUncertaintyFormat as g
|
|
29
|
-
};
|