@chayns-components/core 5.0.0-beta.494 → 5.0.0-beta.495
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React, { useEffect, useMemo, useState
|
|
2
|
-
import {
|
|
1
|
+
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
2
|
+
import { v4 as uuidv4 } from 'uuid';
|
|
3
3
|
import Badge from '../badge/Badge';
|
|
4
4
|
import Icon from '../icon/Icon';
|
|
5
|
-
import {
|
|
5
|
+
import { StyledTagInput, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
|
|
6
6
|
const TagInput = _ref => {
|
|
7
7
|
let {
|
|
8
8
|
placeholder,
|
|
@@ -69,11 +69,11 @@ const TagInput = _ref => {
|
|
|
69
69
|
return items;
|
|
70
70
|
}, [handleIconClick, internalTags]);
|
|
71
71
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledTagInput, null, content, /*#__PURE__*/React.createElement(StyledTagInputTagInput, {
|
|
72
|
-
placeholder: placeholder,
|
|
72
|
+
placeholder: tags && tags.length > 0 ? undefined : placeholder,
|
|
73
73
|
onKeyDown: handleKeyDown,
|
|
74
74
|
onChange: handleChange,
|
|
75
75
|
value: currentValue
|
|
76
|
-
})), [content, currentValue, handleKeyDown, placeholder]);
|
|
76
|
+
})), [content, currentValue, handleKeyDown, placeholder, tags]);
|
|
77
77
|
};
|
|
78
78
|
export default TagInput;
|
|
79
79
|
//# sourceMappingURL=TagInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagInput.js","names":["React","useEffect","useMemo","useState","
|
|
1
|
+
{"version":3,"file":"TagInput.js","names":["React","useCallback","useEffect","useMemo","useState","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","TagInput","_ref","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","currentValue","setCurrentValue","handleKeyDown","event","key","prevValue","prevTags","newTag","id","text","handleChange","target","value","handleIconClick","prevState","updatedTags","filter","tag","content","items","forEach","_ref2","push","createElement","icons","onClick","length","undefined","onKeyDown","onChange"],"sources":["../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type ReactElement,\n} from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n StyledTagInput,\n StyledTagInputTagInput,\n StyledTagInputTagWrapper,\n StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n /**\n * Function to be executed when a tag is added.\n */\n onAdd?: (tag: Tag) => void;\n /**\n * Function to be executed when a tag is removed.\n */\n onRemove?: (id: string) => void;\n /**\n * The placeholder that should be displayed.\n */\n placeholder?: string;\n /**\n * The tags that should be displayed.\n */\n tags?: Tag[];\n};\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n const [internalTags, setInternalTags] = useState<Tag[]>();\n const [currentValue, setCurrentValue] = useState('');\n\n useEffect(() => {\n if (tags) {\n setInternalTags(tags);\n }\n }, [tags]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n setCurrentValue((prevValue) => {\n if (!prevValue) {\n return '';\n }\n\n setInternalTags((prevTags) => {\n const newTag = { id: uuidv4(), text: prevValue };\n\n if (typeof onAdd === 'function') {\n onAdd(newTag);\n }\n\n return prevTags ? [...prevTags, newTag] : [newTag];\n });\n\n return '';\n });\n }\n },\n [onAdd],\n );\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value);\n };\n\n const handleIconClick = useCallback(\n (id: string) => {\n setInternalTags((prevState) => {\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n\n return updatedTags;\n });\n },\n [onRemove],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n if (!internalTags) {\n return items;\n }\n\n internalTags.forEach(({ text, id }) => {\n items.push(\n <Badge key={`tag-input-${id}`}>\n <StyledTagInputTagWrapper>\n <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n </StyledTagInputTagWrapper>\n </Badge>,\n );\n });\n\n return items;\n }, [handleIconClick, internalTags]);\n\n return useMemo(\n () => (\n <StyledTagInput>\n {content}\n <StyledTagInputTagInput\n placeholder={tags && tags.length > 0 ? undefined : placeholder}\n onKeyDown={handleKeyDown}\n onChange={handleChange}\n value={currentValue}\n />\n </StyledTagInput>\n ),\n [content, currentValue, handleKeyDown, placeholder, tags],\n );\n};\n\nexport default TagInput;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagInput.styles.js","names":["styled","StyledTagInput","div","_ref","theme","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","_ref2","text"],"sources":["../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n display: flex;\n flex-wrap: wrap;\n min-height: 42px;\n padding: 5px;\n align-items: center;\n gap: 6px;\n background-color: ${({ theme }: StyledTagInputProps) => theme['100']};\n border: 1px solid rgba(160, 160, 160, 0.3);\n`;\n\nexport const StyledTagInputTagWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nexport const StyledTagInputTagWrapperText = styled.p`\n margin: 0;\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n border: none;\n height: 24px;\n flex-grow: 1;\n background-color: transparent;\n color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAyB;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACzE;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAGL,MAAM,CAACE,GAAI;AACnD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,4BAA4B,GAAGN,MAAM,CAACO,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGR,MAAM,CAACS,KAAmC;AAChF;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAmC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACO,IAAI;AAAA,CAAC;AACpE,CAAC"}
|
|
1
|
+
{"version":3,"file":"TagInput.styles.js","names":["styled","StyledTagInput","div","_ref","theme","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","_ref2","text"],"sources":["../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n display: flex;\n flex-wrap: wrap;\n min-height: 42px;\n padding: 5px;\n align-items: center;\n gap: 6px;\n background-color: ${({ theme }: StyledTagInputProps) => theme['100']};\n border: 1px solid rgba(160, 160, 160, 0.3);\n`;\n\nexport const StyledTagInputTagWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nexport const StyledTagInputTagWrapperText = styled.p`\n margin: 0;\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 15px;\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n border: none;\n height: 24px;\n flex-grow: 1;\n background-color: transparent;\n color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAyB;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACzE;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAGL,MAAM,CAACE,GAAI;AACnD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,4BAA4B,GAAGN,MAAM,CAACO,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGR,MAAM,CAACS,KAAmC;AAChF;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEN;EAAmC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACO,IAAI;AAAA,CAAC;AACpE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.495",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "57266816eeb4dff64ef4071a3700ef1bff6950de"
|
|
77
77
|
}
|