Merge pull request #483 from atls/feat/utils

feat: added useHover and usePopover in utils

package.json

@@ -8,7 +8,8 @@
     "ui-admin/*",
     "ui-parts/*",
     "ui-proto/*",
-    "ui/*"
+    "ui/*",
+    "utils/*"
   ],
   "scripts": {
     "postinstall": "yarn workspace @atls-ui-admin/icons build-icons"

utils/use-hover/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@atls-utils/use-hover",
+  "version": "0.0.0",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "react-laag": "2.0.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}

utils/use-hover/src/index.ts

@@ -0,0 +1 @@
+export { useHover } from 'react-laag'

utils/use-popover/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@atls-utils/use-popover",
+  "version": "0.0.0",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "react-laag": "2.0.5"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.20",
+    "react": "18.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  }
+}

utils/use-popover/src/index.ts

@@ -0,0 +1 @@
+export { usePopover } from './use-popover.hook'

utils/use-popover/src/use-popover.hook.ts

@@ -0,0 +1,48 @@
+import { PlacementType } from 'react-laag/dist/PlacementType'
+import { useState }      from 'react'
+import { useLayer }      from 'react-laag'
+
+export const usePopover = (placement: PlacementType, offset = 9, trigger = 'click') => {
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+
+  const close = () => setIsOpen(false)
+
+  const { layerProps, triggerProps, renderLayer } = useLayer({
+    isOpen,
+    placement,
+    auto: true,
+    onOutsideClick: close,
+    onDisappear: close,
+    triggerOffset: offset,
+  })
+
+  const setTrigger = (value) => {
+    if (value === 'click') {
+      return { ...triggerProps, onClick: () => setIsOpen(!isOpen) }
+    }
+    if (value === 'hover') {
+      return {
+        ...triggerProps,
+        onMouseEnter: () => setIsOpen(true),
+        onMouseLeave: () => false,
+      }
+    }
+
+    return {}
+  }
+
+  const render = (children) => renderLayer(isOpen && children)
+
+  return {
+    triggerProps: setTrigger(trigger),
+    layerProps: {
+      ...layerProps,
+      style: {
+        ...layerProps.style,
+      },
+    },
+    render,
+    isOpen,
+    setIsOpen,
+  }
+}

yarn.lock

@@ -1625,6 +1625,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@atls-utils/use-hover@workspace:utils/use-hover":
+  version: 0.0.0-use.local
+  resolution: "@atls-utils/use-hover@workspace:utils/use-hover"
+  dependencies:
+    react-laag: "npm:2.0.5"
+  languageName: unknown
+  linkType: soft
+
+"@atls-utils/use-popover@workspace:utils/use-popover":
+  version: 0.0.0-use.local
+  resolution: "@atls-utils/use-popover@workspace:utils/use-popover"
+  dependencies:
+    "@types/react": "npm:18.2.20"
+    react: "npm:18.2.0"
+    react-laag: "npm:2.0.5"
+  languageName: unknown
+  linkType: soft
+
 "@atls/code-service@npm:^0.0.21":
   version: 0.0.21
   resolution: "@atls/code-service@npm:0.0.21"