contentoh-components-library 21.4.98 → 21.4.99
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/atoms/ObservationFlag/index.js +16 -1
- package/dist/components/organisms/Modal/index.js +1 -1
- package/dist/components/organisms/Modal/styles.js +1 -1
- package/dist/components/pages/RetailerProductEdition/index.js +1 -1
- package/package.json +1 -1
- package/src/components/atoms/ObservationFlag/index.js +18 -1
- package/src/components/organisms/Modal/index.js +1 -1
- package/src/components/organisms/Modal/styles.js +0 -1
- package/src/components/pages/RetailerProductEdition/index.js +1 -1
|
@@ -71,7 +71,22 @@ var ObservationFlag = function ObservationFlag(_ref) {
|
|
|
71
71
|
modalData = _useState8[0],
|
|
72
72
|
setModalData = _useState8[1];
|
|
73
73
|
|
|
74
|
-
var textareaRef = (0, _react.useRef)(null);
|
|
74
|
+
var textareaRef = (0, _react.useRef)(null); // const toggleObservation = () => {
|
|
75
|
+
// setObservationVisible(!isObservationVisible);
|
|
76
|
+
// };
|
|
77
|
+
|
|
78
|
+
(0, _react.useEffect)(function () {
|
|
79
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
80
|
+
if (isObservationVisible && !event.target.closest(".Observation") && !event.target.closest(".Container")) {
|
|
81
|
+
setObservationVisible(false);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
document.addEventListener("click", handleClickOutside);
|
|
86
|
+
return function () {
|
|
87
|
+
document.removeEventListener("click", handleClickOutside);
|
|
88
|
+
};
|
|
89
|
+
}, [isObservationVisible]);
|
|
75
90
|
(0, _react.useEffect)(function () {
|
|
76
91
|
document.addEventListener("click", handleClickOutside);
|
|
77
92
|
return function () {
|
|
@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
|
|
|
15
15
|
|
|
16
16
|
var _templateObject;
|
|
17
17
|
|
|
18
|
-
var ContainerModal = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n overflow: auto;\n display: grid;\n place-items: center;\n background-color: rgba(0, 0, 0, 0.4);\n
|
|
18
|
+
var ContainerModal = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n overflow: auto;\n display: grid;\n place-items: center;\n background-color: rgba(0, 0, 0, 0.4);\n\n .contentModal {\n width: fit-content;\n max-width: 80%;\n min-width: 80px;\n height: fit-content;\n max-height: 90%;\n min-height: 120px;\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: white;\n border-radius: 10px;\n padding: 25px 25px 20px 25px;\n box-shadow: 0px 2px 4px 0px #00000040;\n\n header {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n gap: 6px;\n\n .label-title {\n width: 100%;\n text-align: center;\n font-family: ", ", sans-serif;\n font-size: 17px;\n line-height: 1.2;\n color: #262626;\n white-space: pre-wrap;\n }\n\n & + * {\n margin-top: 20px;\n }\n }\n\n .iconModal {\n width: 50px;\n height: 50px;\n font-size: 30px;\n border-width: 4px;\n margin-bottom: 20px;\n overflow: hidden;\n\n &.iconModal-error {\n background-color: #953737;\n border-color: #953737;\n color: white;\n }\n &.iconModal-warning {\n font-size: 27px;\n padding-bottom: 8px;\n color: #af9647;\n border-color: #af9647;\n }\n &.iconModal-info {\n border-color: #9e3e26;\n color: #9e3e26;\n }\n &.iconModal-success {\n }\n &.iconModal-successv2{\n border-color: #85BC5B;\n color: #85BC5B;\n }\n }\n\n .label-message {\n width: 100%;\n text-align: center;\n font-family: ", ", sans-serif;\n font-size: 13px;\n color: #707070;\n white-space: pre-wrap;\n }\n\n .container-customComponent {\n width: 100%;\n max-height: 50vh;\n display: flex;\n flex-direction: column;\n margin-top: 20px;\n padding: 0px 0px;\n //border: 1px solid red;\n }\n\n .container-buttons {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 12px;\n margin-top: 20px;\n //border: 1px solid red;\n }\n }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
|
|
19
19
|
|
|
20
20
|
exports.ContainerModal = ContainerModal;
|
|
@@ -518,7 +518,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
|
|
|
518
518
|
|
|
519
519
|
var handleClickOutside = function handleClickOutside(event) {
|
|
520
520
|
if (isObservationVisible && !event.target.closest(".Observation") && !event.target.closest(".Container")) {
|
|
521
|
-
|
|
521
|
+
hideObservation();
|
|
522
522
|
}
|
|
523
523
|
};
|
|
524
524
|
|
package/package.json
CHANGED
|
@@ -30,7 +30,24 @@ export const ObservationFlag = ({
|
|
|
30
30
|
const [modalData, setModalData] = useState({});
|
|
31
31
|
|
|
32
32
|
const textareaRef = useRef(null);
|
|
33
|
-
|
|
33
|
+
// const toggleObservation = () => {
|
|
34
|
+
// setObservationVisible(!isObservationVisible);
|
|
35
|
+
// };
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
const handleClickOutside = (event) => {
|
|
38
|
+
if (
|
|
39
|
+
isObservationVisible &&
|
|
40
|
+
!event.target.closest(".Observation") &&
|
|
41
|
+
!event.target.closest(".Container")
|
|
42
|
+
) {
|
|
43
|
+
setObservationVisible(false);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
document.addEventListener("click", handleClickOutside);
|
|
47
|
+
return () => {
|
|
48
|
+
document.removeEventListener("click", handleClickOutside);
|
|
49
|
+
};
|
|
50
|
+
}, [isObservationVisible]);
|
|
34
51
|
useEffect(() => {
|
|
35
52
|
document.addEventListener("click", handleClickOutside);
|
|
36
53
|
return () => {
|