beem-component 0.9.8 → 1.0.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.
- package/dist/components/Accordicon.js +0 -1
- package/dist/components/Accordion.js +138 -0
- package/dist/components/Link.js +23 -0
- package/dist/components/index.js +30 -1
- package/package.json +2 -1
- package/src/App.js +15 -14
- package/src/lib/components/Accordicon.js +0 -1
- package/src/lib/components/Accordion.js +103 -0
- package/src/lib/components/Link.js +19 -0
- package/src/lib/components/index.js +7 -0
- package/dist/components/Modals-Old/modalBody.js +0 -61
- package/dist/components/Modals-Old/noteModalBody.js +0 -20
- package/dist/components/Modals-Old/noteModalFooter.js +0 -24
- package/dist/components/Modals-Old/noteModalHeader.js +0 -93
- package/src/lib/components/Modals-Old/modalBody.js +0 -66
- package/src/lib/components/Modals-Old/noteModalBody.js +0 -10
- package/src/lib/components/Modals-Old/noteModalFooter.js +0 -16
- package/src/lib/components/Modals-Old/noteModalHeader.js +0 -103
|
@@ -45,7 +45,6 @@ var BmAccordicon = function BmAccordicon(_ref) {
|
|
|
45
45
|
trailingIcon = _ref.trailingIcon,
|
|
46
46
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
47
47
|
|
|
48
|
-
console.log(children);
|
|
49
48
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmAccordiconMenu, rest, dropdown && (isOpen ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropupIcon, rest) : /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropdownIcon, rest)), /*#__PURE__*/_react.default.createElement(BmAccordiconDetails, null, children)));
|
|
50
49
|
};
|
|
51
50
|
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
16
|
+
var _colors = require("./colors");
|
|
17
|
+
|
|
18
|
+
var _iconStyles = require("./iconStyles");
|
|
19
|
+
|
|
20
|
+
var _excluded = ["children", "disabled", "expandIcon"],
|
|
21
|
+
_excluded2 = ["children", "leadingIcon", "trailingIcon", "size"];
|
|
22
|
+
|
|
23
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
24
|
+
|
|
25
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
26
|
+
|
|
27
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
28
|
+
|
|
29
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
30
|
+
|
|
31
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
32
|
+
|
|
33
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
34
|
+
|
|
35
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
36
|
+
|
|
37
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
38
|
+
|
|
39
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
40
|
+
|
|
41
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
42
|
+
|
|
43
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
44
|
+
|
|
45
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
46
|
+
|
|
47
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
48
|
+
|
|
49
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
50
|
+
|
|
51
|
+
var _React$createContext = /*#__PURE__*/_react.default.createContext({}),
|
|
52
|
+
Provider = _React$createContext.Provider,
|
|
53
|
+
Consumer = _React$createContext.Consumer;
|
|
54
|
+
|
|
55
|
+
var Dropdown = function Dropdown(value, rest) {
|
|
56
|
+
if (value.expandIcon && value.expandIcon === "none") {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
if (!value.expandIcon) {
|
|
61
|
+
return value.toggle ? /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropupIcon, rest) : /*#__PURE__*/_react.default.createElement(_iconStyles.BmDropdownIcon, rest);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
if (value.expandIcon && value.expandIcon !== "none") {
|
|
65
|
+
return /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
|
|
66
|
+
icon: value.expandIcon
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
var BmAccordionMenu = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n flex-direction: row;\n ", "\n padding: 0.571rem 1.143rem;\n border: 1px solid \n background: ", ";\n > *:not(:last-child) {\n margin-right: 0.5rem;\n }\n"])), ""
|
|
72
|
+
/* padding: 0.571rem; */
|
|
73
|
+
, _colors.BmPrimaryWhite);
|
|
74
|
+
|
|
75
|
+
var BmAccordionDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n"])));
|
|
76
|
+
|
|
77
|
+
var BmAccordionWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
|
|
78
|
+
|
|
79
|
+
var BmAccordion = function BmAccordion(_ref) {
|
|
80
|
+
var children = _ref.children,
|
|
81
|
+
disabled = _ref.disabled,
|
|
82
|
+
expandIcon = _ref.expandIcon,
|
|
83
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
84
|
+
|
|
85
|
+
var _useState = (0, _react.useState)(false),
|
|
86
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
87
|
+
toggle = _useState2[0],
|
|
88
|
+
setToggle = _useState2[1];
|
|
89
|
+
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement(BmAccordionWrapper, rest, /*#__PURE__*/_react.default.createElement(Provider, {
|
|
91
|
+
value: {
|
|
92
|
+
toggle: toggle,
|
|
93
|
+
setToggle: setToggle,
|
|
94
|
+
disabled: disabled,
|
|
95
|
+
expandIcon: expandIcon
|
|
96
|
+
}
|
|
97
|
+
}, children));
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
BmAccordion.Title = function (_ref2) {
|
|
101
|
+
var children = _ref2.children,
|
|
102
|
+
leadingIcon = _ref2.leadingIcon,
|
|
103
|
+
trailingIcon = _ref2.trailingIcon,
|
|
104
|
+
size = _ref2.size,
|
|
105
|
+
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
106
|
+
|
|
107
|
+
return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
|
|
108
|
+
return /*#__PURE__*/_react.default.createElement(BmAccordionMenu, _extends({}, rest, {
|
|
109
|
+
onClick: function onClick() {
|
|
110
|
+
return !value.disabled || value.disabled === false ? value.setToggle(!value.toggle) : value.setToggle(false);
|
|
111
|
+
}
|
|
112
|
+
}), Dropdown(value, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
|
|
113
|
+
icon: leadingIcon,
|
|
114
|
+
size: size
|
|
115
|
+
}), /*#__PURE__*/_react.default.createElement(BmAccordionDetails, null, children), trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
|
|
116
|
+
icon: trailingIcon,
|
|
117
|
+
size: size
|
|
118
|
+
}));
|
|
119
|
+
});
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
BmAccordion.Body = function (_ref3) {
|
|
123
|
+
var children = _ref3.children;
|
|
124
|
+
return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
|
|
125
|
+
return value.toggle && /*#__PURE__*/_react.default.createElement("div", null, children);
|
|
126
|
+
});
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
BmAccordion.propTypes = {
|
|
130
|
+
children: _propTypes.default.object,
|
|
131
|
+
size: _propTypes.default.string,
|
|
132
|
+
expandIcon: _propTypes.default.string,
|
|
133
|
+
leadingIcon: _propTypes.default.node,
|
|
134
|
+
trailingIcon: _propTypes.default.node,
|
|
135
|
+
disabled: _propTypes.default.bool
|
|
136
|
+
};
|
|
137
|
+
var _default = BmAccordion;
|
|
138
|
+
exports.default = _default;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.BmRouteLink = void 0;
|
|
7
|
+
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
|
|
10
|
+
var _reactRouterDom = require("react-router-dom");
|
|
11
|
+
|
|
12
|
+
var _colors = require("../components/colors");
|
|
13
|
+
|
|
14
|
+
var _text = require("../components/text");
|
|
15
|
+
|
|
16
|
+
var _templateObject;
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
21
|
+
|
|
22
|
+
var BmRouteLink = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n color: ", ";\n text-decoration: none;\n &:hover,\n &:focus,\n &:active {\n color: ", " !important;\n font-weight: 600;\n &:before {\n font-weight: normal;\n }\n }\n"])), _text.p, _colors.BmPrimaryBlack, _colors.BmPrimaryBlack);
|
|
23
|
+
exports.BmRouteLink = BmRouteLink;
|
package/dist/components/index.js
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
8
|
+
Object.defineProperty(exports, "BmAccordion", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _Accordion.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
6
14
|
Object.defineProperty(exports, "BmAvatar", {
|
|
7
15
|
enumerable: true,
|
|
8
16
|
get: function get() {
|
|
@@ -1179,6 +1187,15 @@ Object.defineProperty(exports, "BmAccordicon", {
|
|
|
1179
1187
|
return _Accordicon.BmAccordicon;
|
|
1180
1188
|
}
|
|
1181
1189
|
});
|
|
1190
|
+
Object.defineProperty(exports, "BmRouteLink", {
|
|
1191
|
+
enumerable: true,
|
|
1192
|
+
get: function get() {
|
|
1193
|
+
return _Link.BmRouteLink;
|
|
1194
|
+
}
|
|
1195
|
+
});
|
|
1196
|
+
exports.BmColors = void 0;
|
|
1197
|
+
|
|
1198
|
+
var _Accordion = _interopRequireDefault(require("./Accordion"));
|
|
1182
1199
|
|
|
1183
1200
|
var _avatars = require("./avatars");
|
|
1184
1201
|
|
|
@@ -1220,6 +1237,10 @@ var _sidebar = require("./sidebar");
|
|
|
1220
1237
|
|
|
1221
1238
|
var _contacts = require("./contacts");
|
|
1222
1239
|
|
|
1240
|
+
var BmColors = _interopRequireWildcard(require("../components/colors"));
|
|
1241
|
+
|
|
1242
|
+
exports.BmColors = BmColors;
|
|
1243
|
+
|
|
1223
1244
|
var _customerInfo = require("../components/CustomerInfo/customerInfo");
|
|
1224
1245
|
|
|
1225
1246
|
var _customerInfoBar = require("../components/CustomerInfo/customerInfoBar");
|
|
@@ -1274,4 +1295,12 @@ var _notesInfo = require("./CustomerInfo/notesInfo");
|
|
|
1274
1295
|
|
|
1275
1296
|
var _labelsInfo = require("./CustomerInfo/labelsInfo");
|
|
1276
1297
|
|
|
1277
|
-
var _Accordicon = require("./Accordicon");
|
|
1298
|
+
var _Accordicon = require("./Accordicon");
|
|
1299
|
+
|
|
1300
|
+
var _Link = require("./Link");
|
|
1301
|
+
|
|
1302
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
1303
|
+
|
|
1304
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
1305
|
+
|
|
1306
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "beem-component",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/components/index.js",
|
|
6
6
|
"peerDependencies": {
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
"node-sass": "^6.0.1",
|
|
17
17
|
"react": "^17.0.2",
|
|
18
18
|
"react-dom": "^17.0.2",
|
|
19
|
+
"react-router-dom": "^5.3.0",
|
|
19
20
|
"react-scripts": "4.0.3",
|
|
20
21
|
"styled-components": "^5.3.0",
|
|
21
22
|
"web-vitals": "^1.1.2"
|
package/src/App.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { HashRouter } from "react-router-dom";
|
|
2
3
|
import "../src/main.scss";
|
|
3
4
|
import { MainWrapper } from "./lib/components/Chats/chatwrapper";
|
|
4
5
|
import { GlobalStyle } from "./lib/components/globalStyles";
|
|
@@ -7,26 +8,26 @@ import { Complete } from "./Complete";
|
|
|
7
8
|
import { CreateSegment } from "./CreateSegments";
|
|
8
9
|
// import Buttons from "../src/examples/Buttons";
|
|
9
10
|
import Chat from "./CHAT";
|
|
10
|
-
import {
|
|
11
|
-
CloseModal,
|
|
12
|
-
HeaderText,
|
|
13
|
-
Modal,
|
|
14
|
-
ModalHeader,
|
|
15
|
-
} from "./lib/components/Modals/noteModalHeader";
|
|
16
11
|
import { BmAccordicon } from "./lib/components/Accordicon";
|
|
12
|
+
import BmAccordion from "./lib/components/Accordion";
|
|
13
|
+
import { BmRouteLink } from "./lib/components/Link";
|
|
17
14
|
|
|
18
15
|
export const App = () => {
|
|
19
16
|
return (
|
|
20
17
|
<>
|
|
21
18
|
<GlobalStyle />
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
</
|
|
28
|
-
</
|
|
29
|
-
<
|
|
19
|
+
<BmAccordicon dropdown trailingIcon>
|
|
20
|
+
<h4>jclkdj</h4>
|
|
21
|
+
<HashRouter>
|
|
22
|
+
<BmRouteLink to="#">Hello</BmRouteLink>
|
|
23
|
+
</HashRouter>
|
|
24
|
+
<h2>kghgfih</h2>
|
|
25
|
+
</BmAccordicon>
|
|
26
|
+
<Chat />
|
|
27
|
+
<BmAccordion style={{ background: "red" }}>
|
|
28
|
+
<BmAccordion.Title>SMS</BmAccordion.Title>
|
|
29
|
+
<BmAccordion.Body>Reports</BmAccordion.Body>
|
|
30
|
+
</BmAccordion>
|
|
30
31
|
{/* <Buttons /> */}
|
|
31
32
|
{/* <h1>hello</h1> */}
|
|
32
33
|
{/* <MainWrapper>
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import { BmPrimaryWhite } from "./colors";
|
|
5
|
+
import { BmDropdownIcon, BmDropupIcon, BmIcons } from "./iconStyles";
|
|
6
|
+
|
|
7
|
+
const { Provider, Consumer } = React.createContext({});
|
|
8
|
+
|
|
9
|
+
const Dropdown = (value, rest) => {
|
|
10
|
+
if (value.expandIcon && value.expandIcon === "none") {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
if (!value.expandIcon) {
|
|
14
|
+
return value.toggle ? (
|
|
15
|
+
<BmDropupIcon {...rest} />
|
|
16
|
+
) : (
|
|
17
|
+
<BmDropdownIcon {...rest} />
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
if (value.expandIcon && value.expandIcon !== "none") {
|
|
21
|
+
return <BmIcons icon={value.expandIcon} />;
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
const BmAccordionMenu = styled.div`
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
flex-direction: row;
|
|
28
|
+
${"" /* padding: 0.571rem; */}
|
|
29
|
+
padding: 0.571rem 1.143rem;
|
|
30
|
+
border: 1px solid
|
|
31
|
+
background: ${BmPrimaryWhite};
|
|
32
|
+
> *:not(:last-child) {
|
|
33
|
+
margin-right: 0.5rem;
|
|
34
|
+
}
|
|
35
|
+
`;
|
|
36
|
+
|
|
37
|
+
const BmAccordionDetails = styled.div`
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: space-between;
|
|
40
|
+
width: 100%;
|
|
41
|
+
`;
|
|
42
|
+
|
|
43
|
+
const BmAccordionWrapper = styled.div`
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
`;
|
|
47
|
+
|
|
48
|
+
const BmAccordion = ({ children, disabled, expandIcon, ...rest }) => {
|
|
49
|
+
const [toggle, setToggle] = useState(false);
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<BmAccordionWrapper {...rest}>
|
|
53
|
+
<Provider value={{ toggle, setToggle, disabled, expandIcon }}>
|
|
54
|
+
{children}
|
|
55
|
+
</Provider>
|
|
56
|
+
</BmAccordionWrapper>
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
BmAccordion.Title = ({
|
|
61
|
+
children,
|
|
62
|
+
leadingIcon,
|
|
63
|
+
trailingIcon,
|
|
64
|
+
size,
|
|
65
|
+
...rest
|
|
66
|
+
}) => {
|
|
67
|
+
return (
|
|
68
|
+
<Consumer>
|
|
69
|
+
{(value) => (
|
|
70
|
+
<BmAccordionMenu
|
|
71
|
+
{...rest}
|
|
72
|
+
onClick={() =>
|
|
73
|
+
!value.disabled || value.disabled === false
|
|
74
|
+
? value.setToggle(!value.toggle)
|
|
75
|
+
: value.setToggle(false)
|
|
76
|
+
}
|
|
77
|
+
>
|
|
78
|
+
{Dropdown(value, rest)}
|
|
79
|
+
{leadingIcon && <BmIcons icon={leadingIcon} size={size} />}
|
|
80
|
+
<BmAccordionDetails>{children}</BmAccordionDetails>
|
|
81
|
+
{trailingIcon && <BmIcons icon={trailingIcon} size={size} />}
|
|
82
|
+
</BmAccordionMenu>
|
|
83
|
+
)}
|
|
84
|
+
</Consumer>
|
|
85
|
+
);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
BmAccordion.Body = ({ children }) => {
|
|
89
|
+
return (
|
|
90
|
+
<Consumer>{(value) => value.toggle && <div>{children}</div>}</Consumer>
|
|
91
|
+
);
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
BmAccordion.propTypes = {
|
|
95
|
+
children: PropTypes.object,
|
|
96
|
+
size: PropTypes.string,
|
|
97
|
+
expandIcon: PropTypes.string,
|
|
98
|
+
leadingIcon: PropTypes.node,
|
|
99
|
+
trailingIcon: PropTypes.node,
|
|
100
|
+
disabled: PropTypes.bool,
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export default BmAccordion;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import { Link } from "react-router-dom";
|
|
3
|
+
import { BmPrimaryBlack } from "../components/colors";
|
|
4
|
+
import { p } from "../components/text";
|
|
5
|
+
|
|
6
|
+
export const BmRouteLink = styled(Link)`
|
|
7
|
+
${p}
|
|
8
|
+
color: ${BmPrimaryBlack};
|
|
9
|
+
text-decoration: none;
|
|
10
|
+
&:hover,
|
|
11
|
+
&:focus,
|
|
12
|
+
&:active {
|
|
13
|
+
color: ${BmPrimaryBlack} !important;
|
|
14
|
+
font-weight: 600;
|
|
15
|
+
&:before {
|
|
16
|
+
font-weight: normal;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
`;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import BmAccordion from "./Accordion";
|
|
1
2
|
import { BmAvatar } from "./avatars";
|
|
2
3
|
import { BmAlertIcon } from "./buttonAlertIcons";
|
|
3
4
|
import { BmBtnIcon } from "./buttonIconsOnly";
|
|
@@ -7,6 +8,7 @@ import { BmDropdown } from "./dropdown";
|
|
|
7
8
|
import { BmInput } from "./input";
|
|
8
9
|
import { BmLogo } from "./logo";
|
|
9
10
|
import { BmSearch } from "./search";
|
|
11
|
+
|
|
10
12
|
import {
|
|
11
13
|
BmTab,
|
|
12
14
|
BmTabItem,
|
|
@@ -107,6 +109,7 @@ import {
|
|
|
107
109
|
BmUnreadMessage,
|
|
108
110
|
} from "./contacts";
|
|
109
111
|
|
|
112
|
+
import * as BmColors from "../components/colors";
|
|
110
113
|
import {
|
|
111
114
|
BmCustomerDetails,
|
|
112
115
|
BmCustomerInfoHeader,
|
|
@@ -264,8 +267,11 @@ import {
|
|
|
264
267
|
BmColorLabelPicker,
|
|
265
268
|
} from "./CustomerInfo/labelsInfo";
|
|
266
269
|
import { BmAccordicon } from "./Accordicon";
|
|
270
|
+
import { BmRouteLink } from "./Link";
|
|
267
271
|
|
|
268
272
|
export {
|
|
273
|
+
BmColors,
|
|
274
|
+
BmAccordion,
|
|
269
275
|
BmButton,
|
|
270
276
|
BmAvatar,
|
|
271
277
|
BmAlertIcon,
|
|
@@ -462,4 +468,5 @@ export {
|
|
|
462
468
|
BmColorLabel,
|
|
463
469
|
BmColorLabelPicker,
|
|
464
470
|
BmAccordicon,
|
|
471
|
+
BmRouteLink,
|
|
465
472
|
};
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.BmPreviousAgentMessage = exports.BmPreviousAgentName = exports.BmPreviousAgent = exports.BmPreviousAgentIcon = exports.BmPreviousAgentContent = exports.BmPreviousAgentTitle = exports.BmPreviousAgentWrapper = exports.BmAgentButton = exports.BmAgentPill = exports.BmAgentName = exports.BmAgentSearch = void 0;
|
|
7
|
-
|
|
8
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
|
|
10
|
-
var _avatars = require("../avatars");
|
|
11
|
-
|
|
12
|
-
var _buttons = require("../buttons");
|
|
13
|
-
|
|
14
|
-
var _colors = require("../colors");
|
|
15
|
-
|
|
16
|
-
var _pills = require("../pills");
|
|
17
|
-
|
|
18
|
-
var _search = require("../search");
|
|
19
|
-
|
|
20
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
21
|
-
|
|
22
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
-
|
|
24
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
25
|
-
|
|
26
|
-
var BmAgentSearch = (0, _styledComponents.default)(_search.BmSearch)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 20vw;\n max-width: 20vw;\n display: flex-end;\n"])));
|
|
27
|
-
exports.BmAgentSearch = BmAgentSearch;
|
|
28
|
-
|
|
29
|
-
var BmAgentName = _styledComponents.default.p(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n margin-top: 1.714rem;\n"])), _colors.BmPrimaryBlack);
|
|
30
|
-
|
|
31
|
-
exports.BmAgentName = BmAgentName;
|
|
32
|
-
var BmAgentPill = (0, _styledComponents.default)(_pills.BmPill)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-top: 0.571rem;\n"])));
|
|
33
|
-
exports.BmAgentPill = BmAgentPill;
|
|
34
|
-
var BmAgentButton = (0, _styledComponents.default)(_buttons.BmButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-top: 1.143rem;\n"])));
|
|
35
|
-
exports.BmAgentButton = BmAgentButton;
|
|
36
|
-
|
|
37
|
-
var BmPreviousAgentWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0rem;\n margin: 1.714rem 0rem;\n width: 100%;\n"])));
|
|
38
|
-
|
|
39
|
-
exports.BmPreviousAgentWrapper = BmPreviousAgentWrapper;
|
|
40
|
-
|
|
41
|
-
var BmPreviousAgentTitle = _styledComponents.default.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n display: flex;\n"])), _colors.BmPrimaryBlack);
|
|
42
|
-
|
|
43
|
-
exports.BmPreviousAgentTitle = BmPreviousAgentTitle;
|
|
44
|
-
|
|
45
|
-
var BmPreviousAgentContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0rem;\n margin-top: 0.571rem;\n width: 100%;\n"])));
|
|
46
|
-
|
|
47
|
-
exports.BmPreviousAgentContent = BmPreviousAgentContent;
|
|
48
|
-
var BmPreviousAgentIcon = (0, _styledComponents.default)(_avatars.BmAvatar)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n margin-right: 1.143rem;\n"])));
|
|
49
|
-
exports.BmPreviousAgentIcon = BmPreviousAgentIcon;
|
|
50
|
-
|
|
51
|
-
var BmPreviousAgent = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n"])));
|
|
52
|
-
|
|
53
|
-
exports.BmPreviousAgent = BmPreviousAgent;
|
|
54
|
-
|
|
55
|
-
var BmPreviousAgentName = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n color: ", ";\n"])), _colors.BmPrimaryBlack);
|
|
56
|
-
|
|
57
|
-
exports.BmPreviousAgentName = BmPreviousAgentName;
|
|
58
|
-
|
|
59
|
-
var BmPreviousAgentMessage = _styledComponents.default.p(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n color: ", ";\n"])), _colors.BmPrimaryBlack);
|
|
60
|
-
|
|
61
|
-
exports.BmPreviousAgentMessage = BmPreviousAgentMessage;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.ModalBody = void 0;
|
|
7
|
-
|
|
8
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
|
|
10
|
-
var _templateObject;
|
|
11
|
-
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
|
-
|
|
16
|
-
var ModalBody = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n ", "\n margin-top: 0.571rem;\n"])), ''
|
|
17
|
-
/* padding: 0rem 1.143rem; */
|
|
18
|
-
);
|
|
19
|
-
|
|
20
|
-
exports.ModalBody = ModalBody;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.BmFooterButtons = exports.ModalFooter = void 0;
|
|
7
|
-
|
|
8
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
|
|
10
|
-
var _templateObject, _templateObject2;
|
|
11
|
-
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
15
|
-
|
|
16
|
-
var ModalFooter = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n padding: 1.143rem;\n margin-top: 0.571rem;\n"])));
|
|
17
|
-
|
|
18
|
-
exports.ModalFooter = ModalFooter;
|
|
19
|
-
|
|
20
|
-
var BmFooterButtons = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n margin-left: auto;\n ", "\n align-items: center;\n justify-content: space-between;\n"])), ''
|
|
21
|
-
/* width: 50%; */
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
exports.BmFooterButtons = BmFooterButtons;
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.Modal = exports.ModalHeader = exports.CloseModal = exports.Close = exports.HeaderText = exports.HeaderWrapper = exports.ModalWrapper = exports.ModalContent = exports.Overlay = void 0;
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
|
-
var _icons = require("@material-ui/icons");
|
|
13
|
-
|
|
14
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
-
|
|
16
|
-
var _colors = require("../colors");
|
|
17
|
-
|
|
18
|
-
var _iconStyles = require("../iconStyles");
|
|
19
|
-
|
|
20
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
21
|
-
|
|
22
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
-
|
|
24
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
-
|
|
26
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
-
|
|
28
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
29
|
-
|
|
30
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
31
|
-
|
|
32
|
-
var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \tposition: fixed;\n top: 0;\n left: 0;\n z-index: 9999;\n width: 100%;\n height: 100%;\n background-color: ", ";\n opacity: 0.5;\n}\n"])), _colors.BmPrimaryBlack);
|
|
33
|
-
|
|
34
|
-
exports.Overlay = Overlay;
|
|
35
|
-
|
|
36
|
-
var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 0rem 1.143rem;\n border: 0.071rem solid black;\n width: 30vw;\n margin: auto;\n background: ", ";\n"])), _colors.BmPrimaryWhite);
|
|
37
|
-
|
|
38
|
-
exports.ModalContent = ModalContent;
|
|
39
|
-
|
|
40
|
-
var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n z-index: 9999;\n overflow-x: auto;\n overflow-y: auto;\n outline: 0;\n position: fixed;\n height: auto;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
|
|
41
|
-
|
|
42
|
-
exports.ModalWrapper = ModalWrapper;
|
|
43
|
-
|
|
44
|
-
var HeaderWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: 1.143rem 0rem;\n"])));
|
|
45
|
-
|
|
46
|
-
exports.HeaderWrapper = HeaderWrapper;
|
|
47
|
-
|
|
48
|
-
var HeaderText = _styledComponents.default.h2(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n text-align: center;\n display: flex;\n color: ", ";\n margin-left: auto;\n"])), _colors.BmPrimaryBlack);
|
|
49
|
-
|
|
50
|
-
exports.HeaderText = HeaderText;
|
|
51
|
-
|
|
52
|
-
var Close = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n margin-left: auto;\n"])));
|
|
53
|
-
|
|
54
|
-
exports.Close = Close;
|
|
55
|
-
|
|
56
|
-
var CloseModal = function CloseModal(_ref) {
|
|
57
|
-
var rest = _extends({}, _ref);
|
|
58
|
-
|
|
59
|
-
return /*#__PURE__*/_react.default.createElement(Close, null, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
|
|
60
|
-
size: "xlarge",
|
|
61
|
-
icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null)
|
|
62
|
-
}, rest)));
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
exports.CloseModal = CloseModal;
|
|
66
|
-
|
|
67
|
-
var ModalHeader = function ModalHeader(props) {
|
|
68
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HeaderWrapper, null, props.children));
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
exports.ModalHeader = ModalHeader;
|
|
72
|
-
|
|
73
|
-
var Modal = function Modal(_ref2) {
|
|
74
|
-
var children = _ref2.children,
|
|
75
|
-
show = _ref2.show,
|
|
76
|
-
setShowModal = _ref2.setShowModal;
|
|
77
|
-
var keyPress = (0, _react.useCallback)(function (e) {
|
|
78
|
-
if (e.key === "Escape" && show) {
|
|
79
|
-
setShowModal(false);
|
|
80
|
-
}
|
|
81
|
-
}, [setShowModal, show]);
|
|
82
|
-
(0, _react.useEffect)(function () {
|
|
83
|
-
document.addEventListener("keydown", keyPress);
|
|
84
|
-
return function () {
|
|
85
|
-
return document.removeEventListener("keydown", keyPress);
|
|
86
|
-
};
|
|
87
|
-
}, [keyPress]);
|
|
88
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, show && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, null), /*#__PURE__*/_react.default.createElement(ModalWrapper, {
|
|
89
|
-
showModal: show
|
|
90
|
-
}, /*#__PURE__*/_react.default.createElement(ModalContent, null, children))));
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
exports.Modal = Modal;
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import styled from "styled-components";
|
|
2
|
-
import { BmAvatar } from "../avatars";
|
|
3
|
-
import { BmButton } from "../buttons";
|
|
4
|
-
import { BmPrimaryBlack } from "../colors";
|
|
5
|
-
import { BmPill } from "../pills";
|
|
6
|
-
import { BmSearch } from "../search";
|
|
7
|
-
|
|
8
|
-
export const BmAgentSearch = styled(BmSearch)`
|
|
9
|
-
width: 20vw;
|
|
10
|
-
max-width: 20vw;
|
|
11
|
-
display: flex-end;
|
|
12
|
-
`;
|
|
13
|
-
|
|
14
|
-
export const BmAgentName = styled.p`
|
|
15
|
-
color: ${BmPrimaryBlack};
|
|
16
|
-
margin-top: 1.714rem;
|
|
17
|
-
`;
|
|
18
|
-
|
|
19
|
-
export const BmAgentPill = styled(BmPill)`
|
|
20
|
-
margin-top: 0.571rem;
|
|
21
|
-
`;
|
|
22
|
-
|
|
23
|
-
export const BmAgentButton = styled(BmButton)`
|
|
24
|
-
margin-top: 1.143rem;
|
|
25
|
-
`;
|
|
26
|
-
|
|
27
|
-
export const BmPreviousAgentWrapper = styled.div`
|
|
28
|
-
display: flex;
|
|
29
|
-
flex-direction: column;
|
|
30
|
-
align-items: flex-start;
|
|
31
|
-
padding: 0rem;
|
|
32
|
-
margin: 1.714rem 0rem;
|
|
33
|
-
width: 100%;
|
|
34
|
-
`;
|
|
35
|
-
|
|
36
|
-
export const BmPreviousAgentTitle = styled.p`
|
|
37
|
-
color: ${BmPrimaryBlack};
|
|
38
|
-
display: flex;
|
|
39
|
-
`;
|
|
40
|
-
|
|
41
|
-
export const BmPreviousAgentContent = styled.div`
|
|
42
|
-
display: flex;
|
|
43
|
-
flex-direction: row;
|
|
44
|
-
align-items: center;
|
|
45
|
-
padding: 0rem;
|
|
46
|
-
margin-top: 0.571rem;
|
|
47
|
-
width: 100%;
|
|
48
|
-
`;
|
|
49
|
-
|
|
50
|
-
export const BmPreviousAgentIcon = styled(BmAvatar)`
|
|
51
|
-
margin-right: 1.143rem;
|
|
52
|
-
`;
|
|
53
|
-
|
|
54
|
-
export const BmPreviousAgent = styled.div`
|
|
55
|
-
display: flex;
|
|
56
|
-
flex-direction: column;
|
|
57
|
-
flex-grow: 1;
|
|
58
|
-
`;
|
|
59
|
-
|
|
60
|
-
export const BmPreviousAgentName = styled.h3`
|
|
61
|
-
color: ${BmPrimaryBlack};
|
|
62
|
-
`;
|
|
63
|
-
|
|
64
|
-
export const BmPreviousAgentMessage = styled.p`
|
|
65
|
-
color: ${BmPrimaryBlack};
|
|
66
|
-
`;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import styled from "styled-components";
|
|
2
|
-
|
|
3
|
-
export const ModalFooter = styled.div`
|
|
4
|
-
display: flex;
|
|
5
|
-
flex-direction: row;
|
|
6
|
-
padding: 1.143rem;
|
|
7
|
-
margin-top: 0.571rem;
|
|
8
|
-
`;
|
|
9
|
-
|
|
10
|
-
export const BmFooterButtons = styled.div`
|
|
11
|
-
display: flex;
|
|
12
|
-
margin-left: auto;
|
|
13
|
-
${'' /* width: 50%; */}
|
|
14
|
-
align-items: center;
|
|
15
|
-
justify-content: space-between;
|
|
16
|
-
`;
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useCallback } from "react";
|
|
2
|
-
import { Clear } from "@material-ui/icons";
|
|
3
|
-
import styled from "styled-components";
|
|
4
|
-
import { BmPrimaryBlack, BmPrimaryWhite } from "../colors";
|
|
5
|
-
import { BmIcons } from "../iconStyles";
|
|
6
|
-
|
|
7
|
-
export const Overlay = styled.div`
|
|
8
|
-
position: fixed;
|
|
9
|
-
top: 0;
|
|
10
|
-
left: 0;
|
|
11
|
-
z-index: 9999;
|
|
12
|
-
width: 100%;
|
|
13
|
-
height: 100%;
|
|
14
|
-
background-color: ${BmPrimaryBlack};
|
|
15
|
-
opacity: 0.5;
|
|
16
|
-
}
|
|
17
|
-
`;
|
|
18
|
-
export const ModalContent = styled.div`
|
|
19
|
-
display: flex;
|
|
20
|
-
flex-direction: column;
|
|
21
|
-
padding: 0rem 1.143rem;
|
|
22
|
-
border: 0.071rem solid black;
|
|
23
|
-
width: 30vw;
|
|
24
|
-
margin: auto;
|
|
25
|
-
background: ${BmPrimaryWhite};
|
|
26
|
-
`;
|
|
27
|
-
|
|
28
|
-
export const ModalWrapper = styled.div`
|
|
29
|
-
z-index: 9999;
|
|
30
|
-
overflow-x: auto;
|
|
31
|
-
overflow-y: auto;
|
|
32
|
-
outline: 0;
|
|
33
|
-
position: fixed;
|
|
34
|
-
height: auto;
|
|
35
|
-
top: 50%;
|
|
36
|
-
left: 50%;
|
|
37
|
-
transform: translate(-50%, -50%);
|
|
38
|
-
`;
|
|
39
|
-
|
|
40
|
-
export const HeaderWrapper = styled.div`
|
|
41
|
-
display: flex;
|
|
42
|
-
flex-direction: row;
|
|
43
|
-
justify-content: space-between;
|
|
44
|
-
padding: 1.143rem 0rem;
|
|
45
|
-
`;
|
|
46
|
-
|
|
47
|
-
export const HeaderText = styled.h2`
|
|
48
|
-
text-align: center;
|
|
49
|
-
display: flex;
|
|
50
|
-
color: ${BmPrimaryBlack};
|
|
51
|
-
margin-left: auto;
|
|
52
|
-
`;
|
|
53
|
-
|
|
54
|
-
export const Close = styled.div`
|
|
55
|
-
display: flex;
|
|
56
|
-
justify-content: flex-end;
|
|
57
|
-
margin-left: auto;
|
|
58
|
-
`;
|
|
59
|
-
|
|
60
|
-
export const CloseModal = ({ ...rest }) => {
|
|
61
|
-
return (
|
|
62
|
-
<Close>
|
|
63
|
-
<BmIcons size="xlarge" icon={<Clear />} {...rest} />
|
|
64
|
-
</Close>
|
|
65
|
-
);
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
export const ModalHeader = (props) => {
|
|
69
|
-
return (
|
|
70
|
-
<>
|
|
71
|
-
<HeaderWrapper>{props.children}</HeaderWrapper>
|
|
72
|
-
</>
|
|
73
|
-
);
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export const Modal = ({ children, show, setShowModal }) => {
|
|
77
|
-
const keyPress = useCallback(
|
|
78
|
-
(e) => {
|
|
79
|
-
if (e.key === "Escape" && show) {
|
|
80
|
-
setShowModal(false);
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
[setShowModal, show],
|
|
84
|
-
);
|
|
85
|
-
|
|
86
|
-
useEffect(() => {
|
|
87
|
-
document.addEventListener("keydown", keyPress);
|
|
88
|
-
return () => document.removeEventListener("keydown", keyPress);
|
|
89
|
-
}, [keyPress]);
|
|
90
|
-
|
|
91
|
-
return (
|
|
92
|
-
<>
|
|
93
|
-
{show && (
|
|
94
|
-
<>
|
|
95
|
-
<Overlay />
|
|
96
|
-
<ModalWrapper showModal={show}>
|
|
97
|
-
<ModalContent>{children}</ModalContent>
|
|
98
|
-
</ModalWrapper>
|
|
99
|
-
</>
|
|
100
|
-
)}
|
|
101
|
-
</>
|
|
102
|
-
);
|
|
103
|
-
};
|