@c2-markdown-ui/react 0.4.4 → 0.4.5

package/src/widgets/ShortAnswerQuestion.tsx

@@ -1,101 +1,101 @@
-import React, { useState } from 'react';
-
-export interface ShortAnswerQuestionProps {
-  question: string;
-  placeholder?: string;
-  correctAnswer?: string;
-  correctAnswers?: string[];
-  showFeedback?: boolean;
-  /** 是否禁用：禁用后输入框与提交按钮不可交互 */
-  disabled?: boolean;
-  onchange: (value: { answer: string; isCorrect?: boolean }) => void;
-}
-
-export const ShortAnswerQuestion: React.FC<ShortAnswerQuestionProps> = ({ 
-  question, 
-  placeholder = "Type your answer here...",
-  correctAnswer,
-  correctAnswers,
-  showFeedback = false,
-  disabled = false,
-  onchange 
-}) => {
-  const [answer, setAnswer] = useState('');
-  const [hasAnswered, setHasAnswered] = useState(false);
-  const [isCorrect, setIsCorrect] = useState<boolean | undefined>(undefined);
-
-  const handleSubmit = () => {
-    if (disabled) return;
-    if (!answer.trim()) return;
-    
-    setHasAnswered(true);
-    
-    const normalized = (correctAnswers && correctAnswers.length > 0)
-      ? correctAnswers
-      : (typeof correctAnswer === 'string' ? [correctAnswer] : undefined);
-
-    const correct = normalized
-      ? normalized.some(a => a.toLowerCase() === answer.trim().toLowerCase())
-      : undefined;
-    
-    setIsCorrect(correct);
-    onchange({ answer: answer.trim(), isCorrect: correct });
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !hasAnswered && !disabled) {
-      handleSubmit();
-    }
-  };
-
-  const getFeedbackMessage = () => {
-    if (!hasAnswered || !showFeedback) return null;
-    
-    const hasAnswers = (correctAnswers && correctAnswers.length > 0) || typeof correctAnswer !== 'undefined';
-    if (!hasAnswers) {
-      return `Your answer: ${answer.trim()}`;
-    }
-    
-    if (correctAnswers && correctAnswers.length > 0) {
-      return isCorrect 
-        ? '✓ Correct!'
-        : `✗ Incorrect. Accepted answers: ${correctAnswers.join(', ')}`;
-    }
-    return isCorrect ? '✓ Correct!' : `✗ Incorrect. The correct answer is: ${correctAnswer}`;
-  };
-
-  return (
-    <div className="widget-saq">
-      <div className="saq-question">{question}</div>
-      <div className="saq-input-container">
-        <input
-          type="text"
-          value={answer}
-          onChange={(e) => setAnswer(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          disabled={disabled || (hasAnswered && showFeedback)}
-          className={`saq-input ${
-            hasAnswered && showFeedback
-              ? isCorrect ? 'saq-input-correct' : 'saq-input-incorrect'
-              : ''
-          }`}
-        />
-        {!hasAnswered && (
-          <button
-            onClick={handleSubmit}
-            disabled={disabled || !answer.trim()}
-            className="saq-submit"
-          >
-            Submit
-          </button>
-        )}
-      </div>
-      {hasAnswered && showFeedback && getFeedbackMessage() && (
-        <div className={`saq-feedback ${isCorrect ? 'correct' : 'incorrect'}`}>
-          {getFeedbackMessage()}
-        </div>
-      )}
-    </div>
-  );
-};
+import React, { useState } from 'react';
+
+export interface ShortAnswerQuestionProps {
+  question: string;
+  placeholder?: string;
+  correctAnswer?: string;
+  correctAnswers?: string[];
+  showFeedback?: boolean;
+  /** 是否禁用：禁用后输入框与提交按钮不可交互 */
+  disabled?: boolean;
+  onchange: (value: { answer: string; isCorrect?: boolean }) => void;
+}
+
+export const ShortAnswerQuestion: React.FC<ShortAnswerQuestionProps> = ({ 
+  question, 
+  placeholder = "Type your answer here...",
+  correctAnswer,
+  correctAnswers,
+  showFeedback = false,
+  disabled = false,
+  onchange 
+}) => {
+  const [answer, setAnswer] = useState('');
+  const [hasAnswered, setHasAnswered] = useState(false);
+  const [isCorrect, setIsCorrect] = useState<boolean | undefined>(undefined);
+
+  const handleSubmit = () => {
+    if (disabled) return;
+    if (!answer.trim()) return;
+    
+    setHasAnswered(true);
+    
+    const normalized = (correctAnswers && correctAnswers.length > 0)
+      ? correctAnswers
+      : (typeof correctAnswer === 'string' ? [correctAnswer] : undefined);
+
+    const correct = normalized
+      ? normalized.some(a => a.toLowerCase() === answer.trim().toLowerCase())
+      : undefined;
+    
+    setIsCorrect(correct);
+    onchange({ answer: answer.trim(), isCorrect: correct });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !hasAnswered && !disabled) {
+      handleSubmit();
+    }
+  };
+
+  const getFeedbackMessage = () => {
+    if (!hasAnswered || !showFeedback) return null;
+    
+    const hasAnswers = (correctAnswers && correctAnswers.length > 0) || typeof correctAnswer !== 'undefined';
+    if (!hasAnswers) {
+      return `Your answer: ${answer.trim()}`;
+    }
+    
+    if (correctAnswers && correctAnswers.length > 0) {
+      return isCorrect 
+        ? '✓ Correct!'
+        : `✗ Incorrect. Accepted answers: ${correctAnswers.join(', ')}`;
+    }
+    return isCorrect ? '✓ Correct!' : `✗ Incorrect. The correct answer is: ${correctAnswer}`;
+  };
+
+  return (
+    <div className="widget-saq">
+      <div className="saq-question">{question}</div>
+      <div className="saq-input-container">
+        <input
+          type="text"
+          value={answer}
+          onChange={(e) => setAnswer(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled || (hasAnswered && showFeedback)}
+          className={`saq-input ${
+            hasAnswered && showFeedback
+              ? isCorrect ? 'saq-input-correct' : 'saq-input-incorrect'
+              : ''
+          }`}
+        />
+        {!hasAnswered && (
+          <button
+            onClick={handleSubmit}
+            disabled={disabled || !answer.trim()}
+            className="saq-submit"
+          >
+            Submit
+          </button>
+        )}
+      </div>
+      {hasAnswered && showFeedback && getFeedbackMessage() && (
+        <div className={`saq-feedback ${isCorrect ? 'correct' : 'incorrect'}`}>
+          {getFeedbackMessage()}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/widgets/Slider.tsx

@@ -1,57 +1,71 @@
-import React, { useState } from 'react';
-
-export interface SliderProps {
-  min: number;
-  max: number;
-  step?: number;
-  label?: string;
-  default?: number;
-  /** 是否禁用 */
-  disabled?: boolean;
-  onchange: (value: number) => void;
-}
-
-export const Slider: React.FC<SliderProps> = ({ 
-  min, 
-  max, 
-  step = 1, 
-  label = '', 
-  default: initial = min, 
-  disabled = false,
-  onchange 
-}) => {
-  const [value, setValue] = useState(initial);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = Number(e.target.value);
-    setValue(newValue);
-  };
-
-  const handleComplete = () => {
-    onchange(value);
-  };
-
-  return (
-    <div className="widget-slider">
-      {label && <label>{label}</label>}
-      <div className="slider-container">
-        <div className="slider-values">
-          <span className="min-value">{min}</span>
-          <span className="current-value">{value}</span>
-          <span className="max-value">{max}</span>
-        </div>
-        <input
-          type="range"
-          value={value}
-          min={min}
-          max={max}
-          step={step}
-          onChange={handleChange}
-          onMouseUp={handleComplete}
-          onTouchEnd={handleComplete}
-          disabled={disabled}
-        />
-      </div>
-    </div>
-  );
+import React, { useState } from 'react';
+
+export interface SliderProps {
+  min: number;
+  max: number;
+  step?: number;
+  label?: string;
+  default?: number;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 表单项说明：label 后 ⓘ，悬浮显示 tooltip */
+  hint?: string;
+  /** 是否必填（slider 始终有值，仅语义标记） */
+  required?: boolean;
+  onchange: (value: number) => void;
+}
+
+export const Slider: React.FC<SliderProps> = ({ 
+  min, 
+  max, 
+  step = 1, 
+  label = '', 
+  default: initial = min, 
+  disabled = false,
+  hint = '',
+  required = false,
+  onchange 
+}) => {
+  const [value, setValue] = useState(initial);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = Number(e.target.value);
+    setValue(newValue);
+  };
+
+  const handleComplete = () => {
+    onchange(value);
+  };
+
+  return (
+    <div className="widget-slider">
+      {label || hint || required ? (
+        <div className="widget-label-row">
+          {required && <span className="widget-required-mark" aria-hidden="true">*</span>}
+          {label && <label>{label}</label>}
+          {hint && <span className="widget-hint" data-hint={hint}>ⓘ</span>}
+        </div>
+      ) : null}
+      <div className="widget-field-content">
+        <div className="slider-container">
+          <div className="slider-values">
+            <span className="min-value">{min}</span>
+            <span className="current-value">{value}</span>
+            <span className="max-value">{max}</span>
+          </div>
+          <input
+            type="range"
+            value={value}
+            min={min}
+            max={max}
+            step={step}
+            onChange={handleChange}
+            onMouseUp={handleComplete}
+            onTouchEnd={handleComplete}
+            disabled={disabled}
+          />
+        </div>
+      </div>
+    </div>
+  );
 };

package/src/widgets/Switch.tsx

@@ -10,17 +10,23 @@ export interface SwitchProps {
   unCheckedText?: string;
   /** 是否禁用 */
   disabled?: boolean;
+  /** 表单项说明：label 后 ⓘ，悬浮显示 tooltip */
+  hint?: string;
+  /** 是否必填（switch 始终有值，仅语义标记） */
+  required?: boolean;
   onchange: (value: boolean) => void;
 }
 
 /** 开关组件（参考 antd Switch）：布尔切换控件，可配置选中/未选中文案。
-    label 在上（与表单其他字段同构），表单布局切换时位置自动跟随 */
+    与表单其他字段同构（label-row 在前、内容在后），表单 layout:horizontal 时 label 在左、开关在右 */
 export const Switch: React.FC<SwitchProps> = ({
   label = '',
   default: initial = false,
   checkedText = '',
   unCheckedText = '',
   disabled = false,
+  hint = '',
+  required = false,
   onchange
 }) => {
   const [checked, setChecked] = useState(initial);
@@ -34,7 +40,13 @@ export const Switch: React.FC<SwitchProps> = ({
 
   return (
     <div className="widget-switch">
-      {label && <label>{label}</label>}
+      {label || hint || required ? (
+        <div className="widget-label-row switch-label-row">
+          {required && <span className="widget-required-mark" aria-hidden="true">*</span>}
+          {label && <label>{label}</label>}
+          {hint && <span className="widget-hint" data-hint={hint}>ⓘ</span>}
+        </div>
+      ) : null}
       <div className="widget-field-content">
         <button
           type="button"

package/src/widgets/TextInput.tsx

@@ -1,38 +1,76 @@
-import React, { useState } from 'react';
-
-export interface TextInputProps {
-  placeholder?: string;
-  label?: string;
-  default?: string;
-  /** 是否禁用 */
-  disabled?: boolean;
-  onchange: (value: string) => void;
-}
-
-export const TextInput: React.FC<TextInputProps> = ({ 
-  placeholder = '', 
-  label = '', 
-  default: initial = '', 
-  disabled = false,
-  onchange 
-}) => {
-  const [value, setValue] = useState(initial);
-
-  const handleBlur = () => {
-    onchange(value);
-  };
-
-  return (
-    <div className="widget-text-input">
-      {label && <label>{label}</label>}
-      <input
-        type="text"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onBlur={handleBlur}
-        placeholder={placeholder}
-        disabled={disabled}
-      />
-    </div>
-  );
-};
+import React, { useState } from 'react';
+
+export interface TextInputProps {
+  placeholder?: string;
+  label?: string;
+  default?: string;
+  hint?: string;
+  /** 是否必填：label 前红色 * */
+  required?: boolean;
+  /** 正则校验规则（JS 正则源字符串） */
+  pattern?: string;
+  /** 校验失败提示文案 */
+  message?: string;
+  /** 外部（form 提交时）传入的错误信息，优先于组件内部即时校验 */
+  error?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: string) => void;
+}
+
+export const TextInput: React.FC<TextInputProps> = ({
+  placeholder = '',
+  label = '',
+  default: initial = '',
+  hint = '',
+  required = false,
+  pattern,
+  message = '',
+  error = '',
+  disabled = false,
+  onchange
+}) => {
+  const [value, setValue] = useState(initial);
+  const [localError, setLocalError] = useState('');
+
+  /** 校验当前值：返回错误文案或空串 */
+  const validate = (v: string): string => {
+    if (required && !v.trim()) return message || (label ? `请填写${label}` : '该项为必填项');
+    if (pattern && v && !new RegExp(pattern).test(v)) return message || (label ? `${label}格式不正确` : '格式不正确');
+    return '';
+  };
+
+  const commit = () => {
+    setLocalError(validate(value));
+    onchange(value);
+  };
+
+  const shownError = error || localError;
+
+  return (
+    <div className={`widget-text-input${shownError ? ' widget-field-error' : ''}`}>
+      {label || hint || required ? (
+        <div className="widget-label-row">
+          {required && <span className="widget-required-mark" aria-hidden="true">*</span>}
+          {label && <label>{label}</label>}
+          {hint && <span className="widget-hint" data-hint={hint}>ⓘ</span>}
+        </div>
+      ) : null}
+      <div className="widget-field-content">
+        <input
+          type="text"
+          className={shownError ? 'widget-input-error' : undefined}
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+            if (localError) setLocalError(validate(e.target.value));
+          }}
+          onBlur={commit}
+          placeholder={placeholder}
+          disabled={disabled}
+        />
+        {shownError ? <div className="widget-error-text" role="alert">{shownError}</div> : null}
+      </div>
+    </div>
+  );
+};