Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

frameworks/AutoComplete.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useRef, useEffect } from 'react';
+import './AutoComplete.css';
+
+const OPTIONS = ['北京', '上海', '广州', '深圳', '杭州', '成都', '重庆', '武汉', '西安', '南京', '苏州', '天津'];
+
+export default function AutoComplete({ modelValue = '', options = OPTIONS, placeholder = '输入关键字…', onChange, onSelect }) {
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(-1);
+  const [list, setList] = useState([]);
+  const root = useRef(null);
+
+  useEffect(() => {
+    const onDoc = (e) => { if (root.current && !root.current.contains(e.target)) setOpen(false); };
+    document.addEventListener('click', onDoc);
+    return () => document.removeEventListener('click', onDoc);
+  }, []);
+
+  const onInput = (e) => {
+    const q = e.target.value;
+    if (onChange) onChange(q);
+    setActive(-1);
+    setList(q ? options.filter((d) => d.indexOf(q) >= 0) : []);
+    setOpen(true);
+  };
+  const highlight = (it) => {
+    const q = modelValue.trim();
+    if (!q) return it;
+    return it.replace(new RegExp('(' + q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'g'), '<mark>$1</mark>');
+  };
+  const move = (d) => { setOpen(true); setActive((a) => Math.max(-1, Math.min(list.length - 1, a + d))); };
+  const choose = (i) => { if (onChange) onChange(list[i]); if (onSelect) onSelect(list[i]); setOpen(false); };
+
+  return (
+    <div className="aa-autocomplete" ref={root}>
+      <input
+        className="aa-autocomplete-input"
+        value={modelValue}
+        placeholder={placeholder}
+        onChange={onInput}
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }
+          else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }
+          else if (e.key === 'Enter' && active >= 0) choose(active);
+          else if (e.key === 'Escape') setOpen(false);
+        }}
+      />
+      {open && list.length > 0 && (
+        <div className="aa-autocomplete-pop">
+          {list.map((it, i) => (
+            <div
+              key={i}
+              className={'aa-autocomplete-item' + (i === active ? ' is-active' : '')}
+              onClick={() => choose(i)}
+              dangerouslySetInnerHTML={{ __html: highlight(it) }}
+            />
+          ))}
+        </div>
+      )}
+      {open && modelValue && list.length === 0 && (
+        <div className="aa-autocomplete-pop"><div className="aa-autocomplete-empty">无匹配结果</div></div>
+      )}
+    </div>
+  );
+}