5htp-core 0.2.2 → 0.2.4

package/src/client/components/Select/index.tsx

@@ -4,9 +4,12 @@
 
 // Npm
 import React from 'react';
+import type { ComponentChild } from 'preact';
+import type { StateUpdater } from 'preact/hooks';
 
 // Core
 import Button from '@client/components/button';
+import String from '@client/components/inputv3/string';
 import Dropdown, { TDialogControls, Props as DropdownProps } from '@client/components/dropdown';
 
 /*----------------------------------
@@ -17,42 +20,174 @@ import Dropdown, { TDialogControls, Props as DropdownProps } from '@client/compo
 - TYPES
 ----------------------------------*/
 
-type Choices = string[]
+export type Choice = { label: ComponentChild, value: string }
 
-type SearchResultsFunction = (keywords: string) => Choices
+export type Choices = Choice[]
 
-export type Props = DropdownProps & {
+type ChoicesFunc = (search: string) => Promise<Choices>
+
+type SelectorProps = (
+    {
+        multiple: true,
+        value?: Choice[],
+        onChange: StateUpdater<Choice[]>,
+        validator?: ArrayValidator
+    }
+    |
+    {
+        multiple?: false,
+        value?: Choice,
+        onChange: StateUpdater<Choice>,
+        validator?: StringValidator
+    }
+) & {
+    choices: Choices | ChoicesFunc,
+    enableSearch?: boolean,
+    inline?: boolean,
+    errors?: string[],
+    required?: boolean,
+    noneSelection?: false | string
+}
+
+export type Props = DropdownProps & SelectorProps & {
     title: string,
-    choices: Choices,
-    value?: string,
-    onChange: (value: string) => void,
-    search?: true | SearchResultsFunction
 }
 
 /*----------------------------------
 - COMONENT
 ----------------------------------*/
+export default ({ 
+    title, choices: initChoices, errors, validator, required, noneSelection, enableSearch, value: current, 
+    onChange, inline, multiple,
+    ...props 
+}: Props) => {
 
-export default ({ title, choices, value, onChange, ...dropDownProps }: Props) => {
     const refModal = React.useRef<TDialogControls>(null);
-    return (
-        <Dropdown {...dropDownProps} content={(
-            <ul class="card col menu">
-                {choices.map( jt => (
-                    <li>
-                        <Button active={jt === value} onClick={() => {
-                            onChange(jt);
-                            refModal.current?.close();
-                        }}>
-                            {jt}
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
+    const choicesViaFunc = typeof initChoices === 'function';
+    if (choicesViaFunc && enableSearch === undefined)
+        enableSearch = true;
+
+    const [search, setSearch] = React.useState<{
+        keywords: string,
+        loading: boolean
+    }>({
+        keywords: '',
+        loading: choicesViaFunc
+    });
+
+    const [choices, setChoices] = React.useState<Choices>([]);
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+    React.useEffect(() => {
+        if (choicesViaFunc) {
+            initChoices(search.keywords).then((searchResults) => {
+                setSearch(s => ({ ...s, loading: false }))
+                setChoices(searchResults);
+            })
+        }
+    }, [initChoices, search.keywords]);
+
+    const currentList: Choice[] = current === undefined
+        ? []
+        : (Array.isArray(current) ? current : [current]);
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+
+    const selector = (
+         <div class={(inline ? '' : 'card ') + "col"}>
+
+            {enableSearch && (
+                <String icon="search" 
+                    title="Search"
+                    value={search.keywords} 
+                    onChange={keywords => setSearch(s => ({ ...s, loading: true, keywords }))} 
+                    iconR={'spin'}
+                />
+            )}
+
+            {currentList.length !== 0 && (
+                <ul class="col menu">
+                    {currentList.map(choice => (
+                        <Button size="s" onClick={() => {
+                            onChange( current => multiple 
+                                ? current.filter(c => c.value !== choice.value)
+                                : undefined
+                            );
+                        }} suffix={<i src="check" class="fg primary" />}>
+                            {choice.label}
                         </Button>
-                    </li>
-                ))}
-            </ul>
-        )} iconR="chevron-down" refModal={refModal}>
+                    ))}
+                </ul>
+            )}
+
+            {choices === null ? (
+                <div class="row h-3 al-center">
+                    <i src="spin" />
+                </div>
+            ) : (
+                <ul class="col menu">
+                    {choices.map( choice => {
+
+                        const isCurrent = currentList.some(c => c.value === choice.value);
 
-            {value || title}
+                        return !isCurrent && (
+                            <li>
+                                <Button size="s" onClick={() => {
+                                    onChange( current => {
+                                        return multiple 
+                                            ? [...(current || []), choice] 
+                                            : choice
+                                    });
+                                }}>
+                                    {/*search.keywords ? (
+                                        <span>
+                                        
+                                            <strong>{search.keywords}</strong>{choice.label.slice( search.keywords.length )}
+    
+                                        </span>
+                                    ) : */choice.label}
+                                </Button>
+                            </li>
+                        )
+                    })}
 
-        </Dropdown>
+                    {((!required || !validator?.options.min) && noneSelection) && (
+                        <li>
+                             <Button size="s" onClick={() => onChange(multiple ? [] : undefined)}
+                                 suffix={(current === undefined || (multiple && current.length === 0)) && <i src="check" class="fg primary" />}>
+                                {noneSelection}
+                            </Button>
+                        </li>
+                    )}
+                </ul>
+            )}
+        </div>
     )
+
+    return <>
+        {inline ? selector : (
+            <Dropdown {...props} content={selector} iconR="chevron-down" refModal={refModal}>
+
+                {currentList.length === 0
+                    ? title
+                    : currentList.map(choice => choice.label).join(', ')}
+
+            </Dropdown>
+        )}
+
+        {errors?.length && (
+            <div class="fg error txt-left">
+                {errors.join('. ')}
+            </div>
+        )}
+    </>
 }

package/src/client/components/containers/Popover/index.tsx

@@ -5,6 +5,7 @@
 // Npm
 import React, { JSX } from 'react';
 import { ComponentChild } from 'preact';
+import type { StateUpdater } from 'preact/hooks';
 
 // Composants
 import Bouton, { Props as PropsBouton } from '@client/components/button';
@@ -24,34 +25,17 @@ import useContexte from '@/client/context';
 export type Props = {
     id?: string,
 
-    children: JSX.Element | [JSX.Element],
-    afficher?: boolean,
-    fermer?: (funcFermer: () => void) => void,
-    position?: TSide,
-    frame?: HTMLElement,
-
+    // Display
     content?: JSX.Element,
-    menu?: { actions: TAction<any>[], data: any },
-
-    tag?: string,
+    state: [boolean, StateUpdater<boolean>],
     width?: number | string,
-    desactiver?: boolean
-}
-
-export type TAction<TDonnee> = {
-    icone?: TIcons,
-    label: ComponentChild,
-    multi?: boolean,
-
-    onClick?: (donnees: TDonnee, index: number) => void,
-    lien?: (donnees: TDonnee, index: number) => string,
-    bouton?: (donnees: TDonnee, index: number) => PropsBouton
-}
-
-export type TActionsPopover = {
-    show: () => void,
-    hide: () => void,
-    toggle: () => void
+    disable?: boolean
+    // Position
+    frame?: HTMLElement,
+    side?: TSide,
+    // Tag
+    children: JSX.Element | [JSX.Element],
+    tag?: string,
 }
 
 /*----------------------------------
@@ -64,116 +48,58 @@ export default (props: Props) => {
 
     let {
         id,
-        children, content, menu, tag, width, onVisibleChange, interactions, desactiver, fermer, frame,
-        position, afficher,
+
+        content, state, width, disable,
+
+        frame, side,
+
+        children, tag,
+
         ...autresProps
     } = props;
 
-    const [state, setState] = React.useState({
-        aff: false,
-        position: undefined
-    });
-
+    const [position, setPosition] = React.useState(undefined);
     const refCont = React.useRef<HTMLElement>(null);
     const refPop = React.useRef<HTMLElement>(null);
 
-    const controleViaProps = 'afficher' in props;
-    if (!controleViaProps) {
-        afficher = state.aff;
-        fermer = () => setState((stateA) => ({ ...stateA, aff: false }));
-    }
-
-    // L'assignement d'un id à une popover permet de controler l'affichage de ce dernier depuis n'importe quel autre composant
-    if (id !== undefined) {
-        ctx.popovers[ id ] = {
-            show: () => setState(s => ({ ...s, aff: true })),
-            hide: () => setState(s => ({ ...s, aff: false })),
-            toggle: () => setState(s => ({ ...s, aff: !s.aff })),
-        }
-    }
+    const [shown, show] = state;
 
     // Màj visibilite
     React.useEffect(() => {
-        if (afficher === true) {
-
+        if (shown === true) {
             // Positionnement si affichage
-            setState((stateA) => ({
-                ...stateA,
-                position: getPosition(
+            setPosition(
+                getPosition(
                     refCont.current, 
                     refPop.current, 
                     false, 
                     position, 
                     frame || document.getElementById('page')
                 )
-            }));
-
-            const isPageElement = deepContains([document.getElementById('page')], refPop.current);
-            if (!isPageElement)
-                document.body.classList.add('focus-popup');
-
-        } else {
-             
-            document.body.classList.remove('focus-popup');
+            );
 
+            //return blurable([refCont, () => show(false)])
         }
 
-        if (onVisibleChange)
-            onVisibleChange(afficher);
-
-        if (afficher === true)
-            return blurable([refCont, () => fermer()])
-
-    }, [afficher]);
+    }, [shown]);
 
     if (!autresProps.className)
         autresProps.className = '';
 
     autresProps.className += ' contPopover';
 
-    const active = afficher && !desactiver;
+    const active = shown && !disable;
     if (active) {
         autresProps.className += ' active';
     }
 
-    /*if (props.nom === 'destType')
-        console.log('AFFICHER POPOVER', afficher, 'controleViaProps', controleViaProps, 'autresProps.className', autresProps.className);*/
-
     const Tag = tag || 'div';
 
-    if (!Array.isArray( children ))
-        children = [children];
-
-    if (menu !== undefined)
-        content = (
-            <ul className="menu v">
-                {menu.actions.map(({ multi, bouton, lien, label, icone, onClick }: TAction<TDonnee>) => (
-                    <li>
-                        <Bouton
-                            {...(bouton ? (multi
-                                ? bouton([menu.data], [menu.index])
-                                : bouton(menu.data, menu.index)
-                            ) : {})}
-                            icon={icone}
-                            onClick={onClick && (() => multi 
-                                ? onClick([menu.data], [menu.index])
-                                : onClick(menu.data, menu.index)
-                            )}
-                            link={lien && lien(menu.data, menu.index)}
-                            forme="lien"
-                        >
-                            {label}
-                        </Bouton>
-                    </li>
-                ))}
-            </ul>
-        )
-
     return (
         <Tag
             style={{
                 position: 'relative',
-                ...(afficher ? {
+                ...(shown ? {
                     zIndex: 11
                 } : {})
             }}
@@ -183,33 +109,25 @@ export default (props: Props) => {
             }}
             {...autresProps}
         >
-            {controleViaProps
-                ? children // Les events de clic sont controlés par les props afficher et fermer
-                : children.map(child => React.cloneElement(child, {
-                    onClick: () => {
-                        const nouvEtat = !afficher;
-
-                        setState({ aff: nouvEtat, position: state.position });
-                    },
-                }))}
+            {React.cloneElement( children, {
+                onClick: (e) => {
+                    show(isShown => !isShown);
+                }
+            })}
 
             {active && React.cloneElement(content, {
-                className: (content.props.className || '') + ' card white popover' + (state.position ? ' pos_' + state.position.cote : ''),
-                onClick: () => {
-                    if (fermer && !interactions)
-                        fermer();
-                },
+                className: (content.props.className || '') + ' card white popover' + (position ? ' pos_' + position.cote : ''),
                 ref: (ref: any) => {
                     if (ref !== null)
                         refPop.current = ref
                 },
                 style: {
                     ...(content.props.style || {}),
-                    ...(state.position ? {
-                        top: state.position.css.top,
-                        left: state.position.css.left,
-                        right: state.position.css.right,
-                        bottom: state.position.css.bottom,
+                    ...(position ? {
+                        top: position.css.top,
+                        left: position.css.left,
+                        right: position.css.right,
+                        bottom: position.css.bottom,
                     } : {}),
                     ...(width !== undefined ? { width: typeof width === 'number' ? width + 'rem' : width } : {})
                 }

package/src/client/components/data/progressbar/circular/index.tsx

@@ -19,8 +19,6 @@ import {
 - TYPES
 ----------------------------------*/
 
-//import { TTailleComposant } from '@client/components/_base/types';
-
 type TEtape = {
     val: number,
     label?: string
@@ -44,7 +42,7 @@ export default ({
     ratioCercle: number,
     epaisseur: number,
     etapes?: TEtape[],
-    taille?: TTailleComposant
+    taille?: TComponentSize
 }) => {
 
     const refCont = React.useRef<HTMLDivElement>(null);

package/src/client/components/dropdown/index.tsx

@@ -9,15 +9,14 @@ import { ComponentChild, RefObject } from 'preact';
 // Core
 import Button, { Props as ButtonProps } from '../button';
 import { TDialogControls } from '../Dialog/Manager';
-export type { TDialogControls } from '../Dialog/Manager';
-
-// Libs
-import useContexte from '@/client/context';
+import Popover from '../containers/Popover';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
+export type { TDialogControls } from '../Dialog/Manager';
+
 export type Props = ButtonProps & {
     content: ComponentChild,
     refModal?: RefObject<TDialogControls>
@@ -28,23 +27,19 @@ export type Props = ButtonProps & {
 ----------------------------------*/
 export default (props: Props) => {
 
-    const { modal } = useContexte();
-
     let {
         content,
         refModal,
         ...buttonProps
     } = props;
 
-    const refButton = React.useRef<HTMLElement>(null);
+    const popoverState = React.useState(false);
 
-    const open = () => {
-        const modalInstance = modal.show(() => content);
-        if (refModal)
-            refModal.current = modalInstance;
-    }
+    const refButton = React.useRef<HTMLElement>(null);
 
     return (
-        <Button {...buttonProps} onClick={(open)} refElem={refButton} />
+        <Popover content={content} state={popoverState}>
+            <Button {...buttonProps} refElem={refButton} />
+        </Popover>
     )
 }

package/src/client/components/inputv3/base.less

@@ -25,7 +25,6 @@
     //box-shadow: 1px 3px 0 fade(#000,4%), 0 1px 2px 0 fade(#000,2%);
 
     > i {
-        margin-left: 0.5em;
         color: var(--cTxtDesc);
     }
 

package/src/client/components/inputv3/base.tsx

@@ -4,7 +4,7 @@
 
 // Npm
 import React from 'react';
-import { ComponentChild } from 'preact';
+import type { StateUpdater } from 'preact/hooks';
 
 // Core libs
 import { useState } from '@client/hooks';
@@ -14,9 +14,13 @@ import { useState } from '@client/hooks';
 ----------------------------------*/
 
 export type InputBaseProps<TValue> = {
-    value: TValue,
+
     title: string, // Now mandatory
-    onChange?: (newValue: TValue) => void,
+    required?: boolean,
+    errors?: string[],
+
+    value: TValue,
+    onChange?: StateUpdater<TValue>,
 }
 
 export type TInputState<TValue> = {
@@ -24,6 +28,7 @@ export type TInputState<TValue> = {
     fieldProps: {[key: string]: any},
     valueSource: 'internal'|'external',
     focus: boolean,
+    changed: boolean,
 }
 
 /*----------------------------------
@@ -43,12 +48,18 @@ export function useInput<TValue>(
         value: externalValue !== undefined ? externalValue : defaultValue,
         valueSource: 'external',
         fieldProps: {},
-        focus: false
+        focus: false,
+        changed: false
     });
 
-    const setValue = (value: TValue) => setState({ value, valueSource: 'internal' });
+    const setValue = (value: TValue) => setState({ value, valueSource: 'internal', changed: true });
 
     const commitValue = () => {
+
+        // Avoid to change parent component state at first render
+        if (state.changed === false)
+            return;
+
         console.log(`[input] Commit value:`, state.value);
         if (onChange !== undefined)
             onChange(state.value);
@@ -59,7 +70,7 @@ export function useInput<TValue>(
 
         if (externalValue !== undefined && externalValue !== state.value) {
             console.log("External value change", externalValue);
-            setState({ value: externalValue, valueSource: 'external' })
+            setState({ value: externalValue, valueSource: 'external', changed: true })
         }
         
     }, [externalValue]);

package/src/client/components/inputv3/string/index.tsx

@@ -21,25 +21,29 @@ export type Props = {
     suffix?: React.VNode,
     iconR?: string,
 
+    // State
+    inputRef?: React.Ref<HTMLInputElement>
+
     // Behavior
     type?: 'email' | 'password' | 'longtext',
     choice?: string[] | ((input: string) => Promise<string[]>),
-    multiple?: boolean,
 
     // Actions
     onPressEnter?: (value: string) => void,
-    inputRef?: React.Ref<HTMLInputElement>
 }
 
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
 export default ({ 
-    // Behavoir
-    type, 
-    icon, prefix, suffix, iconR,
+    // Decoration
+    icon, prefix, suffix, iconR, required,
+    // State
+    inputRef, errors,
+    // Behavior
+    type, choice, 
+    // Actions
     onPressEnter,
-    inputRef,
     ...props 
 }: Props & InputBaseProps<string> & Omit<JSX.HTMLAttributes<HTMLInputElement>, 'onChange'>) => {
 
@@ -87,7 +91,7 @@ export default ({
     } else if (type === 'longtext') {
 
         prefix = prefix || <i src="text" />;
-        Tag = TextareaAutosize;
+        Tag = 'textarea'//TextareaAutosize;
 
     }
 
@@ -100,6 +104,8 @@ export default ({
         className += ' empty';
     if (focus)
         className += ' focus';
+    if (errors?.length)
+        className += ' error';
 
     if (props.className !== undefined)
         className += ' ' + props.className;
@@ -107,7 +113,7 @@ export default ({
     /*----------------------------------
     - RENDER
     ----------------------------------*/
-    return (
+    return <>
         <div class={className} onClick={() => refInput.current?.focus()}>
 
             {prefix}
@@ -131,11 +137,18 @@ export default ({
                     }}
                 />
 
-                <label>{props.title}</label>
+                <label>{props.title}{required && (
+                    <span class="fg error">&nbsp;*</span>
+                )}</label>
             </div>
 
             {suffix}
             
         </div>
-    )
+        {errors?.length && (
+            <div class="fg error txt-left">
+                {errors.join('. ')}
+            </div>
+        )}
+    </>
 }