@m4l/components 9.1.74 → 9.1.76
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/ColumnConcatenatedValueFormatter/index.js +1 -1
- package/components/DataGrid/formatters/ColumnPriceFormatter/index.js +1 -1
- package/components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.d.ts +32 -0
- package/components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js +62 -0
- package/components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.styles.d.ts +2 -0
- package/components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.styles.js +11 -0
- package/components/formatters/ConcatenatedFormatter/constants.d.ts +1 -0
- package/components/formatters/ConcatenatedFormatter/constants.js +4 -0
- package/components/formatters/ConcatenatedFormatter/slots/ConcatenatedFormatterEnum.d.ts +3 -0
- package/components/formatters/ConcatenatedFormatter/slots/ConcatenatedFormatterEnum.js +7 -0
- package/components/formatters/ConcatenatedFormatter/slots/ConcatenatedFormatterSlots.d.ts +1 -0
- package/components/formatters/ConcatenatedFormatter/slots/ConcatenatedFormatterSlots.js +12 -0
- package/components/formatters/ConcatenatedFormatter/test/index.test.d.ts +1 -0
- package/components/formatters/ConcatenatedFormatter/types.d.ts +21 -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/index.d.ts +2 -2
- package/index.js +2 -2
- package/package.json +1 -1
- package/components/formatters/ConcatenatedFormatter/index.d.ts +0 -14
- package/components/formatters/ConcatenatedFormatter/index.js +0 -37
- package/components/formatters/ConcatenatedFormatter/index.test.d.ts +0 -4
- package/components/formatters/PriceFormatter/index.d.ts +0 -9
- package/components/formatters/PriceFormatter/index.js +0 -35
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { getPropertyByString } from "@m4l/core";
|
|
3
|
-
import { C as ConcatenatedFormatter } from "../../../formatters/ConcatenatedFormatter/
|
|
3
|
+
import { C as ConcatenatedFormatter } from "../../../formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
|
|
4
4
|
function ColumnConcatenatedValueFormatter(props) {
|
|
5
5
|
const { fieldValue, fieldSeparator, Component } = props;
|
|
6
6
|
return (obProps) => {
|
|
@@ -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 });
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ConcatenatedFormatterRootStyled } from './slots/ConcatenatedFormatterSlots';
|
|
3
|
+
import { ConcatenatedFormatterProps } from './types';
|
|
4
|
+
/**
|
|
5
|
+
* Concatena un arrays de strings y/o numbers. Retorna un string
|
|
6
|
+
* @param values Array de strings o numnbers a concatenar
|
|
7
|
+
* @param separator String utilizado como separador entre componentes del array
|
|
8
|
+
* @returns string
|
|
9
|
+
* @example
|
|
10
|
+
* const data = ['10 enero','15 febrero','22 marzo']
|
|
11
|
+
*
|
|
12
|
+
* const result = getFormatConcatenated(data,' | ');
|
|
13
|
+
* console.log(result); // "10 enero | 15 febrero | 22 marzo"
|
|
14
|
+
*/
|
|
15
|
+
export declare function getFormatConcatenated(values: Array<string | number>, separator: string | number): string;
|
|
16
|
+
/**
|
|
17
|
+
* Concatena un arrays de strings y/o numbers. Retorna un JSX
|
|
18
|
+
* @param props {values: Array<string> Valores a concatenar, separator: string Separador entre valores concatenados, Component: ElementType Componente que abraza la respuesta}
|
|
19
|
+
* @returns
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
*
|
|
23
|
+
* <ConcatenatedFormatter
|
|
24
|
+
* value = {['10 enero','15 febrero','22 marzo']}
|
|
25
|
+
* separator= ' | '
|
|
26
|
+
* color='text.primary'
|
|
27
|
+
* size='medium'
|
|
28
|
+
* variant='body'
|
|
29
|
+
* />
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
export declare function ConcatenatedFormatter<T extends React.ElementType = typeof ConcatenatedFormatterRootStyled>(props: ConcatenatedFormatterProps): JSX.Element;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import React, { useMemo } from "react";
|
|
4
|
+
import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
|
|
5
|
+
import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
|
|
6
|
+
import { C as ConcatenatedFormatterRootStyled } from "./slots/ConcatenatedFormatterSlots.js";
|
|
7
|
+
import { C as CONTATENATED_FORMATTER_KEY_COMPONENT } from "./constants.js";
|
|
8
|
+
import { C as ConcatenatedFormatterSlots } from "./slots/ConcatenatedFormatterEnum.js";
|
|
9
|
+
import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
|
|
10
|
+
function getFormatConcatenated(values, separator) {
|
|
11
|
+
const returnSymbol = "";
|
|
12
|
+
if (values === null) {
|
|
13
|
+
return returnSymbol;
|
|
14
|
+
}
|
|
15
|
+
if (!Array.isArray(values)) {
|
|
16
|
+
return values.toString();
|
|
17
|
+
} else {
|
|
18
|
+
if (values.length === 0) {
|
|
19
|
+
return returnSymbol;
|
|
20
|
+
} else {
|
|
21
|
+
const result = values.map((value) => {
|
|
22
|
+
if (value === null || value === void 0) {
|
|
23
|
+
return returnSymbol;
|
|
24
|
+
} else {
|
|
25
|
+
if (typeof value === "string" || typeof value === "number") {
|
|
26
|
+
return value.toString();
|
|
27
|
+
} else {
|
|
28
|
+
return returnSymbol;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
const output = result.join(separator.toString());
|
|
33
|
+
return output.trim();
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
function ConcatenatedFormatter(props) {
|
|
38
|
+
const { values = [], separator = " ", Component = ConcatenatedFormatterRootStyled, color, size = "medium", dataTestid, className } = props;
|
|
39
|
+
const { currentSize } = useComponentSize(size);
|
|
40
|
+
const formatterContatenated = useMemo(
|
|
41
|
+
() => getFormatConcatenated(values, separator),
|
|
42
|
+
[values, separator]
|
|
43
|
+
);
|
|
44
|
+
if (Component === React.Fragment) {
|
|
45
|
+
return /* @__PURE__ */ jsx(Fragment, { children: formatterContatenated });
|
|
46
|
+
}
|
|
47
|
+
return /* @__PURE__ */ jsx(
|
|
48
|
+
Component,
|
|
49
|
+
{
|
|
50
|
+
color,
|
|
51
|
+
size: currentSize,
|
|
52
|
+
variant: "body",
|
|
53
|
+
className: clsx(getComponentSlotRoot(CONTATENATED_FORMATTER_KEY_COMPONENT), className),
|
|
54
|
+
...getPropDataTestId(CONTATENATED_FORMATTER_KEY_COMPONENT, ConcatenatedFormatterSlots.root, dataTestid),
|
|
55
|
+
children: formatterContatenated
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
export {
|
|
60
|
+
ConcatenatedFormatter as C,
|
|
61
|
+
getFormatConcatenated as g
|
|
62
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const CONTATENATED_FORMATTER_KEY_COMPONENT = "M4LConcatenatedFormatter";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const ConcatenatedFormatterRootStyled: 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 { T as Typography } from "../../../mui_extended/Typography/Typography.js";
|
|
3
|
+
import { c as concatenatedFormatterStyles } from "../ConcatenatedFormatter.styles.js";
|
|
4
|
+
import { C as CONTATENATED_FORMATTER_KEY_COMPONENT } from "../constants.js";
|
|
5
|
+
import { C as ConcatenatedFormatterSlots } from "./ConcatenatedFormatterEnum.js";
|
|
6
|
+
const ConcatenatedFormatterRootStyled = styled(Typography, {
|
|
7
|
+
name: CONTATENATED_FORMATTER_KEY_COMPONENT,
|
|
8
|
+
slot: ConcatenatedFormatterSlots.root
|
|
9
|
+
})(concatenatedFormatterStyles.root);
|
|
10
|
+
export {
|
|
11
|
+
ConcatenatedFormatterRootStyled as C
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,11 +1,31 @@
|
|
|
1
1
|
import { ElementType } from 'react';
|
|
2
|
+
import { Theme } from '@mui/material';
|
|
3
|
+
import { Sizes } from '@m4l/styles';
|
|
4
|
+
import { M4LOverridesStyleRules } from 'src/@types/augmentations';
|
|
5
|
+
import { TypographyProps } from '../../mui_extended/Typography/types';
|
|
6
|
+
import { ConcatenatedFormatterSlots as Slots } from './slots/ConcatenatedFormatterEnum';
|
|
7
|
+
import { CONTATENATED_FORMATTER_KEY_COMPONENT } from './constants';
|
|
2
8
|
/**
|
|
3
9
|
* values: Array de strings a concatenar
|
|
4
10
|
* separator: String usado para concatenar el array de strings
|
|
5
11
|
* Component: Tipo de componente HTML que "abraza" el resultado
|
|
6
12
|
*/
|
|
7
|
-
export interface ConcatenatedFormatterProps {
|
|
13
|
+
export interface ConcatenatedFormatterProps extends Pick<TypographyProps, 'color' | 'dataTestid' | 'className'> {
|
|
14
|
+
/**
|
|
15
|
+
* Valores de información que se usarán para concatenar al texto final.
|
|
16
|
+
*/
|
|
8
17
|
values: Array<string | number>;
|
|
18
|
+
/**
|
|
19
|
+
* Cadena de texto que se usa para dividir los valores de información final.
|
|
20
|
+
*/
|
|
9
21
|
separator?: string | number;
|
|
22
|
+
/**
|
|
23
|
+
* Componente personalizado que puede dar la presentación del formatter
|
|
24
|
+
*/
|
|
10
25
|
Component?: ElementType;
|
|
26
|
+
/**
|
|
27
|
+
* Tamaño del componente.
|
|
28
|
+
*/
|
|
29
|
+
size?: Extract<Sizes, 'small' | 'medium'>;
|
|
11
30
|
}
|
|
31
|
+
export type ConcatenatedFormatterStyles = M4LOverridesStyleRules<keyof typeof Slots, typeof CONTATENATED_FORMATTER_KEY_COMPONENT, Theme>;
|
|
@@ -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>;
|
|
@@ -2,8 +2,8 @@ export { BooleanFormatter } from './BooleanFormatter/BooleanFormatter';
|
|
|
2
2
|
export { useFormatDate as getFormatDate, DateFormatter } from './DateFormatter/DateFormatter';
|
|
3
3
|
export { UncertaintyFormatter, getUncertaintyFormat } from './UncertaintyFormatter';
|
|
4
4
|
export { PointsFormatter, getFormatPoints } from './PointsFormatter/PointsFormatter';
|
|
5
|
-
export { getFormatConcatenated, ConcatenatedFormatter } from './ConcatenatedFormatter';
|
|
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
|
@@ -45,9 +45,9 @@ import { B } from "./components/formatters/BooleanFormatter/BooleanFormatter.js"
|
|
|
45
45
|
import { D as D2, u as u4 } from "./components/formatters/DateFormatter/DateFormatter.js";
|
|
46
46
|
import { U, g as g7 } from "./components/formatters/UncertaintyFormatter/index.js";
|
|
47
47
|
import { P as P2, g as g8 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
|
|
48
|
-
import { C, g as g9 } from "./components/formatters/ConcatenatedFormatter/
|
|
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,14 +0,0 @@
|
|
|
1
|
-
import { ConcatenatedFormatterProps } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Concatena un arrays de strings y/o numbers. Retorna un string
|
|
4
|
-
* @param values Array de strings o numnbers a concatenar
|
|
5
|
-
* @param separator String utilizado como separador entre componentes del array
|
|
6
|
-
* @returns string
|
|
7
|
-
*/
|
|
8
|
-
export declare function getFormatConcatenated(values: Array<string | number>, separator: string | number): string;
|
|
9
|
-
/**
|
|
10
|
-
* Concatena un arrays de strings y/o numbers. Retorna un JSX
|
|
11
|
-
* @param props {values: Array<string> Valores a concatenar, separator: string Separador entre valores concatenados, Component: ElementType Componente que abraza la respuesta}
|
|
12
|
-
* @returns
|
|
13
|
-
*/
|
|
14
|
-
export declare function ConcatenatedFormatter(props: ConcatenatedFormatterProps): JSX.Element;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { W as WrapperComponent } from "../../WrapperComponent/index.js";
|
|
3
|
-
function getFormatConcatenated(values, separator) {
|
|
4
|
-
const returnSymbol = "";
|
|
5
|
-
if (values === null) {
|
|
6
|
-
return returnSymbol;
|
|
7
|
-
}
|
|
8
|
-
if (!Array.isArray(values)) {
|
|
9
|
-
return values.toString();
|
|
10
|
-
} else {
|
|
11
|
-
if (values.length === 0) {
|
|
12
|
-
return returnSymbol;
|
|
13
|
-
} else {
|
|
14
|
-
const result = values.map((value) => {
|
|
15
|
-
if (value === null || value === void 0) {
|
|
16
|
-
return returnSymbol;
|
|
17
|
-
} else {
|
|
18
|
-
if (typeof value === "string" || typeof value === "number") {
|
|
19
|
-
return value.toString();
|
|
20
|
-
} else {
|
|
21
|
-
return returnSymbol;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
const output = result.join(separator.toString());
|
|
26
|
-
return output.trim();
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
function ConcatenatedFormatter(props) {
|
|
31
|
-
const { values = [], separator = " ", Component = WrapperComponent } = props;
|
|
32
|
-
return /* @__PURE__ */ jsx(Component, { children: getFormatConcatenated(values, separator) });
|
|
33
|
-
}
|
|
34
|
-
export {
|
|
35
|
-
ConcatenatedFormatter as C,
|
|
36
|
-
getFormatConcatenated as g
|
|
37
|
-
};
|
|
@@ -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
|
-
};
|