@nualang/nualang-ui-components 0.1.1248 → 0.1.1250

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 (13) hide show
  1. package/dist/Assignments/AssignmentCard/AssignmentCard.js +0 -1
  2. package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js +3 -0
  3. package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js +36 -21
  4. package/dist/Dialogs/RecordingDialog/RecordingDialog.js +0 -2
  5. package/dist/Lists/Bots/Bots.js +9 -47
  6. package/dist/Lists/Classrooms/Classrooms.js +7 -44
  7. package/dist/Lists/Courses/Courses.js +9 -68
  8. package/dist/Lists/ListElements/index.js +40 -0
  9. package/dist/Lists/Roleplays/Roleplays.js +9 -47
  10. package/dist/Lists/Topics/Topics.js +9 -54
  11. package/dist/Misc/ExerciseBottomBar/ExerciseBottomBar.js +2 -1
  12. package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js +0 -3
  13. package/package.json +1 -1
package/dist/Assignments/AssignmentCard/AssignmentCard.js CHANGED
@@ -34,7 +34,6 @@ function AssignmentCard({
34
34
  handleViewProgress,
35
35
  lastAssignmentFetch
36
36
  }) {
37
- console.log(assignment);
38
37
  const [confirm] = (0, _useConfirm.default)(t);
39
38
  const {
40
39
  useQuery
package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js CHANGED
@@ -129,6 +129,9 @@ const AssignmentCardsList = ({
129
129
  })]
130
130
  }), assignments.filter(assignment => {
131
131
  if (isCreator) return true;
132
+ if (Array.isArray(assignment.assignedStudents) && !assignment.assignedStudents.includes(memberId)) {
133
+ return false;
134
+ }
132
135
  if (!assignment.scheduleDate) return true;
133
136
  return new Date(assignment.scheduleDate) <= new Date();
134
137
  }).map((assignment, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssignmentCard.default, {
package/dist/Assignments/CreateAssignmentDialog/CreateAssignmentDialog.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = CreateAssignmentDialog;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
+ var _Queries = require("@nualang/nualang-api-and-queries/Queries");
8
9
  var _material = require("@mui/material");
9
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
11
  var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
@@ -17,8 +18,8 @@ var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDr
17
18
  var _ArrowDropUp = _interopRequireDefault(require("@mui/icons-material/ArrowDropUp"));
18
19
  var _dayjs = _interopRequireDefault(require("dayjs"));
19
20
  var _AssignmentSelectExercise = _interopRequireDefault(require("../AssignmentSelectExercise/AssignmentSelectExercise"));
20
- var _Queries = require("@nualang/nualang-api-and-queries/Queries");
21
21
  var _AssignmentExerciseSelector = _interopRequireDefault(require("../AssignmentExerciseSelector/AssignmentExerciseSelector"));
22
+ var _config = require("../../config");
22
23
  var _jsxRuntime = require("react/jsx-runtime");
23
24
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
24
25
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -61,6 +62,9 @@ function CreateAssignmentDialog({
61
62
  const {
62
63
  classes
63
64
  } = useStyles();
65
+ const {
66
+ useQueries
67
+ } = _Queries.ReactQuery;
64
68
  const [selectedExercises, setSelectedExercises] = (0, _react.useState)(initialData.exercises ? initialData.exercises : []);
65
69
  const [submittedExercises, setSubmittedExercises] = (0, _react.useState)(initialData.exercises ? initialData.exercises : []);
66
70
  const [members, setMembers] = (0, _react.useState)([]);
@@ -106,26 +110,38 @@ function CreateAssignmentDialog({
106
110
  }, {
107
111
  enabled: !!assignment.classroomId
108
112
  });
109
- const membersQuery = _Queries.classrooms.useClassroomMembers(async (classroomId, username) => {
110
- const allMembers = [];
111
- await Promise.all(classroomId.map(async cId => {
112
- const response = await getClassroomMembers(cId, username);
113
- allMembers.push(response?.Items || []);
114
- }));
115
- const flatMembers = allMembers.flat();
116
- const seen = new Set();
117
- const uniqueMembers = flatMembers.filter(member => {
118
- if (seen.has(member.memberId)) return false;
119
- seen.add(member.memberId);
120
- return true;
121
- });
122
- return uniqueMembers;
123
- }, {
124
- classroomId: assignment?.classroomId,
125
- username: username
126
- }, {
127
- enabled: !!(assignment.classroomId.length > 0)
113
+ let filters = {
114
+ limit: _config.config.limits.classroomMembers
115
+ };
116
+ const classroomMembersQueries = useQueries({
117
+ queries: (Array.isArray(assignment.classroomId) ? assignment.classroomId : [assignment.classroomId]).map(cId => ({
118
+ queryKey: _Queries.classrooms.classroomKeys.itemMembers(cId, username),
119
+ queryFn: () => getClassroomMembers(cId, filters),
120
+ queryOptions: {
121
+ enabled: !!(Array.isArray(assignment.classroomId) ? assignment.classroomId.length > 0 : assignment.classroomId)
122
+ }
123
+ })),
124
+ combine: results => {
125
+ return {
126
+ data: results.map(result => result.data),
127
+ pending: results.some(result => result.isPending)
128
+ };
129
+ }
128
130
  });
131
+ const selectedMembers = (0, _react.useMemo)(() => {
132
+ if (!classroomMembersQueries.pending && Array.isArray(classroomMembersQueries.data[0].Items) && classroomMembersQueries.data[0].Items.length) {
133
+ const flatMembers = classroomMembersQueries.data[0].Items.flat();
134
+ const seen = new Set();
135
+ const uniqueMembers = flatMembers.filter(member => {
136
+ if (seen.has(member.memberId)) return false;
137
+ seen.add(member.memberId);
138
+ return true;
139
+ });
140
+ return uniqueMembers;
141
+ } else {
142
+ return [];
143
+ }
144
+ }, [classroomMembersQueries.data, classroomMembersQueries.pending]);
129
145
  const selectedCourses = (0, _react.useMemo)(() => {
130
146
  if (!coursesQuery.isSuccess || !Array.isArray(coursesQuery.data.Items)) {
131
147
  return [];
@@ -144,7 +160,6 @@ function CreateAssignmentDialog({
144
160
  courses: filteredCourses
145
161
  });
146
162
  }, [selectedCourses, submittedExercises]);
147
- const selectedMembers = (0, _react.useMemo)(() => membersQuery.isSuccess && Array.isArray(membersQuery.data) && membersQuery.data.length ? membersQuery.data : [], [membersQuery.data, membersQuery.isSuccess]);
148
163
  const classroomMembers = async selectedMembers => {
149
164
  const formattedMembers = await getMemberDetails(selectedMembers);
150
165
  setMembers(formattedMembers);
package/dist/Dialogs/RecordingDialog/RecordingDialog.js CHANGED
@@ -39,8 +39,6 @@ function TranscriptViewer({
39
39
  // console.log({ sentence, attendee, userImage, conversation })
40
40
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
41
41
  "aria-label": "go to time in recording",
42
- display: "flex",
43
- alignItems: "center",
44
42
  onClick: () => goToTimestamp(sentence.start_time, sentence.end_time),
45
43
  sx: {
46
44
  cursor: "pointer",
package/dist/Lists/Bots/Bots.js CHANGED
@@ -9,40 +9,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _material = require("@mui/material");
10
10
  var _BotPreview = _interopRequireDefault(require("../../Dialogs/BotPreview/BotPreview"));
11
11
  var _useListScroll = _interopRequireDefault(require("../../hooks/useListScroll"));
12
- var _mui = require("tss-react/mui");
12
+ var _ListElements = require("../ListElements");
13
13
  var _Bot = _interopRequireDefault(require("../../Cards/Bot"));
14
14
  var _useConfirm = _interopRequireDefault(require("../../hooks/useConfirm"));
15
15
  var _jsxRuntime = require("react/jsx-runtime");
16
16
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
17
  // components
18
18
 
19
- const useStyles = (0, _mui.makeStyles)()(theme => ({
20
- root: {
21
- display: "flex",
22
- flexWrap: "wrap",
23
- justifyContent: "space-around",
24
- overflow: "hidden",
25
- backgroundColor: theme.palette.background.paper
26
- },
27
- gridList: {
28
- gridAutoFlow: "column"
29
- },
30
- gridListTileRoot: {
31
- [theme.breakpoints.up("sm")]: {
32
- minWidth: 380
33
- },
34
- height: "auto",
35
- minWidth: 330,
36
- padding: theme.spacing(0.75, 0.75, 2, 0.75)
37
- },
38
- gridListItemRoot: {
39
- [theme.breakpoints.up("sm")]: {
40
- minWidth: 380
41
- },
42
- height: "auto",
43
- minWidth: 320
44
- }
45
- }));
46
19
  function BotList({
47
20
  t = text => text,
48
21
  bots,
@@ -70,9 +43,6 @@ function BotList({
70
43
  isNualangTemplate = false,
71
44
  ...otherProps
72
45
  }) {
73
- const {
74
- classes
75
- } = useStyles();
76
46
  const [confirm] = (0, _useConfirm.default)(t);
77
47
  const [isPreviewOpen, setIsPreviewOpen] = (0, _react.useState)(false);
78
48
  const [previewBot, setPreviewBot] = (0, _react.useState)({});
@@ -92,13 +62,11 @@ function BotList({
92
62
  };
93
63
  if (!bots) {
94
64
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
95
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
96
- className: classes.gridList,
65
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridList, {
97
66
  cols: singleLineGridCols,
98
67
  rowHeight: "auto",
99
68
  gap: 0,
100
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
101
- className: classes.gridListTileRoot,
69
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
102
70
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Bot.default, {
103
71
  t: t,
104
72
  subscription: subscription
@@ -110,8 +78,7 @@ function BotList({
110
78
  width: '100%'
111
79
  },
112
80
  spacing: 2,
113
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
114
- className: classes.gridListTileRoot,
81
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
115
82
  size: {
116
83
  xs: 12,
117
84
  sm: 6,
@@ -128,14 +95,12 @@ function BotList({
128
95
  });
129
96
  }
130
97
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
131
- children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ImageList, {
132
- className: classes.gridList,
98
+ children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListElements.SingleLineGridList, {
133
99
  cols: singleLineGridCols,
134
100
  rowHeight: "auto",
135
101
  gap: 0,
136
102
  children: [items.map(bot => {
137
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
138
- className: classes.gridListTileRoot,
103
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
139
104
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Bot.default, {
140
105
  disableActions: disableActions,
141
106
  t: t,
@@ -157,8 +122,7 @@ function BotList({
157
122
  ...otherProps
158
123
  }, bot.botId)
159
124
  }, bot.botId);
160
- }), (items || []).length < (bots || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
161
- className: classes.gridListTileRoot,
125
+ }), (items || []).length < (bots || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
162
126
  ref: index === 0 ? ref : null,
163
127
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Bot.default, {
164
128
  t: t
@@ -171,8 +135,7 @@ function BotList({
171
135
  },
172
136
  spacing: 2,
173
137
  children: [items.map(bot => {
174
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
175
- className: classes.gridListItemRoot,
138
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
176
139
  size: {
177
140
  xs: 12,
178
141
  sm: 6,
@@ -201,8 +164,7 @@ function BotList({
201
164
  ...otherProps
202
165
  }, bot.botId)
203
166
  }, bot.botId);
204
- }), (items || []).length < (bots || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
205
- className: classes.gridListTileRoot,
167
+ }), (items || []).length < (bots || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
206
168
  ref: index === 0 ? ref : null,
207
169
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Bot.default, {
208
170
  t: t
package/dist/Lists/Classrooms/Classrooms.js CHANGED
@@ -7,41 +7,13 @@ exports.default = void 0;
7
7
  var _propTypes = _interopRequireDefault(require("prop-types"));
8
8
  var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
9
9
  var _Classroom = _interopRequireDefault(require("../../Cards/Classroom"));
10
- var _material = require("@mui/material");
11
- var _mui = require("tss-react/mui");
12
10
  var _useListScroll = _interopRequireDefault(require("../../hooks/useListScroll"));
11
+ var _ListElements = require("../ListElements");
13
12
  var _jsxRuntime = require("react/jsx-runtime");
14
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
14
  // components
16
15
 
17
16
  // import {propsAreEqual} from "../../utils";
18
- const useStyles = (0, _mui.makeStyles)()(theme => ({
19
- root: {
20
- display: "flex",
21
- flexWrap: "wrap",
22
- justifyContent: "space-around",
23
- overflow: "hidden",
24
- backgroundColor: theme.palette.background.paper
25
- },
26
- gridList: {
27
- gridAutoFlow: "column"
28
- },
29
- gridListTileRoot: {
30
- [theme.breakpoints.up("sm")]: {
31
- minWidth: 380
32
- },
33
- height: "auto",
34
- minWidth: 330,
35
- padding: theme.spacing(0.75, 0.75, 2, 0.75)
36
- },
37
- gridListItemRoot: {
38
- [theme.breakpoints.up("sm")]: {
39
- minWidth: 380
40
- },
41
- height: "auto",
42
- minWidth: 320
43
- }
44
- }));
45
17
  function ClassroomList({
46
18
  t = text => text,
47
19
  classrooms,
@@ -50,9 +22,6 @@ function ClassroomList({
50
22
  singleLineGridCols = 3.5,
51
23
  ...otherProps
52
24
  }) {
53
- const {
54
- classes
55
- } = useStyles();
56
25
  const [items, ref] = (0, _useListScroll.default)({
57
26
  allItems: classrooms,
58
27
  pageLimit: 12
@@ -64,8 +33,7 @@ function ClassroomList({
64
33
  width: '100%'
65
34
  },
66
35
  spacing: 2,
67
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
68
- className: classes.gridListItemRoot,
36
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
69
37
  size: {
70
38
  xs: 12,
71
39
  sm: 6,
@@ -78,14 +46,12 @@ function ClassroomList({
78
46
  });
79
47
  }
80
48
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
81
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ImageList, {
82
- className: classes.gridList,
49
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListElements.SingleLineGridList, {
83
50
  cols: singleLineGridCols,
84
51
  rowHeight: "auto",
85
52
  gap: 0,
86
53
  children: [items.map(classroom => {
87
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
88
- className: classes.gridListTileRoot,
54
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
89
55
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Classroom.default, {
90
56
  t: t,
91
57
  classroom: classroom,
@@ -94,8 +60,7 @@ function ClassroomList({
94
60
  ...otherProps
95
61
  }, classroom.classroomId)
96
62
  }, classroom.classroomId);
97
- }), (items || []).length < (classrooms || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
98
- className: classes.gridListTileRoot,
63
+ }), (items || []).length < (classrooms || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
99
64
  ref: index === 0 ? ref : null,
100
65
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Classroom.default, {
101
66
  t: t
@@ -107,8 +72,7 @@ function ClassroomList({
107
72
  width: '100%'
108
73
  },
109
74
  spacing: 2,
110
- children: [items.map(classroom => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
111
- className: classes.gridListItemRoot,
75
+ children: [items.map(classroom => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
112
76
  size: {
113
77
  xs: 12,
114
78
  sm: 6,
@@ -123,8 +87,7 @@ function ClassroomList({
123
87
  disableRaised: false,
124
88
  ...otherProps
125
89
  }, classroom.classroomId)
126
- }, classroom.classroomId)), (items || []).length < (classrooms || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
127
- className: classes.gridListTileRoot,
90
+ }, classroom.classroomId)), (items || []).length < (classrooms || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
128
91
  ref: index === 0 ? ref : null,
129
92
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Classroom.default, {
130
93
  t: t
package/dist/Lists/Courses/Courses.js CHANGED
@@ -7,41 +7,12 @@ exports.default = exports.MemoizedCoursesList = void 0;
7
7
  var _react = require("react");
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _material = require("@mui/material");
10
- var _mui = require("tss-react/mui");
11
10
  var _Course = _interopRequireDefault(require("../../Cards/Course"));
12
11
  var _useListScroll = _interopRequireDefault(require("../../hooks/useListScroll"));
12
+ var _ListElements = require("../ListElements");
13
13
  var _jsxRuntime = require("react/jsx-runtime");
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
- // components
16
-
17
15
  // import { propsAreEqual } from '../../utils';
18
- const useStyles = (0, _mui.makeStyles)()(theme => ({
19
- root: {
20
- display: "flex",
21
- flexWrap: "wrap",
22
- justifyContent: "space-around",
23
- overflow: "hidden",
24
- backgroundColor: theme.palette.background.paper
25
- },
26
- gridList: {
27
- gridAutoFlow: "column"
28
- },
29
- gridListTileRoot: {
30
- height: "auto",
31
- minWidth: {
32
- xs: 330,
33
- sm: 380
34
- },
35
- padding: theme.spacing(0.75, 0.75, 2, 0.75)
36
- },
37
- gridListItemRoot: {
38
- height: "auto",
39
- minWidth: {
40
- xs: 330,
41
- sm: 380
42
- }
43
- }
44
- }));
45
16
  function CourseList({
46
17
  t = text => text,
47
18
  courses,
@@ -63,22 +34,17 @@ function CourseList({
63
34
  isClassroomArchived = false,
64
35
  ...otherProps
65
36
  }) {
66
- const {
67
- classes
68
- } = useStyles();
69
37
  const [items, ref] = (0, _useListScroll.default)({
70
38
  allItems: courses,
71
39
  pageLimit: 12
72
40
  });
73
41
  if (!courses) {
74
42
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
75
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
76
- className: classes.gridList,
43
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridList, {
77
44
  cols: singleLineGridCols,
78
45
  rowHeight: "auto",
79
46
  gap: 0,
80
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
81
- className: classes.gridListTileRoot,
47
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
82
48
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Course.default, {
83
49
  t: t
84
50
  })
@@ -89,8 +55,7 @@ function CourseList({
89
55
  width: '100%'
90
56
  },
91
57
  spacing: 2,
92
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
93
- className: classes.gridListItemRoot,
58
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
94
59
  size: {
95
60
  xs: 12,
96
61
  sm: 6,
@@ -106,27 +71,13 @@ function CourseList({
106
71
  });
107
72
  }
108
73
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
109
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ImageList, {
110
- className: classes.gridList,
74
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListElements.SingleLineGridList, {
111
75
  cols: singleLineGridCols,
112
76
  rowHeight: "auto",
113
77
  gap: 0,
114
- sx: {
115
- display: 'flex',
116
- gridAutoFlow: 'column',
117
- justifyContent: 'flex-start'
118
- },
119
78
  children: [items.map(course => {
120
79
  const selected = selectedCourses.includes(course.courseId);
121
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
122
- className: classes.gridListTileRoot,
123
- sx: {
124
- flex: '0 0 auto',
125
- width: {
126
- xs: 330,
127
- sm: 380
128
- } // Stop flex overwriting
129
- },
80
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
130
81
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Course.default, {
131
82
  t: t,
132
83
  course: course,
@@ -148,16 +99,8 @@ function CourseList({
148
99
  ...otherProps
149
100
  }, course.courseId)
150
101
  }, course.courseId);
151
- }), (items || []).length < (courses || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
152
- className: classes.gridListTileRoot,
102
+ }), (items || []).length < (courses || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
153
103
  ref: index === 0 ? ref : null,
154
- sx: {
155
- flex: '0 0 auto',
156
- width: {
157
- xs: 330,
158
- sm: 380
159
- }
160
- },
161
104
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Course.default, {
162
105
  t: t
163
106
  })
@@ -170,8 +113,7 @@ function CourseList({
170
113
  spacing: 2,
171
114
  children: [items.map(course => {
172
115
  const selected = selectedCourses.includes(course.courseId);
173
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
174
- className: classes.gridListItemRoot,
116
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
175
117
  size: {
176
118
  xs: 12,
177
119
  sm: 6,
@@ -200,8 +142,7 @@ function CourseList({
200
142
  ...otherProps
201
143
  }, course.courseId)
202
144
  }, course.courseId);
203
- }), (items || []).length < (courses || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
204
- className: classes.gridListItemRoot,
145
+ }), (items || []).length < (courses || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
205
146
  ref: index === 0 ? ref : null,
206
147
  size: {
207
148
  xs: 12,
package/dist/Lists/ListElements/index.js ADDED
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SingleLineGridListItem = exports.SingleLineGridList = exports.GridListItem = void 0;
7
+ var _material = require("@mui/material");
8
+ var _system = require("@mui/system");
9
+ const SingleLineGridList = exports.SingleLineGridList = (0, _system.styled)(_material.ImageList)(() => ({
10
+ gridAutoFlow: 'column',
11
+ display: 'flex',
12
+ justifyContent: 'flex-start'
13
+ }));
14
+ const minWidth = {
15
+ xs: 330,
16
+ sm: 380
17
+ };
18
+ const SingleLineGridListItem = exports.SingleLineGridListItem = (0, _system.styled)(_material.ImageListItem)(({
19
+ theme
20
+ }) => ({
21
+ [theme.breakpoints.up("sm")]: {
22
+ minWidth: minWidth.sm,
23
+ width: minWidth.sm
24
+ },
25
+ minWidth: minWidth.xs,
26
+ width: minWidth.xs,
27
+ // Stop flex overwriting
28
+ height: "auto",
29
+ padding: theme.spacing(0.75, 0.75, 2, 0.75),
30
+ flex: '0 0 auto'
31
+ }));
32
+ const GridListItem = exports.GridListItem = (0, _system.styled)(_material.Grid)(({
33
+ theme
34
+ }) => ({
35
+ [theme.breakpoints.up("sm")]: {
36
+ minWidth: minWidth.sm
37
+ },
38
+ minWidth: minWidth.xs,
39
+ height: "auto"
40
+ }));
package/dist/Lists/Roleplays/Roleplays.js CHANGED
@@ -9,40 +9,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _material = require("@mui/material");
10
10
  var _RoleplayPreview = _interopRequireDefault(require("../../Dialogs/RoleplayPreview/RoleplayPreview"));
11
11
  var _useListScroll = _interopRequireDefault(require("../../hooks/useListScroll"));
12
- var _mui = require("tss-react/mui");
12
+ var _ListElements = require("../ListElements");
13
13
  var _Roleplay = _interopRequireDefault(require("../../Cards/Roleplay"));
14
14
  var _utils = require("../../utils");
15
15
  var _jsxRuntime = require("react/jsx-runtime");
16
16
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
17
  // components
18
18
 
19
- const useStyles = (0, _mui.makeStyles)()(theme => ({
20
- root: {
21
- display: "flex",
22
- flexWrap: "wrap",
23
- justifyContent: "space-around",
24
- overflow: "hidden",
25
- backgroundColor: theme.palette.background.paper
26
- },
27
- gridList: {
28
- gridAutoFlow: "column"
29
- },
30
- gridListTileRoot: {
31
- [theme.breakpoints.up("sm")]: {
32
- minWidth: 380
33
- },
34
- height: "auto",
35
- minWidth: 330,
36
- padding: theme.spacing(0.75, 0.75, 2, 0.75)
37
- },
38
- gridListItemRoot: {
39
- [theme.breakpoints.up("sm")]: {
40
- minWidth: 380
41
- },
42
- height: "auto",
43
- minWidth: 320
44
- }
45
- }));
46
19
  function RoleplayList({
47
20
  t = text => text,
48
21
  roleplays,
@@ -64,9 +37,6 @@ function RoleplayList({
64
37
  handleTranslate,
65
38
  ...otherProps
66
39
  }) {
67
- const {
68
- classes
69
- } = useStyles();
70
40
  const [isPreviewOpen, setIsPreviewOpen] = (0, _react.useState)(false);
71
41
  const [previewRoleplay, setPreviewRoleplay] = (0, _react.useState)({});
72
42
  const [previewMessages, setPreviewMessges] = (0, _react.useState)([]);
@@ -106,13 +76,11 @@ function RoleplayList({
106
76
  }, [previewRoleplay, previewRoleplay.script, isPreviewOpen]);
107
77
  if (!roleplays) {
108
78
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
109
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
110
- className: classes.gridList,
79
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridList, {
111
80
  cols: singleLineGridCols,
112
81
  rowHeight: "auto",
113
82
  gap: 0,
114
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
115
- className: classes.gridListTileRoot,
83
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
116
84
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Roleplay.default, {
117
85
  t: t,
118
86
  subscription: subscription
@@ -124,8 +92,7 @@ function RoleplayList({
124
92
  width: '100%'
125
93
  },
126
94
  spacing: 2,
127
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
128
- className: classes.gridListItemRoot,
95
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
129
96
  size: {
130
97
  xs: 12,
131
98
  sm: 6,
@@ -142,14 +109,12 @@ function RoleplayList({
142
109
  });
143
110
  }
144
111
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
145
- children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ImageList, {
146
- className: classes.gridList,
112
+ children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListElements.SingleLineGridList, {
147
113
  cols: singleLineGridCols,
148
114
  rowHeight: "auto",
149
115
  gap: 0,
150
116
  children: [items.map(roleplay => {
151
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
152
- className: classes.gridListTileRoot,
117
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
153
118
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Roleplay.default, {
154
119
  t: t,
155
120
  roleplay: roleplay,
@@ -170,8 +135,7 @@ function RoleplayList({
170
135
  ...otherProps
171
136
  }, roleplay.roleplayId)
172
137
  }, roleplay.roleplayId);
173
- }), (items || []).length < (roleplays || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
174
- className: classes.gridListTileRoot,
138
+ }), (items || []).length < (roleplays || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
175
139
  ref: index === 0 ? ref : null,
176
140
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Roleplay.default, {
177
141
  t: t
@@ -184,8 +148,7 @@ function RoleplayList({
184
148
  },
185
149
  spacing: 2,
186
150
  children: [items.map(roleplay => {
187
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
188
- className: classes.gridListItemRoot,
151
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
189
152
  size: {
190
153
  xs: 12,
191
154
  sm: 6,
@@ -213,8 +176,7 @@ function RoleplayList({
213
176
  ...otherProps
214
177
  }, roleplay.roleplayId)
215
178
  }, roleplay.roleplayId);
216
- }), (items || []).length < (roleplays || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
217
- className: classes.gridListTileRoot,
179
+ }), (items || []).length < (roleplays || []).length && new Array(3).fill(null).map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
218
180
  ref: index === 0 ? ref : null,
219
181
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Roleplay.default, {
220
182
  t: t
package/dist/Lists/Topics/Topics.js CHANGED
@@ -7,40 +7,13 @@ exports.default = void 0;
7
7
  var _react = require("react");
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _material = require("@mui/material");
10
- var _mui = require("tss-react/mui");
11
10
  var _TopicPreview = _interopRequireDefault(require("../../Dialogs/TopicPreview/TopicPreview"));
11
+ var _ListElements = require("../ListElements");
12
12
  var _Topic = _interopRequireDefault(require("../../Cards/Topic"));
13
13
  var _jsxRuntime = require("react/jsx-runtime");
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
15
  // components
16
16
 
17
- const useStyles = (0, _mui.makeStyles)()(theme => ({
18
- root: {
19
- display: "flex",
20
- flexWrap: "wrap",
21
- justifyContent: "space-around",
22
- overflow: "hidden",
23
- backgroundColor: theme.palette.background.paper
24
- },
25
- gridList: {
26
- gridAutoFlow: "column"
27
- },
28
- gridListTileRoot: {
29
- [theme.breakpoints.up("sm")]: {
30
- minWidth: 380
31
- },
32
- height: "auto",
33
- minWidth: 330,
34
- padding: theme.spacing(0.75, 0.75, 2, 0.75)
35
- },
36
- gridListItemRoot: {
37
- [theme.breakpoints.up("sm")]: {
38
- minWidth: 380
39
- },
40
- height: "auto",
41
- minWidth: 320
42
- }
43
- }));
44
17
  function TopicList({
45
18
  t = text => text,
46
19
  topics,
@@ -53,9 +26,6 @@ function TopicList({
53
26
  getCourseSectionTopic,
54
27
  ...otherProps
55
28
  }) {
56
- const {
57
- classes
58
- } = useStyles();
59
29
  const [isPreviewOpen, setIsPreviewOpen] = (0, _react.useState)(false);
60
30
  const [previewTopic, setPreviewTopic] = (0, _react.useState)({});
61
31
  const handleOpenPreview = topic => {
@@ -68,24 +38,13 @@ function TopicList({
68
38
  };
69
39
  if (!topics) {
70
40
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
71
- children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
72
- className: classes.gridList,
41
+ children: singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridList, {
73
42
  cols: singleLineGridCols,
74
43
  rowHeight: "auto",
75
44
  gap: 0,
76
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
77
- size: {
78
- xs: 12,
79
- sm: 6,
80
- md: 4,
81
- lg: 4,
82
- xl: 3
83
- },
84
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
85
- className: classes.gridListTileRoot,
86
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topic.default, {
87
- t: t
88
- })
45
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
46
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Topic.default, {
47
+ t: t
89
48
  })
90
49
  }, index))
91
50
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
@@ -94,8 +53,7 @@ function TopicList({
94
53
  width: '100%'
95
54
  },
96
55
  spacing: 2,
97
- children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
98
- className: classes.gridListItemRoot,
56
+ children: new Array(6).fill(null).map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
99
57
  size: {
100
58
  xs: 12,
101
59
  sm: 6,
@@ -124,14 +82,12 @@ function TopicList({
124
82
  }, topic.topicId);
125
83
  };
126
84
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
127
- children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageList, {
128
- className: classes.gridList,
85
+ children: [singleLineGrid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridList, {
129
86
  cols: singleLineGridCols,
130
87
  rowHeight: "auto",
131
88
  gap: 0,
132
89
  children: topics.map(topic => {
133
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ImageListItem, {
134
- className: classes.gridListTileRoot,
90
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.SingleLineGridListItem, {
135
91
  children: renderTopicCard(topic, true)
136
92
  }, topic.topicId);
137
93
  })
@@ -142,8 +98,7 @@ function TopicList({
142
98
  },
143
99
  spacing: 2,
144
100
  children: topics.map(topic => {
145
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Grid, {
146
- className: classes.gridListItemRoot,
101
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
147
102
  size: {
148
103
  xs: 12,
149
104
  sm: 6,
package/dist/Misc/ExerciseBottomBar/ExerciseBottomBar.js CHANGED
@@ -13,7 +13,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
13
13
  const useStyles = (0, _mui.makeStyles)()(theme => ({
14
14
  footer: {
15
15
  padding: theme.spacing(2),
16
- borderTop: `2px solid ${theme.palette.grey[300]}`
16
+ borderTop: `2px solid ${theme.palette.grey[300]}`,
17
+ width: '100%'
17
18
  }
18
19
  }));
19
20
  function ExerciseBottomBar({
package/dist/Screens/Classrooms/ViewClassroom/ViewClassroom.js CHANGED
@@ -485,9 +485,6 @@ function Classroom({
485
485
  // Safe ref initialization
486
486
  if (initialStored.current === null) {
487
487
  const storedValue = localStorage.getItem("lastAssignmentsFetch");
488
- console.log({
489
- storedValue
490
- });
491
488
  try {
492
489
  initialStored.current = storedValue ? JSON.parse(storedValue) : {};
493
490
  } catch (e) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nualang/nualang-ui-components",
3
- "version": "0.1.1248",
3
+ "version": "0.1.1250",
4
4
  "main": "dist/index.js",
5
5
  "files": [
6
6
  "dist",