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:
Liordino Neto 2020-08-19 17:54:29 -03:00 committed by Josh Harvey
parent 1e810daabc
commit 246f736fa8
3 changed files with 20 additions and 4 deletions

View file

@ -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}
/> />

View file

@ -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)
} }

View file

@ -84,6 +84,7 @@ const Autocomplete = ({
size={size} size={size}
fullWidth={fullWidth} fullWidth={fullWidth}
textAlign={textAlign} textAlign={textAlign}
{...props}
/> />
) )
}} }}