react-ui-basics 0.0.242 → 0.0.243

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/Modal.js CHANGED
@@ -34,10 +34,11 @@ class Modal extends AbstractModal {
34
34
  const content = createRef();
35
35
  const props = propsGetter(that);
36
36
  const beforeClose = (e) => {
37
- stopPropagation(e);
38
37
  const bc = getBeforeClose() || props().beforeClose;
39
- if (!bc || bc(that.close, e))
38
+ if (!bc || bc(that.close, e)) {
39
+ stopPropagation(e);
40
40
  that.close();
41
+ }
41
42
  };
42
43
  const shouldClose = (e) => {
43
44
  const isSameModal = __style(el()).zIndex == (zIndex - 1) + '';
package/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["./src/Modal.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sources":["./src/Modal.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AASA,IAAI,WAAW,CAAC;AAChB,IAAI,MAAM,GAAG,GAAG,CAAC;AAEjB,MAAM,UAAU,GAAG,SAAS,CAAC;AAC7B,MAAM,YAAY,GAAG,CAAC,KAAK,KAAI;AAC3B,IAAA,mBAAmB,CAAC,QAAQ,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;AACvD,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC;IAC3B,QAAQ,IAAI,gBAAgB,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC7D,WAAW,GAAG,QAAQ,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,QAAQ,KAAI;IACpC,MAAM,IAAI,GAAG,WAAW,CAAC;IACzB,IAAI,IAAI,mBAAmB,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;AACxD,IAAA,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC;IACjB,gBAAgB,CAAC,QAAQ,EAAE,UAAU,EAAE,WAAW,GAAG,QAAQ,CAAC,CAAC;AACnE,CAAC,CAAC;AAkBF,MAAe,aAAc,SAAQ,aAAyB,CAAA;AAG7D,CAAA;AAED,MAAM,KAAM,SAAQ,aAAa,CAAA;AAU7B,IAAA,WAAA,CAAY,UAAU,EAAA;QAClB,KAAK,CAAC,UAAU,CAAC,CAAC;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC;AAClB,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;AAEhB,QAAA,MAAM,CACF,MAAM,EACN,OAAO,EACP,cAAc,EACjB,GAAG,QAAQ,CAAgD,IAAI,EAAE,CAAC,CAAC,CAAC;AACrE,QAAA,MAAM,OAAO,GAAG,SAAS,EAAkB,CAAC;AAC5C,QAAA,MAAM,EAAE,GAAG,SAAS,EAAkB,CAAC;AACvC,QAAA,MAAM,OAAO,GAAG,SAAS,EAAkB,CAAC;AAC5C,QAAA,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;AAEhC,QAAA,MAAM,WAAW,GAAG,CAAC,CAAC,KAAI;YACtB,MAAM,EAAE,GAAG,cAAc,EAAE,IAAI,KAAK,EAAE,CAAC,WAAW,CAAC;YACnD,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE;gBAC1B,eAAe,CAAC,CAAC,CAAC,CAAC;gBACnB,IAAI,CAAC,KAAK,EAAE,CAAC;AAChB,aAAA;AACL,SAAC,CAAC;AAEF,QAAA,MAAM,WAAW,GAAG,CAAC,CAAC,KAAI;AACtB,YAAA,MAAM,WAAW,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,CAAC;YAC3D,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,WAAW,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC;AAC1E,SAAC,CAAC;QAEF,MAAM,qBAAqB,GAAG,MAAK;YAC/B,MAAM,aAAa,GAAG,eAAe,CAAC;YACtC,IAAI,QAAQ,GAAG,MAAK;gBAChB,mBAAmB,CAAC,OAAO,EAAE,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC;gBACxD,MAAM,CAAC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC;gBAC9D,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,EAAE,GAAG,KAAK,GAAG,KAAK,CAAC,CAAC;AAClE,aAAC,CAAC;YACF,gBAAgB,CAAC,OAAO,EAAE,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC;AACzD,SAAC,CAAC;AACF,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,MAAK;AAChB,YAAA,MAAM,EAAC,SAAS,EAAE,GAAG,EAAE,SAAS,GAAG,KAAK,CAAC,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAC,GAAG,KAAK,EAAE,CAAC;AAC1F,YAAA,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;AACvB,YAAA,MAAM,IAAI,GAAG,MAAM,EAAE,CAAC;AACtB,YAAA,MAAM,KAAK,GAAGA,YAAA,CAAA,KAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAK,SAAS,EAAE,UAAU,CAAC,CAAA,KAAA,CAAO,EAAE,SAAS,EAAE,IAAI,IAAI,MAAM,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAA,EAAA,EAAA,QAAA,EAAA,CACvGC,sBAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,CAAS,OAAA,CAAA,EAAE,IAAI,IAAI,MAAM,CAAC,EAC7D,CAAA,EACND,YAAK,CAAA,KAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,EAAE,GAAG,IAAI,KAAK,CAAC,EAC9D,KAAK,EAAE,GAAG,IAAI,EAAC,GAAG,EAAE,GAAG,GAAG,IAAI,EAAC,EAC/B,GAAG,EAAE,OAAO,EAEZ,EAAA,EAAA,QAAA,EAAA,CAAA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,IAAG;;AAElC,gCAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;AAC7B,oCAAA,iBAAiB,EAAE,OAAO;AAC1B,oCAAA,wBAAwB,EAAE,cAAc;AAC3C,iCAAA,CAAC,CAAC;6BACN,CAAC,EACD,IAAI,EACLC,YAAA,CAAC,MAAM,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,SAAS,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAA,EAAA,EAAA,QAAA,EAClE,SAAS,EAAA,CAAA,CACL,CACP,EAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CACJ,CAAC;AAEP,YAAA,OAAO,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC;AACvE,SAAC,CAAC;AAEF,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,MAAK;YAC5B,IAAI,CAAC,MAAM,EAAE;gBACT,OAAO;AAEX,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,qBAAqB,EAAE,CAAC;YACxB,MAAM,CAAC,KAAK,CAAC,CAAC;YAEd,YAAY,CAAC,IAAI,CAAC,CAAC;AACvB,SAAC,CAAC;AACF,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,MAAK;AAC1B,YAAA,IAAI,MAAM,EAAE;gBACR,OAAO;AAEX,YAAA,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC;AAC9C,YAAA,qBAAqB,EAAE,CAAC;YACxB,MAAM,CAAC,IAAI,CAAC,CAAC;AAEb,YAAA,IAAI,QAAQ,GAAG,KAAK,IAAG;gBACnB,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE;oBAC/C,WAAW,CAAC,KAAK,CAAC,CAAC;AACvB,gBAAA,OAAO,IAAI,CAAC;AAChB,aAAC,CAAC;AAEF,YAAA,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;AAC/B,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,MAAK;AAC3B,YAAA,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;AACvB,YAAA,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAK;AACrB,gBAAA,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AACxB,aAAC,CAAC,CAAC;AACH,YAAA,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,MAAK;AACtB,gBAAA,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;AACzB,aAAC,CAAC,CAAC;YACH,MAAM,CAAC,IAAI,IAAI,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;AACtC,SAAC,CAAC;AACF,QAAA,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,SAAS,KAAI;AACrC,YAAA,MAAM,IAAI,GAAG,KAAK,EAAE,CAAC,IAAI,CAAC;AAC1B,YAAA,IAAI,IAAI,KAAK,SAAS,CAAC,IAAI,EAAE;gBACzB,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,CAAC;AAC3B,aAAA;AACL,SAAC,CAAC;KACL;;AApHM,KAAgB,CAAA,gBAAA,GAAG,SAAS,CAAA;AAC5B,KAAY,CAAA,YAAA,GAAG,YAAY,CAAA;AAC3B,KAAW,CAAA,WAAA,GAAG,WAAW,CAAA;AAEzB,KAAA,CAAA,YAAY,GAAG;AAClB,IAAA,SAAS,EAAEA,YAAC,CAAA,YAAY,IAAC,IAAI,EAAC,OAAO,EAAE,CAAA;CAC1C;;;;"}
package/bundle.css CHANGED
@@ -302,6 +302,24 @@
302
302
  position: absolute;
303
303
  }
304
304
 
305
+ .DNDContainer .DroppableList .Draggable {
306
+ transform: unset;
307
+ transition: unset;
308
+ opacity: 1;
309
+ }
310
+
311
+ .DNDContainer .DroppableList .Draggable.dragged {
312
+ transition: unset !important;
313
+ }
314
+
315
+ .DNDContainer .DroppableList.hover .Draggable {
316
+ transition: transform 0.2s ease-in;
317
+ }
318
+
319
+ .DNDContainer .DroppableList.resetting .Draggable {
320
+ transition: transform 0.1s ease-in;
321
+ }
322
+
305
323
  .ImageGallery {
306
324
  position: fixed;
307
325
  top: 0;
@@ -537,24 +555,6 @@
537
555
  font-size: 24px;
538
556
  }
539
557
 
540
- .DNDContainer .DroppableList .Draggable {
541
- transform: unset;
542
- transition: unset;
543
- opacity: 1;
544
- }
545
-
546
- .DNDContainer .DroppableList .Draggable.dragged {
547
- transition: unset !important;
548
- }
549
-
550
- .DNDContainer .DroppableList.hover .Draggable {
551
- transition: transform 0.2s ease-in;
552
- }
553
-
554
- .DNDContainer .DroppableList.resetting .Draggable {
555
- transition: transform 0.1s ease-in;
556
- }
557
-
558
558
  .Checkbox {
559
559
  position: relative;
560
560
  white-space: pre;
@@ -813,6 +813,19 @@
813
813
  height: 100%;
814
814
  }
815
815
 
816
+ .CircleProgress {
817
+ width: 48px;
818
+ height: 48px;
819
+ }
820
+
821
+ .CircleProgress .line {
822
+ stroke-width: 2px;
823
+ stroke: black;
824
+ stroke-linecap: square;
825
+ fill: none;
826
+ transition: stroke-dashoffset 0.2s ease;
827
+ }
828
+
816
829
  .DatePicker {
817
830
  position: relative;
818
831
  }
@@ -930,61 +943,6 @@
930
943
  background-color: #51adf6;
931
944
  }
932
945
 
933
- .CircleProgress {
934
- width: 48px;
935
- height: 48px;
936
- }
937
-
938
- .CircleProgress .line {
939
- stroke-width: 2px;
940
- stroke: black;
941
- stroke-linecap: square;
942
- fill: none;
943
- transition: stroke-dashoffset 0.2s ease;
944
- }
945
-
946
- .DialogModal {
947
- overflow: hidden;
948
- }
949
-
950
- .DialogModal .content {
951
- top: 20vh;
952
- }
953
-
954
- .Dialog {
955
- background-color: white;
956
- min-width: 460px;
957
- max-width: 40vw;
958
- padding: 15px;
959
- }
960
-
961
- .Dialog .title {
962
- margin-bottom: 15px;
963
- padding: 20px 50px 0px 30px;
964
- font-size: 1.25rem;
965
- line-height: 2rem;
966
- font-weight: 400;
967
- letter-spacing: 0.0125em;
968
- }
969
-
970
- .Dialog .description {
971
- color: rgba(0, 0, 0, 0.54);
972
- font-size: 1rem;
973
- line-height: 1.5rem;
974
- font-weight: 400;
975
- letter-spacing: 0.03125em;
976
- margin-top: 20px;
977
- padding: 0 24px 24px;
978
- }
979
-
980
- .Dialog > div.row {
981
- margin-bottom: 15px;
982
- }
983
-
984
- .Dialog > div.row:last-child {
985
- margin-bottom: 0;
986
- }
987
-
988
946
  .DNDContainer {
989
947
  position: relative;
990
948
  }
@@ -1017,64 +975,110 @@
1017
975
  pointer-events: none;
1018
976
  }
1019
977
 
1020
- .Dropzone {
1021
- position: relative;
978
+ .ModalMenu {
979
+ position: absolute;
980
+ top: 10px;
981
+ right: 50px;
1022
982
  }
1023
983
 
1024
- .Dropzone > .overlay {
984
+ .ModalMenu .material-icons {
985
+ color: #818181;
986
+ }
987
+
988
+ .ModalMenu .Button.animated {
989
+ position: absolute;
990
+ transition: opacity 150ms ease-in, right 200ms ease-in;
991
+ opacity: 0;
992
+ right: 0;
993
+ top: 0;
994
+ }
995
+
996
+ .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
997
+ opacity: 1;
998
+ }
999
+
1000
+ .ModalMenu .Button.animated.unmounting {
1001
+ transition: opacity 100ms ease-out, right 200ms ease-out;
1002
+ }
1003
+
1004
+ .ModalMenu .Button.active {
1005
+ background: #EBEBEB;
1006
+ }
1007
+
1008
+ .ModalMenu .separator {
1009
+ height: 24px;
1010
+ width: 1px;
1011
+ background-color: #D9D9D9;
1012
+ margin-left: 4px;
1013
+ }
1014
+
1015
+ .FormUploadProgress {
1025
1016
  position: absolute;
1026
1017
  left: 0;
1027
1018
  right: 0;
1028
1019
  top: 0;
1029
1020
  bottom: 0;
1030
- background-color: #38ADC4;
1031
- z-index: 1;
1032
- opacity: 0;
1033
- transition: all 0.2s ease;
1034
- transition-delay: 100ms;
1035
- visibility: hidden;
1021
+ background-color: rgba(255, 255, 255, 0.6);
1022
+ z-index: 2;
1023
+ }
1024
+
1025
+ .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
1026
+ transition-delay: 500ms;
1027
+ }
1028
+
1029
+ .FormUploadProgress .wrapper {
1030
+ position: sticky;
1031
+ top: 40%;
1032
+ margin-top: 40%;
1033
+ margin-left: 50%;
1034
+ transform: translateX(-50%);
1036
1035
  display: flex;
1036
+ flex-flow: column;
1037
1037
  justify-content: center;
1038
1038
  align-items: center;
1039
1039
  }
1040
1040
 
1041
- .Dropzone > .overlay .drop {
1042
- border-radius: 4px;
1043
- border: 1px dashed #FFFFFF;
1041
+ .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
1044
1042
  position: absolute;
1045
- top: 18px;
1046
- left: 18px;
1047
- right: 18px;
1048
- bottom: 18px;
1043
+ width: 107px;
1044
+ height: 107px;
1045
+ top: 0;
1046
+ left: 0;
1047
+ }
1048
+
1049
+ .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
1050
+ stroke: #2196F3;
1051
+ }
1052
+
1053
+ .FormUploadProgress .wrapper > .progress {
1054
+ width: 107px;
1055
+ height: 107px;
1056
+ min-height: 107px;
1049
1057
  display: flex;
1050
1058
  justify-content: center;
1051
1059
  align-items: center;
1052
- font-weight: 500;
1053
- font-size: 18px;
1054
- color: #FFFFFF;
1055
- }
1056
-
1057
- .Dropzone.dragging > .overlay {
1058
- opacity: 0.7;
1059
- visibility: visible;
1060
- transition-delay: 0s;
1060
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1061
+ border-radius: 50%;
1062
+ background: white;
1063
+ position: relative;
1061
1064
  }
1062
1065
 
1063
- .Dropzone.dragging > * {
1064
- pointer-events: none;
1066
+ .FormUploadProgress .wrapper > .progress > .value {
1067
+ display: inline-block;
1068
+ margin-top: 5px;
1069
+ font-weight: bold;
1070
+ line-height: 16px;
1071
+ font-size: 13px;
1072
+ text-align: center;
1073
+ color: #818181;
1065
1074
  }
1066
1075
 
1067
- .Dropzone > input.file {
1068
- position: absolute;
1069
- left: 0;
1070
- right: 0;
1071
- top: 0;
1072
- bottom: 0;
1073
- width: 100%;
1074
- height: 100%;
1075
- opacity: 0;
1076
- cursor: pointer;
1077
- z-index: 1;
1076
+ .FormUploadProgress .wrapper .cancel {
1077
+ min-width: 107px;
1078
+ margin-top: 20px;
1079
+ background-color: white;
1080
+ color: #F96B5C;
1081
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1078
1082
  }
1079
1083
 
1080
1084
  .FilteredList {
@@ -1161,169 +1165,195 @@
1161
1165
  margin-bottom: 8px;
1162
1166
  }
1163
1167
 
1164
- .FormUploadProgress {
1165
- position: absolute;
1166
- left: 0;
1167
- right: 0;
1168
- top: 0;
1169
- bottom: 0;
1170
- background-color: rgba(255, 255, 255, 0.6);
1171
- z-index: 2;
1172
- }
1173
-
1174
- .FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
1175
- transition-delay: 500ms;
1168
+ .DropFileInput {
1169
+ flex-grow: 1;
1176
1170
  }
1177
1171
 
1178
- .FormUploadProgress .wrapper {
1179
- position: sticky;
1180
- top: 40%;
1181
- margin-top: 40%;
1182
- margin-left: 50%;
1183
- transform: translateX(-50%);
1172
+ .DropFileInput .Dropzone {
1173
+ border: 1px dashed #808080;
1174
+ padding: 12px;
1184
1175
  display: flex;
1185
- flex-flow: column;
1176
+ flex-flow: row nowrap;
1186
1177
  justify-content: center;
1187
1178
  align-items: center;
1179
+ color: gray;
1180
+ cursor: pointer;
1181
+ border-radius: 3px;
1182
+ font-weight: normal;
1183
+ line-height: 22px;
1184
+ font-size: 14px;
1185
+ color: #7E7E7E;
1186
+ max-width: 100%;
1187
+ word-break: break-all;
1188
+ word-break: break-word;
1188
1189
  }
1189
1190
 
1190
- .FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
1191
- position: absolute;
1192
- width: 107px;
1193
- height: 107px;
1194
- top: 0;
1195
- left: 0;
1196
- }
1197
-
1198
- .FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
1199
- stroke: #2196F3;
1191
+ .DropFileInput .Dropzone .icon.withText {
1192
+ margin-right: 10px;
1200
1193
  }
1201
1194
 
1202
- .FormUploadProgress .wrapper > .progress {
1203
- width: 107px;
1204
- height: 107px;
1205
- min-height: 107px;
1206
- display: flex;
1207
- justify-content: center;
1208
- align-items: center;
1209
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1210
- border-radius: 50%;
1211
- background: white;
1212
- position: relative;
1195
+ .DialogModal {
1196
+ overflow: hidden;
1213
1197
  }
1214
1198
 
1215
- .FormUploadProgress .wrapper > .progress > .value {
1216
- display: inline-block;
1217
- margin-top: 5px;
1218
- font-weight: bold;
1219
- line-height: 16px;
1220
- font-size: 13px;
1221
- text-align: center;
1222
- color: #818181;
1199
+ .DialogModal .content {
1200
+ top: 20vh;
1223
1201
  }
1224
1202
 
1225
- .FormUploadProgress .wrapper .cancel {
1226
- min-width: 107px;
1227
- margin-top: 20px;
1203
+ .Dialog {
1228
1204
  background-color: white;
1229
- color: #F96B5C;
1230
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
1205
+ min-width: 460px;
1206
+ max-width: 40vw;
1207
+ padding: 15px;
1231
1208
  }
1232
1209
 
1233
- .Button.FloatingActionButton {
1234
- position: absolute;
1235
- right: 16px;
1236
- bottom: 16px;
1237
- width: 56px;
1238
- height: 56px;
1239
- padding: 16px;
1240
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1210
+ .Dialog .title {
1211
+ margin-bottom: 15px;
1212
+ padding: 20px 50px 0px 30px;
1213
+ font-size: 1.25rem;
1214
+ line-height: 2rem;
1215
+ font-weight: 400;
1216
+ letter-spacing: 0.0125em;
1241
1217
  }
1242
1218
 
1243
- .Button.FloatingActionButton.raised {
1244
- transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
1219
+ .Dialog .description {
1220
+ color: rgba(0, 0, 0, 0.54);
1221
+ font-size: 1rem;
1222
+ line-height: 1.5rem;
1223
+ font-weight: 400;
1224
+ letter-spacing: 0.03125em;
1225
+ margin-top: 20px;
1226
+ padding: 0 24px 24px;
1245
1227
  }
1246
1228
 
1247
- .Button.FloatingActionButton.mini {
1248
- width: 40px;
1249
- height: 40px;
1250
- padding: 8px;
1229
+ .Dialog > div.row {
1230
+ margin-bottom: 15px;
1251
1231
  }
1252
1232
 
1253
- .Button.FloatingActionButton.hidden {
1254
- bottom: -100px;
1233
+ .Dialog > div.row:last-child {
1234
+ margin-bottom: 0;
1255
1235
  }
1256
1236
 
1257
- .Snackbar {
1258
- transform: translateX(-50%);
1259
- overflow: hidden;
1260
- background-color: #323232;
1261
- padding: 14px 24px 14px 24px;
1262
- color: #fff;
1263
- min-width: 288px;
1264
- max-width: 568px;
1265
- position: fixed;
1266
- bottom: -50px;
1267
- left: 50%;
1237
+ .Scrollable {
1238
+ max-height: 250px;
1239
+ max-width: 250px;
1240
+ padding-right: 5px;
1241
+ position: relative;
1268
1242
  display: flex;
1269
- flex-wrap: nowrap;
1270
- align-items: center;
1271
- opacity: 0;
1272
- transition: bottom 0.25s ease, opacity 0.2s ease;
1273
- border-radius: 4px;
1274
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1243
+ flex-flow: column;
1244
+ align-items: stretch;
1245
+ overflow: hidden;
1275
1246
  }
1276
1247
 
1277
- .Snackbar.shown {
1278
- bottom: 15px;
1248
+ .Scrollable:hover > .scrollbar.auto {
1249
+ transition-delay: 0s;
1279
1250
  opacity: 1;
1280
1251
  }
1281
1252
 
1282
- .Snackbar .message {
1283
- overflow: hidden;
1284
- line-height: 1.2em;
1285
- min-height: 1.2em;
1286
- max-height: 2.4em;
1287
- flex: 1;
1253
+ .Scrollable .viewport {
1254
+ overflow-y: scroll;
1255
+ overflow-x: scroll;
1256
+ max-height: 100%;
1257
+ scrollbar-width: none;
1288
1258
  }
1289
1259
 
1290
- .Snackbar .action {
1291
- text-transform: uppercase;
1292
- font-weight: bold;
1293
- margin-left: 48px;
1294
- color: #bf3727;
1260
+ .Scrollable .viewport::-webkit-scrollbar {
1261
+ display: none;
1295
1262
  }
1296
1263
 
1297
- .Snackbar .action a {
1298
- text-decoration: none;
1299
- color: #bf3727;
1264
+ .Scrollable.without-scroll-horizontal {
1265
+ max-width: unset;
1300
1266
  }
1301
1267
 
1302
- .DropFileInput {
1303
- flex-grow: 1;
1268
+ .Scrollable.undefined-horizontal {
1269
+ max-width: unset;
1304
1270
  }
1305
1271
 
1306
- .DropFileInput .Dropzone {
1307
- border: 1px dashed #808080;
1308
- padding: 12px;
1309
- display: flex;
1310
- flex-flow: row nowrap;
1311
- justify-content: center;
1312
- align-items: center;
1313
- color: gray;
1314
- cursor: pointer;
1315
- border-radius: 3px;
1316
- font-weight: normal;
1317
- line-height: 22px;
1318
- font-size: 14px;
1319
- color: #7E7E7E;
1320
- max-width: 100%;
1321
- word-break: break-all;
1322
- word-break: break-word;
1272
+ .Scrollable.without-scroll {
1273
+ padding-right: 0;
1274
+ max-height: unset;
1323
1275
  }
1324
1276
 
1325
- .DropFileInput .Dropzone .icon.withText {
1326
- margin-right: 10px;
1277
+ .Scrollable.without-scroll > .viewport {
1278
+ padding-right: 0;
1279
+ margin-right: 0;
1280
+ }
1281
+
1282
+ .Scrollable.without-scroll > .scrollbar {
1283
+ visibility: hidden;
1284
+ }
1285
+
1286
+ .Scrollable .scrollbar {
1287
+ position: absolute;
1288
+ right: 0px;
1289
+ top: 0px;
1290
+ width: 5px;
1291
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1292
+ transition-delay: 0.5s;
1293
+ z-index: 1;
1294
+ }
1295
+
1296
+ .Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
1297
+ opacity: 0;
1298
+ }
1299
+
1300
+ .Scrollable .scrollbar .thumb {
1301
+ background-color: rgba(0, 0, 0, 0.3);
1302
+ width: 5px;
1303
+ position: absolute;
1304
+ right: 0px;
1305
+ top: 0px;
1306
+ user-select: none;
1307
+ will-change: top;
1308
+ border-radius: 2px;
1309
+ }
1310
+
1311
+ .Scrollable .scrollbar .thumb:hover {
1312
+ background-color: rgba(0, 0, 0, 0.5);
1313
+ }
1314
+
1315
+ .Scrollable .scrollbar .thumb:active {
1316
+ background-color: rgba(0, 0, 0, 0.7);
1317
+ }
1318
+
1319
+ .Scrollable .scrollbar.horizontal {
1320
+ left: 0px;
1321
+ right: 0px;
1322
+ height: 5px;
1323
+ bottom: 0;
1324
+ width: unset;
1325
+ top: unset;
1326
+ }
1327
+
1328
+ .Scrollable .scrollbar.horizontal .thumb {
1329
+ height: 5px;
1330
+ left: 0px;
1331
+ bottom: 0px;
1332
+ will-change: left;
1333
+ }
1334
+
1335
+ .Button.FloatingActionButton {
1336
+ position: absolute;
1337
+ right: 16px;
1338
+ bottom: 16px;
1339
+ width: 56px;
1340
+ height: 56px;
1341
+ padding: 16px;
1342
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1343
+ }
1344
+
1345
+ .Button.FloatingActionButton.raised {
1346
+ transition: bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease-out, background-color 0.2s ease-out, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
1347
+ }
1348
+
1349
+ .Button.FloatingActionButton.mini {
1350
+ width: 40px;
1351
+ height: 40px;
1352
+ padding: 8px;
1353
+ }
1354
+
1355
+ .Button.FloatingActionButton.hidden {
1356
+ bottom: -100px;
1327
1357
  }
1328
1358
 
1329
1359
  .SpinningProgress {
@@ -1379,6 +1409,51 @@
1379
1409
  stroke-dashoffset: -53px;
1380
1410
  }
1381
1411
  }
1412
+ .Snackbar {
1413
+ transform: translateX(-50%);
1414
+ overflow: hidden;
1415
+ background-color: #323232;
1416
+ padding: 14px 24px 14px 24px;
1417
+ color: #fff;
1418
+ min-width: 288px;
1419
+ max-width: 568px;
1420
+ position: fixed;
1421
+ bottom: -50px;
1422
+ left: 50%;
1423
+ display: flex;
1424
+ flex-wrap: nowrap;
1425
+ align-items: center;
1426
+ opacity: 0;
1427
+ transition: bottom 0.25s ease, opacity 0.2s ease;
1428
+ border-radius: 4px;
1429
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1430
+ }
1431
+
1432
+ .Snackbar.shown {
1433
+ bottom: 15px;
1434
+ opacity: 1;
1435
+ }
1436
+
1437
+ .Snackbar .message {
1438
+ overflow: hidden;
1439
+ line-height: 1.2em;
1440
+ min-height: 1.2em;
1441
+ max-height: 2.4em;
1442
+ flex: 1;
1443
+ }
1444
+
1445
+ .Snackbar .action {
1446
+ text-transform: uppercase;
1447
+ font-weight: bold;
1448
+ margin-left: 48px;
1449
+ color: #bf3727;
1450
+ }
1451
+
1452
+ .Snackbar .action a {
1453
+ text-decoration: none;
1454
+ color: #bf3727;
1455
+ }
1456
+
1382
1457
  .TextField {
1383
1458
  position: relative;
1384
1459
  width: 100%;
@@ -1522,6 +1597,88 @@
1522
1597
  animation-name: shake;
1523
1598
  }
1524
1599
 
1600
+ .Switch {
1601
+ display: inline-flex;
1602
+ padding-top: 5px;
1603
+ }
1604
+
1605
+ .Switch .switch-input {
1606
+ display: none;
1607
+ }
1608
+
1609
+ .Switch .switch-label {
1610
+ position: relative;
1611
+ display: inline-flex;
1612
+ align-items: center;
1613
+ min-width: 38px;
1614
+ height: 24px;
1615
+ cursor: pointer;
1616
+ font-weight: 500;
1617
+ text-align: left;
1618
+ user-select: none;
1619
+ margin: 0;
1620
+ padding: 0;
1621
+ padding-left: 44px;
1622
+ box-sizing: border-box;
1623
+ }
1624
+
1625
+ .Switch .switch-label:before, .Switch .switch-label:after {
1626
+ content: "";
1627
+ box-sizing: border-box;
1628
+ position: absolute;
1629
+ margin: 0;
1630
+ outline: 0;
1631
+ top: 50%;
1632
+ transform: translate(0, -50%);
1633
+ transition: all 0.3s ease;
1634
+ }
1635
+
1636
+ .Switch .switch-label:before {
1637
+ left: 1px;
1638
+ width: 34px;
1639
+ height: 14px;
1640
+ background-color: #9E9E9E;
1641
+ border-radius: 8px;
1642
+ }
1643
+
1644
+ .Switch .switch-label:after {
1645
+ left: 0;
1646
+ width: 20px;
1647
+ height: 20px;
1648
+ background-color: #FAFAFA;
1649
+ border-radius: 50%;
1650
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
1651
+ }
1652
+
1653
+ .Switch .switch-label .toggle--on {
1654
+ display: none;
1655
+ }
1656
+
1657
+ .Switch .switch-label .toggle--off {
1658
+ display: inline-block;
1659
+ }
1660
+
1661
+ .Switch .switch-label .label {
1662
+ margin-right: 5px;
1663
+ }
1664
+
1665
+ .Switch .switch-input:checked + .switch-label:before {
1666
+ background-color: #A5D6A7;
1667
+ }
1668
+
1669
+ .Switch .switch-input:checked + .switch-label:after {
1670
+ background-color: #4CAF50;
1671
+ transform: translate(80%, -50%);
1672
+ }
1673
+
1674
+ .Switch .switch-input:checked + .switch-label .toggle--on {
1675
+ display: inline-block;
1676
+ }
1677
+
1678
+ .Switch .switch-input:checked + .switch-label .toggle--off {
1679
+ display: none;
1680
+ }
1681
+
1525
1682
  .Modal {
1526
1683
  display: block;
1527
1684
  position: fixed;
@@ -1586,47 +1743,78 @@
1586
1743
  min-height: 10px;
1587
1744
  }
1588
1745
 
1589
- .Modal > .content > .Button.close {
1590
- top: 10px;
1591
- right: 10px;
1746
+ .Modal > .content > .Button.close {
1747
+ top: 10px;
1748
+ right: 10px;
1749
+ position: absolute;
1750
+ }
1751
+
1752
+ .Dropzone {
1753
+ position: relative;
1754
+ }
1755
+
1756
+ .Dropzone > .overlay {
1757
+ position: absolute;
1758
+ left: 0;
1759
+ right: 0;
1760
+ top: 0;
1761
+ bottom: 0;
1762
+ background-color: #38ADC4;
1763
+ z-index: 1;
1764
+ opacity: 0;
1765
+ transition: all 0.2s ease;
1766
+ transition-delay: 100ms;
1767
+ visibility: hidden;
1768
+ display: flex;
1769
+ justify-content: center;
1770
+ align-items: center;
1771
+ }
1772
+
1773
+ .Dropzone > .overlay .drop {
1774
+ border-radius: 4px;
1775
+ border: 1px dashed #FFFFFF;
1592
1776
  position: absolute;
1777
+ top: 18px;
1778
+ left: 18px;
1779
+ right: 18px;
1780
+ bottom: 18px;
1781
+ display: flex;
1782
+ justify-content: center;
1783
+ align-items: center;
1784
+ font-weight: 500;
1785
+ font-size: 18px;
1786
+ color: #FFFFFF;
1593
1787
  }
1594
1788
 
1595
- .ModalMenu {
1596
- position: absolute;
1597
- top: 10px;
1598
- right: 50px;
1789
+ .Dropzone.dragging > .overlay {
1790
+ opacity: 0.7;
1791
+ visibility: visible;
1792
+ transition-delay: 0s;
1599
1793
  }
1600
1794
 
1601
- .ModalMenu .material-icons {
1602
- color: #818181;
1795
+ .Dropzone.dragging > * {
1796
+ pointer-events: none;
1603
1797
  }
1604
1798
 
1605
- .ModalMenu .Button.animated {
1799
+ .Dropzone > input.file {
1606
1800
  position: absolute;
1607
- transition: opacity 150ms ease-in, right 200ms ease-in;
1608
- opacity: 0;
1801
+ left: 0;
1609
1802
  right: 0;
1610
1803
  top: 0;
1804
+ bottom: 0;
1805
+ width: 100%;
1806
+ height: 100%;
1807
+ opacity: 0;
1808
+ cursor: pointer;
1809
+ z-index: 1;
1611
1810
  }
1612
1811
 
1613
- .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1614
- opacity: 1;
1615
- }
1616
-
1617
- .ModalMenu .Button.animated.unmounting {
1618
- transition: opacity 100ms ease-out, right 200ms ease-out;
1619
- }
1620
-
1621
- .ModalMenu .Button.active {
1622
- background: #EBEBEB;
1812
+ .ScrollableTable .Scrollable .scrollbar {
1813
+ top: 56px;
1623
1814
  }
1624
1815
 
1625
- .ModalMenu .separator {
1626
- height: 24px;
1627
- width: 1px;
1628
- background-color: #D9D9D9;
1629
- margin-left: 4px;
1816
+ .ScrollableTable .Table {
1817
+ position: static;
1630
1818
  }
1631
1819
 
1632
1820
  .Table {
@@ -1749,192 +1937,4 @@
1749
1937
 
1750
1938
  .Table .editable > .AutocompleteSelect > .selected > .DummyChild {
1751
1939
  margin: 0;
1752
- }
1753
-
1754
- .Scrollable {
1755
- max-height: 250px;
1756
- max-width: 250px;
1757
- padding-right: 5px;
1758
- position: relative;
1759
- display: flex;
1760
- flex-flow: column;
1761
- align-items: stretch;
1762
- overflow: hidden;
1763
- }
1764
-
1765
- .Scrollable:hover > .scrollbar.auto {
1766
- transition-delay: 0s;
1767
- opacity: 1;
1768
- }
1769
-
1770
- .Scrollable .viewport {
1771
- overflow-y: scroll;
1772
- overflow-x: scroll;
1773
- max-height: 100%;
1774
- scrollbar-width: none;
1775
- }
1776
-
1777
- .Scrollable .viewport::-webkit-scrollbar {
1778
- display: none;
1779
- }
1780
-
1781
- .Scrollable.without-scroll-horizontal {
1782
- max-width: unset;
1783
- }
1784
-
1785
- .Scrollable.undefined-horizontal {
1786
- max-width: unset;
1787
- }
1788
-
1789
- .Scrollable.without-scroll {
1790
- padding-right: 0;
1791
- max-height: unset;
1792
- }
1793
-
1794
- .Scrollable.without-scroll > .viewport {
1795
- padding-right: 0;
1796
- margin-right: 0;
1797
- }
1798
-
1799
- .Scrollable.without-scroll > .scrollbar {
1800
- visibility: hidden;
1801
- }
1802
-
1803
- .Scrollable .scrollbar {
1804
- position: absolute;
1805
- right: 0px;
1806
- top: 0px;
1807
- width: 5px;
1808
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1809
- transition-delay: 0.5s;
1810
- z-index: 1;
1811
- }
1812
-
1813
- .Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
1814
- opacity: 0;
1815
- }
1816
-
1817
- .Scrollable .scrollbar .thumb {
1818
- background-color: rgba(0, 0, 0, 0.3);
1819
- width: 5px;
1820
- position: absolute;
1821
- right: 0px;
1822
- top: 0px;
1823
- user-select: none;
1824
- will-change: top;
1825
- border-radius: 2px;
1826
- }
1827
-
1828
- .Scrollable .scrollbar .thumb:hover {
1829
- background-color: rgba(0, 0, 0, 0.5);
1830
- }
1831
-
1832
- .Scrollable .scrollbar .thumb:active {
1833
- background-color: rgba(0, 0, 0, 0.7);
1834
- }
1835
-
1836
- .Scrollable .scrollbar.horizontal {
1837
- left: 0px;
1838
- right: 0px;
1839
- height: 5px;
1840
- bottom: 0;
1841
- width: unset;
1842
- top: unset;
1843
- }
1844
-
1845
- .Scrollable .scrollbar.horizontal .thumb {
1846
- height: 5px;
1847
- left: 0px;
1848
- bottom: 0px;
1849
- will-change: left;
1850
- }
1851
-
1852
- .ScrollableTable .Scrollable .scrollbar {
1853
- top: 56px;
1854
- }
1855
-
1856
- .ScrollableTable .Table {
1857
- position: static;
1858
- }
1859
-
1860
- .Switch {
1861
- display: inline-flex;
1862
- padding-top: 5px;
1863
- }
1864
-
1865
- .Switch .switch-input {
1866
- display: none;
1867
- }
1868
-
1869
- .Switch .switch-label {
1870
- position: relative;
1871
- display: inline-flex;
1872
- align-items: center;
1873
- min-width: 38px;
1874
- height: 24px;
1875
- cursor: pointer;
1876
- font-weight: 500;
1877
- text-align: left;
1878
- user-select: none;
1879
- margin: 0;
1880
- padding: 0;
1881
- padding-left: 44px;
1882
- box-sizing: border-box;
1883
- }
1884
-
1885
- .Switch .switch-label:before, .Switch .switch-label:after {
1886
- content: "";
1887
- box-sizing: border-box;
1888
- position: absolute;
1889
- margin: 0;
1890
- outline: 0;
1891
- top: 50%;
1892
- transform: translate(0, -50%);
1893
- transition: all 0.3s ease;
1894
- }
1895
-
1896
- .Switch .switch-label:before {
1897
- left: 1px;
1898
- width: 34px;
1899
- height: 14px;
1900
- background-color: #9E9E9E;
1901
- border-radius: 8px;
1902
- }
1903
-
1904
- .Switch .switch-label:after {
1905
- left: 0;
1906
- width: 20px;
1907
- height: 20px;
1908
- background-color: #FAFAFA;
1909
- border-radius: 50%;
1910
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
1911
- }
1912
-
1913
- .Switch .switch-label .toggle--on {
1914
- display: none;
1915
- }
1916
-
1917
- .Switch .switch-label .toggle--off {
1918
- display: inline-block;
1919
- }
1920
-
1921
- .Switch .switch-label .label {
1922
- margin-right: 5px;
1923
- }
1924
-
1925
- .Switch .switch-input:checked + .switch-label:before {
1926
- background-color: #A5D6A7;
1927
- }
1928
-
1929
- .Switch .switch-input:checked + .switch-label:after {
1930
- background-color: #4CAF50;
1931
- transform: translate(80%, -50%);
1932
- }
1933
-
1934
- .Switch .switch-input:checked + .switch-label .toggle--on {
1935
- display: inline-block;
1936
- }
1937
-
1938
- .Switch .switch-input:checked + .switch-label .toggle--off {
1939
- display: none;
1940
1940
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-ui-basics",
3
- "version": "0.0.242",
3
+ "version": "0.0.243",
4
4
  "description": "",
5
5
  "module": "index.js",
6
6
  "_main": "index.cjs.js",
package/src/Modal.tsx CHANGED
@@ -72,10 +72,11 @@ class Modal extends AbstractModal {
72
72
  const props = propsGetter(that);
73
73
 
74
74
  const beforeClose = (e) => {
75
- stopPropagation(e);
76
75
  const bc = getBeforeClose() || props().beforeClose;
77
- if (!bc || bc(that.close, e))
76
+ if (!bc || bc(that.close, e)) {
77
+ stopPropagation(e);
78
78
  that.close();
79
+ }
79
80
  };
80
81
 
81
82
  const shouldClose = (e) => {