refactored get/set for fieldMeta

src/LexEdit.tsx

@@ -34,16 +34,16 @@ export class LexEdit extends React.Component<any, any> {
     let langSelOpts = _.get<any>(this.props.selectionMeta, editLang, []);
     let lexFields = _.keys(this.props.fieldMetaMap).map(field => {
       let fieldMeta = this.props.fieldMetaMap[field];
-      let defaultText = fieldMeta.get(li);
+      let value = fieldMeta.get(li);
-      let originalText = fieldMeta.get(this.props.lexItem);
+      let origValue = fieldMeta.get(this.props.lexItem);
       let options = fieldMeta.options;
-      let changed = defaultText !== originalText && this.props.existing;
+      let changed = !_.isEqual(value, origValue) && this.props.existing;
       let sh = (e: any) => {
         let eventData = {};
         eventData[field] = e.target.value;
         this.handleOnChange(eventData);
       };
-      let params = { field, sh, defaultText, options, langSelOpts, changed };
+      let params = { field, sh, value, options, langSelOpts, changed };
       switch (fieldMeta.type) {
         case 'text': {
           return textInput(params);

src/LexSetup.tsx

@@ -18,6 +18,85 @@ function simpleAccessor(lens: string, def: string = '') {
   };
 }
 
+function simpleAttrAccessor(attrPred: any) {
+  let { attribVal, attribKey, pred, lens } = attrPred;
+  let def = (value: any) => ({ _: value, $: { [attribKey]: attribVal } });
+  return {
+    get: (li: any) => {
+      let allProps = _.get<any>(li, lens, def(''));
+      let prop = _.filter<any>(allProps, (m) => {
+        return pred(m);
+      });
+      let mcls = _.get<any>(prop, '[0]._', '');
+      return mcls;
+    },
+    set: (li: any, value: string) => {
+      let lexItem = _.cloneDeep(li);
+      let allProps = _.get<any>(lexItem, lens, []);
+      if (allProps.length > 0) {
+        let prop = _.filter<any>(allProps, (m) => {
+          return pred(m);
+        });
+        _.set(prop, '[0]._', value);
+      } else {
+        _.set(lexItem, lens, def(value));
+      }
+      return lexItem;
+    }
+  };
+}
+
+// function attribListAccessor(lens: string, attrib: string, pred: any) {
+//   let def = (value: any) => ({ _: value, $: { form: attrib } });
+//   return {
+//     get: (li: any) => {
+//       // let def = [{ _: '', $: { form: attrib } }];
+//       let allProps = _.get<any>(li, lens, def(''));
+//       let prop = _.filter<any>(allProps, (m) => {
+//         return pred(m);
+//       });
+//       let mcls = _.get<any>(prop, '[0]._', '');
+//       return mcls;
+//     },
+//     set: (li: any, value: string) => {
+//       let lexItem = _.cloneDeep(li);
+//       let allProps = _.get<any>(lexItem, lens, []);
+//       if (allProps.length > 0) {
+//         let prop = _.filter<any>(allProps, (m) => {
+//           return pred(m);
+//         });
+//         if (prop.length > 0) {
+//           _.set(prop[0], '_', value);
+//         } else {
+//           allProps.push(def(value));
+//         }
+//       } else {
+//         _.set(lexItem, lens, def(value));
+//       }
+//       return lexItem;
+//     }
+//   };
+// }
+
+const attrPredGen = (lens: string, key: string, val: string, comp: any) => {
+  const pred = (m: any) => comp(_.get<any>(m, '$.' + key, ''), val);
+  return { lens, attribKey: key, attribVal: val, pred };
+};
+
+const mcParams = attrPredGen(
+  'lexprops[0].morphology[0].morph',
+  'form',
+  'morphclass',
+  _.isEqual
+);
+
+const frParams = attrPredGen(
+  'syntacticprops[0].property',
+  'id',
+  'frame',
+  _.isEqual
+);
+
 const fieldMetaMap = {
   label: {
     type: 'text',
@@ -29,54 +108,36 @@ const fieldMetaMap = {
   pos: { type: 'select', ...simpleAccessor('pos[0]'), },
   image: { type: 'preview', ...simpleAccessor('image[0]'), },
   relations: { type: 'text', ...simpleAccessor('relations[0]'), },
-  frame: { type: 'select', ...simpleAccessor('syntacticprops[0].property[0]._'), },
+  frame: {
+    type: 'select',
+    ...simpleAttrAccessor(frParams),
+  },
   morphclass: {
     type: 'select',
-    get: (li: any) => {
+    ...simpleAttrAccessor(mcParams)
-      let lens = 'lexprops[0].morphology[0].morph';
-      let def = [{ _: '', $: { form: 'morphclass' } }];
-      let morphProps = _.get<any>(li, lens, def);
-      let prop = _.filter<any>(morphProps, (m) => {
-        return m.$.form === 'morphclass';
-      });
-      let mcls = _.get<any>(prop, '[0]._', '');
-      return mcls;
-    },
-    set: (li: any, value: string) => {
-      let lexItem = _.cloneDeep(li);
-      let lens = 'lexprops[0].morphology[0].morph';
-      let morphProps = _.get<any>(lexItem, lens, []);
-      if (morphProps.length > 0) {
-        let prop = _.filter<any>(morphProps, (m) => {
-          return m.$.form === 'morphclass';
-        });
-        if (prop.length > 0) {
-          _.set(prop[0], '_', value);
-        } else {
-          let def = { _: value, $: { form: 'morphclass' } };
-          morphProps.push(def);
-        }
-      } else {
-        let def = [{ _: value, $: { form: 'morphclass' } }];
-        _.set(lexItem, lens, def);
-      }
-      return lexItem;
-    }
   },
   morphexceptions: {
     type: 'list',
     get: (li: any) => {
       let lens = 'lexprops[0].morphology[0].morph';
-      let def = [{ _: 'M0', $: { form: 'morphclass' } }];
+      let def: any = [];
       let morphProps = _.get<any>(li, lens, def);
       let morphExps = _.filter<any>(morphProps, (m) => {
-        return m.$.form !== 'morphclass';
+        return _.get<any>(m, '$.form', '') !== 'morphclass';
       });
-      return morphExps;
+      let mEs = morphExps.map((me) => {
+        let value = _.get<any>(me, '_', '');
+        let key = _.get<any>(me, '$.form', '');
+        return { value, key };
+      });
+      return mEs;
     }
   },
   stats: { type: 'text', ...simpleAccessor('stats[0].property[0]._'), },
-  lang: { type: 'select', options: ['en', 'es'], ...simpleAccessor('$.id', 'en'), },
+  lang: {
+    type: 'select',
+    options: ['en', 'es'], ...simpleAccessor('$.id', 'en'),
+  },
 };
 
 const xmlToEntries = (xmlData: any) => {

src/LexSingleInput.tsx

@@ -6,10 +6,11 @@ import {
   Input,
   Image
 } from 'semantic-ui-react';
-// import {
+import {
-//   SortableContainer,
+  SortableContainer,
-//   SortableElement
+  SortableElement,
-// } from 'react-sortable-hoc';
+  arrayMove
+} from 'react-sortable-hoc';
 
 class LexSingleInput extends React.Component<any, any> {
   public render() {
@@ -45,7 +46,7 @@ function changedLabel(changed: boolean, text: string) {
 const imageRoot = '/png/';
 
 export function textInput(params: any) {
-  let { field, sh, defaultText, changed } = params;
+  let { field, sh, value, changed } = params;
   return (
     <LexSingleInput
       label={changedLabel(changed, field)}
@@ -53,7 +54,7 @@ export function textInput(params: any) {
     >
       <Input
         onChange={sh}
-        value={defaultText}
+        value={value}
         placeholder={field}
         type="text"
         dir="auto"
@@ -64,7 +65,7 @@ export function textInput(params: any) {
 }
 
 export function selectInput(params: any) {
-  let { field, sh, defaultText, options, langSelOpts, changed } = params;
+  let { field, sh, value, options, langSelOpts, changed } = params;
   let staticOpts = options;
   let fieldOpts = _.get<any>(langSelOpts, field, []);
   let selOpts = staticOpts ? staticOpts : fieldOpts;
@@ -73,7 +74,7 @@ export function selectInput(params: any) {
       <select
         onChange={sh}
         style={{ width: '10em' }}
-        value={defaultText}
+        value={value}
       >
         {selOpts.map((k: any, i: any, c: any) => {
           return <option key={i} value={k}> {k}</option>;
@@ -84,35 +85,43 @@ export function selectInput(params: any) {
 }
 
 export function imagePreview(params: any) {
-  let { field, defaultText, changed } = params;
+  let { field, value, changed } = params;
-  let imageSrc = imageRoot + defaultText;
+  let imageSrc = imageRoot + value;
-  return defaultText !== '' ? (
+  return value !== '' ? (
     <LexSingleInput key={field} label={changedLabel(changed, field)}>
       <Image src={imageSrc} size="tiny" bordered={true} />
     </LexSingleInput>
   ) : textInput(params);
 }
 
-// const SortableItem = SortableElement(({ value }) =>
+const SortableItem = SortableElement<any>(({ value }) =>
-//   <li>{value}</li>
+  <li>{value}</li>
-// );
+);
-//
+
-// const SortableList = SortableContainer(({ items }) => {
+const SortableList = SortableContainer<any>(({ items }) => {
-//   return (
+  return (
-//     <ul>
+    <ul>
-//       {items.map((value: any, index: any) => (
+      {items.map((value: any, index: any) => (
-//         <SortableItem key={`item-${index}`} index={index} value={value} />
+        <SortableItem key={`item-${index}`} index={index} value={value.value} />
-//       ))}
+      ))}
-//     </ul>
+    </ul>
-//   );
+  );
-// });
+});
 
 export function listInput(params: any) {
-  let { field, defaultText, changed } = params;
+  let { field, value, changed } = params;
-  let imageSrc = imageRoot + defaultText;
+  let sortEndHandler = (idxs: any) => {
+    let { oldIndex, newIndex } = idxs;
+    arrayMove(value, oldIndex, newIndex);
+  };
+  console.log('value: ', value);
   return (
     <LexSingleInput key={field} label={changedLabel(changed, field)}>
-      <Image src={imageSrc} size="tiny" bordered={true} />
+      <SortableList
+        items={value}
+        onSortEnd={sortEndHandler}
+        helperClass="SortableHelper"
+      />
     </LexSingleInput>
   );
 }

src/WallEStore.tsx

@@ -2,7 +2,7 @@ import { createStore } from 'redux';
 import rootReducer from './reducers';
 
 const defaultState = {
-  searchState: { searchValue: 'just', searchType: 'label' },
+  searchState: { searchValue: '5', searchType: 'guid' },
   xmlData: []
 };