Skip to content

Commit 2b9c6fc

Browse files
einazareeinazare
authored
Merge pull request #13 from creativetimofficial/feature/add-tabs
Feature: add tab components
2 parents 3ab57e4 + e715bc6 commit 2b9c6fc

File tree

7 files changed

+465
-4
lines changed

7 files changed

+465
-4
lines changed

‎README.md

Lines changed: 198 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ We plan on implementing more, in the weeks to come.
4242
- [Navbar](#navbar)
4343
- [Popover](#popover)
4444
- [Tooltip](#tooltip)
45-
- Tab Pills
45+
- [Tab Pills](#tab-pills)
4646

4747
## Quick start
4848

@@ -498,7 +498,7 @@ import {
498498
NavbarLink,
499499
NavbarNav,
500500
NavbarToggler
501-
} from "./src";
501+
} from "@tailwindjs/react-tailwindjs";
502502
503503
const YourComponent = () => {
504504
return (
@@ -541,7 +541,7 @@ import {
541541
NavbarLink,
542542
NavbarNav,
543543
NavbarToggler
544-
} from "./src";
544+
} from "@tailwindjs/react-tailwindjs";
545545
546546
const YourComponent = () => {
547547
const [show, setShow] = React.useState(false);
@@ -842,6 +842,201 @@ Tooltip.propTypes = {
842842
};
843843
```
844844

845+
### Tab Pills
846+
847+
Usage:
848+
849+
```
850+
// uncontrolled version
851+
import React from "react";
852+
import { TabContainer, TabItem, TabLink, TabContent } from "@tailwindjs/react-tailwindjs";
853+
854+
const YourComponent = () => {
855+
return (
856+
<>
857+
<TabContainer color="pink">
858+
<TabItem>
859+
<TabLink target="#tab-id-1">Simple</TabLink>
860+
</TabItem>
861+
<TabItem>
862+
<TabLink target="#tab-id-2" active>
863+
Active
864+
</TabLink>
865+
</TabItem>
866+
<TabItem>
867+
<TabLink target="#tab-id-3">Simple</TabLink>
868+
</TabItem>
869+
<TabItem>
870+
<TabLink target="#tab-id-4" disabled>
871+
Disabled
872+
</TabLink>
873+
</TabItem>
874+
</TabContainer>
875+
<TabContent id="tab-id-1">
876+
<p>
877+
Collaboratively administrate empowered markets via plug-and-play
878+
networks. Dynamically procrastinate B2C users after installed base
879+
benefits.
880+
</p>
881+
<p>
882+
Dramatically visualize customer directed convergence without
883+
revolutionary ROI.
884+
</p>
885+
</TabContent>
886+
<TabContent id="tab-id-2">
887+
<p>
888+
Completely synergize resource taxing relationships via premier niche
889+
markets. Professionally cultivate one-to-one customer service with
890+
robust ideas.
891+
</p>
892+
<p>
893+
Efficiently unleash cross-media information without cross-media value.
894+
Quickly maximize timely deliverables for real-time schemas.
895+
</p>
896+
</TabContent>
897+
<TabContent id="tab-id-3">
898+
<p>
899+
Efficiently unleash cross-media information without cross-media value.
900+
Quickly maximize timely deliverables for real-time schemas.
901+
</p>
902+
<p>
903+
Dramatically maintain clicks-and-mortar solutions without functional
904+
solutions.
905+
</p>
906+
</TabContent>
907+
<TabContent id="tab-id-4">
908+
<p>
909+
Completely synergize resource taxing relationships via premier niche
910+
markets. Professionally cultivate one-to-one customer service with
911+
robust ideas.
912+
</p>
913+
<p>
914+
Efficiently unleash cross-media information without cross-media value.
915+
Quickly maximize timely deliverables for real-time schemas.
916+
</p>
917+
</TabContent>
918+
</>
919+
);
920+
};
921+
922+
export default YourComponent;
923+
```
924+
925+
```
926+
// controlled version
927+
// on the controlled version you will have to send the color
928+
// of each tab-link individualy, the color from the tab-container
929+
// will no longer be applied :(
930+
import React from "react";
931+
import { TabContainer, TabItem, TabLink, TabContent } from "@tailwindjs/react-tailwindjs";
932+
933+
const YourComponent = () => {
934+
const [active, setActive] = React.useState("tab-id-2");
935+
const toggleActiveTab = tab => {
936+
setActive(tab);
937+
};
938+
return (
939+
<>
940+
{/* the color on the container does nothing on the controlled version */}
941+
<TabContainer controlled color="blue">
942+
<TabItem>
943+
<TabLink
944+
color="pink"
945+
target="#tab-id-1"
946+
active={active === "tab-id-1"}
947+
onClick={() => toggleActiveTab("tab-id-1")}
948+
>
949+
Simple
950+
</TabLink>
951+
</TabItem>
952+
<TabItem>
953+
<TabLink
954+
color="pink"
955+
target="#tab-id-2"
956+
active={active === "tab-id-2"}
957+
onClick={() => toggleActiveTab("tab-id-2")}
958+
>
959+
Active
960+
</TabLink>
961+
</TabItem>
962+
<TabItem>
963+
<TabLink
964+
color="pink"
965+
target="#tab-id-3"
966+
active={active === "tab-id-3"}
967+
onClick={() => toggleActiveTab("tab-id-3")}
968+
>
969+
Simple
970+
</TabLink>
971+
</TabItem>
972+
<TabItem>
973+
<TabLink
974+
color="pink"
975+
target="#tab-id-4"
976+
disabled
977+
active={active === "tab-id-4"}
978+
onClick={() => toggleActiveTab("tab-id-4")}
979+
>
980+
Disabled
981+
</TabLink>
982+
</TabItem>
983+
</TabContainer>
984+
<TabContent id="tab-id-1" active={active === "tab-id-1"}>
985+
<p>
986+
Collaboratively administrate empowered markets via plug-and-play
987+
networks. Dynamically procrastinate B2C users after installed base
988+
benefits.
989+
</p>
990+
<p>
991+
Dramatically visualize customer directed convergence without
992+
revolutionary ROI.
993+
</p>
994+
</TabContent>
995+
<TabContent id="tab-id-2" active={active === "tab-id-2"}>
996+
<p>
997+
Completely synergize resource taxing relationships via premier niche
998+
markets. Professionally cultivate one-to-one customer service with
999+
robust ideas.
1000+
</p>
1001+
<p>
1002+
Efficiently unleash cross-media information without cross-media value.
1003+
Quickly maximize timely deliverables for real-time schemas.
1004+
</p>
1005+
</TabContent>
1006+
<TabContent id="tab-id-3" active={active === "tab-id-3"}>
1007+
<p>
1008+
Efficiently unleash cross-media information without cross-media value.
1009+
Quickly maximize timely deliverables for real-time schemas.
1010+
</p>
1011+
<p>
1012+
Dramatically maintain clicks-and-mortar solutions without functional
1013+
solutions.
1014+
</p>
1015+
</TabContent>
1016+
<TabContent id="tab-id-4" active={active === "tab-id-4"}>
1017+
<p>
1018+
Completely synergize resource taxing relationships via premier niche
1019+
markets. Professionally cultivate one-to-one customer service with
1020+
robust ideas.
1021+
</p>
1022+
<p>
1023+
Efficiently unleash cross-media information without cross-media value.
1024+
Quickly maximize timely deliverables for real-time schemas.
1025+
</p>
1026+
</TabContent>
1027+
</>
1028+
);
1029+
};
1030+
1031+
export default YourComponent;
1032+
```
1033+
1034+
Props:
1035+
1036+
```
1037+
1038+
```
1039+
8451040

8461041
### Styles
8471042

‎src/NavbarCollapse.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ class NavbarCollapse extends React.Component {
2626
toggleCollapse = () => {
2727
const { show } = this.state;
2828
this.setState({ show: !show });
29-
console.log(show);
3029
};
3130
render() {
3231
const { show: stateShow } = this.state;

‎src/TabContainer.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
4+
const TabContainer = ({ children, color, controlled, ...rest }) => {
5+
const [newChildren, setNewChildren] = React.useState(() => {
6+
let newChildren = [];
7+
children.forEach((child, index) => {
8+
let grandChild = child.props.children;
9+
let targetTabContent = grandChild.props.target;
10+
let props = {
11+
...grandChild.props,
12+
color: color
13+
};
14+
if (!controlled) {
15+
props.onClick = () => toggleTabs(targetTabContent);
16+
}
17+
newChildren.push(
18+
React.cloneElement(child, {
19+
children: React.cloneElement(grandChild, props),
20+
key: index
21+
})
22+
);
23+
});
24+
return newChildren;
25+
});
26+
if (controlled) {
27+
return (
28+
<>
29+
<ul
30+
{...rest}
31+
className="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row"
32+
>
33+
{children}
34+
</ul>
35+
</>
36+
);
37+
}
38+
const toggleTabs = tabContentId => {
39+
let tabContent = document.querySelector(tabContentId);
40+
let newChildren = [];
41+
children.forEach((child, index) => {
42+
let grandChild = child.props.children;
43+
let targetTabContent = grandChild.props.target;
44+
document.querySelector(targetTabContent).classList.add("hidden");
45+
document.querySelector(targetTabContent).classList.remove("block");
46+
newChildren.push(
47+
React.cloneElement(child, {
48+
children: React.cloneElement(grandChild, {
49+
color: color,
50+
active: tabContentId === targetTabContent,
51+
onClick: () => toggleTabs(targetTabContent)
52+
}),
53+
key: index
54+
})
55+
);
56+
});
57+
setNewChildren(newChildren);
58+
tabContent.classList.add("block");
59+
tabContent.classList.remove("hidden");
60+
};
61+
return (
62+
<>
63+
<ul
64+
{...rest}
65+
className="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row"
66+
>
67+
{newChildren}
68+
</ul>
69+
</>
70+
);
71+
};
72+
73+
TabContainer.defaultProps = {
74+
color: "pink",
75+
controlled: false
76+
};
77+
78+
TabContainer.propTypes = {
79+
// if you want to controll the behavior yourself
80+
controlled: PropTypes.bool,
81+
// set the background, border and text color for the tab-link
82+
color: PropTypes.oneOf([
83+
"black",
84+
"white",
85+
"gray",
86+
"red",
87+
"orange",
88+
"yellow",
89+
"green",
90+
"teal",
91+
"blue",
92+
"indigo",
93+
"purple",
94+
"pink"
95+
]),
96+
children: PropTypes.node
97+
};
98+
99+
export default TabContainer;

‎src/TabContent.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import classnames from "classnames";
4+
5+
const TabContent = React.forwardRef(
6+
({ children, id, active, ...rest }, ref) => {
7+
return (
8+
<>
9+
<div
10+
{...rest}
11+
id={id}
12+
className={classnames({ hidden: !active }, { block: active })}
13+
>
14+
{children}
15+
</div>
16+
</>
17+
);
18+
}
19+
);
20+
21+
TabContent.defaultProps = {
22+
active: false
23+
};
24+
25+
TabContent.propTypes = {
26+
show: PropTypes.bool,
27+
id: PropTypes.string.isRequired,
28+
children: PropTypes.node
29+
};
30+
31+
export default TabContent;

‎src/TabItem.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
4+
const TabItem = React.forwardRef(({ children, ...rest }, ref) => {
5+
return (
6+
<>
7+
<li {...rest} className="-mb-px mr-2 last:mr-0 flex-auto text-center">
8+
{children}
9+
</li>
10+
</>
11+
);
12+
});
13+
14+
TabItem.defaultProps = {};
15+
16+
TabItem.propTypes = {
17+
children: PropTypes.node
18+
};
19+
20+
export default TabItem;

0 commit comments

Comments
 (0)