native-x-theme - npm Package Compare versions

Comparing version 1.0.12 to 1.1.0

lib/style-hook.d.ts

@@ -150,3 +150,3 @@ export declare type BackgroundColor = string;
 export interface FontSizeStyleProps {
-    fontSize?: FontSize;
+    fontSize?: FontSize | number;
 }
@@ -223,4 +223,101 @@ export declare const PADDING: {
 export interface PaddingStyleProps {
-    padding?: Padding | Padding[];
+    padding?: Padding | Padding[] | number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
 }
+export declare function getPadding({ padding, paddingLeft, paddingRight, paddingTop, paddingBottom, paddingHorizontal, paddingVertical, }: PaddingStyleProps): ((import("react-native").RegisteredStyle<{
+    padding: number;
+}> | import("react-native").RegisteredStyle<{
+    padding: number;
+}> | import("react-native").RegisteredStyle<{
+    padding: number;
+}> | import("react-native").RegisteredStyle<{
+    padding: number;
+}> | import("react-native").RegisteredStyle<{
+    padding: number;
+}> | import("react-native").RegisteredStyle<{
+    padding: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingLeft: number;
+    paddingRight: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingLeft: number;
+    paddingRight: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingLeft: number;
+    paddingRight: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingLeft: number;
+    paddingRight: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingLeft: number;
+    paddingRight: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingLeft: number;
+    paddingRight: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingTop: number;
+    paddingBottom: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingTop: number;
+    paddingBottom: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingTop: number;
+    paddingBottom: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingTop: number;
+    paddingBottom: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingTop: number;
+    paddingBottom: number;
+}> | import("react-native").RegisteredStyle<{
+    paddingTop: number;
+    paddingBottom: number;
+}>)[] | {
+    padding: number;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+} | {
+    paddingLeft: number;
+    padding?: undefined;
+    paddingRight?: undefined;
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+} | {
+    paddingRight: number;
+    padding?: undefined;
+    paddingLeft?: undefined;
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+} | {
+    paddingTop: number;
+    padding?: undefined;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+    paddingBottom?: undefined;
+} | {
+    paddingBottom: number;
+    padding?: undefined;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+    paddingTop?: undefined;
+} | {
+    paddingLeft: number;
+    paddingRight: number;
+    padding?: undefined;
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+} | {
+    paddingTop: number;
+    paddingBottom: number;
+    padding?: undefined;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+} | null)[];
 export declare const LINE_HEIGHT: {
@@ -239,3 +336,3 @@ solid: {
 export interface LineHeightStyleProps {
-    lineHeight?: LineHeight;
+    lineHeight?: LineHeight | number;
 }
@@ -259,21 +356,3 @@ export declare type ContainerStyleProps = BackgroundColorStyleProps & BorderColorStyleProps & BorderSizeStyleProps & BorderRadiusStyleProps & OpacityStyleProps & ShadowStyleProps & PaddingStyleProps;
     opacity: number;
-}> | ({
-    shadowColor: string;
-    shadowOffset: {
-        width: number;
-        height: number;
-    };
-    shadowRadius: number;
-    shadowOpacity: number;
-} | {
-    shadowColor: string | undefined;
-} | null | undefined)[] | ({
-    borderColor?: string | undefined;
-    borderTopColor?: string | undefined;
-    borderRightColor?: string | undefined;
-    borderBottomColor?: string | undefined;
-    borderLeftColor?: string | undefined;
-} | {
-    borderWidth: number;
-} | undefined)[] | (import("react-native").RegisteredStyle<{
+}> | ((import("react-native").RegisteredStyle<{
     padding: number;
@@ -326,3 +405,63 @@ }> | import("react-native").RegisteredStyle<{
     paddingBottom: number;
-}>)[] | undefined)[];
+}>)[] | {
+    padding: number;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+} | {
+    paddingLeft: number;
+    padding?: undefined;
+    paddingRight?: undefined;
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+} | {
+    paddingRight: number;
+    padding?: undefined;
+    paddingLeft?: undefined;
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+} | {
+    paddingTop: number;
+    padding?: undefined;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+    paddingBottom?: undefined;
+} | {
+    paddingBottom: number;
+    padding?: undefined;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+    paddingTop?: undefined;
+} | {
+    paddingLeft: number;
+    paddingRight: number;
+    padding?: undefined;
+    paddingTop?: undefined;
+    paddingBottom?: undefined;
+} | {
+    paddingTop: number;
+    paddingBottom: number;
+    padding?: undefined;
+    paddingLeft?: undefined;
+    paddingRight?: undefined;
+} | null)[] | ({
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowRadius: number;
+    shadowOpacity: number;
+} | {
+    shadowColor: string | undefined;
+} | null | undefined)[] | ({
+    borderColor?: string | undefined;
+    borderTopColor?: string | undefined;
+    borderRightColor?: string | undefined;
+    borderBottomColor?: string | undefined;
+    borderLeftColor?: string | undefined;
+} | {
+    borderWidth: number;
+} | undefined)[] | undefined)[];
 export declare function useShadowStyle({ shadow, shadowColor }: ShadowStyleProps): ({
@@ -344,3 +483,5 @@ shadowColor: string;
     lineHeight: number;
+} | {
+    fontSize: number;
 } | undefined)[];
 export {};

lib/style-hook.js

@@ -79,2 +79,18 @@ import { useMemo } from 'react';
 };
+export function getPadding({ padding, paddingLeft, paddingRight, paddingTop, paddingBottom, paddingHorizontal, paddingVertical, }) {
+    const paddingStyle = (padding instanceof Array ? padding : [padding]).map(i => PADDING[i]);
+    return [
+        typeof padding === 'number' ? { padding } : paddingStyle,
+        paddingLeft !== undefined ? { paddingLeft } : null,
+        paddingRight !== undefined ? { paddingRight } : null,
+        paddingTop !== undefined ? { paddingTop } : null,
+        paddingBottom !== undefined ? { paddingBottom } : null,
+        paddingHorizontal !== undefined
+            ? { paddingLeft: paddingHorizontal, paddingRight: paddingHorizontal }
+            : null,
+        paddingVertical !== undefined
+            ? { paddingTop: paddingVertical, paddingBottom: paddingVertical }
+            : null,
+    ].filter(i => i !== null);
+}
 export const LINE_HEIGHT = {
@@ -87,3 +103,3 @@ solid: { lineHeight: 22 },
     const { getBackgroundColor, getBorderColor } = useTheme();
-    const { backgroundColor, borderRadius, border, padding, opacity, borderColor, borderLeftColor, borderRightColor, borderTopColor, borderBottomColor, } = props;
+    const { backgroundColor, borderRadius, border, opacity, borderColor, borderLeftColor, borderRightColor, borderTopColor, borderBottomColor, } = props;
     const shadowStyle = useShadowStyle(props);
@@ -100,4 +116,4 @@ return useMemo(() => [
         BORDER_SIZE[border],
-        (padding instanceof Array ? padding : [padding]).map(i => PADDING[i]),
         OPACITY[opacity],
+        getPadding(props),
         shadowStyle,
@@ -107,2 +123,3 @@ ].filter(i => i != null), [
         backgroundColor,
+        border,
         getBorderColor,
@@ -115,4 +132,3 @@ borderColor,
         borderRadius,
-        border,
-        padding,
+        props,
         opacity,
@@ -134,5 +150,5 @@ shadowStyle,
         getTextColor?.(textColor),
-        FONT_SIZE[fontSize],
-        LINE_HEIGHT[lineHeight],
+        typeof fontSize === 'number' ? { fontSize } : FONT_SIZE[fontSize],
+        typeof lineHeight === 'number' ? { lineHeight } : LINE_HEIGHT[lineHeight],
     ].filter(i => i != null), [textColor, fontSize, getTextColor, lineHeight]);
 }

lib/theme-provider.js

@@ -31,3 +31,3 @@ import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 const ThemeContext = createContext({});
-export function ThemeProvider({ theme, themes = {}, autoSwitchTheme = true, autoSwitchStatusBar = true, children, }) {
+export function ThemeProvider({ theme, themes = {}, autoSwitchTheme = false, autoSwitchStatusBar = true, children, }) {
     const [themeName, switchTheme] = useState(theme);
@@ -34,0 +34,0 @@ const [barStyle, setBarStyle] = useState('light-content');

package.json

 {
   "name": "native-x-theme",
-  "version": "1.0.12",
+  "version": "1.1.0",
   "description": "Theme setup for native-x components",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -190,3 +190,3 @@ # native-x-theme
 `ThemeProvider` will automatically switch between `dark` and `light` theme depending on system
-appearance. By default this value is set to `true`. Auto theme switching won't work if you don't
+appearance. By default this value is set to `false`. Auto theme switching won't work if you don't
 have themes by name `dark` (THEME.DARK) and `light` (THEME.LIGHT).
@@ -197,3 +197,3 @@
 `ThemeProvider` will automatically switch status bar content to `dark-content` or `light-content`
-depending on system appearance. By default this value is set to `true` and works only when both
+depending on system appearance. By default this value is set to `false` and works only when both
 `autoSwitchStatusBar` and `autoSwitchTheme` is set to true.
@@ -200,0 +200,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31478

increased by18.37%

Lines of code

817

increased by23.79%

No dependency changes