5htp-core 0.2.6-8 → 0.2.6-9

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.2.6-8",
+	"version": "0.2.6-9",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/app/index.ts

@@ -24,8 +24,8 @@ export { default as Service } from './service';
 declare global {
     interface Window {
         dev: boolean,
-        // Defined by loading gtag.js
-        gtag: (action: string, name: string, params?: any) => void,
+        /*context: ClientContext,
+        user: User,*/
         /*context: ClientContext,
         user: User,*/
     }

package/src/client/components/index.ts

@@ -16,6 +16,7 @@ export { default as Video } from './Video';
 export { default as Number } from './input/Number';
 export { default as Slider } from './input/Slider';
 export { default as Radio } from './input/Radio';
+export { default as Checkbox } from './input/Checkbox';
 
 // Data
 export { default as Amount } from './Amount';

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

@@ -1,74 +1,82 @@
 /*----------------------------------
 - DEPENDANCES
 ----------------------------------*/
+
+// Npm
 import React from 'react';
-import Champ from '../Base';
-import { ComponentChild } from 'preact';
+import { JSX, ComponentChild } from 'preact';
 
-import uid from '@common/data/id';
+// Core libs
+import { useInput, InputBaseProps } from '../../inputv3/base';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
-type TValeur = boolean;
-const valeurDefaut = false as boolean;
-type TValeurDefaut = typeof valeurDefaut;
-type TValeurOut = string;
-
 export type Props = {
-    valeur: TValeur,
-    switch?: boolean,
-    children?: ComponentChild
+    id: string,
+    label: ComponentChild,
+    // State
+    inputRef?: React.Ref<HTMLInputElement>
 }
 
 /*----------------------------------
-- COMPOSANTS
+- COMPOSANT
 ----------------------------------*/
-import './index.less';
-export default Champ<Props, TValeurDefaut, TValeurOut>('checkbox', { valeurDefaut }, ({
-    label, titre, children, switch: isSwitch, attrsContChamp, attrsChamp, nom, description, 
-    readOnly
-}, { valeur, state, setState }, rendre) => {
+export default ({ 
+    id,
+    // Decoration
+    required,
+    label: labelText,
+    // State
+    inputRef, errors,
+    ...props 
+}: Props & InputBaseProps<boolean> & Omit<JSX.HTMLAttributes<HTMLInputElement>, 'onChange'>) => {
 
-    if (label === undefined)
-        label = true;
-    if (!titre && children)
-        titre = children;
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
 
-    if (isSwitch) {
-        attrsContChamp.className += ' switch';
-        if (label)
-            attrsContChamp.className += ' avecLabel';
-    } else
-        attrsContChamp.className += ' classique';
+    const [{ value, focus, fieldProps }, setValue, commitValue, setState] = useInput(props, false, true);
 
-    if (state.chargement)
-        attrsContChamp.disabled = true;
+    const refInput = inputRef || React.useRef<HTMLInputElement>();
+    
+    /*----------------------------------
+    - ATTRIBUTES
+    ----------------------------------*/
 
-    attrsChamp.id = 'check_' + (nom || uid());
+    let className: string = 'input checkbox row';
 
-    if (readOnly)
-        return rendre(valeur ? 'Yes' : 'No', {});
+    if (focus)
+        className += ' focus';
+    if (errors?.length)
+        className += ' error';
 
-    return rendre(<>
+    if (props.className !== undefined)
+        className += ' ' + props.className;
 
-        <input type="checkbox" {...attrsChamp}
-            onChange={() => {
-                setState({ valeur: !valeur });
-            }}
-            checked={valeur}
-        />
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return <>
+        <div class={className} onClick={() => refInput.current?.focus()}>
 
-        {/* On ne peut pas rendre le switch + le texte du label dans le même <label> */}
-        {(true || (isSwitch && label)) && (
-            <label htmlFor={attrsChamp.id} />
-        )}
+            <input type="checkbox" 
+                onChange={() => {
+                    setValue( !value );
+                }}
+                checked={value}
+            />
 
-        <div className="contLabel">
-            <label htmlFor={attrsChamp.id}>{titre}</label>   
-             
-            {description && <p className="desc">{description}</p>}
+            <label htmlFor={id} class="col-1 txt-left">
+                {labelText}
+            </label>
+            
         </div>
-
-    </>, { ecraser: true });
-})
+        
+        {errors?.length && (
+            <div class="fg error txt-left">
+                {errors.join('. ')}
+            </div>
+        )}
+    </>
+}

package/src/client/components/input/Checkbox/old.tsx

@@ -0,0 +1,74 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+import React from 'react';
+import Champ from '../Base';
+import { ComponentChild } from 'preact';
+
+import uid from '@common/data/id';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+type TValeur = boolean;
+const valeurDefaut = false as boolean;
+type TValeurDefaut = typeof valeurDefaut;
+type TValeurOut = string;
+
+export type Props = {
+    valeur: TValeur,
+    switch?: boolean,
+    children?: ComponentChild
+}
+
+/*----------------------------------
+- COMPOSANTS
+----------------------------------*/
+import './index.less';
+export default Champ<Props, TValeurDefaut, TValeurOut>('checkbox', { valeurDefaut }, ({
+    label, titre, children, switch: isSwitch, attrsContChamp, attrsChamp, nom, description, 
+    readOnly
+}, { valeur, state, setState }, rendre) => {
+
+    if (label === undefined)
+        label = true;
+    if (!titre && children)
+        titre = children;
+
+    if (isSwitch) {
+        attrsContChamp.className += ' switch';
+        if (label)
+            attrsContChamp.className += ' avecLabel';
+    } else
+        attrsContChamp.className += ' classique';
+
+    if (state.chargement)
+        attrsContChamp.disabled = true;
+
+    attrsChamp.id = 'check_' + (nom || uid());
+
+    if (readOnly)
+        return rendre(valeur ? 'Yes' : 'No', {});
+
+    return rendre(<>
+
+        <input type="checkbox" {...attrsChamp}
+            onChange={() => {
+                setState({ valeur: !valeur });
+            }}
+            checked={valeur}
+        />
+
+        {/* On ne peut pas rendre le switch + le texte du label dans le même <label> */}
+        {(true || (isSwitch && label)) && (
+            <label htmlFor={attrsChamp.id} />
+        )}
+
+        <div className="contLabel">
+            <label htmlFor={attrsChamp.id}>{titre}</label>   
+             
+            {description && <p className="desc">{description}</p>}
+        </div>
+
+    </>, { ecraser: true });
+})

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

@@ -37,6 +37,7 @@ export type TInputState<TValue> = {
 export function useInput<TValue>(
     { value: externalValue, onChange }: InputBaseProps<TValue>, 
     defaultValue: TValue,
+    autoCommit: boolean = false
 ): [
     state: TInputState<TValue>,
     setValue: (value: TValue) => void,
@@ -52,7 +53,12 @@ export function useInput<TValue>(
         changed: false
     });
 
-    const setValue = (value: TValue) => setState({ value, valueSource: 'internal', changed: true });
+    const setValue = (value: TValue) => {
+        setState({ value, valueSource: 'internal', changed: true });
+
+        if (autoCommit)
+            commitValue(value);
+    };
 
     const commitValue = () => {
 
@@ -75,6 +81,12 @@ export function useInput<TValue>(
         
     }, [externalValue]);
 
+    React.useEffect(() => {
+        if (state.valueSource === 'internal') {
+            commitValue();
+        } 
+    }, [state.value]);
+
     return [state, setValue, commitValue, setState]
 }