feat(Dropdown): Support magic default values (~last, ~first)

fixes #199

Author: kantord

src/components/dropdown/Dropdown.js

@@ -69,10 +69,18 @@ const DropdownComponent = Component({
       .append('select').attr('class', 'ds--select')
   },
   'render': (args, selection, data, item) => {
+    const value = args.state_handler.get_state()[args.variable]
+    if (value === args.default && args.default === '~first') {
+      args.state_handler.set_variable(args.variable, data[0].value)
+    }
+    if (value === args.default && args.default === '~last') {
+      args.state_handler.set_variable(args.variable, data.slice(-1)[0].value)
+    }
+
     item
       .selectAll('option').data(data).call(update_pattern)
     item
-      .property('value', args.state_handler.get_state()[args.variable])
+      .property('value', value)
     item
       .on('change', function() {
         args.state_handler.set_variable(args.variable, d3.select(this)

src/components/dropdown/Dropdown.test.js

@@ -183,5 +183,23 @@ describe('Text component', function() {
       'Correct number of items after change')
   })
 
+  const magic_default_values = [
+    {default_value: '~first', actual_value: 'fo'},
+    {default_value: '~last', actual_value: 'bar'},
+  ]
+  magic_default_values.forEach(
+    ({default_value, actual_value}) => it(
+      `automatic default variable ${default_value}`, () => {
+        const { set_variable } = call_render_with({'args': {'variable': 'var',
+          'default': default_value},
+        'state': {'var': default_value},
+        'data': [
+          { 'text': 'foo', 'value': 'fo' },
+          { 'text': 'bar', 'value': 'bar' },
+        ]})
+        set_variable.should.be.calledWith('var', actual_value)
+      }
+    ))
+
 })
 

src/manual_test.js

@@ -16,7 +16,7 @@ dashboard "Cereals":
     - attr:query: '.[0].a'
     - data: file:///foo/bar.csv
   - h2 text: "By calories"
-  - dropdown my_var=foo:
+  - dropdown my_var=~last:
     - {"value": "foo", "text": "Foo"}
     - {"value": "bar", "text": "Bar"}
   - 2 columns: