moved proplist to new module
Malar Kannan
parent
193cccdfa4
commit
7de1735300
|
|
@ -6,9 +6,8 @@ import {
|
|||
Input,
|
||||
Dropdown,
|
||||
Image,
|
||||
Modal,
|
||||
Button,
|
||||
} from 'semantic-ui-react';
|
||||
import PropListInput from './PropListInput';
|
||||
|
||||
class LexInputContainer extends React.Component<any, any> {
|
||||
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) {
|
||||
switch (type) {
|
||||
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