Browse Source

Add more test options for slider

Test slider tick marks for out of bounds.
pull/1/head
TheoryOfNekomata 1 year ago
parent
commit
6833054b63
2 changed files with 58 additions and 26 deletions
  1. +39
    -25
      packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx
  2. +19
    -1
      packages/web-kitchensink-reactnext/src/pages/categories/number/index.tsx

+ 39
- 25
packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx View File

@@ -167,12 +167,17 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
tickMarkLabel.style.writingMode = 'sideways-lr';
}
}
console.log(tickMarkWrapper);
});
}
}, [ref, orient, browser]);

const block = typeof length === 'string' && length.trim() === '100%';
const minValue = Number(min);
const maxValue = Number(max);

if (minValue >= maxValue) {
return null;
}

return (
<>
@@ -194,7 +199,6 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
orient !== 'vertical' && 'inline-block min-h-[1rem]',
orient === 'vertical' && 'inline-block min-w-[1rem]',
orient !== 'vertical' && !block && 'min-w-[16rem]',
//orient === 'vertical' && 'inline-block min-h-[16rem] min-w-[1rem]',
)}
style={style}
>
@@ -214,8 +218,8 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
<input
{...etcProps}
ref={ref}
min={min}
max={max}
min={minValue}
max={maxValue}
type="range"
list={children ? tickMarkId : undefined}
className={clsx(
@@ -228,27 +232,37 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
{Array.isArray(children) && (
<div className="select-none">
<div className="relative w-full h-full">
{children.map((c) => (
<div
key={c.props.value}
className={clsx(
styles['tick-mark'],
'absolute w-full h-full box-border',
)}
data-offset={`${(Number(c.props.value) - Number(min)) / (Number(max) - Number(min)) * 100}%`}
>
<div
className="flex h-full text-xs items-center justify-between"
>
<div
className="bg-current"
/>
<div>
{c.props.children}
</div>
</div>
</div>
))}
{
children
.filter((c) => {
const value = Number(c.props.value);
return minValue <= value && value <= maxValue;
})
.map((c) => {
const value = Number(c.props.value);
return (
<div
key={c.props.value}
className={clsx(
styles['tick-mark'],
'absolute w-full h-full box-border',
)}
data-offset={`${(value - minValue) / (maxValue - minValue) * 100}%`}
>
<div
className="flex h-full text-xs items-center justify-between"
>
<div
className="bg-current"
/>
<div>
{c.props.children}
</div>
</div>
</div>
)
})
}
</div>
</div>
)}


+ 19
- 1
packages/web-kitchensink-reactnext/src/pages/categories/number/index.tsx View File

@@ -28,10 +28,19 @@ const NumberPage: NextPage = () => {
min={-100}
max={100}
>
<option value={-100}>
Lowest
</option>
<option value={25}>
25
日本語
</option>
<option value={50} />
<option value={100}>
Highest
</option>
<option value={200}>
Out of bounds
</option>
</TesseractNumber.Slider>
</Subsection>
<Subsection title="Vertical">
@@ -40,10 +49,19 @@ const NumberPage: NextPage = () => {
max={100}
orient="vertical"
>
<option value={-100}>
Lowest
</option>
<option value={25}>
日本語
</option>
<option value={50} />
<option value={100}>
Highest
</option>
<option value={200}>
Out of bounds
</option>
</TesseractNumber.Slider>
A
</Subsection>


Loading…
Cancel
Save