@apexcura/ui-components 0.0.15-Beta15 → 0.0.15-Beta17
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/index.css +302 -0
- package/dist/index.js +6 -9
- package/dist/index.mjs +15 -18
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -461,3 +461,305 @@ video {
|
|
|
461
461
|
--tw-bg-opacity: 1;
|
|
462
462
|
background-color: rgb(242 242 242 / var(--tw-bg-opacity));
|
|
463
463
|
}
|
|
464
|
+
|
|
465
|
+
/* src/styles/sidebar.css */
|
|
466
|
+
:root {
|
|
467
|
+
--background: #9c88ff;
|
|
468
|
+
--navbar-width: 256px;
|
|
469
|
+
--navbar-width-min: 80px;
|
|
470
|
+
--navbar-dark-primary: #18283b;
|
|
471
|
+
--navbar-dark-secondary: #2c3e50;
|
|
472
|
+
--navbar-light-primary: #f5f6fa;
|
|
473
|
+
--navbar-light-secondary: #8392a5;
|
|
474
|
+
}
|
|
475
|
+
html,
|
|
476
|
+
body {
|
|
477
|
+
margin: 0;
|
|
478
|
+
background: var(--background);
|
|
479
|
+
}
|
|
480
|
+
#nav-bar {
|
|
481
|
+
position: absolute;
|
|
482
|
+
left: 1vw;
|
|
483
|
+
top: 1vw;
|
|
484
|
+
height: calc(100% - 2vw);
|
|
485
|
+
background: var(--navbar-dark-primary);
|
|
486
|
+
border-radius: 16px;
|
|
487
|
+
display: flex;
|
|
488
|
+
flex-direction: column;
|
|
489
|
+
color: var(--navbar-light-primary);
|
|
490
|
+
font-family:
|
|
491
|
+
Verdana,
|
|
492
|
+
Geneva,
|
|
493
|
+
Tahoma,
|
|
494
|
+
sans-serif;
|
|
495
|
+
overflow: hidden;
|
|
496
|
+
-webkit-user-select: none;
|
|
497
|
+
-moz-user-select: none;
|
|
498
|
+
user-select: none;
|
|
499
|
+
}
|
|
500
|
+
#nav-bar hr {
|
|
501
|
+
margin: 0;
|
|
502
|
+
position: relative;
|
|
503
|
+
left: 16px;
|
|
504
|
+
width: calc(100% - 32px);
|
|
505
|
+
border: none;
|
|
506
|
+
border-top: solid 1px var(--navbar-dark-secondary);
|
|
507
|
+
}
|
|
508
|
+
#nav-bar a {
|
|
509
|
+
color: inherit;
|
|
510
|
+
text-decoration: inherit;
|
|
511
|
+
}
|
|
512
|
+
#nav-bar input[type=checkbox] {
|
|
513
|
+
display: none;
|
|
514
|
+
}
|
|
515
|
+
#nav-header {
|
|
516
|
+
position: relative;
|
|
517
|
+
width: var(--navbar-width);
|
|
518
|
+
left: 16px;
|
|
519
|
+
width: calc(var(--navbar-width) - 16px);
|
|
520
|
+
min-height: 80px;
|
|
521
|
+
background: var(--navbar-dark-primary);
|
|
522
|
+
border-radius: 16px;
|
|
523
|
+
z-index: 2;
|
|
524
|
+
display: flex;
|
|
525
|
+
align-items: center;
|
|
526
|
+
transition: width .2s;
|
|
527
|
+
}
|
|
528
|
+
#nav-header hr {
|
|
529
|
+
position: absolute;
|
|
530
|
+
bottom: 0;
|
|
531
|
+
}
|
|
532
|
+
#nav-title {
|
|
533
|
+
font-size: 1.5rem;
|
|
534
|
+
transition: opacity 1s;
|
|
535
|
+
}
|
|
536
|
+
label[for=nav-toggle] {
|
|
537
|
+
position: absolute;
|
|
538
|
+
right: 0;
|
|
539
|
+
width: 3rem;
|
|
540
|
+
height: 100%;
|
|
541
|
+
display: flex;
|
|
542
|
+
align-items: center;
|
|
543
|
+
justify-content: center;
|
|
544
|
+
cursor: pointer;
|
|
545
|
+
}
|
|
546
|
+
#nav-toggle-burger {
|
|
547
|
+
position: relative;
|
|
548
|
+
width: 16px;
|
|
549
|
+
height: 2px;
|
|
550
|
+
background: var(--navbar-dark-primary);
|
|
551
|
+
border-radius: 99px;
|
|
552
|
+
}
|
|
553
|
+
#nav-toggle-burger:before,
|
|
554
|
+
#nav-toggle-burger:after {
|
|
555
|
+
content: "";
|
|
556
|
+
position: absolute;
|
|
557
|
+
width: 10px;
|
|
558
|
+
height: 2px;
|
|
559
|
+
background: var(--navbar-light-primary);
|
|
560
|
+
border-radius: 99px;
|
|
561
|
+
transition: .2s;
|
|
562
|
+
}
|
|
563
|
+
#nav-toggle-burger:before {
|
|
564
|
+
top: -6px;
|
|
565
|
+
transform: translate(2px, 8px) rotate(30deg);
|
|
566
|
+
}
|
|
567
|
+
#nav-toggle-burger:after {
|
|
568
|
+
top: 6px;
|
|
569
|
+
transform: translate(2px, -8px) rotate(-30deg);
|
|
570
|
+
}
|
|
571
|
+
#nav-content {
|
|
572
|
+
margin: -16px 0;
|
|
573
|
+
padding: 16px 0;
|
|
574
|
+
position: relative;
|
|
575
|
+
flex: 1;
|
|
576
|
+
width: var(--navbar-width);
|
|
577
|
+
background: var(--navbar-dark-primary);
|
|
578
|
+
box-shadow: 0 0 0 16px var(--navbar-dark-primary);
|
|
579
|
+
direction: rtl;
|
|
580
|
+
overflow-x: hidden;
|
|
581
|
+
transition: width .2s;
|
|
582
|
+
}
|
|
583
|
+
#nav-content::-webkit-scrollbar {
|
|
584
|
+
width: 8px;
|
|
585
|
+
height: 8px;
|
|
586
|
+
}
|
|
587
|
+
#nav-content::-webkit-scrollbar-thumb {
|
|
588
|
+
border-radius: 99px;
|
|
589
|
+
background-color: #D62929;
|
|
590
|
+
}
|
|
591
|
+
#nav-content::-webkit-scrollbar-button {
|
|
592
|
+
height: 16px;
|
|
593
|
+
}
|
|
594
|
+
#nav-content-highlight {
|
|
595
|
+
position: absolute;
|
|
596
|
+
left: 16px;
|
|
597
|
+
top: calc(0 * 54 + 16px);
|
|
598
|
+
width: calc(100% - 16px);
|
|
599
|
+
height: 54px;
|
|
600
|
+
background: var(--background);
|
|
601
|
+
background-attachment: fixed;
|
|
602
|
+
border-radius: 16px 0 0 16px;
|
|
603
|
+
transition: top .2s;
|
|
604
|
+
}
|
|
605
|
+
#nav-content-highlight:before,
|
|
606
|
+
#nav-content-highlight:after {
|
|
607
|
+
content: "";
|
|
608
|
+
position: absolute;
|
|
609
|
+
right: 0;
|
|
610
|
+
bottom: 100%;
|
|
611
|
+
width: 32px;
|
|
612
|
+
height: 32px;
|
|
613
|
+
border-radius: 50%;
|
|
614
|
+
box-shadow: 16px 16px var(--background);
|
|
615
|
+
}
|
|
616
|
+
#nav-content-highlight:after {
|
|
617
|
+
top: 100%;
|
|
618
|
+
box-shadow: 16px -16px var(--background);
|
|
619
|
+
}
|
|
620
|
+
.nav-button {
|
|
621
|
+
position: relative;
|
|
622
|
+
margin-left: 16px;
|
|
623
|
+
height: 54px;
|
|
624
|
+
display: flex;
|
|
625
|
+
align-items: center;
|
|
626
|
+
color: var(--navbar-light-secondary);
|
|
627
|
+
direction: ltr;
|
|
628
|
+
cursor: pointer;
|
|
629
|
+
z-index: 1;
|
|
630
|
+
transition: color .2s;
|
|
631
|
+
}
|
|
632
|
+
.nav-button span {
|
|
633
|
+
transition: opacity 1s;
|
|
634
|
+
}
|
|
635
|
+
.nav-button .fas {
|
|
636
|
+
transition: min-width .2s;
|
|
637
|
+
}
|
|
638
|
+
.nav-button:hover {
|
|
639
|
+
color: var(--navbar-dark-primary);
|
|
640
|
+
}
|
|
641
|
+
.nav-button:hover ~ #nav-content-highlight {
|
|
642
|
+
top: calc(var(--nav-button-index) * 54 + 16px);
|
|
643
|
+
}
|
|
644
|
+
#nav-bar .fas {
|
|
645
|
+
min-width: 3rem;
|
|
646
|
+
text-align: center;
|
|
647
|
+
}
|
|
648
|
+
#nav-footer {
|
|
649
|
+
position: relative;
|
|
650
|
+
width: var(--navbar-width);
|
|
651
|
+
height: 54px;
|
|
652
|
+
background: var(--navbar-dark-secondary);
|
|
653
|
+
border-radius: 16px;
|
|
654
|
+
display: flex;
|
|
655
|
+
flex-direction: column;
|
|
656
|
+
z-index: 2;
|
|
657
|
+
transition: width .2s, height .2s;
|
|
658
|
+
}
|
|
659
|
+
#nav-footer-heading {
|
|
660
|
+
position: relative;
|
|
661
|
+
width: 100%;
|
|
662
|
+
height: 54px;
|
|
663
|
+
display: flex;
|
|
664
|
+
align-items: center;
|
|
665
|
+
}
|
|
666
|
+
#nav-footer-avatar {
|
|
667
|
+
position: relative;
|
|
668
|
+
margin: 11px 0 11px 16px;
|
|
669
|
+
left: 0;
|
|
670
|
+
width: 32px;
|
|
671
|
+
height: 32px;
|
|
672
|
+
border-radius: 50%;
|
|
673
|
+
overflow: hidden;
|
|
674
|
+
transform: translate(0);
|
|
675
|
+
transition: .2s;
|
|
676
|
+
}
|
|
677
|
+
#nav-footer-avatar img {
|
|
678
|
+
height: 100%;
|
|
679
|
+
}
|
|
680
|
+
#nav-footer-titlebox {
|
|
681
|
+
position: relative;
|
|
682
|
+
margin-left: 16px;
|
|
683
|
+
width: 10px;
|
|
684
|
+
display: flex;
|
|
685
|
+
flex-direction: column;
|
|
686
|
+
transition: opacity 1s;
|
|
687
|
+
}
|
|
688
|
+
#nav-footer-subtitle {
|
|
689
|
+
color: var(--navbar-light-secondary);
|
|
690
|
+
font-size: .6rem;
|
|
691
|
+
}
|
|
692
|
+
#nav-toggle:not(:checked) ~ #nav-footer-toggle:checked + #nav-footer {
|
|
693
|
+
height: 30%;
|
|
694
|
+
min-height: 54px;
|
|
695
|
+
}
|
|
696
|
+
#nav-footer label[for=nav-footer-toggle] {
|
|
697
|
+
position: absolute;
|
|
698
|
+
right: 0;
|
|
699
|
+
width: 3rem;
|
|
700
|
+
height: 100%;
|
|
701
|
+
display: flex;
|
|
702
|
+
align-items: center;
|
|
703
|
+
cursor: pointer;
|
|
704
|
+
transition: transform .2s, opacity .2s;
|
|
705
|
+
transform: rotate(180deg);
|
|
706
|
+
}
|
|
707
|
+
#nav-footer-content {
|
|
708
|
+
margin: 0 16px 16px 16px;
|
|
709
|
+
border-top: solid 1px var(--navbar-light-secondary);
|
|
710
|
+
padding: 16px 0;
|
|
711
|
+
color: var(--navbar-light-secondary);
|
|
712
|
+
font-size: .8rem;
|
|
713
|
+
overflow: auto;
|
|
714
|
+
}
|
|
715
|
+
#nav-footer-content::-webkit-scrollbar {
|
|
716
|
+
width: 8px;
|
|
717
|
+
height: 8px;
|
|
718
|
+
}
|
|
719
|
+
#nav-footer-content::-webkit-scrollbar-thumb {
|
|
720
|
+
border-radius: 99px;
|
|
721
|
+
background-color: #D62929;
|
|
722
|
+
}
|
|
723
|
+
#nav-toggle:checked ~ #nav-header {
|
|
724
|
+
width: calc(var(--navbar-width-min) - 16px);
|
|
725
|
+
}
|
|
726
|
+
#nav-toggle:checked ~ #nav-content,
|
|
727
|
+
#nav-toggle:checked ~ #nav-footer {
|
|
728
|
+
width: var(--navbar-width-min);
|
|
729
|
+
}
|
|
730
|
+
#nav-toggle:checked ~ #nav-header #nav-title {
|
|
731
|
+
opacity: 0;
|
|
732
|
+
pointer-events: none;
|
|
733
|
+
transition: opacity .1s;
|
|
734
|
+
}
|
|
735
|
+
#nav-toggle:checked ~ #nav-header label[for=nav-toggle] {
|
|
736
|
+
left: calc(50% - 8px);
|
|
737
|
+
transform: translate(-50%);
|
|
738
|
+
}
|
|
739
|
+
#nav-toggle:checked ~ #nav-header #nav-toggle-burger {
|
|
740
|
+
background: var(--navbar-light-primary);
|
|
741
|
+
}
|
|
742
|
+
#nav-toggle:checked ~ #nav-header #nav-toggle-burger:before,
|
|
743
|
+
#nav-toggle:checked ~ #nav-header #nav-toggle-burger:after {
|
|
744
|
+
width: 16px;
|
|
745
|
+
background: var(--navbar-light-secondary);
|
|
746
|
+
transform: translate(0, 0) rotate(0deg);
|
|
747
|
+
}
|
|
748
|
+
#nav-toggle:checked ~ #nav-content .nav-button span {
|
|
749
|
+
opacity: 0;
|
|
750
|
+
transition: opacity .1s;
|
|
751
|
+
}
|
|
752
|
+
#nav-toggle:checked ~ #nav-content .nav-button .fas {
|
|
753
|
+
min-width: calc(100% - 16px);
|
|
754
|
+
}
|
|
755
|
+
#nav-toggle:checked ~ #nav-footer #nav-footer-avatar {
|
|
756
|
+
margin-left: 0;
|
|
757
|
+
left: 50%;
|
|
758
|
+
transform: translate(-50%);
|
|
759
|
+
}
|
|
760
|
+
#nav-toggle:checked ~ #nav-footer #nav-footer-titlebox,
|
|
761
|
+
#nav-toggle:checked ~ #nav-footer label[for=nav-footer-toggle] {
|
|
762
|
+
opacity: 0;
|
|
763
|
+
transition: opacity .1s;
|
|
764
|
+
pointer-events: none;
|
|
765
|
+
}
|
package/dist/index.js
CHANGED
|
@@ -663,11 +663,7 @@ var AddMoreTable = (props) => {
|
|
|
663
663
|
// src/Components/Sidebar.tsx
|
|
664
664
|
var import_react14 = __toESM(require("react"));
|
|
665
665
|
var Sidebar = (props) => {
|
|
666
|
-
|
|
667
|
-
const [footerToggle, setFooterToggle] = (0, import_react14.useState)(false);
|
|
668
|
-
const handleNavToggle = () => setNavToggle(!navToggle);
|
|
669
|
-
const handleFooterToggle = () => setFooterToggle(!footerToggle);
|
|
670
|
-
return /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-bar" }, /* @__PURE__ */ import_react14.default.createElement("input", { id: "nav-toggle", type: "checkbox", checked: navToggle, onChange: handleNavToggle }), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-header" }, /* @__PURE__ */ import_react14.default.createElement("a", { id: "nav-title", href: "https://codepen.io", target: "_blank", rel: "noopener noreferrer" }, "C", /* @__PURE__ */ import_react14.default.createElement("i", { className: "fab fa-codepen" }), "DEPEN"), /* @__PURE__ */ import_react14.default.createElement("label", { htmlFor: "nav-toggle" }, /* @__PURE__ */ import_react14.default.createElement("span", { id: "nav-toggle-burger" })), /* @__PURE__ */ import_react14.default.createElement("hr", null)), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-content" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-palette" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Your Work")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-images" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Assets")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-thumbtack" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Pinned Items")), /* @__PURE__ */ import_react14.default.createElement("hr", null), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-heart" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Following")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-chart-line" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Trending")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-fire" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Challenges")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-magic" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Spark")), /* @__PURE__ */ import_react14.default.createElement("hr", null), /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-gem" }), /* @__PURE__ */ import_react14.default.createElement("span", null, "Codepen Pro")), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-content-highlight" })), /* @__PURE__ */ import_react14.default.createElement("input", { id: "nav-footer-toggle", type: "checkbox", checked: footerToggle, onChange: handleFooterToggle }), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer" }, /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-heading" }, /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-avatar" }, /* @__PURE__ */ import_react14.default.createElement("img", { src: "https://gravatar.com/avatar/4474ca42d303761c2901fa819c4f2547", alt: "avatar" })), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-titlebox" }, /* @__PURE__ */ import_react14.default.createElement("a", { id: "nav-footer-title", href: "https://codepen.io/uahnbu/pens/public", target: "_blank", rel: "noopener noreferrer" }, "uahnbu"), /* @__PURE__ */ import_react14.default.createElement("span", { id: "nav-footer-subtitle" }, "Admin")), /* @__PURE__ */ import_react14.default.createElement("label", { htmlFor: "nav-footer-toggle" }, /* @__PURE__ */ import_react14.default.createElement("i", { className: "fas fa-caret-up" }))), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-footer-content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")));
|
|
666
|
+
return /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-bar" }, /* @__PURE__ */ import_react14.default.createElement("input", { type: "checkbox", id: "nav-toggle" }), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-header" }, /* @__PURE__ */ import_react14.default.createElement("img", { src: props.img, alt: "logo" }), /* @__PURE__ */ import_react14.default.createElement("label", { htmlFor: "nav-toggle" }, /* @__PURE__ */ import_react14.default.createElement("span", { id: "nav-toggle-burger" })), /* @__PURE__ */ import_react14.default.createElement("hr", null)), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-content" }, props.items && props.items.map((eachItem) => /* @__PURE__ */ import_react14.default.createElement("div", { className: "nav-button", key: eachItem.label }, icons[eachItem.icon], /* @__PURE__ */ import_react14.default.createElement("span", null, eachItem.label))), /* @__PURE__ */ import_react14.default.createElement("div", { id: "nav-content-highlight" })));
|
|
671
667
|
};
|
|
672
668
|
|
|
673
669
|
// src/Components/Navbar.tsx
|
|
@@ -713,8 +709,8 @@ var SpanElement = (props) => /* @__PURE__ */ import_react16.default.createElemen
|
|
|
713
709
|
// src/Components/Profile.tsx
|
|
714
710
|
var import_react17 = __toESM(require("react"));
|
|
715
711
|
var import_antd12 = require("antd");
|
|
716
|
-
var
|
|
717
|
-
var Profile = (props) => /* @__PURE__ */ import_react17.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react17.default.createElement(import_antd12.Avatar, { style: { backgroundColor: "#87d068", marginRight: "10px" }, icon: /* @__PURE__ */ import_react17.default.createElement(
|
|
712
|
+
var import_icons5 = require("@ant-design/icons");
|
|
713
|
+
var Profile = (props) => /* @__PURE__ */ import_react17.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react17.default.createElement(import_antd12.Avatar, { style: { backgroundColor: "#87d068", marginRight: "10px" }, icon: /* @__PURE__ */ import_react17.default.createElement(import_icons5.UserOutlined, null) }), /* @__PURE__ */ import_react17.default.createElement("div", { className: props.profileSubClassName }, /* @__PURE__ */ import_react17.default.createElement("p", null, props.primaryText), /* @__PURE__ */ import_react17.default.createElement("p", { className: props.secondTextClassName }, " ", props.secondaryText)));
|
|
718
714
|
|
|
719
715
|
// src/Components/Navbar.tsx
|
|
720
716
|
var Navbar = (props) => {
|
|
@@ -1004,7 +1000,7 @@ var DropDownGroup = (props) => {
|
|
|
1004
1000
|
// src/Components/FilesUpload.tsx
|
|
1005
1001
|
var import_react25 = __toESM(require("react"));
|
|
1006
1002
|
var import_antd18 = require("antd");
|
|
1007
|
-
var
|
|
1003
|
+
var import_icons6 = require("@ant-design/icons");
|
|
1008
1004
|
var FileUpload = (props) => {
|
|
1009
1005
|
const { Dragger } = import_antd18.Upload;
|
|
1010
1006
|
const [files, setFiles] = (0, import_react25.useState)(
|
|
@@ -1037,7 +1033,7 @@ var FileUpload = (props) => {
|
|
|
1037
1033
|
showUploadList: true,
|
|
1038
1034
|
customRequest
|
|
1039
1035
|
},
|
|
1040
|
-
/* @__PURE__ */ import_react25.default.createElement("p", null, /* @__PURE__ */ import_react25.default.createElement(
|
|
1036
|
+
/* @__PURE__ */ import_react25.default.createElement("p", null, /* @__PURE__ */ import_react25.default.createElement(import_icons6.InboxOutlined, null)),
|
|
1041
1037
|
/* @__PURE__ */ import_react25.default.createElement("p", null, "Click or drag file to upload")
|
|
1042
1038
|
));
|
|
1043
1039
|
};
|
|
@@ -1594,6 +1590,7 @@ var ColorPickerElement = (props) => {
|
|
|
1594
1590
|
return /* @__PURE__ */ import_react37.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react37.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react37.default.createElement("br", null), /* @__PURE__ */ import_react37.default.createElement(
|
|
1595
1591
|
import_antd22.ColorPicker,
|
|
1596
1592
|
{
|
|
1593
|
+
className: props.className,
|
|
1597
1594
|
showText: true,
|
|
1598
1595
|
defaultValue: props.defaultValue,
|
|
1599
1596
|
onChange: onHandleChange
|
package/dist/index.mjs
CHANGED
|
@@ -593,13 +593,9 @@ var AddMoreTable = (props) => {
|
|
|
593
593
|
};
|
|
594
594
|
|
|
595
595
|
// src/Components/Sidebar.tsx
|
|
596
|
-
import React14
|
|
596
|
+
import React14 from "react";
|
|
597
597
|
var Sidebar = (props) => {
|
|
598
|
-
|
|
599
|
-
const [footerToggle, setFooterToggle] = useState5(false);
|
|
600
|
-
const handleNavToggle = () => setNavToggle(!navToggle);
|
|
601
|
-
const handleFooterToggle = () => setFooterToggle(!footerToggle);
|
|
602
|
-
return /* @__PURE__ */ React14.createElement("div", { id: "nav-bar" }, /* @__PURE__ */ React14.createElement("input", { id: "nav-toggle", type: "checkbox", checked: navToggle, onChange: handleNavToggle }), /* @__PURE__ */ React14.createElement("div", { id: "nav-header" }, /* @__PURE__ */ React14.createElement("a", { id: "nav-title", href: "https://codepen.io", target: "_blank", rel: "noopener noreferrer" }, "C", /* @__PURE__ */ React14.createElement("i", { className: "fab fa-codepen" }), "DEPEN"), /* @__PURE__ */ React14.createElement("label", { htmlFor: "nav-toggle" }, /* @__PURE__ */ React14.createElement("span", { id: "nav-toggle-burger" })), /* @__PURE__ */ React14.createElement("hr", null)), /* @__PURE__ */ React14.createElement("div", { id: "nav-content" }, /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-palette" }), /* @__PURE__ */ React14.createElement("span", null, "Your Work")), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-images" }), /* @__PURE__ */ React14.createElement("span", null, "Assets")), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-thumbtack" }), /* @__PURE__ */ React14.createElement("span", null, "Pinned Items")), /* @__PURE__ */ React14.createElement("hr", null), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-heart" }), /* @__PURE__ */ React14.createElement("span", null, "Following")), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-chart-line" }), /* @__PURE__ */ React14.createElement("span", null, "Trending")), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-fire" }), /* @__PURE__ */ React14.createElement("span", null, "Challenges")), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-magic" }), /* @__PURE__ */ React14.createElement("span", null, "Spark")), /* @__PURE__ */ React14.createElement("hr", null), /* @__PURE__ */ React14.createElement("div", { className: "nav-button" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-gem" }), /* @__PURE__ */ React14.createElement("span", null, "Codepen Pro")), /* @__PURE__ */ React14.createElement("div", { id: "nav-content-highlight" })), /* @__PURE__ */ React14.createElement("input", { id: "nav-footer-toggle", type: "checkbox", checked: footerToggle, onChange: handleFooterToggle }), /* @__PURE__ */ React14.createElement("div", { id: "nav-footer" }, /* @__PURE__ */ React14.createElement("div", { id: "nav-footer-heading" }, /* @__PURE__ */ React14.createElement("div", { id: "nav-footer-avatar" }, /* @__PURE__ */ React14.createElement("img", { src: "https://gravatar.com/avatar/4474ca42d303761c2901fa819c4f2547", alt: "avatar" })), /* @__PURE__ */ React14.createElement("div", { id: "nav-footer-titlebox" }, /* @__PURE__ */ React14.createElement("a", { id: "nav-footer-title", href: "https://codepen.io/uahnbu/pens/public", target: "_blank", rel: "noopener noreferrer" }, "uahnbu"), /* @__PURE__ */ React14.createElement("span", { id: "nav-footer-subtitle" }, "Admin")), /* @__PURE__ */ React14.createElement("label", { htmlFor: "nav-footer-toggle" }, /* @__PURE__ */ React14.createElement("i", { className: "fas fa-caret-up" }))), /* @__PURE__ */ React14.createElement("div", { id: "nav-footer-content" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")));
|
|
598
|
+
return /* @__PURE__ */ React14.createElement("div", { id: "nav-bar" }, /* @__PURE__ */ React14.createElement("input", { type: "checkbox", id: "nav-toggle" }), /* @__PURE__ */ React14.createElement("div", { id: "nav-header" }, /* @__PURE__ */ React14.createElement("img", { src: props.img, alt: "logo" }), /* @__PURE__ */ React14.createElement("label", { htmlFor: "nav-toggle" }, /* @__PURE__ */ React14.createElement("span", { id: "nav-toggle-burger" })), /* @__PURE__ */ React14.createElement("hr", null)), /* @__PURE__ */ React14.createElement("div", { id: "nav-content" }, props.items && props.items.map((eachItem) => /* @__PURE__ */ React14.createElement("div", { className: "nav-button", key: eachItem.label }, icons[eachItem.icon], /* @__PURE__ */ React14.createElement("span", null, eachItem.label))), /* @__PURE__ */ React14.createElement("div", { id: "nav-content-highlight" })));
|
|
603
599
|
};
|
|
604
600
|
|
|
605
601
|
// src/Components/Navbar.tsx
|
|
@@ -663,11 +659,11 @@ var Navbar = (props) => {
|
|
|
663
659
|
};
|
|
664
660
|
|
|
665
661
|
// src/Components/TableElement.tsx
|
|
666
|
-
import React19, { useState as
|
|
662
|
+
import React19, { useState as useState5, useEffect as useEffect2 } from "react";
|
|
667
663
|
import { Table as Table2 } from "antd";
|
|
668
664
|
var TableElement = (props) => {
|
|
669
665
|
const { thead, tbody } = props;
|
|
670
|
-
const [dataSource, setDataSource] =
|
|
666
|
+
const [dataSource, setDataSource] = useState5([]);
|
|
671
667
|
useEffect2(() => {
|
|
672
668
|
if (tbody) {
|
|
673
669
|
setDataSource(
|
|
@@ -751,14 +747,14 @@ var TableElement = (props) => {
|
|
|
751
747
|
};
|
|
752
748
|
|
|
753
749
|
// src/Components/DatePicker.tsx
|
|
754
|
-
import React20, { useState as
|
|
750
|
+
import React20, { useState as useState6 } from "react";
|
|
755
751
|
import { DatePicker } from "antd";
|
|
756
752
|
import dayjs from "dayjs";
|
|
757
753
|
import customParseFormat from "dayjs/plugin/customParseFormat.js";
|
|
758
754
|
import moment from "moment";
|
|
759
755
|
dayjs.extend(customParseFormat);
|
|
760
756
|
var DatePickerElement = (props) => {
|
|
761
|
-
const [dateState, setDateState] =
|
|
757
|
+
const [dateState, setDateState] = useState6(null);
|
|
762
758
|
const handleChange = (date, dateString) => {
|
|
763
759
|
if (date) {
|
|
764
760
|
setDateState(date);
|
|
@@ -869,10 +865,10 @@ var SingleCheckbox = (props) => {
|
|
|
869
865
|
};
|
|
870
866
|
|
|
871
867
|
// src/Components/DropDownGroup.tsx
|
|
872
|
-
import React24, { useState as
|
|
868
|
+
import React24, { useState as useState7 } from "react";
|
|
873
869
|
import { Select as Select4 } from "antd";
|
|
874
870
|
var DropDownGroup = (props) => {
|
|
875
|
-
const [selectedValue, setSelectedValue] =
|
|
871
|
+
const [selectedValue, setSelectedValue] = useState7({
|
|
876
872
|
firstValue: {},
|
|
877
873
|
secondValue: {},
|
|
878
874
|
temp: ""
|
|
@@ -934,12 +930,12 @@ var DropDownGroup = (props) => {
|
|
|
934
930
|
};
|
|
935
931
|
|
|
936
932
|
// src/Components/FilesUpload.tsx
|
|
937
|
-
import React25, { useState as
|
|
933
|
+
import React25, { useState as useState8 } from "react";
|
|
938
934
|
import { Upload } from "antd";
|
|
939
935
|
import { InboxOutlined } from "@ant-design/icons";
|
|
940
936
|
var FileUpload = (props) => {
|
|
941
937
|
const { Dragger } = Upload;
|
|
942
|
-
const [files, setFiles] =
|
|
938
|
+
const [files, setFiles] = useState8(
|
|
943
939
|
props.value && props.value.length > 0 ? props.value : []
|
|
944
940
|
);
|
|
945
941
|
const handleChange = ({ fileList }) => {
|
|
@@ -994,9 +990,9 @@ var onChange = (checked) => {
|
|
|
994
990
|
var SwitchElement = () => /* @__PURE__ */ React27.createElement(Switch, { defaultChecked: true, onChange });
|
|
995
991
|
|
|
996
992
|
// src/Components/Upload.tsx
|
|
997
|
-
import React28, { useState as
|
|
993
|
+
import React28, { useState as useState9 } from "react";
|
|
998
994
|
var Upload2 = (props) => {
|
|
999
|
-
const [file, setFile] =
|
|
995
|
+
const [file, setFile] = useState9();
|
|
1000
996
|
const handleFileChange = (e) => {
|
|
1001
997
|
setFile(e.target.files[0]);
|
|
1002
998
|
if (props.onChange) {
|
|
@@ -1022,11 +1018,11 @@ var Upload2 = (props) => {
|
|
|
1022
1018
|
};
|
|
1023
1019
|
|
|
1024
1020
|
// src/Components/OtpElement.tsx
|
|
1025
|
-
import React29, { useState as
|
|
1021
|
+
import React29, { useState as useState10, useRef, useEffect as useEffect3 } from "react";
|
|
1026
1022
|
import { Input as Input3 } from "antd";
|
|
1027
1023
|
var OtpElement = (props) => {
|
|
1028
1024
|
const length = props.length;
|
|
1029
|
-
const [otp, setOtp] =
|
|
1025
|
+
const [otp, setOtp] = useState10(Array(length).fill(""));
|
|
1030
1026
|
const inputRefs = useRef([]);
|
|
1031
1027
|
const handleChange = (e, index) => {
|
|
1032
1028
|
const value = e.target.value;
|
|
@@ -1550,6 +1546,7 @@ var ColorPickerElement = (props) => {
|
|
|
1550
1546
|
return /* @__PURE__ */ React37.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React37.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React37.createElement("br", null), /* @__PURE__ */ React37.createElement(
|
|
1551
1547
|
ColorPicker,
|
|
1552
1548
|
{
|
|
1549
|
+
className: props.className,
|
|
1553
1550
|
showText: true,
|
|
1554
1551
|
defaultValue: props.defaultValue,
|
|
1555
1552
|
onChange: onHandleChange
|