funda-ui 1.0.607 → 1.1.10

package/lib/esm/CascadingSelectE2E/utils/extract.js

@@ -0,0 +1,57 @@
+/**
+ * Extract the contents of square brackets
+ * @param {String} str    =>  input string. such as '[1,2] [f][c]'
+ * @returns {Array|String} such as: ['1,2','f','c']
+ */
+function extractContentsOfBrackets(str, commaSeparated = false) {
+    if (typeof str === 'undefined') return '';
+
+    const res = str.match(/[^\[]+(?=(\[ \])|\])/g);
+    if (commaSeparated) {
+        return res === null ? '' : res.join(',').replace(/\,+$/, '');
+    } else {
+        return res === null ? '' : res;
+    }
+    
+}
+
+/**
+ * Extract the contents of curly braces
+ * @param {String} str    =>  input string. such as '{1,2} {f}{c}'
+ * @returns {Array|String} such as: ['1,2','f','c']
+ */
+function extractContentsOfBraces(str, commaSeparated = false) {
+    if (typeof str === 'undefined') return '';
+
+    const res = str.match(/[^\{]+(?=(\{ \})|\})/g);
+    if (commaSeparated) {
+        return res === null ? '' : res.join(',').replace(/\,+$/, '');
+    } else {
+        return res === null ? '' : res;
+    }
+    
+}
+
+/**
+ * Extract the contents of parentheses
+ * @param {String} str    =>  input string. such as '(1,2) (f)(c)'
+ * @returns {Array|String} such as: ['1,2','f','c']
+ */
+function extractContentsOfParentheses(str, commaSeparated = false) {
+    if (typeof str === 'undefined') return '';
+
+    const res = str.match(/[^\(]+(?=(\( \))|\))/g);
+    if (commaSeparated) {
+        return res === null ? '' : res.join(',').replace(/\,+$/, '');
+    } else {
+        return res === null ? '' : res;
+    }
+    
+}
+
+
+module.exports = {
+    extractContentsOfBrackets,
+    extractContentsOfBraces,
+    extractContentsOfParentheses
+}

package/lib/esm/MultipleCheckboxes/index.tsx

@@ -2,6 +2,8 @@ import React, { useId, useState, useEffect, useRef, forwardRef } from 'react';
 
 import Checkbox from 'funda-checkbox';
 
+import { extractContentsOfBrackets } from './utils/extract';
+import { convertArrToValByBrackets } from './utils/convert';
 
 interface OptionConfig {
     [propName: string]: string | number;
@@ -17,11 +19,13 @@ type MultipleCheckboxesProps = {
     options?: OptionConfig[] | string;
     disabled?: any;
     required?: any;
+    /** Whether to use square brackets to save result and initialize default value */
+    extractValueByBrackets?: boolean;
     /** -- */
     id?: string;
     style?: React.CSSProperties;
     [key: `data-${string}`]: string | undefined;
-    onChange?: (e: any, data: any) => void;
+    onChange?: (e: any, data: any, dataStr: any) => void;
 
 };
 
@@ -37,12 +41,14 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, ref: any)
         label,
         name,
         id,
+        extractValueByBrackets,
         style,
         onChange,
         ...attributes
     } = props;
 
 
+    const VALUE_BY_BRACKETS = typeof extractValueByBrackets === 'undefined' ? true : extractValueByBrackets;
     const uniqueID = useId();
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
@@ -97,7 +103,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, ref: any)
         if ( typeof defaultValue === 'undefined' || defaultValue === '' ) {
             setRegTagSelected([]);
         } else {
-            setRegTagSelected(defaultValue.trim().replace(/^\,|\,$/g, '').split(',').filter((v: any) => v !== ''));
+            setRegTagSelected(VALUE_BY_BRACKETS ? extractContentsOfBrackets(defaultValue) : defaultValue.trim().replace(/^\,|\,$/g, '').split(',').filter((v: any) => v !== ''));
         }
     }
 
@@ -151,7 +157,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, ref: any)
 
                                         const _res = (val) ? Array.from(new Set([e.target.value, ...newData])) : newData;
 
-                                        onChange?.(e, _res);
+                                        onChange?.(e, _res, VALUE_BY_BRACKETS ? convertArrToValByBrackets(_res) : _res.join(','));
 
                                         return _res;
                                     });
@@ -168,7 +174,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, ref: any)
                         type="hidden"
                         id={idRes}
                         name={name}
-                        value={regTagSelected.join(',')}
+                        value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(regTagSelected) : regTagSelected.join(',')}
                         required={required || null}
                         {...attributes}
                     />

package/lib/esm/MultipleCheckboxes/utils/convert.js

@@ -0,0 +1,55 @@
+/**
+ * Convert value to string separated by square brackets 
+ * @param {String} str  such as: 1,2,3
+ * @returns {String} such as: [1][2][3]
+ */
+function convertStringByCommaToValByBrackets(str) {
+    if (typeof str === 'undefined') return '';
+    if ( str.length === 0 ) return '';
+    return str.split(',').map((v) => v.includes('[') && v.includes(']') ? `${v}` : `[${v}]`).join('');
+}
+
+
+/**
+ * Convert array value to string  separated by square brackets 
+ * @param {Array} arr  such as: ['1','2','3']
+ * @returns {String} such as: [1][2][3]
+ */
+function convertArrToValByBrackets(arr) {
+    if (!Array.isArray(arr)) return '';
+    
+    return arr.map((v) => v.includes('[') && v.includes(']') ? `${v}` : `[${v}]`).join('');
+}
+
+
+
+/**
+ * Convert value to string separated by curly braces
+ * @param {String} str  such as: 1,2,3
+ * @returns {String} such as: {1}{2}{3}
+ */
+function convertStringByCommaToValByBraces(str) {
+    if (typeof str === 'undefined') return '';
+    if ( str.length === 0 ) return '';
+    return str.split(',').map((v) => v.includes('{') && v.includes('}') ? `${v}` : `{${v}}`).join('');
+}
+
+
+/**
+ * Convert array value to string  separated by curly braces
+ * @param {Array} arr  such as: ['1','2','3']
+ * @returns {String} such as: {1}{2}{3}
+ */
+function convertArrToValByBraces(arr) {
+    if (!Array.isArray(arr)) return '';
+    
+    return arr.map((v) => v.includes('{') && v.includes('}') ? `${v}` : `{${v}}`).join('');
+}
+
+
+module.exports = {
+    convertStringByCommaToValByBrackets,
+    convertArrToValByBrackets,
+    convertStringByCommaToValByBraces,
+    convertArrToValByBraces
+}

package/lib/esm/MultipleCheckboxes/utils/extract.js

@@ -0,0 +1,57 @@
+/**
+ * Extract the contents of square brackets
+ * @param {String} str    =>  input string. such as '[1,2] [f][c]'
+ * @returns {Array|String} such as: ['1,2','f','c']
+ */
+function extractContentsOfBrackets(str, commaSeparated = false) {
+    if (typeof str === 'undefined') return '';
+
+    const res = str.match(/[^\[]+(?=(\[ \])|\])/g);
+    if (commaSeparated) {
+        return res === null ? '' : res.join(',').replace(/\,+$/, '');
+    } else {
+        return res === null ? '' : res;
+    }
+    
+}
+
+/**
+ * Extract the contents of curly braces
+ * @param {String} str    =>  input string. such as '{1,2} {f}{c}'
+ * @returns {Array|String} such as: ['1,2','f','c']
+ */
+function extractContentsOfBraces(str, commaSeparated = false) {
+    if (typeof str === 'undefined') return '';
+
+    const res = str.match(/[^\{]+(?=(\{ \})|\})/g);
+    if (commaSeparated) {
+        return res === null ? '' : res.join(',').replace(/\,+$/, '');
+    } else {
+        return res === null ? '' : res;
+    }
+    
+}
+
+/**
+ * Extract the contents of parentheses
+ * @param {String} str    =>  input string. such as '(1,2) (f)(c)'
+ * @returns {Array|String} such as: ['1,2','f','c']
+ */
+function extractContentsOfParentheses(str, commaSeparated = false) {
+    if (typeof str === 'undefined') return '';
+
+    const res = str.match(/[^\(]+(?=(\( \))|\))/g);
+    if (commaSeparated) {
+        return res === null ? '' : res.join(',').replace(/\,+$/, '');
+    } else {
+        return res === null ? '' : res;
+    }
+    
+}
+
+
+module.exports = {
+    extractContentsOfBrackets,
+    extractContentsOfBraces,
+    extractContentsOfParentheses
+}

package/lib/esm/TagInput/index.tsx

@@ -1,5 +1,8 @@
 import React, { useId, useState, useEffect, useRef, forwardRef } from 'react';
 
+import { extractContentsOfBrackets } from './utils/extract';
+import { convertArrToValByBrackets } from './utils/convert';
+
 declare module 'react' {
     interface ReactI18NextChildren<T> {
         children?: any;
@@ -17,12 +20,14 @@ type TagInputProps = {
     required?: any;
     readOnly?: any;
     placeholder?: string;
+    /** Whether to use square brackets to save result and initialize default value */
+    extractValueByBrackets?: boolean;
     /** -- */
     id?: string;
     style?: React.CSSProperties;
     tabIndex?: number;
     [key: `data-${string}`]: string | undefined;
-    onChange?: (e: any, param: any) => void;
+    onChange?: (e: any, data: any, dataStr: any) => void;
     onBlur?: (e: any) => void;
     onFocus?: (e: any) => void;
 
@@ -41,6 +46,7 @@ const TagInput = forwardRef((props: TagInputProps, ref: any) => {
         label,
         name,
         id,
+        extractValueByBrackets,
         maxLength,
         style,
         tabIndex,
@@ -51,6 +57,7 @@ const TagInput = forwardRef((props: TagInputProps, ref: any) => {
     } = props;
 
 
+    const VALUE_BY_BRACKETS = typeof extractValueByBrackets === 'undefined' ? true : extractValueByBrackets;
     const uniqueID = useId();
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
@@ -70,7 +77,7 @@ const TagInput = forwardRef((props: TagInputProps, ref: any) => {
         if ( typeof defaultValue === 'undefined' || defaultValue === '' ) {
             setItems([]);
         } else {
-            setItems(defaultValue.trim().replace(/^\,|\,$/g, '').split(',').map((item: any, index: number) => {
+            setItems((VALUE_BY_BRACKETS ? extractContentsOfBrackets(defaultValue) : defaultValue.trim().replace(/^\,|\,$/g, '').split(',')).map((item: any, index: number) => {
                 return {
                     content: item,
                     id: index
@@ -88,7 +95,7 @@ const TagInput = forwardRef((props: TagInputProps, ref: any) => {
         setItems(newArray);
 
         //
-        onChange?.(inputRef.current, newArray);
+        onChange?.(inputRef.current, newArray, VALUE_BY_BRACKETS ? convertArrToValByBrackets(newArray.map(v => v.content)) : newArray.map(v => v.content).join(','));
     }
 
     function handleKeypress(event: any) {
@@ -124,7 +131,7 @@ const TagInput = forwardRef((props: TagInputProps, ref: any) => {
             setUserInput('');
 
             //
-            onChange?.(inputRef.current, items);
+            onChange?.(inputRef.current, items, VALUE_BY_BRACKETS ? convertArrToValByBrackets(items.map(v => v.content)) : items.map(v => v.content).join(','));
             
 
         }
@@ -273,7 +280,7 @@ const TagInput = forwardRef((props: TagInputProps, ref: any) => {
                         type="hidden"
                         id={idRes}
                         name={name}
-                        value={items.map((item: any) => item.content).join(',')}
+                        value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(items.map((item: any) => item.content)) : items.map((item: any) => item.content).join(',')}
                         required={required || null}
                     />
 

package/lib/esm/TagInput/utils/convert.js

@@ -0,0 +1,55 @@
+/**
+ * Convert value to string separated by square brackets 
+ * @param {String} str  such as: 1,2,3
+ * @returns {String} such as: [1][2][3]
+ */
+function convertStringByCommaToValByBrackets(str) {
+    if (typeof str === 'undefined') return '';
+    if ( str.length === 0 ) return '';
+    return str.split(',').map((v) => v.includes('[') && v.includes(']') ? `${v}` : `[${v}]`).join('');
+}
+
+
+/**
+ * Convert array value to string  separated by square brackets 
+ * @param {Array} arr  such as: ['1','2','3']
+ * @returns {String} such as: [1][2][3]
+ */
+function convertArrToValByBrackets(arr) {
+    if (!Array.isArray(arr)) return '';
+    
+    return arr.map((v) => v.includes('[') && v.includes(']') ? `${v}` : `[${v}]`).join('');
+}
+
+
+
+/**
+ * Convert value to string separated by curly braces
+ * @param {String} str  such as: 1,2,3
+ * @returns {String} such as: {1}{2}{3}
+ */
+function convertStringByCommaToValByBraces(str) {
+    if (typeof str === 'undefined') return '';
+    if ( str.length === 0 ) return '';
+    return str.split(',').map((v) => v.includes('{') && v.includes('}') ? `${v}` : `{${v}}`).join('');
+}
+
+
+/**
+ * Convert array value to string  separated by curly braces
+ * @param {Array} arr  such as: ['1','2','3']
+ * @returns {String} such as: {1}{2}{3}
+ */
+function convertArrToValByBraces(arr) {
+    if (!Array.isArray(arr)) return '';
+    
+    return arr.map((v) => v.includes('{') && v.includes('}') ? `${v}` : `{${v}}`).join('');
+}
+
+
+module.exports = {
+    convertStringByCommaToValByBrackets,
+    convertArrToValByBrackets,
+    convertStringByCommaToValByBraces,
+    convertArrToValByBraces
+}

package/lib/esm/TagInput/utils/extract.js

@@ -0,0 +1,57 @@
+/**
+ * Extract the contents of square brackets
+ * @param {String} str    =>  input string. such as '[1,2] [f][c]'
+ * @returns {Array|String} such as: ['1,2','f','c']
+ */
+function extractContentsOfBrackets(str, commaSeparated = false) {
+    if (typeof str === 'undefined') return '';
+
+    const res = str.match(/[^\[]+(?=(\[ \])|\])/g);
+    if (commaSeparated) {
+        return res === null ? '' : res.join(',').replace(/\,+$/, '');
+    } else {
+        return res === null ? '' : res;
+    }
+    
+}
+
+/**
+ * Extract the contents of curly braces
+ * @param {String} str    =>  input string. such as '{1,2} {f}{c}'
+ * @returns {Array|String} such as: ['1,2','f','c']
+ */
+function extractContentsOfBraces(str, commaSeparated = false) {
+    if (typeof str === 'undefined') return '';
+
+    const res = str.match(/[^\{]+(?=(\{ \})|\})/g);
+    if (commaSeparated) {
+        return res === null ? '' : res.join(',').replace(/\,+$/, '');
+    } else {
+        return res === null ? '' : res;
+    }
+    
+}
+
+/**
+ * Extract the contents of parentheses
+ * @param {String} str    =>  input string. such as '(1,2) (f)(c)'
+ * @returns {Array|String} such as: ['1,2','f','c']
+ */
+function extractContentsOfParentheses(str, commaSeparated = false) {
+    if (typeof str === 'undefined') return '';
+
+    const res = str.match(/[^\(]+(?=(\( \))|\))/g);
+    if (commaSeparated) {
+        return res === null ? '' : res.join(',').replace(/\,+$/, '');
+    } else {
+        return res === null ? '' : res;
+    }
+    
+}
+
+
+module.exports = {
+    extractContentsOfBrackets,
+    extractContentsOfBraces,
+    extractContentsOfParentheses
+}

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "1.0.607",
+  "version": "1.1.10",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",