@lobehub/ui 1.71.0 → 1.72.0

package/es/LogoThree/Logo.js

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { a, config, useSpring } from '@react-spring/three';
 import { useGLTF } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
-import { memo, useRef } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var NUM = 10;
 var Logo = /*#__PURE__*/memo(function (_ref) {
@@ -12,6 +14,37 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
   var ref = useRef(null);
   var _useGLTF = useGLTF('https://gw.alipayobjects.com/os/kitchen/ygwdCZyaMZ/lobehub.gltf'),
     scene = _useGLTF.scene;
+  // Hover state
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hovered = _useState2[0],
+    setHover = _useState2[1];
+  useEffect(function () {
+    return void (document.body.style.cursor = hovered ? 'pointer' : 'auto');
+  }, [hovered]);
+  // Events
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toggle = _useState4[0],
+    set = _useState4[1];
+  var _useSpring = useSpring({
+      config: config.wobbly,
+      x: toggle
+    }, [toggle]),
+    _useSpring2 = _slicedToArray(_useSpring, 1),
+    x = _useSpring2[0].x;
+  var onPointerOver = useCallback(function () {
+    return setHover(true);
+  }, []);
+  var onPointerOut = useCallback(function () {
+    return setHover(false);
+  }, []);
+  var onClick = useCallback(function () {
+    return set(function (toggle) {
+      return Number(!toggle);
+    });
+  }, [set]);
+  var rotation = x.to([0, 1], [0, Math.PI * 2]);
   useFrame(function (state) {
     var t = state.clock.getElapsedTime();
     ref.current.rotation.set(Math.cos(t / 4) / NUM, Math.sin(t / 3) / NUM / 2, 0.15 + Math.sin(t / 2) / NUM);
@@ -19,9 +52,15 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
   });
   return /*#__PURE__*/_jsx("group", {
     ref: ref,
-    children: /*#__PURE__*/_jsx("primitive", _objectSpread({
-      object: scene
-    }, props))
+    children: /*#__PURE__*/_jsx(a.group, {
+      onClick: onClick,
+      onPointerOut: onPointerOut,
+      onPointerOver: onPointerOver,
+      "rotation-y": rotation,
+      children: /*#__PURE__*/_jsx("primitive", _objectSpread({
+        object: scene
+      }, props))
+    })
   });
 });
 export default Logo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.71.0",
+  "version": "1.72.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -75,6 +75,7 @@
     "@floating-ui/react": "^0",
     "@giscus/react": "^2",
     "@lobehub/emojilib": "latest",
+    "@react-spring/three": "^9",
     "@react-spring/web": "^9",
     "@react-three/drei": "^9",
     "@react-three/fiber": "^8",