code7-leia 0.1.125 → 0.1.127
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/code7-leia.cjs.development.js +60 -53
- package/dist/code7-leia.cjs.development.js.map +1 -1
- package/dist/code7-leia.cjs.production.min.js +1 -1
- package/dist/code7-leia.cjs.production.min.js.map +1 -1
- package/dist/code7-leia.esm.js +60 -53
- package/dist/code7-leia.esm.js.map +1 -1
- package/dist/components/FileArea/components/Search/styles.d.ts +4 -0
- package/dist/components/MultiSelect/index.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/FileArea/components/Search/index.tsx +20 -31
- package/src/components/FileArea/components/Search/styles.tsx +26 -0
- package/src/components/FileArea/index.tsx +13 -5
- package/src/components/MultiSelect/index.tsx +3 -1
package/dist/code7-leia.esm.js
CHANGED
|
@@ -712,6 +712,11 @@ Table$1.propTypes = {
|
|
|
712
712
|
isLoading: PropTypes.bool
|
|
713
713
|
};
|
|
714
714
|
|
|
715
|
+
var _templateObject$4, _templateObject2$3, _templateObject3$2;
|
|
716
|
+
var InputContainer = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: 300px;\n"])));
|
|
717
|
+
var Input = /*#__PURE__*/styled.input(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-left: 40px;\n border-radius: 5px;\n border: 1px solid #ccc;\n height: 40px;\n width: 100%;\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 3px #6690ff;\n }\n"])));
|
|
718
|
+
var IconContainer = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 10px;\n left: 10px;\n pointer-events: none;\n"])));
|
|
719
|
+
|
|
715
720
|
var SearchInput = function SearchInput(_ref) {
|
|
716
721
|
var placeholder = _ref.placeholder,
|
|
717
722
|
setFiles = _ref.setFiles,
|
|
@@ -725,36 +730,17 @@ var SearchInput = function SearchInput(_ref) {
|
|
|
725
730
|
});
|
|
726
731
|
setFiles(searchTerm !== '' ? newFiles : initialFiles);
|
|
727
732
|
};
|
|
728
|
-
return React.createElement(
|
|
729
|
-
style: {
|
|
730
|
-
position: 'relative',
|
|
731
|
-
width: '300px'
|
|
732
|
-
}
|
|
733
|
-
}, React.createElement("input", {
|
|
733
|
+
return React.createElement(InputContainer, null, React.createElement(Input, {
|
|
734
734
|
type: "text",
|
|
735
735
|
onChange: function onChange(e) {
|
|
736
736
|
return searchName(e);
|
|
737
737
|
},
|
|
738
|
-
placeholder: placeholder
|
|
739
|
-
|
|
740
|
-
paddingLeft: '40px',
|
|
741
|
-
borderRadius: '5px',
|
|
742
|
-
border: '1px solid #ccc',
|
|
743
|
-
height: '40px',
|
|
744
|
-
width: '100%'
|
|
745
|
-
}
|
|
746
|
-
}), React.createElement("div", {
|
|
747
|
-
style: {
|
|
748
|
-
position: 'absolute',
|
|
749
|
-
top: '10px',
|
|
750
|
-
left: '10px',
|
|
751
|
-
pointerEvents: 'none'
|
|
752
|
-
}
|
|
753
|
-
}, React.createElement(FaSearch, null)));
|
|
738
|
+
placeholder: placeholder
|
|
739
|
+
}), React.createElement(IconContainer, null, React.createElement(FaSearch, null)));
|
|
754
740
|
};
|
|
755
741
|
|
|
756
|
-
var _templateObject$
|
|
757
|
-
var FullScreen = /*#__PURE__*/styled.div(_templateObject$
|
|
742
|
+
var _templateObject$5, _templateObject2$4, _templateObject3$3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
743
|
+
var FullScreen = /*#__PURE__*/styled.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: ", ";\n cursor: ", ";\n\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n justify-content: center;\n align-items: center;\n z-index: ", ";\n animation: fadeIn 380ms ease-in-out 1;\n background-color: #2f3845b8;\n backdrop-filter: blur(2px);\n\n @keyframes fadeIn {\n from {\n background-color: #2f384521;\n }\n to {\n background-color: #2f3845b8;\n }\n }\n"])), function (_ref) {
|
|
758
744
|
var isOpen = _ref.isOpen;
|
|
759
745
|
return isOpen === 1 ? 'flex' : 'none';
|
|
760
746
|
}, function (_ref2) {
|
|
@@ -764,11 +750,11 @@ var FullScreen = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4
|
|
|
764
750
|
var zIndex = _ref3.zIndex;
|
|
765
751
|
return zIndex;
|
|
766
752
|
});
|
|
767
|
-
var Modal = /*#__PURE__*/styled.div(_templateObject2$
|
|
753
|
+
var Modal = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: #fff;\n border-radius: 3px;\n position: relative;\n cursor: default;\n width: 100%;\n max-width: ", ";\n animation: slideIn 350ms cubic-bezier(0.42, 0, 0.21, 1) 1;\n\n @keyframes slideIn {\n from {\n transform: translateY(-120px);\n opacity: 0;\n }\n\n 20% {\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n"])), function (_ref4) {
|
|
768
754
|
var maxWidth = _ref4.maxWidth;
|
|
769
755
|
return maxWidth;
|
|
770
756
|
});
|
|
771
|
-
var ModalContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
757
|
+
var ModalContainer = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow-y: auto;\n max-height: ", ";\n"])), function (_ref5) {
|
|
772
758
|
var maxHeight = _ref5.maxHeight;
|
|
773
759
|
return maxHeight;
|
|
774
760
|
});
|
|
@@ -903,8 +889,8 @@ Modal$1.defaultProps = {
|
|
|
903
889
|
zIndex: 9999
|
|
904
890
|
};
|
|
905
891
|
|
|
906
|
-
var _templateObject$
|
|
907
|
-
var Container$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
892
|
+
var _templateObject$6;
|
|
893
|
+
var Container$1 = /*#__PURE__*/styled.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n justify-content: center;\n padding: 24px 0;\n height: 193px;\n\n background: ", ";\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: 40px 1px, 1px 40px;\n background-color: ", ";\n\n & .content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n & > .icon {\n background-color: ", ";\n border-radius: 16px;\n width: 145px;\n height: 145px;\n\n display: flex;\n justify-content: center;\n\n & svg {\n width: 100%;\n height: 70%;\n margin: 20px;\n }\n }\n\n & .description {\n max-width: 600px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 8px 0 8px 24px;\n\n .button-add {\n cursor: pointer;\n }\n\n .start-icon {\n display: flex;\n align-items: center;\n }\n }\n }\n"])), function (_ref) {
|
|
908
894
|
var hasBorder = _ref.hasBorder;
|
|
909
895
|
return hasBorder && "linear-gradient(\n to right,\n #dadce3 50%,\n rgba(255, 255, 255, 0) 0%\n ),\n linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, #dadce3 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%)";
|
|
910
896
|
}, function (_ref2) {
|
|
@@ -964,17 +950,18 @@ EmptyState.defaultProps = {
|
|
|
964
950
|
hasBorder: true
|
|
965
951
|
};
|
|
966
952
|
|
|
967
|
-
var _templateObject$
|
|
968
|
-
var MultiSelectWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
969
|
-
var SelectBox = /*#__PURE__*/styled.div(_templateObject2$
|
|
970
|
-
var OverSelect = /*#__PURE__*/styled.div(_templateObject3$
|
|
953
|
+
var _templateObject$7, _templateObject2$5, _templateObject3$4, _templateObject4$1, _templateObject5$1;
|
|
954
|
+
var MultiSelectWrapper = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 200px;\n"])));
|
|
955
|
+
var SelectBox = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n select {\n width: 100%;\n font-weight: bold;\n }\n"])));
|
|
956
|
+
var OverSelect = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n"])));
|
|
971
957
|
var Checkboxes = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n border: 1px #dadada solid;\n"])));
|
|
972
958
|
var CheckboxLabel = /*#__PURE__*/styled.label(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n &:hover {\n background-color: #1e90ff;\n }\n"])));
|
|
973
959
|
|
|
974
960
|
var MultiSelect = function MultiSelect(_ref) {
|
|
975
961
|
var options = _ref.options,
|
|
976
962
|
presset = _ref.presset,
|
|
977
|
-
setPresset = _ref.setPresset
|
|
963
|
+
setPresset = _ref.setPresset,
|
|
964
|
+
setOptions = _ref.setOptions;
|
|
978
965
|
var _useState = useState(false),
|
|
979
966
|
expanded = _useState[0],
|
|
980
967
|
setExpanded = _useState[1];
|
|
@@ -1005,6 +992,12 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
1005
992
|
if (trimmedOption !== '' && !options.some(function (option) {
|
|
1006
993
|
return option.value === trimmedOption;
|
|
1007
994
|
})) {
|
|
995
|
+
setOptions(function (prevOptions) {
|
|
996
|
+
return [].concat(prevOptions, [{
|
|
997
|
+
label: trimmedOption,
|
|
998
|
+
value: trimmedOption
|
|
999
|
+
}]);
|
|
1000
|
+
});
|
|
1008
1001
|
setPresset(function (prevPresset) {
|
|
1009
1002
|
return [].concat(prevPresset, [trimmedOption]);
|
|
1010
1003
|
});
|
|
@@ -1044,7 +1037,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
1044
1037
|
}))));
|
|
1045
1038
|
};
|
|
1046
1039
|
|
|
1047
|
-
var _templateObject$
|
|
1040
|
+
var _templateObject$8;
|
|
1048
1041
|
var getColor = function getColor(props) {
|
|
1049
1042
|
if (props.isDragAccept) {
|
|
1050
1043
|
return '#6690ff';
|
|
@@ -1057,7 +1050,7 @@ var getColor = function getColor(props) {
|
|
|
1057
1050
|
}
|
|
1058
1051
|
return '#979aa5';
|
|
1059
1052
|
};
|
|
1060
|
-
var Container$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
1053
|
+
var Container$2 = /*#__PURE__*/styled.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: #f3f5f9;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n padding: 20px;\n border-width: 2px;\n border-radius: 4px;\n border-color: var(", ");\n border-style: dashed;\n color: #5a5d68;\n outline: none;\n transition: border 0.24s ease-in-out;\n\n & > span {\n margin: 8px 10px 0 0;\n display: flex;\n }\n\n button {\n padding: 8px 16px 8px 16px;\n border-radius: 4px;\n border: 2px #102693 solid;\n margin-top: 10px;\n }\n"])), function (props) {
|
|
1061
1054
|
return getColor(props);
|
|
1062
1055
|
});
|
|
1063
1056
|
|
|
@@ -1387,8 +1380,11 @@ var FileArea = function FileArea() {
|
|
|
1387
1380
|
fileDelete = _useState6[0],
|
|
1388
1381
|
setFileDelete = _useState6[1];
|
|
1389
1382
|
var _useState7 = useState([]),
|
|
1390
|
-
|
|
1391
|
-
|
|
1383
|
+
optionsPresset = _useState7[0],
|
|
1384
|
+
setOptionsPresset = _useState7[1];
|
|
1385
|
+
var _useState8 = useState([]),
|
|
1386
|
+
presset = _useState8[0],
|
|
1387
|
+
setPresset = _useState8[1];
|
|
1392
1388
|
var t = getLanguage(language);
|
|
1393
1389
|
var dispatch = useDispatch();
|
|
1394
1390
|
var initFiles = useSelector(function (state) {
|
|
@@ -1401,18 +1397,21 @@ var FileArea = function FileArea() {
|
|
|
1401
1397
|
useEffect(function () {
|
|
1402
1398
|
dispatch(getFilesAction(id));
|
|
1403
1399
|
}, [id]);
|
|
1400
|
+
useEffect(function () {
|
|
1401
|
+
var options = tags.map(function (tag) {
|
|
1402
|
+
return {
|
|
1403
|
+
label: tag,
|
|
1404
|
+
value: tag
|
|
1405
|
+
};
|
|
1406
|
+
});
|
|
1407
|
+
setOptionsPresset(options);
|
|
1408
|
+
}, [tags]);
|
|
1404
1409
|
useEffect(function () {
|
|
1405
1410
|
if (!!initFiles) {
|
|
1406
1411
|
setFiles(initFiles);
|
|
1407
1412
|
setInitialFiles(initFiles);
|
|
1408
1413
|
}
|
|
1409
1414
|
}, [initFiles]);
|
|
1410
|
-
var optionsPresset = tags.map(function (tag) {
|
|
1411
|
-
return {
|
|
1412
|
-
label: tag,
|
|
1413
|
-
value: tag
|
|
1414
|
-
};
|
|
1415
|
-
});
|
|
1416
1415
|
var pressetTag = function pressetTag(tags) {
|
|
1417
1416
|
var tagsSplit = tags.split(',');
|
|
1418
1417
|
var html = '';
|
|
@@ -1425,6 +1424,13 @@ var FileArea = function FileArea() {
|
|
|
1425
1424
|
if (modal) {
|
|
1426
1425
|
setUploadFile(undefined);
|
|
1427
1426
|
setPresset([]);
|
|
1427
|
+
var tag = optionsPresset.map(function (tag) {
|
|
1428
|
+
return {
|
|
1429
|
+
label: tag,
|
|
1430
|
+
value: tag
|
|
1431
|
+
};
|
|
1432
|
+
});
|
|
1433
|
+
setOptionsPresset(tag);
|
|
1428
1434
|
}
|
|
1429
1435
|
setModal(!modal);
|
|
1430
1436
|
};
|
|
@@ -1505,6 +1511,7 @@ var FileArea = function FileArea() {
|
|
|
1505
1511
|
})), React.createElement("div", {
|
|
1506
1512
|
className: 'presset'
|
|
1507
1513
|
}, React.createElement("p", null, "Presset"), React.createElement(MultiSelect, {
|
|
1514
|
+
setOptions: setOptionsPresset,
|
|
1508
1515
|
options: optionsPresset,
|
|
1509
1516
|
presset: presset,
|
|
1510
1517
|
setPresset: setPresset
|
|
@@ -1550,16 +1557,16 @@ var FileArea = function FileArea() {
|
|
|
1550
1557
|
}, React.createElement(Container, null, renderFiles()));
|
|
1551
1558
|
};
|
|
1552
1559
|
|
|
1553
|
-
var _templateObject$
|
|
1554
|
-
var Container$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
1555
|
-
return props.isLoading && css(_templateObject2$
|
|
1560
|
+
var _templateObject$9, _templateObject2$6, _templateObject3$5, _templateObject4$2, _templateObject5$2;
|
|
1561
|
+
var Container$3 = /*#__PURE__*/styled.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n"])), function (props) {
|
|
1562
|
+
return props.isLoading && css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n #loading {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgb(151,154,165, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n }\n\n #loading::after {\n content: \"\";\n border: 4px solid #f3f3f3; /* Cor do s\xEDmbolo de carregamento */\n border-top: 4px solid #3498db; /* Cor do s\xEDmbolo de carregamento */\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n "])));
|
|
1556
1563
|
});
|
|
1557
|
-
var Header$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
1564
|
+
var Header$1 = /*#__PURE__*/styled.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n .infos {\n display: flex;\n flex-direction: column;\n padding: 14px 0;\n\n h2 {\n font-size: 20px\n }\n\n p {\n font-size: 14px\n }\n }\n"])));
|
|
1558
1565
|
var Inputs = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n\n button {\n background: #102693;\n padding: 10px 20px;\n color: white;\n border-radius: 4px;\n width: 190px;\n height: 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n svg {\n width: 23px;\n height: 23px;\n }\n }\n"])));
|
|
1559
1566
|
var Result = /*#__PURE__*/styled.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: left;\n background: #F3F5F9;\n padding: 15px;\n border-radius: 5px;\n margin-top: 15px;\n\n .text{\n margin-left: 5px;\n font-size: 14px;\n line-height: 1.5;\n }\n\n .icon {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 5px;\n\n svg {\n width: 35px;\n height: 35px;\n }\n }\n\n"])));
|
|
1560
1567
|
|
|
1561
|
-
var _templateObject$
|
|
1562
|
-
var Container$4 = /*#__PURE__*/styled.div(_templateObject$
|
|
1568
|
+
var _templateObject$a;
|
|
1569
|
+
var Container$4 = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: 50%;\n margin-right: 5px;\n select {\n padding: 12px;\n border-radius: 4px;\n border: 1px solid #979AA5;\n width: 100%;\n height: 40px;\n \n &:focus {\n outline: none;\n box-shadow: 0 0 0 3px #6690ff;\n }\n\n option {\n background: white;\n font-size: 14px;\n color: #5a5d68;\n }\n\n option:checked, option:hover {\n background: #6690ff;\n font-size: 14px;\n color: white;\n }\n }\n"])));
|
|
1563
1570
|
|
|
1564
1571
|
var Select = function Select(_ref) {
|
|
1565
1572
|
var options = _ref.options,
|
|
@@ -1588,10 +1595,10 @@ var Select = function Select(_ref) {
|
|
|
1588
1595
|
})));
|
|
1589
1596
|
};
|
|
1590
1597
|
|
|
1591
|
-
var _templateObject$
|
|
1592
|
-
var Container$5 = /*#__PURE__*/styled.div(_templateObject$
|
|
1593
|
-
var StyledInput = /*#__PURE__*/styled.input(_templateObject2$
|
|
1594
|
-
var RecordAudioButton = /*#__PURE__*/styled.div(_templateObject3$
|
|
1598
|
+
var _templateObject$b, _templateObject2$7, _templateObject3$6, _templateObject4$3;
|
|
1599
|
+
var Container$5 = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: 100%;\n margin-right: 5px;\n"])));
|
|
1600
|
+
var StyledInput = /*#__PURE__*/styled.input(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-left: 10px;\n padding-right: 40px;\n border-radius: 5px;\n border: 1px solid #ccc;\n height: 40px;\n width: 100%;\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 3px #6690ff;\n }\n"])));
|
|
1601
|
+
var RecordAudioButton = /*#__PURE__*/styled.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 10px;\n right: 10px;\n cursor: pointer;\n"])));
|
|
1595
1602
|
var StyledMicrophoneIcon = /*#__PURE__*/styled(FaMicrophone)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n"])));
|
|
1596
1603
|
|
|
1597
1604
|
var InputTest = function InputTest(_ref) {
|