Merge pull request #2163 from metabase/limit-widget

fix up the LimitWidget and use it as a declarative UI component.

frontend/src/query_builder/GuiQueryEditor.jsx

@@ -8,6 +8,7 @@ import FilterList from './filters/FilterList.jsx';
 import FilterPopover from './filters/FilterPopover.jsx';
 import Icon from "metabase/components/Icon.jsx";
 import IconBorder from 'metabase/components/IconBorder.jsx';
+import LimitWidget from "./LimitWidget.jsx";
 import SortWidget from './SortWidget.jsx';
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
 
@@ -17,7 +18,6 @@ import Query from "metabase/lib/query";
 import cx from "classnames";
 import _ from "underscore";
 
-const LIMIT_OPTIONS = [undefined, 1, 10, 25, 100, 1000];
 
 export default class GuiQueryEditor extends Component {
     constructor(props, context) {
@@ -376,24 +376,6 @@ export default class GuiQueryEditor extends Component {
         }
     }
 
-    renderLimit() {
-        if (!this.props.features.limit) {
-            return;
-        }
-        return (
-            <div className="py1">
-                <div className="Query-label mb1">Limit:</div>
-                <ul className="Button-group Button-group--blue">
-                    {LIMIT_OPTIONS.map(count =>
-                        <li key={count || "None"} className={cx("Button", { "Button--active":  count == this.props.query.query.limit })} onClick={this.updateLimit.bind(null, count)}>
-                            {count || "None"}
-                        </li>
-                    )}
-                </ul>
-            </div>
-        );
-    }
-
     renderDataSection() {
         return (
             <div className={"GuiBuilder-section GuiBuilder-data flex align-center arrow-right"}>
@@ -460,7 +442,12 @@ export default class GuiQueryEditor extends Component {
                                     triggerClasses="flex align-center">
                     <div className="px3 py1">
                         {this.renderSort()}
-                        {this.renderLimit()}
+                        { this.props.features.limit &&
+                            <div className="py1">
+                                <div className="Query-label mb1">Limit:</div>
+                                <LimitWidget limit={this.props.query.query.limit} onChange={(count) => this.updateLimit(count)} />
+                            </div>
+                        }
                     </div>
                 </PopoverWithTrigger>
             </div>

frontend/src/query_builder/LimitWidget.jsx

 import React, { Component, PropTypes } from "react";
+import cx from "classnames";
 
-import Icon from "metabase/components/Icon.jsx";
-import SelectionModule from './SelectionModule.jsx';
 
 export default class LimitWidget extends Component {
-    constructor(props, context) {
-        super(props, context);
-        this.setLimit = this.setLimit.bind(this);
-    }
 
     static propTypes = {
         limit: PropTypes.number,
-        updateLimit: PropTypes.func.isRequired,
-        removeLimit: PropTypes.func.isRequired
+        onChange: PropTypes.func.isRequired,
     };
 
     static defaultProps = {
-        options: [
-            {key: "All rows", val: null},
-            {key: "1 row", val: 1},
-            {key: "10 rows", val: 10},
-            {key: "25 rows", val: 25},
-            {key: "50 rows", val: 50},
-            {key: "100 rows", val: 100},
-            {key: "1000 rows", val: 1000}
-        ]
+        options: [undefined, 1, 10, 25, 100, 1000]
     };
 
-    setLimit(value) {
-        if (this.props.limit !== value) {
-            this.props.updateLimit(value);
-        }
-    }
-
     render() {
         return (
-            <div className="Query-filter">
-                <div className='Filter-section'>
-                    <SelectionModule
-                        placeholder="How many rows?"
-                        items={this.props.options}
-                        display="key"
-                        selectedKey="val"
-                        selectedValue={this.props.limit || null}
-                        isInitiallyOpen={false}
-                        action={this.setLimit}
-                    />
-                </div>
-
-                <a onClick={this.props.removeLimit}>
-                    <Icon name='close' width="12px" height="12px" />
-                </a>
-            </div>
+            <ul className="Button-group Button-group--blue">
+                {this.props.options.map(count =>
+                    <li key={count || "None"} className={cx("Button", { "Button--active":  count === this.props.limit })} onClick={() => this.props.onChange(count)}>
+                        {count || "None"}
+                    </li>
+                )}
+            </ul>
         );
     }
 }