From 851028de66a80a3e45b4994342f66e490a9def1e Mon Sep 17 00:00:00 2001 From: astrid Date: Fri, 26 Jul 2024 12:28:24 +0200 Subject: [PATCH] fix exports and add mouse icon --- package.json | 3 ++- pnpm-lock.yaml | 8 ++++++++ src/components/Slider/index.tsx | 25 +++++++++++++++++++++---- src/index.ts | 3 +++ src/utils/index.ts | 1 + src/utils/setMouseIcon.ts | 31 +++++++++++++++++++++++++++++++ 6 files changed, 66 insertions(+), 5 deletions(-) create mode 100644 src/utils/index.ts create mode 100644 src/utils/setMouseIcon.ts diff --git a/package.json b/package.json index 2026d35..c97e9d8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@grand-hawk/ui-components", - "version": "0.1.4", + "version": "0.1.5", "keywords": [ "roblox-ts", "react", @@ -49,6 +49,7 @@ "dependencies": { "@rbxts/react": "^0.4.0", "@rbxts/react-roblox": "^0.4.0", + "@rbxts/services": "^1.5.4", "@rbxts/ui-labs": "^2.1.1", "roblox-ts": "^2.3.0-dev-576ad98" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 125c2bc..5513759 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: '@rbxts/react-roblox': specifier: ^0.4.0 version: 0.4.0 + '@rbxts/services': + specifier: ^1.5.4 + version: 1.5.4 '@rbxts/ui-labs': specifier: ^2.1.1 version: 2.1.1 @@ -324,6 +327,9 @@ packages: '@rbxts/react@0.4.0': resolution: {integrity: sha512-yhqXzfH5YpwfZyiWipQMfQsI//2sC86Jqn2rMkP+l1y4CfhCvoYxpaI5qS7Xum9F+DsBHiwJNeUxm2V2LzXW0A==} + '@rbxts/services@1.5.4': + resolution: {integrity: sha512-Klh+gRIT8zy3xRTX1YD6FZ9nAMzkzPLTHmciigt59PEF7PJXo31CF0IU0RegQ7VSMrz1iOnXwxbIwy3htcMfOA==} + '@rbxts/types@1.0.791': resolution: {integrity: sha512-kKivHGm9n12L7AlKUH7KfBI7dJTZaWs21rqTpzhcknn7mqjpkZxcn6RDaIIFl3x7mMnvUsJ5amVL25zd7xkTug==} @@ -2380,6 +2386,8 @@ snapshots: dependencies: '@rbxts/react-vendor': 0.4.0 + '@rbxts/services@1.5.4': {} + '@rbxts/types@1.0.791': {} '@rbxts/ui-labs@2.1.1': {} diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx index c9afb36..389bc88 100644 --- a/src/components/Slider/index.tsx +++ b/src/components/Slider/index.tsx @@ -4,6 +4,7 @@ import { Box } from 'components/Box'; import { ProgressBar, type ProgressBarProps } from 'components/ProgressBar'; import { useTheme } from 'components/ThemeProvider'; import { mergeFunctions } from 'helpers'; +import { setMouseIcon, SystemCursors } from 'utils'; import type { PropsWithChildren } from '@rbxts/react'; import type { BoxProps } from 'components/Box'; @@ -65,7 +66,11 @@ export function Slider(componentProps: PropsWithChildren) { if (sliderChanged) sliderChanged(newValue); }, - MouseButton1Up: () => setIsDragging(false), + MouseButton1Up: () => { + setIsDragging(false); + + setMouseIcon(SystemCursors.Arrow); + }, }} Selectable={false} Size={UDim2.fromOffset(math.huge, math.huge)} @@ -97,12 +102,24 @@ export function Slider(componentProps: PropsWithChildren) { Event={{ ...handleProps?.Event, - MouseButton1Down: mergeFunctions< - (rbx: TextButton, x: number, y: number) => unknown - >(() => { + MouseButton1Down: mergeFunctions(() => { if (isDragging) return; setIsDragging(true); + + setMouseIcon(SystemCursors.ClosedHand); }, handleProps?.Event?.MouseButton1Down), + + MouseEnter: mergeFunctions(() => { + if (isDragging) return; + + setMouseIcon(SystemCursors.OpenHand); + }, handleProps?.Event?.MouseEnter), + + MouseLeave: mergeFunctions(() => { + if (isDragging) return; + + setMouseIcon(SystemCursors.Arrow); + }, handleProps?.Event?.MouseEnter), }} /> diff --git a/src/index.ts b/src/index.ts index 502c542..46d8fff 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,10 +1,13 @@ export * from 'components/Box'; export * from 'components/Button'; export * from 'components/Input'; +export * from 'components/ProgressBar'; export * from 'components/SecondaryButton'; export * from 'components/Sheet'; +export * from 'components/Slider'; export * from 'components/ThemeProvider'; export * from 'components/Typography'; export * from 'helpers'; export * from 'themes'; +export * from 'utils'; diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..3318f38 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1 @@ +export * from './setMouseIcon'; diff --git a/src/utils/setMouseIcon.ts b/src/utils/setMouseIcon.ts new file mode 100644 index 0000000..8593579 --- /dev/null +++ b/src/utils/setMouseIcon.ts @@ -0,0 +1,31 @@ +import { Players, UserInputService } from '@rbxts/services'; + +export enum SystemCursors { + Arrow = 'rbxasset://SystemCursors/Arrow', + PointingHand = 'rbxasset://SystemCursors/PointingHand', + OpenHand = 'rbxasset://SystemCursors/OpenHand', + ClosedHand = 'rbxasset://SystemCursors/ClosedHand', + IBeam = 'rbxasset://SystemCursors/IBeam', + SizeNS = 'rbxasset://SystemCursors/SizeNS', + SizeEW = 'rbxasset://SystemCursors/SizeEW', + SizeNESW = 'rbxasset://SystemCursors/SizeNESW', + SizeNWSE = 'rbxasset://SystemCursors/SizeNWSE', + SizeAll = 'rbxasset://SystemCursors/SizeAll', + SplitNS = 'rbxasset://SystemCursors/SplitNS', + SplitEW = 'rbxasset://SystemCursors/SplitEW', + Forbidden = 'rbxasset://SystemCursors/Forbidden', + Wait = 'rbxasset://SystemCursors/Wait', + Busy = 'rbxasset://SystemCursors/Busy', + Cross = 'rbxasset://SystemCursors/Cross', +} + +export function setMouseIcon(icon: string): boolean { + const localPlayer = Players.FindFirstChild('LocalPlayer') as + | Player + | undefined; + if (!localPlayer) return false; + + UserInputService.MouseIcon = icon; + + return true; +}