funda-ui 1.0.272

package/lib/esm/Pagination/index.tsx

@@ -0,0 +1,230 @@
+import React from 'react';
+import { paginationNavigators } from './pagination-navigators';
+
+
+type PaginationProps = {
+    /** The class name of the navigation wrapper */
+    wrapperClassName?: string;
+    /** The class name of the navigation */
+    navClassName?: string;
+    /** An API URL Path. Use `{page}` characters to place a placeholder. such as `/mypage/{page}` */
+    apiUrl: string;
+    /** The range of pages displayed */
+    pageRangeDisplayed: number;
+    /**  The currently selected page number. */
+    activePage: number;
+    /** The total number of pages. */
+    totalPages: number;
+    /** Label for the previous button. */
+    previousLabel?: React.ReactNode;
+    /** Label for the next button. */
+    nextLabel?: React.ReactNode;
+    /** Label for the first button. */
+    firstLabel?: React.ReactNode;
+    /** Label for the last button. */
+    lastLabel?: React.ReactNode;
+    /** Label for ellipsis */
+    breakLabel?: React.ReactNode;
+    /** Set the alignment of the control */
+    align?: string | null;
+    /** Only display the previous and next buttons. */
+    onlyPrevNext?: boolean;
+    /** The classname for the active page */
+    activeClass?: string;
+    /** The classname on tag li of the previous button */
+    previousClass?: string;
+    /** The classname on tag li of the next button */
+    nextClass?: string;
+    /** The classname on tag li of the first button */
+    firstClass?: string;
+    /** The classname on tag li of the last button */
+    lastClass?: string;
+    /** The classname for disabled buttons */
+    disabledClass?: string;
+    /** The activation button is symmetrical on the left and right sides. */
+    symmetry?: boolean;
+    /** -- */
+    style?: React.CSSProperties;
+    /** The method to call when a page is clicked. Exposes the current page number as an argument. */
+    onChange?: (param: any) => void;
+    
+
+};
+
+const Pagination = (props: PaginationProps) => {
+    const {
+        wrapperClassName,
+        navClassName,
+        apiUrl,
+        pageRangeDisplayed,
+        activePage,
+        totalPages,
+        previousLabel,
+        nextLabel,
+        firstLabel,
+        lastLabel,
+        breakLabel,
+        align,
+        onlyPrevNext,
+        activeClass,
+        previousClass,
+        nextClass,
+        firstClass,
+        lastClass,
+        disabledClass,
+        symmetry,
+        style,
+        onChange
+    } = props;
+
+
+    function handleClick(parameter: any) {
+
+        switch (parameter) {
+            case "prev":
+                onChange?.(activePage - 1);
+                break;
+            case "next":
+                onChange?.(activePage + 1);
+                break;
+            case "first":
+                onChange?.(1);
+                break;
+            case "last":
+                onChange?.(totalPages);
+                break;
+            default:
+                onChange?.(1);
+                break;
+        }
+    }
+
+    const visibleNavigators = pageRangeDisplayed ? pageRangeDisplayed : 3;
+
+    let alignClassName = '';
+    switch (align) {
+        case 'left':
+            alignClassName = ' justify-content-start';
+            break;
+        case 'right':
+            alignClassName = ' justify-content-end';
+            break;
+        case 'center':
+            alignClassName = ' justify-content-center';
+            break;
+    }
+
+    const _activeClassName = activeClass ? activeClass : 'active',
+        _previousClassName = previousClass ? previousClass : 'prev',
+        _nextClassName = nextClass ? nextClass : 'next',
+        _firstClassName = firstClass ? firstClass : 'first',
+        _lastClassName = lastClass ? lastClass : 'last',
+        _disabledClassName = disabledClass ? disabledClass :'disabled',
+        _onlyPrevNextButtons = typeof (onlyPrevNext) === 'undefined' ? false : onlyPrevNext,
+        _symmetry = typeof (symmetry) === 'undefined' ? false : symmetry;
+
+
+    //get navigation array
+    //------------------------------------------
+    const navArr = paginationNavigators(visibleNavigators, totalPages, activePage, true, _symmetry);
+
+
+    // Use ellipsis to extend page numbers
+    //------------------------------------------
+    let _ellipsis = breakLabel ? breakLabel : '';
+    let _ellipsisArr: any[any] = [];
+    let _ellipsisEnabled = false;
+
+    if (_ellipsis !== '') _ellipsisArr = [totalPages - 1, totalPages];
+    if (activePage + 2 >= totalPages) {
+        _ellipsisArr = [];
+        _ellipsis = '';
+    }
+
+    const _ellipsisElements = _ellipsisArr.map((item: any, i: number) => {
+        if (item > 0 && item <= totalPages && !_onlyPrevNextButtons) {
+            //Delete values whose display range is more than the total
+            if (navArr.indexOf(item) === -1) {
+                _ellipsisEnabled = true;
+
+                return (
+                    <li key={i} className={activePage === item ? `page-item ${_activeClassName}` : `page-item`}>
+                        <a className="page-link" href={apiUrl.replace('{page}', item)} onClick={(e) => {
+                            e.preventDefault();
+                            onChange?.(item);
+                        }}>{item}</a>
+                    </li>
+                );
+            }
+        }
+    });
+
+    return (
+        <>
+
+            <nav className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"}  style={style}>
+                <ul className={navClassName ? `${navClassName} ${alignClassName}` : `pagination ${alignClassName}`}>
+                    {firstLabel ? (
+                        <li className={activePage > 1 ? `page-item ${_firstClassName}` : `page-item ${_firstClassName} ${_disabledClassName}`}>
+                            <a tabIndex={activePage > 1 ? 0 : -1} aria-disabled={activePage > 1 ? 'false' : 'true'}className="page-link" href={apiUrl.replace('{page}', '1')} onClick={(e) => { e.preventDefault(); handleClick('first'); }}>
+                                {firstLabel || null}
+                            </a>
+                        </li>
+                    ) : ''}
+
+                    {previousLabel ? (
+                        <li className={activePage > 1 ? `page-item ${_previousClassName}` : `page-item ${_previousClassName} ${_disabledClassName}`}>
+                            <a tabIndex={activePage > 1 ? 0 : -1} aria-disabled={activePage > 1 ? 'false' : 'true'}className="page-link" href={apiUrl.replace('{page}', (activePage - 1) as any)} onClick={(e) => { e.preventDefault(); handleClick('prev'); }}>
+                                {previousLabel || null}
+                            </a>
+                        </li>
+                    ) : ''}
+
+
+                    {
+                        navArr.map((item: any, i: number) => {
+                            if (item > 0 && item <= totalPages && !_onlyPrevNextButtons) {
+                                return (
+                                    <li key={i} className={activePage === item ? `page-item ${_activeClassName}` : `page-item`}>
+                                        <a className="page-link" href={apiUrl.replace('{page}', item)} onClick={(e) => {
+                                            e.preventDefault();
+                                            onChange?.(item);
+                                        }}>{item}</a>
+                                    </li>
+                                );
+                            }
+
+                        })
+                    }
+
+
+                    {_ellipsis !== '' && _ellipsisEnabled ? <><li className="page-item"><span className="page-link">{_ellipsis}</span></li></> : ''}
+                    {_ellipsisElements}
+
+                    {nextLabel ? (
+                        <li className={activePage < totalPages ? `page-item ${_nextClassName}` : `page-item ${_nextClassName} ${_disabledClassName}`}>
+                            <a tabIndex={activePage < totalPages ? 0 : -1} aria-disabled={activePage < totalPages ? 'false' : 'true'} className="page-link" href={apiUrl.replace('{page}', (activePage + 1) as any)} onClick={(e) => { e.preventDefault(); handleClick('next'); }}>
+                                {nextLabel || null}
+                            </a>
+                        </li>
+                    ) : ''}
+
+
+                    {lastLabel ? (
+                        <li className={activePage < totalPages ? `page-item ${_lastClassName}`  : `page-item ${_lastClassName} ${_disabledClassName}`}>
+                            <a tabIndex={activePage < totalPages ? 0 : -1} aria-disabled={activePage < totalPages ? 'false' : 'true'} className="page-link" href={apiUrl.replace('{page}', totalPages as any)} onClick={(e) => { e.preventDefault(); handleClick('last'); }}>
+                                {lastLabel || null}
+                            </a>
+                        </li>
+                    ) : ''}
+
+                </ul>
+
+            </nav>
+
+
+        </>
+    )
+};
+
+export default Pagination;

package/lib/esm/Pagination/pagination-navigators.tsx

@@ -0,0 +1,60 @@
+
+/*
+* Generate page navigators
+*
+* @param  {Number} visibleNavigators    - The range of pages displayed.
+* @param  {Number} totalPages           - The total number of pages.
+* @param  {Number} activePage           - The currently selected page number.
+* @param  {Boolean} adjustmentEnabled   - Whether to complete the page number range.
+* @param  {Boolean} symmetry            - The activation button is symmetrical on the left and right sides.
+* @return {Array}                       - Return an array.
+*/
+export function paginationNavigators(visibleNavigators: number, totalPages: number, activePage: number, adjustmentEnabled = true, symmetry = false) {
+
+	// Generate a sequence of numbers
+	// Since the array is initialized with `undefined` on each position,
+	// the value of `v` below will be `undefined`
+
+	let result: any[number] = [];
+	if ((activePage + visibleNavigators - 1) < totalPages) {
+		result = Array.from({ length: visibleNavigators }, (v, k) => k + activePage);
+	} else {
+		let diff = totalPages - activePage;
+		if (diff >= 0) {
+			result = Array.from({ length: diff + 1 }, (v, k) => k + activePage);
+		}
+
+	}
+
+	//Shift the elements forward to complete the display range
+	const adjustmentResult = ( arr: any[] ) => {
+		if ( arr.length < totalPages ) {
+			let adjustment = visibleNavigators - arr.length;
+			for (let i = 1; i <= adjustment; i++) {
+				arr.unshift(activePage - i);
+			}
+		}
+		return arr;
+	};
+
+	if ( adjustmentEnabled ) result = adjustmentResult(result);
+
+
+    // symmetrical on the left and right sides
+    if ( symmetry ) {
+        if ( totalPages > activePage ) {
+            const totalDisplayedPages = visibleNavigators + (visibleNavigators - 1);
+            const activedPageIndex = result.indexOf(activePage);
+            const leftSideTotal = (visibleNavigators - 1) - activedPageIndex;
+
+            for (let i = 1; i <= leftSideTotal; i++) {
+                result.unshift(activePage - i - activedPageIndex);
+            }
+        }
+    }
+
+	
+	return result;
+}
+
+export default paginationNavigators;

package/lib/esm/Radio/index.tsx

@@ -0,0 +1,201 @@
+import React, { useId, useRef, useState, useEffect } from 'react';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+type RadioOptionChangeFnType = (arg1: any, arg2: any) => void;
+
+
+type RadioProps = {
+    wrapperClassName?: string;
+    value?: string;
+    label?: React.ReactNode | string;
+    name?: string;
+    disabled?: any;
+    required?: any;
+    options: string;
+    inline?: 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.
+     */
+    onClick?: RadioOptionChangeFnType | null;
+    onChange?: RadioOptionChangeFnType | null;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+};
+
+const Radio = (props: RadioProps) => {
+    const {
+        wrapperClassName,
+        disabled,
+        required,
+        value,
+        label,
+        name,
+        id,
+        options,
+        inline,
+        style,
+        tabIndex,
+        onClick,
+        onChange,
+        onBlur,
+        onFocus,
+        ...attributes
+    } = props;
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const [val, setVal] = useState<any>(null);
+
+    // Determine whether it is in JSON format
+    function isJSON(str: any) {
+
+        if (typeof (str) === 'string' && str.length > 0) {
+
+            if (str.replace(/\"\"/g, '').replace(/\,/g, '') == '[{}]') {
+                return false;
+            } else {
+
+                if (/^[\],:{}\s]*$/.test(str.replace(/\\["\\\/bfnrtu]/g, '@').
+                    replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
+                    replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+
+                    return true;
+
+                } else {
+                    return false;
+                }
+
+            }
+
+        } else {
+
+            if (
+                typeof (str) === 'object' &&
+                Object.prototype.toString.call(str) === '[object Object]' &&
+                !str.length
+            ) {
+                return true;
+            } else {
+                return false;
+            }
+
+        }
+
+    }
+
+    function handleFocus(event: any) {
+        event.target.parentElement.classList.add('focus');
+
+        //
+        onFocus?.(event);    
+    }
+
+
+    function handleChange(event: any) {
+        const _val = event.target.value;
+
+        setVal(_val);
+        
+
+        //----
+        //remove focus style
+        [].slice.call(rootRef.current.querySelectorAll('.form-check-input')).forEach( (el: any) => {
+            el.parentElement?.classList.remove('focus');
+        });
+      
+     
+        //
+        if (typeof (onChange) === 'function') {
+            onChange(event, _val);
+        }
+        if (typeof (onClick) === 'function') {
+            onClick(event, _val);
+        }
+
+
+    }
+
+
+    function handleBlur(event: any) {
+
+        //----
+        //remove focus style
+        event.target.parentElement.classList.remove('focus');
+
+        //
+        onBlur?.(event);
+    }
+
+
+
+    // Get all options from option prop
+    const selectOptions = isJSON(options) ? JSON.parse(options) : null;
+    const optionKeys = selectOptions === null ? [] : Object.keys(selectOptions);
+    const optionValues = selectOptions === null ? [] : Object.values(selectOptions).map((item: any) => item.toString() );
+
+
+
+    const radioOptionsList = optionKeys.map((radioOption, index) => {
+        const requiredVal = index === 0 ? required || null : null;
+
+      
+        return <div key={index} className={inline ? `form-check form-check-inline` : `form-check`}>
+                <input 
+                    tabIndex={tabIndex || 0}
+                    type="radio" 
+                    className="form-check-input"
+                    id={`field-${uniqueID}-${index}`}
+                    name={name} 
+                    value={optionValues[index] as string} 
+                    required={requiredVal} 
+                    disabled={disabled || null}
+                    onChange={handleChange}
+                    onClick={typeof (onClick) === 'function' ? handleChange : () => void(0)}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    checked={val == optionValues[index]}   // component status will not change if defaultChecked is used
+                    style={style}
+                    {...attributes}
+                />
+                <label className="form-check-label" htmlFor={`field-${uniqueID}-${index}`} dangerouslySetInnerHTML={{
+                    __html: radioOption
+                }}></label>
+            </div>;
+
+    });
+
+
+
+    useEffect(() => {
+        setVal(value);
+    }, [value, options]);
+
+
+
+    return (
+        <>
+
+            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ref={rootRef}>
+                {label ? <><label htmlFor={idRes} className="form-label">{label}</label></> : null}
+                <div id={idRes}>
+                    {radioOptionsList}
+                </div>
+            </div>
+
+
+        </>
+    )
+};
+
+export default Radio;

package/lib/esm/RangeSlider/index.scss

@@ -0,0 +1,184 @@
+/* ======================================================
+    <!-- Range Slider -->
+/* ====================================================== */
+
+$thumb-size: 16px;
+$control-height: 0.75rem;
+
+@mixin track-styles {
+    appearance: none;
+    background: transparent;
+    border: transparent;
+}
+
+@mixin thumb-styles {
+    appearance: none;
+    pointer-events: all;
+    width: $thumb-size;
+    height: $thumb-size;
+    border-radius: 0px;
+    border: 0 none;
+    cursor: grab;
+
+    &:active {
+        cursor: grabbing;
+    }
+}
+
+.range-slider__wrapper {
+
+    --range-slider-grab: #0b5ed7;
+    --range-slider-active-grab-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
+    --range-slider-active-grab-border-color: #86b7fe;
+    --range-slider-rail: #e9ecef;
+    --range-slider-inner-rail: #0d6efd;
+    
+
+    > div:not(.range-slider__control-wrapper) {
+        width: 49% !important;
+        display: inline-block !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        margin-block-start: 0 !important;
+        margin-block-end: 0 !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        padding-block-start: 0 !important;
+        padding-block-end: 0 !important;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .range-slider__control-wrapper {
+        width: calc(100% - $thumb-size);
+
+        .range-slider__input {
+            width: calc(100% + #{$thumb-size});
+            margin: 0 calc(#{$thumb-size} / -2);
+            position: absolute;
+            height: $thumb-size;
+            
+            [type=range] {
+                position: absolute;
+                width: 100%;
+                pointer-events: none;
+                appearance: none;
+                height: 100%;
+                opacity: 0;
+                z-index: 3;
+                padding: 0;
+
+
+                &:disabled {
+                    display: none;
+                }
+
+                &::-ms-track {
+                    @include track-styles;
+                }
+
+                &::-moz-range-track {
+                    @include track-styles;
+                }
+
+                &:focus::-webkit-slider-runnable-track {
+                    @include track-styles;
+                }
+
+                &::-ms-thumb {
+                    @include thumb-styles;
+                }
+
+                &::-moz-range-thumb {
+                    @include thumb-styles;
+                }
+
+                &::-webkit-slider-thumb {
+                    @include thumb-styles;
+                }
+            }
+        }
+
+
+        .range-slider__placeholder {
+            width: 100%;
+            position: absolute;
+            height: $thumb-size;
+
+            .range-slider__placeholder-grab {
+                width: $thumb-size;
+                height: $thumb-size;
+                border-radius: 50%;
+                position: absolute;
+                background: var(--range-slider-grab);
+                top: 50%;
+                margin-left: calc(#{$thumb-size} / -2);
+                transform: translate3d(0, -50%, 0);
+                z-index: 2;
+                transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+                &.active {
+                    box-shadow: var(--range-slider-active-grab-box-shadow);
+                    border-color: var(--range-slider-active-grab-border-color);
+                }
+
+                &.inactive {
+                    display: none;
+                }
+            }
+
+            .range-slider__placeholder-rail {
+                position: absolute;
+                width: 100%;
+                top: 50%;
+                transform: translateY(-50%);
+                height: 6px;
+                border-radius: 3px;
+                background: var(--range-slider-rail);
+
+                .range-slider__placeholder-inner-rail {
+                    position: absolute;
+                    height: 100%;
+                    background: var(--range-slider-inner-rail);
+                    opacity: 0.5;
+                }
+
+
+            }
+
+        }
+
+        .range-slider__input,
+        .range-slider__placeholder {
+            top: $control-height;
+        }   
+
+
+        &.disabled .range-slider__placeholder {
+            filter: grayscale(1);
+        }
+
+
+
+    }
+
+    &.only-one {
+        .range-slider__control-wrapper {
+ 
+            .range-slider__placeholder {
+             
+                .range-slider__placeholder-rail {
+                    background: var(--range-slider-rail);
+    
+                    .range-slider__placeholder-inner-rail {
+                        background: var(--range-slider-rail);
+                    }
+    
+                }
+    
+            }
+        }
+
+    }
+
+}