@antscorp/antsomi-ui 2.0.109 → 2.0.111

package/es/styled/common.js

@@ -4,56 +4,56 @@ import styled from 'styled-components';
 import { globalToken } from '../constants';
 // Components
 import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
-export const IconButton = styled.div `
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 200ms;
-  flex-shrink: 0;
-
-  i {
-    font-size: 14px;
-    color: ${globalToken?.bw8};
-  }
-
-  &:hover {
-    i {
-      color: ${globalToken?.bw10};
-    }
-  }
+export const IconButton = styled.div `
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms;
+  flex-shrink: 0;
+
+  i {
+    font-size: 14px;
+    color: ${globalToken?.bw8};
+  }
+
+  &:hover {
+    i {
+      color: ${globalToken?.bw10};
+    }
+  }
 `;
-export const ActionButton = styled(Button) `
-  display: flex !important;
-  flex-direction: column;
-  align-items: center;
-  height: 43px !important;
-  width: 50px !important;
-  gap: 4px !important;
-  padding: 3px 0px !important;
-  font-size: 8px !important;
-  line-height: 1 !important;
-  color: ${globalToken?.bw8} !important;
-
-  ${props => props.$hide && `visibility: hidden !important;`}
-
-  .action-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    > i {
-      font-size: 24px !important;
-    }
-  }
-
-  /* &:hover, */
-  &:active {
-    color: ${globalToken?.colorPrimary} !important;
-  }
-
-  &:disabled {
-    background-color: ${globalToken?.bw2} !important;
-  }
+export const ActionButton = styled(Button) `
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+  height: 43px !important;
+  width: 50px !important;
+  gap: 4px !important;
+  padding: 3px 0px !important;
+  font-size: 8px !important;
+  line-height: 1 !important;
+  color: ${globalToken?.bw8} !important;
+
+  ${props => props.$hide && `visibility: hidden !important;`}
+
+  .action-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    > i {
+      font-size: 24px !important;
+    }
+  }
+
+  /* &:hover, */
+  &:active {
+    color: ${globalToken?.colorPrimary} !important;
+  }
+
+  &:disabled {
+    background-color: ${globalToken?.bw2} !important;
+  }
 `;

package/es/tests/styled.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-export const TableTestWrapper = styled.div `
-  padding: 10px;
-  height: 100vh;
-  overflow: auto;
+export const TableTestWrapper = styled.div `
+  padding: 10px;
+  height: 100vh;
+  overflow: auto;
 `;

package/es/types/index.d.ts

@@ -3,6 +3,15 @@ export type THandleErrorPayload = {
     name: string;
     args: Record<string, any>;
 };
+/** Generic data attributes to set on components */
+export type DataAttribute = {
+    /** The key for the attribute */
+    key: `data-${string}`;
+    /** The value */
+    value: string;
+};
+/** An array of data attributes */
+export type DataAttributes = DataAttribute[];
 export type TLocale = 'en' | 'vi';
 export type GenericFunction = (...args: any[]) => any;
 export type TConfigErrorInfo = {

package/es/utils/common.d.ts

@@ -1,3 +1,4 @@
+import { DataAttributes } from '../types';
 /**
  * Function to reorder list
  * @param {Object[]} list - list of item want to reorder
@@ -66,17 +67,14 @@ export declare const searchParamsToObject: (searchParams?: string) => Record<str
 export declare const getShuffleArray: <T>(array: T[]) => T[];
 export declare const snakeCaseToCamelCase: <T = Record<string, any>>(object: Record<string, any> | Record<string, any>[], recursive?: boolean) => T;
 export declare const camelCaseToSnakeCase: <T = Record<string, any>>(object: Record<string, any>, recursive?: boolean) => T;
-export declare function generateKey(): any;
+export declare function generateKey(): string;
 export declare const formatUserId: (userId?: number) => string;
 /**
- * Function to remove accent
- * @param str - String want to remove accent
- * @returns {string} - Result after remove accent
- */
-export declare const removeAccent: (str: string) => string;
-/** Remove all accents and convert string to lower case, remove leading and trailing white space */
-export declare const simplifyString: (str: string) => string;
-/**
+ * Checks string matching based on a query, supporting fuzzy matching,
+ * where the query characters must appear in order within the target string.
+ * Allows for missing characters in the query relative to the target,
+ * and ignores case, diacritics, and spaces.
+ *
  * @param str target string
  * @param queryStr search query
  * @returns true if target string includes search query
@@ -165,5 +163,13 @@ export declare const convertNumberByDisplayFormat: (value: number | string, grou
 export declare function numberWithCommas(n: number): string;
 export declare const multiPercentageValue: (value?: string) => string;
 export declare const antsomiClsx: (componentName: string) => (className: string) => string;
+/**
+ * Take an array of data attribute key/value pairs and return an object which
+ * can be spread into a component's definition
+ *
+ * @param attributes
+ * @returns A spreadable object of data-attributes
+ */
+export declare const dataAttrArrayToObject: (attributes?: DataAttributes) => Record<string, string>;
 export declare function arrayToMapByProperty<T extends object, K extends keyof T>(array: T[], propertyName: K): Map<T[K], T>;
 export declare function compareStrings(a: any, b: any): number;

package/es/utils/common.js

@@ -6,7 +6,7 @@ import uniqid from 'uniqid';
 import { MESSAGES, PORTAL_KEYS } from '@antscorp/antsomi-ui/es/services/constants';
 // Utils
 import { handleError } from './handleError';
-import { keyBy, sortBy } from 'lodash';
+import { kebabCase, keyBy, sortBy, toString } from 'lodash';
 import clsx from 'clsx';
 import { ANTSOMI_COMPONENT_PREFIX_CLS } from '../constants';
 const PATH = 'src/utils/common.ts';
@@ -430,35 +430,57 @@ export function generateKey() {
 }
 export const formatUserId = (userId) => String(userId || '').replace(/(\d{3})(\d{3})(\d{0,})/, `$1-$2-$3`);
 /**
- * Function to remove accent
- * @param str - String want to remove accent
- * @returns {string} - Result after remove accent
+ * Normalizes a string for searching by:
+ * 1. Converting to NFD Unicode form and removing diacritics.
+ * 2. Converting to lowercase.
+ * 3. Removing all whitespace.
+ * @param str The string to normalize.
+ * @returns The normalized string.
  */
-export const removeAccent = (str) => {
-    str = str.replace(/[àáạảãâầấậẩẫăằắặẳẵ]/g, 'a');
-    str = str.replace(/[èéẹẻẽêềếệểễ]/g, 'e');
-    str = str.replace(/[ìíịỉĩ]/g, 'i');
-    str = str.replace(/[òóọỏõôồốộổỗơờớợởỡ]/g, 'o');
-    str = str.replace(/[ùúụủũưừứựửữ]/g, 'u');
-    str = str.replace(/[ỳýỵỷỹ]/g, 'y');
-    str = str.replace(/đ/g, 'd');
-    str = str.replace(/[ÀÁẠẢÃÂẦẤẬẨẪĂẰẮẶẲẴ]/g, 'A');
-    str = str.replace(/[ÈÉẸẺẼÊỀẾỆỂỄ]/g, 'E');
-    str = str.replace(/[ÌÍỊỈĨ]/g, 'I');
-    str = str.replace(/[ÒÓỌỎÕÔỒỐỘỔỖƠỜỚỢỞỠ]/g, 'O');
-    str = str.replace(/Ù|Ú|Ụ|Ủ|Ũ|Ư|Ừ|Ứ|Ự|Ử|Ữ/g, 'U');
-    str = str.replace(/Ỳ|Ý|Ỵ|Ỷ|Ỹ/g, 'Y');
-    str = str.replace(/Đ/g, 'D');
-    return str;
-};
-/** Remove all accents and convert string to lower case, remove leading and trailing white space */
-export const simplifyString = (str) => removeAccent(`${str || ''}`.toLowerCase().trim()) || '';
+function normalizeStringForSearch(str) {
+    const normalizedStr = typeof str !== 'string' ? toString(str) : str;
+    if (!normalizedStr) {
+        return ''; // Handle null, undefined, or empty string inputs
+    }
+    return normalizedStr
+        .normalize('NFD') // Decompose accented characters (e.g., "á" -> "a" + "´")
+        .replace(/[\u0300-\u036f]/g, '') // Remove diacritical marks
+        .toLowerCase() // Convert to lowercase
+        .replace(/\s+/g, ''); // Remove all whitespace
+}
 /**
+ * Checks string matching based on a query, supporting fuzzy matching,
+ * where the query characters must appear in order within the target string.
+ * Allows for missing characters in the query relative to the target,
+ * and ignores case, diacritics, and spaces.
+ *
  * @param str target string
  * @param queryStr search query
  * @returns true if target string includes search query
  */
-export const searchStringQuery = (str, queryStr) => simplifyString(str).includes(simplifyString(queryStr || ''));
+export const searchStringQuery = (str, queryStr) => {
+    const normalizedQuery = normalizeStringForSearch(queryStr);
+    const normalizedItem = normalizeStringForSearch(str);
+    // Optimization: if normalized query is longer than normalized item,
+    // it cannot be a subsequence.
+    if (normalizedQuery.length > normalizedItem.length) {
+        return false;
+    }
+    // Subsequence check:
+    // Iterate through both normalized strings.
+    // If characters match, advance the query pointer.
+    // Always advance the item pointer.
+    let queryIndex = 0;
+    let itemIndex = 0;
+    while (queryIndex < normalizedQuery.length && itemIndex < normalizedItem.length) {
+        if (normalizedQuery[queryIndex] === normalizedItem[itemIndex]) {
+            queryIndex++;
+        }
+        itemIndex++;
+    }
+    // If queryIndex reached the end of normalizedQuery, all its characters were found in order.
+    return queryIndex === normalizedQuery.length;
+};
 /**
  * Checks if any of the provided values match the search value.
  *
@@ -742,6 +764,22 @@ export const antsomiClsx = (componentName) => (className) => {
     });
     return clsx(classNames);
 };
+/**
+ * Take an array of data attribute key/value pairs and return an object which
+ * can be spread into a component's definition
+ *
+ * @param attributes
+ * @returns A spreadable object of data-attributes
+ */
+export const dataAttrArrayToObject = (attributes = []) => attributes.reduce((output, current) => {
+    // Ensure we follow the correct syntax so we will just return the output if not
+    if (!/^data-([a-z]+-)*[a-z]+$/g.test(kebabCase(current.key)))
+        return output;
+    // Assign the key/value pair to the output object
+    output[kebabCase(current.key)] = current.value;
+    // return the object
+    return output;
+}, {});
 export function arrayToMapByProperty(array, propertyName) {
     // Đảm bảo đầu vào là một mảng và không rỗng
     if (!Array.isArray(array) || array.length === 0) {

package/es/utils/index.d.ts

@@ -9,3 +9,4 @@ export * from './actionButtons';
 export * from './dataTable';
 export * from './cookie';
 export * from './attribute';
+export * from './web';

package/es/utils/index.js

@@ -9,3 +9,4 @@ export * from './actionButtons';
 export * from './dataTable';
 export * from './cookie';
 export * from './attribute';
+export * from './web';

package/es/utils/variables.js

@@ -1,9 +1,9 @@
 import { css } from 'styled-components';
-export const breakdownMd = style => css `
-  /* @media (max-width: 1600px) {
-    ${style};
-  } */
-  ${style}/* @media (max-width: 1500px) {
-    ${style};
-  } */
+export const breakdownMd = style => css `
+  /* @media (max-width: 1600px) {
+    ${style};
+  } */
+  ${style}/* @media (max-width: 1500px) {
+    ${style};
+  } */
 `;

package/es/utils/web.d.ts

@@ -1,4 +1,70 @@
 /// <reference types="react" />
+/**
+ * Parses a font family string and extracts individual font names
+ * Handles quoted fonts, fallbacks, and CSS font-family syntax
+ * @param fontFamily - Font family string (e.g., "'Roboto', Arial, sans-serif")
+ * @returns Array of individual font names
+ */
+export declare function parseFontFamily(fontFamily: string): string[];
+/**
+ * Checks if a given font name is considered a web safe font
+ * @param fontName - The font name to check (case insensitive)
+ * @param includeGeneric - Whether to consider generic font families as web safe (default: false)
+ * @returns boolean - True if the font is web safe, false otherwise
+ */
+export declare function isWebSafeFont(fontName: string, includeGeneric?: boolean): boolean;
+/**
+ * Extracts the primary font from a font-family string
+ * @param fontFamily Font family string (may contain fallbacks)
+ * @returns Primary font name
+ */
+export declare function getPrimaryFontFamily(fontFamily: string): string;
+/**
+ * Checks if the first font in a font family string is web safe
+ * @param fontFamily - Font family string
+ * @returns boolean - True if the primary font is web safe
+ */
+export declare function isPrimaryFontWebSafe(fontFamily: string): boolean;
+/**
+ * Checks if a font name is a generic font family (CSS keyword)
+ * @param fontName - The font name to check
+ * @returns boolean - True if it's a generic font family
+ */
+export declare function isGenericFontFamily(fontName: string): boolean;
+/**
+ * Checks if a font family string (with potential fallbacks) contains any web safe fonts
+ * @param fontFamily - Font family string with potential fallbacks (e.g., "'Custom Font', Arial, sans-serif")
+ * @param options - Configuration options
+ * @returns Object with detailed analysis
+ */
+export declare function analyzeFontFamily(fontFamily: string, options?: {
+    includeGenericAsWebSafe?: boolean;
+}): {
+    hasWebSafeFonts: boolean;
+    webSafeFonts: string[];
+    nonWebSafeFonts: string[];
+    genericFonts: string[];
+    allFonts: string[];
+    isFullyWebSafe: boolean;
+    isPrimaryFontWebSafe: boolean;
+};
+/**
+ * Gets all available web safe fonts
+ * @returns Array of web safe font names
+ */
+export declare function getWebSafeFonts(): readonly string[];
+/**
+ * Finds web safe font alternatives for a given font
+ * @param fontName - The font name to find alternatives for
+ * @returns Array of similar web safe fonts
+ */
+export declare function getWebSafeFontAlternatives(fontName: string): string[];
+/**
+ * Creates a font stack with appropriate fallbacks
+ * @param primaryFont Primary font family
+ * @returns Complete font stack string
+ */
+export declare function createFontStack(primaryFont: string): string;
 /**
  * Function to parse search params string to object
  * @param {string} searchParams - search params
@@ -21,3 +87,17 @@ export declare const isLinux: () => boolean;
  * @returns Platform-appropriate modifier key
  */
 export declare const getModifierKey: () => "⌘" | "Ctrl";
+/**
+ * Formats a hotkey string with the appropriate modifier
+ * @param key The key to format
+ * @returns Formatted hotkey string
+ */
+export declare const formatHotkey: (key: string) => string;
+/**
+ * Chuyển đổi giá trị CSS 'px' thành số nguyên.
+ * Ví dụ: "16px" => 16
+ *
+ * @param fontSizeString - Chuỗi kích thước font, ví dụ: "16px".
+ * @returns Số nguyên hoặc null nếu chuỗi không hợp lệ.
+ */
+export declare function convertPxToNumber(fontSizeString: unknown): number | null;

package/es/utils/web.js

@@ -1,4 +1,199 @@
 import { VALUE_C, VALUE_CONTROL, VALUE_LEFT_WINDOW, VALUE_V, VALUE_X, VALUE_Z, } from '@antscorp/antsomi-ui/es/constants/keyCode';
+import { GENERIC_FONT_FAMILIES, WEB_SAFE_FONTS } from '../constants';
+/**
+ * Parses a font family string and extracts individual font names
+ * Handles quoted fonts, fallbacks, and CSS font-family syntax
+ * @param fontFamily - Font family string (e.g., "'Roboto', Arial, sans-serif")
+ * @returns Array of individual font names
+ */
+export function parseFontFamily(fontFamily) {
+    if (!fontFamily || typeof fontFamily !== 'string') {
+        return [];
+    }
+    // Split by comma and clean up each font name
+    return fontFamily
+        .split(',')
+        .map(font => font.trim())
+        .map(font => 
+    // Remove quotes (single or double)
+    font.replace(/^['"]|['"]$/g, ''))
+        .map(font => font.trim())
+        .filter(font => font.length > 0);
+}
+/**
+ * Checks if a given font name is considered a web safe font
+ * @param fontName - The font name to check (case insensitive)
+ * @param includeGeneric - Whether to consider generic font families as web safe (default: false)
+ * @returns boolean - True if the font is web safe, false otherwise
+ */
+export function isWebSafeFont(fontName, includeGeneric = false) {
+    if (!fontName || typeof fontName !== 'string') {
+        return false;
+    }
+    // Normalize the font name: trim whitespace and convert to lowercase
+    const normalizedFontName = fontName.trim().toLowerCase();
+    // Check if it's a specific web safe font
+    const isSpecificWebSafe = WEB_SAFE_FONTS.some(f => f === normalizedFontName);
+    // If including generic fonts, also check if it's a generic font family
+    if (includeGeneric) {
+        const isGeneric = GENERIC_FONT_FAMILIES.some(f => f === normalizedFontName);
+        return isSpecificWebSafe || isGeneric;
+    }
+    return isSpecificWebSafe;
+}
+/**
+ * Extracts the primary font from a font-family string
+ * @param fontFamily Font family string (may contain fallbacks)
+ * @returns Primary font name
+ */
+export function getPrimaryFontFamily(fontFamily) {
+    if (!fontFamily)
+        return '';
+    const fonts = parseFontFamily(fontFamily);
+    const primaryFont = fonts[0].trim();
+    // Remove quotes if present
+    return primaryFont.replace(/^["']|["']$/g, '');
+}
+/**
+ * Checks if the first font in a font family string is web safe
+ * @param fontFamily - Font family string
+ * @returns boolean - True if the primary font is web safe
+ */
+export function isPrimaryFontWebSafe(fontFamily) {
+    const fonts = parseFontFamily(fontFamily);
+    return fonts.length > 0 ? isWebSafeFont(fonts[0]) : false;
+}
+/**
+ * Checks if a font name is a generic font family (CSS keyword)
+ * @param fontName - The font name to check
+ * @returns boolean - True if it's a generic font family
+ */
+export function isGenericFontFamily(fontName) {
+    if (!fontName || typeof fontName !== 'string') {
+        return false;
+    }
+    const normalizedFontName = fontName.trim().toLowerCase();
+    return GENERIC_FONT_FAMILIES.includes(normalizedFontName);
+}
+/**
+ * Checks if a font family string (with potential fallbacks) contains any web safe fonts
+ * @param fontFamily - Font family string with potential fallbacks (e.g., "'Custom Font', Arial, sans-serif")
+ * @param options - Configuration options
+ * @returns Object with detailed analysis
+ */
+export function analyzeFontFamily(fontFamily, options = {}) {
+    const { includeGenericAsWebSafe = false } = options;
+    const fonts = parseFontFamily(fontFamily);
+    const webSafeFonts = [];
+    const nonWebSafeFonts = [];
+    const genericFonts = [];
+    fonts.forEach(font => {
+        if (isGenericFontFamily(font)) {
+            genericFonts.push(font);
+        }
+        else if (isWebSafeFont(font)) {
+            webSafeFonts.push(font);
+        }
+        else {
+            nonWebSafeFonts.push(font);
+        }
+    });
+    // Calculate web safety based on options
+    let isFullyWebSafe;
+    let hasWebSafeFonts;
+    if (includeGenericAsWebSafe) {
+        // Include generic fonts as web safe
+        hasWebSafeFonts = webSafeFonts.length > 0 || genericFonts.length > 0;
+        isFullyWebSafe =
+            nonWebSafeFonts.length === 0 && (webSafeFonts.length > 0 || genericFonts.length > 0);
+    }
+    else {
+        // Only specific web safe fonts count
+        hasWebSafeFonts = webSafeFonts.length > 0;
+        // Must have NO non-web-safe fonts AND NO generic fonts for strict mode
+        isFullyWebSafe =
+            nonWebSafeFonts.length === 0 && genericFonts.length === 0 && webSafeFonts.length > 0;
+    }
+    return {
+        hasWebSafeFonts,
+        webSafeFonts,
+        nonWebSafeFonts,
+        genericFonts,
+        allFonts: fonts,
+        isFullyWebSafe,
+        isPrimaryFontWebSafe: isPrimaryFontWebSafe(fontFamily),
+    };
+}
+/**
+ * Gets all available web safe fonts
+ * @returns Array of web safe font names
+ */
+export function getWebSafeFonts() {
+    return WEB_SAFE_FONTS;
+}
+/**
+ * Finds web safe font alternatives for a given font
+ * @param fontName - The font name to find alternatives for
+ * @returns Array of similar web safe fonts
+ */
+export function getWebSafeFontAlternatives(fontName) {
+    const normalizedFontName = fontName.trim().toLowerCase();
+    // Define font categories and their alternatives
+    const fontCategories = {
+        serif: [
+            'times new roman',
+            'times',
+            'georgia',
+            'garamond',
+            'book antiqua',
+            'palatino linotype',
+            'palatino',
+        ],
+        sansSerif: ['arial', 'helvetica', 'verdana', 'tahoma', 'geneva', 'lucida sans'],
+        monospace: ['courier new', 'courier', 'monaco', 'menlo', 'consolas', 'lucida console'],
+        cursive: ['comic sans ms', 'brush script mt'],
+        fantasy: ['papyrus', 'copperplate', 'fantasy'],
+    };
+    // If it's already web safe, return similar fonts from the same category
+    if (isWebSafeFont(normalizedFontName)) {
+        for (const [_category, fonts] of Object.entries(fontCategories)) {
+            if (fonts.includes(normalizedFontName)) {
+                return fonts.filter(font => font !== normalizedFontName);
+            }
+        }
+    }
+    // For non-web-safe fonts, suggest based on common patterns
+    if (normalizedFontName.includes('serif') && !normalizedFontName.includes('sans')) {
+        return fontCategories.serif;
+    }
+    if (normalizedFontName.includes('sans') ||
+        normalizedFontName.includes('arial') ||
+        normalizedFontName.includes('helvetica')) {
+        return fontCategories.sansSerif;
+    }
+    if (normalizedFontName.includes('mono') ||
+        normalizedFontName.includes('courier') ||
+        normalizedFontName.includes('code')) {
+        return fontCategories.monospace;
+    }
+    if (normalizedFontName.includes('script') ||
+        normalizedFontName.includes('cursive') ||
+        normalizedFontName.includes('comic')) {
+        return fontCategories.cursive;
+    }
+    // Default fallback to common sans-serif fonts
+    return fontCategories.sansSerif;
+}
+/**
+ * Creates a font stack with appropriate fallbacks
+ * @param primaryFont Primary font family
+ * @returns Complete font stack string
+ */
+export function createFontStack(primaryFont) {
+    const fallbacks = getWebSafeFontAlternatives(primaryFont);
+    const stack = [primaryFont, ...fallbacks];
+    return stack.join(', ');
+}
 /**
  * Function to parse search params string to object
  * @param {string} searchParams - search params
@@ -57,3 +252,34 @@ export const isLinux = () => getPlatform() === 'linux';
  * @returns Platform-appropriate modifier key
  */
 export const getModifierKey = () => (isMacOS() ? '⌘' : 'Ctrl');
+/**
+ * Formats a hotkey string with the appropriate modifier
+ * @param key The key to format
+ * @returns Formatted hotkey string
+ */
+export const formatHotkey = (key) => {
+    const modifier = getModifierKey();
+    return `${modifier}+${key}`;
+};
+/**
+ * Chuyển đổi giá trị CSS 'px' thành số nguyên.
+ * Ví dụ: "16px" => 16
+ *
+ * @param fontSizeString - Chuỗi kích thước font, ví dụ: "16px".
+ * @returns Số nguyên hoặc null nếu chuỗi không hợp lệ.
+ */
+export function convertPxToNumber(fontSizeString) {
+    // Kiểm tra xem đầu vào có phải là chuỗi không
+    if (typeof fontSizeString !== 'string') {
+        return null;
+    }
+    // Sử dụng parseInt để lấy phần số.
+    // parseInt sẽ dừng lại khi gặp ký tự không phải số, ví dụ 'p' trong 'px'.
+    const numberValue = parseInt(fontSizeString, 10);
+    // Kiểm tra xem kết quả có phải là một số hợp lệ không
+    // (isNaN - Is Not a Number)
+    if (isNaN(numberValue)) {
+        return null;
+    }
+    return numberValue;
+}