funda-ui 4.5.712 → 4.5.713

package/publish/lib/esm/Checkbox/index.tsx

@@ -1,193 +0,0 @@
-import React, { useImperativeHandle, useState, useEffect, useRef, forwardRef } from 'react';
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-export type CheckboxOptionChangeFnType = (arg1: any, arg2: any) => void;
-
-
-export type CheckboxProps = {
-    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
-    wrapperClassName?: string;
-    controlClassName?: string;
-    itemSelectedClassName?: 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, externalRef: any) => {
-    const {
-        contentRef,
-        wrapperClassName,
-        controlClassName,
-        itemSelectedClassName,
-        disabled,
-        required,
-        value,
-        label,
-        name,
-        id,
-        checked,
-        indeterminate,
-        style,
-        tabIndex,
-        onChange,
-        onBlur,
-        onFocus,
-        ...attributes
-    } = props;
-
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-    const valRef = useRef<any>(null);
-    const [val, setVal] = useState<any>(null || false);  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
-
-    // exposes the following methods
-    useImperativeHandle(
-        contentRef,
-        () => ({
-            control: () => {
-                return valRef.current;
-            },
-            clear: (cb?: any) => {
-                setVal(false);
-                cb?.();
-            },
-            set: (value: string, cb?: any) => {
-                setVal(value);
-                cb?.();
-            }
-        }),
-        [contentRef],
-    );
-
-
-
-    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={combinedCls(
-                'form-check__wrapper',
-                clsWrite(wrapperClassName, 'mb-3 position-relative'),
-                val ? clsWrite(itemSelectedClassName, 'item-selected') : undefined
-            )} ref={rootRef}>
-                <div className="form-check">
-                    <input
-                        ref={(node) => {
-                            valRef.current = node;
-                            if (typeof externalRef === 'function') {
-                                externalRef(node);
-                            } else if (externalRef) {
-                                externalRef.current = node;
-                            }
-                        }}
-                        tabIndex={tabIndex || 0}
-                        type="checkbox"
-                        className={clsWrite(controlClassName, '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
-                        data-checked={val}
-                        disabled={disabled || null}
-                        required={required || null}
-                        onChange={handleChange}
-                        onFocus={handleFocus}
-                        onBlur={handleBlur}
-                        defaultValue={value as string || ''}
-                        checked={val || false}   // component status will not change if defaultChecked is used,  // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
-                        style={{ cursor: 'pointer', ...style }}
-                        {...attributes}
-                    />
-
-
-                    <input
-                        type="hidden"
-                        tabIndex={-1}
-                        id={idRes}
-                        name={name}
-                        value={val ? value as string || '' : ''}  // do not use `defaultValue`
-                        onChange={() => void(0)}
-                        {...attributes}
-                    />
-
-                    {label ? <>{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-check-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={`label-${idRes}`} className="form-check-label">{label}</label>}</> : null}
-                </div>
-            </div>
-
-
-        </>
-    )
-});
-
-export default Checkbox;

package/publish/lib/esm/ColorPicker/index.scss

@@ -1,91 +0,0 @@
-/* ======================================================
-    <!-- Color Picker -->
-/* ====================================================== */
-
-.custom-colorpicker__wrapper {
-    position: relative;
-    --color-control-border-radius: 0.375rem;
-    --color-control-size: 30px;
-    --color-control-border-color: rgba(0,0,0,.1);
-
-
-    .custom-colorpicker-control {
-
-        -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;
-        }
-
-
-    }
-
-
-
-    /* placeholder */
-    .custom-colorpicker__transparent-placeholder {
-        position: absolute;
-        width: var(--color-control-size);
-        height: var(--color-control-size);
-        left: 0;
-        top: 0;
-        z-index: 1;
-        pointer-events: none;
-        background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) repeat;
-    }
- 
-
-    &.custom-colorpicker--rounded {
-        .custom-colorpicker-control {
-            &::-webkit-color-swatch {
-                border-radius: var(--color-control-border-radius);
-            }
-
-            &::-moz-color-swatch {
-                border-radius: var(--color-control-border-radius);
-            }
-        }
-
-        .custom-colorpicker__transparent-placeholder {
-            border-radius: var(--color-control-border-radius);
-        }
-     
-
-    }
-
-    &.custom-colorpicker--circle {
-
-        .custom-colorpicker-control {
-            &::-webkit-color-swatch {
-                border-radius: 50%;
-            }
-
-            &::-moz-color-swatch {
-                border-radius: 50%;
-            }
-        }
-
-        .custom-colorpicker__transparent-placeholder {
-            border-radius: 50%;
-        }
-
-    }
-
-
-
-}

package/publish/lib/esm/ColorPicker/index.tsx

@@ -1,204 +0,0 @@
-import React, { useState, useEffect, useRef, forwardRef, ChangeEvent, FocusEvent } from 'react';
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-export interface ColorPickerProps extends React.ComponentPropsWithoutRef<"input"> {
-    wrapperClassName?: string;
-    controlClassName?: string;
-    controlExClassName?: string;
-    clearBtnClassName?: string;
-    clearBtnLabel?: string;
-    value?: string;
-    requiredLabel?: React.ReactNode | 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;
-    onClear?: (e: any) => void;
-    
-};
-
-
-const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
-    const {
-        wrapperClassName,
-        controlClassName,
-        controlExClassName,
-        clearBtnClassName,
-        clearBtnLabel,
-        disabled,
-        required,
-        readOnly,
-        value,
-        requiredLabel,
-        label,
-        name,
-        shape,
-        id,
-        style,
-        tabIndex,
-        onChange,
-        onBlur,
-        onFocus,
-        onClear,
-        ...attributes
-    } = props;
-
-
-    const uniqueID = useComId();
-    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-colorpicker--rounded';
-                break;
-            case 'circle':
-                shapeClassName = 'custom-colorpicker--circle';
-                break;
-        }
-    }
-
-
-
-    function handleFocus(event: FocusEvent<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: FocusEvent<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 || '');
-
-    }, [value]);
-
-
-    return (
-        <>
-
-            <div className={combinedCls(
-                'custom-colorpicker__wrapper',
-                shapeClassName,
-                clsWrite(wrapperClassName, 'mb-3 position-relative')
-            )} ref={rootRef}>
-                {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
-
-                <div className="position-relative">
-                <div className="input-group">
-                        <input
-                            ref={(node) => {
-                                valRef.current = node;
-                                if (typeof externalRef === 'function') {
-                                    externalRef(node);
-                                } else if (externalRef) {
-                                    externalRef.current = node;
-                                }
-                            }}
-
-                            
-                            tabIndex={tabIndex || 0}
-                            type='color'
-                            className={combinedCls(
-                                clsWrite(controlClassName, 'form-control custom-colorpicker-control flex-grow-0'),
-                                controlExClassName
-                            )}
-                            value={changedVal}
-                            onFocus={handleFocus}
-                            onBlur={handleBlur}
-                            onChange={handleChange}
-                            disabled={disabled || null}
-                            readOnly={readOnly || null}
-                            style={style}
-                            {...attributes}
-                        />
-
-                        {/* Prevents the color from automatically becoming #000000 when it is empty */}
-                        <input
-                            tabIndex={-1}
-                            type="hidden"
-                            id={idRes}
-                            name={name}
-                            value={changedVal}  // do not use `defaultValue`
-                            onChange={() => void(0)}
-                            required={required || null}
-                            {...attributes}
-                        />
-
-                        {changedVal !== '' ? <><button tabIndex={-1} type="button" className={clearBtnClassName || 'btn btn-link btn-sm'} onClick={(e: React.MouseEvent) => {
-                            setChangedVal('');
-                            onChange?.(e);
-                            onClear?.(e);
-                        }}>{clearBtnLabel || 'clear'}
-                        </button></> : null}
-
-
-                    </div>
-                    {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span>}</> : ''}
-
-                    {changedVal === '' ? <><div className="custom-colorpicker__transparent-placeholder"></div></> : null}
-
-                </div>
-
-                
-            </div>
-
-
-        </>
-    )
-});
-
-export default ColorPicker;