Skip to content

Commit

Permalink
introduce changeEditCellProps
Browse files Browse the repository at this point in the history
  • Loading branch information
@m4theushw
m4theushw committed Jul 7, 2021
1 parent ed7d333 commit 572dd69
Show file tree
Hide file tree
Showing 7 changed files with 28 additions and 14 deletions.
3 changes: 2 additions & 1 deletion docs/pages/api-docs/data-grid/grid-api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { GridApi } from '@material-ui/x-grid';
| <span class="prop-name">applyFilterLinkOperator</span> | <span class="prop-type">(operator: GridLinkOperator) =&gt; void</span> | Changes the GridLinkOperator used to connect the filters. |
| <span class="prop-name">applyFilters</span> | <span class="prop-type">() =&gt; void</span> | Applies all filters on all rows. |
| <span class="prop-name">applySorting</span> | <span class="prop-type">() =&gt; void</span> | Applies the current sort model to the rows. |
| <span class="prop-name">changeEditCellProps</span> | <span class="prop-type">(params: GridEditCellPropsParams, event: SyntheticEvent&lt;Element, Event&gt;) =&gt; void</span> | Sets the input props of the edit cell and call `onEditCellChange` after the change. |
| <span class="prop-name">commitCellChange</span> | <span class="prop-type">(params: GridCommitCellChangeParams, event?: SyntheticEvent&lt;Element, Event&gt;) =&gt; boolean</span> | Updates the field at the given id with the value stored in the edit row model. |
| <span class="prop-name">components</span> | <span class="prop-type">GridApiRefComponentsProperty</span> | The set of overridable components used in the grid. |
| <span class="prop-name optional">componentsProps<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">GridSlotsComponentsProps</span> | Overrideable components props dynamically passed to the component at rendering. |
Expand All @@ -35,7 +36,7 @@ import { GridApi } from '@material-ui/x-grid';
| <span class="prop-name">getColumnPosition</span> | <span class="prop-type">(field: string) =&gt; number</span> | Returns the left-position of a column relative to the inner border of the grid. |
| <span class="prop-name">getColumnsMeta</span> | <span class="prop-type">() =&gt; GridColumnsMeta</span> | Returns the GridColumnsMeta for each column. |
| <span class="prop-name">getDataAsCsv</span> | <span class="prop-type">(options?: GridExportCsvOptions) =&gt; string</span> | Returns the grid data as a CSV string.<br />This method is used internally by `exportDataAsCsv`. |
| <span class="prop-name">getEditCellPropsParams</span> | <span class="prop-type">(rowId: GridRowId, field: string) =&gt; GridEditCellPropsParams</span> | Gets the params to be passed when calling `setEditCellProps`. |
| <span class="prop-name">getEditCellPropsParams</span> | <span class="prop-type">(rowId: GridRowId, field: string) =&gt; GridEditCellPropsParams</span> | Gets the params to be passed when calling `setEditCellProps` or `changeEditCellProps`. |
| <span class="prop-name">getEditRowsModel</span> | <span class="prop-type">() =&gt; GridEditRowsModel</span> | Gets the edit rows model of the grid. |
| <span class="prop-name">getLocaleText</span> | <span class="prop-type">(key: T) =&gt; GridLocaleText&lt;&gt;[T]</span> | Returns the translation for the `key`. |
| <span class="prop-name">getRow</span> | <span class="prop-type">(id: GridRowId) =&gt; null \| GridRowData</span> | Gets the row data with a given id. |
Expand Down
2 changes: 1 addition & 1 deletion packages/grid/_modules_/grid/components/cell/GridEditBooleanCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function GridEditBooleanCell(
const newValue = event.target.checked;
const editProps = { value: newValue };
setValueState(newValue);
api.setEditCellProps({ id: idProp, field, props: editProps });
api.changeEditCellProps({ id: idProp, field, props: editProps }, event);
},
[api, field, idProp],
);
Expand Down
4 changes: 2 additions & 2 deletions packages/grid/_modules_/grid/components/cell/GridEditDateCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function GridEditDateCell(props: GridCellParams & InputBaseProps) {

if (newValue === '') {
const editProps = { value: null };
api.setEditCellProps({ id, field, props: editProps }, event);
api.changeEditCellProps({ id, field, props: editProps }, event);
return;
}

Expand All @@ -45,7 +45,7 @@ export function GridEditDateCell(props: GridCellParams & InputBaseProps) {
}

const editProps = { value: dateObj };
api.setEditCellProps({ id, field, props: editProps }, event);
api.changeEditCellProps({ id, field, props: editProps }, event);
},
[api, field, id],
);
Expand Down
2 changes: 1 addition & 1 deletion packages/grid/_modules_/grid/components/cell/GridEditInputCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function GridEditInputCell(props: GridCellParams & InputBaseProps) {
const newValue = event.target.value;
const editProps = { value: newValue };
setValueState(newValue);
api.setEditCellProps({ id, field, props: editProps });
api.changeEditCellProps({ id, field, props: editProps }, event);
},
[api, field, id],
);
Expand Down
2 changes: 1 addition & 1 deletion packages/grid/_modules_/grid/components/cell/GridEditSingleSelectCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function GridEditSingleSelectCell(props: GridCellParams & SelectProps) {

const handleChange = (event) => {
const editProps = { value: event.target.value };
api.setEditCellProps({ id, field, props: editProps }, event);
api.changeEditCellProps({ id, field, props: editProps }, event);
if (!event.key) {
api.commitCellChange({ id, field }, event);
api.setCellMode(id, field, 'view');
Expand Down
21 changes: 14 additions & 7 deletions packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,19 +130,15 @@ export function useGridEditRows(apiRef: GridApiRef) {
[options.isCellEditable],
);

const setEditCellProps = React.useCallback(
const changeEditCellProps = React.useCallback(
(params: GridEditCellPropsParams, event?: React.SyntheticEvent) => {
apiRef.current.publishEvent(GRID_CELL_EDIT_PROPS_CHANGE, params, event);
},
[apiRef],
);

const handleCellEditCellProps = React.useCallback(
(params: GridEditCellPropsParams, event?: React.SyntheticEvent) => {
if (event?.isPropagationStopped()) {
return;
}

const setEditCellProps = React.useCallback(
(params: GridEditCellPropsParams) => {
const { id, field, props } = params;
logger.debug(`Setting cell props on id: ${id} field: ${field}`);
setGridState((state) => {
Expand All @@ -166,6 +162,16 @@ export function useGridEditRows(apiRef: GridApiRef) {
[apiRef, forceUpdate, logger, setGridState],
);

const handleCellEditCellProps = React.useCallback(
(params: GridEditCellPropsParams, event?: React.SyntheticEvent) => {
if (event?.isPropagationStopped()) {
return;
}
apiRef.current.setEditCellProps(params);
},
[apiRef],
);

const setEditRowsModel = React.useCallback(
(editRows: GridEditRowsModel): void => {
logger.debug(`Setting row model`);
Expand Down Expand Up @@ -350,6 +356,7 @@ export function useGridEditRows(apiRef: GridApiRef) {
getEditCellPropsParams,
setEditRowsModel,
getEditRowsModel,
changeEditCellProps,
},
'EditRowApi',
);
Expand Down
8 changes: 7 additions & 1 deletion packages/grid/_modules_/grid/models/api/gridEditRowApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,13 @@ export interface GridEditRowApi {
*/
setEditCellProps: (params: GridEditCellPropsParams) => void;
/**
* Gets the params to be passed when calling `setEditCellProps`.
* Sets the input props of the edit cell and call `onEditCellChange` after the change.
* @param {GridEditCellPropsParams} params The params to set.
* @param {React.SyntheticEvent} event The event to pass forward.
*/
changeEditCellProps: (params: GridEditCellPropsParams, event: React.SyntheticEvent) => void;
/**
* Gets the params to be passed when calling `setEditCellProps` or `changeEditCellProps`.
* @param {GridRowId} rowId The id of the row.
* @param {string} field The column field.
* @returns {GridEditCellPropsParams} The params.
Expand Down

0 comments on commit 572dd69

Please sign in to comment.