Skip to content

Commit

Permalink
Vote 2.1: Fixed min/max, styling and layout
Browse files Browse the repository at this point in the history
  • Loading branch information
dkildar committed Mar 29, 2024
1 parent e263252 commit ce2ad20
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 5 deletions.
5 changes: 5 additions & 0 deletions src/common/components/decks/columns/helpers/_helpers.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@
.estimated {
grid-area: price;
text-align: left;
position: absolute;
top: 1.5rem;
right: 7.5rem;
z-index: 20;
font-size: .675rem;
}

.percentage {
Expand Down
6 changes: 5 additions & 1 deletion src/common/components/entry-vote-btn/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,11 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
<FormattedCurrency {...this.props} value={this.estimate(downSliderVal)} fixAt={3} />
</div>
<div className="slider slider-down">
<InputVote value={downSliderVal} setValue={(x) => this.downSliderChanged(x)} />
<InputVote
mode="negative"
value={downSliderVal}
setValue={(x) => this.downSliderChanged(x)}
/>
</div>
<div className="space" />
<div className="percentage" />
Expand Down
38 changes: 34 additions & 4 deletions src/common/features/ui/input/input-vote.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,22 @@
import { Input } from "@ui/input/form-controls/input";
import React, { MouseEvent, PropsWithChildren, TouchEvent, useRef, useState } from "react";
import React, {
MouseEvent,
PropsWithChildren,
TouchEvent,
useEffect,
useRef,
useState
} from "react";
import { UilArrowDown, UilArrowUp } from "@iconscout/react-unicons";
import "./_input-vote.scss";
import { InputGroup } from "@ui/input/input-group";
import useInterval from "react-use/lib/useInterval";
import { classNameObject } from "../../../helper/class-name-object";

interface Props {
value: number;
setValue: (v: number) => void;
mode?: "positive" | "negative";
}

function ArrowButton({ children, onClick }: PropsWithChildren<{ onClick: () => void }>) {
Expand All @@ -29,12 +38,22 @@ function ArrowButton({ children, onClick }: PropsWithChildren<{ onClick: () => v
);
}

export function InputVote({ value, setValue }: Props) {
export function InputVote({ value, setValue, mode = "positive" }: Props) {
const mouseDownInitiatedRef = useRef(false);

const [startPosition, setStartPosition] = useState(0);
const [originalValue, setOriginalValue] = useState(0);

useEffect(() => {
if (value < 0) {
setValue(0);
} else if (value > 100) {
setValue(100);
} else {
setValue(value);
}
}, [value]);

const onTouchMove = (e: TouchEvent) => {
const touch = e.touches.item(0);
if (touch) {
Expand Down Expand Up @@ -69,11 +88,22 @@ export function InputVote({ value, setValue }: Props) {
onMouseUp={(e) => (mouseDownInitiatedRef.current = false)}
>
<InputGroup append="%" className="relative z-10">
<Input type="number" step="0.1" value={value} onChange={(e) => setValue(+e.target.value)} />
<Input
min={0}
max={100}
type="number"
step="0.1"
value={value}
onChange={(e) => setValue(+e.target.value)}
/>
</InputGroup>

<div
className="absolute bg-blue-dark-sky bg-opacity-25 top-[1px] left-[1px] bottom-[1px]"
className={classNameObject({
"absolute bg-opacity-25 top-[1px] left-[1px] bottom-[1px]": true,
"bg-blue-dark-sky": mode === "positive",
"bg-red": mode === "negative"
})}
style={{
width: `${value * 0.86}%`
}}
Expand Down

0 comments on commit ce2ad20

Please sign in to comment.