@homecode/ui 4.22.7 → 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/Icon/icons/dragHandlerHorizontal.svg.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgDragHandlerHorizontal = function SvgDragHandlerHorizontal(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M16 9.293a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 20 9.297a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 16 9.293m-2-.003a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 10 9.286a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 14 9.29m-6-.007a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 4 9.28a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 8 9.283m8 6.01a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 20 15.297a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 16 15.293m-2-.003a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 10 15.286a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 14 15.29m-6-.007a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 4 15.28a2.006 2.006 0 0 0 1.998 2.002A2.006 2.006 0 0 0 8 15.283"
+  })));
+};
+
+export { SvgDragHandlerHorizontal as default };

package/dist/esm/src/components/Icon/icons/dragHandlerVertical.svg.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgDragHandlerVertical = function SvgDragHandlerVertical(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M14.995 16.288a2.006 2.006 0 0 0-2.002 1.998 2.006 2.006 0 0 0 1.998 2.002 2.006 2.006 0 0 0 2.002-1.998 2.006 2.006 0 0 0-1.998-2.002m.003-2A2.006 2.006 0 0 0 17 12.29a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 13 12.286a2.006 2.006 0 0 0 1.998 2.002m.007-6a2.006 2.006 0 0 0 2.002-1.998 2.006 2.006 0 0 0-1.998-2.002 2.006 2.006 0 0 0-2.002 1.998 2.006 2.006 0 0 0 1.998 2.002m-6.01 8a2.006 2.006 0 0 0-2.002 1.998 2.006 2.006 0 0 0 1.998 2.002 2.006 2.006 0 0 0 2.002-1.998 2.006 2.006 0 0 0-1.998-2.002m.003-2A2.006 2.006 0 0 0 11 12.29a2.006 2.006 0 0 0-1.998-2.002A2.006 2.006 0 0 0 7 12.286a2.006 2.006 0 0 0 1.998 2.002m.007-6a2.006 2.006 0 0 0 2.002-1.998 2.006 2.006 0 0 0-1.998-2.002 2.006 2.006 0 0 0-2.002 1.998 2.006 2.006 0 0 0 1.998 2.002"
+  })));
+};
+
+export { SvgDragHandlerVertical as default };

package/dist/esm/src/components/Icon/icons/index.js

@@ -18,6 +18,8 @@ var ICONS = {
     clearAll: () => import('./clearAll.svg.js'),
     delete: () => import('./delete.svg.js'),
     draft: () => import('./draft.svg.js'),
+    dragHandlerHorizontal: () => import('./dragHandlerHorizontal.svg.js'),
+    dragHandlerVertical: () => import('./dragHandlerVertical.svg.js'),
     edit: () => import('./edit.svg.js'),
     email: () => import('./email.svg.js'),
     externalLink: () => import('./externalLink.svg.js'),

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/Icon/icons/index.d.ts

@@ -18,6 +18,8 @@ declare const _default: {
     clearAll: () => Promise<any>;
     delete: () => Promise<any>;
     draft: () => Promise<any>;
+    dragHandlerHorizontal: () => Promise<any>;
+    dragHandlerVertical: () => Promise<any>;
     edit: () => Promise<any>;
     email: () => Promise<any>;
     externalLink: () => Promise<any>;

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.7",
+  "version": "4.22.9",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",