Wheel Picker

"use client";

import { Box, Text, VStack } from "@seed-design/react";
import * as React from "react";
import { WheelPicker } from "seed-design/ui/wheel-picker";

const buildingOptions = Array.from({ length: 10 }, (_, index) => {
  const value = String(101 + index);
  return { value, label: `${value}동` };
});

const unitOptions = Array.from({ length: 15 }, (_, floorIndex) =>
  Array.from({ length: 4 }, (_, lineIndex) => {
    const value = String((floorIndex + 1) * 100 + lineIndex + 1);
    return { value, label: `${value}호` };
  }),
).flat();

export default function WheelPickerPreview() {
  const [{ building, unit }, setAddress] = React.useState({
    building: "103",
    unit: "1202",
  });

  const columns = [
    {
      id: "building",
      "aria-label": "동",
      options: buildingOptions,
      value: building,
      onValueChange: (nextBuilding: string) =>
        setAddress((current) => ({ ...current, building: nextBuilding })),
    },
    {
      id: "unit",
      "aria-label": "호수",
      options: unitOptions,
      value: unit,
      onValueChange: (nextUnit: string) =>
        setAddress((current) => ({ ...current, unit: nextUnit })),
    },
  ];

  return (
    <VStack width="360px" maxWidth="100%" gap="x3" align="center">
      <Box width="full">
        <WheelPicker aria-label="동호수 선택" columns={columns} />
      </Box>
      <Text aria-live="polite">
        {building}동 {unit}호
      </Text>
    </VStack>
  );
}

"use client";

import { Box, Text, VStack, WheelPicker } from "@seed-design/react";
import * as React from "react";

const options = ["작게", "보통", "크게"].map((label) => ({ value: label, label }));

export default function WheelPickerPackageApi() {
  const [value, setValue] = React.useState("보통");

  return (
    <VStack width="320px" maxWidth="100%" gap="x3" align="center">
      <Box width="full">
        <WheelPicker.Root aria-label="글자 크기 선택" size="small">
          <WheelPicker.Column
            aria-label="글자 크기"
            options={options}
            value={value}
            onValueChange={setValue}
            renderLabel={(option) => (
              <WheelPicker.ItemLabel>
                <Text fontSize="t5" fontWeight="medium">
                  {option.label}
                </Text>
              </WheelPicker.ItemLabel>
            )}
          />
        </WheelPicker.Root>
      </Box>
      <Text aria-live="polite">선택값: {value}</Text>
    </VStack>
  );
}

"use client";

import { Box, HStack, Text, VStack } from "@seed-design/react";
import * as React from "react";
import { WheelPicker } from "seed-design/ui/wheel-picker";

function ColorDot({ color }: { color: string }) {
  return (
    <Box
      as="span"
      aria-hidden="true"
      width="x3"
      height="x3"
      borderRadius="full"
      style={{ backgroundColor: color }}
    />
  );
}

const colorOptions = [
  { value: "carrot", name: "당근색", color: "#ff6f0f" },
  { value: "blue", name: "파란색", color: "#4285f4" },
  { value: "green", name: "초록색", color: "#22a06b" },
].map(({ value, name, color }) => ({
  value,
  ariaLabel: name,
  label: (
    <HStack as="span" gap="x2" align="center">
      <ColorDot color={color} />
      <span>{name}</span>
    </HStack>
  ),
}));

export default function WheelPickerReactElementLabel() {
  const [value, setValue] = React.useState("carrot");

  return (
    <VStack width="320px" maxWidth="100%" gap="x3" align="center">
      <Box width="full">
        <WheelPicker
          aria-label="색상 선택"
          columns={[
            {
              id: "color",
              "aria-label": "색상",
              options: colorOptions,
              value,
              onValueChange: setValue,
            },
          ]}
        />
      </Box>
      <Text aria-live="polite">선택값: {value}</Text>
    </VStack>
  );
}

import { Box, Text, VStack, WheelPicker } from "@seed-design/react";

const options = ["낮음", "보통", "높음"].map((label) => ({ value: label, label }));

export default function WheelPickerStates() {
  return (
    <VStack width="160px" gap="x2" align="center">
      <Text>Disabled</Text>
      <Box width="full">
        <WheelPicker.Root aria-label="비활성 중요도" disabled>
          <WheelPicker.Column aria-label="중요도" options={options} defaultValue="보통" />
        </WheelPicker.Root>
      </Box>
    </VStack>
  );
}