implemented morph exceptions

src/LexAccessors.tsx

@@ -91,13 +91,19 @@ function propListAttrAccessor(attrPred: any) {
     set: (li: any, value: any) => {
       let lexItem = _.cloneDeep(li);
       let allProps = _.get<any>(lexItem, lens, []);
+      let setValue = value.map((v: any) => {
+        let ret = {};
+        _.set(ret, '$.form', v.key);
+        _.set(ret, '_', v.value);
+        return ret;
+      });
       if (allProps.length > 0) {
         let keepProps = _.filter<any>(allProps, (m) => {
           return !pred(m);
         });
-        _.set(lexItem, lens, _.concat(keepProps, value));
+        _.set(lexItem, lens, _.concat(keepProps, setValue));
       } else {
-        _.set(lexItem, lens, value);
+        _.set(lexItem, lens, setValue);
       }
       return lexItem;
     }
@@ -190,6 +196,22 @@ const fieldMetaMap = {
   },
 };
 
+function getSelectOptions(field: string, entries: any) {
+  let allOpts = entries.map((q: any) => {
+    return fieldMetaMap[field].get(q);
+  });
+  switch (fieldMetaMap[field].type) {
+    case 'select':
+      return _.uniq(allOpts);
+    case 'list':
+      return _.uniq(_.flatten(allOpts));
+    case 'proplist':
+      return _.uniq(_.map(_.flatten(allOpts), (v) => _.get<any>(v, 'key')));
+    default:
+      return [];
+  }
+}
+
 export const xmlToEntries = (xmlData: any) => {
   let allEntries = _.chain(xmlData)
     .get<any>('document.lexicon[0].item')
@@ -209,17 +231,18 @@ export const xmlToEntries = (xmlData: any) => {
   });
   let langEntries = _.reduce(allEntries, langReducer, {});
   let langs = _.keys(langEntries);
+  let selectableFields = ['select', 'list', 'proplist'];
   let selectFields = _.fromPairs(langs.map((lang) => {
     let langOpts = _.fromPairs(_.keys(fieldMetaMap).filter((s) => {
-      return _.includes(['select', 'list'], fieldMetaMap[s].type);
+      return _.includes(selectableFields, fieldMetaMap[s].type);
     }).map((s) => {
       let entries = _.get<any>(langEntries, lang, 'en');
-      let allOpts = entries.map((q: any) => {
-        return fieldMetaMap[s].get(q);
-      });
-      let select = _.isEqual(fieldMetaMap[s].type, 'select');
-      let selectOptions = select ? _.uniq(allOpts) : _.uniq(_.flatten(allOpts));
-      return [s, selectOptions];
+      // let allOpts = entries.map((q: any) => {
+      //   return fieldMetaMap[s].get(q);
+      // });
+      // let select = _.isEqual(fieldMetaMap[s].type, 'select');
+      // let selectOptions = select ? _.uniq(allOpts) : _.uniq(_.flatten(allOpts));
+      return [s, getSelectOptions(s, entries)];
     }));
     return [lang, langOpts];
   }));

src/LexEdit.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import { componentForType } from './LexSingleInput';
+import { componentForType } from './LexInputContainer';
 import {
   Card,
   Button

src/LexEditor.tsx

@@ -77,7 +77,7 @@ function LexMatches(params: any) {
     if (props.searchText === '') {
       return (
         <Container>
-          <Header size="mini">Empty</Header>
+          <Header size="tiny">Empty</Header>
           Type something in the searchbar.
         </Container>
       );

src/LexInputContainer.tsx

@@ -0,0 +1,265 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { Label, Form } from 'semantic-ui-react';
+const { Flex, Box } = require('reflexbox');
+import {
+  Input,
+  Dropdown,
+  Image,
+  Modal,
+  Button,
+} from 'semantic-ui-react';
+
+class LexInputContainer extends React.Component<any, any> {
+  public render() {
+    return (
+      <div>
+        <Form>
+          <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
+            <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
+              {this.props.label}
+            </Form.Field>
+            <Form.Field as={Box} w={3 / 5} >
+              {this.props.children}
+            </Form.Field>
+          </Form.Group>
+        </Form>
+      </div>
+    );
+  }
+}
+
+function changedLabel(changed: boolean, text: string) {
+  let labelClass = changed ? 'olive' : '';
+  return (
+    <Label
+      pointing="right"
+      className={labelClass}
+    >
+      {text}
+    </Label>
+  );
+}
+
+function textInput(params: any) {
+  let { field, sh, value, changed } = params;
+  return (
+    <LexInputContainer
+      label={changedLabel(changed, field)}
+      key={field}
+    >
+      <Input
+        onChange={(e, d) => { sh(d.value); }}
+        value={value}
+        placeholder={field}
+        type="text"
+        dir="auto"
+        style={{ width: '10em' }}
+      />
+    </LexInputContainer>
+  );
+}
+
+function selectInput(params: any) {
+  let { field, sh, value, options, langSelOpts, changed } = params;
+  let staticOpts = options;
+  let fieldOpts = _.get<any>(langSelOpts, field, []);
+  let selOpts = staticOpts ? staticOpts : fieldOpts;
+  let dropOptions = selOpts.map((k: any, i: any, c: any) => {
+    return { key: i, value: k, text: k };
+  });
+  return (
+    <LexInputContainer key={field} label={changedLabel(changed, field)}>
+      <Dropdown
+        options={dropOptions}
+        onChange={(e, d) => { sh(d.value); }}
+        value={value}
+        compact={true}
+        selection={true}
+        search={true}
+        style={{ width: '10em' }}
+      />
+    </LexInputContainer>
+  );
+}
+
+function imagePreview(params: any) {
+  let { field, value, changed } = params;
+  let imageSrc = '/png/' + value;
+  return value !== '' ? (
+    <LexInputContainer key={field} label={changedLabel(changed, field)}>
+      <Image src={imageSrc} size="large" bordered={true} />
+    </LexInputContainer>
+  ) : textInput(params);
+}
+
+function listInput(params: any) {
+  let { field, sh, langSelOpts, value, changed } = params;
+  let fieldOpts = _.get<any>(langSelOpts, field, []);
+  let renderLabel = (label: any) => ({
+    content: `${label.value}`,
+  });
+  let dropOptions = fieldOpts.map((k: any, i: any, c: any) => {
+    return {
+      key: i,
+      value: k,
+      text: k,
+    };
+  });
+  return (
+    <LexInputContainer key={field} label={changedLabel(changed, field)}>
+      <Dropdown
+        options={dropOptions}
+        onChange={(e, d) => {
+          sh(d.value);
+        }}
+        value={value}
+        compact={true}
+        selection={true}
+        search={true}
+        multiple={true}
+        fluid={true}
+        style={{ width: '10em' }}
+        renderLabel={renderLabel}
+      />
+    </LexInputContainer>
+  );
+}
+
+function propListInput(params: any) {
+  let { field, changed } = params;
+  return (
+    <LexInputContainer key={field} label={changedLabel(changed, field)}>
+      <PropListInput params={params} />
+    </LexInputContainer>
+  );
+}
+
+class PropListInput extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    let { value } = this.props.params;
+    let dropOptions = this.dropOptsForVal(value);
+    this.state = { value, dropOptions, modalOpen: false, exKey: '', exVal: '' };
+  }
+
+  dropOptsForVal(value: any) {
+    let { field, langSelOpts } = this.props.params;
+    let fieldOpts = _.get<any>(langSelOpts, field, []);
+    function valueForKey(key: string) {
+      let match = _.find(value, (v: any) => _.isEqual(v.key, key));
+      if (match) {
+        return match;
+      } else {
+        return { key, value: '' };
+      }
+    }
+    return fieldOpts.map((k: any, i: any) => {
+      return {
+        key: i,
+        value: valueForKey(k),
+        text: k,
+      };
+    });
+  }
+
+  public render() {
+    let { sh } = this.props.params;
+    let renderLabel = (label: any) => ({
+      content: `${label.value.key}-${label.value.value}`,
+    });
+    let value = _.filter(this.state.dropOptions, (o: any) => {
+      return _.some(this.state.value, (v: any) => {
+        return _.isEqual(v.key, o.value.key);
+      });
+    }).map((so) => so.value);
+    let onCloseModal = (e: any) => {
+      let except = { key: this.state.exKey, value: this.state.exVal };
+      let ns = _.concat(this.state.value, except);
+      this.setState({
+        dropOptions: this.dropOptsForVal(ns),
+        value: ns,
+        modalOpen: false,
+        exKey: '',
+        exVal: ''
+      });
+      sh(ns);
+    };
+    let dropDownComp = (
+      <Dropdown
+        options={this.state.dropOptions}
+        onChange={(e, d) => {
+          let newValue = d.value as any;
+          let addedValue = _.difference(newValue, this.state.value) as any;
+          console.log('added: ', addedValue);
+          let didAdd = _.size(addedValue) > 0;
+          let newState = didAdd ? {
+            exKey: addedValue[0].key,
+          } : {
+            exKey: '',
+            value: newValue
+          } as any;
+          this.setState({ ...newState, modalOpen: didAdd });
+          if (!didAdd) {
+            sh(newValue);
+          }
+        }}
+        value={value}
+        compact={true}
+        selection={true}
+        search={true}
+        multiple={true}
+        fluid={true}
+        style={{ width: '10em' }}
+        renderLabel={renderLabel}
+      />
+    );
+    return (
+      <Modal
+        open={this.state.modalOpen}
+        onClose={onCloseModal}
+        size="mini"
+        trigger={dropDownComp}
+      >
+        <Modal.Content>
+          Enter the exception for {this.state.exKey}
+        </Modal.Content>
+        <Modal.Actions>
+          <Input
+            focus={true}
+            onChange={(e, d: any) => {
+              this.setState({ exVal: d.value });
+            }}
+          />
+          <Button onClick={onCloseModal}>
+            Done
+              </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+export function componentForType(type: string, params: any) {
+  switch (type) {
+    case 'text': {
+      return textInput(params);
+    }
+    case 'select': {
+      return selectInput(params);
+    }
+    case 'preview': {
+      return imagePreview(params);
+    }
+    case 'list': {
+      return listInput(params);
+    }
+    case 'proplist': {
+      return propListInput(params);
+    }
+    default: {
+      console.log('type discarded :', type);
+      return null;
+    }
+  }
+}

src/LexSetup.tsx

@@ -63,7 +63,7 @@ export class LexXMLSelect extends React.Component<any, any> {
 
 export class LexSetup extends React.Component<any, any> {
   xmlBuilder = new XML.Builder();
-  xmlFileName = 'new_es.xml';
+  xmlFileName = 'new_es_orig.xml';
   constructor(props: any) {
     super(props);
     this.state = {
@@ -95,7 +95,7 @@ export class LexSetup extends React.Component<any, any> {
     let editor = (
       <div>
         <Segment inverted={true} size="tiny" attached={true}>
-          <Header color="teal" size="mini">
+          <Header color="teal" size="tiny">
             {saveButton}
             {loadButton}
             <LexXMLSelect

src/LexSingleInput.tsx

@@ -1,148 +0,0 @@
-import * as React from 'react';
-import * as _ from 'lodash';
-import { Label, Form } from 'semantic-ui-react';
-const { Flex, Box } = require('reflexbox');
-import {
-  Input,
-  Dropdown,
-  Image
-} from 'semantic-ui-react';
-
-class LexSingleInput extends React.Component<any, any> {
-  public render() {
-    return (
-      <div>
-        <Form>
-          <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
-            <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
-              {this.props.label}
-            </Form.Field>
-            <Form.Field as={Box} w={3 / 5} >
-              {this.props.children}
-            </Form.Field>
-          </Form.Group>
-        </Form>
-      </div>
-    );
-  }
-}
-
-function changedLabel(changed: boolean, text: string) {
-  let labelClass = changed ? 'olive' : '';
-  return (
-    <Label
-      pointing="right"
-      className={labelClass}
-    >
-      {text}
-    </Label>
-  );
-}
-
-function textInput(params: any) {
-  let { field, sh, value, changed } = params;
-  return (
-    <LexSingleInput
-      label={changedLabel(changed, field)}
-      key={field}
-    >
-      <Input
-        onChange={(e, d) => { sh(d.value); }}
-        value={value}
-        placeholder={field}
-        type="text"
-        dir="auto"
-        style={{ width: '10em' }}
-      />
-    </LexSingleInput>
-  );
-}
-
-function selectInput(params: any) {
-  let { field, sh, value, options, langSelOpts, changed } = params;
-  let staticOpts = options;
-  let fieldOpts = _.get<any>(langSelOpts, field, []);
-  let selOpts = staticOpts ? staticOpts : fieldOpts;
-  let dropOptions = selOpts.map((k: any, i: any, c: any) => {
-    return { key: i, value: k, text: k };
-  });
-  return (
-    <LexSingleInput key={field} label={changedLabel(changed, field)}>
-      <Dropdown
-        options={dropOptions}
-        onChange={(e, d) => { sh(d.value); }}
-        value={value}
-        compact={true}
-        selection={true}
-        search={true}
-        style={{ width: '10em' }}
-      />
-    </LexSingleInput>
-  );
-}
-
-function imagePreview(params: any) {
-  let { field, value, changed } = params;
-  let imageSrc = '/png/' + value;
-  return value !== '' ? (
-    <LexSingleInput key={field} label={changedLabel(changed, field)}>
-      <Image src={imageSrc} size="large" bordered={true} />
-    </LexSingleInput>
-  ) : textInput(params);
-}
-
-function listInput(params: any) {
-  let { field, sh, langSelOpts, value, changed } = params;
-  let fieldOpts = _.get<any>(langSelOpts, field, []);
-  let renderLabel = (label: any) => ({
-    content: `${label.value}`,
-  });
-  let dropOptions = fieldOpts.map((k: any, i: any, c: any) => {
-    return {
-      key: i,
-      value: k,
-      text: k,
-    };
-  });
-  return (
-    <LexSingleInput key={field} label={changedLabel(changed, field)}>
-      <Dropdown
-        options={dropOptions}
-        onChange={(e, d) => {
-          sh(d.value);
-        }}
-        value={value}
-        compact={true}
-        selection={true}
-        search={true}
-        multiple={true}
-        fluid={true}
-        style={{ width: '10em' }}
-        renderLabel={renderLabel}
-      />
-    </LexSingleInput>
-  );
-}
-
-export function componentForType(type: string, params: any) {
-  switch (type) {
-    case 'text': {
-      return textInput(params);
-    }
-    case 'select': {
-      return selectInput(params);
-    }
-    case 'preview': {
-      return imagePreview(params);
-    }
-    case 'list': {
-      // return (<ListInput params={params} />);
-      return listInput(params);
-    }
-    default: {
-      // console.log('type discarded :', type);
-      // console.log('values discarded :', fieldMeta.get(li));
-      return null;
-    }
-  }
-}