@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.
@@ -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;