@janiscommerce/ui-native 1.12.0 → 1.13.1

package/dist/components/molecules/Input/index.d.ts

@@ -1,8 +1,26 @@
 import React from 'react';
 import { TextInput } from 'react-native';
 import { BaseInputProps } from '../../atoms/BaseInput';
-interface InputProps extends BaseInputProps {
-    type: 'currency' | 'number' | 'text' | 'email' | 'phone';
+export type InputVariant = 'default' | 'weightable' | 'amountTotal' | 'currency' | 'numeric';
+interface BaseInputPropsExtended extends BaseInputProps {
+    type?: 'currency' | 'number' | 'text' | 'email' | 'phone';
+    variant?: InputVariant;
+    onChangeText?: (text: string) => void;
+    totalValue?: number;
 }
+type AmountTotalProps = BaseInputPropsExtended & {
+    variant: 'amountTotal';
+    totalValue: number;
+};
+type OtherVariantProps = BaseInputPropsExtended & {
+    variant: Exclude<InputVariant, 'amountTotal'>;
+    totalValue?: never;
+};
+type DefaultProps = BaseInputPropsExtended & {
+    variant?: never;
+    type: 'currency' | 'number' | 'text' | 'email' | 'phone';
+    totalValue?: never;
+};
+export type InputProps = AmountTotalProps | OtherVariantProps | DefaultProps;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInput>>;
 export default Input;

package/dist/components/molecules/Input/index.js

@@ -1,29 +1,80 @@
-import React, { forwardRef } from 'react';
-import { StyleSheet } from 'react-native';
+import React, { forwardRef, useState, useRef } from 'react';
+import { StyleSheet, View, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import BaseInput from '../../atoms/BaseInput';
 import { palette } from '../../../theme/palette';
 import { moderateScale, scaledForDevice } from '../../../scale';
+import handleChangeText from './utils/handleChangeText';
+import Typography from '../../atoms/Typography';
 var InputType;
 (function (InputType) {
     InputType["currency"] = "numeric";
     InputType["number"] = "numeric";
+    InputType["default"] = "default";
     InputType["text"] = "default";
     InputType["email"] = "email-address";
     InputType["phone"] = "phone-pad";
+    InputType["weightable"] = "numeric";
+    InputType["amountTotal"] = "numeric";
+    InputType["numeric"] = "numeric";
 })(InputType || (InputType = {}));
-const Input = forwardRef(({ style, type, ...props }, ref) => {
+const Input = forwardRef(({ style, type, variant = 'default', totalValue, onChangeText, ...props }, ref) => {
+    const [value, setValue] = useState('');
+    const isAmountTotalVariant = variant === 'amountTotal';
+    const internalRef = useRef(null);
+    const inputRef = ref ?? internalRef;
+    if (isAmountTotalVariant && typeof totalValue !== 'number') {
+        return null;
+    }
     const styles = StyleSheet.create({
-        input: {
+        container: {
             padding: 0,
             height: scaledForDevice(70, moderateScale),
             borderColor: palette.primary.main,
             borderWidth: 2,
             borderRadius: 8,
-            fontSize: scaledForDevice(42, moderateScale),
             backgroundColor: palette.white.light,
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'row',
+        },
+        input: {
             color: palette.black.main,
+            fontSize: scaledForDevice(42, moderateScale),
+        },
+        totalValue: {
+            color: palette.primary.main,
         },
     });
-    return (<BaseInput style={[styles.input, style]} ref={ref} keyboardType={InputType[type]} {...props}/>);
+    const changeTextCb = (text) => {
+        const transformedText = handleChangeText(text, variant);
+        setValue(transformedText);
+        if (onChangeText) {
+            onChangeText(transformedText);
+        }
+    };
+    const handlePress = () => {
+        // istanbul ignore next
+        if (inputRef && 'current' in inputRef && inputRef.current) {
+            Keyboard.dismiss();
+            inputRef.current.focus();
+        }
+    };
+    const resolvedKeyboardType = (() => {
+        if (type && type in InputType) {
+            return InputType[type];
+        }
+        if (variant && variant in InputType) {
+            return InputType[variant];
+        }
+        return InputType.default;
+    })();
+    return (<TouchableWithoutFeedback onPress={handlePress}>
+				<View style={styles.container}>
+					<BaseInput style={[styles.input, style]} ref={inputRef} value={value} keyboardType={resolvedKeyboardType} onChangeText={changeTextCb} {...props}/>
+					{isAmountTotalVariant && (<Typography style={styles.totalValue} type="display" size="medium">
+							{`/${totalValue?.toString()}`}
+						</Typography>)}
+				</View>
+			</TouchableWithoutFeedback>);
 });
 export default Input;

package/dist/components/molecules/Input/utils/handleChangeText/index.d.ts

@@ -0,0 +1,3 @@
+import { InputVariant } from '../../../Input';
+declare const handleChangeText: (text: string, variant: InputVariant) => string;
+export default handleChangeText;

package/dist/components/molecules/Input/utils/handleChangeText/index.js

@@ -0,0 +1,16 @@
+const variantLogicMapper = {
+    default: (value) => value,
+    weightable: (value) => value.replace(',', '.').replace(/[^0-9.]/g, ''),
+    amountTotal: (value) => value.replace(',', '.').replace(/[^0-9.]/g, ''),
+    currency: (value) => value.replace(/[^0-9.,]/g, ''),
+    numeric: (value) => value.replace(/[^0-9.,]/g, ''),
+};
+const transformText = (text, variant) => {
+    const transform = variantLogicMapper[variant] || variantLogicMapper.default;
+    return transform(text);
+};
+const handleChangeText = (text, variant) => {
+    const transformedText = transformText(text, variant);
+    return transformedText;
+};
+export default handleChangeText;

package/dist/theme/typography.js

@@ -1,28 +1,29 @@
+import { moderateScale, scaledForDevice } from '../scale';
 const typography = {
-    display: { weight: '400', size: 42, lineHeight: 50 },
+    display: { weight: '400', size: scaledForDevice(42, moderateScale), lineHeight: 50 },
     heading: {
-        large: { weight: '500', size: 34, lineHeight: 40 },
-        medium: { weight: '500', size: 26, lineHeight: 32 },
-        small: { weight: '400', size: 24, lineHeight: 28 },
+        large: { weight: '500', size: scaledForDevice(34, moderateScale), lineHeight: 40 },
+        medium: { weight: '500', size: scaledForDevice(26, moderateScale), lineHeight: 32 },
+        small: { weight: '400', size: scaledForDevice(24, moderateScale), lineHeight: 28 },
     },
     title: {
-        large: { weight: '400', size: 20, lineHeight: 24 },
-        medium: { weight: '700', size: 18, lineHeight: 22 },
-        small: { weight: '700', size: 14, lineHeight: 16 },
+        large: { weight: '400', size: scaledForDevice(20, moderateScale), lineHeight: 24 },
+        medium: { weight: '700', size: scaledForDevice(18, moderateScale), lineHeight: 22 },
+        small: { weight: '700', size: scaledForDevice(14, moderateScale), lineHeight: 16 },
     },
     label: {
-        large: { weight: '500', size: 16, lineHeight: 18 },
-        medium: { weight: '500', size: 14, lineHeight: 16 },
-        small: { weight: '500', size: 12, lineHeight: 14 },
+        large: { weight: '500', size: scaledForDevice(16, moderateScale), lineHeight: 18 },
+        medium: { weight: '500', size: scaledForDevice(14, moderateScale), lineHeight: 16 },
+        small: { weight: '500', size: scaledForDevice(12, moderateScale), lineHeight: 14 },
     },
     body: {
-        large: { weight: '400', size: 16, lineHeight: 20 },
-        medium: { weight: '400', size: 14, lineHeight: 18 },
-        small: { weight: '400', size: 12, lineHeight: 16 },
+        large: { weight: '400', size: scaledForDevice(16, moderateScale), lineHeight: 20 },
+        medium: { weight: '400', size: scaledForDevice(14, moderateScale), lineHeight: 18 },
+        small: { weight: '400', size: scaledForDevice(12, moderateScale), lineHeight: 16 },
     },
     overline: {
-        large: { weight: '500', size: 14, lineHeight: 16, spacing: 1 },
-        small: { weight: '500', size: 12, lineHeight: 14, spacing: 0.7 },
+        large: { weight: '500', size: scaledForDevice(14, moderateScale), lineHeight: 16, spacing: 1 },
+        small: { weight: '500', size: scaledForDevice(12, moderateScale), lineHeight: 14, spacing: 0.7 },
     },
 };
 export default typography;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.12.0",
+	"version": "1.13.1",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",