funda-ui 1.0.272

package/lib/esm/CascadingSelectE2E/utils/performance.js

@@ -0,0 +1,52 @@
+
+/*
+* Debounce
+*
+* @param  {Function} fn    - A function to be executed within the time limit.
+* @param  {Number} limit   - Waiting time.
+* @return {Function}       - Returns a new function.
+*/  
+function debounce( fn, limit = 300 ) {
+    let timer;
+    return function() {
+    
+        //Every time this returned function is called, the timer is cleared to ensure that fn is not executed
+        clearTimeout(timer);
+
+        // When the returned function is called for the last time (that is the user stops a continuous operation)
+        // Execute fn after another delay milliseconds
+        timer = setTimeout(function() {
+            fn.apply(this, arguments);
+        }, limit);
+    }
+}
+
+
+
+
+
+/*
+* Throttle
+*
+* @param  {Function} fn    - A function to be executed within the time limit.
+* @param  {Number} limit   - Waiting time.
+* @return {Function}       - Returns a new function.
+*/  
+function throttle( fn, limit = 300 ) {
+	let waiting = false;                     
+	return function () {                     
+		if (!waiting) {                 
+			fn.apply(this, arguments);  
+			waiting = true;                  
+			setTimeout(function () {          
+				waiting = false;           
+			}, limit);
+		}
+	}
+}
+
+
+module.exports = {
+    debounce,
+    throttle
+}

package/lib/esm/Checkbox/index.tsx

@@ -0,0 +1,160 @@
+import React, { useId, useState, useEffect, useRef, forwardRef } from 'react';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+type CheckboxOptionChangeFnType = (arg1: any, arg2: any) => void;
+
+
+type CheckboxProps = {
+    wrapperClassName?: string;
+    value: string | boolean;
+    label?: React.ReactNode | string;
+    name?: string;
+    disabled?: any;
+    required?: any;
+    checked?: boolean;
+    indeterminate?: boolean;
+    /** -- */
+    id?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    /** This function is called whenever the data is updated.
+     *  Exposes the JSON format data about the option as an argument.
+     */
+    onChange?: CheckboxOptionChangeFnType | null;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+};
+
+const Checkbox = forwardRef((props: CheckboxProps, ref: any) => {
+    const {
+        wrapperClassName,
+        disabled,
+        required,
+        value,
+        label,
+        name,
+        id,
+        checked,
+        indeterminate,
+        style,
+        tabIndex,
+        onChange,
+        onBlur,
+        onFocus,
+        ...attributes
+    } = props;
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const valRef = useRef<any>(null);
+    const [val, setVal] = useState<any>(null);
+
+    function handleFocus(event: any) {
+        rootRef.current.classList.add('focus');
+
+        //
+        onFocus?.(event);    
+    }
+
+
+    function handleChange(event: any) {
+        const _val = event.target.checked;
+
+        setVal(_val);
+        
+        //----
+        //remove focus style
+        rootRef.current.classList.remove('focus');
+
+        //
+        if (typeof (onChange) === 'function') {
+            onChange(event, _val);
+        }
+
+        
+
+    }
+
+
+    function handleBlur(event: any) {
+
+        //----
+        //remove focus style
+        rootRef.current.classList.remove('focus');
+
+        //
+        onBlur?.(event);
+    }
+
+
+    useEffect(() => {
+
+        // default value
+        setVal(checked);
+
+        // Set a checkbox to indeterminate state
+        if ( typeof indeterminate !== 'undefined' ) {
+            valRef.current.indeterminate = indeterminate;
+        }
+
+    }, [checked, indeterminate]);
+
+
+    return (
+        <>
+
+            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ref={rootRef}>
+                <div className="form-check">
+                    <input 
+                        ref={(node) => {
+                            valRef.current = node;
+                            if (typeof ref === 'function') {
+                                ref(node);
+                            } else if (ref) {
+                                ref.current = node;
+                            }
+                        }}
+                        tabIndex={tabIndex || 0}
+                        type="checkbox"
+                        className="form-check-input"
+                        id={`label-${idRes}`}
+                        
+                        // Don't use "name", it's just a container to display the label
+                        data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}    
+                        data-checkbox
+                        disabled={disabled || null}
+                        required={required || null}
+                        onChange={handleChange}
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
+                        defaultValue={value as string || ''}
+                        checked={val}   // component status will not change if defaultChecked is used
+                        style={{cursor: 'pointer', ...style}}
+                        {...attributes}
+                    />
+
+
+                    <input 
+                        type="hidden"
+                        id={idRes}
+                        name={name}
+                        value={val ? value as string || '' : ''}  // do not use `defaultValue`
+                    />
+
+                    {label ? <><label htmlFor={`label-${idRes}`} className="form-check-label">{label}</label></> : null}
+                </div>
+            </div>
+
+
+        </>
+    )
+});
+
+export default Checkbox;

package/lib/esm/ColorPicker/index.scss

@@ -0,0 +1,48 @@
+/* ======================================================
+    <!-- Color Picker -->
+/* ====================================================== */
+
+.custom-form-control-color {
+
+    --color-control-border-radius: 0.375rem;
+    --color-control-size: 30px;
+    --color-control-border-color: rgba(0,0,0,.1);
+
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    padding: 0 !important;
+    width: var(--color-control-size) !important;
+    height: var(--color-control-size) !important;
+    border: none;
+    cursor: pointer;
+    
+    &::-webkit-color-swatch {
+        border: 2px solid var(--color-control-border-color);
+    }
+    &::-moz-color-swatch {
+        border: 2px solid var(--color-control-border-color);
+    }
+
+    &:disabled { 
+        cursor: not-allowed;
+    }
+
+    &.custom-form-control-color--rounded::-webkit-color-swatch {
+        border-radius: var(--color-control-border-radius);
+    }
+    &.custom-form-control-color--rounded::-moz-color-swatch {
+        border-radius: var(--color-control-border-radius);
+    }
+
+
+    &.custom-form-control-color--circle::-webkit-color-swatch {
+        border-radius: 50%;
+    }
+    &.custom-form-control-color--circle::-moz-color-swatch {
+        border-radius: 50%;
+    }
+    
+}

package/lib/esm/ColorPicker/index.tsx

@@ -0,0 +1,187 @@
+import React, { useId, useState, useEffect, useRef, forwardRef, ChangeEvent } from 'react';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+interface ColorPickerProps extends React.ComponentPropsWithoutRef<"input"> {
+    wrapperClassName?: string;
+    controlClassName?: string;
+    value?: string;
+    label?: React.ReactNode | string;
+    name?: string;
+    disabled?: any;
+    required?: any;
+    readOnly?: any;
+    shape?: string;
+    /** -- */
+    id?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+
+};
+
+
+const ColorPicker = forwardRef((props: ColorPickerProps, ref: any) => {
+    const {
+        wrapperClassName,
+        controlClassName,
+        disabled,
+        required,
+        readOnly,
+        value,
+        label,
+        name,
+        shape,
+        id,
+        style,
+        tabIndex,
+        onChange,
+        onBlur,
+        onFocus,
+        ...attributes
+    } = props;
+
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const valRef = useRef<any>(null);
+    const [changedVal, setChangedVal] = useState<string>(value || '');
+    let shapeClassName = '';
+
+    if (shape && typeof shape === 'string') {
+        switch (shape) {
+            case 'rounded':
+                shapeClassName = 'custom-form-control-color--rounded';
+                break;   
+            case 'circle':
+                shapeClassName = 'custom-form-control-color--circle';
+                break;    
+        }
+    }
+
+
+
+    function handleFocus(event: ChangeEvent<HTMLInputElement>) {
+        rootRef.current.classList.add('focus');
+
+        //
+        onFocus?.(event);    
+    }
+
+    function handleChange(event: ChangeEvent<HTMLInputElement>) {
+        const val = event.target.value;
+
+        setChangedVal(val);
+
+
+        //----
+        //remove focus style
+        if (val === '') {
+            rootRef.current.classList.remove('focus');
+        }
+
+        //
+        onChange?.(event);
+
+    }
+
+    function handleBlur(event: ChangeEvent<HTMLInputElement>) {
+        const el = event.target;
+        const val = event.target.value;
+
+
+        //----
+        //remove focus style
+        if (val === '') {
+            rootRef.current.classList.remove('focus');
+        }
+
+        //
+        onBlur?.(event);
+    }
+
+
+    useEffect(() => {
+
+        // update default value
+        //--------------
+        setChangedVal(value || '');
+
+        // If you use the dynamic form assignment (such as document.getElementById(xxx).value), 
+        // you need to judge the value of the input obtained by using the macrotask "setInterval()"
+        let timer: any = null;
+        let initTimes: number = 0;
+        let hasValue: boolean = false;
+        timer = setInterval( () => {
+            if ( initTimes > 5 || hasValue ) {
+                clearInterval(timer);
+            } else {
+                if ( valRef.current !== null && valRef.current.value !== '' && ( typeof value === 'undefined' || value === '' ) ) {
+                    setChangedVal(valRef.current.value);
+                    hasValue = true;
+                }
+                initTimes++;
+
+            }
+        }, 500);
+
+        return () => {
+            clearInterval(timer);
+        }
+
+    }, [value]);
+
+
+    return (
+        <>
+
+            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ref={rootRef}>
+                {label ? <><label htmlFor={idRes} className="form-label">{label}</label></> : null}
+
+                <div className="input-group">
+                    <input
+                        ref={(node) => {
+                            valRef.current = node;
+                            if (typeof ref === 'function') {
+                                ref(node);
+                            } else if (ref) {
+                                ref.current = node;
+                            }
+                        }}
+                        
+                        
+                        tabIndex={tabIndex || 0}
+                        type='color'
+                        className={`${controlClassName || controlClassName === '' ? controlClassName : "form-control custom-form-control-color flex-grow-0"} ${shapeClassName}`}
+                        id={idRes}
+                        name={name}
+                        value={changedVal}
+                        onFocus={handleFocus}
+                        onBlur={handleBlur}
+                        onChange={handleChange}
+                        disabled={disabled || null}
+                        required={required || null}
+                        readOnly={readOnly || null}
+                        style={style}
+                        {...attributes}
+                    />
+
+                </div>
+                {required ? <><span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span></> : ''}
+
+            </div>
+
+
+        </>
+    )
+});
+
+export default ColorPicker;

package/lib/esm/DigitalClock/index.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+
+import useInterval from './utils/useInterval';
+
+type DigitalClockProps = {
+    tmpl?: (date: any) => void;
+    militaryTime?: boolean;
+};
+
+
+const DigitalClock = (props: DigitalClockProps) => {
+    const { 
+        tmpl, 
+        militaryTime 
+    } = props;
+
+    const [date, setDate] = useState<any>({
+        minutes: 'NULL',
+        seconds: 'NULL',
+        hours: 'NULL',
+        amPm: 'NULL'
+    });
+    const [clockAppearance, setClockAppearance] = useState<React.ReactNode>(null);
+
+    let time: Date = new Date();
+    let minutes: any = time.getMinutes();
+    let seconds: any = time.getSeconds();
+    let hours: any = time.getHours();
+    let amPm = time.getHours() > 12 ? "pm" : "am";
+
+    useInterval(() => {
+        time = new Date();
+        minutes = time.getMinutes();
+        seconds = time.getSeconds();
+        hours = time.getHours();
+
+        if ( militaryTime ) {
+            amPm = 'NULL';
+        } else {
+            minutes = minutes < 10 ? "0" + minutes : minutes;
+            seconds = seconds < 10 ? "0" + seconds : seconds;
+            hours = hours < 10 ? "0" + hours : hours;
+            hours = hours > 12 ? hours - 12 : hours;
+            hours = hours == 0 ? 12 : hours;
+        }
+
+
+        const curData = {
+            minutes: minutes,
+            seconds: seconds,
+            hours: hours,
+            amPm: amPm
+        };
+
+        setDate(curData);
+
+        //callback
+        const res: any = tmpl?.(curData);
+        setClockAppearance(res);
+    }, 1000);
+
+
+    return (
+        <>
+            {date ? <>{clockAppearance}</> : null}
+
+        </>
+    )
+};
+
+
+export default DigitalClock;

package/lib/esm/DigitalClock/utils/useInterval.js

@@ -0,0 +1,43 @@
+/**
+ * Provides a convenient way to create and manage intervals
+ * 
+ * @usage:
+
+const App = () => {
+    const [count, setCount] = useState(0);
+
+    useInterval(() => {
+        setCount(count + 1);
+    }, 1000);
+
+    return (
+        <div className="app"></div>
+    );
+};
+
+ */
+import { useEffect, useRef } from "react";
+
+const useInterval = (fn, delay) => {
+    const ref = useRef(null);
+
+    useEffect(() => {
+        ref.current = fn;
+    }, [fn]);
+
+    useEffect(() => {
+        function tick() {
+            ref.current && ref.current();
+        }
+        
+        if (delay !== null && delay > 0) {
+            let id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        } else {
+            tick();
+        }
+    }, [delay]);
+};
+
+export default useInterval;
+

package/lib/esm/DropdownMenu/Option.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface OptionConfig {
+	value?: string | undefined;
+	label?: string | undefined;
+}
+
+type OptionProps = {
+    option?: OptionConfig;
+    hyperlinkClassName?: string;
+    onSelect?: (option: any) => void | undefined;
+};
+
+export default function Option(props: OptionProps) {
+
+    function handleSelect(e) {
+        e.preventDefault();
+
+        const fn: any = props.onSelect;
+        fn(props.option);
+    }
+
+    return (
+        <li><a className={props.hyperlinkClassName} data-value={props.option?.value} href="#" tabIndex={-1} onClick={handleSelect} dangerouslySetInnerHTML={{__html: `${props.option?.label}`}}></a></li>
+    );
+}
+