@proximus/lavender-price-native 0.1.0-alpha.0

package/dist/PxPrice.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export declare function useParsedPrice(amount: number): string[];
+export declare function usePriceColor(status: PriceStatus, inverted?: boolean): {
+    price: string;
+    prefix: string;
+};
+export interface PxPriceProps {
+    amount: number;
+    prefix?: string;
+    suffix?: string;
+    status?: PriceStatus;
+    inverted?: boolean;
+    testID?: string;
+    containerStyle?: StyleProp<TextStyle>;
+}
+export type PriceStatus = 'Default' | 'Promo' | 'Neutral' | 'Error' | 'Disabled';
+export declare function PxPrice({ amount, prefix, suffix, status, inverted, testID, containerStyle, }: PxPriceProps): React.JSX.Element;
+//# sourceMappingURL=PxPrice.d.ts.map

package/dist/PxPrice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxPrice.d.ts","sourceRoot":"","sources":["../src/PxPrice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,YAY5C;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,UAAQ;;;EA0ClE;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC;AAED,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,OAAO,GACP,SAAS,GACT,OAAO,GACP,UAAU,CAAC;AAEf,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAkB,EAClB,QAAQ,EACR,MAAM,EACN,cAAc,GACf,EAAE,YAAY,qBAmDd"}

package/dist/PxPrice.js

@@ -0,0 +1,90 @@
+import React, { useMemo } from 'react';
+import { Body, Header } from '@proximus/lavender-texts-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { Text } from 'react-native';
+import { e2eID } from '@proximus/lavender-common-native';
+export function useParsedPrice(amount) {
+    return useMemo(() => {
+        try {
+            // To floor round the parsed value to 2 decimal places (truncating instead of rounding up),
+            // we multiply the number by 1000 (not 100 to keep the first two decimals untouched),
+            // use Math.floor to remove the remaining decimals, and then divide back by 1000.
+            const parsed = parseFloat((Math.floor(amount * 1000) / 1000));
+            return parsed.toFixed(2).split('.');
+        }
+        catch (e) {
+            return ['0', '00'];
+        }
+    }, [amount]);
+}
+export function usePriceColor(status, inverted = false) {
+    const { theme } = useTheme();
+    const suffix = useMemo(() => (inverted ? 'Inverted' : 'Default'), [inverted]);
+    const colors = useMemo(() => ({
+        prefix: theme.t(`ColorTextNeutral${suffix}`),
+    }), [theme, suffix]);
+    return useMemo(() => {
+        switch (status) {
+            case 'Promo':
+                return {
+                    ...colors,
+                    price: theme.t(`ColorTextPurposePromo${suffix}`),
+                };
+            case 'Neutral':
+                return {
+                    ...colors,
+                    price: theme.t(`ColorTextNeutral${suffix}`),
+                };
+            case 'Error':
+                return {
+                    ...colors,
+                    price: theme.t(`ColorTextPurposeError${suffix}`),
+                };
+            case 'Disabled':
+                return {
+                    prefix: theme.t(`ColorTextStateDisabled${suffix}`),
+                    price: theme.t(`ColorTextStateDisabled${suffix}`),
+                };
+            case 'Default':
+            default:
+                return {
+                    ...colors,
+                    price: theme.t(`ColorTextBrand${suffix}`),
+                };
+        }
+    }, [status, theme, suffix, colors]);
+}
+export function PxPrice({ amount, prefix, suffix, status = 'Default', inverted, testID, containerStyle, }) {
+    const [num, decimal] = useParsedPrice(amount);
+    const colors = usePriceColor(status, inverted);
+    const { theme } = useTheme();
+    // 1.5 factor because of this android issue: https://github.com/facebook/react-native/issues/29507
+    const lineHeight = theme.t('TextSizeBodyMMobile').number * 1.5;
+    return (React.createElement(Body, { style: [
+            containerStyle,
+            {
+                fontSize: theme.t('TextSizeBodyMMobile').number,
+                color: colors.prefix,
+                lineHeight,
+            },
+        ], ...e2eID(testID) },
+        React.createElement(Text, null, prefix && prefix + ' '),
+        React.createElement(Header, { style: {
+                fontSize: theme.t('PriceSizeSignMMobile').number,
+                color: colors.price,
+                lineHeight,
+            } }, "\u20AC"),
+        React.createElement(Header, { style: {
+                fontSize: theme.t('PriceSizeUnitMMobile').number,
+                color: colors.price,
+                lineHeight,
+            } }, num),
+        React.createElement(Header, { style: {
+                fontSize: theme.t('PriceSizeDecimalMMobile').number,
+                color: colors.price,
+                lineHeight,
+            } },
+            ".",
+            decimal),
+        React.createElement(Text, null, suffix)));
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PxPrice';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './PxPrice';

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@proximus/lavender-price-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Lavender native price component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}