@uni-design-system/uni-react 0.0.17 → 0.0.18

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://uni-design-system.github.io/uni-react/" target="_blank">
-    <img src="./.github/uni-logo.png" alt="UNI Design System">
+    <img src="https://github.com/uni-design-system/uni-react/raw/v0.0.17/.github/uni-logo.png" alt="UNI Design System">
   </a>
 </p>
 

package/dist/cjs/components/switch/switch.component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Size } from '@uni-design-system/uni-core';
 export interface SwitchProps {
-    size: Size;
+    size?: Size;
     on?: boolean;
     onChange?: (on: boolean) => void;
 }

package/dist/cjs/core/background/background.component.d.ts

@@ -1,9 +1,15 @@
 import { ReactNode } from 'react';
 import { Property } from 'csstype';
-interface BackgroundProps {
+export interface BackgroundProps {
+    className?: string;
     children?: ReactNode;
-    image?: Property.BackgroundImage | undefined;
-    gradiant?: Property.BackgroundImage | undefined;
+    image?: Property.BackgroundImage;
+    imageUrl?: string;
+    gradiant?: Property.BackgroundImage;
+    position?: Property.BackgroundPosition;
+    size?: Property.BackgroundSize;
+    attachment?: 'fixed' | 'local' | 'scroll';
+    minHeight?: Property.MinHeight;
+    color?: string;
 }
-export declare const Background: ({ children, image, gradiant }: BackgroundProps) => JSX.Element;
-export {};
+export declare const Background: ({ children, image, imageUrl, gradiant, position, size, attachment, className, minHeight, color, }: BackgroundProps) => JSX.Element;

package/dist/cjs/core/background/background.component.js

@@ -5,16 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Background = void 0;
 const react_1 = __importDefault(require("react"));
-const theme_1 = require("../theme");
-const Background = ({ children, image, gradiant }) => {
-    const theme = (0, theme_1.useTheme)();
-    const style = BackgroundStyle({ theme, image, gradiant });
-    return react_1.default.createElement("div", { style: style }, children);
-};
-exports.Background = Background;
-function BackgroundStyle({ image, gradiant, theme }) {
-    return {
-        backgroundColor: theme.colors.background,
+const Background = ({ children, image, imageUrl, gradiant, position, size, attachment, className, minHeight, color, }) => {
+    if (!!imageUrl) {
+        image = `url(${imageUrl})`;
+    }
+    const style = {
+        backgroundColor: color,
         backgroundImage: image || gradiant,
+        backgroundPosition: position,
+        backgroundSize: size,
+        minHeight,
+        backgroundAttachment: attachment,
     };
-}
+    return (react_1.default.createElement("div", { className: className, style: style }, children));
+};
+exports.Background = Background;

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

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

package/dist/cjs/core/background/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./background.component"), exports);

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

@@ -1,3 +1,4 @@
+export * from './background';
 export * from './border';
 export * from './container';
 export * from './flex';

package/dist/cjs/core/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./background"), exports);
 __exportStar(require("./border"), exports);
 __exportStar(require("./container"), exports);
 __exportStar(require("./flex"), exports);

package/dist/esm/components/switch/switch.component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Size } from '@uni-design-system/uni-core';
 export interface SwitchProps {
-    size: Size;
+    size?: Size;
     on?: boolean;
     onChange?: (on: boolean) => void;
 }

package/dist/esm/core/background/background.component.d.ts

@@ -1,9 +1,15 @@
 import { ReactNode } from 'react';
 import { Property } from 'csstype';
-interface BackgroundProps {
+export interface BackgroundProps {
+    className?: string;
     children?: ReactNode;
-    image?: Property.BackgroundImage | undefined;
-    gradiant?: Property.BackgroundImage | undefined;
+    image?: Property.BackgroundImage;
+    imageUrl?: string;
+    gradiant?: Property.BackgroundImage;
+    position?: Property.BackgroundPosition;
+    size?: Property.BackgroundSize;
+    attachment?: 'fixed' | 'local' | 'scroll';
+    minHeight?: Property.MinHeight;
+    color?: string;
 }
-export declare const Background: ({ children, image, gradiant }: BackgroundProps) => JSX.Element;
-export {};
+export declare const Background: ({ children, image, imageUrl, gradiant, position, size, attachment, className, minHeight, color, }: BackgroundProps) => JSX.Element;

package/dist/esm/core/background/background.component.js

@@ -1,13 +1,15 @@
 import React from 'react';
-import { useTheme } from '../theme';
-export const Background = ({ children, image, gradiant }) => {
-    const theme = useTheme();
-    const style = BackgroundStyle({ theme, image, gradiant });
-    return React.createElement("div", { style: style }, children);
-};
-function BackgroundStyle({ image, gradiant, theme }) {
-    return {
-        backgroundColor: theme.colors.background,
+export const Background = ({ children, image, imageUrl, gradiant, position, size, attachment, className, minHeight, color, }) => {
+    if (!!imageUrl) {
+        image = `url(${imageUrl})`;
+    }
+    const style = {
+        backgroundColor: color,
         backgroundImage: image || gradiant,
+        backgroundPosition: position,
+        backgroundSize: size,
+        minHeight,
+        backgroundAttachment: attachment,
     };
-}
+    return (React.createElement("div", { className: className, style: style }, children));
+};

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

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

package/dist/esm/core/background/index.js

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

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

@@ -1,3 +1,4 @@
+export * from './background';
 export * from './border';
 export * from './container';
 export * from './flex';

package/dist/esm/core/index.js

@@ -1,3 +1,4 @@
+export * from './background';
 export * from './border';
 export * from './container';
 export * from './flex';

package/package.json

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

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Theme } from '@uni-design-system/uni-core';
-export interface ThemeContextProps {
-    themeId?: string;
-    themes?: Record<string, Theme>;
-    switchTheme: (themeId: string) => void;
-}
-declare const ThemeContext: React.Context<ThemeContextProps>;
-export default ThemeContext;

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

@@ -1,16 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const uni_core_1 = require("@uni-design-system/uni-core");
-const ThemeContext = react_1.default.createContext({
-    themeId: 'LightTheme',
-    themes: { LightTheme: uni_core_1.LightTheme },
-    switchTheme: () => { },
-});
-if (process.env.NODE_ENV !== 'production') {
-    ThemeContext.displayName = 'ThemeContext';
-}
-exports.default = ThemeContext;

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

@@ -1,5 +0,0 @@
-import { Theme } from '@uni-design-system/uni-core';
-export declare const useTheme: () => Theme;
-export declare const useSwitchTheme: () => {
-    switchTheme: (themeId: string) => void;
-};

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

@@ -1,53 +0,0 @@
-"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.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");
-const useTheme = () => {
-    const { themeId, themes } = (0, react_1.useContext)(theme_context_1.default);
-    let theme = themes && themeId ? themes[themeId] : uni_core_1.BaseTheme;
-    (0, react_1.useEffect)(() => { }, [themeId]);
-    if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        react_1.default.useDebugValue(theme);
-    }
-    (0, react_1.useEffect)(() => {
-        console.log(themeId);
-        theme = themes && themeId ? themes[themeId] : uni_core_1.BaseTheme;
-    }, [themeId]);
-    // return theme || LightTheme;
-    return theme;
-};
-exports.useTheme = useTheme;
-const useSwitchTheme = () => {
-    const { switchTheme } = (0, react_1.useContext)(theme_context_1.default);
-    return { switchTheme };
-};
-exports.useSwitchTheme = useSwitchTheme;

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

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

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

@@ -1,73 +0,0 @@
-"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeProvider = void 0;
-const react_1 = __importStar(require("react"));
-const theme_context_1 = __importDefault(require("./theme.context"));
-const STORAGE_KEY = 'THEME_ID';
-const ThemeProvider = ({ children, themeId, themes }) => {
-    const [_themeId, setThemeId] = (0, react_1.useState)(themeId);
-    (0, react_1.useEffect)(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            const id = localStorage.getItem(STORAGE_KEY);
-            setThemeId(id || themeId);
-        }))();
-    }, [themeId]);
-    return (react_1.default.createElement(theme_context_1.default.Provider, { value: { themeId: _themeId, themes, switchTheme: setThemeId } }, _themeId ? children : null));
-};
-exports.ThemeProvider = ThemeProvider;
-/*export function withTheme(Component: ({children, theme, themes }: (any & ThemeProps)) => JSX.Element) {
-
-  return (props: JSX.IntrinsicAttributes) => {
-    const { themeId, setThemeId } = useContext(ThemeContext);
-
-    const getTheme = (themeId: string) => themes[themeId];
-    const setTheme = (themeId: string) => {
-      localStorage.setItem(STORAGE_KEY, themeId);
-      setThemeId(themeId);
-    };
-
-    return (
-      <Component
-        {...props}
-        themes={Themes}
-        theme={getTheme(themeId)}
-        setTheme={setTheme}
-      />
-    );
-  };
-}*/

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Theme } from '@uni-design-system/uni-core';
-export interface ThemeContextProps {
-    themeId?: string;
-    themes?: Record<string, Theme>;
-    switchTheme: (themeId: string) => void;
-}
-declare const ThemeContext: React.Context<ThemeContextProps>;
-export default ThemeContext;

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { LightTheme } from '@uni-design-system/uni-core';
-const ThemeContext = React.createContext({
-    themeId: 'LightTheme',
-    themes: { LightTheme },
-    switchTheme: () => { },
-});
-if (process.env.NODE_ENV !== 'production') {
-    ThemeContext.displayName = 'ThemeContext';
-}
-export default ThemeContext;

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

@@ -1,5 +0,0 @@
-import { Theme } from '@uni-design-system/uni-core';
-export declare const useTheme: () => Theme;
-export declare const useSwitchTheme: () => {
-    switchTheme: (themeId: string) => void;
-};

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

@@ -1,22 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import ThemeContext from './theme.context';
-import { BaseTheme } from '@uni-design-system/uni-core';
-export const useTheme = () => {
-    const { themeId, themes } = useContext(ThemeContext);
-    let theme = themes && themeId ? themes[themeId] : BaseTheme;
-    useEffect(() => { }, [themeId]);
-    if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        React.useDebugValue(theme);
-    }
-    useEffect(() => {
-        console.log(themeId);
-        theme = themes && themeId ? themes[themeId] : BaseTheme;
-    }, [themeId]);
-    // return theme || LightTheme;
-    return theme;
-};
-export const useSwitchTheme = () => {
-    const { switchTheme } = useContext(ThemeContext);
-    return { switchTheme };
-};

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

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

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

@@ -1,43 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import React, { useEffect, useState } from 'react';
-import ThemeContext from './theme.context';
-const STORAGE_KEY = 'THEME_ID';
-export const ThemeProvider = ({ children, themeId, themes }) => {
-    const [_themeId, setThemeId] = useState(themeId);
-    useEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            const id = localStorage.getItem(STORAGE_KEY);
-            setThemeId(id || themeId);
-        }))();
-    }, [themeId]);
-    return (React.createElement(ThemeContext.Provider, { value: { themeId: _themeId, themes, switchTheme: setThemeId } }, _themeId ? children : null));
-};
-/*export function withTheme(Component: ({children, theme, themes }: (any & ThemeProps)) => JSX.Element) {
-
-  return (props: JSX.IntrinsicAttributes) => {
-    const { themeId, setThemeId } = useContext(ThemeContext);
-
-    const getTheme = (themeId: string) => themes[themeId];
-    const setTheme = (themeId: string) => {
-      localStorage.setItem(STORAGE_KEY, themeId);
-      setThemeId(themeId);
-    };
-
-    return (
-      <Component
-        {...props}
-        themes={Themes}
-        theme={getTheme(themeId)}
-        setTheme={setTheme}
-      />
-    );
-  };
-}*/