[WIP] Динамическая загрузка автодополнений

fields/AutoComplete.tsx

@@ -5,7 +5,7 @@ import { AuthCtx as Ctx } from '~/context';
 import { FieldProps } from '~/create-form';
 import TextField from '~/fields/TextField';
 import { Props as TextFieldProps } from '~/fields/TextField';
-import { StandardProps } from '@material-ui/core';
+import { StandardProps, ListItem } from '@material-ui/core';
 import Icon from './Icon';
 import withStyles, { StyleRules } from '@material-ui/core/styles/withStyles';
 import { Theme } from '@material-ui/core/styles/createMuiTheme';
@@ -186,17 +186,29 @@ export default class AutoComplete<A=string> extends React.Component<Props<A> & {
     };
   };
 
+  handleSeeMore = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+//    const { query: { offset, limit } } = this.state;
+    this.dispatch({ tag: 'More' });
+  };
+  
   render() {
     const { className, fullWidth, children, ctx, source, debounce, renderItem, printItem, openOnFocus, openOnClick, suggestionProps, keepOpenAfterSelect, textFieldProps, classes, anchorEl, observable, ...rest } = this.props;
-    const { suggestions, open } = this.state;
+    const { suggestions, open, pending } = this.state;
     const rootClass = classNames(classes!.root, className, {
       [classes!.fullWidth!]: fullWidth
     });
 
+    const seeMoreLink = <ListItem>
+      <a href={"#"} onMouseDown={this.handleSeeMore}>{('See more')}</a>
+    </ListItem>;
+
     return <div {...rest} className={rootClass}>
       {!observable && (children ? React.cloneElement(children, this.childrenProps()) : <TextField {...this.childrenProps() as any} {...textFieldProps}/>)}
       <Suggestions
         {...suggestionProps}
+        pending={pending}
         ctx={ctx!}
         anchorEl={anchorEl || this.anchorEl || undefined}
         open={open}
@@ -204,6 +216,7 @@ export default class AutoComplete<A=string> extends React.Component<Props<A> & {
         renderSuggestion={renderItem || printItem}
         onSelect={this.handleSuggestionSelect}
         onVisibilityChange={this.handleVisibilityChnage}
+        after={seeMoreLink}
       />
     </div>;
   }

fields/AutoComplete/state-machine.ts

@@ -68,6 +68,7 @@ export type Action<A> =
   | { tag: 'Error', error: Err }
   | { tag: 'Search', value: string }
   | { tag: 'Offset', value: number }
+  | { tag: 'More' }
   | { tag: 'Query', query: AutoCompleteQuery }
   | { tag: 'Query/success', suggestions: A[], total: number, query: AutoCompleteQuery }
   | { tag: 'Focus' }
@@ -146,7 +147,11 @@ export function update<A>(ctx: Ctx<A>, action: Action<A>, state: State<A>): [Sta
       return [state, cmd.of<Action<A>>({ tag: 'Query', query: { ...state.query, offset: action.value } })];
     }
     case 'Search': {
-      return [state, cmd.of<Action<A>>({ tag: 'Query', query: { ...state.query, search: action.value } })];
+      return [state, cmd.of<Action<A>>({ tag: 'Query', query: { ...defaultQuery, search: action.value } })];
+    }
+    case 'More': {
+      const { query: { limit } } = state;
+      return [state, cmd.of<Action<A>>({ tag: 'Query', query: { ...state.query, limit: limit + 20 } })];
     }
     case 'Focus': {
       if (ctx.options.openOnFocus && !ctx.options.openOnClick) {

fields/Suggestions.tsx

@@ -22,6 +22,8 @@ export type Props<A=any> = StandardProps<React.HTMLProps<HTMLDivElement>, string
   marginThreshold?: number;
   pending?: boolean;
   dontMove?: boolean;
+  before?: React.ReactNode;
+  after?: React.ReactNode;
 
   // Callbacks
   onSelect?(a: A): void;
@@ -179,12 +181,12 @@ class Suggestions<A> extends React.Component<Props<A>, State> {
   }
 
   render() {
-    const { __, classes, open, pending, suggestions } = this.props;
+    const { __, classes, open, pending, suggestions, before, after } = this.props;
     const PaperProps = { ref: this.handlePaperRef, className: classes.paper };
     
     return <Modal className={classes.modal} open={!!open} onClose={this.handleClose} disableAutoFocus disableEnforceFocus disableRestoreFocus hideBackdrop>
       <Paper {...PaperProps}>
-        {!!suggestions.length && <MenuList className={classes.menu}>{this.renderSuggestions(suggestions)}</MenuList>}
+        {!!suggestions.length && <MenuList className={classes.menu}>{before}{this.renderSuggestions(suggestions)}{after}</MenuList>}
         {!suggestions.length && <div className={classes.empty}><span>{__('Nothing found…')}</span></div>}
         <PendingOverlay pending={pending || false}/>
       </Paper>