Refactor NewButton/EditButton code

This commit is contained in:
SachaG 2018-02-15 12:04:51 +09:00
parent e3ba347f80
commit 97e0883f31
3 changed files with 44 additions and 50 deletions

View file

@ -97,12 +97,12 @@ DatatableAbove Component
*/
const DatatableAbove = (props) => {
const { showSearch, showNew, canInsert, value, updateQuery } = props;
const { showSearch, showNew, canInsert, value, updateQuery, options } = props;
return (
<div className="datatable-above">
{showSearch && <input className="datatable-search form-control" placeholder="Search…" type="text" name="datatableSearchQuery" value={value} onChange={updateQuery} />}
{showNew && canInsert && <Components.NewButton {...props}/>}
{showNew && canInsert && <Components.NewButton {...props} mutationFragmentName={options && options.fragmentName} />}
</div>
)
}
@ -198,7 +198,7 @@ DatatableRow Component
*/
const DatatableRow = (props, { intl }) => {
const { collection, columns, document, showEdit, editFragmentName, currentUser } = props;
const { collection, columns, document, showEdit, currentUser, options } = props;
const canEdit = collection && collection.options && collection.options.mutations && collection.options.mutations.edit && collection.options.mutations.edit.check(currentUser, document);
return (
@ -208,12 +208,7 @@ const DatatableRow = (props, { intl }) => {
{showEdit && canEdit ?
<td>
<Components.ModalTrigger
label={intl.formatMessage({id: 'datatable.edit'})}
component={<Button bsStyle="primary"><FormattedMessage id="datatable.edit" /></Button>}
>
<Components.DatatableEditForm {...props} />
</Components.ModalTrigger>
<Components.EditButton {...props} mutationFragmentName={options && options.fragmentName}/>
</td>
: null}
@ -225,41 +220,6 @@ registerComponent('DatatableRow', DatatableRow);
DatatableRow.contextTypes = {
intl: intlShape
};
/*
DatatableEditForm Component
*/
const DatatableEditForm = ({ collection, document, closeModal, options, ...properties }) =>
<Components.SmartForm
collection={collection}
documentId={document._id}
showRemove={true}
successCallback={document => {
closeModal();
}}
removeSuccessCallback={document => {
closeModal();
}}
mutationFragmentName={options.fragmentName}
/>
registerComponent('DatatableEditForm', DatatableEditForm);
/*
DatatableNewForm Component
*/
const DatatableNewForm = ({ collection, closeModal, options, ...props }) =>
<Components.SmartForm
collection={collection}
successCallback={document => {
closeModal();
}}
mutationFragmentName={options.fragmentName}
/>
registerComponent('DatatableNewForm', DatatableNewForm);
/*
@ -280,7 +240,6 @@ registerComponent('DatatableCell', DatatableCell);
DatatableDefaultCell Component
*/
const DatatableDefaultCell = ({ column, document }) =>
<div>{typeof column === 'string' ? getFieldValue(document[column]) : getFieldValue(document[column.name])}</div>

View file

@ -3,12 +3,12 @@ import React from 'react';
import Button from 'react-bootstrap/lib/Button';
import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
const EditButton = ({ collection, document, bsStyle = 'primary', ...properties }, {intl}) =>
const EditButton = ({ collection, document, bsStyle = 'primary', ...props }, {intl}) =>
<Components.ModalTrigger
label={intl.formatMessage({id: 'datatable.edit'})}
component={<Button bsStyle={bsStyle}><FormattedMessage id="datatable.edit" /></Button>}
>
<Components.DatatableEditForm collection={collection} document={document} {...properties} />
<Components.EditForm collection={collection} document={document} {...props} />
</Components.ModalTrigger>
EditButton.contextTypes = {
@ -17,4 +17,24 @@ EditButton.contextTypes = {
EditButton.displayName = 'EditButton';
registerComponent('EditButton', EditButton);
registerComponent('EditButton', EditButton);
/*
EditForm Component
*/
const EditForm = ({ collection, document, closeModal, options, ...props }) =>
<Components.SmartForm
{...props}
collection={collection}
documentId={document._id}
showRemove={true}
successCallback={document => {
closeModal();
}}
removeSuccessCallback={document => {
closeModal();
}}
/>
registerComponent('EditForm', EditForm);

View file

@ -8,7 +8,7 @@ const NewButton = ({ collection, bsStyle = 'primary', ...props }, {intl}) =>
label={intl.formatMessage({id: 'datatable.new'})}
component={<Button bsStyle={bsStyle}><FormattedMessage id="datatable.new" /></Button>}
>
<Components.DatatableNewForm collection={collection} {...props} />
<Components.NewForm collection={collection} {...props} />
</Components.ModalTrigger>
NewButton.contextTypes = {
@ -17,4 +17,19 @@ NewButton.contextTypes = {
NewButton.displayName = 'NewButton';
registerComponent('NewButton', NewButton);
registerComponent('NewButton', NewButton);
/*
NewForm Component
*/
const NewForm = ({ collection, closeModal, options, ...props }) =>
<Components.SmartForm
{...props}
collection={collection}
successCallback={document => {
closeModal();
}}
/>
registerComponent('NewForm', NewForm);