InlineEdit
Basic usage
Use <InlineEdit />
to make plain text wrapped in InlineInput editable.
Author:
tsx
import React from 'react';
import InlineInput from '@semcore/inline-input';
import InlineEdit from '@semcore/inline-edit';
import EditM from '@semcore/icon/Edit/m';
import { Text } from '@semcore/typography';
const Example = () => {
const [text, setText] = React.useState('Martin Eden');
const [confirmedText, setConfirmedText] = React.useState(text);
const [editable, setEditable] = React.useState(false);
return (
<div>
<Text mr={2}>Author:</Text>
<InlineEdit editable={editable} onEditableChange={setEditable}>
<InlineEdit.View style={{ display: 'flex', gap: 8, alignItems: 'center' }} pr={2}>
{text} <EditM color='icon-secondary-neutral' />
</InlineEdit.View>
<InlineEdit.Edit>
<InlineInput
onConfirm={() => {
setEditable(false);
setConfirmedText(text);
}}
onCancel={() => {
setText(confirmedText);
setEditable(false);
}}
onBlurBehavior={'confirm'}
>
<InlineInput.Value autoFocus value={text} onChange={setText} aria-label='Author name' />
<InlineInput.ConfirmControl />
<InlineInput.CancelControl />
</InlineInput>
</InlineEdit.Edit>
</InlineEdit>
</div>
);
};
const Demo = Example;
export default Demo;
Editable tag
As far as <InlineEdit />
is flexible, it could be used with almost any children elements (out of example both in <InlineEdit.View />
and <InlineEdit.Edit />
).
tsx
import React from 'react';
import InlineInput from '@semcore/inline-input';
import InlineEdit from '@semcore/inline-edit';
import Tag from '@semcore/tag';
const Demo = () => {
const [value, setValue] = React.useState('Default tag');
const [editable, setEditable] = React.useState(false);
const handleValue = (value: string) => {
setEditable(false);
setValue(value);
};
const resetEditable = () => setEditable(false);
return (
<>
<InlineEdit editable={editable} onEditableChange={setEditable}>
<InlineEdit.View pr={2} tag={Tag} interactive size='l' role={''}>
<Tag.Text>{value}</Tag.Text>
<Tag.Close onClick={(e) => e.stopPropagation()} />
</InlineEdit.View>
<InlineEdit.Edit>
<InlineInput onConfirm={handleValue} onCancel={resetEditable}>
<InlineInput.Value defaultValue={value} autoFocus aria-label='editable tag' />
<InlineInput.ConfirmControl />
<InlineInput.CancelControl />
</InlineInput>
</InlineEdit.Edit>
</InlineEdit>
</>
);
};
export default Demo;
Pseudo network interaction
In this example, the value entered in the input is stored on the backend.
tsx
import React from 'react';
import InlineInput from '@semcore/inline-input';
import InlineEdit from '@semcore/inline-edit';
import EditM from '@semcore/icon/Edit/m';
import { Text } from '@semcore/typography';
const Example = () => {
const [title, setTitle] = React.useState('The Adventures of Intergalactic Whale');
const [editingTitle, setEditingTitle] = React.useState(false);
const [savingTitle, setSavingTitle] = React.useState(false);
const stopEditing = () => setEditingTitle(false);
const handleTitle = (title: string) => {
setSavingTitle(true);
/** Here we are doing some network activities */
setTimeout(() => {
setTitle(title);
setSavingTitle(false);
setEditingTitle(false);
}, 3000);
};
return (
<>
<Text tag='h3' mb={2}>
<InlineEdit editable={editingTitle} onEditableChange={setEditingTitle}>
<InlineEdit.View pr={5}>
{title} <EditM ml={1} />
</InlineEdit.View>
<InlineEdit.Edit>
<InlineInput onConfirm={handleTitle} onCancel={stopEditing} loading={savingTitle}>
<InlineInput.Value autoFocus defaultValue={title} aria-label='Article title' />
<InlineInput.ConfirmControl />
<InlineInput.CancelControl />
</InlineInput>
</InlineEdit.Edit>
</InlineEdit>
</Text>
<Text size={300} mt={3}>
Once upon a time in a distant galaxy far, far away, there existed a legendary creature known
as the Intergalactic Whale. This magnificent space-faring mammal was no ordinary whale. It
had the power to swim through the cosmic ocean, jumping from one star system to another with
grace and finesse.
</Text>
</>
);
};
const Demo = Example;
export default Demo;