@nualang/nualang-ui-components 0.1.1248 → 0.1.1249
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/dist/Lists/Bots/Bots.js +9 -47
- package/dist/Lists/Classrooms/Classrooms.js +7 -44
- package/dist/Lists/Courses/Courses.js +9 -68
- package/dist/Lists/ListElements/index.js +40 -0
- package/dist/Lists/Roleplays/Roleplays.js +9 -47
- package/dist/Lists/Topics/Topics.js +9 -54
- package/package.json +1 -1
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
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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
|
|
@@ -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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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
|
|
@@ -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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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,
|
|
@@ -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
|
+
}));
|
|
@@ -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
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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
|
|
@@ -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)(
|
|
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)(
|
|
77
|
-
|
|
78
|
-
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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)(
|
|
146
|
-
className: classes.gridListItemRoot,
|
|
101
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListElements.GridListItem, {
|
|
147
102
|
size: {
|
|
148
103
|
xs: 12,
|
|
149
104
|
sm: 6,
|