From 4079f88e40f3ba50eb7c7584aa66023ba20ee183 Mon Sep 17 00:00:00 2001 From: Valentin Chanas Date: Mon, 25 Nov 2024 19:29:02 +0100 Subject: [PATCH 1/2] core: slider component Signed-off-by: Valentin Chanas --- ui-core/src/components/inputs/Slider.tsx | 57 +++++++++++++++++++ ui-core/src/stories/Slider.stories.tsx | 59 +++++++++++++++++++ ui-core/src/stories/stories.css | 28 +++++++++ ui-core/src/styles/inputs/index.css | 1 + ui-core/src/styles/inputs/slider.css | 72 ++++++++++++++++++++++++ 5 files changed, 217 insertions(+) create mode 100644 ui-core/src/components/inputs/Slider.tsx create mode 100644 ui-core/src/stories/Slider.stories.tsx create mode 100644 ui-core/src/styles/inputs/slider.css diff --git a/ui-core/src/components/inputs/Slider.tsx b/ui-core/src/components/inputs/Slider.tsx new file mode 100644 index 00000000..905ca9a7 --- /dev/null +++ b/ui-core/src/components/inputs/Slider.tsx @@ -0,0 +1,57 @@ +import React, { useState } from 'react'; +import type { ChangeEvent, MouseEvent, InputHTMLAttributes } from 'react'; + +import cx from 'classnames'; + +export type SliderProps = InputHTMLAttributes & { + onChangeCommitted?: (e: MouseEvent) => void; +}; + +// onChange returns an event or number +const Slider = ({ + id, + value: initialValue, + min = 0, + max = 100, + step = 1, + onChange, + onChangeCommitted, + disabled, + ...rest +}: SliderProps) => { + const [value, setValue] = useState( + initialValue !== undefined ? Number(initialValue) : Number(min) + ); + + const handleChange = (e: ChangeEvent) => { + const newValue = Number(e.target.value); + setValue(newValue); + onChange?.(e); + }; + + const handleMouseUp = (e: MouseEvent) => { + if (onChangeCommitted) { + onChangeCommitted(e); + } + }; + + return ( +
+ +
+ ); +}; + +export default Slider; diff --git a/ui-core/src/stories/Slider.stories.tsx b/ui-core/src/stories/Slider.stories.tsx new file mode 100644 index 00000000..ca0a719e --- /dev/null +++ b/ui-core/src/stories/Slider.stories.tsx @@ -0,0 +1,59 @@ +import React, { useState } from 'react'; + +import { type Meta, type StoryObj } from '@storybook/react'; + +import Slider, { type SliderProps } from '../components/inputs/Slider'; + +import './stories.css'; + +const Wrapper = (props: SliderProps) => { + const [value, setValue] = useState(0); + const [committedValue, setCommittedValue] = useState(0); + + return ( +
+
+
Value: {value}
+
Committed Value: {committedValue}
+
+
+ { + setValue(Number(e.target.value)); + }} + onChangeCommitted={(e) => { + setCommittedValue(Number(e.currentTarget.value)); + }} + {...props} + /> +
+
+ ); +}; + +const meta: Meta = { + component: Wrapper, + args: { + disabled: false, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], + title: 'Core/Slider', + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Value: Story = { + args: { + disabled: false, + }, +}; diff --git a/ui-core/src/stories/stories.css b/ui-core/src/stories/stories.css index 6da884a7..db71772d 100644 --- a/ui-core/src/stories/stories.css +++ b/ui-core/src/stories/stories.css @@ -3,3 +3,31 @@ width: 300px; } } + +.wrapper-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 50px; + text-align: center; +} + +.values-container { + display: flex; + gap: 20px; + margin-bottom: 40px; +} + +.value-box { + padding: 20px; + font-size: 18px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #f9f9f9; +} + +.slider-container { + width: 100%; + max-width: 600px; +} diff --git a/ui-core/src/styles/inputs/index.css b/ui-core/src/styles/inputs/index.css index afc3946d..c436f498 100644 --- a/ui-core/src/styles/inputs/index.css +++ b/ui-core/src/styles/inputs/index.css @@ -13,3 +13,4 @@ @import './tokenInput.css'; @import './tolerancePicker.css'; @import './comboBox.css'; +@import './slider.css'; diff --git a/ui-core/src/styles/inputs/slider.css b/ui-core/src/styles/inputs/slider.css new file mode 100644 index 00000000..7a8798d1 --- /dev/null +++ b/ui-core/src/styles/inputs/slider.css @@ -0,0 +1,72 @@ +.range-wrapper { + margin: 50px; + width: 80%; + height: 10px; + + .range-slider { + -webkit-appearance: none; + appearance: none; + height: 10px; + width: 100%; + + &::-webkit-slider-runnable-track { + -webkit-appearance: none; + appearance: none; + height: 4px; + border-radius: 2px; + box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.25) inset; + background-color: rgba(0, 0, 0, 0.05); + } + + &::-moz-range-track { + -webkit-appearance: none; + appearance: none; + height: 4px; + border-radius: 2px; + box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.25) inset; + background-color: rgba(0, 0, 0, 0.05); + } + + &::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 10px; + height: 10px; + margin-top: -3px; + border-radius: 50%; + border: 0.5px solid rgba(73, 70, 65, 1); + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); + opacity: 1; + background-color: rgba(255, 255, 255, 1); + } + + &::-moz-range-thumb { + -webkit-appearance: none; + appearance: none; + width: 10px; + height: 10px; + margin-top: -3px; + border-radius: 50%; + border: 0.5px solid rgba(73, 70, 65, 1); + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); + opacity: 1; + background-color: rgba(255, 255, 255, 1); + } + } + + .range-slider-disabled { + &::-webkit-slider-thumb { + border: 0.5px solid rgb(182, 179, 175); + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + opacity: 1; + background-color: rgba(255, 255, 255, 1); + } + + &::-moz-range-thumb { + border: 0.5px solid rgb(182, 179, 175); + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + opacity: 1; + background-color: rgba(255, 255, 255, 1); + } + } +} From 235fe98de2a5babbc7029d27e780cbf6e0379e2a Mon Sep 17 00:00:00 2001 From: Valentin Chanas Date: Sun, 1 Dec 2024 12:58:35 +0100 Subject: [PATCH 2/2] sa --- storybook/.storybook/main.ts | 14 +++++++------- .../src/hooks/useMouseInteractions.ts | 14 ++++++++------ 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/storybook/.storybook/main.ts b/storybook/.storybook/main.ts index e92340f8..8bc22352 100644 --- a/storybook/.storybook/main.ts +++ b/storybook/.storybook/main.ts @@ -24,13 +24,13 @@ const config: StorybookConfig = { }, staticDirs: ['../public'], logLevel: 'debug', - async viteFinal(config) { - return mergeConfig(config, { - resolve: { - preserveSymlinks: true, - }, - }); - }, + // async viteFinal(config) { + // return mergeConfig(config, { + // resolve: { + // preserveSymlinks: true, + // }, + // }); + // }, }; export default config; diff --git a/ui-spacetimechart/src/hooks/useMouseInteractions.ts b/ui-spacetimechart/src/hooks/useMouseInteractions.ts index 658766f7..d407763d 100644 --- a/ui-spacetimechart/src/hooks/useMouseInteractions.ts +++ b/ui-spacetimechart/src/hooks/useMouseInteractions.ts @@ -58,13 +58,15 @@ export function useMouseInteractions( const wheelHandler: (event: WheelEvent) => void = useCallback( (event: WheelEvent) => { const { onZoom } = handlersRef.current; + console.log('zoom'); if (onZoom && dom) - onZoom({ - delta: getEventWheelDelta(event), - position: getEventPosition(event, dom), - event, - context: contextRef.current, - }); + console.log(getEventWheelDelta(event), getEventPosition(event, dom)) || + onZoom({ + delta: getEventWheelDelta(event), + position: getEventPosition(event, dom), + event, + context: contextRef.current, + }); }, [dom] );