feat: first field now autofocus when editing a row
fix: move the focus to the first editable element fix: make the Autocomplete options popup on autoFocus feat: allow saving on table only when changes occurred fix: compare only the editing row instead of the entire list to decide if the save method will be called
This commit is contained in:
parent
1e810daabc
commit
246f736fa8
3 changed files with 20 additions and 4 deletions
|
|
@ -83,7 +83,13 @@ const ActionCol = ({ disabled, editing }) => {
|
|||
)
|
||||
}
|
||||
|
||||
const ECol = ({ editing, config, extraPaddingRight, extraPaddingLeft }) => {
|
||||
const ECol = ({
|
||||
editing,
|
||||
focus,
|
||||
config,
|
||||
extraPaddingRight,
|
||||
extraPaddingLeft
|
||||
}) => {
|
||||
const {
|
||||
name,
|
||||
input,
|
||||
|
|
@ -102,6 +108,7 @@ const ECol = ({ editing, config, extraPaddingRight, extraPaddingLeft }) => {
|
|||
|
||||
const innerProps = {
|
||||
fullWidth: true,
|
||||
autoFocus: focus,
|
||||
size,
|
||||
bold,
|
||||
textAlign,
|
||||
|
|
@ -176,6 +183,10 @@ const ERow = ({ editing, disabled }) => {
|
|||
? R.indexOf(toSHeader[toSHeader.length - 1], elements)
|
||||
: -1
|
||||
|
||||
const elementToFocusIndex = innerElements.findIndex(
|
||||
it => it.editable === undefined || it.editable
|
||||
)
|
||||
|
||||
return (
|
||||
<Tr
|
||||
size={rowSize}
|
||||
|
|
@ -187,6 +198,7 @@ const ERow = ({ editing, disabled }) => {
|
|||
key={idx}
|
||||
config={it}
|
||||
editing={editing}
|
||||
focus={idx === elementToFocusIndex && editing}
|
||||
extraPaddingRight={extraPaddingRightIndex === idx}
|
||||
extraPaddingLeft={extraPaddingLeftIndex === idx}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -57,9 +57,12 @@ const ETable = ({
|
|||
const index = R.findIndex(R.propEq('id', it.id))(data)
|
||||
const list = index !== -1 ? R.update(index, it, data) : R.prepend(it, data)
|
||||
|
||||
// no response means the save failed
|
||||
const response = await save({ [name]: list }, it)
|
||||
if (!response) return
|
||||
if (!R.equals(data[index], it)) {
|
||||
// no response means the save failed
|
||||
const response = await save({ [name]: list }, it)
|
||||
if (!response) return
|
||||
}
|
||||
|
||||
setAdding(false)
|
||||
setEditingId(null)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ const Autocomplete = ({
|
|||
size={size}
|
||||
fullWidth={fullWidth}
|
||||
textAlign={textAlign}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue