Skip to content

Commit

Permalink
Feat edit on remove (#16)
Browse files Browse the repository at this point in the history 
* [Improvement] - Keep the word when use backspace (#11)

* Enlarge the TODO comment

* refactoring follow comments and add keep words when use backspace optional

Co-authored-by: Julmer Olivero <julmer.olivero@meru.com>
Co-authored-by: Harsh Zalavadiya <harshzalavadiya@users.noreply.github.com>

* refactor: ♻️ `keepWordsOnBackspace` to `isEditOnRemove`

Co-authored-by: Julmer Olivero Ocando <jolivero.03@gmail.com>
Co-authored-by: Julmer Olivero <julmer.olivero@meru.com>
  • Loading branch information
@harshzalavadiya @CrafterSama @craftersama-meru
3 people authored Aug 2, 2022
1 parent 84dd1ff commit 495524b
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 18 deletions.
23 changes: 12 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,17 +55,18 @@ export default Example;

## 👀 Props

| Prop | Description | Type | Default |
| ------------------- | -------------------------------------- | -------------------------------------------------- | ----------- |
| `name` | value for name of input | `string` | |
| `placeholder` | placeholder for text input | `string` | |
| `value` | initial tags | `string[]` | `[]` |
| `onChange` | onChange callback (added/removed) | `string[]` | |
| `onBlur` | input `onBlur` callback | `event` | |
| `seprators` | when to add tag (i.e. `Space`,`Enter`) | `string[]` | `["Enter"]` |
| `onExisting` | if tag is already added then callback | `(tag: string) => void` | |
| `onRemoved` | on tag removed callback | `(tag: string) => void` | |
| `beforeAddValidate` | Custom validation before adding tag | `(tag: string, existingTags: string[]) => boolean` | |
| Prop | Description | Type | Default |
| ------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------- | ----------- |
| `name` | value for name of input | `string` | |
| `placeholder` | placeholder for text input | `string` | |
| `value` | initial tags | `string[]` | `[]` |
| `onChange` | onChange callback (added/removed) | `string[]` | |
| `onBlur` | input `onBlur` callback | `event` | |
| `seprators` | when to add tag (i.e. `Space`,`Enter`) | `string[]` | `["Enter"]` |
| `onExisting` | if tag is already added then callback | `(tag: string) => void` | |
| `onRemoved` | on tag removed callback | `(tag: string) => void` | |
| `beforeAddValidate` | Custom validation before adding tag | `(tag: string, existingTags: string[]) => boolean` | |
| `isEditOnRemove` | Remove the tag but keep the word in the input to edit it on using Backscape Key | `boolean` | `false` |

## 💅 Themeing

Expand Down
7 changes: 5 additions & 2 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface TagsInputProps {
onExisting?: (tag: string) => void;
onRemoved?: (tag: string) => void;
disabled?: boolean;
isEditOnRemove?: boolean;
beforeAddValidate?: (tag: string, existingTags: string[]) => boolean;
}

Expand Down Expand Up @@ -71,9 +72,10 @@ export const TagsInput = ({
onExisting,
onRemoved,
disabled,
isEditOnRemove,
beforeAddValidate,
}: TagsInputProps) => {
const [tags, setTags] = useState(value || []);
const [tags, setTags] = useState<any>(value || []);

useEffect(() => {
onChange && onChange(tags);
Expand All @@ -85,7 +87,8 @@ export const TagsInput = ({
const text = e.target.value;

if (e.key === "Backspace" && tags.length && !text) {
setTags(tags.slice(0, -1));
e.target.value = isEditOnRemove ? `${tags.at(-1)} ` : "";
setTags([...tags.slice(0, -1)]);
}

if (text && (seprators || defaultSeprators).includes(e.key)) {
Expand Down
21 changes: 16 additions & 5 deletions stories/tags-input.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,18 @@ export default {
export const Page = () => {
const [selected, setSelected] = useState(["papaya"]);
const [disabled, setDisabled] = useState(false);
const [isEditOnRemove, setisEditOnRemove] = useState(false);

const beforeAddValidate = (text) => {
if(text.length < 3) {
alert("too short!")
const beforeAddValidate = text => {
if (text.length < 3) {
alert("too short!");
return false;
}
return true;
}
};

return (
<div>
<div style={{ marginBottom: "32px" }}>
<h1>Add Fruits</h1>
<pre>{JSON.stringify(selected)}</pre>
<TagsInput
Expand All @@ -28,6 +29,7 @@ export const Page = () => {
name="fruits"
placeHolder="enter fruits"
disabled={disabled}
isEditOnRemove={isEditOnRemove}
beforeAddValidate={beforeAddValidate}
/>
<div style={{ margin: "2rem 0", display: "flex", flexFlow: "row" }}>
Expand All @@ -39,6 +41,15 @@ export const Page = () => {
</button>
<pre>Disable: {JSON.stringify(disabled)}</pre>
</div>
<div style={{ margin: "2rem 0", display: "flex", flexFlow: "row" }}>
<button
onClick={() => setisEditOnRemove(!isEditOnRemove)}
style={{ marginRight: "2rem" }}
>
Toggle Keep Words on Backspace
</button>
<pre>Keep Words on Backspace: {JSON.stringify(isEditOnRemove)}</pre>
</div>
</div>
);
};

0 comments on commit 495524b

Please sign in to comment.