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 {
|
const {
|
||||||
name,
|
name,
|
||||||
input,
|
input,
|
||||||
|
|
@ -102,6 +108,7 @@ const ECol = ({ editing, config, extraPaddingRight, extraPaddingLeft }) => {
|
||||||
|
|
||||||
const innerProps = {
|
const innerProps = {
|
||||||
fullWidth: true,
|
fullWidth: true,
|
||||||
|
autoFocus: focus,
|
||||||
size,
|
size,
|
||||||
bold,
|
bold,
|
||||||
textAlign,
|
textAlign,
|
||||||
|
|
@ -176,6 +183,10 @@ const ERow = ({ editing, disabled }) => {
|
||||||
? R.indexOf(toSHeader[toSHeader.length - 1], elements)
|
? R.indexOf(toSHeader[toSHeader.length - 1], elements)
|
||||||
: -1
|
: -1
|
||||||
|
|
||||||
|
const elementToFocusIndex = innerElements.findIndex(
|
||||||
|
it => it.editable === undefined || it.editable
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tr
|
<Tr
|
||||||
size={rowSize}
|
size={rowSize}
|
||||||
|
|
@ -187,6 +198,7 @@ const ERow = ({ editing, disabled }) => {
|
||||||
key={idx}
|
key={idx}
|
||||||
config={it}
|
config={it}
|
||||||
editing={editing}
|
editing={editing}
|
||||||
|
focus={idx === elementToFocusIndex && editing}
|
||||||
extraPaddingRight={extraPaddingRightIndex === idx}
|
extraPaddingRight={extraPaddingRightIndex === idx}
|
||||||
extraPaddingLeft={extraPaddingLeftIndex === idx}
|
extraPaddingLeft={extraPaddingLeftIndex === idx}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -57,9 +57,12 @@ const ETable = ({
|
||||||
const index = R.findIndex(R.propEq('id', it.id))(data)
|
const index = R.findIndex(R.propEq('id', it.id))(data)
|
||||||
const list = index !== -1 ? R.update(index, it, data) : R.prepend(it, data)
|
const list = index !== -1 ? R.update(index, it, data) : R.prepend(it, data)
|
||||||
|
|
||||||
// no response means the save failed
|
if (!R.equals(data[index], it)) {
|
||||||
const response = await save({ [name]: list }, it)
|
// no response means the save failed
|
||||||
if (!response) return
|
const response = await save({ [name]: list }, it)
|
||||||
|
if (!response) return
|
||||||
|
}
|
||||||
|
|
||||||
setAdding(false)
|
setAdding(false)
|
||||||
setEditingId(null)
|
setEditingId(null)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -84,6 +84,7 @@ const Autocomplete = ({
|
||||||
size={size}
|
size={size}
|
||||||
fullWidth={fullWidth}
|
fullWidth={fullWidth}
|
||||||
textAlign={textAlign}
|
textAlign={textAlign}
|
||||||
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue