feat:init
This commit is contained in:
zhongyidian committed
1 parent
53d0eeac6b
commit
ae0c050010
494 files changed
+17701
-2318
No files matched your search
@@ -0,0 +1,7 @@
|
||||
export { default } from "./multiple-choice";
|
||||
export { default as MultipleChoice } from "./multiple-choice";
|
||||
export type {
|
||||
MultipleChoiceProps,
|
||||
MultipleChoiceOption,
|
||||
} from "./multiple-choice.types";
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { useState } from "react";
|
||||
import MultipleChoice from "./multiple-choice";
|
||||
import type { MultipleChoiceProps } from "./multiple-choice.types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const meta: Meta<typeof MultipleChoice> = {
|
||||
title: "Components/Quiz/MultipleChoice",
|
||||
component: MultipleChoice,
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
options: {
|
||||
control: { type: "object" },
|
||||
description: "选项列表，可以是字符串数组或选项对象数组",
|
||||
},
|
||||
value: {
|
||||
control: { type: "object" },
|
||||
description: "当前选中的值数组（受控模式）",
|
||||
},
|
||||
defaultValue: {
|
||||
control: { type: "object" },
|
||||
description: "默认选中的值数组",
|
||||
},
|
||||
disabled: {
|
||||
control: { type: "boolean" },
|
||||
description: "是否禁用整个组件",
|
||||
},
|
||||
minSelections: {
|
||||
control: { type: "number" },
|
||||
description: "最小选择数量",
|
||||
},
|
||||
maxSelections: {
|
||||
control: { type: "number" },
|
||||
description: "最大选择数量",
|
||||
},
|
||||
showSubmitButton: {
|
||||
control: { type: "boolean" },
|
||||
description: "是否显示提交按钮",
|
||||
},
|
||||
submitText: {
|
||||
control: { type: "text" },
|
||||
description: "提交按钮文本",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof MultipleChoice>;
|
||||
|
||||
// 基础示例
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
options: ["选项A", "选项B", "选项C", "选项D", "选项E"],
|
||||
onSubmit: (values) => {
|
||||
console.log("选中的值:", values);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 使用选项对象
|
||||
export const WithOptionObjects: Story = {
|
||||
args: {
|
||||
options: [
|
||||
{ value: "opt1", label: "选项一" },
|
||||
{ value: "opt2", label: "选项二" },
|
||||
{ value: "opt3", label: "选项三（禁用）", disabled: true },
|
||||
{ value: "opt4", label: "选项四" },
|
||||
{ value: "opt5", label: "选项五" },
|
||||
],
|
||||
onSubmit: (values) => {
|
||||
console.log("选中的值:", values);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 受控模式
|
||||
export const Controlled: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<string[]>([]);
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<MultipleChoice
|
||||
options={["选项A", "选项B", "选项C", "选项D"]}
|
||||
value={values}
|
||||
onChange={setValues}
|
||||
onSubmit={(vals) => {
|
||||
alert(`提交的值: ${vals.join(", ")}`);
|
||||
}}
|
||||
/>
|
||||
<div className="text-sm text-gray-600">
|
||||
当前选中: {values.length > 0 ? values.join(", ") : "未选择"}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// 限制最大选择数量
|
||||
export const WithMaxSelections: Story = {
|
||||
args: {
|
||||
options: ["选项A", "选项B", "选项C", "选项D", "选项E"],
|
||||
maxSelections: 2,
|
||||
onSubmit: (values) => {
|
||||
console.log("选中的值:", values);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 限制最小和最大选择数量
|
||||
export const WithMinMaxSelections: Story = {
|
||||
args: {
|
||||
options: ["选项A", "选项B", "选项C", "选项D", "选项E"],
|
||||
minSelections: 2,
|
||||
maxSelections: 4,
|
||||
onSubmit: (values) => {
|
||||
console.log("选中的值:", values);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 禁用状态
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
options: ["选项A", "选项B", "选项C"],
|
||||
disabled: true,
|
||||
defaultValue: ["选项A"],
|
||||
},
|
||||
};
|
||||
|
||||
// 不显示提交按钮
|
||||
export const WithoutSubmitButton: Story = {
|
||||
args: {
|
||||
options: ["选项A", "选项B", "选项C"],
|
||||
showSubmitButton: false,
|
||||
onChange: (values) => {
|
||||
console.log("值变化:", values);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 自定义样式
|
||||
export const CustomStyled: Story = {
|
||||
args: {
|
||||
options: ["选项A", "选项B", "选项C", "选项D"],
|
||||
className: "max-w-md mx-auto p-6 bg-gray-50 rounded-xl",
|
||||
optionClassName: "text-lg font-semibold",
|
||||
submitText: "确认答案",
|
||||
maxSelections: 3,
|
||||
onSubmit: (values) => {
|
||||
console.log("选中的值:", values);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 自定义渲染选项
|
||||
export const CustomRender: Story = {
|
||||
render: () => {
|
||||
return (
|
||||
<MultipleChoice
|
||||
options={["选项A", "选项B", "选项C", "选项D"]}
|
||||
maxSelections={2}
|
||||
renderOption={(option, isSelected) => (
|
||||
<div
|
||||
className={cn(
|
||||
"p-4 rounded-lg border-2 transition-all cursor-pointer",
|
||||
isSelected
|
||||
? "border-purple-500 bg-purple-100"
|
||||
: "border-gray-200 bg-white"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={cn(
|
||||
"w-6 h-6 rounded border-2 flex items-center justify-center text-lg",
|
||||
isSelected
|
||||
? "border-purple-500 bg-purple-500 text-white"
|
||||
: "border-gray-300"
|
||||
)}
|
||||
>
|
||||
{isSelected && "✓"}
|
||||
</div>
|
||||
<span className="font-medium">{option.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
onSubmit={(values) => {
|
||||
console.log("选中的值:", values);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -0,0 +1,223 @@
|
||||
import { useState, useEffect, forwardRef } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type {
|
||||
MultipleChoiceProps,
|
||||
MultipleChoiceOption,
|
||||
} from "./multiple-choice.types";
|
||||
|
||||
/**
|
||||
* MultipleChoice - 多选组件
|
||||
*
|
||||
* 用于问答场景的多选功能，支持选项列表、多选状态管理、最小/最大选择数量限制和提交回调
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <MultipleChoice
|
||||
* options={["选项A", "选项B", "选项C"]}
|
||||
* maxSelections={2}
|
||||
* onSubmit={(values) => console.log(values)}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
const MultipleChoice = forwardRef<HTMLDivElement, MultipleChoiceProps>(
|
||||
(
|
||||
{
|
||||
options,
|
||||
value: controlledValue,
|
||||
defaultValue = [],
|
||||
onChange,
|
||||
onSubmit,
|
||||
disabled = false,
|
||||
minSelections,
|
||||
maxSelections,
|
||||
className,
|
||||
optionClassName,
|
||||
submitText = "提交",
|
||||
showSubmitButton = true,
|
||||
renderOption,
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
// 标准化选项数据
|
||||
const normalizedOptions: MultipleChoiceOption[] = options.map((option) => {
|
||||
if (typeof option === "string") {
|
||||
return { value: option, label: option };
|
||||
}
|
||||
return option;
|
||||
});
|
||||
|
||||
// 受控/非受控模式
|
||||
const isControlled = controlledValue !== undefined;
|
||||
const [internalValue, setInternalValue] = useState<string[]>(
|
||||
defaultValue || []
|
||||
);
|
||||
const currentValue = isControlled ? controlledValue : internalValue;
|
||||
|
||||
// 处理选项点击
|
||||
const handleOptionClick = (optionValue: string) => {
|
||||
if (disabled) return;
|
||||
const option = normalizedOptions.find((opt) => opt.value === optionValue);
|
||||
if (option?.disabled) return;
|
||||
|
||||
const isSelected = currentValue.includes(optionValue);
|
||||
let newValue: string[];
|
||||
|
||||
if (isSelected) {
|
||||
// 取消选择
|
||||
newValue = currentValue.filter((v) => v !== optionValue);
|
||||
// 检查最小选择数量限制
|
||||
if (
|
||||
minSelections !== undefined &&
|
||||
newValue.length < minSelections
|
||||
) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// 选择
|
||||
// 检查最大选择数量限制
|
||||
if (
|
||||
maxSelections !== undefined &&
|
||||
currentValue.length >= maxSelections
|
||||
) {
|
||||
return;
|
||||
}
|
||||
newValue = [...currentValue, optionValue];
|
||||
}
|
||||
|
||||
if (!isControlled) {
|
||||
setInternalValue(newValue);
|
||||
}
|
||||
onChange?.(newValue);
|
||||
};
|
||||
|
||||
// 处理提交
|
||||
const handleSubmit = () => {
|
||||
if (disabled) return;
|
||||
// 检查最小选择数量
|
||||
if (
|
||||
minSelections !== undefined &&
|
||||
currentValue.length < minSelections
|
||||
) {
|
||||
return;
|
||||
}
|
||||
onSubmit?.(currentValue);
|
||||
};
|
||||
|
||||
// 检查是否可以提交
|
||||
const canSubmit =
|
||||
currentValue.length > 0 &&
|
||||
(minSelections === undefined ||
|
||||
currentValue.length >= minSelections);
|
||||
|
||||
// 默认渲染选项
|
||||
const defaultRenderOption = (
|
||||
option: MultipleChoiceOption,
|
||||
isSelected: boolean
|
||||
) => {
|
||||
const isDisabled =
|
||||
disabled ||
|
||||
option.disabled ||
|
||||
(!isSelected &&
|
||||
maxSelections !== undefined &&
|
||||
currentValue.length >= maxSelections);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"px-6 py-4 border-2 rounded-lg cursor-pointer transition-all",
|
||||
"hover:border-green-400 hover:bg-green-50",
|
||||
isSelected
|
||||
? "border-green-500 bg-green-100 text-green-700"
|
||||
: "border-gray-300 bg-white text-gray-700",
|
||||
isDisabled && "opacity-50 cursor-not-allowed",
|
||||
optionClassName
|
||||
)}
|
||||
onClick={() => handleOptionClick(option.value)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={cn(
|
||||
"w-5 h-5 rounded border-2 flex items-center justify-center transition-colors",
|
||||
isSelected
|
||||
? "border-green-500 bg-green-500"
|
||||
: "border-gray-300 bg-white"
|
||||
)}
|
||||
>
|
||||
{isSelected && (
|
||||
<svg
|
||||
className="w-3 h-3 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<span>{option.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={ref} className={cn("flex flex-col gap-4", className)}>
|
||||
<div className="flex flex-col gap-3">
|
||||
{normalizedOptions.map((option) => {
|
||||
const isSelected = currentValue.includes(option.value);
|
||||
return (
|
||||
<div key={option.value}>
|
||||
{renderOption
|
||||
? renderOption(option, isSelected)
|
||||
: defaultRenderOption(option, isSelected)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{showSubmitButton && (
|
||||
<div className="flex flex-col gap-2">
|
||||
{minSelections !== undefined && (
|
||||
<div className="text-sm text-gray-500">
|
||||
至少选择 {minSelections} 项
|
||||
{maxSelections !== undefined &&
|
||||
`，最多选择 ${maxSelections} 项`}
|
||||
{maxSelections === undefined && "（无上限）"}
|
||||
</div>
|
||||
)}
|
||||
{maxSelections !== undefined && minSelections === undefined && (
|
||||
<div className="text-sm text-gray-500">
|
||||
最多选择 {maxSelections} 项
|
||||
</div>
|
||||
)}
|
||||
<div className="text-sm text-gray-500">
|
||||
已选择 {currentValue.length} 项
|
||||
</div>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={disabled || !canSubmit}
|
||||
className={cn(
|
||||
"px-6 py-3 rounded-lg font-medium transition-colors",
|
||||
"bg-green-500 text-white hover:bg-green-600",
|
||||
"disabled:opacity-50 disabled:cursor-not-allowed",
|
||||
"focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
|
||||
)}
|
||||
>
|
||||
{submitText}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
MultipleChoice.displayName = "MultipleChoice";
|
||||
|
||||
export default MultipleChoice;
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import { ReactNode } from "react";
|
||||
|
||||
/** 选项数据 */
|
||||
export interface MultipleChoiceOption {
|
||||
/** 选项值 */
|
||||
value: string;
|
||||
/** 选项显示文本 */
|
||||
label: string;
|
||||
/** 是否禁用 */
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
/** 多选组件配置项 */
|
||||
export interface MultipleChoiceProps {
|
||||
/** 选项列表 */
|
||||
options: MultipleChoiceOption[] | string[];
|
||||
/** 当前选中的值数组（受控模式） */
|
||||
value?: string[];
|
||||
/** 默认选中的值数组 */
|
||||
defaultValue?: string[];
|
||||
/** 选中值变化时的回调 */
|
||||
onChange?: (values: string[]) => void;
|
||||
/** 提交时的回调 */
|
||||
onSubmit?: (values: string[]) => void;
|
||||
/** 是否禁用整个组件 */
|
||||
disabled?: boolean;
|
||||
/** 最小选择数量 */
|
||||
minSelections?: number;
|
||||
/** 最大选择数量 */
|
||||
maxSelections?: number;
|
||||
/** 自定义类名 */
|
||||
className?: string;
|
||||
/** 选项容器的自定义类名 */
|
||||
optionClassName?: string;
|
||||
/** 提交按钮文本 */
|
||||
submitText?: string;
|
||||
/** 是否显示提交按钮 */
|
||||
showSubmitButton?: boolean;
|
||||
/** 自定义渲染选项 */
|
||||
renderOption?: (
|
||||
option: MultipleChoiceOption,
|
||||
isSelected: boolean
|
||||
) => ReactNode;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user