@tecsinapse/react-core 1.12.4 → 1.12.8

package/src/styles/definitions.ts

@@ -8,8 +8,9 @@ import {
   Miscellaneous,
   Spacing,
   TypographyVariation,
-  ZIndex,
+  ZIndex
 } from '../types/defaults';
+import { RFValueStr } from '../utils';
 
 export const statusColor = {
   error: {
@@ -48,81 +49,81 @@ export const hex2rgba: (hex, alpha?: number) => string = (hex, alpha = 1) => {
 };
 
 export const miscellaneous: Miscellaneous = {
-  shadow: '#85807a', // rgba(133, 128, 122, 0.08)
+  shadow: '#000000', // black
   overlay: '#282625', // rgba(40, 38, 37, 0.5)
   bodyColor: '#f8f7f7',
   surfaceColor: '#ffffff', //input, group button, cards
 };
 
 export const spacing: Spacing = {
-  nano: '2px',
-  micro: '4px',
-  mili: '8px',
-  centi: '12px',
-  deca: '16px',
-  kilo: '24px',
-  mega: '32px',
-  giga: '40px',
-  tera: '48px',
-  peta: '56px',
-  hexa: '64px',
+  nano: RFValueStr('2px'),
+  micro: RFValueStr('4px'),
+  mili: RFValueStr('8px'),
+  centi: RFValueStr('12px'),
+  deca: RFValueStr('16px'),
+  kilo: RFValueStr('24px'),
+  mega: RFValueStr('32px'),
+  giga: RFValueStr('40px'),
+  tera: RFValueStr('48px'),
+  peta: RFValueStr('56px'),
+  hexa: RFValueStr('64px'),
 };
 
 export const iconSize: IconSize = {
-  micro: '12px',
-  mili: '14px',
-  centi: '16px', // '1rem'
-  deca: '18px', // '1.5rem'
-  kilo: '24px', // '1.6rem'
-  mega: '32px', // '2rem'
+  micro: RFValueStr('12px'),
+  mili: RFValueStr('14px'),
+  centi: RFValueStr('16px'), // '1rem'
+  deca: RFValueStr('18px'), // '1.5rem'
+  kilo: RFValueStr('24px'), // '1.6rem'
+  mega: RFValueStr('32px'), // '2rem'
 };
 
 export const borderRadius: BorderRadius = {
-  nano: '2px',
-  micro: '4px',
-  mili: '8px',
-  centi: '16px',
-  deca: '24px',
-  pill: '999999px', // also circle
+  nano: RFValueStr('2px'),
+  micro: RFValueStr('4px'),
+  mili: RFValueStr('8px'),
+  centi: RFValueStr('16px'),
+  deca: RFValueStr('24px'),
+  pill: RFValueStr('999999px'), // also circle
 };
 
 export const borderWidth: BorderWidth = {
-  pico: '1px',
-  nano: '2px',
+  pico: RFValueStr('1px'),
+  nano: RFValueStr('2px'),
 };
 
 export const typography: TypographyVariation = {
   h5: {
-    fontSize: '16px', // '1rem'
-    lineHeight: '24px', // '1.5rem'
+    fontSize: RFValueStr('16px'), // '1rem'
+    lineHeight: RFValueStr('24px'), // '1.5rem'
   },
   h4: {
-    fontSize: '18px', // '1.125rem'
-    lineHeight: '27px', // '1.688rem'
+    fontSize: RFValueStr('18px'), // '1.125rem'
+    lineHeight: RFValueStr('27px'), // '1.688rem'
   },
   h3: {
-    fontSize: '20px', // '1.25rem'
-    lineHeight: '32px', // '2rem'
+    fontSize: RFValueStr('20px'), // '1.25rem'
+    lineHeight: RFValueStr('32px'), // '2rem'
   },
   h2: {
-    fontSize: '26px', // '1.625rem'
-    lineHeight: '38px', // '2.375rem'
+    fontSize: RFValueStr('26px'), // '1.625rem'
+    lineHeight: RFValueStr('38px'), // '2.375rem'
   },
   h1: {
-    fontSize: '32px', // '2rem'
-    lineHeight: '42px', // '2.625rem'
+    fontSize: RFValueStr('32px'), // '2rem'
+    lineHeight: RFValueStr('42px'), // '2.625rem'
   },
   base: {
-    fontSize: '14px', // '0.875rem'
-    lineHeight: '21px', // '1.313rem'
+    fontSize: RFValueStr('14px'), // '0.875rem'
+    lineHeight: RFValueStr('21px'), // '1.313rem'
   },
   sub: {
-    fontSize: '12px', // '0.75rem'
-    lineHeight: '18px', // '1.125rem'
+    fontSize: RFValueStr('12px'), // '0.75rem'
+    lineHeight: RFValueStr('18px'), // '1.125rem'
   },
   label: {
-    fontSize: '10px',
-    lineHeight: '12px',
+    fontSize: RFValueStr('10px'),
+    lineHeight: RFValueStr('12px'),
   },
 };
 

package/src/utils/IPhoneXHelper.ts

@@ -0,0 +1,34 @@
+import { Dimensions, Platform, StatusBar } from 'react-native';
+
+export function isIphoneX() {
+    const dimen = Dimensions.get('window');
+    return (
+        Platform.OS === 'ios' &&
+        !Platform.isPad &&
+        !Platform.isTVOS &&
+        ((dimen.height === 780 || dimen.width === 780)
+          || (dimen.height === 812 || dimen.width === 812)
+          || (dimen.height === 844 || dimen.width === 844)
+          || (dimen.height === 896 || dimen.width === 896)
+          || (dimen.height === 926 || dimen.width === 926))
+    );
+}
+
+export function ifIphoneX(iphoneXStyle, regularStyle) {
+    if (isIphoneX()) {
+        return iphoneXStyle;
+    }
+    return regularStyle;
+}
+
+export function getStatusBarHeight(safe) {
+    return Platform.select({
+        ios: ifIphoneX(safe ? 44 : 30, 20),
+        android: StatusBar.currentHeight,
+        default: 0
+    });
+}
+
+export function getBottomSpace() {
+    return isIphoneX() ? 34 : 0;
+}

package/src/utils/ResponsiveFontSize.ts

@@ -0,0 +1,52 @@
+import { Dimensions, Platform, StatusBar } from "react-native";
+import { extractNumbersFromString } from "./extractNumbersFromString";
+import { isIphoneX } from "./IPhoneXHelper";
+
+const STANDARD_SCREEN_HEIGHT = 640
+
+/**
+ * Use this function when you want to scale a percentage number
+ * to a reasonable value that will fit better on most of devices.
+ * 
+ * @param percent 
+ * @returns 
+ */
+export const RFPercentage = (percent: number) => {
+    if (Platform.OS === 'web') return percent
+    const { height, width } = Dimensions.get("window");
+    const standardLength = width > height ? width : height;
+    const offset = width > height ? 0 : Platform.OS === "ios" ? 78 : StatusBar.currentHeight || 0 // iPhone X style SafeAreaView size in portrait
+    const deviceHeight = isIphoneX() || Platform.OS === "android" ? standardLength - offset : standardLength;
+    const heightPercent = (percent * deviceHeight) / 100;
+    return Math.round(heightPercent);
+}
+
+/**
+ * Use this function when you want to scale a font size based on pixel unit 
+ * to a reasonable value that will fit better on most of devices.
+ * 
+ * @param fontSize 
+ * @param standardScreenHeight 
+ * @returns 
+ */
+export const RFValue = (fontSize: number, standardScreenHeight: number = STANDARD_SCREEN_HEIGHT) => {
+    if (Platform.OS === 'web') return fontSize
+    const { height, width } = Dimensions.get("window");
+    const standardLength = width > height ? width : height;
+    const offset = width > height ? 0 : Platform.OS === "ios" ? 78 : StatusBar.currentHeight || 0 // iPhone X style SafeAreaView size in portrait
+    const deviceHeight = isIphoneX() || Platform.OS === "android" ? standardLength - offset : standardLength;
+    const heightPercent = (fontSize * deviceHeight) / standardScreenHeight;
+    return Math.round(heightPercent);
+}
+
+/**
+ * Same of RFValue, however you can provide string values. E.g: '10px', '-5px'.
+ * 
+ * @param fontSize 
+ * @param standardScreenHeight 
+ * @returns 
+ */
+export const RFValueStr = (fontSize: string, standardScreenHeight?: number) => {
+    const _fontSize = extractNumbersFromString(fontSize)
+    return `${RFValue(_fontSize, standardScreenHeight)}px`
+}

package/src/utils/extractNumbersFromString.ts

@@ -1,8 +1,5 @@
 export const extractNumbersFromString = (value: string): number =>
-  Number(value.replace(/[^0-9]/g, ''));
+  Number(extractDigitsFromString(value));
 
-/*
- * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91
- * */
 export const extractDigitsFromString = (value: string): string =>
   value.replace(/[^0-9]/g, '');

package/src/utils/index.ts

@@ -3,3 +3,5 @@ export {
   extractNumbersFromString,
   extractDigitsFromString,
 } from './extractNumbersFromString';
+export * from './IPhoneXHelper'
+export * from './ResponsiveFontSize'