Wheel Picker

import "./styles";

import * as React from "@lynx-js/react";

import { WheelPicker } from "@/components/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",
      "accessibility-label": "동",
      options: buildingOptions,
      value: building,
      onValueChange: (nextBuilding: string) => {
        "background only";
        setAddress((current) => ({ ...current, building: nextBuilding }));
      },
    },
    {
      id: "unit",
      "accessibility-label": "호수",
      options: unitOptions,
      value: unit,
      onValueChange: (nextUnit: string) => {
        "background only";
        setAddress((current) => ({ ...current, unit: nextUnit }));
      },
    },
  ];

  return (
    <view className="wheel-picker-preview">
      <view className="wheel-picker-preview__picker">
        <WheelPicker columns={columns} />
      </view>
      <text id="wheel-picker-preview-status" className="wheel-picker-preview__status">
        {building}동 {unit}호
      </text>
    </view>
  );
}

import "./styles";

import * as React from "@lynx-js/react";
import { WheelPickerItemLabel } from "@seed-design/lynx-react";

import { WheelPicker } from "@/components/ui/wheel-picker";

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

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

  return (
    <view className="wheel-picker-preview wheel-picker-preview--compact">
      <view className="wheel-picker-preview__picker">
        <WheelPicker
          size="small"
          columns={[
            {
              id: "font-size",
              "accessibility-label": "글자 크기",
              options,
              value,
              onValueChange: (nextValue) => {
                "background only";
                setValue(nextValue);
              },
              renderLabel: (option) => (
                <WheelPickerItemLabel>
                  <text className="wheel-picker-preview__custom-label">{option.label}</text>
                </WheelPickerItemLabel>
              ),
            },
          ]}
        />
      </view>
      <text id="wheel-picker-package-api-status" className="wheel-picker-preview__status">
        선택값: {value}
      </text>
    </view>
  );
}

import "./styles";

import * as React from "@lynx-js/react";

import { WheelPicker } from "@/components/ui/wheel-picker";

function ColorDot({ color }: { color: string }) {
  return (
    <view
      accessibility-elements-hidden={true}
      className="wheel-picker-preview__color-dot"
      style={{ backgroundColor: color }}
    />
  );
}

const colorOptions = [
  { value: "carrot", name: "당근색", color: "var(--seed-color-palette-carrot-600)" },
  { value: "blue", name: "파란색", color: "var(--seed-color-palette-blue-700)" },
  { value: "green", name: "초록색", color: "var(--seed-color-palette-green-700)" },
].map(({ value, name, color }) => ({
  value,
  ariaLabel: name,
  label: (
    <view className="wheel-picker-preview__color-label">
      <ColorDot color={color} />
      <text>{name}</text>
    </view>
  ),
}));

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

  return (
    <view className="wheel-picker-preview wheel-picker-preview--compact">
      <view className="wheel-picker-preview__picker">
        <WheelPicker
          columns={[
            {
              id: "color",
              "accessibility-label": "색상",
              options: colorOptions,
              value,
              onValueChange: (nextValue) => {
                "background only";
                setValue(nextValue);
              },
            },
          ]}
        />
      </view>
      <text id="wheel-picker-react-element-label-status" className="wheel-picker-preview__status">
        선택값: {value}
      </text>
    </view>
  );
}

import "./styles";

import { WheelPicker } from "@/components/ui/wheel-picker";

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

export default function WheelPickerStates() {
  return (
    <view className="wheel-picker-preview wheel-picker-preview--states">
      <text id="wheel-picker-states-status" className="wheel-picker-preview__status">
        Disabled
      </text>
      <view className="wheel-picker-preview__picker">
        <WheelPicker
          disabled
          columns={[
            {
              id: "priority",
              "accessibility-label": "중요도",
              options,
              defaultValue: "보통",
            },
          ]}
        />
      </view>
    </view>
  );
}