5htp-core 0.2.5-2 → 0.2.6

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

@@ -4,182 +4,71 @@
 
 // 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';
 
-/*----------------------------------
-- CONST
-----------------------------------*/
+// Specific
+import ChoiceSelector, { 
+    Props as SelectorProps, 
+    Choice,
+} from './ChoiceSelector';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-export type Choice = { label: ComponentChild, value: string }
-
-export type Choices = Choice[]
-
-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,
+    errors?: string[],
 }
 
 /*----------------------------------
 - COMONENT
 ----------------------------------*/
 export default ({ 
-    title, choices: initChoices, errors, validator, required, noneSelection, enableSearch, value: current, 
-    onChange, inline, multiple,
+    title, 
+    errors,
     ...props 
 }: Props) => {
 
-    const refModal = React.useRef<TDialogControls>(null);
-
     /*----------------------------------
     - 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>([]);
+    const refModal = React.useRef<TDialogControls>(null);
 
     /*----------------------------------
     - 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
+    const currentList: Choice[] = props.value === undefined
         ? []
-        : (Array.isArray(current) ? current : [current]);
+        : (Array.isArray(props.value) 
+            ? props.value 
+            : [props.value]
+        );
 
     /*----------------------------------
     - 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>
-                    ))}
-                </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);
-
-                        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>
-                        )
-                    })}
-
-                    {((!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}>
+        {props.inline ? (
+            <ChoiceSelector {...props} currentList={currentList} />
+        ) : (
+            <Dropdown {...props} content={(() =>
+                <ChoiceSelector {...props} currentList={currentList} />
+            )} iconR="chevron-down" refModal={refModal}>
 
                 {currentList.length === 0
                     ? title
-                    : currentList.map(choice => choice.label).join(', ')}
+                    : currentList.map(
+                        choice => (
+                            <span class="badge">
+                                {choice.label}
+                            </span>
+                        )
+                    )}
 
             </Dropdown>
         )}

package/src/client/components/containers/Popover/getPosition.ts

@@ -2,6 +2,8 @@ export type TSide = "left"|"top"|"right"|"bottom";
 
 const debug = true;
 
+export type TPosition = ReturnType<typeof corrigerPosition>
+
 export default function corrigerPosition(
     conteneur: HTMLElement,
     popover: HTMLElement,
@@ -20,10 +22,10 @@ export default function corrigerPosition(
         height: popover.offsetHeight
     }
 
-    debug && console.log(`[positionnement] Conteneur =`, conteneur, `Popover =`, popover, `Coté =`, cote);
+    debug && console.log(`[popover] Conteneur =`, conteneur, `Popover =`, popover, `Coté =`, cote);
 
     if (dimsPop.width === undefined || dimsPop.height === undefined)
-        console.error(`Impossible de récupérer les dimensions de la popover. popover est-il réelement n élement html, ou alors un composant react ? | dimsPop =`, dimsPop, 'popover =', popover);
+        console.error("Unable to get the dimensions of the popover element. Did you pass a react element as content of popover ?");
 
     /*----------------------------------
     - POSITIONNEMENT INITIAL
@@ -37,6 +39,7 @@ export default function corrigerPosition(
     const posCont = conteneur.getBoundingClientRect();
 
     // Placement
+    debug && console.log(`[popover] Placement = ${cote}`, posCont.height, margeY);
     switch (cote) {
         case 'top':
             posInit.top = -dimsPop.height - margeY;
@@ -54,12 +57,12 @@ export default function corrigerPosition(
 
     // Centrage Horizontal
     if (cote === 'top' || cote === 'bottom') {
-        debug && console.log(`[positionnement] Centrage horizontal`);
+        debug && console.log(`[popover] Centrage horizontal`);
         posInit.left = posCont.width / 2 - dimsPop.width / 2;
     }
     // Centrage Vertical
     if (cote === 'left' || cote === 'right') {
-        debug && console.log(`[positionnement] Centrage vertical`);
+        debug && console.log(`[popover] Centrage vertical`);
         posInit.top = posCont.height / 2 - dimsPop.height / 2;
     }
     
@@ -96,34 +99,34 @@ export default function corrigerPosition(
         bottom: 'auto'
     };
 
-    debug && console.log(`[positionnement] Position initiale =`, posInit, `Frontières =`, frame, '=', frontieres);
+    debug && console.log(`[popover] Position initiale =`, posInit, `Frontières =`, frame, '=', frontieres);
 
     // Extrémité Haut
     if (posCont.top + posInit.top < frontieres.top) {
         posFinale.top = (frontieres.top - posCont.top) + 'px';
-        debug && console.log(`[positionnement] Top: Extremité haut`, posFinale.top);
+        debug && console.log(`[popover] Top: Extremité haut`, posFinale.top);
     // Extrémité Bas
     } else if (posCont.top + posInit.top + dimsPop.height >= frontieres.bottom) {
         posFinale.top = 'auto';
         posFinale.bottom = (posCont.bottom - frontieres.bottom) + 'px';
-        debug && console.log(`[positionnement] Top: Extremité bas`, posFinale.bottom);
+        debug && console.log(`[popover] Top: Extremité bas`, posFinale.bottom);
     } else {
         posFinale.top = posInit.top + 'px';
-        debug && console.log(`[positionnement] Top: Conservation`, posFinale.top);
+        debug && console.log(`[popover] Top: Conservation`, posFinale.top);
     }
 
     // Extrémité Gauche
     if (posCont.left + posInit.left < frontieres.left) {
         posFinale.left = (frontieres.left - posCont.left) + 'px';
-        debug && console.log(`[positionnement] Left: Extremité gauche`, posFinale.left);
+        debug && console.log(`[popover] Left: Extremité gauche`, posFinale.left);
     // Extrémité Droite
     } else if (posCont.left + posInit.left + dimsPop.width >= frontieres.right) {
         posFinale.left = 'auto';
         posFinale.right = (posCont.right - frontieres.right) + 'px';
-        debug && console.log(`[positionnement] Left: Extremité droite`, posFinale.right);
+        debug && console.log(`[popover] Left: Extremité droite`, posFinale.right);
     } else {
         posFinale.left = posInit.left + 'px';
-        debug && console.log(`[positionnement] Left: Conservation`, posFinale.left);
+        debug && console.log(`[popover] Left: Conservation`, posFinale.left);
     }
 
     console.log({ posInit, dimsPop, frontieres }, { posFinale });

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

@@ -3,19 +3,12 @@
 ----------------------------------*/
 
 // Npm
-import React, { JSX } from 'react';
-import { ComponentChild } from 'preact';
+import React, { JSX, ComponentChild } from 'react';
 import type { StateUpdater } from 'preact/hooks';
 
-// Composants
-import Bouton, { Props as PropsBouton } from '@client/components/button';
-
-// Ressouces
-//import '@client/components/Donnees/Tooltip/index.less';
-
 // Libs
-import getPosition, { TSide } from './getPosition';
-import { blurable, deepContains } from '@client/utils/dom';
+import getPosition, { TSide, TPosition } from './getPosition';
+import { blurable, deepContains, focusContent } from '@client/utils/dom';
 import useContexte from '@/client/context';
 
 /*----------------------------------
@@ -26,7 +19,7 @@ export type Props = {
     id?: string,
 
     // Display
-    content?: JSX.Element,
+    content?: JSX.Element | (() => JSX.Element),
     state: [boolean, StateUpdater<boolean>],
     width?: number | string,
     disable?: boolean
@@ -44,8 +37,10 @@ export type Props = {
 import "./popover.less";
 export default (props: Props) => {
 
-    const ctx = useContexte();
-
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+    
     let {
         id,
 
@@ -58,31 +53,39 @@ export default (props: Props) => {
         ...autresProps
     } = props;
 
-    const [position, setPosition] = React.useState(undefined);
+    const [position, setPosition] = React.useState<TPosition>(undefined);
     const refCont = React.useRef<HTMLElement>(null);
-    const refPop = React.useRef<HTMLElement>(null);
+    const refContent = React.useRef<HTMLElement>(null);
 
     const [shown, show] = state;
 
     // Màj visibilite
     React.useEffect(() => {
         if (shown === true) {
+
             // Positionnement si affichage
             setPosition(
                 getPosition(
                     refCont.current, 
-                    refPop.current, 
+                    refContent.current, 
                     false, 
-                    position, 
+                    side, 
                     frame || document.getElementById('page')
                 )
             );
 
-            //return blurable([refCont, () => show(false)])
+            // Autofocus elements
+            focusContent( refContent.current );
+
+            // Close when the user clicks elsewere tha the popover
+            return blurable([ refCont.current, () => show(false) ])
         }
 
     }, [shown]);
 
+    /*----------------------------------
+    - ATTRIBUTES
+    ----------------------------------*/
     if (!autresProps.className)
         autresProps.className = '';
 
@@ -95,6 +98,36 @@ export default (props: Props) => {
 
     const Tag = tag || 'div';
 
+    let renderedContent: ComponentChild;
+    if (active) {
+        content = typeof content === 'function' ? React.createElement(content) : content;
+        renderedContent = React.cloneElement( 
+            content, 
+            {
+                className: (content.props.className || '') 
+                    + ' card white popover pd-1' 
+                    + (position ? ' pos_' + position.cote : ''),
+                ref: (ref: any) => {
+                    if (ref !== null)
+                        refContent.current = ref
+                },
+                style: {
+                    ...(content.props.style || {}),
+                    ...(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 } : {})
+                }
+            }
+        )
+    }
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
     return (
         <Tag
             style={{
@@ -115,23 +148,7 @@ export default (props: Props) => {
                 }
             })}
 
-            {active && React.cloneElement(content, {
-                className: (content.props.className || '') + ' card white popover' + (position ? ' pos_' + position.cote : ''),
-                ref: (ref: any) => {
-                    if (ref !== null)
-                        refPop.current = ref
-                },
-                style: {
-                    ...(content.props.style || {}),
-                    ...(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 } : {})
-                }
-            })}
+            {renderedContent}
         </Tag>
     )
 }

package/src/client/components/containers/Popover/popover.less

@@ -3,8 +3,14 @@
 .contPopover {
     display: inline-block;
 
-    > button {
+    > .btn {
         width: 100%;
+
+        > .label {
+            flex: 1;
+            justify-content: flex-start;
+            overflow: hidden;
+        }
     }
 
     // Evite les dépassements à droite en en bas de la page

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

@@ -18,7 +18,7 @@ import Popover from '../containers/Popover';
 export type { TDialogControls } from '../Dialog/Manager';
 
 export type Props = ButtonProps & {
-    content: ComponentChild,
+    content: ComponentChild | (() => ComponentChild),
     refModal?: RefObject<TDialogControls>
 }
 

package/src/client/components/index.ts

@@ -26,7 +26,7 @@ export { default as CircularProgressbar } from './data/progressbar/circular';
 
 // Input V3
 export { default as Select } from './Select';
-export { default as String } from './inputv3/string';
+export { default as Input } from './inputv3';
 export { default as File } from './inputv3/file';
 
 // TOD: fix popover component

package/src/client/components/input/Number/index.tsx

@@ -58,13 +58,13 @@ export default Champ<Props, TValeurDefaut, TValeurOut>('number', { valeurDefaut,
     }
 
     const boutonsControle = [{
-        icone: /* @icone */"minus",
+        icon: /* @icon */"minus",
         onClick: () => {
             const pasA = pas >= valeur ? pas / 10 : pas;
             setState({ valeur: corrigerValeur(valeur - pasA) }, true);
         }
     }, {
-        icone: /* @icone */"plus",
+        icon: /* @icon */"plus",
         onClick: () => {
             setState({ valeur: corrigerValeur(valeur + pas) }, true);
         }

package/src/client/components/inputv3/{string/index.tsx → index.tsx}

@@ -8,7 +8,7 @@ import { ComponentChild, JSX } from 'preact';
 import TextareaAutosize from 'react-textarea-autosize';
 
 // Core libs
-import { useInput, InputBaseProps } from '../base';
+import { useInput, InputBaseProps } from './base';
 
 /*----------------------------------
 - TYPES
@@ -25,7 +25,7 @@ export type Props = {
     inputRef?: React.Ref<HTMLInputElement>
 
     // Behavior
-    type?: 'email' | 'password' | 'longtext',
+    type?: 'email' | 'password' | 'longtext' | 'number',
     choice?: string[] | ((input: string) => Promise<string[]>),
 
     // Actions
@@ -93,6 +93,10 @@ export default ({
         prefix = prefix || <i src="text" />;
         Tag = 'textarea'//TextareaAutosize;
 
+    } else if (type === 'number') {
+
+        fieldProps.type = 'number';
+
     }
 
     // Auto suffix

package/src/client/pages/_messages/403.tsx

@@ -23,7 +23,7 @@ router.error( 403, ({ message, modal }) => {
     });
 
     return (
-        <div class="col pd-2">
+        <div class="card w-3-4 col al-center pd-2">
 
             <i src="times-circle" class="fg error xxl" />
 

package/src/client/pages/_messages/500.tsx

@@ -23,7 +23,7 @@ router.error( 500, ({ message }) => {
     });
 
     return (
-        <div class="col pd-2">
+        <div class="card w-3-4 col al-center pd-2">
 
             <i src="times-circle" class="fg error xxl" />
 

package/src/client/pages/bug.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 // Core components
-import { Button, String } from '@client/components';
+import { Button, Input } from '@client/components';
 import Card, { Props as CardProps } from '@client/components/Dialog/card';
 
 // Core libs
@@ -49,11 +49,11 @@ export default ({ ...self }: {} & CardProps) => {
 
             <p>What's the problem ?</p>
 
-            <String type="longtext" title="Description of the problem" value={observation} onChange={setObservation} />
+            <Input type="longtext" title="Description of the problem" value={observation} onChange={setObservation} />
 
             <p>What did you do just before the problem occurs ?</p>
 
-            <String type="longtext" title="How the problem occured ?" value={before} onChange={setBefore} />
+            <Input type="longtext" title="How the problem occured ?" value={before} onChange={setBefore} />
 
         </Card>
     )

package/src/client/utils/dom.ts

@@ -47,7 +47,7 @@ export const blurable = (...args: [HTMLElement, Function][]) => {
 
             if (!deepContains([refElement], e.target))
                 masquer();
-
+                
         }
     }
 
@@ -65,4 +65,15 @@ export const blurable = (...args: [HTMLElement, Function][]) => {
         window.removeEventListener('mousedown', blur);
         unlisten();
     }
+}
+
+export const focusContent = ( container: HTMLElement ) => {
+
+    const toFocus = container.querySelector(
+        'input, textarea, button.btn.primary, footer > button.btn'
+    ) || container;
+
+    console.log('Element to focus', toFocus);
+    // TODO: Type only docusable elemnts
+    toFocus?.focus();
 }