@selfcommunity/react-ui 0.11.0-alpha.108 → 0.11.0-alpha.109
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.
|
@@ -7,9 +7,9 @@ const react_intl_1 = require("react-intl");
|
|
|
7
7
|
const parse_1 = tslib_1.__importDefault(require("autosuggest-highlight/parse"));
|
|
8
8
|
const match_1 = tslib_1.__importDefault(require("autosuggest-highlight/match"));
|
|
9
9
|
const material_1 = require("@mui/material");
|
|
10
|
-
const react_core_1 = require("@selfcommunity/react-core");
|
|
11
10
|
const system_1 = require("@mui/system");
|
|
12
11
|
const TagChip_1 = tslib_1.__importDefault(require("../../shared/TagChip"));
|
|
12
|
+
const api_services_1 = require("@selfcommunity/api-services");
|
|
13
13
|
const PREFIX = 'SCTagAutocomplete';
|
|
14
14
|
const classes = {
|
|
15
15
|
root: `${PREFIX}-root`
|
|
@@ -53,38 +53,51 @@ const TagAutocomplete = (inProps) => {
|
|
|
53
53
|
// State
|
|
54
54
|
const [open, setOpen] = (0, react_1.useState)(false);
|
|
55
55
|
const [value, setValue] = (0, react_1.useState)(typeof defaultValue === 'string' ? null : defaultValue);
|
|
56
|
-
|
|
57
|
-
const
|
|
56
|
+
const [tags, setTags] = (0, react_1.useState)([]);
|
|
57
|
+
const [inputValue, setInputValue] = (0, react_1.useState)('');
|
|
58
58
|
(0, react_1.useEffect)(() => {
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
let active = true;
|
|
60
|
+
if (open && inputValue.length >= 3) {
|
|
61
|
+
api_services_1.TagService.searchUserTags({ search: inputValue || '' })
|
|
62
|
+
.then((res) => {
|
|
63
|
+
if (active) {
|
|
64
|
+
setTags((res === null || res === void 0 ? void 0 : res.results) || []);
|
|
65
|
+
}
|
|
66
|
+
})
|
|
67
|
+
.catch(() => {
|
|
68
|
+
if (active) {
|
|
69
|
+
setTags([]);
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
return () => {
|
|
74
|
+
active = false;
|
|
75
|
+
};
|
|
76
|
+
}, [open, inputValue]);
|
|
77
|
+
(0, react_1.useEffect)(() => {
|
|
78
|
+
if (value !== null) {
|
|
79
|
+
onChange && onChange(value);
|
|
61
80
|
}
|
|
62
|
-
onChange && onChange(value);
|
|
63
81
|
}, [value]);
|
|
64
82
|
(0, react_1.useEffect)(() => {
|
|
65
|
-
if ((
|
|
66
|
-
setValue(
|
|
83
|
+
if ((tags === null || tags === void 0 ? void 0 : tags.length) !== 0 && typeof defaultValue === 'string') {
|
|
84
|
+
setValue(tags.find((t) => t.id === Number(defaultValue)));
|
|
67
85
|
}
|
|
68
|
-
}, [
|
|
86
|
+
}, [tags, defaultValue]);
|
|
69
87
|
// Handlers
|
|
70
88
|
const handleOpen = () => {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
setOpen(false);
|
|
75
|
-
};
|
|
76
|
-
const handleChange = (_event, newValue) => {
|
|
77
|
-
setValue(newValue);
|
|
89
|
+
if (inputValue.length >= 3) {
|
|
90
|
+
setOpen(true);
|
|
91
|
+
}
|
|
78
92
|
};
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}, renderOption: (props, option, { selected, inputValue }) => {
|
|
93
|
+
const handleClose = () => setOpen(false);
|
|
94
|
+
const handleChange = (_event, newValue) => setValue(newValue);
|
|
95
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: tags || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => (value === null || value === void 0 ? void 0 : value.id) === (option === null || option === void 0 ? void 0 : option.id), inputValue: inputValue, onInputChange: (_e, newInputValue) => setInputValue(newInputValue), renderTags: (value, getTagProps) => value.map((option, index) => (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: option }, getTagProps({ index })), option.id)), renderOption: (props, option, { inputValue }) => {
|
|
83
96
|
const matches = (0, match_1.default)(option.name, inputValue);
|
|
84
97
|
const parts = (0, parse_1.default)(option.name, matches);
|
|
85
|
-
return ((0, jsx_runtime_1.jsx)("li", Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ tag: option, label: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, TagChipProps), option.id) })));
|
|
98
|
+
return ((0, jsx_runtime_1.jsx)("li", Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(TagChip_1.default, Object.assign({ disposable: false, tag: option, label: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, TagChipProps), option.id) })));
|
|
86
99
|
}, renderInput: (params) => {
|
|
87
|
-
return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: (0, jsx_runtime_1.jsx)(react_1.
|
|
100
|
+
return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: tags.length > 0 ? (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: params.InputProps.endAdornment }) : null }) })));
|
|
88
101
|
} }, rest)));
|
|
89
102
|
};
|
|
90
103
|
exports.default = TagAutocomplete;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import React, { useEffect, useState } from 'react';
|
|
3
|
+
import React, { Fragment, useEffect, useState } from 'react';
|
|
4
4
|
import { FormattedMessage } from 'react-intl';
|
|
5
5
|
import parse from 'autosuggest-highlight/parse';
|
|
6
6
|
import match from 'autosuggest-highlight/match';
|
|
7
7
|
import { Autocomplete, TextField, styled } from '@mui/material';
|
|
8
|
-
import { useSCFetchAddressingTagList } from '@selfcommunity/react-core';
|
|
9
8
|
import { useThemeProps } from '@mui/system';
|
|
10
9
|
import TagChip from '../../shared/TagChip';
|
|
10
|
+
import { TagService } from '@selfcommunity/api-services';
|
|
11
11
|
const PREFIX = 'SCTagAutocomplete';
|
|
12
12
|
const classes = {
|
|
13
13
|
root: `${PREFIX}-root`
|
|
@@ -51,38 +51,51 @@ const TagAutocomplete = (inProps) => {
|
|
|
51
51
|
// State
|
|
52
52
|
const [open, setOpen] = useState(false);
|
|
53
53
|
const [value, setValue] = useState(typeof defaultValue === 'string' ? null : defaultValue);
|
|
54
|
-
|
|
55
|
-
const
|
|
54
|
+
const [tags, setTags] = useState([]);
|
|
55
|
+
const [inputValue, setInputValue] = useState('');
|
|
56
56
|
useEffect(() => {
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
let active = true;
|
|
58
|
+
if (open && inputValue.length >= 3) {
|
|
59
|
+
TagService.searchUserTags({ search: inputValue || '' })
|
|
60
|
+
.then((res) => {
|
|
61
|
+
if (active) {
|
|
62
|
+
setTags((res === null || res === void 0 ? void 0 : res.results) || []);
|
|
63
|
+
}
|
|
64
|
+
})
|
|
65
|
+
.catch(() => {
|
|
66
|
+
if (active) {
|
|
67
|
+
setTags([]);
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
return () => {
|
|
72
|
+
active = false;
|
|
73
|
+
};
|
|
74
|
+
}, [open, inputValue]);
|
|
75
|
+
useEffect(() => {
|
|
76
|
+
if (value !== null) {
|
|
77
|
+
onChange && onChange(value);
|
|
59
78
|
}
|
|
60
|
-
onChange && onChange(value);
|
|
61
79
|
}, [value]);
|
|
62
80
|
useEffect(() => {
|
|
63
|
-
if ((
|
|
64
|
-
setValue(
|
|
81
|
+
if ((tags === null || tags === void 0 ? void 0 : tags.length) !== 0 && typeof defaultValue === 'string') {
|
|
82
|
+
setValue(tags.find((t) => t.id === Number(defaultValue)));
|
|
65
83
|
}
|
|
66
|
-
}, [
|
|
84
|
+
}, [tags, defaultValue]);
|
|
67
85
|
// Handlers
|
|
68
86
|
const handleOpen = () => {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
setOpen(false);
|
|
73
|
-
};
|
|
74
|
-
const handleChange = (_event, newValue) => {
|
|
75
|
-
setValue(newValue);
|
|
87
|
+
if (inputValue.length >= 3) {
|
|
88
|
+
setOpen(true);
|
|
89
|
+
}
|
|
76
90
|
};
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}, renderOption: (props, option, { selected, inputValue }) => {
|
|
91
|
+
const handleClose = () => setOpen(false);
|
|
92
|
+
const handleChange = (_event, newValue) => setValue(newValue);
|
|
93
|
+
return (_jsx(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: tags || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => (value === null || value === void 0 ? void 0 : value.id) === (option === null || option === void 0 ? void 0 : option.id), inputValue: inputValue, onInputChange: (_e, newInputValue) => setInputValue(newInputValue), renderTags: (value, getTagProps) => value.map((option, index) => _jsx(TagChip, Object.assign({ tag: option }, getTagProps({ index })), option.id)), renderOption: (props, option, { inputValue }) => {
|
|
81
94
|
const matches = match(option.name, inputValue);
|
|
82
95
|
const parts = parse(option.name, matches);
|
|
83
|
-
return (_jsx("li", Object.assign({}, props, { children: _jsx(TagChip, Object.assign({ tag: option, label: _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, TagChipProps), option.id) })));
|
|
96
|
+
return (_jsx("li", Object.assign({}, props, { children: _jsx(TagChip, Object.assign({ disposable: false, tag: option, label: _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, TagChipProps), option.id) })));
|
|
84
97
|
}, renderInput: (params) => {
|
|
85
|
-
return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: _jsx(
|
|
98
|
+
return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: tags.length > 0 ? _jsx(Fragment, { children: params.InputProps.endAdornment }) : null }) })));
|
|
86
99
|
} }, rest)));
|
|
87
100
|
};
|
|
88
101
|
export default TagAutocomplete;
|