mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
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:
@@ -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,
|
||||
|
||||
@@ -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)
|
||||
};
|
||||
|
||||
|
||||
@@ -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} />;
|
||||
|
||||
Reference in New Issue
Block a user