TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(components): Adds InputNumber component and 4d panel updates (#4874)

Browse Source 
Co-authored-by: sedghi <ar.sedghi@gmail.com>
This commit is contained in:
Dan Rukasandsedghi authored and GitHub committed 2025-04-01 09:30:32 -04:00
1 parent c4045251fb
commit b7419fb6a1
15 files changed
+1620 -304
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/docs/package.json
+1
View File
@@ -60,6 +60,7 @@
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@radix-ui/react-hover-card":"^1.1.6",
"@svgr/webpack": "^5.5.0",
"@types/react": "^18.2.29",
"autoprefixer": "^10.4.20",
platform/docs/src/pages/components/NumericMetaShowcase.tsx
+133
View File
@@ -9,6 +9,7 @@ import ShowcaseRow from './ShowcaseRow';
export default function NumericShowcase() {
const [controlledValue, setControlledValue] = useState(0);
const [controlledValues, setControlledValues] = useState([0, 100] as [number, number]);
const [dimensionGroupNumber, setDimensionGroupNumber] = useState(1);
return (
<div className="space-y-8">
@@ -87,6 +88,108 @@ export default function NumericShowcase() {
</div>
</ShowcaseRow>
{/* Stepper Controls */}
<ShowcaseRow
title="Numeric - Stepper Controls"
description="Number input with increment/decrement controls in horizontal or vertical layout"
code={`
// For controlled component
const [dimensionGroupNumber, setDimensionGroupNumber] = useState(1);
<Numeric.Container
mode="stepper"
value={dimensionGroupNumber}
onChange={val => setDimensionGroupNumber(val as number)}
min={1}
max={5}
step={1}
>
<div className="flex flex-col items-center">
<Numeric.NumberStepper className="w-[58px]" direction="horizontal"/>
<Numeric.Label className="mt-1">Frame</Numeric.Label>
</div>
</Numeric.Container>
<Numeric.Container
mode="stepper"
min={0}
max={100}
step={1}
defaultValue={50}
>
<div className="flex items-center space-x-2">
<Numeric.Label>Opacity</Numeric.Label>
<Numeric.NumberStepper className="w-[58px]" direction="horizontal"/>
</div>
</Numeric.Container>
<Numeric.Container
mode="stepper"
min={-10}
max={10}
step={0.1}
defaultValue={0}
>
<div className="flex items-center space-x-2">
<Numeric.Label>Zoom:</Numeric.Label>
<Numeric.NumberStepper className="w-[65px]" direction="vertical"/>
</div>
</Numeric.Container>`}
>
<div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
<Numeric.Container
mode="stepper"
value={dimensionGroupNumber}
onChange={val => setDimensionGroupNumber(val as number)}
min={1}
max={5}
step={1}
>
<div className="flex flex-col items-center">
<Numeric.NumberStepper
className="flex w-[78px]"
direction="horizontal"
>
<span className="text-muted-foreground text-xs">FPS</span>
</Numeric.NumberStepper>
<Numeric.Label className="mt-1">Frame</Numeric.Label>
</div>
</Numeric.Container>
<Numeric.Container
mode="stepper"
min={0}
max={100}
step={1}
defaultValue={50}
>
<div className="flex items-center space-x-2">
<Numeric.Label>Opacity</Numeric.Label>
<Numeric.NumberStepper
className="w-[58px]"
direction="horizontal"
/>
</div>
</Numeric.Container>
<Numeric.Container
mode="stepper"
min={-10}
max={10}
step={0.1}
defaultValue={0}
>
<div className="flex items-center space-x-2">
<Numeric.NumberStepper
className="w-[65px]"
direction="vertical"
/>
<Numeric.Label>Zoom</Numeric.Label>
</div>
</Numeric.Container>
</div>
</ShowcaseRow>
{/* Single Range Slider */}
<ShowcaseRow
title="Numeric - Single Range"
@@ -268,6 +371,20 @@ const [controlledValues, setControlledValues] = useState<[number, number]>([0, 1
<Numeric.NumberInput />
</Numeric.Container>
<Numeric.Container
mode="stepper"
min={-5}
max={5}
step={0.5}
defaultValue={0}
>
<div className="flex items-center justify-between">
<Numeric.Label>Offset</Numeric.Label>
<Numeric.NumberStepper className="w-[58px]">
</Numeric.NumberStepper>
</div>
</Numeric.Container>
<Numeric.Container
mode="singleRange"
min={0}
@@ -302,6 +419,22 @@ const [controlledValues, setControlledValues] = useState<[number, number]>([0, 1
<Numeric.NumberInput />
</Numeric.Container>
<Numeric.Container
mode="stepper"
min={-5}
max={5}
step={0.5}
defaultValue={0}
>
<div className="flex items-center justify-between">
<Numeric.Label>Offset</Numeric.Label>
<Numeric.NumberStepper
className="w-[58px]"
direction="horizontal"
/>
</div>
</Numeric.Container>
<Numeric.Container
mode="singleRange"
min={0}
platform/docs/yarn.lock
+71
View File
@@ -2527,6 +2527,13 @@
dependencies:
"@radix-ui/react-primitive" "2.0.1"
"@radix-ui/react-arrow@1.1.2":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz#30c0d574d7bb10eed55cd7007b92d38b03c6b2ab"
integrity sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==
dependencies:
"@radix-ui/react-primitive" "2.0.2"
"@radix-ui/react-checkbox@^1.1.1":
version "1.1.3"
resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.1.3.tgz#0e2ab913fddf3c88603625f7a9457d73882c8a32"
@@ -2611,6 +2618,17 @@
"@radix-ui/react-use-callback-ref" "1.1.0"
"@radix-ui/react-use-escape-keydown" "1.1.0"
"@radix-ui/react-dismissable-layer@1.1.5":
version "1.1.5"
resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz#96dde2be078c694a621e55e047406c58cd5fe774"
integrity sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==
dependencies:
"@radix-ui/primitive" "1.1.1"
"@radix-ui/react-compose-refs" "1.1.1"
"@radix-ui/react-primitive" "2.0.2"
"@radix-ui/react-use-callback-ref" "1.1.0"
"@radix-ui/react-use-escape-keydown" "1.1.0"
"@radix-ui/react-dropdown-menu@^2.1.1":
version "2.1.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.4.tgz#5e1f453296dd9ae99224a26c36851832d26cf507"
@@ -2638,6 +2656,21 @@
"@radix-ui/react-primitive" "2.0.1"
"@radix-ui/react-use-callback-ref" "1.1.0"
"@radix-ui/react-hover-card@^1.1.6":
version "1.1.6"
resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-1.1.6.tgz#94fb87c047e1bb3bfd70439cf7ee48165ea4efa5"
integrity sha512-E4ozl35jq0VRlrdc4dhHrNSV0JqBb4Jy73WAhBEK7JoYnQ83ED5r0Rb/XdVKw89ReAJN38N492BAPBZQ57VmqQ==
dependencies:
"@radix-ui/primitive" "1.1.1"
"@radix-ui/react-compose-refs" "1.1.1"
"@radix-ui/react-context" "1.1.1"
"@radix-ui/react-dismissable-layer" "1.1.5"
"@radix-ui/react-popper" "1.2.2"
"@radix-ui/react-portal" "1.1.4"
"@radix-ui/react-presence" "1.1.2"
"@radix-ui/react-primitive" "2.0.2"
"@radix-ui/react-use-controllable-state" "1.1.0"
"@radix-ui/react-icons@^1.3.0":
version "1.3.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.2.tgz#09be63d178262181aeca5fb7f7bc944b10a7f441"
@@ -2718,6 +2751,22 @@
"@radix-ui/react-use-size" "1.1.0"
"@radix-ui/rect" "1.1.0"
"@radix-ui/react-popper@1.2.2":
version "1.2.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.2.tgz#d2e1ee5a9b24419c5936a1b7f6f472b7b412b029"
integrity sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==
dependencies:
"@floating-ui/react-dom" "^2.0.0"
"@radix-ui/react-arrow" "1.1.2"
"@radix-ui/react-compose-refs" "1.1.1"
"@radix-ui/react-context" "1.1.1"
"@radix-ui/react-primitive" "2.0.2"
"@radix-ui/react-use-callback-ref" "1.1.0"
"@radix-ui/react-use-layout-effect" "1.1.0"
"@radix-ui/react-use-rect" "1.1.0"
"@radix-ui/react-use-size" "1.1.0"
"@radix-ui/rect" "1.1.0"
"@radix-ui/react-portal@1.1.3":
version "1.1.3"
resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.3.tgz#b0ea5141103a1671b715481b13440763d2ac4440"
@@ -2726,6 +2775,14 @@
"@radix-ui/react-primitive" "2.0.1"
"@radix-ui/react-use-layout-effect" "1.1.0"
"@radix-ui/react-portal@1.1.4":
version "1.1.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.4.tgz#ff5401ff63c8a825c46eea96d3aef66074b8c0c8"
integrity sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==
dependencies:
"@radix-ui/react-primitive" "2.0.2"
"@radix-ui/react-use-layout-effect" "1.1.0"
"@radix-ui/react-presence@1.1.2":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.2.tgz#bb764ed8a9118b7ec4512da5ece306ded8703cdc"
@@ -2741,6 +2798,13 @@
dependencies:
"@radix-ui/react-slot" "1.1.1"
"@radix-ui/react-primitive@2.0.2":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz#ac8b7854d87b0d7af388d058268d9a7eb64ca8ef"
integrity sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==
dependencies:
"@radix-ui/react-slot" "1.1.2"
"@radix-ui/react-roving-focus@1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz#3b3abb1e03646937f28d9ab25e96343667ca6520"
@@ -2829,6 +2893,13 @@
dependencies:
"@radix-ui/react-compose-refs" "1.1.1"
"@radix-ui/react-slot@1.1.2":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.2.tgz#daffff7b2bfe99ade63b5168407680b93c00e1c6"
integrity sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==
dependencies:
"@radix-ui/react-compose-refs" "1.1.1"
"@radix-ui/react-switch@^1.1.0":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.1.2.tgz#61323f4cccf25bf56c95fceb3b56ce1407bc9aec"