highlighting and discarding changes

src/LexEdit.tsx

@@ -24,18 +24,23 @@ export class LexEdit extends React.Component<any, any> {
     let lexFields = _.keys(this.props.fieldMetaMap).map(field => {
       let lens = this.props.fieldMetaMap[field].lens;
       let defaultText = _.get<any>(li, lens, '');
+      let originalText = _.get<any>(this.props.lexItem, lens, '');
       let options = this.props.fieldMetaMap[field].options;
+      let changed = defaultText !== originalText;
+      // console.log('changed:',changed);
       let sh = (e: any) => {
         let eventData = {};
         eventData[field] = e.target.value;
         this.handleOnChange(eventData);
       };
+      let params = { field, sh, defaultText, options, langSelOpts, changed };
       if (this.props.fieldMetaMap[field].type === 'text') {
-        return textInput({field,sh,defaultText,options,langSelOpts});
+        return textInput(params);
       } else if (this.props.fieldMetaMap[field].type === 'select') {
-        return selectInput({field,sh,defaultText,options,langSelOpts});
+        return selectInput(params);
-      } else if (this.props.fieldMetaMap[field].type === 'preview' && defaultText !== '') {
+      } else if (this.props.fieldMetaMap[field].type === 'preview'
-        return imagePreview({field,sh,defaultText,options,langSelOpts});
+        && defaultText !== '') {
+        return imagePreview(params);
       } else {
         return null;
       }
@@ -46,6 +51,16 @@ export class LexEdit extends React.Component<any, any> {
           <Card.Content>
             <Card.Header>
               {_.get<any>(li, 'label', '')}
+              <Button
+                floated="right"
+                icon="download"
+                onClick={(e, d) => this.handleOnLoad(d)}
+              />
+              <Button
+                floated="right"
+                icon="undo"
+                onClick={(e, d) => this.handleOnUndo(d)}
+              />
             </Card.Header>
             <Card.Meta>
               language: {_.get<any>(li, '$.id', '')}
@@ -69,17 +84,25 @@ export class LexEdit extends React.Component<any, any> {
     );
   }
 
+  private handleOnUndo(event: any) {
+    let lexItem = this.props.lexItem;
+    this.setState({ lexItem });
+  }
+  private handleOnLoad(event: any) {
+    // this.props.load()
+    console.log('loading from server');
+  }
+
   private handleOnChange(event: any) {
     let type = _.keys(event)[0];
     let value = _.values(event)[0];
     let lens = this.props.fieldMetaMap[type].lens;
-    let { lexItem: lexItem } = this.state;
+    let lexItem = _.cloneDeep(this.state.lexItem);
     _.set(lexItem, lens, value);
-    this.setState(lexItem);
+    this.setState({ lexItem });
   }
 
   private handleOnSave(event: any) {
     this.props.save(this.state.lexItem);
-    console.log('saving object :', this.state.lexItem);
   }
 }

src/LexSingleInput.tsx

@@ -14,11 +14,7 @@ class LexSingleInput extends React.Component<any, any> {
         <Form>
           <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
             <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
-              <Label
+              {this.props.label}
-                pointing="right"
-              >
-                {this.props.labelText}
-              </Label>
             </Form.Field>
             <Form.Field as={Box} w={3 / 5} >
               {this.props.children}
@@ -30,15 +26,30 @@ class LexSingleInput extends React.Component<any, any> {
   }
 }
 
+function changedLabel(changed: boolean, text: string) {
+  let labelClass = changed ? 'olive' : '';
+  return (
+    <Label
+      pointing="right"
+      className={labelClass}
+    >
+      {text}
+    </Label>
+  );
+}
+
 const imageRoot = '/png/';
 
 export function textInput(params: any) {
-  let {field,sh,defaultText} = params;
+  let { field, sh, defaultText, changed } = params;
   return (
-    <LexSingleInput key={field} labelText={_.capitalize(field)}>
+    <LexSingleInput
+      label={changedLabel(changed, field)}
+      key={field}
+    >
       <Input
         onChange={sh}
-        defaultValue={defaultText}
+        value={defaultText}
         placeholder={field}
         type="text"
         dir="auto"
@@ -49,16 +60,16 @@ export function textInput(params: any) {
 }
 
 export function selectInput(params: any) {
-  let {field,sh,defaultText,options,langSelOpts} = params;
+  let { field, sh, defaultText, options, langSelOpts, changed } = params;
   let staticOpts = options;
   let fieldOpts = _.get<any>(langSelOpts, field, []);
   let selOpts = staticOpts ? staticOpts : fieldOpts;
   return (
-    <LexSingleInput key={field} labelText={_.capitalize(field)}>
+    <LexSingleInput key={field} label={changedLabel(changed, field)}>
       <select
         onChange={sh}
         style={{ width: '10em' }}
-        defaultValue={defaultText}
+        value={defaultText}
       >
         {selOpts.map((k: any, i: any, c: any) => {
           return <option key={i} value={k}> {k}</option>;
@@ -69,10 +80,10 @@ export function selectInput(params: any) {
 }
 
 export function imagePreview(params: any) {
-  let {field,defaultText} = params;
+  let { field, defaultText, changed } = params;
   let imageSrc = imageRoot + defaultText;
   return (
-    <LexSingleInput key={field} labelText={_.capitalize(field)}>
+    <LexSingleInput key={field} label={changedLabel(changed, field)}>
       <Image src={imageSrc} size="tiny" bordered={true} />
     </LexSingleInput>
   );