@selfcommunity/react-ui 0.11.0-alpha.25 → 0.11.0-alpha.27
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/lib/cjs/components/CategoryAutocomplete/CategoryAutocomplete.d.ts +5 -0
- package/lib/cjs/components/CategoryAutocomplete/CategoryAutocomplete.js +3 -3
- package/lib/cjs/components/Composer/Layer/CategoryLayer/CategoryLayer.js +1 -1
- package/lib/esm/components/CategoryAutocomplete/CategoryAutocomplete.d.ts +5 -0
- package/lib/esm/components/CategoryAutocomplete/CategoryAutocomplete.js +3 -3
- package/lib/esm/components/Composer/Layer/CategoryLayer/CategoryLayer.js +1 -1
- package/lib/umd/react-ui.js +1 -1
- package/package.json +5 -5
|
@@ -22,6 +22,11 @@ export interface CategoryAutocompleteProps extends Pick<AutocompleteProps<SCCate
|
|
|
22
22
|
* @param value
|
|
23
23
|
*/
|
|
24
24
|
onChange?: (value: any) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Feed API Query Params
|
|
27
|
+
* @default [{'limit': 10, 'offset': 0}]
|
|
28
|
+
*/
|
|
29
|
+
endpointQueryParams?: Record<string, string | number | boolean>;
|
|
25
30
|
}
|
|
26
31
|
/**
|
|
27
32
|
* > API documentation for the Community-JS Category Autocomplete component. Learn about the available props and the CSS API.
|
|
@@ -51,17 +51,17 @@ const CategoryAutocomplete = (inProps) => {
|
|
|
51
51
|
name: PREFIX
|
|
52
52
|
});
|
|
53
53
|
// Props
|
|
54
|
-
const { onChange, multiple = false, defaultValue = multiple ? [] : null, limitCountCategories = 0, checkboxSelect = false, disabled = false, TextFieldProps = {
|
|
54
|
+
const { onChange, multiple = false, defaultValue = multiple ? [] : null, limitCountCategories = 0, checkboxSelect = false, disabled = false, endpointQueryParams = {}, TextFieldProps = {
|
|
55
55
|
variant: 'outlined',
|
|
56
56
|
label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryAutocomplete.label", defaultMessage: "ui.categoryAutocomplete.label" })
|
|
57
|
-
} } = props, rest = tslib_1.__rest(props, ["onChange", "multiple", "defaultValue", "limitCountCategories", "checkboxSelect", "disabled", "TextFieldProps"]);
|
|
57
|
+
} } = props, rest = tslib_1.__rest(props, ["onChange", "multiple", "defaultValue", "limitCountCategories", "checkboxSelect", "disabled", "endpointQueryParams", "TextFieldProps"]);
|
|
58
58
|
// State
|
|
59
59
|
const [open, setOpen] = (0, react_1.useState)(false);
|
|
60
60
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
61
61
|
// @ts-ignore
|
|
62
62
|
const [value, setValue] = (0, react_1.useState)(typeof defaultValue === 'string' ? null : defaultValue);
|
|
63
63
|
// HOOKS
|
|
64
|
-
const { categories, isLoading } = (0, react_core_1.useSCFetchCategories)();
|
|
64
|
+
const { categories, isLoading } = (0, react_core_1.useSCFetchCategories)({ endpointQueryParams });
|
|
65
65
|
(0, react_1.useEffect)(() => {
|
|
66
66
|
if (value === null) {
|
|
67
67
|
return;
|
|
@@ -28,6 +28,6 @@ const CategoryLayer = react_1.default.forwardRef((props, ref) => {
|
|
|
28
28
|
// HANDLERS
|
|
29
29
|
const handleSave = (0, react_1.useCallback)(() => onSave(value), [value, onSave]);
|
|
30
30
|
const handleChange = (0, react_1.useCallback)((categories) => setValue(categories), []);
|
|
31
|
-
return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { multiple: true, onChange: handleChange, defaultValue: defaultValue }) }))] }));
|
|
31
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" }) }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content }, { children: (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { multiple: true, onChange: handleChange, defaultValue: defaultValue, endpointQueryParams: { can_create_content: true } }) }))] })));
|
|
32
32
|
});
|
|
33
33
|
exports.default = CategoryLayer;
|
|
@@ -22,6 +22,11 @@ export interface CategoryAutocompleteProps extends Pick<AutocompleteProps<SCCate
|
|
|
22
22
|
* @param value
|
|
23
23
|
*/
|
|
24
24
|
onChange?: (value: any) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Feed API Query Params
|
|
27
|
+
* @default [{'limit': 10, 'offset': 0}]
|
|
28
|
+
*/
|
|
29
|
+
endpointQueryParams?: Record<string, string | number | boolean>;
|
|
25
30
|
}
|
|
26
31
|
/**
|
|
27
32
|
* > API documentation for the Community-JS Category Autocomplete component. Learn about the available props and the CSS API.
|
|
@@ -49,17 +49,17 @@ const CategoryAutocomplete = (inProps) => {
|
|
|
49
49
|
name: PREFIX
|
|
50
50
|
});
|
|
51
51
|
// Props
|
|
52
|
-
const { onChange, multiple = false, defaultValue = multiple ? [] : null, limitCountCategories = 0, checkboxSelect = false, disabled = false, TextFieldProps = {
|
|
52
|
+
const { onChange, multiple = false, defaultValue = multiple ? [] : null, limitCountCategories = 0, checkboxSelect = false, disabled = false, endpointQueryParams = {}, TextFieldProps = {
|
|
53
53
|
variant: 'outlined',
|
|
54
54
|
label: _jsx(FormattedMessage, { id: "ui.categoryAutocomplete.label", defaultMessage: "ui.categoryAutocomplete.label" })
|
|
55
|
-
} } = props, rest = __rest(props, ["onChange", "multiple", "defaultValue", "limitCountCategories", "checkboxSelect", "disabled", "TextFieldProps"]);
|
|
55
|
+
} } = props, rest = __rest(props, ["onChange", "multiple", "defaultValue", "limitCountCategories", "checkboxSelect", "disabled", "endpointQueryParams", "TextFieldProps"]);
|
|
56
56
|
// State
|
|
57
57
|
const [open, setOpen] = useState(false);
|
|
58
58
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
59
59
|
// @ts-ignore
|
|
60
60
|
const [value, setValue] = useState(typeof defaultValue === 'string' ? null : defaultValue);
|
|
61
61
|
// HOOKS
|
|
62
|
-
const { categories, isLoading } = useSCFetchCategories();
|
|
62
|
+
const { categories, isLoading } = useSCFetchCategories({ endpointQueryParams });
|
|
63
63
|
useEffect(() => {
|
|
64
64
|
if (value === null) {
|
|
65
65
|
return;
|
|
@@ -26,6 +26,6 @@ const CategoryLayer = React.forwardRef((props, ref) => {
|
|
|
26
26
|
// HANDLERS
|
|
27
27
|
const handleSave = useCallback(() => onSave(value), [value, onSave]);
|
|
28
28
|
const handleChange = useCallback((categories) => setValue(categories), []);
|
|
29
|
-
return _jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsx(DialogContent, Object.assign({ className: classes.content }, { children: _jsx(CategoryAutocomplete, { multiple: true, onChange: handleChange, defaultValue: defaultValue }) }))] }));
|
|
29
|
+
return (_jsxs(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest, { children: [_jsxs(DialogTitle, Object.assign({ className: classes.title }, { children: [_jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.category.title", defaultMessage: "ui.composer.layer.category.title" }) }), _jsx(Button, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }) }))] })), _jsx(DialogContent, Object.assign({ className: classes.content }, { children: _jsx(CategoryAutocomplete, { multiple: true, onChange: handleChange, defaultValue: defaultValue, endpointQueryParams: { can_create_content: true } }) }))] })));
|
|
30
30
|
});
|
|
31
31
|
export default CategoryLayer;
|