60 add n clicks previous

CHANGELOG.md

@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 2.2.0 - 2018-02-27
+### Added
+- Add `n_clicks_previous` prop to Flat and Raised buttons
+- Add new tests in `usage.py` to demonstrate behavior of new prop
+
 ## 2.1.2 - 2018-02-22
 ### Changed
 - Add `id` as a prop to `DropDownMenu`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sd-material-ui",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "StratoDem Analytics Dash implementation of material-ui components",
   "main": "lib/index.js",
   "repository": {

sd_material_ui/metadata.json

@@ -1482,6 +1482,17 @@
           "computed": false
         }
       },
+      "n_clicks_previous": {
+        "flowType": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "An integer that represents the previous number of times this element has been clicked",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
       "primary": {
         "flowType": {
           "name": "boolean"
@@ -1769,6 +1780,17 @@
           "computed": false
         }
       },
+      "n_clicks_previous": {
+        "flowType": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "An integer that represents the previous number of times this element has been clicked",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
       "overlayStyle": {
         "flowType": {
           "name": "Object"

sd_material_ui/version.py

@@ -9,4 +9,4 @@
 December 28, 2017
 """
 
-__version__ = '2.1.2'
+__version__ = '2.2.0'

src/components/FlatButton/FlatButton.react.js

@@ -46,6 +46,8 @@ type Props = {
   labelStyle?: Object,
   /** An integer that represents the number fo times that this element has been clicked */
   n_clicks?: number,
+  /** An integer that represents the previous number of times this element has been clicked */
+  n_clicks_previous?: number,
   /** If true, colors button according to primaryTextColor from the MuiTheme */
   primary?: boolean,
   /** Color for the ripple when the button is clicked */
@@ -75,6 +77,7 @@ const defaultProps = {
   labelPosition: 'after',
   labelStyle: {},
   n_clicks: 0,
+  n_clicks_previous: 0,
   primary: false,
   rippleColor: '',
   secondary: false,
@@ -91,6 +94,7 @@ export default class FlatButton extends Component<Props> {
   handleClick() {
     if (this.props.setProps) this.props.setProps({n_clicks: this.props.n_clicks + 1});
     if (this.props.fireEvent) this.props.fireEvent({event: 'click'});
+    if (this.props.setProps) this.props.setProps({n_clicks_previous: this.props.n_clicks + 1});
   }
 
   render() {

src/components/RaisedButton/RaisedButton.react.js

@@ -53,6 +53,8 @@ type Props = {
   labelStyle?: Object,
   /** An integer that represents the number of times this element has been clicked */
   n_clicks?: number,
+  /** An integer that represents the previous number of times this element has been clicked */
+  n_clicks_previous?: number,
   /** Override the inline style of the button overlay */
   overlayStyle?: Object,
   /** If true, the button will use the theme's primary color */
@@ -89,6 +91,7 @@ const defaultProps = {
   labelPosition: 'after',
   labelStyle: {},
   n_clicks: 0,
+  n_clicks_previous: 0,
   overlayStyle: {},
   primary: false,
   rippleStyle: {},
@@ -106,6 +109,7 @@ export default class RaisedButton extends React.Component<Props> {
   handleClick() {
     if (this.props.setProps) this.props.setProps({n_clicks: this.props.n_clicks + 1});
     if (this.props.fireEvent) this.props.fireEvent({event: 'click'});
+    if (this.props.setProps) this.props.setProps({n_clicks_previous: this.props.n_clicks + 1});
   }
 
   render() {

src/components/__tests__/FlatButton.test.js

@@ -61,4 +61,13 @@ describe('FlatButton', () => {
     component.find(MuiFlatButton).simulate('click');
     expect(mockProps).toHaveBeenCalledWith({n_clicks: 2});
   });
+
+  it('increments n_clicks_previous', () => {
+    const mockProps = jest.fn();
+    const component = shallow(
+      <FlatButton id='test-id' label='myButton' n_clicks={1} n_clicks_previous={1} setProps={mockProps} />);
+
+    component.find(MuiFlatButton).simulate('click');
+    expect(mockProps).toHaveBeenCalledWith({n_clicks_previous: 2});
+  });
 });

src/components/__tests__/RaisedButton.test.js

@@ -43,4 +43,13 @@ describe('RaisedButton', () => {
     component.find(MuiRaisedButton).simulate('click');
     expect(mockProps).toHaveBeenCalledWith({n_clicks: 2});
   });
+
+  it('increments n_clicks_previous', () => {
+    const mockProps = jest.fn();
+    const component = shallow(
+      <RaisedButton id='test-id' label='myButton' n_clicks={1} n_clicks_previous={1} setProps={mockProps} />);
+
+    component.find(MuiRaisedButton).simulate('click');
+    expect(mockProps).toHaveBeenCalledWith({n_clicks_previous: 2});
+  });
 });

usage.py

@@ -51,7 +51,7 @@
 
     # Test SDRaisedButton
     html.Div(children=[
-        html.P(id='output4', children=['n_clicks value: '])
+        html.P(id='output4', children=['n_clicks value: . n_clicks_previous value: '])
     ]),
     html.Div(children=[
         sd_material_ui.RaisedButton(id='input4',
@@ -64,10 +64,16 @@
 
     # Test SDFlatButton
     html.Div(children=[
-        html.P(id='output5', children=['n_clicks value: '])
+        html.P(id='output5', children=['n_clicks value: . n_clicks_previous value: '])
     ]),
     sd_material_ui.FlatButton(id='input5', label='Click me', backgroundColor='orange'),
 
+    # Test buttons together to see which was clicked
+    html.Div(children=[
+        html.P(id='output4-5', children=['Which button was clicked? ']),
+        html.P(id='output4-5-b', children=['Clicked values for flat () and raised () buttons'])
+    ]),
+
     spacer,
 
     # Test for SDDrawer (docked, secondary)
@@ -183,25 +189,63 @@ def show_non_modal_dialog(non_modal_click: int, open_state: bool):
 # Callback for SDRaisedButton
 @app.callback(
     dash.dependencies.Output('output4', 'children'),
-    [dash.dependencies.Input('input4', 'n_clicks')])
-def display_clicks_raised(n_clicks_raised: int):
+    [dash.dependencies.Input('input4', 'n_clicks')],
+    [dash.dependencies.State('input4', 'n_clicks_previous')])
+def display_clicks_raised(n_clicks_raised: int, n_clicks_raised_prev: int):
     if n_clicks_raised:
-        return ['n_clicks value: {}'.format(n_clicks_raised)]
+        return ['n_clicks value: {}. n_clicks_previous value: {}'.format(n_clicks_raised,
+                                                                         n_clicks_raised_prev)]
     else:
         return ['n_clicks value: ']
 
 
 # Callback for SDFlatButton
 @app.callback(
     dash.dependencies.Output('output5', 'children'),
-    [dash.dependencies.Input('input5', 'n_clicks')])
-def display_clicks_flat(n_clicks_flat: int):
+    [dash.dependencies.Input('input5', 'n_clicks')],
+    [dash.dependencies.State('input5', 'n_clicks_previous')])
+def display_clicks_flat(n_clicks_flat: int, n_clicks_flat_prev: int):
     if n_clicks_flat:
-        return ['n_clicks value: {}'.format(n_clicks_flat)]
+        return ['n_clicks value: {}. n_clicks_prev value: {}'.format(n_clicks_flat,
+                                                                     n_clicks_flat_prev)]
     else:
         return ['n_clicks value: ']
 
 
+# Callback for combined button test
+@app.callback(
+    dash.dependencies.Output('output4-5', 'children'),
+    [dash.dependencies.Input('input4', 'n_clicks'),
+     dash.dependencies.Input('input5', 'n_clicks')],
+    [dash.dependencies.State('input4', 'n_clicks_previous'),
+     dash.dependencies.State('input5', 'n_clicks_previous')])
+def determine_button_callback(raised_n_clicks: int, flat_n_clicks: int,
+                              raised_n_clicks_prev: int, flat_n_clicks_prev: int) -> list:
+    if raised_n_clicks is not None and not raised_n_clicks_prev:
+        return ['Which button was clicked? Raised button']
+    elif flat_n_clicks is not None and not flat_n_clicks_prev:
+        return ['Which button was clicked? Flat button']
+    elif raised_n_clicks > raised_n_clicks_prev:
+        return ['Which button was clicked? Raised button']
+    elif flat_n_clicks > flat_n_clicks_prev:
+        return ['Which button was clicked? Flat button']
+    else:
+        return ['Which button was clicked? ']
+
+
+# Callback for combined button test secondary
+@app.callback(
+    dash.dependencies.Output('output4-5-b', 'children'),
+    [dash.dependencies.Input('input4', 'n_clicks'),
+     dash.dependencies.Input('input5', 'n_clicks')],
+    [dash.dependencies.State('input4', 'n_clicks_previous'),
+     dash.dependencies.State('input5', 'n_clicks_previous')])
+def determine_button_callback(raised_n_clicks: int, flat_n_clicks: int,
+                              raised_n_clicks_prev: int, flat_n_clicks_prev: int) -> list:
+    return ['Clicked values for flat ({}-{}) and raised ({}-{}) buttons'.format(
+        flat_n_clicks, flat_n_clicks_prev, raised_n_clicks, raised_n_clicks_prev)]
+
+
 # Callback for SDDrawer (docked, secondary)
 @app.callback(
     dash.dependencies.Output('output6', 'open'),
@@ -280,5 +324,4 @@ def dropdown_callback(value, options):
 
 
 if __name__ == '__main__':
-    print(sd_material_ui.BottomNavigation.__doc__)
     app.run_server(debug=True)