Skip to content

Commit

Permalink
Add Form to CE Modals
Browse files Browse the repository at this point in the history
  • Loading branch information
@thenav56 @tnagorra
thenav56 authored and tnagorra committed Mar 29, 2018
1 parent 45f6089 commit c57a3e2
Show file tree
Hide file tree
Showing 3 changed files with 214 additions and 116 deletions.
102 changes: 69 additions & 33 deletions src/views/CategoryEditor/NewCategoryModal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import ModalFooter from '../../../vendor/react-store/components/View/Modal/Foote
import Button from '../../../vendor/react-store/components/Action/Button';
import PrimaryButton from '../../../vendor/react-store/components/Action/Button/PrimaryButton';
import TextInput from '../../../vendor/react-store/components/Input/TextInput';
import Form, { requiredCondition } from '../../../vendor/react-store/components/Input/Form';

import { ceStringsSelector } from '../../../redux';

Expand Down Expand Up @@ -35,60 +36,95 @@ export default class NewCategoryModal extends React.PureComponent {
static defaultProps = defaultProps;
static propTypes = propTypes;

static schema = {
fields: {
titleValue: [requiredCondition],
},
};

constructor(props) {
super(props);

const { title: titleValue = '' } = props.initialValue || {};
this.state = {
showModal: false,
titleValue,
schema: NewCategoryModal.schema,
formErrors: {},
formFieldErrors: {},
formValues: { titleValue },
pristine: false,
};
}

handleTitleValueChange = (value) => {
changeCallback = (values, fieldErrors, formErrors) => {
this.setState({
titleValue: value,
formValues: values,
formErrors,
formFieldErrors: fieldErrors,
pristine: true,
});
};

failureCallback = (formFieldErrors, formErrors) => {
this.setState({ formFieldErrors, formErrors });
};

successCallback = ({ titleValue }) => {
this.props.onSubmit(titleValue);
}

handleModalClose = () => {
this.props.onClose();
}

handleModalOk = () => {
this.props.onSubmit(this.state.titleValue);
}

render() {
const { editMode } = this.props;
const {
formErrors,
formFieldErrors,
formValues,
schema,
pristine,
} = this.state;

const title = editMode
? this.props.ceStrings('editCategoryTooltip')
: this.props.ceStrings('addCategoryTooltip');
return ([
<ModalHeader
key="header"
title={title}
/>,
<ModalBody key="body">
<TextInput
autoFocus
label={this.props.ceStrings('addCategoryTitleLabel')}
placeholder={this.props.ceStrings('addCategoryTitlePlaceholder')}
onChange={this.handleTitleValueChange}
value={this.state.titleValue}

return (
<Form
changeCallback={this.changeCallback}
failureCallback={this.failureCallback}
successCallback={this.successCallback}
schema={schema}
value={formValues}
formErrors={formErrors}
fieldErrors={formFieldErrors}
>
<ModalHeader
key="header"
title={title}
/>
</ModalBody>,
<ModalFooter key="footer">
<Button onClick={this.handleModalClose} >
{this.props.ceStrings('modalCancel')}
</Button>
<PrimaryButton
onClick={this.handleModalOk}
className={styles.okButton}
>
{this.props.ceStrings('modalOk')}
</PrimaryButton>
</ModalFooter>,
]);
<ModalBody key="body">
<TextInput
formname="titleValue"
label={this.props.ceStrings('addCategoryTitleLabel')}
placeholder={this.props.ceStrings('addCategoryTitlePlaceholder')}
autoFocus
/>
</ModalBody>
<ModalFooter key="footer">
<Button onClick={this.handleModalClose} >
{this.props.ceStrings('modalCancel')}
</Button>
<PrimaryButton
className={styles.okButton}
disabled={!pristine}
type="submit"
>
{this.props.ceStrings('modalOk')}
</PrimaryButton>
</ModalFooter>
</Form>
);
}
}
104 changes: 69 additions & 35 deletions src/views/CategoryEditor/NewManualNgramModal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import ModalFooter from '../../../vendor/react-store/components/View/Modal/Foote
import Button from '../../../vendor/react-store/components/Action/Button';
import PrimaryButton from '../../../vendor/react-store/components/Action/Button/PrimaryButton';
import TextInput from '../../../vendor/react-store/components/Input/TextInput';
import Form, { requiredCondition } from '../../../vendor/react-store/components/Input/Form';

import { ceStringsSelector } from '../../../redux';

Expand All @@ -19,8 +20,7 @@ const propTypes = {
ceStrings: PropTypes.func.isRequired,
};

const defaultProps = {
};
const defaultProps = { };

const mapStateToProps = state => ({
ceStrings: ceStringsSelector(state),
Expand All @@ -31,54 +31,88 @@ export default class NewManualNgramModal extends React.PureComponent {
static defaultProps = defaultProps;
static propTypes = propTypes;

static schema = {
fields: {
wordValue: [requiredCondition],
},
};

constructor(props) {
super(props);
this.state = {
showModal: false,
titleValue: '',
schema: NewManualNgramModal.schema,
formErrors: {},
formFieldErrors: {},
formValues: {},
pristine: false,
};
}

handleWordValueChange = (value) => {
changeCallback = (values, fieldErrors, formErrors) => {
this.setState({
wordValue: value,
formValues: values,
formErrors,
formFieldErrors: fieldErrors,
pristine: true,
});
};

failureCallback = (formFieldErrors, formErrors) => {
this.setState({ formFieldErrors, formErrors });
};

successCallback = ({ wordValue }) => {
this.props.onSubmit(wordValue);
}

handleModalClose = () => {
this.props.onClose();
}

handleModalOk = () => {
this.props.onSubmit(this.state.wordValue);
}

render() {
return ([
<ModalHeader
key="header"
title={this.props.ceStrings('addNewWordModalTitle')}
/>,
<ModalBody key="body">
<TextInput
label={this.props.ceStrings('addNewWordLabel')}
placeholder={this.props.ceStrings('addNewWordPlaceholder')}
onChange={this.handleWordValueChange}
value={this.state.wordValue}
autoFocus
const {
formErrors,
formFieldErrors,
formValues,
schema,
pristine,
} = this.state;

return (
<Form
changeCallback={this.changeCallback}
failureCallback={this.failureCallback}
successCallback={this.successCallback}
schema={schema}
value={formValues}
formErrors={formErrors}
fieldErrors={formFieldErrors}
>
<ModalHeader
key="header"
title={this.props.ceStrings('addNewWordModalTitle')}
/>
</ModalBody>,
<ModalFooter key="footer">
<Button onClick={this.handleModalClose}>
{this.props.ceStrings('modalCancel')}
</Button>
<PrimaryButton
onClick={this.handleModalOk}
className={styles.okButton}
>
{this.props.ceStrings('modalOk')}
</PrimaryButton>
</ModalFooter>,
]);
<ModalBody key="body">
<TextInput
formname="wordValue"
label={this.props.ceStrings('addNewWordLabel')}
placeholder={this.props.ceStrings('addNewWordPlaceholder')}
autoFocus
/>
</ModalBody>
<ModalFooter key="footer">
<Button onClick={this.handleModalClose}>
{this.props.ceStrings('modalCancel')}
</Button>
<PrimaryButton
className={styles.okButton}
disabled={!pristine}
type="submit"
>
{this.props.ceStrings('modalOk')}
</PrimaryButton>
</ModalFooter>
</Form>
);
}
}
Loading

0 comments on commit c57a3e2

Please sign in to comment.