ui: better config page layout

packages/ui-default/components/autocomplete/CustomSelectAutoComplete.tsx

@@ -1,7 +1,7 @@
+import { CustomSelectAutoComplete as CustomSelectAutoCompleteFC } from '@hydrooj/components';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import AutoComplete, { AutoCompleteOptions } from '.';
-import CustomSelectAutoCompleteFC from './components/CustomSelectAutoComplete';
 
 interface CustomSelectOptions {
   data: any[]

packages/ui-default/components/autocomplete/autocomplete.page.styl

@@ -1,109 +0,0 @@
-.autocomplete-dummy
-  display: none !important
-
-.autocomplete-wrapper
-  border: 1px solid #d9d9d9
-  padding: 1px
-  display: flex
-  flex-wrap: wrap
-  overflow-y: auto
-
-  form-styles()
-  background-color: $input-background-color
-  outline: $input-outline
-  transition: outline-color .2s, border-color .2s
-  transition-timing-function: ease-out-cubic
-
-  &:focus, &.focused
-    border-color: $input-focus-border-color
-    outline: $input-focus-outline
-    outline-offset: 0
-    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2)
-
-  // Overwrite, for IE compatibility
-  &:read-only
-    outline: 0
-
-  &:disabled
-    opacity: 0.5
-
-  &:hover
-    border-color: #40a9ff
-
-  input
-    background-color: $input-background-color
-    color: rgba(0,0,0,.85)
-    height: 30px
-    box-sizing: border-box
-    padding: 4px 6px
-    width: 0
-    min-width: 30px
-    flex-grow: 1
-    border: 0
-    margin: 0
-    outline: 0
-
-.autocomplete-tag
-  display: flex
-  align-items: center
-  height: 24px
-  margin: 2px
-  line-height: 22px
-  background-color: #fafafa
-  border: 1px solid #e8e8e8
-  border-radius: 2px
-  box-sizing: content-box
-  padding: 0 4px 0 10px
-  outline: 0
-  overflow: hidden
-
-  &:focus
-    border-color: #40a9ff
-    background-color: #e6f7ff
-
-  &>div
-    overflow: hidden
-    white-space: nowrap
-    text-overflow: ellipsis
-
-  &>span.bp5-icon>svg
-    font-size: 12px
-    cursor: pointer
-    padding: 4px
-
-.autocomplete-list
-  min-width: 300px
-  margin: 2px 0 0
-  padding: 0
-  position: absolute
-  list-style: none
-  background-color: #fff
-  overflow: auto
-  max-height: 500px
-  border-radius: 4px
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)
-  z-index: 999
-
-  li
-    padding: 5px 12px
-    display: flex
-
-    &>div
-      flex-grow: 1
-
-    &>span.bp5-icon>svg
-      color: transparent
-
-    &[aria-selected='true']
-      background-color: #fafafa
-      font-weight: 600
-
-      &>span.bp5-icon>svg
-        color: #1890ff
-
-    &[data-focus='true']
-      background-color: #e6f7ff
-      cursor: pointer
-
-      &>span.bp5-icon>svg
-        color: currentColor

packages/ui-default/components/autocomplete/components/AutoComplete.tsx

@@ -1,349 +0,0 @@
-import { debounce, uniqueId } from 'lodash';
-import React, {
-  forwardRef, useEffect,
-  useImperativeHandle, useRef, useState,
-} from 'react';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import Icon from 'vj/components/react/IconComponent';
-
-export interface AutoCompleteProps<Item> {
-  width?: string;
-  /**
-   * if you need fix height, set to at least "30px"
-   * for Hydro, no less then "34px" can be better
-   */
-  height?: string;
-  disabled?: boolean;
-  placeholder?: string;
-  disabledHint?: string;
-  listStyle?: React.CSSProperties;
-  cacheKey?: string;
-  renderItem?: (item: Item) => any;
-  queryItems?: (query: string) => Promise<Item[]> | Item[];
-  fetchItems?: (ids: string[]) => Promise<Item[]> | Item[];
-  itemText?: (item: Item) => string;
-  itemKey?: (item: Item) => string;
-  onChange?: (value: string) => any;
-  multi?: boolean;
-  draggable?: boolean;
-  selectedKeys?: string[];
-  allowEmptyQuery?: boolean;
-  freeSolo?: boolean;
-  freeSoloConverter?: (value: string) => string;
-}
-
-export interface AutoCompleteHandle<Item> {
-  getSelectedItems: () => Item[];
-  getSelectedItemKeys: () => string[];
-  getSelectedItemsAsString: () => string;
-  setSelectedItems: (items: Item[]) => void;
-  getQuery: () => string;
-  setQuery: (query: string) => void;
-  setSelectedKeys: (keys: string[]) => void;
-  triggerQuery: () => any;
-  closeList: () => void;
-  /** returns comma seperated value text */
-  getValue: () => string;
-  /** return value detail */
-  getValueArray: () => Item[];
-  clear: () => void;
-  focus: () => void;
-}
-
-const superCache = {};
-
-function DraggableSelection({
-  type, id, move, children, ...props
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [isDragging, drag] = useDrag<{ id: string }, any, boolean>(() => ({
-    type,
-    item: { id },
-    collect: (m) => m.isDragging(),
-  }));
-  const [, drop] = useDrop({
-    accept: type,
-    hover: (item: { id: string }) => {
-      if (!ref.current) return;
-      move(item.id, id);
-    },
-  });
-  drag(drop(ref));
-  return (
-    <div ref={ref} {...props} style={{ opacity: isDragging ? 0.2 : 1 }}>
-      {children}
-    </div>
-  );
-}
-
-// eslint-disable-next-line prefer-arrow-callback
-const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, ref: React.Ref<AutoCompleteHandle<T>>) {
-  const {
-    multi = false, width = '100%', height = 'auto',
-    freeSolo = false, allowEmptyQuery = false, listStyle = {}, // eslint-disable-line @eslint-react/no-unstable-default-props
-    disabled = false, disabledHint = '', draggable = multi,
-  } = props;
-  const queryItems = props.queryItems ?? (() => []);
-  const renderItem = props.renderItem ?? ((item) => item);
-  const itemText = props.itemText ?? ((item) => item.toString());
-  const itemKey = props.itemKey ?? itemText;
-  const onChange = props.onChange ?? (() => { });
-  const freeSoloConverter = freeSolo ? props.freeSoloConverter ?? ((i) => i) : ((i) => i);
-
-  const [focused, setFocused] = useState(false); // is focused
-  const [selected, setSelected] = useState([]); // selected items
-  const [selectedKeys, setSelectedKeys] = useState(props.selectedKeys || []); // keys of selected items
-  const [itemList, setItemList] = useState([]); // items list
-  const [currentItem, setCurrentItem] = useState(null); // index of current item (in item list)
-  const [rerender, setRerender] = useState(false);
-  const [draggableId] = useState(uniqueId());
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const listRef = useRef<HTMLUListElement>(null);
-
-  let [queryCache, valueCache] = [useRef({}).current, useRef({}).current];
-  if (props.cacheKey) {
-    superCache[props.cacheKey] ||= { query: {}, value: {} };
-    queryCache = superCache[props.cacheKey].query;
-    valueCache = superCache[props.cacheKey].value;
-  }
-
-  const queryList = async (query) => {
-    if (!query && !allowEmptyQuery) {
-      setItemList([]);
-      setCurrentItem(null);
-      return;
-    }
-    queryCache[query] ||= await queryItems(query);
-    for (const item of queryCache[query]) valueCache[itemKey(item)] = item;
-    setItemList(queryCache[query]);
-    setCurrentItem((!freeSolo && queryCache[query].length) ? 0 : null);
-  };
-
-  useEffect(() => {
-    setSelectedKeys(props.selectedKeys || []);
-  }, [JSON.stringify(props.selectedKeys)]);
-  const dispatchChange = () => {
-    if (!multi) onChange(inputRef.current?.value);
-    else onChange(selectedKeys.filter((v) => v?.trim().length).join(','));
-  };
-
-  let first = !multi;
-  useEffect(() => {
-    if (first) first = false;
-    else dispatchChange();
-    if (!multi) return; // Load pre-selected items only in multi mode
-    const ids = [];
-    for (const key of selectedKeys) if (!valueCache[key]) ids.push(key);
-    if (!ids.length) return;
-    Promise.resolve(props.fetchItems(ids)).then((items) => {
-      for (const item of items) valueCache[itemKey(item)] = item;
-      setRerender(!rerender);
-    });
-  }, [selectedKeys, multi]);
-
-  const handleInputChange = debounce((e?) => queryList(e ? e.target.value : ''), 300);
-
-  const toggleItem = (item: T, key = itemKey(item), preserve = false) => {
-    const shouldKeepOpen = multi && allowEmptyQuery && inputRef.current.value === '';
-    if (multi) {
-      const idx = selectedKeys.indexOf(key);
-      if (idx !== -1) {
-        setSelected((s) => {
-          const newSelected = [...s];
-          newSelected.splice(idx, 1);
-          return newSelected;
-        });
-        setSelectedKeys((s) => {
-          const newSelectedKeys = [...s];
-          newSelectedKeys.splice(idx, 1);
-          return newSelectedKeys;
-        });
-      } else {
-        setSelected((s) => [...s, item]);
-        setSelectedKeys((s) => [...s, key]);
-      }
-      if (!preserve) inputRef.current.value = '';
-      inputRef.current.focus();
-    } else {
-      setSelected([item]);
-      setSelectedKeys([key]);
-      inputRef.current.value = key;
-    }
-    dispatchChange();
-    if (!shouldKeepOpen) {
-      setItemList([]);
-      setCurrentItem(null);
-    }
-  };
-
-  const handleInputKeyDown = (e) => {
-    const { key, target } = e;
-    if (key === 'Escape') {
-      setItemList([]);
-      setCurrentItem(null);
-      return;
-    }
-    if (key === 'Enter' || key === ',') {
-      e.preventDefault();
-      if (currentItem !== null) {
-        toggleItem(itemList[currentItem]);
-        return;
-      }
-      if (freeSolo && target.value !== '') {
-        toggleItem(freeSoloConverter(target.value));
-      }
-      return;
-    }
-    if (key === 'Backspace') {
-      if (target.value.length) return;
-      if (selectedKeys.length) {
-        setSelected((s) => s.slice(0, -1));
-        setSelectedKeys((s) => s.slice(0, -1));
-      }
-      return;
-    }
-    if (key === 'ArrowUp') {
-      e.preventDefault();
-      if (itemList.length === 0) return;
-      const idx = (currentItem ?? 0) - 1;
-      const newIdx = idx < 0 ? itemList.length - 1 : idx;
-      setCurrentItem(newIdx);
-      listRef.current.children[newIdx].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      return;
-    }
-    if (key === 'ArrowDown') {
-      e.preventDefault();
-      if (itemList.length === 0) return;
-      const idx = (currentItem ?? itemList.length - 1) + 1;
-      const newIdx = idx >= itemList.length ? 0 : idx;
-      setCurrentItem(newIdx);
-      listRef.current.children[newIdx].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      // eslint-disable-next-line no-useless-return
-      return;
-    }
-    // TODO: handle other keys
-  };
-
-  useImperativeHandle(ref, () => ({
-    getSelectedItems: () => selected,
-    getSelectedItemKeys: () => [...selectedKeys, inputRef.current?.value].filter((v) => v?.trim().length),
-    getSelectedItemsAsString: () => [...selectedKeys, inputRef.current?.value].filter((v) => v?.trim().length).join(','),
-    setSelectedItems: (items) => {
-      setSelected(items);
-      setSelectedKeys(items.map((i) => itemKey(i)));
-      if (!multi && inputRef.current) inputRef.current.value = items.map((i) => itemKey(i)).join(',');
-    },
-    getQuery: () => inputRef.current?.value,
-    setQuery: (query) => {
-      if (inputRef.current) inputRef.current.value = query;
-    },
-    setSelectedKeys: (keys) => setSelectedKeys(keys),
-    triggerQuery: () => queryList(inputRef.current?.value),
-    closeList: () => {
-      setItemList([]);
-      setCurrentItem(null);
-    },
-    getValue: () => (multi ? selectedKeys.join(',') : (inputRef.current.value ?? '')),
-    getValueArray: () => (multi ? selected : [inputRef.current?.value].filter((i) => !!i)),
-    clear: () => {
-      setSelected([]);
-      setSelectedKeys([]);
-      if (inputRef.current) inputRef.current.value = '';
-    },
-    focus: () => {
-      setFocused(true);
-      inputRef.current?.focus();
-    },
-  }), [selected, selectedKeys, inputRef, multi]);
-
-  const move = (dragId: string, hoverId: string) => {
-    if (dragId === hoverId || !draggable) return;
-    const dragIndex = selectedKeys.indexOf(dragId);
-    const hoverIndex = selectedKeys.indexOf(hoverId);
-    setSelectedKeys((s) => {
-      const a = [...s];
-      a.splice(dragIndex, 1);
-      a.splice(hoverIndex, 0, s[dragIndex]);
-      return a;
-    });
-  };
-
-  return (
-    <div className="autocomplete-container" style={{ display: 'inline-block', width: '100%', marginBottom: '1rem' }}>
-      <div
-        className={focused ? 'autocomplete-wrapper focused' : 'autocomplete-wrapper'}
-        style={{ width, height }}
-      >
-        <DndProvider backend={HTML5Backend}>
-          {multi && selectedKeys.map((key) => {
-            const item = valueCache[key];
-            return (
-              <DraggableSelection type={draggableId} id={key} move={move} className="autocomplete-tag" key={item ? key : `draft-${key}`}>
-                <div>{item ? itemText(item) : key}</div>
-                <Icon name="close" onClick={() => toggleItem(item, key, true)} />
-              </DraggableSelection>
-            );
-          })}
-          <input
-            ref={inputRef}
-            autoComplete="off"
-            hidden={disabled}
-            onChange={(e) => {
-              dispatchChange();
-              handleInputChange(e);
-            }}
-            onFocus={() => {
-              if (allowEmptyQuery) handleInputChange();
-              setFocused(true);
-            }}
-            onPaste={async (e) => {
-              if (!multi) return;
-              const text = e.clipboardData.getData('text');
-              if (!text || (!text.includes(',') && !text.includes('，'))) return;
-              e.preventDefault();
-              const ids = text.replace(/，/g, ',').split(',').filter((v) => v?.trim().length && !selectedKeys.includes(v));
-              if (!ids.length) return;
-              const fetched = await props.fetchItems(ids);
-              for (const item of fetched) valueCache[itemKey(item)] = item;
-              setSelected([...selected, ...fetched]);
-              setSelectedKeys([...selectedKeys, ...fetched.map((val) => itemKey(val))]);
-            }}
-            placeholder={props.placeholder}
-            onBlur={() => setFocused(false)}
-            onKeyDown={handleInputKeyDown}
-            defaultValue={multi ? '' : selectedKeys.join(',')}
-          />
-        </DndProvider>
-      </div>
-      {disabled && (
-        <input
-          disabled
-          autoComplete="off"
-          value={disabledHint}
-        />
-      )}
-      {focused && itemList.length > 0 && (
-        <ul ref={listRef} className="autocomplete-list" style={listStyle} onMouseDown={(e) => e.preventDefault()}>
-          {itemList.map((item, idx) => (
-            <li
-              key={itemKey(item)}
-              onClick={() => toggleItem(item)}
-              onMouseMove={() => setCurrentItem(idx)}
-              data-selected={selectedKeys.includes(itemKey(item))}
-              data-focus={idx === currentItem}
-            >
-              <div>{renderItem(item)}</div>
-              {selectedKeys.includes(itemKey(item)) && <Icon name="check" />}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}) as (<T>(props: AutoCompleteProps<T> & { ref: React.Ref<AutoCompleteHandle<T>> }) => React.ReactElement) & React.FC;
-
-AutoComplete.displayName = 'AutoComplete';
-
-export default AutoComplete;

packages/ui-default/components/autocomplete/components/CustomSelectAutoComplete.tsx

@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import AutoComplete from './AutoComplete';
-
-type DefaultProps = {
-  _id: string;
-  name: string;
-} & string;
-
-const CustomSelectAutoComplete = React.forwardRef<any, any>((props, ref) => (
-  <AutoComplete<DefaultProps>
-    ref={ref as any}
-    fetchItems={(keys) => props.data.filter((i) => (i._id ? keys.includes(i._id) : keys.includes(i)))}
-    queryItems={(query) => props.data.filter((i) => (i.name || i).toString().toLowerCase().includes(query.toLowerCase()))}
-    itemText={(item) => `${item.name || item}`}
-    itemKey={(item) => `${item._id?.toString() || item.name || item}`}
-    renderItem={(item) => `${item.name || item}`}
-    allowEmptyQuery
-    {...props}
-  />
-));
-
-CustomSelectAutoComplete.propTypes = {
-  width: PropTypes.string,
-  height: PropTypes.string,
-  listStyle: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  multi: PropTypes.bool,
-  selectedKeys: PropTypes.arrayOf(PropTypes.string),
-  allowEmptyQuery: PropTypes.bool,
-  freeSolo: PropTypes.bool,
-  freeSoloConverter: PropTypes.func,
-  data: PropTypes.arrayOf(PropTypes.any),
-};
-
-CustomSelectAutoComplete.displayName = 'CustomSelectAutoComplete';
-
-CustomSelectAutoComplete.defaultProps = {
-  width: '100%',
-  height: 'auto',
-  listStyle: {},
-  multi: false,
-  selectedKeys: [],
-  freeSolo: false,
-  freeSoloConverter: (input) => input,
-};
-
-export default CustomSelectAutoComplete;

packages/ui-default/components/autocomplete/components/DomainSelectAutoComplete.tsx

@@ -1,8 +1,8 @@
+import { AutoComplete, AutoCompleteHandle, AutoCompleteProps } from '@hydrooj/components';
 import type { DomainDoc } from 'hydrooj/src/interface';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import { request } from 'vj/utils';
-import AutoComplete, { AutoCompleteHandle, AutoCompleteProps } from './AutoComplete';
 
 const DomainSelectAutoComplete = forwardRef<AutoCompleteHandle<DomainDoc>, AutoCompleteProps<DomainDoc>>((props, ref) => (
   <AutoComplete<DomainDoc>

packages/ui-default/components/autocomplete/components/FileSelectAutoComplete.tsx

@@ -1,6 +1,6 @@
+import { AutoComplete } from '@hydrooj/components';
 import PropTypes from 'prop-types';
 import React from 'react';
-import AutoComplete from './AutoComplete';
 
 type DefaultProps = {
   _id: string;

packages/ui-default/components/autocomplete/components/ProblemSelectAutoComplete.tsx

@@ -1,8 +1,8 @@
+import { AutoComplete, AutoCompleteHandle, AutoCompleteProps } from '@hydrooj/components';
 import type { ProblemDoc } from 'hydrooj/src/interface';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import { api, gql, request } from 'vj/utils';
-import AutoComplete, { AutoCompleteHandle, AutoCompleteProps } from './AutoComplete';
 
 const ProblemSelectAutoComplete = forwardRef<AutoCompleteHandle<ProblemDoc>, AutoCompleteProps<ProblemDoc>>((props, ref) => (
   <AutoComplete<ProblemDoc>

packages/ui-default/components/autocomplete/components/UserSelectAutoComplete.tsx

@@ -1,8 +1,8 @@
+import { AutoComplete, AutoCompleteHandle, AutoCompleteProps } from '@hydrooj/components';
 import type { Udoc } from 'hydrooj/src/interface';
 import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { api, gql } from 'vj/utils';
-import AutoComplete, { AutoCompleteHandle, AutoCompleteProps } from './AutoComplete';
 
 const UserSelectAutoComplete = forwardRef<AutoCompleteHandle<Udoc>, AutoCompleteProps<Udoc>>((props, ref) => (
   <AutoComplete<Udoc>

packages/ui-default/components/autocomplete/index.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import { AutoComplete as AutoCompleteFC } from '@hydrooj/components';
 import ReactDOM from 'react-dom/client';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import AutoCompleteFC from './components/AutoComplete';
 
 export interface AutoCompleteOptions<Multi extends boolean = boolean> {
   multi?: Multi;