Skip to content

Commit 3c6292b

Browse files
PepeElToro41PepeElToro41
committed
formatting
1 parent 5399077 commit 3c6292b

File tree

1 file changed

+75
-27
lines changed
  • src/UI/StoryControls/Controls/Advanced/Slider

1 file changed

+75
-27
lines changed

‎src/UI/StoryControls/Controls/Advanced/Slider/index.tsx

+75-27
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,34 @@
1-
import React, { useBinding, useCallback, useEffect, useMemo, useRef, useState } from "@rbxts/react";
1+
import {
2+
Instant,
3+
Spring,
4+
useMotor,
5+
useUpdateEffect
6+
} from "@rbxts/pretty-react-hooks";
7+
import React, {
8+
useBinding,
9+
useCallback,
10+
useEffect,
11+
useMemo,
12+
useRef,
13+
useState
14+
} from "@rbxts/react";
15+
import { RunService } from "@rbxts/services";
216
import { AdvancedTypes } from "@rbxts/ui-labs/src/ControlTypings/Advanced";
317
import { useTheme } from "Hooks/Reflex/Use/Theme";
18+
import { useTween } from "Hooks/Utils/Tween";
419
import FrameFill from "UI/Holders/FrameFill";
520
import Corner from "UI/Styles/Corner";
621
import { Div } from "UI/Styles/Div";
722
import LeftList from "UI/Styles/List/LeftList";
823
import Padding from "UI/Styles/Padding";
24+
import Rounder from "UI/Styles/Rounder";
925
import Text from "UI/Styles/Text";
1026
import SlideDrag from "UI/Utils/Draggers/SlideDrag";
1127
import InputEntry from "UI/Utils/InputEntry";
1228
import { Decoders } from "UI/Utils/InputEntry/Decoders";
1329
import { Filters } from "UI/Utils/InputEntry/Filters";
14-
import Mark from "./Mark";
15-
import Rounder from "UI/Styles/Rounder";
16-
import { Instant, Spring, useMotor, useUpdateEffect } from "@rbxts/pretty-react-hooks";
17-
import { useTween } from "Hooks/Utils/Tween";
18-
import { RunService } from "@rbxts/services";
1930
import { Parsers } from "UI/Utils/InputEntry/Parsers";
31+
import Mark from "./Mark";
2032

2133
const MIN_MARK_SEPARATION = 15;
2234

@@ -32,7 +44,11 @@ function GetPercent(control: AdvancedTypes.Slider, current: number) {
3244
return (current - control.Min) / gap;
3345
}
3446

35-
const ACTIVE_INFO = new TweenInfo(0.08, Enum.EasingStyle.Linear, Enum.EasingDirection.Out);
47+
const ACTIVE_INFO = new TweenInfo(
48+
0.08,
49+
Enum.EasingStyle.Linear,
50+
Enum.EasingDirection.Out
51+
);
3652

3753
function SliderControl(props: ControlElementProps<AdvancedTypes.Slider>) {
3854
const theme = useTheme();
@@ -42,7 +58,10 @@ function SliderControl(props: ControlElementProps<AdvancedTypes.Slider>) {
4258
const [percent, setPercent] = useMotor(GetPercent(control, props.Current));
4359
const [amount, setAmount] = useState(props.Current);
4460
const [markVisible, setMarkVisible] = useState(false);
45-
const [sliderState, setSliderState] = useState({ Hovering: false, Dragging: false });
61+
const [sliderState, setSliderState] = useState({
62+
Hovering: false,
63+
Dragging: false
64+
});
4665
const [handleSize, tweenHandleSize] = useTween(ACTIVE_INFO, 0);
4766
const sliderRef = useRef<Frame>();
4867

@@ -60,7 +79,9 @@ function SliderControl(props: ControlElementProps<AdvancedTypes.Slider>) {
6079

6180
const markAmount = CalculateMarks(control);
6281
for (let i = 0; i < markAmount - 1; i++) {
63-
const newMark = <Mark Amount={markAmount} Position={i + 1} Percent={percent} />;
82+
const newMark = (
83+
<Mark Amount={markAmount} Position={i + 1} Percent={percent} />
84+
);
6485
allMarks.push(newMark);
6586
}
6687
return allMarks;
@@ -117,35 +138,45 @@ function SliderControl(props: ControlElementProps<AdvancedTypes.Slider>) {
117138
props.Apply(finalAmount);
118139
}
119140
},
120-
[control.Min, control.Max, control.Step, props.Apply, amount],
141+
[control.Min, control.Max, control.Step, props.Apply, amount]
121142
);
122143
const SetPercent = useCallback(
123144
(percent: number) => {
124145
const amount = percent * (control.Max - control.Min) + control.Min;
125146
ApplyAmount(amount);
126147
},
127-
[ApplyAmount],
148+
[ApplyAmount]
149+
);
150+
const OnStateUpdated = useCallback(
151+
(state: { hovering: boolean; dragging: boolean }) => {
152+
setSliderState({ Hovering: state.hovering, Dragging: state.dragging });
153+
},
154+
[]
128155
);
129-
const OnStateUpdated = useCallback((state: { hovering: boolean; dragging: boolean }) => {
130-
setSliderState({ Hovering: state.hovering, Dragging: state.dragging });
131-
}, []);
132156
const OnInputAbsoluteSizeChanged = useCallback(
133157
(entry: Frame) => {
134158
if (sliderState.Dragging) return;
135159
setInputSize(entry.AbsoluteSize.X);
136160
},
137-
[sliderState.Dragging],
161+
[sliderState.Dragging]
138162
);
139163

140164
return (
141165
<Div>
142166
<Padding PaddingY={4} />
143-
<LeftList VerticalAlignment={Enum.VerticalAlignment.Center} Padding={new UDim(0, 7)} />
167+
<LeftList
168+
VerticalAlignment={Enum.VerticalAlignment.Center}
169+
Padding={new UDim(0, 7)}
170+
/>
144171
<Div
145172
AutomaticSize={sliderState.Dragging ? undefined : Enum.AutomaticSize.X}
146-
Size={sliderState.Dragging ? inputSize.map((offset) => new UDim2(0, offset, 1, 0)) : UDim2.fromScale(0, 1)}
173+
Size={
174+
sliderState.Dragging
175+
? inputSize.map((offset) => new UDim2(0, offset, 1, 0))
176+
: UDim2.fromScale(0, 1)
177+
}
147178
Change={{
148-
AbsoluteSize: OnInputAbsoluteSizeChanged,
179+
AbsoluteSize: OnInputAbsoluteSizeChanged
149180
}}
150181
>
151182
<InputEntry
@@ -156,17 +187,28 @@ function SliderControl(props: ControlElementProps<AdvancedTypes.Slider>) {
156187
Filters={[Filters.NumberOnly]}
157188
TextboxProps={{
158189
TextSize: 12,
159-
Size: sliderState.Dragging ? UDim2.fromScale(1, 1) : UDim2.fromScale(0, 1),
160-
AutomaticSize: sliderState.Dragging ? undefined : Enum.AutomaticSize.X,
161-
TextXAlignment: Enum.TextXAlignment.Center,
190+
Size: sliderState.Dragging
191+
? UDim2.fromScale(1, 1)
192+
: UDim2.fromScale(0, 1),
193+
AutomaticSize: sliderState.Dragging
194+
? undefined
195+
: Enum.AutomaticSize.X,
196+
TextXAlignment: Enum.TextXAlignment.Center
162197
}}
163198
HolderProps={{
164199
LayoutOrder: 1,
165-
Size: sliderState.Dragging ? UDim2.fromScale(1, 1) : UDim2.fromScale(0, 1),
166-
AutomaticSize: sliderState.Dragging ? undefined : Enum.AutomaticSize.X,
200+
Size: sliderState.Dragging
201+
? UDim2.fromScale(1, 1)
202+
: UDim2.fromScale(0, 1),
203+
AutomaticSize: sliderState.Dragging
204+
? undefined
205+
: Enum.AutomaticSize.X
167206
}}
168207
>
169-
<uisizeconstraint MaxSize={new Vector2(120, math.huge)} MinSize={new Vector2(35, 0)} />
208+
<uisizeconstraint
209+
MaxSize={new Vector2(120, math.huge)}
210+
MinSize={new Vector2(35, 0)}
211+
/>
170212
</InputEntry>
171213
</Div>
172214
<FrameFill FillDir="X" FrameProps={{ LayoutOrder: 2 }}>
@@ -179,7 +221,11 @@ function SliderControl(props: ControlElementProps<AdvancedTypes.Slider>) {
179221
TextXAlignment={Enum.TextXAlignment.Right}
180222
Position={UDim2.fromScale(0, 0.5)}
181223
/>
182-
<Div AnchorPoint={new Vector2(0.5, 0.5)} Position={UDim2.fromScale(0.5, 0.5)} Size={new UDim2(1, -75, 1, 0)}>
224+
<Div
225+
AnchorPoint={new Vector2(0.5, 0.5)}
226+
Position={UDim2.fromScale(0.5, 0.5)}
227+
Size={new UDim2(1, -75, 1, 0)}
228+
>
183229
<frame
184230
key="Slide"
185231
AnchorPoint={new Vector2(0.5, 0.5)}
@@ -197,7 +243,7 @@ function SliderControl(props: ControlElementProps<AdvancedTypes.Slider>) {
197243
BackgroundTransparency: 1,
198244
Position: UDim2.fromScale(0.5, 0.5),
199245
Size: new UDim2(1, 0, 0, 15),
200-
ZIndex: 3,
246+
ZIndex: 3
201247
}}
202248
SlideDir="X"
203249
PercentApply={SetPercent}
@@ -216,7 +262,9 @@ function SliderControl(props: ControlElementProps<AdvancedTypes.Slider>) {
216262
BackgroundColor3={theme.StorySelected.Color}
217263
BorderSizePixel={0}
218264
Position={new UDim2(1, 0, 0.5, 0)}
219-
Size={handleSize.map((a) => UDim2.fromOffset(10 + a * 3, 10 + a * 3))}
265+
Size={handleSize.map((a) =>
266+
UDim2.fromOffset(10 + a * 3, 10 + a * 3)
267+
)}
220268
>
221269
<Rounder />
222270
</frame>

0 commit comments

Comments
 (0)