@stack-spot/portal-components 2.16.1 → 2.17.0
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.
- package/CHANGELOG.md +7 -0
- package/dist/components/Select/CreatableSelect.d.ts +3 -1
- package/dist/components/Select/CreatableSelect.d.ts.map +1 -1
- package/dist/components/Select/CreatableSelect.js +2 -45
- package/dist/components/Select/CreatableSelect.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Select/CreatableSelect.tsx +9 -51
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.17.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.16.1...portal-components@v2.17.0) (2025-03-24)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* Feat 1424 remove controls of comp Creatable Select ([#832](https://github.com/stack-spot/portal-commons/issues/832)) ([2186130](https://github.com/stack-spot/portal-commons/commit/2186130215c71b53da6195b5a2f979017bdfe07f))
|
|
9
|
+
|
|
3
10
|
## [2.16.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.16.0...portal-components@v2.16.1) (2025-03-21)
|
|
4
11
|
|
|
5
12
|
|
|
@@ -9,7 +9,9 @@ export interface CreatableSelectProps {
|
|
|
9
9
|
options?: CreatableSelectOptionType[];
|
|
10
10
|
className?: string;
|
|
11
11
|
value?: string | string[];
|
|
12
|
-
|
|
12
|
+
inputValue?: CreatableValueType;
|
|
13
|
+
onChange: (newValue: CreatableValueType) => void;
|
|
14
|
+
onCreateOption?: (newValue: string) => void;
|
|
13
15
|
}
|
|
14
16
|
export declare const CreatableSelect: FC<CreatableSelectProps>;
|
|
15
17
|
//# sourceMappingURL=CreatableSelect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"CreatableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAO1B,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAEvE,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAwHpD,CAAA"}
|
|
@@ -1,57 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { theme } from '@stack-spot/portal-theme';
|
|
3
3
|
import { useTranslate } from '@stack-spot/portal-translate';
|
|
4
|
-
import { useEffect, useState } from 'react';
|
|
5
4
|
import Creatable from 'react-select/creatable';
|
|
6
5
|
import { BadgeItem } from './BadgeItem.js';
|
|
7
6
|
import { ClearInput } from './ClearInput.js';
|
|
8
7
|
import { CloseItem } from './CloseItem.js';
|
|
9
8
|
import { LabelItem } from './LabelItem.js';
|
|
10
|
-
export const CreatableSelect = ({ disabled, options,
|
|
9
|
+
export const CreatableSelect = ({ disabled, options, inputValue, isMulti, onChange, onCreateOption, id, ...props }) => {
|
|
11
10
|
const t = useTranslate(dictionary);
|
|
12
|
-
|
|
13
|
-
const prepareValue = () => {
|
|
14
|
-
let startValue = undefined;
|
|
15
|
-
if (value) {
|
|
16
|
-
if (isMulti) {
|
|
17
|
-
const typedValue = value || [];
|
|
18
|
-
startValue = [...typedValue].map((v) => ({ label: v, value: v }));
|
|
19
|
-
}
|
|
20
|
-
else {
|
|
21
|
-
const typedValue = value;
|
|
22
|
-
startValue = { label: typedValue, value: typedValue };
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
return startValue;
|
|
26
|
-
};
|
|
27
|
-
const [inputValue, setInputValue] = useState(prepareValue());
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
const newValue = prepareValue();
|
|
30
|
-
inputValue !== newValue && setInputValue(newValue);
|
|
31
|
-
}, [value]);
|
|
32
|
-
const handleCreate = (newValue) => {
|
|
33
|
-
const newOption = { label: newValue, value: newValue };
|
|
34
|
-
setInputOptions((prev) => [...prev, newOption]);
|
|
35
|
-
if (isMulti) {
|
|
36
|
-
setInputValue((prev) => {
|
|
37
|
-
const previousValue = Array.isArray(prev) ? prev : [];
|
|
38
|
-
const newInputValue = [...previousValue, newOption];
|
|
39
|
-
setTimeout(() => {
|
|
40
|
-
onChange && onChange(newInputValue);
|
|
41
|
-
}, 100);
|
|
42
|
-
return newInputValue;
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
setInputValue(newOption);
|
|
47
|
-
onChange && onChange(newOption);
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
const handleChange = (newValue) => {
|
|
51
|
-
setInputValue(newValue);
|
|
52
|
-
onChange && onChange(newValue);
|
|
53
|
-
};
|
|
54
|
-
return (_jsx(Creatable, { placeholder: t.typeYourOption, ...props, inputId: id, isClearable: true, isDisabled: disabled, value: inputValue, options: inputOptions, isMulti: isMulti, onChange: handleChange, onCreateOption: handleCreate, components: { MultiValueContainer: BadgeItem, MultiValueLabel: LabelItem, MultiValueRemove: CloseItem, ClearIndicator: ClearInput }, noOptionsMessage: () => (t.typeYourOption), formatCreateLabel: (value) => (value), tabSelectsValue: false, styles: {
|
|
11
|
+
return (_jsx(Creatable, { placeholder: t.typeYourOption, ...props, inputId: id, isClearable: true, isDisabled: disabled, value: inputValue, options: options, isMulti: isMulti, onChange: onChange, onCreateOption: onCreateOption, components: { MultiValueContainer: BadgeItem, MultiValueLabel: LabelItem, MultiValueRemove: CloseItem, ClearIndicator: ClearInput }, noOptionsMessage: () => (t.typeYourOption), formatCreateLabel: (value) => (value), tabSelectsValue: false, styles: {
|
|
55
12
|
control: (base, state) => ({
|
|
56
13
|
...base,
|
|
57
14
|
minHeight: '2.5rem',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreatableSelect.js","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;
|
|
1
|
+
{"version":3,"file":"CreatableSelect.js","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { theme } from '@stack-spot/portal-theme'
|
|
2
2
|
import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
|
|
3
|
-
import { FC
|
|
3
|
+
import { FC } from 'react'
|
|
4
4
|
import { CSSObjectWithLabel } from 'react-select'
|
|
5
5
|
import Creatable from 'react-select/creatable'
|
|
6
6
|
import { BadgeItem } from './BadgeItem'
|
|
@@ -18,56 +18,14 @@ export interface CreatableSelectProps {
|
|
|
18
18
|
options?: CreatableSelectOptionType[],
|
|
19
19
|
className?: string,
|
|
20
20
|
value?: string | string[],
|
|
21
|
-
|
|
21
|
+
inputValue?: CreatableValueType,
|
|
22
|
+
onChange: (newValue: CreatableValueType) => void,
|
|
23
|
+
onCreateOption?: (newValue: string) => void,
|
|
22
24
|
}
|
|
23
25
|
|
|
24
|
-
export const CreatableSelect: FC<CreatableSelectProps> =
|
|
26
|
+
export const CreatableSelect: FC<CreatableSelectProps> =
|
|
27
|
+
({ disabled, options, inputValue, isMulti, onChange, onCreateOption, id, ...props }) => {
|
|
25
28
|
const t = useTranslate(dictionary)
|
|
26
|
-
const [inputOptions, setInputOptions] = useState(options || [])
|
|
27
|
-
const prepareValue = () => {
|
|
28
|
-
let startValue: CreatableValueType | undefined = undefined
|
|
29
|
-
if (value) {
|
|
30
|
-
if (isMulti) {
|
|
31
|
-
const typedValue = value as string[] || []
|
|
32
|
-
startValue = [...typedValue].map((v) => ({ label: v, value: v }))
|
|
33
|
-
} else {
|
|
34
|
-
const typedValue = value as string
|
|
35
|
-
startValue = { label: typedValue, value: typedValue }
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
return startValue
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const [inputValue, setInputValue] = useState<CreatableValueType | undefined>(prepareValue())
|
|
42
|
-
|
|
43
|
-
useEffect(() => {
|
|
44
|
-
const newValue = prepareValue()
|
|
45
|
-
inputValue !== newValue && setInputValue(newValue)
|
|
46
|
-
}, [value])
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const handleCreate = (newValue: string) => {
|
|
50
|
-
const newOption = { label: newValue, value: newValue }
|
|
51
|
-
setInputOptions((prev) => [...prev, newOption])
|
|
52
|
-
if (isMulti) {
|
|
53
|
-
setInputValue((prev) => {
|
|
54
|
-
const previousValue = Array.isArray(prev) ? prev : []
|
|
55
|
-
const newInputValue = [...(previousValue as CreatableSelectOptionType[]), newOption]
|
|
56
|
-
setTimeout(() => {
|
|
57
|
-
onChange && onChange(newInputValue)
|
|
58
|
-
}, 100)
|
|
59
|
-
return newInputValue
|
|
60
|
-
})
|
|
61
|
-
} else {
|
|
62
|
-
setInputValue(newOption)
|
|
63
|
-
onChange && onChange(newOption)
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
const handleChange = (newValue: CreatableValueType) => {
|
|
68
|
-
setInputValue(newValue)
|
|
69
|
-
onChange && onChange(newValue)
|
|
70
|
-
}
|
|
71
29
|
|
|
72
30
|
return (
|
|
73
31
|
<Creatable
|
|
@@ -77,10 +35,10 @@ export const CreatableSelect: FC<CreatableSelectProps> = ({ disabled, options, v
|
|
|
77
35
|
isClearable={true}
|
|
78
36
|
isDisabled={disabled}
|
|
79
37
|
value={inputValue}
|
|
80
|
-
options={
|
|
38
|
+
options={options}
|
|
81
39
|
isMulti={isMulti}
|
|
82
|
-
onChange={
|
|
83
|
-
onCreateOption={
|
|
40
|
+
onChange={onChange}
|
|
41
|
+
onCreateOption={onCreateOption}
|
|
84
42
|
components={{ MultiValueContainer: BadgeItem, MultiValueLabel: LabelItem, MultiValueRemove: CloseItem, ClearIndicator: ClearInput }}
|
|
85
43
|
noOptionsMessage={() => (t.typeYourOption)}
|
|
86
44
|
formatCreateLabel={(value) => (value)}
|