tesseract-design
/
tesseract
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Update options display for slider 

Use only option elements for slider tick marks.
pull/1/head
TheoryOfNekomata 1 year ago
parent
6833054b63
commit
1b2b5d9f9b
3 changed files with 200 additions and 154 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +35
    -6
      packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx
  2. +30
    -26
      packages/web-kitchensink-reactnext/src/pages/categories/number/index.tsx
  3. +135
    -122
      packages/web-kitchensink-reactnext/src/pages/categories/option/index.tsx

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

@@ -1,9 +1,32 @@
import * as React from 'react'; import * as React from 'react';
import * as SelectControlBase from '@tesseract-design/web-base-selectcontrol';
import {RenderOptions} from '@tesseract-design/web-option-react';
import clsx from 'clsx'; import clsx from 'clsx';
import styles from './style.module.css'; import styles from './style.module.css';


const filterOptions = (children: React.ReactNode): React.ReactNode => {
const childrenArray = Array.isArray(children) ? children : [children];
return childrenArray.reduce(
(optionChildren, child) => {
if (!(typeof child === 'object' && child)) {
return optionChildren;
}
if (child.type === 'option') {
return [
...optionChildren,
child,
];
}
if (child.type === 'optgroup') {
return [
...optionChildren,
...filterOptions(child.props.children) as unknown[],
];
}
return optionChildren;
},
[],
) as React.ReactNode;
};

/* /*
* Caveat for slider: * Caveat for slider:
* *
@@ -179,6 +202,10 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
return null; return null;
} }


const childrenValues = children
? filterOptions(children)
: undefined;

return ( return (
<> <>
{ {
@@ -221,7 +248,7 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
min={minValue} min={minValue}
max={maxValue} max={maxValue}
type="range" type="range"
list={children ? tickMarkId : undefined}
list={childrenValues ? tickMarkId : undefined}
className={clsx( className={clsx(
styles.slider, styles.slider,
'w-full h-full bg-inherit block text-primary ring-secondary/50 rounded-full', 'w-full h-full bg-inherit block text-primary ring-secondary/50 rounded-full',
@@ -229,11 +256,11 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
'active:text-tertiary active:ring-tertiary/50', 'active:text-tertiary active:ring-tertiary/50',
)} )}
/> />
{Array.isArray(children) && (
{Array.isArray(childrenValues) && (
<div className="select-none"> <div className="select-none">
<div className="relative w-full h-full"> <div className="relative w-full h-full">
{ {
children
childrenValues
.filter((c) => { .filter((c) => {
const value = Number(c.props.value); const value = Number(c.props.value);
return minValue <= value && value <= maxValue; return minValue <= value && value <= maxValue;
@@ -255,7 +282,9 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
<div <div
className="bg-current" className="bg-current"
/> />
<div>
<div
className={c.props.className}
>
{c.props.children} {c.props.children}
</div> </div>
</div> </div>


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

@@ -28,19 +28,21 @@ const NumberPage: NextPage = () => {
min={-100} min={-100}
max={100} max={100}
> >
<option value={-100}>
Lowest
</option>
<option value={25}>
日本語
</option>
<option value={50} />
<option value={100}>
Highest
</option>
<option value={200}>
Out of bounds
</option>
<optgroup label="Test Values">
<option value={-100}>
Lowest
</option>
<option value={25}>
日本語
</option>
<option value={50} />
<option value={100}>
Highest
</option>
<option value={200}>
Out of bounds
</option>
</optgroup>
</TesseractNumber.Slider> </TesseractNumber.Slider>
</Subsection> </Subsection>
<Subsection title="Vertical"> <Subsection title="Vertical">
@@ -49,19 +51,21 @@ const NumberPage: NextPage = () => {
max={100} max={100}
orient="vertical" 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>
<optgroup label="Test Values">
<option value={-100}>
Lowest
</option>
<option value={25}>
日本語
</option>
<option value={50} />
<option value={100}>
Highest
</option>
<option value={200}>
Out of bounds
</option>
</optgroup>
</TesseractNumber.Slider> </TesseractNumber.Slider>
A A
</Subsection> </Subsection>


+ 135
- 122
packages/web-kitchensink-reactnext/src/pages/categories/option/index.tsx View File

@@ -2,52 +2,28 @@ import { NextPage } from 'next';
import * as Option from '@tesseract-design/web-option-react'; import * as Option from '@tesseract-design/web-option-react';
import * as SelectControlBase from '@tesseract-design/web-base-selectcontrol'; import * as SelectControlBase from '@tesseract-design/web-base-selectcontrol';
import { DefaultLayout } from '@/components/DefaultLayout'; import { DefaultLayout } from '@/components/DefaultLayout';
import {ReactNode} from 'react';


type Props = { type Props = {
options: SelectControlBase.SelectOption[],
options: ReactNode,
} }


const OptionPage: NextPage<Props> = ({ const OptionPage: NextPage<Props> = ({
options = [
{
label: 'Fruits',
children: [
{
label: 'Mango',
value: 'mango',
},
{
label: 'Strawberry',
value: 'strawberry',
},
{
label: 'Avocado',
value: 'avocado',
},
{
label: 'Grapes',
value: 'grapes',
},
],
},
{
label: 'Non-fruits',
children: [
{
label: 'Chocolate',
value: 'chocolate',
},
{
label: 'Milk',
value: 'milk',
},
{
label: 'Coffee',
value: 'coffee',
},
],
},
],
options = (
<>
<optgroup label="Fruits">
<option value="mango">Mango</option>
<option value="strawberry">Strawberry</option>
<option value="avocado">Avocado</option>
<option value="grapes">Grapes</option>
</optgroup>
<optgroup label="Non-fruits">
<option value="chocolate">Chocolate</option>
<option value="milk">Milk</option>
<option value="coffee">Coffee</option>
</optgroup>
</>
)
}) => { }) => {
return ( return (
<DefaultLayout <DefaultLayout
@@ -73,9 +49,7 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
> >
<option>
Hello
</option>
{options}
</Option.DropdownSelect> </Option.DropdownSelect>
</div> </div>
<div> <div>
@@ -85,16 +59,18 @@ const OptionPage: NextPage<Props> = ({
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -102,8 +78,9 @@ const OptionPage: NextPage<Props> = ({
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -111,8 +88,9 @@ const OptionPage: NextPage<Props> = ({
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -121,8 +99,9 @@ const OptionPage: NextPage<Props> = ({
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -130,8 +109,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
disabled disabled
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -140,8 +120,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
disabled disabled
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
</div> </div>
<form> <form>
@@ -222,8 +203,9 @@ const OptionPage: NextPage<Props> = ({
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -233,8 +215,9 @@ const OptionPage: NextPage<Props> = ({
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -242,8 +225,9 @@ const OptionPage: NextPage<Props> = ({
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -252,8 +236,9 @@ const OptionPage: NextPage<Props> = ({
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -262,8 +247,9 @@ const OptionPage: NextPage<Props> = ({
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -273,8 +259,9 @@ const OptionPage: NextPage<Props> = ({
size="large" size="large"
label="Select" label="Select"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -283,8 +270,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
disabled disabled
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
<div> <div>
<Option.DropdownSelect <Option.DropdownSelect
@@ -294,8 +282,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
block block
disabled disabled
options={options}
/>
>
{options}
</Option.DropdownSelect>
</div> </div>
</div> </div>
</div> </div>
@@ -322,8 +311,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -333,8 +323,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -342,8 +333,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -352,8 +344,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -362,8 +355,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -373,8 +367,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -383,8 +378,9 @@ const OptionPage: NextPage<Props> = ({
indicator="A" indicator="A"
block block
disabled disabled
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -394,8 +390,9 @@ const OptionPage: NextPage<Props> = ({
indicator="A" indicator="A"
block block
disabled disabled
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
</div> </div>
</div> </div>
@@ -412,8 +409,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -424,8 +422,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -434,8 +433,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -445,8 +445,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -456,8 +457,9 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -468,8 +470,9 @@ const OptionPage: NextPage<Props> = ({
label="MultilineTextInput" label="MultilineTextInput"
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -479,8 +482,9 @@ const OptionPage: NextPage<Props> = ({
indicator="A" indicator="A"
block block
disabled disabled
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -491,8 +495,9 @@ const OptionPage: NextPage<Props> = ({
indicator="A" indicator="A"
block block
disabled disabled
options={options}
/>
>
{options}
</Option.MenuSelect>
</div> </div>
</div> </div>
</div> </div>
@@ -510,9 +515,10 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
multiple multiple
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -522,9 +528,10 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
multiple multiple
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -532,9 +539,10 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
multiple multiple
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -543,9 +551,10 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
multiple multiple
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -554,9 +563,10 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
multiple multiple
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -566,9 +576,10 @@ const OptionPage: NextPage<Props> = ({
hint="Type anything here&hellip;" hint="Type anything here&hellip;"
indicator="A" indicator="A"
block block
options={options}
multiple multiple
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -577,9 +588,10 @@ const OptionPage: NextPage<Props> = ({
indicator="A" indicator="A"
block block
disabled disabled
options={options}
multiple multiple
/>
>
{options}
</Option.MenuSelect>
</div> </div>
<div> <div>
<Option.MenuSelect <Option.MenuSelect
@@ -589,9 +601,10 @@ const OptionPage: NextPage<Props> = ({
indicator="A" indicator="A"
block block
disabled disabled
options={options}
multiple multiple
/>
>
{options}
</Option.MenuSelect>
</div> </div>
</div> </div>
</div> </div>


Write Preview
Loading…
Cancel
Save