переделка компании и департамента

2026-07-29 15:50:53 +05:00
parent 8ef7acd93f
commit 3ed399becc
11 changed files with 446 additions and 20 deletions
@@ -0,0 +1,137 @@
+import * as React from 'react';
+import styles from './SearchableSelect.module.scss';
+import { Icon } from './Icon';
+
+export interface ISearchableOption {
+  value: string;
+  label: string;
+  /** Второстепенная строка под названием — например, компания у отдела. */
+  sublabel?: string;
+}
+
+export interface ISearchableSelectProps {
+  options: ISearchableOption[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  /** Показывать пункт «очистить» — для необязательных полей. */
+  allowClear?: boolean;
+  clearLabel?: string;
+}
+
+export const SearchableSelect: React.FC<ISearchableSelectProps> = ({
+  options,
+  value,
+  onChange,
+  placeholder = 'Выберите значение',
+  searchPlaceholder = 'Поиск...',
+  disabled,
+  loading,
+  allowClear,
+  clearLabel = 'Не выбрано'
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState('');
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const searchRef = React.useRef<HTMLInputElement>(null);
+
+  const selected = options.filter(o => o.value === value)[0];
+
+  // Поиск на клиенте: справочник целиком уже загружен, отделов ~700 —
+  // фильтровать в памяти дешевле, чем ходить на сервер на каждый символ.
+  const filtered = React.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter(o =>
+      o.label.toLowerCase().indexOf(q) !== -1 ||
+      (o.sublabel ? o.sublabel.toLowerCase().indexOf(q) !== -1 : false)
+    );
+  }, [options, query]);
+
+  React.useEffect(() => {
+    if (!open) return;
+
+    const onDocumentMouseDown = (e: MouseEvent): void => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+
+    document.addEventListener('mousedown', onDocumentMouseDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', onDocumentMouseDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  React.useEffect(() => {
+    if (open && searchRef.current) searchRef.current.focus();
+  }, [open]);
+
+  const toggle = (): void => {
+    if (disabled) return;
+    setQuery('');
+    setOpen(!open);
+  };
+
+  const pick = (next: string): void => {
+    onChange(next);
+    setOpen(false);
+  };
+
+  return (
+    <div className={styles.root} ref={rootRef}>
+      <button
+        type="button"
+        className={`${styles.trigger} ${open ? styles.open : ''}`}
+        onClick={toggle}
+        disabled={disabled || loading}
+      >
+        <span className={`${styles.value} ${selected ? '' : styles.placeholder}`}>
+          {loading ? 'Загрузка справочника...' : (selected ? selected.label : placeholder)}
+        </span>
+        <Icon name="chevron-down" size="sm" className={styles.chevron} />
+      </button>
+
+      {open && (
+        <div className={styles.menu}>
+          <input
+            ref={searchRef}
+            className={styles.search}
+            placeholder={searchPlaceholder}
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+          />
+          <div className={styles.list}>
+            {filtered.length === 0 && <div className={styles.empty}>Ничего не найдено</div>}
+            {filtered.map(opt => (
+              <button
+                type="button"
+                key={opt.value}
+                className={`${styles.item} ${opt.value === value ? styles.selected : ''}`}
+                onClick={() => pick(opt.value)}
+              >
+                {opt.label}
+                {opt.sublabel && <span className={styles.itemSub}>{opt.sublabel}</span>}
+              </button>
+            ))}
+          </div>
+          {allowClear && value && (
+            <div className={styles.clear}>
+              <button type="button" className={styles.item} onClick={() => pick('')}>
+                {clearLabel}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};