blue-react 8.8.0 → 8.8.1
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/Modal.js +6 -4
- package/dist/components/ModalProvider.js +20 -8
- package/dist/components/Utilities.js +26 -18
- package/dist/style.css +2 -2
- package/dist/style.min.css +2 -2
- package/dist/style.scss +1 -1
- package/dist/types/components/Modal.d.ts +2 -1
- package/dist/types/components/ModalProvider.d.ts +1 -0
- package/package.json +1 -1
package/dist/components/Modal.js
CHANGED
|
@@ -44,7 +44,9 @@ function Modal(_ref) {
|
|
|
44
44
|
defaultInput = _ref.defaultInput,
|
|
45
45
|
type = _ref.type,
|
|
46
46
|
_ref$inputType = _ref.inputType,
|
|
47
|
-
inputType = _ref$inputType === void 0 ? "text" : _ref$inputType
|
|
47
|
+
inputType = _ref$inputType === void 0 ? "text" : _ref$inputType,
|
|
48
|
+
_ref$switchPrimaryBtn = _ref.switchPrimaryBtn,
|
|
49
|
+
switchPrimaryBtn = _ref$switchPrimaryBtn === void 0 ? false : _ref$switchPrimaryBtn;
|
|
48
50
|
var modalRef = (0, _react.useRef)();
|
|
49
51
|
|
|
50
52
|
var _useState = (0, _react.useState)(defaultInput || ""),
|
|
@@ -83,7 +85,7 @@ function Modal(_ref) {
|
|
|
83
85
|
var focusFirstControl = function focusFirstControl() {
|
|
84
86
|
var myModal = modalRef.current;
|
|
85
87
|
myModal.removeEventListener("shown.bs.modal", focusFirstControl);
|
|
86
|
-
var firstControl = myModal.querySelector(".btn, .form-control");
|
|
88
|
+
var firstControl = myModal.querySelector(".btn-primary, .form-control");
|
|
87
89
|
|
|
88
90
|
if (firstControl) {
|
|
89
91
|
firstControl.focus();
|
|
@@ -150,10 +152,10 @@ function Modal(_ref) {
|
|
|
150
152
|
className: "modal-footer"
|
|
151
153
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
152
154
|
type: "submit",
|
|
153
|
-
className: "btn btn-primary d-block w-100",
|
|
155
|
+
className: "btn ".concat(switchPrimaryBtn ? "btn-outline-primary" : "btn-primary", " d-block w-100"),
|
|
154
156
|
style: btnStyle
|
|
155
157
|
}, type === "verify" ? (0, _shared.getPhrase)("Yes") : "OK"), (type === "ask" || type === "verify") && (type === "verify" ? /*#__PURE__*/_react.default.createElement("button", {
|
|
156
|
-
className: "btn btn-outline-primary d-block w-100",
|
|
158
|
+
className: "btn ".concat(switchPrimaryBtn ? "btn-primary" : "btn-outline-primary", " d-block w-100"),
|
|
157
159
|
style: btnStyle,
|
|
158
160
|
onClick: sayNo
|
|
159
161
|
}, (0, _shared.getPhrase)("No")) : /*#__PURE__*/_react.default.createElement("button", {
|
|
@@ -77,14 +77,19 @@ var ModalProvider = function ModalProvider(_ref) {
|
|
|
77
77
|
inputType = _useState12[0],
|
|
78
78
|
setInputType = _useState12[1];
|
|
79
79
|
|
|
80
|
+
var _useState13 = (0, _react.useState)(false),
|
|
81
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
82
|
+
switchPrimaryBtn = _useState14[0],
|
|
83
|
+
setSwitchPrimaryBtn = _useState14[1];
|
|
84
|
+
|
|
80
85
|
var unSetModalContent = (0, _react.useCallback)(function () {
|
|
81
86
|
setModalContent(undefined);
|
|
82
87
|
}, [setModalContent]);
|
|
83
88
|
|
|
84
|
-
var
|
|
85
|
-
|
|
86
|
-
onSubmit =
|
|
87
|
-
setOnSubmit =
|
|
89
|
+
var _useState15 = (0, _react.useState)(),
|
|
90
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
91
|
+
onSubmit = _useState16[0],
|
|
92
|
+
setOnSubmit = _useState16[1];
|
|
88
93
|
|
|
89
94
|
var ask = function ask(text, options) {
|
|
90
95
|
return new Promise(function (resolve) {
|
|
@@ -94,10 +99,12 @@ var ModalProvider = function ModalProvider(_ref) {
|
|
|
94
99
|
if (options) {
|
|
95
100
|
var title = options.title,
|
|
96
101
|
icon = options.icon,
|
|
97
|
-
_inputType = options.inputType
|
|
102
|
+
_inputType = options.inputType,
|
|
103
|
+
_switchPrimaryBtn = options.switchPrimaryBtn;
|
|
98
104
|
setModalTitle(title);
|
|
99
105
|
setModalIcon(icon);
|
|
100
106
|
setInputType(_inputType);
|
|
107
|
+
setSwitchPrimaryBtn(_switchPrimaryBtn);
|
|
101
108
|
}
|
|
102
109
|
|
|
103
110
|
setDefaultInput("");
|
|
@@ -118,9 +125,11 @@ var ModalProvider = function ModalProvider(_ref) {
|
|
|
118
125
|
|
|
119
126
|
if (options) {
|
|
120
127
|
var title = options.title,
|
|
121
|
-
icon = options.icon
|
|
128
|
+
icon = options.icon,
|
|
129
|
+
_switchPrimaryBtn2 = options.switchPrimaryBtn;
|
|
122
130
|
setModalTitle(title);
|
|
123
131
|
setModalIcon(icon);
|
|
132
|
+
setSwitchPrimaryBtn(_switchPrimaryBtn2);
|
|
124
133
|
}
|
|
125
134
|
|
|
126
135
|
setOnSubmit(function () {
|
|
@@ -139,9 +148,11 @@ var ModalProvider = function ModalProvider(_ref) {
|
|
|
139
148
|
|
|
140
149
|
if (options) {
|
|
141
150
|
var title = options.title,
|
|
142
|
-
icon = options.icon
|
|
151
|
+
icon = options.icon,
|
|
152
|
+
_switchPrimaryBtn3 = options.switchPrimaryBtn;
|
|
143
153
|
setModalTitle(title);
|
|
144
154
|
setModalIcon(icon);
|
|
155
|
+
setSwitchPrimaryBtn(_switchPrimaryBtn3);
|
|
145
156
|
}
|
|
146
157
|
|
|
147
158
|
setOnSubmit(function () {
|
|
@@ -167,7 +178,8 @@ var ModalProvider = function ModalProvider(_ref) {
|
|
|
167
178
|
onSubmit: onSubmit,
|
|
168
179
|
defaultInput: defaultInput,
|
|
169
180
|
type: type,
|
|
170
|
-
inputType: inputType
|
|
181
|
+
inputType: inputType,
|
|
182
|
+
switchPrimaryBtn: switchPrimaryBtn
|
|
171
183
|
}));
|
|
172
184
|
};
|
|
173
185
|
|
|
@@ -95,9 +95,13 @@ function resetAlertMessage(alertClassName) {
|
|
|
95
95
|
});
|
|
96
96
|
} else {
|
|
97
97
|
var alertElement = document.querySelector(".blue-status-alert");
|
|
98
|
-
document.querySelector(".blue-status-" + alertClassName)
|
|
99
|
-
|
|
100
|
-
|
|
98
|
+
var statusElement = document.querySelector(".blue-status-" + alertClassName);
|
|
99
|
+
if (statusElement) statusElement.style.display = "";
|
|
100
|
+
|
|
101
|
+
if (alertElement) {
|
|
102
|
+
alertElement.style.display = "";
|
|
103
|
+
removeClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
|
|
104
|
+
}
|
|
101
105
|
}
|
|
102
106
|
}
|
|
103
107
|
|
|
@@ -106,25 +110,29 @@ function setAlertMessage(message) {
|
|
|
106
110
|
var close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
107
111
|
var detailText = arguments.length > 3 ? arguments[3] : undefined;
|
|
108
112
|
var alertElement = document.querySelector(".blue-status-alert");
|
|
109
|
-
document.querySelector(".blue-status-" + alertClassName)
|
|
110
|
-
|
|
111
|
-
addClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
|
|
112
|
-
alertElement.querySelector(".alert-body").innerHTML = "<h2>" + message + "</h2>";
|
|
113
|
+
var statusElement = document.querySelector(".blue-status-" + alertClassName);
|
|
114
|
+
if (statusElement) statusElement.style.display = "flex";
|
|
113
115
|
|
|
114
|
-
if (
|
|
115
|
-
alertElement.
|
|
116
|
-
|
|
116
|
+
if (alertElement) {
|
|
117
|
+
alertElement.style.display = "block";
|
|
118
|
+
addClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
|
|
119
|
+
alertElement.querySelector(".alert-body").innerHTML = "<h2>" + message + "</h2>";
|
|
117
120
|
|
|
118
|
-
|
|
121
|
+
if (detailText) {
|
|
122
|
+
alertElement.querySelector(".alert-body").innerHTML += "<span>" + detailText + "</span>";
|
|
123
|
+
}
|
|
119
124
|
|
|
120
|
-
|
|
121
|
-
btnCloseElement.style.display = "inline-block";
|
|
125
|
+
var btnCloseElement = alertElement.querySelector(".btn-close");
|
|
122
126
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
127
|
+
if (close) {
|
|
128
|
+
btnCloseElement.style.display = "inline-block";
|
|
129
|
+
|
|
130
|
+
btnCloseElement.onclick = function () {
|
|
131
|
+
resetAlertMessage(alertClassName);
|
|
132
|
+
};
|
|
133
|
+
} else {
|
|
134
|
+
btnCloseElement.style.display = "none";
|
|
135
|
+
}
|
|
128
136
|
}
|
|
129
137
|
}
|
|
130
138
|
|