react-ui-basics 0.0.215 → 0.0.216

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/bundle.css CHANGED
@@ -459,15 +459,6 @@
459
459
  border: 0;
460
460
  }
461
461
 
462
- .animated {
463
- transition: opacity 250ms ease;
464
- opacity: 0;
465
- }
466
-
467
- .animated.mounting, .animated.mounted {
468
- opacity: 1;
469
- }
470
-
471
462
  .FilteredList {
472
463
  max-height: 250px;
473
464
  position: relative;
@@ -553,145 +544,13 @@
553
544
  margin-bottom: 8px;
554
545
  }
555
546
 
556
- .DialogModal {
557
- overflow: hidden;
558
- }
559
-
560
- .DialogModal .content {
561
- top: 20vh;
562
- }
563
-
564
- .Dialog {
565
- background-color: white;
566
- min-width: 460px;
567
- max-width: 40vw;
568
- padding: 15px;
569
- }
570
-
571
- .Dialog .title {
572
- margin-bottom: 15px;
573
- padding: 20px 50px 0px 30px;
574
- font-size: 1.25rem;
575
- line-height: 2rem;
576
- font-weight: 400;
577
- letter-spacing: 0.0125em;
578
- }
579
-
580
- .Dialog .description {
581
- color: rgba(0, 0, 0, 0.54);
582
- font-size: 1rem;
583
- line-height: 1.5rem;
584
- font-weight: 400;
585
- letter-spacing: 0.03125em;
586
- margin-top: 20px;
587
- padding: 0 24px 24px;
588
- }
589
-
590
- .Dialog > div.row {
591
- margin-bottom: 15px;
592
- }
593
-
594
- .Dialog > div.row:last-child {
595
- margin-bottom: 0;
596
- }
597
-
598
- .Scrollable {
599
- max-height: 250px;
600
- max-width: 250px;
601
- padding-right: 5px;
602
- position: relative;
603
- display: flex;
604
- flex-flow: column;
605
- align-items: stretch;
606
- overflow: hidden;
607
- }
608
-
609
- .Scrollable:hover > .scrollbar.auto {
610
- transition-delay: 0s;
611
- opacity: 1;
612
- }
613
-
614
- .Scrollable .viewport {
615
- overflow-y: scroll;
616
- overflow-x: scroll;
617
- max-height: 100%;
618
- scroll-behavior: smooth;
619
- scrollbar-width: none;
620
- }
621
-
622
- .Scrollable .viewport::-webkit-scrollbar {
623
- display: none;
624
- }
625
-
626
- .Scrollable.without-scroll-horizontal {
627
- max-width: unset;
628
- }
629
-
630
- .Scrollable.undefined-horizontal {
631
- max-width: unset;
632
- }
633
-
634
- .Scrollable.without-scroll {
635
- padding-right: 0;
636
- max-height: unset;
637
- }
638
-
639
- .Scrollable.without-scroll > .viewport {
640
- padding-right: 0;
641
- margin-right: 0;
642
- }
643
-
644
- .Scrollable.without-scroll > .scrollbar {
645
- visibility: hidden;
646
- }
647
-
648
- .Scrollable .scrollbar {
649
- position: absolute;
650
- right: 0px;
651
- top: 0px;
652
- width: 5px;
653
- transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
654
- transition-delay: 0.5s;
655
- z-index: 1;
656
- }
657
-
658
- .Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
547
+ .animated {
548
+ transition: opacity 250ms ease;
659
549
  opacity: 0;
660
550
  }
661
551
 
662
- .Scrollable .scrollbar .thumb {
663
- background-color: rgba(0, 0, 0, 0.3);
664
- width: 5px;
665
- position: absolute;
666
- right: 0px;
667
- top: 0px;
668
- user-select: none;
669
- will-change: top;
670
- border-radius: 2px;
671
- }
672
-
673
- .Scrollable .scrollbar .thumb:hover {
674
- background-color: rgba(0, 0, 0, 0.5);
675
- }
676
-
677
- .Scrollable .scrollbar .thumb:active {
678
- background-color: rgba(0, 0, 0, 0.7);
679
- }
680
-
681
- .Scrollable .scrollbar.horizontal {
682
- left: 0px;
683
- right: 0px;
684
- height: 5px;
685
- bottom: 0;
686
- width: unset;
687
- top: unset;
688
- }
689
-
690
- .Scrollable .scrollbar.horizontal .thumb {
691
- height: 5px;
692
- left: 0px;
693
- bottom: 0px;
694
- will-change: left;
552
+ .animated.mounting, .animated.mounted {
553
+ opacity: 1;
695
554
  }
696
555
 
697
556
  .TextField {
@@ -837,6 +696,48 @@
837
696
  animation-name: shake;
838
697
  }
839
698
 
699
+ .DialogModal {
700
+ overflow: hidden;
701
+ }
702
+
703
+ .DialogModal .content {
704
+ top: 20vh;
705
+ }
706
+
707
+ .Dialog {
708
+ background-color: white;
709
+ min-width: 460px;
710
+ max-width: 40vw;
711
+ padding: 15px;
712
+ }
713
+
714
+ .Dialog .title {
715
+ margin-bottom: 15px;
716
+ padding: 20px 50px 0px 30px;
717
+ font-size: 1.25rem;
718
+ line-height: 2rem;
719
+ font-weight: 400;
720
+ letter-spacing: 0.0125em;
721
+ }
722
+
723
+ .Dialog .description {
724
+ color: rgba(0, 0, 0, 0.54);
725
+ font-size: 1rem;
726
+ line-height: 1.5rem;
727
+ font-weight: 400;
728
+ letter-spacing: 0.03125em;
729
+ margin-top: 20px;
730
+ padding: 0 24px 24px;
731
+ }
732
+
733
+ .Dialog > div.row {
734
+ margin-bottom: 15px;
735
+ }
736
+
737
+ .Dialog > div.row:last-child {
738
+ margin-bottom: 0;
739
+ }
740
+
840
741
  .FormUploadProgress {
841
742
  position: absolute;
842
743
  left: 0;
@@ -994,6 +895,105 @@
994
895
  transition: transform 0.1s ease-in;
995
896
  }
996
897
 
898
+ .Scrollable {
899
+ max-height: 250px;
900
+ max-width: 250px;
901
+ padding-right: 5px;
902
+ position: relative;
903
+ display: flex;
904
+ flex-flow: column;
905
+ align-items: stretch;
906
+ overflow: hidden;
907
+ }
908
+
909
+ .Scrollable:hover > .scrollbar.auto {
910
+ transition-delay: 0s;
911
+ opacity: 1;
912
+ }
913
+
914
+ .Scrollable .viewport {
915
+ overflow-y: scroll;
916
+ overflow-x: scroll;
917
+ max-height: 100%;
918
+ scroll-behavior: smooth;
919
+ scrollbar-width: none;
920
+ }
921
+
922
+ .Scrollable .viewport::-webkit-scrollbar {
923
+ display: none;
924
+ }
925
+
926
+ .Scrollable.without-scroll-horizontal {
927
+ max-width: unset;
928
+ }
929
+
930
+ .Scrollable.undefined-horizontal {
931
+ max-width: unset;
932
+ }
933
+
934
+ .Scrollable.without-scroll {
935
+ padding-right: 0;
936
+ max-height: unset;
937
+ }
938
+
939
+ .Scrollable.without-scroll > .viewport {
940
+ padding-right: 0;
941
+ margin-right: 0;
942
+ }
943
+
944
+ .Scrollable.without-scroll > .scrollbar {
945
+ visibility: hidden;
946
+ }
947
+
948
+ .Scrollable .scrollbar {
949
+ position: absolute;
950
+ right: 0px;
951
+ top: 0px;
952
+ width: 5px;
953
+ transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
954
+ transition-delay: 0.5s;
955
+ z-index: 1;
956
+ }
957
+
958
+ .Scrollable .scrollbar.auto, .Scrollable .scrollbar.hidden {
959
+ opacity: 0;
960
+ }
961
+
962
+ .Scrollable .scrollbar .thumb {
963
+ background-color: rgba(0, 0, 0, 0.3);
964
+ width: 5px;
965
+ position: absolute;
966
+ right: 0px;
967
+ top: 0px;
968
+ user-select: none;
969
+ will-change: top;
970
+ border-radius: 2px;
971
+ }
972
+
973
+ .Scrollable .scrollbar .thumb:hover {
974
+ background-color: rgba(0, 0, 0, 0.5);
975
+ }
976
+
977
+ .Scrollable .scrollbar .thumb:active {
978
+ background-color: rgba(0, 0, 0, 0.7);
979
+ }
980
+
981
+ .Scrollable .scrollbar.horizontal {
982
+ left: 0px;
983
+ right: 0px;
984
+ height: 5px;
985
+ bottom: 0;
986
+ width: unset;
987
+ top: unset;
988
+ }
989
+
990
+ .Scrollable .scrollbar.horizontal .thumb {
991
+ height: 5px;
992
+ left: 0px;
993
+ bottom: 0px;
994
+ will-change: left;
995
+ }
996
+
997
997
  .ImageGallery {
998
998
  position: fixed;
999
999
  top: 0;
@@ -1254,6 +1254,19 @@
1254
1254
  height: 100%;
1255
1255
  }
1256
1256
 
1257
+ .CircleProgress {
1258
+ width: 48px;
1259
+ height: 48px;
1260
+ }
1261
+
1262
+ .CircleProgress .line {
1263
+ stroke-width: 2px;
1264
+ stroke: black;
1265
+ stroke-linecap: square;
1266
+ fill: none;
1267
+ transition: stroke-dashoffset 0.2s ease;
1268
+ }
1269
+
1257
1270
  .Checkbox {
1258
1271
  position: relative;
1259
1272
  white-space: pre;
@@ -1290,107 +1303,35 @@
1290
1303
  .Checkbox input[type=checkbox] {
1291
1304
  outline: 0;
1292
1305
  margin-right: 10px;
1293
- visibility: hidden;
1294
- }
1295
-
1296
- .Checkbox input[type=checkbox]:checked + label:before {
1297
- background: #4AC263;
1298
- border: none;
1299
- }
1300
-
1301
- .Checkbox input[type=checkbox]:checked + label:after {
1302
- transform: rotate(-45deg);
1303
- top: 6px;
1304
- left: 4px;
1305
- width: 12px;
1306
- height: 6px;
1307
- border: 2px solid #fff;
1308
- border-top-style: none;
1309
- border-right-style: none;
1310
- }
1311
-
1312
- .Checkbox input[type=checkbox]:disabled + label {
1313
- color: gray;
1314
- }
1315
-
1316
- .Checkbox input[type=checkbox]:disabled + label:before {
1317
- border-color: rgba(0, 0, 0, 0.26);
1318
- }
1319
-
1320
- .Checkbox input[type=checkbox]:disabled:checked + label:before {
1321
- background: rgba(0, 0, 0, 0.26);
1322
- }
1323
-
1324
- .CircleProgress {
1325
- width: 48px;
1326
- height: 48px;
1327
- }
1328
-
1329
- .CircleProgress .line {
1330
- stroke-width: 2px;
1331
- stroke: black;
1332
- stroke-linecap: square;
1333
- fill: none;
1334
- transition: stroke-dashoffset 0.2s ease;
1335
- }
1336
-
1337
- .DNDContainer {
1338
- position: relative;
1339
- }
1340
-
1341
- .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
1342
- cursor: pointer;
1343
- }
1344
-
1345
- .DNDContainer .Draggable.placeholder {
1346
- opacity: 0.2;
1347
- }
1348
-
1349
- .DNDContainer .Draggable.copy {
1350
- position: absolute;
1351
- box-sizing: border-box;
1352
- will-change: transform;
1353
- opacity: 0;
1306
+ visibility: hidden;
1354
1307
  }
1355
1308
 
1356
- .DNDContainer .Draggable.dragged {
1357
- z-index: 10;
1309
+ .Checkbox input[type=checkbox]:checked + label:before {
1310
+ background: #4AC263;
1311
+ border: none;
1358
1312
  }
1359
1313
 
1360
- .DNDContainer .overlay {
1361
- position: absolute;
1362
- top: 0;
1363
- left: 0;
1364
- right: 0;
1365
- bottom: 0;
1366
- pointer-events: none;
1314
+ .Checkbox input[type=checkbox]:checked + label:after {
1315
+ transform: rotate(-45deg);
1316
+ top: 6px;
1317
+ left: 4px;
1318
+ width: 12px;
1319
+ height: 6px;
1320
+ border: 2px solid #fff;
1321
+ border-top-style: none;
1322
+ border-right-style: none;
1367
1323
  }
1368
1324
 
1369
- .DropFileInput {
1370
- flex-grow: 1;
1325
+ .Checkbox input[type=checkbox]:disabled + label {
1326
+ color: gray;
1371
1327
  }
1372
1328
 
1373
- .DropFileInput .Dropzone {
1374
- border: 1px dashed #808080;
1375
- padding: 12px;
1376
- display: flex;
1377
- flex-flow: row nowrap;
1378
- justify-content: center;
1379
- align-items: center;
1380
- color: gray;
1381
- cursor: pointer;
1382
- border-radius: 3px;
1383
- font-weight: normal;
1384
- line-height: 22px;
1385
- font-size: 14px;
1386
- color: #7E7E7E;
1387
- max-width: 100%;
1388
- word-break: break-all;
1389
- word-break: break-word;
1329
+ .Checkbox input[type=checkbox]:disabled + label:before {
1330
+ border-color: rgba(0, 0, 0, 0.26);
1390
1331
  }
1391
1332
 
1392
- .DropFileInput .Dropzone .icon.withText {
1393
- margin-right: 10px;
1333
+ .Checkbox input[type=checkbox]:disabled:checked + label:before {
1334
+ background: rgba(0, 0, 0, 0.26);
1394
1335
  }
1395
1336
 
1396
1337
  .DatePicker {
@@ -1510,6 +1451,38 @@
1510
1451
  background-color: #51adf6;
1511
1452
  }
1512
1453
 
1454
+ .DNDContainer {
1455
+ position: relative;
1456
+ }
1457
+
1458
+ .DNDContainer .Draggable[draggable=true], .DNDContainer .Draggable [draggable=true] {
1459
+ cursor: pointer;
1460
+ }
1461
+
1462
+ .DNDContainer .Draggable.placeholder {
1463
+ opacity: 0.2;
1464
+ }
1465
+
1466
+ .DNDContainer .Draggable.copy {
1467
+ position: absolute;
1468
+ box-sizing: border-box;
1469
+ will-change: transform;
1470
+ opacity: 0;
1471
+ }
1472
+
1473
+ .DNDContainer .Draggable.dragged {
1474
+ z-index: 10;
1475
+ }
1476
+
1477
+ .DNDContainer .overlay {
1478
+ position: absolute;
1479
+ top: 0;
1480
+ left: 0;
1481
+ right: 0;
1482
+ bottom: 0;
1483
+ pointer-events: none;
1484
+ }
1485
+
1513
1486
  .Dropzone {
1514
1487
  position: relative;
1515
1488
  }
@@ -1570,51 +1543,6 @@
1570
1543
  z-index: 1;
1571
1544
  }
1572
1545
 
1573
- .Snackbar {
1574
- transform: translateX(-50%);
1575
- overflow: hidden;
1576
- background-color: #323232;
1577
- padding: 14px 24px 14px 24px;
1578
- color: #fff;
1579
- min-width: 288px;
1580
- max-width: 568px;
1581
- position: fixed;
1582
- bottom: -50px;
1583
- left: 50%;
1584
- display: flex;
1585
- flex-wrap: nowrap;
1586
- align-items: center;
1587
- opacity: 0;
1588
- transition: bottom 0.25s ease, opacity 0.2s ease;
1589
- border-radius: 4px;
1590
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1591
- }
1592
-
1593
- .Snackbar.shown {
1594
- bottom: 15px;
1595
- opacity: 1;
1596
- }
1597
-
1598
- .Snackbar .message {
1599
- overflow: hidden;
1600
- line-height: 1.2em;
1601
- min-height: 1.2em;
1602
- max-height: 2.4em;
1603
- flex: 1;
1604
- }
1605
-
1606
- .Snackbar .action {
1607
- text-transform: uppercase;
1608
- font-weight: bold;
1609
- margin-left: 48px;
1610
- color: #bf3727;
1611
- }
1612
-
1613
- .Snackbar .action a {
1614
- text-decoration: none;
1615
- color: #bf3727;
1616
- }
1617
-
1618
1546
  .Button.FloatingActionButton {
1619
1547
  position: absolute;
1620
1548
  right: 16px;
@@ -1639,6 +1567,70 @@
1639
1567
  bottom: -100px;
1640
1568
  }
1641
1569
 
1570
+ .ModalMenu {
1571
+ position: absolute;
1572
+ top: 10px;
1573
+ right: 50px;
1574
+ }
1575
+
1576
+ .ModalMenu .material-icons {
1577
+ color: #818181;
1578
+ }
1579
+
1580
+ .ModalMenu .Button.animated {
1581
+ position: absolute;
1582
+ transition: opacity 150ms ease-in, right 200ms ease-in;
1583
+ opacity: 0;
1584
+ right: 0;
1585
+ top: 0;
1586
+ }
1587
+
1588
+ .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1589
+ opacity: 1;
1590
+ }
1591
+
1592
+ .ModalMenu .Button.animated.unmounting {
1593
+ transition: opacity 100ms ease-out, right 200ms ease-out;
1594
+ }
1595
+
1596
+ .ModalMenu .Button.active {
1597
+ background: #EBEBEB;
1598
+ }
1599
+
1600
+ .ModalMenu .separator {
1601
+ height: 24px;
1602
+ width: 1px;
1603
+ background-color: #D9D9D9;
1604
+ margin-left: 4px;
1605
+ }
1606
+
1607
+ .DropFileInput {
1608
+ flex-grow: 1;
1609
+ }
1610
+
1611
+ .DropFileInput .Dropzone {
1612
+ border: 1px dashed #808080;
1613
+ padding: 12px;
1614
+ display: flex;
1615
+ flex-flow: row nowrap;
1616
+ justify-content: center;
1617
+ align-items: center;
1618
+ color: gray;
1619
+ cursor: pointer;
1620
+ border-radius: 3px;
1621
+ font-weight: normal;
1622
+ line-height: 22px;
1623
+ font-size: 14px;
1624
+ color: #7E7E7E;
1625
+ max-width: 100%;
1626
+ word-break: break-all;
1627
+ word-break: break-word;
1628
+ }
1629
+
1630
+ .DropFileInput .Dropzone .icon.withText {
1631
+ margin-right: 10px;
1632
+ }
1633
+
1642
1634
  .SpinningProgress {
1643
1635
  width: 48px;
1644
1636
  height: 48px;
@@ -1692,41 +1684,57 @@
1692
1684
  stroke-dashoffset: -53px;
1693
1685
  }
1694
1686
  }
1695
- .ModalMenu {
1696
- position: absolute;
1697
- top: 10px;
1698
- right: 50px;
1687
+ .ScrollableTable .Scrollable .scrollbar {
1688
+ top: 56px;
1699
1689
  }
1700
1690
 
1701
- .ModalMenu .material-icons {
1702
- color: #818181;
1691
+ .ScrollableTable .Table {
1692
+ position: static;
1703
1693
  }
1704
1694
 
1705
- .ModalMenu .Button.animated {
1706
- position: absolute;
1707
- transition: opacity 150ms ease-in, right 200ms ease-in;
1695
+ .Snackbar {
1696
+ transform: translateX(-50%);
1697
+ overflow: hidden;
1698
+ background-color: #323232;
1699
+ padding: 14px 24px 14px 24px;
1700
+ color: #fff;
1701
+ min-width: 288px;
1702
+ max-width: 568px;
1703
+ position: fixed;
1704
+ bottom: -50px;
1705
+ left: 50%;
1706
+ display: flex;
1707
+ flex-wrap: nowrap;
1708
+ align-items: center;
1708
1709
  opacity: 0;
1709
- right: 0;
1710
- top: 0;
1710
+ transition: bottom 0.25s ease, opacity 0.2s ease;
1711
+ border-radius: 4px;
1712
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
1711
1713
  }
1712
1714
 
1713
- .ModalMenu .Button.animated.mounting, .ModalMenu .Button.animated.mounted {
1715
+ .Snackbar.shown {
1716
+ bottom: 15px;
1714
1717
  opacity: 1;
1715
1718
  }
1716
1719
 
1717
- .ModalMenu .Button.animated.unmounting {
1718
- transition: opacity 100ms ease-out, right 200ms ease-out;
1720
+ .Snackbar .message {
1721
+ overflow: hidden;
1722
+ line-height: 1.2em;
1723
+ min-height: 1.2em;
1724
+ max-height: 2.4em;
1725
+ flex: 1;
1719
1726
  }
1720
1727
 
1721
- .ModalMenu .Button.active {
1722
- background: #EBEBEB;
1728
+ .Snackbar .action {
1729
+ text-transform: uppercase;
1730
+ font-weight: bold;
1731
+ margin-left: 48px;
1732
+ color: #bf3727;
1723
1733
  }
1724
1734
 
1725
- .ModalMenu .separator {
1726
- height: 24px;
1727
- width: 1px;
1728
- background-color: #D9D9D9;
1729
- margin-left: 4px;
1735
+ .Snackbar .action a {
1736
+ text-decoration: none;
1737
+ color: #bf3727;
1730
1738
  }
1731
1739
 
1732
1740
  .Switch {
@@ -1931,12 +1939,4 @@
1931
1939
 
1932
1940
  .Table .editable > .AutocompleteSelect > .selected > .DummyChild {
1933
1941
  margin: 0;
1934
- }
1935
-
1936
- .ScrollableTable .Scrollable .scrollbar {
1937
- top: 56px;
1938
- }
1939
-
1940
- .ScrollableTable .Table {
1941
- position: static;
1942
1942
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-ui-basics",
3
- "version": "0.0.215",
3
+ "version": "0.0.216",
4
4
  "description": "",
5
5
  "module": "index.js",
6
6
  "_main": "index.cjs.js",
@@ -2,70 +2,71 @@ import {useEffect, useState} from "react";
2
2
  import {createProxy} from "./ProxyTools";
3
3
  import {isFunction, isObject} from "../Tools";
4
4
 
5
- interface Stores {
6
- [index: number]: any
7
- }
8
-
9
- let STORES: Stores = {}
10
- let COUNTER = 0
5
+ const STORES = new Map<Symbol, any>()
11
6
 
12
7
  type Setter<T> = (oldState: T) => T | void;
8
+ type ListenerFn = () => void;
9
+ type UnsubscribeFn = () => void;
13
10
 
14
11
  abstract class AbstractStore<T> {
15
12
  get: () => T;
16
13
  set: (setter: T | Partial<T> | (Setter<T>)) => void;
17
14
  reset: () => void;
18
- subscribe: (fn: () => void) => void;
19
- unsubscribe: (fn: () => void) => void;
15
+ /**
16
+ * Return unsubscribe function
17
+ *
18
+ * @returns unsubscribe function.
19
+ */
20
+ subscribe: (fn: ListenerFn) => UnsubscribeFn;
20
21
  toString: () => string;
21
22
  }
22
23
 
24
+
23
25
  export class Store<T> extends AbstractStore<T> {
24
26
 
25
27
  constructor(initialState: T, name?: string) {
26
28
  super()
27
29
  let that = this;
28
- let listeners: Array<() => void> = []
29
- let index = '' + COUNTER++;
30
+ let listeners: Map<Symbol, ListenerFn> = new Map<Symbol, () => void>()
31
+ let index = Symbol();
30
32
  let runListeners = () => {
31
- listeners.forEach(fn => fn())
33
+ for (let listener of listeners.values()) {
34
+ listener()
35
+ }
32
36
  };
33
37
 
34
- STORES[index] = initialState
38
+ let get = (): T => STORES.get(index);
39
+ let reset = () => {
40
+ STORES.set(index, initialState)
41
+ runListeners();
42
+ };
43
+ reset()
35
44
 
36
- that.unsubscribe = (fn: () => void) => {
37
- let i = listeners.indexOf(fn)
38
- let length = listeners.length;
39
- if (i > -1) {
40
- listeners[i] = listeners[length - 1]
41
- listeners.splice(length - 1, 1)
42
- }
43
- }
44
- that.get = (): T => STORES[index]
45
+ that.get = get
45
46
  that.set = (setter) => {
46
47
  let result;
47
48
  if (isFunction(setter)) {
48
- const proxy = createProxy(STORES[index]);
49
+ const proxy = createProxy(get() as object);
49
50
  result = (setter as Setter<T>)(proxy);
50
51
  if (!result || result === proxy)
51
52
  result = proxy.bake()
52
53
  } else if (isObject(setter)) {
53
- result = {...STORES[index], ...setter}
54
+ result = {...get(), ...setter}
54
55
  } else {
55
56
  result = setter
56
57
  }
57
58
 
58
- STORES[index] = result
59
- runListeners();
60
- }
61
-
62
- that.reset = () => {
63
- STORES[index] = initialState
59
+ STORES.set(index, result)
64
60
  runListeners();
65
61
  }
62
+ that.reset = reset
66
63
 
67
- that.subscribe = (fn: () => void) => {
68
- listeners.push(fn)
64
+ that.subscribe = (fn: ListenerFn) => {
65
+ const key = Symbol();
66
+ listeners.set(key, fn)
67
+ return () => {
68
+ listeners.delete(key)
69
+ }
69
70
  }
70
71
 
71
72
  that.toString = (): string => name;
@@ -78,20 +79,12 @@ export function getGlobalState() {
78
79
  return STORES
79
80
  }
80
81
 
81
- export function resetGlobalState() {
82
- STORES = {}
83
- }
84
-
85
- export function replaceGlobalState(state) {
86
- STORES = state
87
- }
88
-
89
-
90
82
  export type Selector<T, R> = (t: T) => R;
91
83
 
92
84
  export const defaultSelector = <T>(store: T): T => store;
93
85
 
94
86
  export function useStore<T, R>(store: Store<T>, selector: Selector<T, R>, selectorDependencies: ReadonlyArray<any>): R
87
+ export function useStore<T, R>(store: Store<T>, selector: Selector<T, R>, selectorDependencies?: undefined): R
95
88
  export function useStore<T>(store: Store<T>, selector?: undefined, selectorDependencies?: undefined): T
96
89
  export function useStore<T, R>(store: Store<T>, selector?: Selector<T, R>, selectorDependencies: ReadonlyArray<any> = []): R {
97
90
  if (!selector)
@@ -104,10 +97,7 @@ export function useStore<T, R>(store: Store<T>, selector?: Selector<T, R>, selec
104
97
  setState(selector(store.get()))
105
98
  };
106
99
  updateState()
107
- store.subscribe(updateState)
108
- return () => {
109
- store.unsubscribe(updateState);
110
- }
100
+ return store.subscribe(updateState)
111
101
  }, selectorDependencies)
112
102
 
113
103
  return state
package/store/Store.d.ts CHANGED
@@ -1,23 +1,25 @@
1
- interface Stores {
2
- [index: number]: any;
3
- }
4
1
  declare type Setter<T> = (oldState: T) => T | void;
2
+ declare type ListenerFn = () => void;
3
+ declare type UnsubscribeFn = () => void;
5
4
  declare abstract class AbstractStore<T> {
6
5
  get: () => T;
7
6
  set: (setter: T | Partial<T> | (Setter<T>)) => void;
8
7
  reset: () => void;
9
- subscribe: (fn: () => void) => void;
10
- unsubscribe: (fn: () => void) => void;
8
+ /**
9
+ * Return unsubscribe function
10
+ *
11
+ * @returns unsubscribe function.
12
+ */
13
+ subscribe: (fn: ListenerFn) => UnsubscribeFn;
11
14
  toString: () => string;
12
15
  }
13
16
  export declare class Store<T> extends AbstractStore<T> {
14
17
  constructor(initialState: T, name?: string);
15
18
  }
16
19
  export default Store;
17
- export declare function getGlobalState(): Stores;
18
- export declare function resetGlobalState(): void;
19
- export declare function replaceGlobalState(state: any): void;
20
+ export declare function getGlobalState(): Map<Symbol, any>;
20
21
  export declare type Selector<T, R> = (t: T) => R;
21
22
  export declare const defaultSelector: <T>(store: T) => T;
22
23
  export declare function useStore<T, R>(store: Store<T>, selector: Selector<T, R>, selectorDependencies: ReadonlyArray<any>): R;
24
+ export declare function useStore<T, R>(store: Store<T>, selector: Selector<T, R>, selectorDependencies?: undefined): R;
23
25
  export declare function useStore<T>(store: Store<T>, selector?: undefined, selectorDependencies?: undefined): T;
package/store/Store.js CHANGED
@@ -2,52 +2,51 @@ import ReactConstants from "./../ReactConstants"; import {clientHeight as __clie
2
2
  import { createProxy } from './ProxyTools.js';
3
3
  import { isFunction, isObject } from '../Tools.js';
4
4
 
5
- let STORES = {};
6
- let COUNTER = 0;
5
+ const STORES = new Map();
7
6
  class AbstractStore {
8
7
  }
9
8
  class Store extends AbstractStore {
10
9
  constructor(initialState, name) {
11
10
  super();
12
11
  let that = this;
13
- let listeners = [];
14
- let index = '' + COUNTER++;
12
+ let listeners = new Map();
13
+ let index = Symbol();
15
14
  let runListeners = () => {
16
- listeners.forEach(fn => fn());
17
- };
18
- STORES[index] = initialState;
19
- that.unsubscribe = (fn) => {
20
- let i = listeners.indexOf(fn);
21
- let length = __length(listeners);
22
- if (i > -1) {
23
- listeners[i] = listeners[length - 1];
24
- listeners.splice(length - 1, 1);
15
+ for (let listener of listeners.values()) {
16
+ listener();
25
17
  }
26
18
  };
27
- that.get = () => STORES[index];
19
+ let get = () => STORES.get(index);
20
+ let reset = () => {
21
+ STORES.set(index, initialState);
22
+ runListeners();
23
+ };
24
+ reset();
25
+ that.get = get;
28
26
  that.set = (setter) => {
29
27
  let result;
30
28
  if (isFunction(setter)) {
31
- const proxy = createProxy(STORES[index]);
29
+ const proxy = createProxy(get());
32
30
  result = setter(proxy);
33
31
  if (!result || result === proxy)
34
32
  result = proxy.bake();
35
33
  }
36
34
  else if (isObject(setter)) {
37
- result = __extends(__extends({}, STORES[index]), setter);
35
+ result = __extends(__extends({}, get()), setter);
38
36
  }
39
37
  else {
40
38
  result = setter;
41
39
  }
42
- STORES[index] = result;
43
- runListeners();
44
- };
45
- that.reset = () => {
46
- STORES[index] = initialState;
40
+ STORES.set(index, result);
47
41
  runListeners();
48
42
  };
43
+ that.reset = reset;
49
44
  that.subscribe = (fn) => {
50
- listeners.push(fn);
45
+ const key = Symbol();
46
+ listeners.set(key, fn);
47
+ return () => {
48
+ listeners.delete(key);
49
+ };
51
50
  };
52
51
  that.toString = () => name;
53
52
  }
@@ -55,12 +54,6 @@ class Store extends AbstractStore {
55
54
  function getGlobalState() {
56
55
  return STORES;
57
56
  }
58
- function resetGlobalState() {
59
- STORES = {};
60
- }
61
- function replaceGlobalState(state) {
62
- STORES = state;
63
- }
64
57
  const defaultSelector = (store) => store;
65
58
  function useStore(store, selector, selectorDependencies = []) {
66
59
  if (!selector)
@@ -71,13 +64,10 @@ function useStore(store, selector, selectorDependencies = []) {
71
64
  setState(selector(store.get()));
72
65
  };
73
66
  updateState();
74
- store.subscribe(updateState);
75
- return () => {
76
- store.unsubscribe(updateState);
77
- };
67
+ return store.subscribe(updateState);
78
68
  }, selectorDependencies);
79
69
  return state;
80
70
  }
81
71
 
82
- export { Store, Store as default, defaultSelector, getGlobalState, replaceGlobalState, resetGlobalState, useStore };
72
+ export { Store, Store as default, defaultSelector, getGlobalState, useStore };
83
73
  //# sourceMappingURL=Store.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Store.js","sources":["../src/store/Store.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Store.js","sources":["../src/store/Store.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}