Auto expand row edit form when a new row is added for Primary Key, Foreign Key, Unique Constraint and Exclusion Constraint. #3298

This commit is contained in:
Aditya Toshniwal
2023-03-27 17:14:37 +05:30
committed by GitHub
parent 51c22608b2
commit 66cb4e3bcf
5 changed files with 26 additions and 8 deletions

View File

@@ -346,6 +346,7 @@ export default function DataGridView({
const stateUtils = useContext(StateUtilsContext);
const checkIsMounted = useIsMounted();
const [hoverIndex, setHoverIndex] = useState();
const newRowIndex = useRef();
/* Using ref so that schema variable is not frozen in columns closure */
const schemaRef = useRef(schema);
@@ -538,12 +539,15 @@ export default function DataGridView({
}
let newRow = schemaRef.current.getNewData();
if(props.expandEditOnAdd && props.canEdit) {
newRowIndex.current = rows.length;
}
dataDispatch({
type: SCHEMA_STATE_ACTIONS.ADD_ROW,
path: accessPath,
value: newRow,
});
}, [props.canAddRow]);
}, [props.canAddRow, rows?.length]);
const defaultColumn = useMemo(()=>({
}), []);
@@ -593,6 +597,13 @@ export default function DataGridView({
}
}, []);
useEffect(()=>{
if(newRowIndex.current >= 0) {
rows[newRowIndex.current]?.toggleRowExpanded(true);
newRowIndex.current = null;
}
}, [rows?.length]);
const moveRow = (dragIndex, hoverIndex) => {
dataDispatch({
type: SCHEMA_STATE_ACTIONS.MOVE_ROW,
@@ -666,6 +677,7 @@ DataGridView.propTypes = {
canDeleteRow: PropTypes.oneOfType([
PropTypes.bool, PropTypes.func,
]),
expandEditOnAdd: PropTypes.bool,
customDeleteTitle: PropTypes.string,
customDeleteMsg: PropTypes.string,
canSearch: PropTypes.bool,

View File

@@ -277,6 +277,7 @@ export default function FormView({
containerClassName: classes.controlRow, ...field, canAdd: canAdd, canReorder: canReorder,
canEdit: canEdit, canDelete: canDelete,
visible: visible, canAddRow: canAddRow, onDelete: field.onDelete, canSearch: field.canSearch,
expandEditOnAdd: field.expandEditOnAdd,
fixedRows: (viewHelperProps.mode == 'create' ? field.fixedRows : undefined)
};

View File

@@ -110,7 +110,7 @@ MappedFormControlBase.propTypes = {
};
/* Control mapping for grid cell view */
function MappedCellControlBase({ cell, value, id, optionsLoaded, onCellChange, visible, reRenderRow, ...props }) {
function MappedCellControlBase({ cell, value, id, optionsLoaded, onCellChange, visible, reRenderRow, inputRef, ...props }) {
const name = id;
const onTextChange = useCallback((e) => {
let val = e;
@@ -149,15 +149,16 @@ function MappedCellControlBase({ cell, value, id, optionsLoaded, onCellChange, v
/* The mapping does not need Form* components as labels are not needed for grid cells */
switch(cell) {
case 'int':
return <InputText name={name} value={value} onChange={onTextChange} {...props} type='int'/>;
return <InputText name={name} value={value} onChange={onTextChange} ref={inputRef} {...props} type='int'/>;
case 'numeric':
return <InputText name={name} value={value} onChange={onTextChange} {...props} type='numeric'/>;
return <InputText name={name} value={value} onChange={onTextChange} ref={inputRef} {...props} type='numeric'/>;
case 'text':
return <InputText name={name} value={value} onChange={onTextChange} {...props}/>;
return <InputText name={name} value={value} onChange={onTextChange} ref={inputRef} {...props}/>;
case 'password':
return <InputText name={name} value={value} onChange={onTextChange} {...props} type='password'/>;
return <InputText name={name} value={value} onChange={onTextChange} ref={inputRef} {...props} type='password'/>;
case 'select':
return <InputSelect name={name} value={value} onChange={onTextChange} optionsLoaded={optionsLoadedRerender} {...props}/>;
return <InputSelect name={name} value={value} onChange={onTextChange} optionsLoaded={optionsLoadedRerender}
inputRef={inputRef} {...props}/>;
case 'switch':
return <InputSwitch name={name} value={value}
onChange={(e)=>onTextChange(e.target.checked, e.target.name)} {...props} />;