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
|
@@ -720,6 +720,11 @@ Table$1.propTypes = {
|
|
|
720
720
|
isLoading: PropTypes.bool
|
|
721
721
|
};
|
|
722
722
|
|
|
723
|
+
var _templateObject$4, _templateObject2$3, _templateObject3$2;
|
|
724
|
+
var InputContainer = /*#__PURE__*/styled__default.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: 300px;\n"])));
|
|
725
|
+
var Input = /*#__PURE__*/styled__default.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"])));
|
|
726
|
+
var IconContainer = /*#__PURE__*/styled__default.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 10px;\n left: 10px;\n pointer-events: none;\n"])));
|
|
727
|
+
|
|
723
728
|
var SearchInput = function SearchInput(_ref) {
|
|
724
729
|
var placeholder = _ref.placeholder,
|
|
725
730
|
setFiles = _ref.setFiles,
|
|
@@ -733,36 +738,17 @@ var SearchInput = function SearchInput(_ref) {
|
|
|
733
738
|
});
|
|
734
739
|
setFiles(searchTerm !== '' ? newFiles : initialFiles);
|
|
735
740
|
};
|
|
736
|
-
return React__default.createElement(
|
|
737
|
-
style: {
|
|
738
|
-
position: 'relative',
|
|
739
|
-
width: '300px'
|
|
740
|
-
}
|
|
741
|
-
}, React__default.createElement("input", {
|
|
741
|
+
return React__default.createElement(InputContainer, null, React__default.createElement(Input, {
|
|
742
742
|
type: "text",
|
|
743
743
|
onChange: function onChange(e) {
|
|
744
744
|
return searchName(e);
|
|
745
745
|
},
|
|
746
|
-
placeholder: placeholder
|
|
747
|
-
|
|
748
|
-
paddingLeft: '40px',
|
|
749
|
-
borderRadius: '5px',
|
|
750
|
-
border: '1px solid #ccc',
|
|
751
|
-
height: '40px',
|
|
752
|
-
width: '100%'
|
|
753
|
-
}
|
|
754
|
-
}), React__default.createElement("div", {
|
|
755
|
-
style: {
|
|
756
|
-
position: 'absolute',
|
|
757
|
-
top: '10px',
|
|
758
|
-
left: '10px',
|
|
759
|
-
pointerEvents: 'none'
|
|
760
|
-
}
|
|
761
|
-
}, React__default.createElement(fa.FaSearch, null)));
|
|
746
|
+
placeholder: placeholder
|
|
747
|
+
}), React__default.createElement(IconContainer, null, React__default.createElement(fa.FaSearch, null)));
|
|
762
748
|
};
|
|
763
749
|
|
|
764
|
-
var _templateObject$
|
|
765
|
-
var FullScreen = /*#__PURE__*/styled__default.div(_templateObject$
|
|
750
|
+
var _templateObject$5, _templateObject2$4, _templateObject3$3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
751
|
+
var FullScreen = /*#__PURE__*/styled__default.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) {
|
|
766
752
|
var isOpen = _ref.isOpen;
|
|
767
753
|
return isOpen === 1 ? 'flex' : 'none';
|
|
768
754
|
}, function (_ref2) {
|
|
@@ -772,11 +758,11 @@ var FullScreen = /*#__PURE__*/styled__default.div(_templateObject$4 || (_templat
|
|
|
772
758
|
var zIndex = _ref3.zIndex;
|
|
773
759
|
return zIndex;
|
|
774
760
|
});
|
|
775
|
-
var Modal = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
761
|
+
var Modal = /*#__PURE__*/styled__default.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) {
|
|
776
762
|
var maxWidth = _ref4.maxWidth;
|
|
777
763
|
return maxWidth;
|
|
778
764
|
});
|
|
779
|
-
var ModalContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
765
|
+
var ModalContainer = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow-y: auto;\n max-height: ", ";\n"])), function (_ref5) {
|
|
780
766
|
var maxHeight = _ref5.maxHeight;
|
|
781
767
|
return maxHeight;
|
|
782
768
|
});
|
|
@@ -911,8 +897,8 @@ Modal$1.defaultProps = {
|
|
|
911
897
|
zIndex: 9999
|
|
912
898
|
};
|
|
913
899
|
|
|
914
|
-
var _templateObject$
|
|
915
|
-
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
900
|
+
var _templateObject$6;
|
|
901
|
+
var Container$1 = /*#__PURE__*/styled__default.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) {
|
|
916
902
|
var hasBorder = _ref.hasBorder;
|
|
917
903
|
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%)";
|
|
918
904
|
}, function (_ref2) {
|
|
@@ -972,17 +958,18 @@ EmptyState.defaultProps = {
|
|
|
972
958
|
hasBorder: true
|
|
973
959
|
};
|
|
974
960
|
|
|
975
|
-
var _templateObject$
|
|
976
|
-
var MultiSelectWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
977
|
-
var SelectBox = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
978
|
-
var OverSelect = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
961
|
+
var _templateObject$7, _templateObject2$5, _templateObject3$4, _templateObject4$1, _templateObject5$1;
|
|
962
|
+
var MultiSelectWrapper = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 200px;\n"])));
|
|
963
|
+
var SelectBox = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n select {\n width: 100%;\n font-weight: bold;\n }\n"])));
|
|
964
|
+
var OverSelect = /*#__PURE__*/styled__default.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n"])));
|
|
979
965
|
var Checkboxes = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n border: 1px #dadada solid;\n"])));
|
|
980
966
|
var CheckboxLabel = /*#__PURE__*/styled__default.label(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n &:hover {\n background-color: #1e90ff;\n }\n"])));
|
|
981
967
|
|
|
982
968
|
var MultiSelect = function MultiSelect(_ref) {
|
|
983
969
|
var options = _ref.options,
|
|
984
970
|
presset = _ref.presset,
|
|
985
|
-
setPresset = _ref.setPresset
|
|
971
|
+
setPresset = _ref.setPresset,
|
|
972
|
+
setOptions = _ref.setOptions;
|
|
986
973
|
var _useState = React.useState(false),
|
|
987
974
|
expanded = _useState[0],
|
|
988
975
|
setExpanded = _useState[1];
|
|
@@ -1013,6 +1000,12 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
1013
1000
|
if (trimmedOption !== '' && !options.some(function (option) {
|
|
1014
1001
|
return option.value === trimmedOption;
|
|
1015
1002
|
})) {
|
|
1003
|
+
setOptions(function (prevOptions) {
|
|
1004
|
+
return [].concat(prevOptions, [{
|
|
1005
|
+
label: trimmedOption,
|
|
1006
|
+
value: trimmedOption
|
|
1007
|
+
}]);
|
|
1008
|
+
});
|
|
1016
1009
|
setPresset(function (prevPresset) {
|
|
1017
1010
|
return [].concat(prevPresset, [trimmedOption]);
|
|
1018
1011
|
});
|
|
@@ -1052,7 +1045,7 @@ var MultiSelect = function MultiSelect(_ref) {
|
|
|
1052
1045
|
}))));
|
|
1053
1046
|
};
|
|
1054
1047
|
|
|
1055
|
-
var _templateObject$
|
|
1048
|
+
var _templateObject$8;
|
|
1056
1049
|
var getColor = function getColor(props) {
|
|
1057
1050
|
if (props.isDragAccept) {
|
|
1058
1051
|
return '#6690ff';
|
|
@@ -1065,7 +1058,7 @@ var getColor = function getColor(props) {
|
|
|
1065
1058
|
}
|
|
1066
1059
|
return '#979aa5';
|
|
1067
1060
|
};
|
|
1068
|
-
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
1061
|
+
var Container$2 = /*#__PURE__*/styled__default.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) {
|
|
1069
1062
|
return getColor(props);
|
|
1070
1063
|
});
|
|
1071
1064
|
|
|
@@ -1395,8 +1388,11 @@ var FileArea = function FileArea() {
|
|
|
1395
1388
|
fileDelete = _useState6[0],
|
|
1396
1389
|
setFileDelete = _useState6[1];
|
|
1397
1390
|
var _useState7 = React.useState([]),
|
|
1398
|
-
|
|
1399
|
-
|
|
1391
|
+
optionsPresset = _useState7[0],
|
|
1392
|
+
setOptionsPresset = _useState7[1];
|
|
1393
|
+
var _useState8 = React.useState([]),
|
|
1394
|
+
presset = _useState8[0],
|
|
1395
|
+
setPresset = _useState8[1];
|
|
1400
1396
|
var t = getLanguage(language);
|
|
1401
1397
|
var dispatch = reactRedux.useDispatch();
|
|
1402
1398
|
var initFiles = reactRedux.useSelector(function (state) {
|
|
@@ -1409,18 +1405,21 @@ var FileArea = function FileArea() {
|
|
|
1409
1405
|
React.useEffect(function () {
|
|
1410
1406
|
dispatch(getFilesAction(id));
|
|
1411
1407
|
}, [id]);
|
|
1408
|
+
React.useEffect(function () {
|
|
1409
|
+
var options = tags.map(function (tag) {
|
|
1410
|
+
return {
|
|
1411
|
+
label: tag,
|
|
1412
|
+
value: tag
|
|
1413
|
+
};
|
|
1414
|
+
});
|
|
1415
|
+
setOptionsPresset(options);
|
|
1416
|
+
}, [tags]);
|
|
1412
1417
|
React.useEffect(function () {
|
|
1413
1418
|
if (!!initFiles) {
|
|
1414
1419
|
setFiles(initFiles);
|
|
1415
1420
|
setInitialFiles(initFiles);
|
|
1416
1421
|
}
|
|
1417
1422
|
}, [initFiles]);
|
|
1418
|
-
var optionsPresset = tags.map(function (tag) {
|
|
1419
|
-
return {
|
|
1420
|
-
label: tag,
|
|
1421
|
-
value: tag
|
|
1422
|
-
};
|
|
1423
|
-
});
|
|
1424
1423
|
var pressetTag = function pressetTag(tags) {
|
|
1425
1424
|
var tagsSplit = tags.split(',');
|
|
1426
1425
|
var html = '';
|
|
@@ -1433,6 +1432,13 @@ var FileArea = function FileArea() {
|
|
|
1433
1432
|
if (modal) {
|
|
1434
1433
|
setUploadFile(undefined);
|
|
1435
1434
|
setPresset([]);
|
|
1435
|
+
var tag = optionsPresset.map(function (tag) {
|
|
1436
|
+
return {
|
|
1437
|
+
label: tag,
|
|
1438
|
+
value: tag
|
|
1439
|
+
};
|
|
1440
|
+
});
|
|
1441
|
+
setOptionsPresset(tag);
|
|
1436
1442
|
}
|
|
1437
1443
|
setModal(!modal);
|
|
1438
1444
|
};
|
|
@@ -1513,6 +1519,7 @@ var FileArea = function FileArea() {
|
|
|
1513
1519
|
})), React__default.createElement("div", {
|
|
1514
1520
|
className: 'presset'
|
|
1515
1521
|
}, React__default.createElement("p", null, "Presset"), React__default.createElement(MultiSelect, {
|
|
1522
|
+
setOptions: setOptionsPresset,
|
|
1516
1523
|
options: optionsPresset,
|
|
1517
1524
|
presset: presset,
|
|
1518
1525
|
setPresset: setPresset
|
|
@@ -1558,16 +1565,16 @@ var FileArea = function FileArea() {
|
|
|
1558
1565
|
}, React__default.createElement(Container, null, renderFiles()));
|
|
1559
1566
|
};
|
|
1560
1567
|
|
|
1561
|
-
var _templateObject$
|
|
1562
|
-
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
1563
|
-
return props.isLoading && styled.css(_templateObject2$
|
|
1568
|
+
var _templateObject$9, _templateObject2$6, _templateObject3$5, _templateObject4$2, _templateObject5$2;
|
|
1569
|
+
var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n"])), function (props) {
|
|
1570
|
+
return props.isLoading && styled.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 "])));
|
|
1564
1571
|
});
|
|
1565
|
-
var Header$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
1572
|
+
var Header$1 = /*#__PURE__*/styled__default.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"])));
|
|
1566
1573
|
var Inputs = /*#__PURE__*/styled__default.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"])));
|
|
1567
1574
|
var Result = /*#__PURE__*/styled__default.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"])));
|
|
1568
1575
|
|
|
1569
|
-
var _templateObject$
|
|
1570
|
-
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
1576
|
+
var _templateObject$a;
|
|
1577
|
+
var Container$4 = /*#__PURE__*/styled__default.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"])));
|
|
1571
1578
|
|
|
1572
1579
|
var Select = function Select(_ref) {
|
|
1573
1580
|
var options = _ref.options,
|
|
@@ -1596,10 +1603,10 @@ var Select = function Select(_ref) {
|
|
|
1596
1603
|
})));
|
|
1597
1604
|
};
|
|
1598
1605
|
|
|
1599
|
-
var _templateObject$
|
|
1600
|
-
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
1601
|
-
var StyledInput = /*#__PURE__*/styled__default.input(_templateObject2$
|
|
1602
|
-
var RecordAudioButton = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
1606
|
+
var _templateObject$b, _templateObject2$7, _templateObject3$6, _templateObject4$3;
|
|
1607
|
+
var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: 100%;\n margin-right: 5px;\n"])));
|
|
1608
|
+
var StyledInput = /*#__PURE__*/styled__default.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"])));
|
|
1609
|
+
var RecordAudioButton = /*#__PURE__*/styled__default.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 10px;\n right: 10px;\n cursor: pointer;\n"])));
|
|
1603
1610
|
var StyledMicrophoneIcon = /*#__PURE__*/styled__default(fa.FaMicrophone)(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n"])));
|
|
1604
1611
|
|
|
1605
1612
|
var InputTest = function InputTest(_ref) {
|