Merge pull request #57 from unchartedsoftware/feature/9

Token editing

src/components/search-bar.jsx

@@ -18,7 +18,9 @@ export class SearchBar extends Component {
       machineTemplate: undefined,
       machines: undefined,
       active: false,
+      editing: false,
       focused: false,
+      flashActive: false,
       tokenXIcon: '&times',
       onQueryChanged: () => {},
       onSuggestionsChanged: () => {},
@@ -170,6 +172,7 @@ export class SearchBar extends Component {
     if (this.state.active) {
       return (<Token
         active
+        flash={this.state.flashActive}
         tokenXIcon={this.state.tokenXIcon}
         machine={activeMachine}
         builders={builders}
@@ -312,7 +315,10 @@ export class SearchBar extends Component {
     const oldState = this.state.activeMachine.state;
     const newState = this.state.activeMachine.rewind();
     if (oldState === newState) {
-      this.setState({active: false});
+      if (this.state.editing) {
+        this.queryChanged(this.state.editing);
+      }
+      this.setState({active: false, editing: false, flashActive: false});
     }
   }
 
@@ -328,6 +334,8 @@ export class SearchBar extends Component {
   onEndToken (v) {
     const oldQueryValues = this.state.tokenValues;
     this.setState({
+      editing: false,
+      flashActive: false,
       tokenValues: [...this.state.tokenValues, v],
       activeMachine: new TokenStateMachine(this.state.machineTemplate)
     });
@@ -341,6 +349,8 @@ export class SearchBar extends Component {
     if (idx === undefined) {
       this.setState({
         active: false,
+        editing: false,
+        flashActive: false,
         activeMachine: new TokenStateMachine(this.state.machineTemplate)
       });
     } else {
@@ -352,6 +362,27 @@ export class SearchBar extends Component {
     }
   }
 
+  @bind
+  editToken (idx) {
+    if (!this.state.active && idx >= 0) {
+      this.setState({
+        active: true,
+        editing: this.state.tokenValues,
+        activeMachine: new TokenStateMachine(this.state.machineTemplate, this.state.tokenValues[idx]),
+        tokenValues: [...this.state.tokenValues.slice(0, idx), ...this.state.tokenValues.slice(idx + 1)]
+      });
+    } else if (this.state.active) {
+      this.setState({
+        flashActive: false
+      });
+      setTimeout(() => {
+        this.setState({
+          flashActive: true
+        });
+      });
+    }
+  }
+
   @bind
   removeSuggestion (idx) {
     const oldSuggestions = this.state.suggestions;
@@ -384,12 +415,12 @@ export class SearchBar extends Component {
     this.state.onSuggestionsChanged(this.state.suggestions, oldSuggestionValues, newUnboxedValues, oldUnboxedValues);
   }
 
-  render (props, {focused, tokenValues, suggestions, builders, machineTemplate, activeMachine, tokenXIcon}) {
+  render (props, {active, focused, tokenValues, suggestions, builders, machineTemplate, activeMachine, tokenXIcon}) {
     return (
-      <div className={focused ? 'lex-box form-control focused' : 'lex-box form-control'} onKeyDown={this.onKeyDown} onClick={this.activate} tabIndex='0' ref={(a) => { this.searchBox = a; }}>
+      <div className={'lex-box form-control' + (active ? ' active' : '') + (focused ? ' focused' : '')} onKeyDown={this.onKeyDown} onClick={this.activate} tabIndex='0' ref={(a) => { this.searchBox = a; }}>
         {
           tokenValues.map((v, i) => {
-            return <Token tokenXIcon={tokenXIcon} machine={new TokenStateMachine(machineTemplate, v)} builders={builders} requestRemoval={this.removeToken} idx={i} />;
+            return <Token tokenXIcon={tokenXIcon} machine={new TokenStateMachine(machineTemplate, v)} builders={builders} requestRemoval={this.removeToken} requestEdit={this.editToken} idx={i} />;
           })
         }
         {

src/components/token.jsx

@@ -11,13 +11,15 @@ export class Token extends Component {
       idx: undefined,
       active: false,
       focused: false,
+      flash: false,
       suggestion: false,
       machine: undefined,
       builders: undefined,
       stateArray: [],
       tokenXIcon: '&times',
       requestFocus: () => {},
       requestBlur: () => {},
+      requestEdit: () => {},
       requestTransition: () => {},
       requestArchive: () => {},
       requestUnarchive: () => {},
@@ -34,13 +36,15 @@ export class Token extends Component {
     const {
       idx,
       active,
+      flash,
       suggestion,
       machine,
       builders,
       tokenXIcon = '&times',
       requestRemoval = () => {},
       requestFocus = () => {},
       requestBlur = () => {},
+      requestEdit = () => {},
       requestCancel = () => {},
       requestTransition = () => {},
       requestArchive = () => {},
@@ -61,6 +65,11 @@ export class Token extends Component {
         active: active
       });
     }
+    if (flash !== this.state.flash) {
+      this.setState({
+        flash: flash
+      });
+    }
     if (suggestion !== this.state.suggestion) {
       this.setState({
         suggestion: suggestion
@@ -118,6 +127,11 @@ export class Token extends Component {
         requestBlur: requestBlur
       });
     }
+    if (requestEdit !== this.state.requestEdit) {
+      this.setState({
+        requestEdit: requestEdit
+      });
+    }
     if (requestCancel !== this.state.requestCancel) {
       this.setState({
         requestCancel: requestCancel
@@ -288,6 +302,15 @@ export class Token extends Component {
     this.state.requestAddSuggestion(this.state.idx);
   }
 
+  @bind
+  requestEdit (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!this.state.active && this.state.requestEdit) {
+      this.state.requestEdit(this.state.idx);
+    }
+  }
+
   @bind
   requestCancel () {
     this.state.machine.reset();
@@ -300,9 +323,9 @@ export class Token extends Component {
     }
   }
 
-  render (props, {active, suggestion, machine, focused}) {
+  render (props, {active, flash, suggestion, machine, focused}) {
     return (
-      <div className={`token ${active ? 'active' : ''} ${suggestion ? 'suggestion' : ''}`}>
+      <div className={`token ${active ? 'active' : ''} ${suggestion ? 'suggestion' : ''} ${flash ? 'anim-flash' : ''}`} onClick={this.requestEdit}>
         {this.icon}
         {this.state.stateArray.map(s => {
           const Builder = this.state.builders.getBuilder(s.template.constructor);

src/docs/style-customization.md

@@ -10,6 +10,8 @@ $lex-token-background: #ededed; // background color for tokens
 $lex-token-color: #555; // text color for tokens (inherit from Bootstrap)
 $lex-token-hover-color: lighten($lex-token-color, 15%); // hover color for close button
 $lex-token-border-color: darken($lex-token-background, 15%); // border color for a token
+$lex-token-remove-button-color: lighten($lex-token-color, 45%) !default; // hover color for remove button in multi-entry
+$lex-token-remove-button-hover-color: darken($lex-token-remove-button-color, 15%) !default; // text color for remove button in multi-entry
 $lex-token-active-background: darken($lex-token-background, 15%); // background color for active region of a token. should lighten for dark theme
 $lex-token-invalid-background: #e2a4e2; // background color for invalid region of token. should lighten for dark theme
 $lex-assistant-background: #fff; // background color for assistant drop-down

src/style/lex.scss

@@ -25,9 +25,18 @@ div.lex-box {
   background: $lex-background;
   border-color: $lex-border-color;
 
+  &.active, &.focused {
+    outline: 0;
+  }
+
+  &.active {
+    border-color: lighten(desaturate($lex-highlight-color, 50%), 20%);
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px darken($lex-highlight-color, 10%);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px darken($lex-highlight-color, 10%);
+  }
+
   &.focused {
     border-color: $lex-highlight-color;
-    outline: 0;
     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px darken($lex-highlight-color, 10%);
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px darken($lex-highlight-color, 10%);
   }
@@ -219,3 +228,18 @@ div.assistant-box {
     }
   }
 }
+
+.anim-flash {
+	-webkit-animation: flash linear 0.25s 3;
+	animation: flash linear 0.25s 3;
+}
+@-webkit-keyframes flash {
+	0% { opacity: 1; }
+	50% { opacity: .1; }
+	100% { opacity: 1; }
+}
+@keyframes flash {
+	0% { opacity: 1; }
+	50% { opacity: .1; }
+	100% { opacity: 1; }
+}