npm - @selfcommunity/react-ui - Versions diffs - 0.11.0-alpha.110 → 0.11.0-alpha.111 - Mend

@selfcommunity/react-ui 0.11.0-alpha.110 → 0.11.0-alpha.111

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.

Files changed (6) hide show

package/lib/cjs/components/TagAutocomplete/TagAutocomplete.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { AutocompleteProps, TextFieldProps } from '@mui/material';
 import { SCTagType } from '@selfcommunity/types';
 import { TagChipProps } from '../../shared/TagChip';
 export interface TagAutocompleteProps extends Pick<AutocompleteProps<SCTagType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCTagType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
-    defaultValue: SCTagType[] | any;
+    defaultValue: SCTagType[] | string;
     /**
      * The props applied to text field
      * @default {variant: 'outlined, label: tags_label}

package/lib/cjs/components/TagAutocomplete/TagAutocomplete.js CHANGED Viewed

@@ -10,6 +10,8 @@ const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const TagChip_1 = tslib_1.__importDefault(require("../../shared/TagChip"));
 const api_services_1 = require("@selfcommunity/api-services");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
 const PREFIX = 'SCTagAutocomplete';
 const classes = {
     root: `${PREFIX}-root`
@@ -55,24 +57,28 @@ const TagAutocomplete = (inProps) => {
     const [value, setValue] = (0, react_1.useState)(typeof defaultValue === 'string' ? null : defaultValue);
     const [tags, setTags] = (0, react_1.useState)([]);
     const [inputValue, setInputValue] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const fetchTags = (query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        try {
+            const res = yield api_services_1.TagService.searchUserTags({ search: query || '' });
+            const results = (res === null || res === void 0 ? void 0 : res.results) || [];
+            setTags(results);
+            return results;
+        }
+        catch (error) {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            setTags([]);
+            return [];
+        }
+        finally {
+            setLoading(false);
+        }
+    });
     (0, react_1.useEffect)(() => {
-        let active = true;
         if (open && inputValue.length >= 3) {
-            api_services_1.TagService.searchUserTags({ search: inputValue || '' })
-                .then((res) => {
-                if (active) {
-                    setTags((res === null || res === void 0 ? void 0 : res.results) || []);
-                }
-            })
-                .catch(() => {
-                if (active) {
-                    setTags([]);
-                }
-            });
+            fetchTags(inputValue);
         }
-        return () => {
-            active = false;
-        };
     }, [open, inputValue]);
     (0, react_1.useEffect)(() => {
         if (value !== null) {
@@ -80,10 +86,16 @@ const TagAutocomplete = (inProps) => {
         }
     }, [value]);
     (0, react_1.useEffect)(() => {
-        if ((tags === null || tags === void 0 ? void 0 : tags.length) !== 0 && typeof defaultValue === 'string') {
-            setValue(tags.find((t) => t.id === Number(defaultValue)));
-        }
-    }, [tags, defaultValue]);
+        const loadDefault = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+            if (typeof defaultValue === 'string' && defaultValue.trim() !== '') {
+                const results = yield fetchTags(defaultValue);
+                const match = results.find((t) => t.name === defaultValue);
+                if (match)
+                    setValue(match);
+            }
+        });
+        loadDefault();
+    }, [defaultValue]);
     // Handlers
     const handleOpen = () => {
         if (inputValue.length >= 3) {
@@ -97,7 +109,7 @@ const TagAutocomplete = (inProps) => {
             const parts = (0, parse_1.default)(option.name, matches);
             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) })));
         }, renderInput: (params) => {
-            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 }) })));
+            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.jsxs)(react_1.Fragment, { children: [' ', loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) })));
         } }, rest)));
 };
 exports.default = TagAutocomplete;

package/lib/esm/components/TagAutocomplete/TagAutocomplete.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { AutocompleteProps, TextFieldProps } from '@mui/material';
 import { SCTagType } from '@selfcommunity/types';
 import { TagChipProps } from '../../shared/TagChip';
 export interface TagAutocompleteProps extends Pick<AutocompleteProps<SCTagType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCTagType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
-    defaultValue: SCTagType[] | any;
+    defaultValue: SCTagType[] | string;
     /**
      * The props applied to text field
      * @default {variant: 'outlined, label: tags_label}

package/lib/esm/components/TagAutocomplete/TagAutocomplete.js CHANGED Viewed

@@ -1,13 +1,15 @@
-import { __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Fragment, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
-import { Autocomplete, TextField, styled } from '@mui/material';
+import { Autocomplete, TextField, styled, CircularProgress } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import TagChip from '../../shared/TagChip';
 import { TagService } from '@selfcommunity/api-services';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
 const PREFIX = 'SCTagAutocomplete';
 const classes = {
     root: `${PREFIX}-root`
@@ -53,24 +55,28 @@ const TagAutocomplete = (inProps) => {
     const [value, setValue] = useState(typeof defaultValue === 'string' ? null : defaultValue);
     const [tags, setTags] = useState([]);
     const [inputValue, setInputValue] = useState('');
+    const [loading, setLoading] = useState(true);
+    const fetchTags = (query) => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        try {
+            const res = yield TagService.searchUserTags({ search: query || '' });
+            const results = (res === null || res === void 0 ? void 0 : res.results) || [];
+            setTags(results);
+            return results;
+        }
+        catch (error) {
+            Logger.error(SCOPE_SC_UI, error);
+            setTags([]);
+            return [];
+        }
+        finally {
+            setLoading(false);
+        }
+    });
     useEffect(() => {
-        let active = true;
         if (open && inputValue.length >= 3) {
-            TagService.searchUserTags({ search: inputValue || '' })
-                .then((res) => {
-                if (active) {
-                    setTags((res === null || res === void 0 ? void 0 : res.results) || []);
-                }
-            })
-                .catch(() => {
-                if (active) {
-                    setTags([]);
-                }
-            });
+            fetchTags(inputValue);
         }
-        return () => {
-            active = false;
-        };
     }, [open, inputValue]);
     useEffect(() => {
         if (value !== null) {
@@ -78,10 +84,16 @@ const TagAutocomplete = (inProps) => {
         }
     }, [value]);
     useEffect(() => {
-        if ((tags === null || tags === void 0 ? void 0 : tags.length) !== 0 && typeof defaultValue === 'string') {
-            setValue(tags.find((t) => t.id === Number(defaultValue)));
-        }
-    }, [tags, defaultValue]);
+        const loadDefault = () => __awaiter(void 0, void 0, void 0, function* () {
+            if (typeof defaultValue === 'string' && defaultValue.trim() !== '') {
+                const results = yield fetchTags(defaultValue);
+                const match = results.find((t) => t.name === defaultValue);
+                if (match)
+                    setValue(match);
+            }
+        });
+        loadDefault();
+    }, [defaultValue]);
     // Handlers
     const handleOpen = () => {
         if (inputValue.length >= 3) {
@@ -95,7 +107,7 @@ const TagAutocomplete = (inProps) => {
             const parts = parse(option.name, matches);
             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) })));
         }, renderInput: (params) => {
-            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 }) })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: tags.length > 0 ? (_jsxs(Fragment, { children: [' ', loading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) })));
         } }, rest)));
 };
 export default TagAutocomplete;