@zuzjs/ui 0.2.5 → 0.2.6

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useEffect, useMemo, useReducer, useCallback, useContext, forwardRef, useRef, useState, useLayoutEffect, useDebugValue, cloneElement, useImperativeHandle, createElement } from 'react';
+import { createContext, useEffect, useMemo, useReducer, useCallback, useContext, forwardRef, useRef, useState, useLayoutEffect, useDebugValue, cloneElement, useImperativeHandle, createElement, Component as Component$1, Children as Children$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
 import Children from 'react-children-utilities';
@@ -59,16 +59,16 @@ class AppTheme {
         _AppTheme_darkTheme.set(this, void 0);
         this.get = () => {
             let self = this;
-            if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "auto") {
-                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-                    __classPrivateFieldSet(self, _AppTheme_mode, event.matches ? "dark" : "light", "f");
-                    __classPrivateFieldGet(self, _AppTheme_listen, "f").call(self, __classPrivateFieldGet(self, _AppTheme_mode, "f"));
-                });
-                return window.matchMedia &&
-                    window.matchMedia('(prefers-color-scheme: dark)').matches ?
-                    __classPrivateFieldGet(self, _AppTheme_darkTheme, "f") : __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
-            }
-            else if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "light") {
+            // if(self.#mode === "auto"){
+            //     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+            //         self.#mode = event.matches ? "dark" : "light";
+            //         self.#listen(self.#mode);
+            //     });
+            //     return window.matchMedia && 
+            //         window.matchMedia('(prefers-color-scheme: dark)').matches ? 
+            //         self.#darkTheme : self.#lightTheme;
+            // }else 
+            if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "light") {
                 return __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
             }
             else if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "dark") {
@@ -556,7 +556,7 @@ const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
 };
 
 const Input = forwardRef((props, ref) => {
-    const { as, accept, multiple, onChange, type, tag, placeholder, name, form, touched, onSubmit, defaultValue, fref } = props;
+    const { as, accept, multiple, onChange, onKeyUp, type, tag, placeholder, name, form, touched, onSubmit, defaultValue, fref } = props;
     const dispatch = useDispatch(STORE_FORM_KEY);
     const { forms } = useStore(state => state[STORE_FORM_KEY], false);
     let Tag = tag || 'input';
@@ -1343,6 +1343,131 @@ const Image = forwardRef((props, ref) => {
     return (jsx(ClassNames, { children: ({ css, cx }) => jsxs("picture", Object.assign({ className: cx(css `${buildCSS({ flex: true })}`) }, { children: [status == 'loading' && jsx(Box, { className: `${props.as ? `${props.as} ` : ``}${cx(css `background: #eee;${buildCSS(props)}`)}` }), status == 'loaded' && jsx("img", { src: props.src, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref })] })) }));
 });
 
+const DEFAULT_COLUMNS = 2;
+class Masonry extends Component$1 {
+    constructor(props) {
+        super(props);
+        this._lastRecalculateAnimationFrame = window.requestAnimationFrame(() => {
+            this.reCalculateColumnCount();
+        });
+        // Correct scope for when methods are accessed externally
+        this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this);
+        this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this);
+        // default state
+        let columnCount;
+        if (this.props && this.props.breakpointCols.default) {
+            columnCount = this.props.breakpointCols.default;
+        }
+        else {
+            columnCount = parseInt(this.props.breakpointCols) || DEFAULT_COLUMNS;
+        }
+        this.state = {
+            columnCount
+        };
+    }
+    componentDidMount() {
+        this.reCalculateColumnCount();
+        // window may not be available in some environments
+        if (window) {
+            window.addEventListener('resize', this.reCalculateColumnCountDebounce);
+        }
+    }
+    componentDidUpdate() {
+        this.reCalculateColumnCount();
+    }
+    componentWillUnmount() {
+        if (window) {
+            window.removeEventListener('resize', this.reCalculateColumnCountDebounce);
+        }
+    }
+    reCalculateColumnCountDebounce() {
+        if (!window || !window.requestAnimationFrame) { // IE10+
+            this.reCalculateColumnCount();
+            return;
+        }
+        if (window.cancelAnimationFrame) { // IE10+
+            window.cancelAnimationFrame(this._lastRecalculateAnimationFrame);
+        }
+    }
+    reCalculateColumnCount() {
+        const windowWidth = window && window.innerWidth || Infinity;
+        let breakpointColsObject = this.props.breakpointCols;
+        // Allow passing a single number to `breakpointCols` instead of an object
+        if (typeof breakpointColsObject !== 'object') {
+            breakpointColsObject = {
+                default: parseInt(breakpointColsObject) || DEFAULT_COLUMNS
+            };
+        }
+        let matchedBreakpoint = Infinity;
+        let columns = breakpointColsObject.default || DEFAULT_COLUMNS;
+        for (let breakpoint in breakpointColsObject) {
+            const optBreakpoint = parseInt(breakpoint);
+            const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint;
+            if (isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) {
+                matchedBreakpoint = optBreakpoint;
+                columns = breakpointColsObject[breakpoint];
+            }
+        }
+        columns = Math.max(1, parseInt(columns) || 1);
+        if (this.state.columnCount !== columns) {
+            this.setState({
+                columnCount: columns
+            });
+            this.props.onChange && this.props.onChange({ columns: columns });
+        }
+    }
+    itemsInColumns() {
+        const currentColumnCount = this.state.columnCount;
+        const itemsInColumns = new Array(currentColumnCount);
+        // Force children to be handled as an array
+        const items = Children$1.toArray(this.props.children);
+        for (let i = 0; i < items.length; i++) {
+            const columnIndex = i % currentColumnCount;
+            if (!itemsInColumns[columnIndex]) {
+                itemsInColumns[columnIndex] = [];
+            }
+            itemsInColumns[columnIndex].push(items[i]);
+        }
+        return itemsInColumns;
+    }
+    renderColumns() {
+        const { column, columnAttrs = {}, columnClassName } = this.props;
+        const childrenInColumns = this.itemsInColumns();
+        const columnWidth = `${100 / childrenInColumns.length}%`;
+        let className = columnClassName;
+        if (className && typeof className !== 'string') {
+            this.logDeprecated('The property "columnClassName" requires a string');
+            // This is a deprecated default and will be removed soon.
+            if (typeof className === 'undefined') {
+                className = 'my-masonry-grid_column';
+            }
+        }
+        const columnAttributes = Object.assign(Object.assign(Object.assign({}, column), columnAttrs), { style: Object.assign(Object.assign({}, columnAttrs.style), { width: columnWidth }), className });
+        return childrenInColumns.map((items, i) => {
+            return createElement("div", Object.assign({}, columnAttributes, { key: i }), items);
+        });
+    }
+    logDeprecated(message) {
+        console.error('[Masonry]', message);
+    }
+    render() {
+        const _a = this.props, { 
+        // ignored
+        children, breakpointCols, columnClassName, columnAttrs, column, 
+        // used
+        className } = _a, rest = __rest(_a, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "className"]);
+        let classNameOutput = className;
+        if (typeof className !== 'string') {
+            this.logDeprecated('The property "className" requires a string');
+            // This is a deprecated default and will be removed soon.
+            if (typeof className === 'undefined') {
+                classNameOutput = 'my-masonry-grid';
+            }
+        }
+        return (jsx("div", Object.assign({}, rest, { className: classNameOutput }, { children: this.renderColumns() })));
+    }
+}
+
 const calcPlaceholderStyle = (width, height, duration = 1600) => ({
     backgroundSize: `${parseInt(width.toString()) * 10}px ${height}px`,
     animationDuration: `${(duration / 1000).toFixed(1)}s`,
@@ -1423,4 +1548,4 @@ const Header = forwardRef((props, ref) => {
     return (jsx(Fragment, { children: buildComponent(data) }));
 });
 
-export { App, Component as Block, Box, Button, Checkbox, ContextMenu, Cover, Form, Header, Heading, Icon, Image, Input, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, createSlice, el, filterHTMLProps, filterStyleProps, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getUriParams, grab, isEmail, isIPv4, isUrl, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useDevice, useDispatch, useImage, useResizeObserver, useStore, useTheme, useToast, uuid };
+export { App, Component as Block, Box, Button, Checkbox, ContextMenu, Cover, Form, Header, Heading, Icon, Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, createSlice, el, filterHTMLProps, filterStyleProps, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getUriParams, grab, isEmail, isIPv4, isUrl, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useDevice, useDispatch, useImage, useResizeObserver, useStore, useTheme, useToast, uuid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "type": "module",
   "main": "dist/index.js",
   "exports": {

package/src/comps/masonry.tsx

@@ -0,0 +1,192 @@
+import { Component, Children } from "react"
+import PropTypes from 'prop-types'
+
+const DEFAULT_COLUMNS = 2;
+
+class Masonry extends Component<any, any> {
+
+    constructor(props : { [ key: string ] : any }) {
+        super(props);
+        // Correct scope for when methods are accessed externally
+        this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this);
+        this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this);
+        // default state
+        let columnCount
+        if (this.props && this.props.breakpointCols.default) {
+            columnCount = this.props.breakpointCols.default
+        } else {
+            columnCount = parseInt(this.props.breakpointCols) || DEFAULT_COLUMNS
+        }
+        this.state = {
+            columnCount
+        };
+    }
+
+    componentDidMount() {
+        this.reCalculateColumnCount();
+        // window may not be available in some environments
+        if(window) {
+          window.addEventListener('resize', this.reCalculateColumnCountDebounce);
+        }
+    }
+
+    componentDidUpdate() {
+        this.reCalculateColumnCount();
+    }
+    
+    componentWillUnmount() {
+        if(window) {
+            window.removeEventListener('resize', this.reCalculateColumnCountDebounce);
+        }
+    }
+
+    reCalculateColumnCountDebounce() {
+        if(!window || !window.requestAnimationFrame) {  // IE10+
+          this.reCalculateColumnCount();
+          return;
+        }
+        
+        if(window.cancelAnimationFrame) { // IE10+
+          window.cancelAnimationFrame(this._lastRecalculateAnimationFrame);
+        }
+  
+    }
+
+    _lastRecalculateAnimationFrame = window.requestAnimationFrame(() => {
+      this.reCalculateColumnCount();
+    });
+
+    reCalculateColumnCount() {
+        const windowWidth = window && window.innerWidth || Infinity;
+        let breakpointColsObject = this.props.breakpointCols;
+    
+        // Allow passing a single number to `breakpointCols` instead of an object
+        if(typeof breakpointColsObject !== 'object') {
+          breakpointColsObject = {
+            default: parseInt(breakpointColsObject) || DEFAULT_COLUMNS
+          }
+        }
+    
+        let matchedBreakpoint = Infinity;
+        let columns = breakpointColsObject.default || DEFAULT_COLUMNS;
+    
+        for(let breakpoint in breakpointColsObject) {
+          const optBreakpoint = parseInt(breakpoint);
+          const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint;
+    
+          if(isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) {
+            matchedBreakpoint = optBreakpoint;
+            columns = breakpointColsObject[breakpoint];
+          }
+        }
+    
+        columns = Math.max(1, parseInt(columns) || 1);
+    
+        if(this.state.columnCount !== columns) {
+          this.setState({
+            columnCount: columns
+          });
+          this.props.onChange && this.props.onChange({ columns: columns });
+        }
+    }
+
+    itemsInColumns() {
+        const currentColumnCount = this.state.columnCount;
+        const itemsInColumns = new Array(currentColumnCount);
+    
+        // Force children to be handled as an array
+        const items = Children.toArray(this.props.children)
+    
+        for (let i = 0; i < items.length; i++) {
+          const columnIndex = i % currentColumnCount;
+    
+          if(!itemsInColumns[columnIndex]) {
+            itemsInColumns[columnIndex] = [];
+          }
+    
+          itemsInColumns[columnIndex].push(items[i]);
+        }
+    
+        return itemsInColumns;
+    }
+
+    renderColumns() {
+        const { column, columnAttrs = {}, columnClassName } = this.props;
+        const childrenInColumns = this.itemsInColumns();
+        const columnWidth = `${100 / childrenInColumns.length}%`;
+        let className = columnClassName;
+    
+        if(className && typeof className !== 'string') {
+          this.logDeprecated('The property "columnClassName" requires a string');
+    
+          // This is a deprecated default and will be removed soon.
+          if(typeof className === 'undefined') {
+            className = 'my-masonry-grid_column';
+          }
+        }
+    
+        const columnAttributes = {
+          // NOTE: the column property is undocumented and considered deprecated.
+          // It is an alias of the `columnAttrs` property
+          ...column,
+          ...columnAttrs,
+          style: {
+            ...columnAttrs.style,
+            width: columnWidth
+          },
+          className
+        };
+    
+        return childrenInColumns.map((items, i) => {
+          return <div
+            {...columnAttributes}
+    
+            key={i}
+          >
+            {items}
+          </div>;
+        });
+    }
+    
+    logDeprecated(message) {
+        console.error('[Masonry]', message);
+    }
+
+    render() {
+        const {
+          // ignored
+          children,
+          breakpointCols,
+          columnClassName,
+          columnAttrs,
+          column,
+    
+          // used
+          className,
+    
+          ...rest
+        } = this.props;
+    
+        let classNameOutput = className;
+    
+        if(typeof className !== 'string') {
+          this.logDeprecated('The property "className" requires a string');
+    
+          // This is a deprecated default and will be removed soon.
+          if(typeof className === 'undefined') {
+            classNameOutput = 'my-masonry-grid';
+          }
+        }
+    
+        return (
+          <div
+            {...rest}
+            className={classNameOutput}
+          >
+            {this.renderColumns()}
+          </div>
+        );
+    }
+}
+
+export default Masonry;

package/src/context/store/theme.tsx

@@ -31,15 +31,16 @@ class AppTheme {
 
     get = () => {
         let self = this;
-        if(self.#mode === "auto"){
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-                self.#mode = event.matches ? "dark" : "light";
-                self.#listen(self.#mode);
-            });
-            return window.matchMedia && 
-                window.matchMedia('(prefers-color-scheme: dark)').matches ? 
-                self.#darkTheme : self.#lightTheme;
-        }else if(self.#mode === "light"){
+        // if(self.#mode === "auto"){
+        //     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        //         self.#mode = event.matches ? "dark" : "light";
+        //         self.#listen(self.#mode);
+        //     });
+        //     return window.matchMedia && 
+        //         window.matchMedia('(prefers-color-scheme: dark)').matches ? 
+        //         self.#darkTheme : self.#lightTheme;
+        // }else 
+        if(self.#mode === "light"){
             return self.#lightTheme;
         }else if(self.#mode === "dark"){
             return self.#darkTheme;

package/src/hooks/useTheme.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useEffect } from 'react'
 import AppContext from '../context'
 
 const useTheme = (mod = 'auto') => {

package/src/index.tsx

@@ -15,6 +15,7 @@ export { default as Heading } from './comps/heading'
 export { default as Icon } from './comps/icon'
 export { default as Input } from './comps/input'
 export { default as Image } from './comps/image'
+export { default as Masonry } from './comps/masonry'
 export { default as Placeholder } from './comps/placeholder'
 export { default as Toaster } from './comps/toaster'
 export { default as Select } from './comps/select'