moved proplist to new module
Malar Kannan
parent
193cccdfa4
commit
7de1735300
|
|
@ -6,9 +6,8 @@ import {
|
||||||
Input,
|
Input,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
Image,
|
Image,
|
||||||
Modal,
|
|
||||||
Button,
|
|
||||||
} from 'semantic-ui-react';
|
} from 'semantic-ui-react';
|
||||||
|
import PropListInput from './PropListInput';
|
||||||
|
|
||||||
class LexInputContainer extends React.Component<any, any> {
|
class LexInputContainer extends React.Component<any, any> {
|
||||||
public render() {
|
public render() {
|
||||||
|
|
@ -135,93 +134,6 @@ function propListInput(params: any) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
class PropListInput extends React.Component<any, any> {
|
|
||||||
state = { modalOpen: false, exKey: '', exVal: '' };
|
|
||||||
dropOptsForVal(value: any) {
|
|
||||||
let { field, langSelOpts } = this.props;
|
|
||||||
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, value } = this.props;
|
|
||||||
let dropOptions = this.dropOptsForVal(value);
|
|
||||||
let renderLabel = (label: any) => ({
|
|
||||||
content: `${label.value.key}-${label.value.value}`,
|
|
||||||
});
|
|
||||||
let onCloseModal = (e: any) => {
|
|
||||||
let except = { key: this.state.exKey, value: this.state.exVal };
|
|
||||||
let ns = _.concat(value, except);
|
|
||||||
this.setState({
|
|
||||||
modalOpen: false,
|
|
||||||
exKey: '',
|
|
||||||
exVal: ''
|
|
||||||
});
|
|
||||||
sh(ns);
|
|
||||||
};
|
|
||||||
let dropDownComp = (
|
|
||||||
<Dropdown
|
|
||||||
options={dropOptions}
|
|
||||||
onChange={(e, d) => {
|
|
||||||
let newValue = d.value as any;
|
|
||||||
let addedValue = _.difference(newValue, value) as any;
|
|
||||||
let didAdd = _.size(addedValue) > 0;
|
|
||||||
let exKey = didAdd ? addedValue[0].key : '';
|
|
||||||
this.setState({ exKey, 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) {
|
export function componentForType(type: string, params: any) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'text': {
|
case 'text': {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import * as _ from 'lodash';
|
||||||
|
import {
|
||||||
|
Input,
|
||||||
|
Dropdown,
|
||||||
|
Modal,
|
||||||
|
Button,
|
||||||
|
} from 'semantic-ui-react';
|
||||||
|
|
||||||
|
export default class PropListInput extends React.Component<any, any> {
|
||||||
|
state = { modalOpen: false, exKey: '', exVal: '' };
|
||||||
|
dropOptsForVal(value: any) {
|
||||||
|
let { field, langSelOpts } = this.props;
|
||||||
|
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, value } = this.props;
|
||||||
|
let dropOptions = this.dropOptsForVal(value);
|
||||||
|
let renderLabel = (label: any) => ({
|
||||||
|
content: `${label.value.key}-${label.value.value}`,
|
||||||
|
});
|
||||||
|
let onCloseModal = (e: any) => {
|
||||||
|
let except = { key: this.state.exKey, value: this.state.exVal };
|
||||||
|
let ns = _.concat(value, except);
|
||||||
|
this.setState({
|
||||||
|
modalOpen: false,
|
||||||
|
exKey: '',
|
||||||
|
exVal: ''
|
||||||
|
});
|
||||||
|
sh(ns);
|
||||||
|
};
|
||||||
|
let dropDownComp = (
|
||||||
|
<Dropdown
|
||||||
|
options={dropOptions}
|
||||||
|
onChange={(e, d) => {
|
||||||
|
let newValue = d.value as any;
|
||||||
|
let addedValue = _.difference(newValue, value) as any;
|
||||||
|
let didAdd = _.size(addedValue) > 0;
|
||||||
|
let exKey = didAdd ? addedValue[0].key : '';
|
||||||
|
this.setState({ exKey, 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue