@uni-design-system/uni-react 0.0.14 → 0.0.16

package/dist/cjs/core/index.d.ts

@@ -10,3 +10,4 @@ export * from './padding';
 export * from './shadow';
 export * from './text';
 export * from './theme';
+export * from './transition';

package/dist/cjs/core/index.js

@@ -26,3 +26,4 @@ __exportStar(require("./padding"), exports);
 __exportStar(require("./shadow"), exports);
 __exportStar(require("./text"), exports);
 __exportStar(require("./theme"), exports);
+__exportStar(require("./transition"), exports);

package/dist/cjs/core/theme/theme.hook.d.ts

@@ -1,2 +1,3 @@
 import { Theme } from '@uni-design-system/uni-core';
-export declare function useTheme(): Theme;
+export declare const useTheme: () => Theme;
+export declare const useSwitchTheme: (defaultThemeId?: string) => [string, (themeId?: string) => void];

package/dist/cjs/core/theme/theme.hook.js

@@ -1,20 +1,57 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = void 0;
-const react_1 = __importDefault(require("react"));
+exports.useSwitchTheme = exports.useTheme = void 0;
+const react_1 = __importStar(require("react"));
 const theme_context_1 = __importDefault(require("./theme.context"));
 const uni_core_1 = require("@uni-design-system/uni-core");
-function useTheme() {
-    const themeProps = react_1.default.useContext(theme_context_1.default);
-    const theme = themeProps && themeProps.themes && themeProps.themeId && themeProps.themes[themeProps.themeId];
+const findTheme = (props) => {
+    const { themeId, themes } = props;
+    return themes && themeId ? themes[themeId] : uni_core_1.BaseTheme;
+};
+const useTheme = () => {
+    const themeProps = (0, react_1.useContext)(theme_context_1.default);
+    const theme = findTheme(themeProps);
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         react_1.default.useDebugValue(theme);
     }
     // return theme || LightTheme;
-    return theme || uni_core_1.BaseTheme;
-}
+    return theme;
+};
 exports.useTheme = useTheme;
+const useSwitchTheme = (defaultThemeId) => {
+    const [themeId, setThemeId] = (0, react_1.useState)(defaultThemeId || uni_core_1.DefaultThemeId);
+    const switchTheme = (themeId) => {
+        if (!themeId)
+            return;
+        setThemeId(themeId);
+    };
+    return [themeId, switchTheme];
+};
+exports.useSwitchTheme = useSwitchTheme;

package/dist/cjs/core/theme/theme.provider.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Theme } from '@uni-design-system/uni-core';
 interface ThemeProviderProps {
-    themeId: string;
-    themes: Record<string, Theme>;
+    themeId?: string;
+    themes?: Record<string, Theme>;
     children?: React.ReactChild;
 }
 export declare const ThemeProvider: ({ children, themeId, themes }: ThemeProviderProps) => JSX.Element;

package/dist/cjs/core/theme/theme.provider.js

@@ -37,23 +37,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProvider = void 0;
 const react_1 = __importStar(require("react"));
-const uni_core_1 = require("@uni-design-system/uni-core");
 const theme_context_1 = __importDefault(require("./theme.context"));
+const theme_hook_1 = require("./theme.hook");
 const STORAGE_KEY = 'THEME_ID';
 const ThemeProvider = ({ children, themeId, themes }) => {
-    const [_themeId, setThemeId] = (0, react_1.useState)(themeId);
+    const [_themeId, setThemeId] = (0, theme_hook_1.useSwitchTheme)(themeId);
     (0, react_1.useEffect)(() => {
         (() => __awaiter(void 0, void 0, void 0, function* () {
             const id = localStorage.getItem(STORAGE_KEY);
-            if (id) {
-                setThemeId(id);
-            }
-            else {
-                setThemeId(uni_core_1.DefaultThemeId);
-            }
+            setThemeId(id || themeId);
         }))();
-    }, []);
-    return (react_1.default.createElement(theme_context_1.default.Provider, { value: { themeId, themes } }, _themeId ? children : null));
+    }, [themeId]);
+    return (react_1.default.createElement(theme_context_1.default.Provider, { value: { themeId: _themeId, themes } }, _themeId ? children : null));
 };
 exports.ThemeProvider = ThemeProvider;
 /*export function withTheme(Component: ({children, theme, themes }: (any & ThemeProps)) => JSX.Element) {

package/dist/esm/core/index.d.ts

@@ -10,3 +10,4 @@ export * from './padding';
 export * from './shadow';
 export * from './text';
 export * from './theme';
+export * from './transition';

package/dist/esm/core/index.js

@@ -10,3 +10,4 @@ export * from './padding';
 export * from './shadow';
 export * from './text';
 export * from './theme';
+export * from './transition';

package/dist/esm/core/theme/theme.hook.d.ts

@@ -1,2 +1,3 @@
 import { Theme } from '@uni-design-system/uni-core';
-export declare function useTheme(): Theme;
+export declare const useTheme: () => Theme;
+export declare const useSwitchTheme: (defaultThemeId?: string) => [string, (themeId?: string) => void];

package/dist/esm/core/theme/theme.hook.js

@@ -1,13 +1,26 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import ThemeContext from './theme.context';
-import { BaseTheme } from '@uni-design-system/uni-core';
-export function useTheme() {
-    const themeProps = React.useContext(ThemeContext);
-    const theme = themeProps && themeProps.themes && themeProps.themeId && themeProps.themes[themeProps.themeId];
+import { BaseTheme, DefaultThemeId } from '@uni-design-system/uni-core';
+const findTheme = (props) => {
+    const { themeId, themes } = props;
+    return themes && themeId ? themes[themeId] : BaseTheme;
+};
+export const useTheme = () => {
+    const themeProps = useContext(ThemeContext);
+    const theme = findTheme(themeProps);
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         React.useDebugValue(theme);
     }
     // return theme || LightTheme;
-    return theme || BaseTheme;
-}
+    return theme;
+};
+export const useSwitchTheme = (defaultThemeId) => {
+    const [themeId, setThemeId] = useState(defaultThemeId || DefaultThemeId);
+    const switchTheme = (themeId) => {
+        if (!themeId)
+            return;
+        setThemeId(themeId);
+    };
+    return [themeId, switchTheme];
+};

package/dist/esm/core/theme/theme.provider.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Theme } from '@uni-design-system/uni-core';
 interface ThemeProviderProps {
-    themeId: string;
-    themes: Record<string, Theme>;
+    themeId?: string;
+    themes?: Record<string, Theme>;
     children?: React.ReactChild;
 }
 export declare const ThemeProvider: ({ children, themeId, themes }: ThemeProviderProps) => JSX.Element;

package/dist/esm/core/theme/theme.provider.js

@@ -7,24 +7,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useState, useEffect } from 'react';
-import { DefaultThemeId } from '@uni-design-system/uni-core';
+import React, { useEffect } from 'react';
 import ThemeContext from './theme.context';
+import { useSwitchTheme } from './theme.hook';
 const STORAGE_KEY = 'THEME_ID';
 export const ThemeProvider = ({ children, themeId, themes }) => {
-    const [_themeId, setThemeId] = useState(themeId);
+    const [_themeId, setThemeId] = useSwitchTheme(themeId);
     useEffect(() => {
         (() => __awaiter(void 0, void 0, void 0, function* () {
             const id = localStorage.getItem(STORAGE_KEY);
-            if (id) {
-                setThemeId(id);
-            }
-            else {
-                setThemeId(DefaultThemeId);
-            }
+            setThemeId(id || themeId);
         }))();
-    }, []);
-    return (React.createElement(ThemeContext.Provider, { value: { themeId, themes } }, _themeId ? children : null));
+    }, [themeId]);
+    return (React.createElement(ThemeContext.Provider, { value: { themeId: _themeId, themes } }, _themeId ? children : null));
 };
 /*export function withTheme(Component: ({children, theme, themes }: (any & ThemeProps)) => JSX.Element) {
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-react",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "React component library for the UNI Design System.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",