@selfcommunity/react-ui 0.7.7-alpha.0 → 0.7.7-alpha.2

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
  1. package/lib/cjs/components/Categories/Categories.js +1 -1
  2. package/lib/cjs/components/NavigationMenuIconButton/DefaultDrawerContent.js +9 -2
  3. package/lib/esm/components/Categories/Categories.js +2 -2
  4. package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.js +10 -3
  5. package/lib/umd/react-ui.js +1 -1
  6. package/package.json +7 -7
package/lib/cjs/components/Categories/Categories.js CHANGED
@@ -125,7 +125,7 @@ function Categories(inProps) {
125
125
  /**
126
126
  * Renders categories list
127
127
  */
128
- const filteredCategories = getFilteredCategories();
128
+ const filteredCategories = (0, utils_1.sortByAttr)(getFilteredCategories(), 'order');
129
129
  const c = (react_1.default.createElement(react_1.default.Fragment, null,
130
130
  showFilters && (react_1.default.createElement(material_1.Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 6 },
131
131
  react_1.default.createElement(material_1.TextField, { fullWidth: true, value: filterName, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
package/lib/cjs/components/NavigationMenuIconButton/DefaultDrawerContent.js CHANGED
@@ -6,9 +6,11 @@ const react_core_1 = require("@selfcommunity/react-core");
6
6
  const react_1 = tslib_1.__importStar(require("react"));
7
7
  const Category_1 = tslib_1.__importDefault(require("../Category"));
8
8
  const react_intl_1 = require("react-intl");
9
+ const utils_1 = require("@selfcommunity/utils");
9
10
  function DefaultDrawerContent() {
10
11
  // HOOKS
11
12
  const { categories } = (0, react_core_1.useSCFetchCategories)();
13
+ const [categoriesOrdered, setCategoriesOrdered] = (0, react_1.useState)([]);
12
14
  // ROUTING
13
15
  const scRoutingContext = (0, react_core_1.useSCRouting)();
14
16
  //STATE
@@ -24,19 +26,24 @@ function DefaultDrawerContent() {
24
26
  return Object.assign(Object.assign({}, prevState), { [index]: false });
25
27
  });
26
28
  };
29
+ // Order categories
30
+ (0, react_1.useEffect)(() => {
31
+ setCategoriesOrdered((0, utils_1.sortByAttr)(categories, 'order'));
32
+ }, [categories]);
27
33
  const getMouseEvents = (mouseEnter, mouseLeave) => ({
28
34
  onMouseEnter: mouseEnter,
29
35
  onMouseLeave: mouseLeave,
30
36
  onTouchStart: mouseEnter,
31
37
  onTouchMove: mouseLeave
32
38
  });
39
+ //order
33
40
  return (react_1.default.createElement(react_1.default.Fragment, null,
34
41
  react_1.default.createElement(material_1.Typography, { variant: "subtitle1" },
35
42
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }),
36
- " ",
43
+ ' ',
37
44
  react_1.default.createElement(material_1.Button, { variant: "text", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORIES_LIST_ROUTE_NAME, {}) },
38
45
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll" }))),
39
- categories.map((c, index) => (react_1.default.createElement(material_1.Zoom, { in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' }, key: index },
46
+ categoriesOrdered.map((c, index) => (react_1.default.createElement(material_1.Zoom, { in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' }, key: index },
40
47
  react_1.default.createElement(material_1.ListItem, { key: c.id },
41
48
  react_1.default.createElement(Category_1.default, Object.assign({ ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id))))))))));
42
49
  }
package/lib/esm/components/Categories/Categories.js CHANGED
@@ -10,7 +10,7 @@ import { FormattedMessage } from 'react-intl';
10
10
  import classNames from 'classnames';
11
11
  import { useThemeProps } from '@mui/system';
12
12
  import { SCOPE_SC_UI } from '../../constants/Errors';
13
- import { Logger } from '@selfcommunity/utils';
13
+ import { Logger, sortByAttr } from '@selfcommunity/utils';
14
14
  import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
15
15
  import { PREFIX } from './constants';
16
16
  const classes = {
@@ -123,7 +123,7 @@ export default function Categories(inProps) {
123
123
  /**
124
124
  * Renders categories list
125
125
  */
126
- const filteredCategories = getFilteredCategories();
126
+ const filteredCategories = sortByAttr(getFilteredCategories(), 'order');
127
127
  const c = (React.createElement(React.Fragment, null,
128
128
  showFilters && (React.createElement(Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (React.createElement(Grid, { item: true, xs: 12, md: 6 },
129
129
  React.createElement(TextField, { fullWidth: true, value: filterName, label: React.createElement(FormattedMessage, { id: "ui.categories.filterByName", defaultMessage: "ui.categories.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.js CHANGED
@@ -1,11 +1,13 @@
1
1
  import { Button, ListItem, Typography, Zoom } from '@mui/material';
2
2
  import { Link, SCRoutes, useSCFetchCategories, useSCRouting } from '@selfcommunity/react-core';
3
- import React, { useState } from 'react';
3
+ import React, { useEffect, useState } from 'react';
4
4
  import Category from '../Category';
5
5
  import { FormattedMessage } from 'react-intl';
6
+ import { sortByAttr } from '@selfcommunity/utils';
6
7
  export default function DefaultDrawerContent() {
7
8
  // HOOKS
8
9
  const { categories } = useSCFetchCategories();
10
+ const [categoriesOrdered, setCategoriesOrdered] = useState([]);
9
11
  // ROUTING
10
12
  const scRoutingContext = useSCRouting();
11
13
  //STATE
@@ -21,19 +23,24 @@ export default function DefaultDrawerContent() {
21
23
  return Object.assign(Object.assign({}, prevState), { [index]: false });
22
24
  });
23
25
  };
26
+ // Order categories
27
+ useEffect(() => {
28
+ setCategoriesOrdered(sortByAttr(categories, 'order'));
29
+ }, [categories]);
24
30
  const getMouseEvents = (mouseEnter, mouseLeave) => ({
25
31
  onMouseEnter: mouseEnter,
26
32
  onMouseLeave: mouseLeave,
27
33
  onTouchStart: mouseEnter,
28
34
  onTouchMove: mouseLeave
29
35
  });
36
+ //order
30
37
  return (React.createElement(React.Fragment, null,
31
38
  React.createElement(Typography, { variant: "subtitle1" },
32
39
  React.createElement(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }),
33
- " ",
40
+ ' ',
34
41
  React.createElement(Button, { variant: "text", component: Link, to: scRoutingContext.url(SCRoutes.CATEGORIES_LIST_ROUTE_NAME, {}) },
35
42
  React.createElement(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll" }))),
36
- categories.map((c, index) => (React.createElement(Zoom, { in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' }, key: index },
43
+ categoriesOrdered.map((c, index) => (React.createElement(Zoom, { in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' }, key: index },
37
44
  React.createElement(ListItem, { key: c.id },
38
45
  React.createElement(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id))))))))));
39
46
  }