feat(utils): added getPx function to dom utils

yamada-ui · Dec 27, 2023 · e28a099 · e28a099
1 parent 38cfa0b
commit e28a099
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/.changeset/poor-years-serve.md b/.changeset/poor-years-serve.md
@@ -0,0 +1,5 @@
+---
+"@yamada-ui/utils": patch
+---
+
+Added `getPx` function
diff --git a/packages/utils/src/dom.ts b/packages/utils/src/dom.ts
@@ -1,4 +1,5 @@
 import type React from "react"
+import { isNumber, isUndefined } from "."
 
 export const createdDom = (): boolean =>
   !!(
@@ -61,6 +62,25 @@ export const isContains = (
   return parent === child || parent?.contains(child)
 }
 
+export const getPx = (value: string | number | undefined): number => {
+  if (isNumber(value)) return value
+
+  if (isUndefined(value)) return 0
+
+  if (value.includes("px")) return parseFloat(value)
+
+  const isBrowser = createdDom()
+  let fontSize = 16
+
+  if (isBrowser) {
+    const style = window.getComputedStyle(document.documentElement)
+
+    fontSize = parseFloat(style.fontSize)
+  }
+
+  return parseFloat(value) * fontSize
+}
+
 export const getEventRelatedTarget = (
   ev: React.FocusEvent | React.MouseEvent,
 ) =>