sort params

vutran · Aug 1, 2018 · 210c07a · 210c07a
1 parent 3f574e7
commit 210c07a
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 45 deletions.
diff --git a/src/Input.tsx b/src/Input.tsx
@@ -6,17 +6,17 @@ interface Props extends React.HTMLProps<HTMLInputElement> {}
 interface State {}
 
 const INPUT_STYLE: React.CSSProperties = {
-  width: '100%',
-  height: DEFAULT_HEIGHT,
+  borderColor: COLORS.DARKGRAY,
+  borderStyle: 'solid',
+  borderWidth: 1,
+  boxSizing: 'border-box',
   fontSize: 24,
+  height: DEFAULT_HEIGHT,
   lineHeight: '24px',
-  boxSizing: 'border-box',
   outline: 0,
-  borderWidth: 1,
-  borderStyle: 'solid',
-  borderColor: COLORS.DARKGRAY,
   paddingLeft: 15,
   paddingRight: 15,
+  width: '100%',
 };
 
 export default class Input extends React.PureComponent<Props, State> {

diff --git a/src/Omnibar.tsx b/src/Omnibar.tsx
@@ -13,22 +13,20 @@ export default class Omnibar<T> extends React.PureComponent<
   // TODO - fix generic container
   static defaultProps: Omnibar.Props<any> = {
     children: null,
-    render: null, // alias of children
-    extensions: [], // @deprecated (refer to withEngines HOC)
+    extensions: [],
+    inputDelay: 100,
     maxResults: null,
     maxViewableResults: null,
-    inputDelay: 100,
-
-    // style props
+    render: null, // alias of children
     resultStyle: {},
     rootStyle: { position: 'relative' },
   };
 
   state: Omnibar.State<T> = {
+    displayResults: false,
+    hoveredIndex: -1,
     results: [],
     selectedIndex: 0,
-    hoveredIndex: -1,
-    displayResults: false,
   };
 
   constructor(props: Omnibar.Props<T>) {
@@ -162,21 +160,21 @@ export default class Omnibar<T> extends React.PureComponent<
       <div style={rootStyle}>
         <Input
           {...rest}
-          onChange={this.handleChange}
-          onKeyDown={this.handleKeyDown}
           onBlur={this.handleBlur}
+          onChange={this.handleChange}
           onFocus={this.handleFocus}
+          onKeyDown={this.handleKeyDown}
         />
         {this.state.displayResults && (
           <Results
             children={render}
-            selectedIndex={this.state.selectedIndex}
             items={this.state.results}
             maxHeight={maxHeight}
-            style={resultStyle}
+            onClickItem={this.handleClickItem}
             onMouseEnterItem={this.handleMouseEnterItem}
             onMouseLeave={this.handleMouseLeave}
-            onClickItem={this.handleClickItem}
+            selectedIndex={this.state.selectedIndex}
+            style={resultStyle}
           />
         )}
       </div>

diff --git a/src/Results.tsx b/src/Results.tsx
@@ -5,22 +5,22 @@ import { COLORS } from './constants';
 interface Props<T> {
   // results renderer function
   children?: Omnibar.ResultRenderer<T>;
-  // the currently selected index
-  selectedIndex: number;
   // list of result items
   items: Array<T>;
+  // max container height
+  maxHeight?: React.CSSLength;
+  // onClick callback
+  onClickItem?: (e: any /* Event */) => void;
   // onMouseEnter callback
   onMouseEnter?: (e: any /* Event */) => void;
-  // onMouseLeave callback
-  onMouseLeave?: (e: any /* Event */) => void;
   // onMouseEnter item callback
   onMouseEnterItem?: (e: any /* Event */) => void;
+  // onMouseLeave callback
+  onMouseLeave?: (e: any /* Event */) => void;
   // onMouseLeave item callback
   onMouseLeaveItem?: (e: any /* Event */) => void;
-  // onClick callback
-  onClickItem?: (e: any /* Event */) => void;
-  // max container height
-  maxHeight?: React.CSSLength;
+  // the currently selected index
+  selectedIndex: number;
   // optional override container style
   style?: React.CSSProperties;
 }

diff --git a/src/hoc.tsx b/src/hoc.tsx
@@ -75,11 +75,7 @@ export function withVoice<T extends typeof Omnibar>(
 
       return (
         <div style={base}>
-          <Component
-            {...this.props}
-            defaultValue={this.state.value}
-            style={style}
-          />
+          <Component {...this.props} value={this.state.value} style={style} />
           <button onClick={this.speak} style={mic}>
             <Microphone width={24} height={24} active={this.state.isSpeaking} />
           </button>

diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -24,34 +24,34 @@ declare namespace Omnibar {
   ) => JSX.Element;
 
   interface Props<T> {
+    // optionally make the Omnibar autoFocus
+    autoFocus?: boolean;
     // results renderer function
     children?: ResultRenderer<T>;
-    // alias of children
-    render?: ResultRenderer<T>;
-    // optional input bar style override
-    style?: React.CSSProperties;
+    // optional default value
+    value?: string;
     // list of extensions
     extensions?: Array<Omnibar.Extension<T>>;
+    // optional input delay override
+    inputDelay?: number;
     // max items
     maxResults?: number;
     // max items to display in view
     maxViewableResults?: number;
+    // optional action override
+    onAction?: <T>(item: T) => void;
+    // triggered when a query is made
+    onQuery?: <T>(items: Array<T>) => void;
     // optional input placeholder text
     placeholder?: string;
+    // alias of children
+    render?: ResultRenderer<T>;
     // optional result list style override
     resultStyle?: React.CSSProperties;
     // optional style on the root element
     rootStyle?: React.CSSProperties;
-    // triggered when a query is made
-    onQuery?: <T>(items: Array<T>) => void;
-    // optional action override
-    onAction?: <T>(item: T) => void;
-    // optional input delay override
-    inputDelay?: number;
-    // optional default value
-    defaultValue?: string;
-    // optionally make the Omnibar autoFocus
-    autoFocus?: boolean;
+    // optional input bar style override
+    style?: React.CSSProperties;
   }
 
   interface State<T> {