-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added comments for the usgae of field id
- Loading branch information
1 parent
5f92adf
commit d2b9df9
Showing
1 changed file
with
67 additions
and
36 deletions.
There are no files selected for viewing
103 changes: 67 additions & 36 deletions
103
micro-ui/web/micro-ui-internals/packages/libraries/src/utils/field.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,37 +1,68 @@ | ||
/* | ||
* Utility function to generate a unique field identifier or name for form fields. | ||
* It combines a screen-specific prefix, a unique field name, and/or an identifier. | ||
* | ||
* @author jagankumar-egov | ||
* | ||
* | ||
* @example | ||
* | ||
* Usage: Digit.Utils.getFieldIdName(fieldName = "", fieldId = "TO_OVERRIDE_ID_WITHTHIS_VALUE", screenPrefix = "TO_OVERRIDE_PREFIX_WITHTHIS_VALUE") | ||
*/ | ||
export const getFieldIdName = (fieldName = "", fieldId = "", screenPrefix = "") => { | ||
fieldName = fieldName ? fieldName : generateUniqueString(10); | ||
return fieldId | ||
? fieldId | ||
: sanitizeToHtmlId(`${getScreenPrefix(screenPrefix)}-${filedName}`); | ||
}; | ||
const getScreenPrefix = (prefix = "") => { | ||
const screenPaths = window.location.pathname.split("/"); | ||
return prefix | ||
? prefix | ||
: `${ | ||
screenPaths?.[screenPaths?.length - 2] - | ||
screenPaths?.[screenPaths?.length - 1] | ||
}`; | ||
}; | ||
const generateUniqueString = (length = 10) => { | ||
const characters = | ||
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; | ||
let result = ""; | ||
for (let i = 0; i < length; i++) { | ||
result += characters.charAt(Math.floor(Math.random() * characters.length)); | ||
} | ||
return result; | ||
}; | ||
|
||
const sanitizeToHtmlId = (input) => { | ||
if (!input) return "id"; // Default to 'id' if input is empty or invalid | ||
|
||
// 1. Convert to lowercase | ||
// 2. Replace invalid characters (anything other than letters, numbers, hyphens, and underscores) | ||
// 3. Replace spaces or consecutive invalid characters with a single hyphen | ||
return input | ||
.toLowerCase() | ||
.replace(/[^a-z0-9-_]+/g, "-") // Replace invalid characters with hyphens | ||
.replace(/^-+|-+$/g, ""); // Trim leading/trailing hyphens | ||
}; | ||
|
||
// Generate a unique field name if none is provided | ||
fieldName = fieldName ? fieldName : generateUniqueString(10); | ||
|
||
// Use the provided fieldId if available, otherwise generate a sanitized HTML ID | ||
return fieldId | ||
? fieldId | ||
: sanitizeToHtmlId(`${getScreenPrefix(screenPrefix)}-${fieldName}`); | ||
}; | ||
|
||
/* | ||
Helper function to derive a screen-specific prefix from the current URL path. | ||
If a custom prefix is provided, it is used directly; otherwise, the prefix is generated | ||
by concatenating the last two segments of the URL path (e.g., "/parent/child"). | ||
*/ | ||
const getScreenPrefix = (prefix = "") => { | ||
const screenPaths = window.location.pathname.split("/"); | ||
|
||
return prefix | ||
? prefix | ||
: `${ | ||
screenPaths?.[screenPaths?.length - 2] - | ||
screenPaths?.[screenPaths?.length - 1] | ||
}`; | ||
}; | ||
|
||
/* | ||
Helper function to generate a random unique string of a given length. | ||
Default length is 10. The string includes alphanumeric characters. | ||
*/ | ||
const generateUniqueString = (length = 10) => { | ||
const characters = | ||
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; | ||
let result = ""; | ||
|
||
for (let i = 0; i < length; i++) { | ||
result += characters.charAt(Math.floor(Math.random() * characters.length)); | ||
} | ||
|
||
return result; | ||
}; | ||
|
||
/* | ||
Sanitizes a string to be used as a valid HTML ID: | ||
1. Converts the string to lowercase. | ||
2. Replaces invalid characters (anything other than letters, numbers, hyphens, and underscores) with hyphens. | ||
3. Trims leading or trailing hyphens. | ||
4. If the input is empty or invalid, defaults to "id". | ||
*/ | ||
const sanitizeToHtmlId = (input) => { | ||
if (!input) return "id"; // Default to 'id' if input is empty or invalid | ||
|
||
return input | ||
.toLowerCase() | ||
.replace(/[^a-z0-9-_]+/g, "-") // Replace invalid characters with hyphens | ||
.replace(/^-+|-+$/g, ""); // Trim leading/trailing hyphens | ||
}; |