refactored get/set for fieldMeta

2017-07-20 19:13:40 +05:30 · 2017-07-20 19:13:40 +05:30 · 7903855fec
parent 5909cbaa10
commit 7903855fec
4 changed files with 137 additions and 67 deletions
--- a/src/LexEdit.tsx
+++ b/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 originalText = fieldMeta.get(this.props.lexItem);
+      let value = fieldMeta.get(li);
+      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);
--- a/src/LexSetup.tsx
+++ b/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) => {
-      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;
-    }
+    ...simpleAttrAccessor(mcParams)
  },
  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) => {
--- a/src/LexSingleInput.tsx
+++ b/src/LexSingleInput.tsx
@ -6,10 +6,11 @@ import {
  Input,
  Image
 } from 'semantic-ui-react';
-// import {
-//   SortableContainer,
-//   SortableElement
-// } from 'react-sortable-hoc';
+import {
+  SortableContainer,
+  SortableElement,
+  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 imageSrc = imageRoot + defaultText;
-  return defaultText !== '' ? (
+  let { field, value, changed } = params;
+  let imageSrc = imageRoot + value;
+  return value !== '' ? (
    <LexSingleInput key={field} label={changedLabel(changed, field)}>
      <Image src={imageSrc} size="tiny" bordered={true} />
    </LexSingleInput>
  ) : textInput(params);
 }

-// const SortableItem = SortableElement(({ value }) =>
-//   <li>{value}</li>
-// );
-//
-// const SortableList = SortableContainer(({ items }) => {
-//   return (
-//     <ul>
-//       {items.map((value: any, index: any) => (
-//         <SortableItem key={`item-${index}`} index={index} value={value} />
-//       ))}
-//     </ul>
-//   );
-// });
+const SortableItem = SortableElement<any>(({ value }) =>
+  <li>{value}</li>
+);
+
+const SortableList = SortableContainer<any>(({ items }) => {
+  return (
+    <ul>
+      {items.map((value: any, index: any) => (
+        <SortableItem key={`item-${index}`} index={index} value={value.value} />
+      ))}
+    </ul>
+  );
+});

 export function listInput(params: any) {
-  let { field, defaultText, changed } = params;
-  let imageSrc = imageRoot + defaultText;
+  let { field, value, changed } = params;
+  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>
  );
 }
--- a/src/WallEStore.tsx
+++ b/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: []
 };