funda-ui 4.7.202 → 4.7.222

package/Date/index.js

@@ -5424,9 +5424,14 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
 
     e.target.select();
     resetDefauleValueExist();
-    var _date = "".concat(splitVals[0], "-").concat(splitVals[1], "-").concat(splitVals[2]);
-    var _full = "".concat(_date, " ").concat(splitVals[3], ":").concat(splitVals[4], ":").concat(splitVals[5]);
-    _onChange === null || _onChange === void 0 ? void 0 : _onChange(inputRef.current, valueResConverter(_full), (0,cjs_date.isValidDate)(_full), getAllSplittingInputs());
+
+    // If there is no valid default value in the input field, 
+    // onChange should be triggered only after the resetDefauleValueExist() function is processed
+    if (!dateDefaultValueExist) {
+      var _date = "".concat(splitVals[0], "-").concat(splitVals[1], "-").concat(splitVals[2]);
+      var _full = "".concat(_date, " ").concat(splitVals[3], ":").concat(splitVals[4], ":").concat(splitVals[5]);
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(inputRef.current, valueResConverter(_full), (0,cjs_date.isValidDate)(_full), getAllSplittingInputs());
+    }
   }
   function handleKeyPressed(_x2) {
     return _handleKeyPressed.apply(this, arguments);
@@ -5461,17 +5466,19 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
   }
   function _handleKeyPressedForSplitInputs() {
     _handleKeyPressedForSplitInputs = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
-      var key, btnMark, move;
+      var key, btnMark, isLeftArrow, isRightArrow, move;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             key = event.code;
-            btnMark = event.target.dataset.mark;
-            move = function move(key) {
+            btnMark = event.target.dataset.mark; // Check for both regular arrow keys and numpad arrow keys
+            isLeftArrow = key === 'ArrowLeft' || key === 'Numpad4';
+            isRightArrow = key === 'ArrowRight' || key === 'Numpad6';
+            move = function move(direction) {
               var currentIndex = splitInputsIds.findIndex(function (s) {
                 return s === btnMark;
               });
-              var nextIndex = key === 'ArrowLeft' ? currentIndex === splitInputsIds.length - 1 ? 0 : currentIndex - 1 : currentIndex === splitInputsIds.length - 1 ? 0 : currentIndex + 1;
+              var nextIndex = direction === 'left' ? currentIndex === 0 ? splitInputsIds.length - 1 : currentIndex - 1 : currentIndex === splitInputsIds.length - 1 ? 0 : currentIndex + 1;
               var nextOption = splitInputsIds.at(nextIndex);
               if (nextOption) {
                 setTimeout(function () {
@@ -5481,13 +5488,13 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
                 setFocusableSplitInputId(nextOption);
               }
             };
-            if (key === 'ArrowLeft') {
-              move('ArrowLeft');
+            if (isLeftArrow) {
+              move('left');
             }
-            if (key === 'ArrowRight') {
-              move('ArrowRight');
+            if (isRightArrow) {
+              move('right');
             }
-          case 5:
+          case 7:
           case "end":
             return _context2.stop();
         }
@@ -5500,6 +5507,7 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     _onChange === null || _onChange === void 0 ? void 0 : _onChange(inputRef.current, '', false, getAllSplittingInputs());
   }
   function resetDefauleValueExist() {
+    // Does the current input box have a "valid default value"?
     if (!dateDefaultValueExist) setDateDefaultValueExist(true);
   }
   function resetPopupBlurStatus() {

package/README.md

@@ -116,6 +116,211 @@ import 'funda-ui/CascadingSelect/index.css';
 
 
 
+## Collecting Data
+
+### Basic
+
+Use `useState()` to store data.
+
+```js
+import React, { useState } from 'react';
+import Input from 'funda-ui/Input';
+import Select, { OptionConfig, MultiSelectValue } from 'funda-ui/Select';
+
+// component styles
+import 'funda-ui/Select/index.css';
+
+
+interface Config {
+    name: string;
+    role: boolean;
+}
+
+
+export default () => {
+    // Consolidated config state
+    const [config, setConfig] = useState<Config>({
+        name: '',
+        role: '',
+    });
+
+    const updateConfig = (newConfig: Partial<Config>) => {
+        setConfig(prev => ({ ...prev, ...newConfig }));
+    };
+    
+
+    const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        alert(`Name: ${config.name}, Role: ${config.role}`);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div>
+
+                <Input
+                    name="name"
+                    label="Name"
+                    onChange={(e: React.MouseEvent, onComposition: any, el: any, value: string) => {
+                        updateConfig({ name: value });
+                    }}
+                />
+            </div>
+
+            <div>
+        
+                <Select
+                    label="Role"
+                    placeholder="Select"
+                    name="role"
+                    options={[
+                        {"label": "Admin","value": "admin","queryString": ""},
+                        {"label": "User","value": "user","queryString": ""}
+                    ]}
+                    onChange={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, e2: HTMLElement, val: OptionConfig | MultiSelectValue): void => {
+                        updateConfig({ role: (val as OptionConfig).value });
+                    }}
+                />
+
+            </div>
+
+            <button className="btn btn-outline-primary btn-sm mb-2" type="submit">Submit</button>
+        </form>
+    );
+
+}
+```
+
+
+
+
+### Advanced
+
+Using vanilla JS to collect the value of name is faster and easier.
+
+
+```js
+import React, { useRef } from "react";
+import Input from 'funda-ui/Input';
+import Select, { OptionConfig, MultiSelectValue } from 'funda-ui/Select';
+
+// component styles
+import 'funda-ui/Select/index.css';
+
+// utils
+import { serializeArray } from 'funda-ui/Utils/formdata';
+import { isEmpty } from "funda-ui/Utils/validate";
+
+interface FormField {
+    name: string;
+    value: string;
+}
+
+interface FormData {
+    [key: string]: string;
+}
+
+type CallbackFunction = (formData: FormData) => void;
+type ErrorCallbackFunction = () => void;
+
+function customValidate(
+    form: HTMLFormElement | HTMLDivElement | null,
+    callback?: CallbackFunction,
+    errCallback?: ErrorCallbackFunction
+): void {
+    if (form === null) return;
+
+    const formData: FormData = {};
+    const fieldsData: FormField[] = serializeArray(form);
+    let fieldsCheck: boolean = true;
+    let customFieldsCheck: boolean = true;
+
+    // Step 1: everything is ok  
+    //-------------
+    // required fields
+    const emptyFieldsCheck = fieldsData.every((item: FormField) => {
+        if (item.name !== null && item.name !== '') {
+            formData[item.name] = item.value;
+
+            const _field = form.querySelector<HTMLElement>(`[name="${item.name}"]`);
+            if (!_field) return true;
+
+            const fieldRequired = _field.getAttribute('required');
+            if (fieldRequired !== null && fieldRequired !== 'false') {
+                if (item.value === '' || isEmpty(item.value)) {
+                    const _label = _field.dataset.requiredTitle;
+                    alert(`${_label} cannot be empty!`);
+                    return false;
+                }
+            }
+        }
+
+        errCallback?.();
+
+        return true;
+    });
+
+    //  merged result
+    fieldsCheck = [emptyFieldsCheck, customFieldsCheck].every((item: boolean) => {
+        return item;
+    });
+
+    // Step 2: everything is ok  
+    //-------------
+    if (fieldsCheck) {
+        callback?.(formData);
+    }
+}
+
+
+
+export default () => {
+    const formRef = useRef<HTMLDivElement>(null);
+
+    const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+   
+        customValidate(
+            formRef.current, 
+            (formData: any[]) => {
+                alert(JSON.stringify(formData));
+            },
+            () => { }
+        );
+
+    };
+
+    return (
+        <div ref={formRef}>
+            <div>
+
+                <Input
+                    name="name"
+                    label="Name"
+                />
+            </div>
+
+            <div>
+        
+                <Select
+                    label="Role"
+                    placeholder="Select"
+                    name="role"
+                    options={[
+                        {"label": "Admin","value": "admin","queryString": ""},
+                        {"label": "User","value": "user","queryString": ""}
+                    ]}
+                />
+
+            </div>
+
+            <button className="btn btn-outline-primary btn-sm mb-2" type="button" onClick={handleSubmit}>Submit</button>
+        </div>
+    );
+
+}
+```
+
 
 ## Licensing
 

package/Select/index.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
-export declare type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3: any) => void;
+export interface MultiSelectValue {
+    items: {
+        label: string;
+        value: string;
+    }[];
+    labels: string[];
+    values: string[];
+    labelsOfString: string;
+    valuesOfString: string;
+}
+export declare type SelectOptionChangeFnType = (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, element: HTMLElement, value: OptionConfig | MultiSelectValue) => void | Promise<void>;
 export interface MultiSelectControlValConfig {
     values: string[];
     labels: string[];
@@ -12,7 +22,8 @@ export interface OptionConfig {
     listItemLabel?: string;
     value: string | number | boolean;
     queryString: string | number;
-    callback?: () => void;
+    callback?: () => void | Promise<void>;
+    [key: string]: string | number | boolean | any[] | (() => void | Promise<void>) | undefined;
 }
 export interface MultiSelectConfig {
     valid: boolean;
@@ -82,14 +93,14 @@ export declare type SelectProps = {
     fetchFuncAsync?: any;
     fetchFuncMethod?: string;
     fetchFuncMethodParams?: any[];
-    fetchCallback?: (data: any) => void;
-    onFetch?: (e: any, e2: any, value: string, data: any, incomingData: string | null | undefined) => void;
-    onLoad?: (e: any, e2: any, value: string | null | undefined) => void;
-    onSelect?: (data: any) => void;
+    fetchCallback?: (data: OptionConfig[]) => OptionConfig[];
+    onFetch?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, element: HTMLElement, value: string, data: OptionConfig[], incomingData: string | null | undefined) => void;
+    onLoad?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, element: HTMLElement, value: string | null | undefined) => void;
+    onSelect?: (data: OptionConfig) => void | Promise<void>;
     onChange?: SelectOptionChangeFnType | null;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    onKeyPressed?: (arg1: any, arg2: any, arg3: any) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    onKeyPressed?: (event: React.KeyboardEvent<HTMLElement>, element: HTMLElement, value: string) => void;
 };
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<unknown>>;
 export default Select;