@homecode/ui 4.22.8 → 4.22.9

package/dist/esm/src/components/Flex/Flex.js

@@ -2,7 +2,19 @@ import { jsx } from 'react/jsx-runtime';
 import S from './Flex.styl.js';
 
 const Flex = ({ children, ...props }) => {
-    return (jsx("div", { className: S.root, ...props, children: children }));
+    return (jsx("div", { className: S.root, ...props, style: {
+            justifyContent: props.justifyContent,
+            alignItems: props.alignItems,
+            flexDirection: props.flexDirection,
+            flexWrap: props.flexWrap,
+            flexGrow: props.flexGrow,
+            flexShrink: props.flexShrink,
+            flexBasis: props.flexBasis,
+            flex: props.flex,
+            order: props.order,
+            alignSelf: props.alignSelf,
+            flexFlow: props.flexFlow,
+        }, children: children }));
 };
 
 export { Flex };

package/dist/esm/src/components/Lazy/Lazy.js

@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 import Time from 'timen';
 import { createStore } from 'justorm/react';
-import { Container } from '../Container/Container.js';
 import { Spinner } from '../Spinner/Spinner.js';
+import { Flex } from '../Flex/Flex.js';
 
 function compare(cb1, cb2) {
     return cb1?.toString() === cb2?.toString();
@@ -11,23 +11,25 @@ function compare(cb1, cb2) {
 const loaded = new Map();
 class Lazy extends Component {
     store;
-    Node;
-    hasNode = false;
+    importData;
+    DefaultNode;
+    isLoaded = false;
     clearSpinnerTimeout;
     static defaultProps = {
         size: 'm',
     };
     constructor(props) {
         super(props);
-        this.Node = loaded.get(this.props.loader);
-        this.hasNode = Boolean(this.Node);
+        this.importData = loaded.get(this.props.loader);
+        this.DefaultNode = this.importData?.default;
+        const isLoaded = !!this.importData;
         this.store = createStore(this, {
-            loading: !this.hasNode,
-            spinnerTimeout: this.hasNode,
+            loading: !isLoaded,
+            spinnerTimeout: isLoaded,
         });
     }
     componentDidMount() {
-        if (!this.hasNode)
+        if (!this.importData)
             this.update();
     }
     componentDidUpdate({ loader }) {
@@ -38,27 +40,32 @@ class Lazy extends Component {
         }
     }
     update() {
-        const { loader } = this.props;
-        this.clearSpinnerTimeout = Time.after(500, () => this.setState({ spinnerTimeout: false }));
+        const { loader, spinnerTimeout = 500 } = this.props;
+        this.clearSpinnerTimeout = Time.after(spinnerTimeout, () => this.setState({ spinnerTimeout: false }));
         this.store.loading = true;
-        loader().then(({ default: Node }) => {
+        loader().then((data) => {
             if (!compare(this.props.loader, loader))
                 return;
-            this.Node = Node;
-            loaded.set(loader, Node);
+            this.importData = data;
+            this.DefaultNode = data.default;
+            loaded.set(loader, data);
             this.store.loading = false;
         });
     }
     render() {
-        const { Node } = this;
-        const { progressElem, loader, hideSpinner, ...props } = this.props;
+        const { DefaultNode, importData } = this;
+        const { progressElem, loader, render, children, hideSpinner, ...props } = this.props;
         const { loading, spinnerTimeout } = this.store;
-        if (Node)
-            return jsx(Node, { ...props });
-        if (!spinnerTimeout && loading && !hideSpinner) {
-            return (progressElem ?? (jsx(Container, { fullHeight: true, fullWidth: true, children: jsx(Spinner, { size: props.size }) })));
+        if (loading && !spinnerTimeout && !hideSpinner) {
+            return (progressElem ?? (jsx(Flex, { justifyContent: "center", alignItems: "center", flexGrow: 1, width: "100%", height: "100%", children: jsx(Spinner, { size: props.size }) })));
         }
-        return null;
+        if (render)
+            return render(importData);
+        if (typeof children === 'function')
+            return children(importData);
+        if (DefaultNode)
+            return jsx(DefaultNode, { ...props });
+        return children;
     }
 }
 

package/dist/esm/types/src/components/Flex/Flex.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from 'react';
-type FlexProps = HTMLAttributes<HTMLDivElement> & {
+import { CSSProperties, HTMLAttributes } from 'react';
+type FlexProps = HTMLAttributes<HTMLDivElement> & CSSProperties & {
     children: React.ReactNode;
 };
 export declare const Flex: ({ children, ...props }: FlexProps) => JSX.Element;

package/dist/esm/types/src/components/Lazy/Lazy.d.ts

@@ -3,8 +3,9 @@ import * as T from './Lazy.types';
 export type LazyProps = T.Props;
 export declare class Lazy extends Component<T.Props> {
     store: T.State;
-    Node?: ComponentType<any>;
-    hasNode: boolean;
+    importData?: T.ImportData;
+    DefaultNode?: ComponentType<any>;
+    isLoaded: boolean;
     clearSpinnerTimeout: null;
     static defaultProps: {
         size: string;

package/dist/esm/types/src/components/Lazy/Lazy.types.d.ts

@@ -1,10 +1,13 @@
 import type { ReactNode } from 'react';
 import type { Size } from 'uilib/types';
-export type Loader = () => Promise<{
-    default: ReactNode;
-}>;
+export type ImportData = Record<string | 'default', any>;
+export type Loader = () => Promise<ImportData>;
+type RenderFunction = (importData: ImportData) => ReactNode;
 export type Props = {
     loader: Loader;
+    render?: RenderFunction;
+    children?: ReactNode | RenderFunction;
+    spinnerTimeout?: number;
     size?: Size;
     progressElem?: ReactNode;
     hideSpinner?: boolean;
@@ -13,3 +16,4 @@ export type State = {
     loading: boolean;
     spinnerTimeout: boolean;
 };
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.22.8",
+  "version": "4.22.9",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",