@steroidsjs/bootstrap 3.0.0-beta.118 → 3.0.0-beta.119

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 (7) hide show
  1. package/content/Chart/ChartView.scss +16 -1
  2. package/content/Chat/views/BubbleMessage/BubbleMessageView.d.ts +2 -0
  3. package/content/Chat/views/BubbleMessage/BubbleMessageView.js +6 -1
  4. package/content/Chat/views/BubblesDateGroup/BubblesDateGroup.js +1 -1
  5. package/content/Dashboard/DashboardItemView.js +4 -1
  6. package/content/Dashboard/DashboardItemView.scss +42 -3
  7. package/package.json +2 -2
package/content/Chart/ChartView.scss CHANGED
@@ -1,5 +1,15 @@
1
1
  @use "../../scss/variables";
2
2
 
3
+ :root {
4
+ --chart-grid-color:rgb(221, 221, 221);
5
+ }
6
+
7
+ html[data-theme="dark"] {
8
+ --chart-grid-color: rgba(255, 255, 255, 0.10);
9
+ }
10
+
11
+ $chart-grid-color: var(--chart-grid-color);
12
+
3
13
  .ChartView {
4
14
  height: auto;
5
15
  &__title {
@@ -14,11 +24,16 @@
14
24
  justify-content: space-between;
15
25
  }
16
26
 
17
- &__controls + div {
27
+ &__controls + div {
18
28
  height: var(--chart-custom-height) !important;
19
29
  }
20
30
 
21
31
  text {
32
+ font-family: variables.$font-family-nunito !important;
22
33
  fill: variables.$text-color !important;
23
34
  }
35
+
36
+ line {
37
+ stroke: $chart-grid-color !important;
38
+ }
24
39
  }
package/content/Chat/views/BubbleMessage/BubbleMessageView.d.ts CHANGED
@@ -4,10 +4,12 @@ import './BubbleMessageView.scss';
4
4
  interface IBubbleMessageProps {
5
5
  user: IChatUser;
6
6
  text: string;
7
+ timestamp: string;
7
8
  timeAgo: string;
8
9
  isCurrentUser: boolean;
9
10
  isFirstMessage?: boolean;
10
11
  isLastMessage?: boolean;
12
+ isTodayMessage?: boolean;
11
13
  }
12
14
  declare function BubbleMessageView(props: IBubbleMessageProps): JSX.Element;
13
15
  declare const _default: React.MemoExoticComponent<typeof BubbleMessageView>;
package/content/Chat/views/BubbleMessage/BubbleMessageView.js CHANGED
@@ -27,15 +27,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  };
28
28
  exports.__esModule = true;
29
29
  var react_1 = __importStar(require("react"));
30
+ var react_use_1 = require("react-use");
30
31
  var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
31
32
  var Avatar_1 = require("@steroidsjs/core/ui/content/Avatar");
32
33
  var typography_1 = require("@steroidsjs/core/ui/typography");
33
34
  var Title_1 = __importDefault(require("@steroidsjs/core/ui/typography/Title"));
34
35
  var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
36
+ var timeTemplatesAndUnits_1 = require("@steroidsjs/core/ui/content/Chat/constants/timeTemplatesAndUnits");
37
+ var utils_1 = require("@steroidsjs/core/ui/content/Chat/utils");
35
38
  require("./BubbleMessageView.scss");
36
39
  function BubbleMessageView(props) {
37
40
  var _a, _b;
38
41
  var bem = (0, useBem_1["default"])('BubbleMessageView');
42
+ var _c = (0, react_1.useState)(props.timeAgo), timeAgo = _c[0], setTimeAgo = _c[1];
43
+ (0, react_use_1.useInterval)(function () { return setTimeAgo((0, utils_1.calculateMessageTimeAgo)(props.timestamp)); }, props.isTodayMessage ? timeTemplatesAndUnits_1.SECONDS_IN_MINUTE_VALUE : null);
39
44
  return (react_1["default"].createElement("div", { className: bem.block({
40
45
  'another-user': !props.isCurrentUser,
41
46
  'last-message': !!props.isLastMessage
@@ -44,7 +49,7 @@ function BubbleMessageView(props) {
44
49
  !props.isCurrentUser && props.isFirstMessage && (react_1["default"].createElement(Title_1["default"], { className: bem.element('username'), type: 'h4', tag: 'h4', content: "".concat(props.user.firstName, " ").concat(props.user.lastName) })),
45
50
  react_1["default"].createElement(typography_1.Text, { className: bem.element('text'), type: "body", content: props.text }),
46
51
  react_1["default"].createElement("div", { className: bem.element('indicators') },
47
- react_1["default"].createElement(typography_1.Text, { className: bem.element('time'), type: "body3", content: props.timeAgo }),
52
+ react_1["default"].createElement(typography_1.Text, { className: bem.element('time'), type: "body3", content: timeAgo }),
48
53
  props.isCurrentUser && (react_1["default"].createElement(Icon_1["default"], { className: bem.element('check'), name: "done-all" })))),
49
54
  props.user && (react_1["default"].createElement("div", { className: bem.element('avatar') },
50
55
  react_1["default"].createElement(Avatar_1.Avatar, { src: (_a = props.user.avatar) === null || _a === void 0 ? void 0 : _a.src, title: "".concat(props.user.firstName, " ").concat(props.user.lastName), status: (_b = props.user.avatar) === null || _b === void 0 ? void 0 : _b.status, size: 'sm' })))));
package/content/Chat/views/BubblesDateGroup/BubblesDateGroup.js CHANGED
@@ -34,7 +34,7 @@ require("./BubblesDateGroup.scss");
34
34
  function BubblesDateGroup(props) {
35
35
  var _a;
36
36
  var bem = (0, useBem_1["default"])('BubblesDateGroup');
37
- var toBubbles = (0, react_1.useCallback)(function (groupedMessages) { return (react_1["default"].createElement("div", { className: bem.element('bubbles') }, groupedMessages.map(function (bubbleMessage) { return (react_1["default"].createElement(BubbleMessage_1["default"], { key: bubbleMessage.id, user: bubbleMessage.user, text: bubbleMessage.text, timeAgo: (0, utils_1.calculateMessageTimeAgo)(bubbleMessage.timestamp), isCurrentUser: bubbleMessage.user.id === props.currentUser.id, isFirstMessage: bubbleMessage.isFirstMessage, isLastMessage: bubbleMessage.isLastMessage })); }))); }, [bem, props.currentUser.id]);
37
+ var toBubbles = (0, react_1.useCallback)(function (groupedMessages) { return (react_1["default"].createElement("div", { className: bem.element('bubbles') }, groupedMessages.map(function (bubbleMessage) { return (react_1["default"].createElement(BubbleMessage_1["default"], { key: bubbleMessage.id, user: bubbleMessage.user, text: bubbleMessage.text, timestamp: bubbleMessage.timestamp, timeAgo: (0, utils_1.calculateMessageTimeAgo)(bubbleMessage.timestamp), isTodayMessage: (0, utils_1.isTodayMessage)(bubbleMessage.timestamp), isCurrentUser: bubbleMessage.user.id === props.currentUser.id, isFirstMessage: bubbleMessage.isFirstMessage, isLastMessage: bubbleMessage.isLastMessage })); }))); }, [bem, props.currentUser.id]);
38
38
  var renderDate = (0, react_1.useCallback)(function () { return (react_1["default"].createElement(react_1["default"].Fragment, null,
39
39
  react_1["default"].createElement("div", { className: bem.element('date') },
40
40
  react_1["default"].createElement("div", { className: bem.element('date-wrapper') },
package/content/Dashboard/DashboardItemView.js CHANGED
@@ -6,10 +6,13 @@ exports.__esModule = true;
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var hooks_1 = require("@steroidsjs/core/hooks");
8
8
  var typography_1 = require("@steroidsjs/core/ui/typography");
9
+ var content_1 = require("@steroidsjs/core/ui/content");
9
10
  function DashboardItemView(props) {
10
11
  var bem = (0, hooks_1.useBem)('DashboardItemView');
11
12
  return (react_1["default"].createElement("div", { className: bem.block() },
12
- react_1["default"].createElement(typography_1.Title, { content: props.title, type: 'h3' }),
13
+ react_1["default"].createElement("div", { className: bem.element('header') },
14
+ props.iconName && react_1["default"].createElement(content_1.Icon, { name: props.iconName }),
15
+ react_1["default"].createElement(typography_1.Title, { content: props.title, type: 'h3' })),
13
16
  props.children));
14
17
  }
15
18
  exports["default"] = DashboardItemView;
package/content/Dashboard/DashboardItemView.scss CHANGED
@@ -1,8 +1,47 @@
1
- @use "sass:map";
2
1
  @use "../../scss/variables";
3
2
 
3
+ :root {
4
+ --dashboard-item-background-color: #fff;
5
+ --title-icon-color: #323232;
6
+ }
7
+
8
+ html[data-theme="dark"] {
9
+ --dashboard-item-background-color: #191b1f;
10
+ --title-icon-color: #fff;
11
+
12
+ }
13
+
14
+ $dashboard-item-background-color: var(--dashboard-item-background-color);
15
+ $title-icon-color: var(--title-icon-color);
16
+
4
17
  .DashboardItemView {
5
- padding: 15px;
18
+ width: 100%;
19
+ overflow-x: scroll;
20
+ overflow-y: hidden;
21
+ padding: 16px;
6
22
  border-radius: 12px;
7
- background-color: variables.$white;
23
+ background-color: $dashboard-item-background-color;
24
+ box-shadow: 0 8px 20px 0 variables.$black-4;
25
+
26
+ &__header {
27
+ display: flex;
28
+ flex-flow: row nowrap;
29
+ gap: 8px;
30
+ margin-bottom: 16px;
31
+ }
32
+
33
+ &__header,
34
+ .CardView {
35
+ svg {
36
+ path,
37
+ rect,
38
+ circle {
39
+ stroke: $title-icon-color;
40
+ }
41
+ }
42
+ }
43
+
44
+ .TitleView {
45
+ margin-bottom: 0;
46
+ }
8
47
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@steroidsjs/bootstrap",
3
- "version": "3.0.0-beta.118",
3
+ "version": "3.0.0-beta.119",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
37
37
  "react-use": "^17.4.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@steroidsjs/core": "^3.0 || >=3.0.0-beta.102",
40
+ "@steroidsjs/core": "^3.0 || >=3.0.0-beta.103",
41
41
  "@steroidsjs/eslint-config": "^2.1.4",
42
42
  "@types/enzyme": "^3.10.8",
43
43
  "@types/googlemaps": "^3.43.3",