5htp-core 0.4.2 → 0.4.3

package/src/client/components/Form_old/index.tsx.old

@@ -1,436 +0,0 @@
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-
-// Npm
-import React from 'react';
-import { ComponentChild } from 'preact';
-import dottie from 'dottie';
-
-// Libs
-import { TListeErreursSaisie, ErreurSaisieSchema } from '@erreurs';
-import { TPropsChamp as PropsChamp, propsDefautChampForm } from '@client/components/Champs/Base';
-import { Schema, TBaseComposantChamp, TObjetDonnees, TRetourValidation } from '@commun/donnees/schema';
-import { simpleDeepCopy } from '@commun/donnees/objets';
-import { ContexteOnglets } from '@client/components/Conteneurs/Onglets';
-
-/*----------------------------------
-- TYPES ENTREE
-----------------------------------*/
-
-export type TComposantChamps<TDonnees> = { [nomChamp in keyof TDonnees]: ComponentChild };
-
-type TPropsHook<TDonnees extends TObjetDonnees> = {
-
-    // Informations générales
-    nom: string,
-    donnees?: TDonnees,
-    schema: Schema<TDonnees>,
-
-    // Présentation & état
-    progression?: false | number,
-    autosave?: boolean,
-    readOnly?: boolean,
-
-    // Actions
-    onChange?: (donnees: TDonnees, validation: TRetourValidation<TDonnees> | false) => void,
-    afterValidation?: (validation: TRetourValidation<TDonnees>) => void,
-    envoyer?: (donnees: TDonnees) => Promise<void>,
-    refActions?: (actionsForm: TActionsForm<TDonnees>) => void,
-    onSet?: { [nomChamp: string]: (anciennesDonnees: TDonnees, nouvellesDonnees: TDonnees) => TDonnees }
-
-    // Champs
-    propsChamps?: { [cle: string]: any }
-}
-
-
-/*----------------------------------
-- TYPES SORTIE
-----------------------------------*/
-export type TEtatForm<TDonnees extends TObjetDonnees> = {
-    saisie: Partial<TDonnees>,
-    Champs: any,
-    form: TActionsForm<TDonnees>,
-    schema: Schema<TDonnees>,
-    changes: number
-}
-
-export type TActionsForm<TDonnees> = {
-    envoyer: (e?: any) => Promise<void>,
-    set: (valeurs: Partial<TDonnees>) => void,
-    get: (champ?: string) => any | TDonnees,
-}
-
-/*----------------------------------
-- COMPOSANTS
-----------------------------------*/
-const debug = true;
-export const useForm = <TDonnees extends TObjetDonnees>(props: TPropsHook<TDonnees>): TEtatForm<TDonnees> => {
-
-    const onglets = React.useContext(ContexteOnglets);
-    const refChamps = React.useRef<{ [nomChamp: string]: HTMLElement }>({});
-
-    /*----------------------------------
-    - INIT
-    ----------------------------------*/
-
-    // State
-    const [state, setState] = React.useState<{
-        donnees: Partial<TDonnees>,
-        erreurs: TListeErreursSaisie,
-        errorsCount: number,
-        progression: false | number,
-        changed: Partial<TDonnees> // Nom des champs changés depuis le dernier enregistrement
-    }>({
-        donnees: props.donnees || {},
-        erreurs: {},
-        errorsCount: 0,
-        progression: false,
-        changed: {}
-    });
-
-    const donneesExternes = props.donnees !== undefined && props.onChange !== undefined;
-    const donneesInit = ((donneesExternes ? props.donnees : state.donnees) || {}) as Partial<TDonnees>
-    const schema = props.schema.generer(donneesInit);
-    const donnees = schema.initDonnees(donneesInit, true);
-
-    /*----------------------------------
-    - METHODES
-    ----------------------------------*/
-    function get(champ: string): any;
-    function get(): TDonnees;
-    function get(champ?: string): any | TDonnees {
-        return champ === undefined
-            ? donnees
-            : donnees[champ];
-    }
-
-    async function onChange(
-        valeursInit: Partial<TDonnees>,
-        newState: Partial<typeof state> = {},
-        validerMaintenant: boolean = true
-    ): Promise<{ erreurs: TListeErreursSaisie, errorsCount: number }> {
-
-        // RAPPEL: donnees = anciennes données
-
-        if (debug) console.log(`[form][saisie] onChange`, valeursInit);
-
-        // Validation des données changées
-        // TODO: conserver erreurs des champs n'ayant pas été changés
-        let nouvellesDonnees: Partial<TDonnees>;
-        let errorsCount: number = 0;
-        let erreurs: TListeErreursSaisie = {}
-        if (validerMaintenant) {
-
-            ({
-                valeurs: nouvellesDonnees,
-                errorsCount,
-                erreurs
-            } = await valider(valeursInit));
-
-            if (debug && errorsCount !== 0) console.log(`[form][saisie] erreurs`, erreurs);
-
-            newState.erreurs = erreurs;
-            newState.errorsCount = errorsCount;
-
-        } else
-            nouvellesDonnees = valeursInit;
-
-        // Validation & mapping personnalisé
-        /*if (props.filtres?.after)
-            nouvellesDonnees = props.filtres.after(nouvellesDonnees, donnees);*/
-
-        // Copie + fusion sans références
-        const donneesCompletes = simpleDeepCopy(donnees, nouvellesDonnees);
-
-        // Màj valeur + erreurs
-        // Le passage d'une fonction permet de récupérer le dernier state, ce qui évite à composantChamps de redevenir undefined
-        setState((stateA) => ({
-            ...stateA,
-            donnees: donneesCompletes,
-            changed: { ...stateA.changed, ...nouvellesDonnees },
-            ...newState
-        }));
-
-        if (props.onChange && errorsCount === 0)
-            props.onChange(donneesCompletes, validerMaintenant ? { valeurs: nouvellesDonnees, errorsCount, erreurs } : false);
-
-        /*if (valider && props.autosave === true) {
-
-            if (props.envoyer === undefined)
-                throw new Error("autosave = true, mais aucune fonction d'enregistrement n'est passée dans props.envoyer");
-
-            await envoyer();
-
-
-        }*/
-
-        return { erreurs, errorsCount };
-    }
-
-    async function valider(
-        donneesAvalider: Partial<TDonnees>
-    ): Promise<TRetourValidation<TDonnees>> {
-
-        console.log(`[form][saisie] Valider`, donneesAvalider, 'Données complètes =', donnees);
-
-        // Pas de valeur pécifiées = on valide toutes les données du form
-        const retour = await schema.valider(donneesAvalider, donnees, undefined, {
-            corriger: true
-        });
-
-        // Focus sur le premier champ ayant déclenché une erreur
-        if (retour.errorsCount !== 0) {
-
-            const cheminChamp = Object.keys(retour.erreurs)[0]
-            const champ = schema.get(cheminChamp);
-
-            // Navig onglet
-            if (onglets !== null) {
-                onglets.navig(champ.onglet);
-            }
-
-            // Scroll
-            const elemChamp = refChamps.current[cheminChamp];
-            elemChamp?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' })
-
-
-        }
-
-        if (props.afterValidation !== undefined)
-            props.afterValidation(retour, actions);
-
-        return retour;
-    }
-
-    async function envoyer(e?: any): Promise<boolean> {
-
-        if (e !== undefined)
-            e.preventDefault();
-
-        if (props.readOnly)
-            return false;
-
-        // Déjà en cours d'envoi
-        if (props.progression !== undefined && props.progression !== false)
-            return false;
-
-        if (state.errorsCount !== 0)
-            return false;
-
-        console.log(`[form][saisie] Envoyer`, donnees);
-
-        // Validation de l'ensemble des champs
-        const { erreurs, errorsCount, valeurs } = await valider(donnees);
-        if (errorsCount !== 0) {
-            setState((stateA) => ({ ...stateA, erreurs, errorsCount }));
-            console.error('Erreurs formulaire', erreurs);
-            return false;
-        }
-
-        console.log("@@@ Envoi formulaire 2", valeurs);
-
-        // Envoi
-        if (props.envoyer) {
-
-            if (!('progression' in props))
-                setState((stateA) => ({ ...stateA, progression: 0 }));
-
-            //Ayant été validée, on estime que les données sont complètes
-            const envoi = props.envoyer(valeurs as TDonnees);
-
-            if (envoi.then === undefined)
-                throw new Error("La fonction passée dans props.envoyer doit retourner une promise.");
-
-            return await envoi.then(() => {
-
-                setState((stateA) => ({ 
-                    ...stateA, 
-                    progression: ('progression' in props)
-                        ? stateA.progression
-                        : false,
-                    changed: {} // Reset de la liste des données changées
-                }));
-
-                return true;
-
-            }).catch((e) => {
-
-                if (debug) console.log("RETOUR ERREURS API", e);
-
-                if (e instanceof ErreurSaisieSchema) {
-
-                    setState((stateA) => ({
-                        ...stateA,
-                        erreurs: e.erreursSaisie,
-                        progression: 'progression' in props ? stateA.progression : false
-                    }));
-
-                } else
-                    throw e;
-
-                return false;
-
-            });
-        }
-
-        return false;
-    }
-
-    /*----------------------------------
-    - RENDU CHAMPS
-    ----------------------------------*/
-    const rendreChamps = (schema: Schema<{}>, donnees: TObjetDonnees) => {
-        
-        const schemaPourRendu: {
-            [champ: string]: {
-                composant: TBaseComposantChamp,
-                attrs: (propsBase: PropsChamp<unknown>) => PropsChamp<unknown>
-            }
-        } = {}
-
-        for (const nomChamp in schema.champs) {
-
-            // Désactivé = pas d'affichage
-            if (schema.champs[nomChamp].activer === false)
-                continue;
-
-            // Sous-schema
-            if (schema.champs[nomChamp] instanceof Schema) {
-                schemaPourRendu[nomChamp] = rendreChamps(schema.champs[nomChamp], donnees[nomChamp] || {});
-                continue;
-            }
-
-            const { rendu, as, ...attrs } = schema.champs[nomChamp];
-
-            // Prérendu
-            if (rendu === undefined)
-                continue;
-
-            // Correction valeur selon as
-            const valeur = as === undefined
-                ? donnees[nomChamp]
-                // Champ composé de plusieurs valeurs
-                : as.map((nomDonnee) => donnees[nomDonnee]);
-
-            /*
-                ATTENTION:  Faire en sorte que les propriétés passées dans le composant soient bien 
-                            fusionnées avec les prorpiétés injectées par le form. Ex: onChange, attrsChamp, ...
-            */
-
-            const cheminChamp = [...schema.chemin, nomChamp].join('.');
-
-            schemaPourRendu[nomChamp] = {
-                composant: rendu,
-                attrs: (propsChamp) => ({
-
-                    // Config par défaut pour les champs appartenant au form (ex: label systèmatique)
-                    ...propsDefautChampForm,
-
-                    // Attributs définis via le schema
-                    ...(attrs || {}),
-                    // Attributs définis via l'appel du composant
-                    ...(propsChamp || {}),
-
-                    // Rattachement au form
-                    ref: (ref: HTMLElement) => refChamps.current[cheminChamp] = ref?.base,
-                    nom: nomChamp,
-                    valeur: valeur,
-                    as: as,
-                    valider: undefined, // Pas de validation dans le champ. On fait tous les champs em même temps depuis le form
-                    erreurs: state.erreurs[cheminChamp],
-                    readOnly: props.readOnly, // Si le form est readonly, alors tous ses champs le sont obligatoirement
-                    onChange: async (nouvelleValeur: any, validerMaintenant: boolean = false) => {
-
-                        // Aucun changement
-                        // NOTE: Quand executé depuis onFocus, la valeur a déjà été changée via onChange
-                        if (nouvelleValeur === valeur && !validerMaintenant)  
-                            return;
-
-                        // Mapping données
-                        let nouvellesDonnees: Partial<TDonnees>;
-                        if (as !== undefined) {
-                            nouvellesDonnees = dottie.transform({
-                                [ [...schema.chemin, as[0]].join('.') ]: nouvelleValeur[0],
-                                [ [...schema.chemin, as[1]].join('.') ]: nouvelleValeur[1]
-                            });
-                        // Mapping classique
-                        } else
-                            nouvellesDonnees = dottie.transform({
-                                [cheminChamp]: nouvelleValeur
-                            });
-
-                        // Application des changements
-                        const { errorsCount } = await onChange(nouvellesDonnees, {}, validerMaintenant);
-
-                        // Si aucune erreur, onChange propre au champ + gestion erreurs
-                        if (propsChamp.onChange !== undefined && errorsCount === 0)
-                            await propsChamp.onChange(nouvelleValeur, true).catch((e) => {
-                                if (validerMaintenant)
-                                    setState((stateA) => ({
-                                        ...stateA,
-                                        erreurs: {
-                                            ...stateA.erreurs,
-                                            [cheminChamp]: [e]
-                                        }
-                                    }));
-                            })
-                    },
-                })
-            }
-        }
-
-        return schemaPourRendu;
-    }
-
-    const champs = rendreChamps(schema, donnees);
-
-    /*----------------------------------
-    - RETOUR
-    ----------------------------------*/
-    const actions = {
-        form: {
-            envoyer,
-            get,
-            set: onChange,
-        },
-        saisie: donnees,
-        Champs: champs,
-        schema,
-        changes: Object.keys(state.changed).length
-    }
-
-    return actions;
-}
-
-export default <TDonnees extends TObjetDonnees>({ children, className, style, ...optsHook }: {
-
-    // Champs
-    children: ComponentChild | ((
-        form: TActionsForm<TDonnees>,
-        donnees: Partial<TDonnees>,
-        champs: TComposantChamps<TDonnees>
-    ) => ComponentChild),
-
-    // Présentation
-    className?: string,
-    style?: any,
-
-} & TPropsHook<TDonnees>) => {
-
-    if (typeof children === 'function') {
-        const { form, donnees, Champs } = useForm(optsHook);
-        children = children(form, donnees, Champs);
-    }
-
-    return (
-        <form className={className} style={style}/*onSubmit={envoyer}*/>
-            {children}
-        </form>
-    );
-
-    /*
-        <Chargement progression={'progression' in props ? props.progression : state.progression}>
-        </Chargement>
-    */
-}

package/src/client/components/dropdown.old/Manager.tsx

@@ -1,164 +0,0 @@
-/*----------------------------------
-- DEPENDANCES
-----------------------------------*/
-
-// Npm
-import React from 'react';
-import { ComponentChild, JSX } from 'preact';
-
-// Libs
-import useContexte from '@client/context';
-import getPosition, { TSide, TPosition } from './getPosition';
-import { blurable, deepContains } from '@client/utils/dom';
-
-/*----------------------------------
-- TYPES: IMPORTATIONS
-----------------------------------*/
-
-/*----------------------------------
-- TYPES: DECLARATIONS
-----------------------------------*/
-
-export type PopoverProps = {
-
-    origin: HTMLElement,
-    content: JSX.Element,
-    interactions?: boolean
-    position?: TSide,
-    frame?: React.Ref<HTMLDivElement>,
-
-    onVisibilityChange?: (visible: boolean) => void,
-    close: () => void,
-    initialPosition: TPosition,
-
-    immutable?: boolean, // If true, don't add classes, nor childrens
-}
-
-export type TPopover = PopoverProps & {
-    id: number,
-    close: () => void,
-    visible: boolean,
-    onVisibilityChange?: (visible: boolean) => void,
-}
-
-const Popover = ({ id, origin, content, interactions, position: side, frame, close, initialPosition, onVisibilityChange }: TPopover) => {
-
-    const [position, setPosition] = React.useState<TPosition>(initialPosition);
-    const refElement = React.createRef<HTMLElement>();
-
-    React.useEffect(() => {
-
-        if (!refElement.current)
-            return console.warn("Unable to get the popover dom origin to compute the correct position");
-
-        // Now the popover is shown and we know his dipensions, 
-        //   we can set the correct position
-        setPosition(
-            getPosition(
-                origin,
-                refElement.current,
-                side,
-                frame?.current || (document.getElementById('#layout') as HTMLElement)
-            )
-        ); 
-
-    }, [id]);
-    
-    return React.cloneElement(content, {
-        className: (content.props.className || '') + ' popover' + (position ? ' pos_' + position.cote : ''),
-        onClick: () => {
-            if (!interactions) {
-                close();
-            }
-        },
-        ref: refElement,
-        style: {
-            ...(content.props.style || {}),
-            ...(position ? {
-                top: position.css.top,
-                left: position.css.left,
-                right: position.css.right,
-                bottom: position.css.bottom,
-            } : {}),
-        }
-    });
-
-}
-
-/*----------------------------------
-- COMPOSANT
-----------------------------------*/
-let curId: number = 0;
-export default ({ }: {
-
-}) => {
-
-    const ctx = useContexte();
-
-    const [popover, setPopover] = React.useState<TPopover | null>(null);
-
-    ctx.popover = (props: PopoverProps): TPopover => {
-
-        const id = curId++;
-        const close = () => {
-            setPopover(p => p && p.id === id ? null : p);
-            if (props.onVisibilityChange)
-                props.onVisibilityChange(false);
-        }
-
-        const popover = { 
-            ...props,
-            
-            id, 
-            visible: true, 
-            close
-        };
-
-        if (props.onVisibilityChange)
-            props.onVisibilityChange(true);
-
-        setPopover(existing => {
-
-            if (existing !== null && existing.onVisibilityChange)
-                existing.onVisibilityChange(false);
-
-            return popover;
-
-        });
-
-        return popover;
-    }
-
-    if (popover === null)
-        return null;
-
-    React.useEffect(() => {
-        const blur = (e: MouseEvent) => {
-
-            const clickedOnPopover = deepContains([".popover", '.btn.dropdown'], e.target);
-            if (clickedOnPopover)
-                return;
-
-            if (popover.onVisibilityChange)
-                popover.onVisibilityChange(false);
-
-            setPopover(null);
-        };
-        document.addEventListener('mousedown', blur);
-        return () => document.removeEventListener('mousedown', blur);
-    });
-
-    const initialPosition = getPosition(
-        popover.origin,
-        [200 /* = min-width .popover */, 100],
-        popover.position,
-        popover.frame?.current || (document.getElementById('#layout') as HTMLElement)
-    )
-
-    return (
-        <div id="popover">
-            <Popover {...popover} initialPosition={initialPosition} />
-        </div>
-    )
-
-}