feat: Add CommandLine component with autocomplete stub

2026-06-22 05:54:59 +00:00
parent d2c7d65435
commit e72fb3f44a
1 changed files with 108 additions and 0 deletions
@@ -0,0 +1,108 @@
 import React, { useState, useRef, useEffect } from 'react';
 import './CommandLine.css';
 const CommandLine: React.FC = () => {
  const [command, setCommand] = useState('');
  const [suggestions, setSuggestions] = useState<string[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);
  // Mock command suggestions
  const commandList = [
    'LINE', 'CIRCLE', 'RECTANGLE', 'POLYGON',
    'MOVE', 'COPY', 'ROTATE', 'SCALE',
    'TRIM', 'EXTEND', 'FILLET', 'CHAMFER',
    'DIMLINEAR', 'DIMALIGNED', 'DIMRADIUS', 'DIMDIAMETER',
    'TEXT', 'MTEXT', 'INSERT', 'HATCH'
  ];
  useEffect(() => {
    // Focus the input when component mounts
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setCommand(value);
    // Generate suggestions based on input
    if (value.length > 0) {
      const filtered = commandList.filter(cmd => 
        cmd.toLowerCase().startsWith(value.toLowerCase())
      );
      setSuggestions(filtered);
    } else {
      setSuggestions([]);
    }
  };
  const handleSuggestionClick = (suggestion: string) => {
    setCommand(suggestion);
    setSuggestions([]);
    // Focus back to input after selection
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // In a real app, this would dispatch the command
    console.log('Command submitted:', command);
    setCommand('');
    setSuggestions([]);
  };
  return (
    <div className="command-line" role="region" aria-label="Command Line">
      <form onSubmit={handleSubmit} className="command-form">
        <label htmlFor="command-input" className="command-label">
          Command:
        </label>
        <div className="command-input-container">
          <input
            ref={inputRef}
            id="command-input"
            type="text"
            value={command}
            onChange={handleInputChange}
            className="command-input"
            aria-autocomplete="list"
            aria-controls="command-suggestions"
            aria-describedby="command-description"
            placeholder="Enter command..."
          />
          <button type="submit" className="command-submit">
            Enter
          </button>
        </div>
        <div id="command-description" className="sr-only">
          Type a CAD command and press Enter to execute
        </div>
        {suggestions.length > 0 && (
          <ul 
            id="command-suggestions" 
            className="suggestions-list" 
            role="listbox"
            aria-label="Command Suggestions"
          >
            {suggestions.map((suggestion, index) => (
              <li 
                key={index}
                className="suggestion-item"
                onClick={() => handleSuggestionClick(suggestion)}
                role="option"
                aria-selected="false"
              >
                {suggestion}
              </li>
            ))}
          </ul>
        )}
      </form>
    </div>
  );
 };
 export default CommandLine;