tabler-react-2 0.1.88 → 0.1.89
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/timeline/index.js +6 -1
- package/docs/gatsby-config.js +3 -3
- package/docs/package.json +1 -1
- package/docs/src/config/sidebar.yml +4 -12
- package/docs/src/data/congressPeople.json +8 -8
- package/docs/src/docs/components/tables.mdx +10 -8
- package/docs/src/docs/components/timeline.mdx +66 -0
- package/package.json +1 -1
package/dist/timeline/index.js
CHANGED
|
@@ -8,6 +8,11 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
+
var i = function i(Icon) {
|
|
12
|
+
var isComponent = typeof Icon === "function" || /*#__PURE__*/_react["default"].isValidElement(Icon);
|
|
13
|
+
console.log(isComponent, typeof Icon === "function", /*#__PURE__*/_react["default"].isValidElement(Icon));
|
|
14
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isComponent ? /*#__PURE__*/_react["default"].createElement(Icon, null) : Icon);
|
|
15
|
+
};
|
|
11
16
|
var Timeline = exports.Timeline = function Timeline(_ref) {
|
|
12
17
|
var events = _ref.events,
|
|
13
18
|
dense = _ref.dense;
|
|
@@ -19,7 +24,7 @@ var Timeline = exports.Timeline = function Timeline(_ref) {
|
|
|
19
24
|
key: index
|
|
20
25
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
21
26
|
className: "timeline-event-icon ".concat(event.iconBgColor && "bg-".concat(event.iconBgColor, "-lt"), " ").concat(event.iconBgClass || "")
|
|
22
|
-
}, event.icon &&
|
|
27
|
+
}, event.icon && i(event.icon)), /*#__PURE__*/_react["default"].createElement("div", {
|
|
23
28
|
className: "card timeline-event-card ".concat(dense && "card-sm")
|
|
24
29
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
25
30
|
className: "card-body"
|
package/docs/gatsby-config.js
CHANGED
|
@@ -4,8 +4,8 @@ module.exports = {
|
|
|
4
4
|
defaultTitle: `Tabler React 2 Docs`,
|
|
5
5
|
siteTitleShort: `Tabler React 2 Docs`,
|
|
6
6
|
siteDescription: `Documentation for Tabler React 2`,
|
|
7
|
-
siteUrl: `https://
|
|
8
|
-
siteAuthor: `@
|
|
7
|
+
siteUrl: `https://tabler-react-2.pages.dev`,
|
|
8
|
+
siteAuthor: `@jackcrane`,
|
|
9
9
|
siteImage: `/banner.png`,
|
|
10
10
|
siteLanguage: `en`,
|
|
11
11
|
themeColor: `#066fd1`,
|
|
@@ -20,7 +20,7 @@ module.exports = {
|
|
|
20
20
|
homePath: `src/home`,
|
|
21
21
|
yamlFilesPath: `src/yamlFiles`,
|
|
22
22
|
repositoryUrl: `https://github.com/jackcrane/tabler-react-2`,
|
|
23
|
-
baseDir: `
|
|
23
|
+
baseDir: `docs`,
|
|
24
24
|
gatsbyRemarkPlugins: [],
|
|
25
25
|
},
|
|
26
26
|
},
|
package/docs/package.json
CHANGED
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
link: "/components/typography"
|
|
13
13
|
- label: "Cards"
|
|
14
14
|
link: "/components/cards"
|
|
15
|
+
- label: "Buttons"
|
|
16
|
+
link: "/components/buttons"
|
|
15
17
|
- label: "Horizontal Rule"
|
|
16
18
|
link: "/components/hr"
|
|
17
19
|
- label: "Alerts"
|
|
@@ -20,8 +22,6 @@
|
|
|
20
22
|
link: "/components/avatar"
|
|
21
23
|
- label: "Badges"
|
|
22
24
|
link: "/components/badges"
|
|
23
|
-
- label: "Buttons"
|
|
24
|
-
link: "/components/buttons"
|
|
25
25
|
- label: "Dropdown"
|
|
26
26
|
link: "/components/dropdown"
|
|
27
27
|
- label: "Dropdown Input"
|
|
@@ -40,19 +40,11 @@
|
|
|
40
40
|
link: "/components/steps"
|
|
41
41
|
- label: "Tables"
|
|
42
42
|
link: "/components/tables"
|
|
43
|
+
- label: "Timeline"
|
|
44
|
+
link: "/components/timeline"
|
|
43
45
|
- label: "Utilities"
|
|
44
46
|
items:
|
|
45
47
|
- label: "Colors"
|
|
46
48
|
link: "/utilities/colors"
|
|
47
49
|
- label: "Margins"
|
|
48
50
|
link: "/utilities/margins"
|
|
49
|
-
- label: "More"
|
|
50
|
-
items:
|
|
51
|
-
- label: "To do list"
|
|
52
|
-
link: "/todo"
|
|
53
|
-
# - label: More
|
|
54
|
-
# items:
|
|
55
|
-
# - label: FAQ
|
|
56
|
-
# link: /faq
|
|
57
|
-
# - label: "Github"
|
|
58
|
-
# link: https://github.com/jpedroschmitz/rocketdocs
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{
|
|
3
3
|
"name": "Ed Case",
|
|
4
4
|
"email": "ed.case@mail.house.gov",
|
|
5
|
-
"party": "
|
|
5
|
+
"party": "democrat",
|
|
6
6
|
"region": {
|
|
7
7
|
"state": "Hawaii",
|
|
8
8
|
"abbr": "HI",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
{
|
|
14
14
|
"name": "Mike Carey",
|
|
15
15
|
"email": "mike.carey@mail.house.gov",
|
|
16
|
-
"party": "
|
|
16
|
+
"party": "republican",
|
|
17
17
|
"region": {
|
|
18
18
|
"state": "Ohio",
|
|
19
19
|
"abbr": "OH",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
{
|
|
25
25
|
"name": "Andrew Clyde",
|
|
26
26
|
"email": "andrew.clyde@mail.house.gov",
|
|
27
|
-
"party": "
|
|
27
|
+
"party": "republican",
|
|
28
28
|
"region": {
|
|
29
29
|
"state": "Georgia",
|
|
30
30
|
"abbr": "GA",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
{
|
|
36
36
|
"name": "Angie Craig",
|
|
37
37
|
"email": "angie.craig@mail.house.gov",
|
|
38
|
-
"party": "
|
|
38
|
+
"party": "democrat",
|
|
39
39
|
"region": {
|
|
40
40
|
"state": "Minnesota",
|
|
41
41
|
"abbr": "MN",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
{
|
|
47
47
|
"name": "Rick Crawford",
|
|
48
48
|
"email": "rick.crawford@mail.house.gov",
|
|
49
|
-
"party": "
|
|
49
|
+
"party": "republican",
|
|
50
50
|
"region": {
|
|
51
51
|
"state": "Arkansas",
|
|
52
52
|
"abbr": "AR",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
{
|
|
58
58
|
"name": "Jared Golden",
|
|
59
59
|
"email": "jared.golden@mail.house.gov",
|
|
60
|
-
"party": "
|
|
60
|
+
"party": "democrat",
|
|
61
61
|
"region": {
|
|
62
62
|
"state": "Maine",
|
|
63
63
|
"abbr": "ME",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
{
|
|
69
69
|
"name": "Dusty Johnson",
|
|
70
70
|
"email": "dusty.johnson@mail.house.gov",
|
|
71
|
-
"party": "
|
|
71
|
+
"party": "republican",
|
|
72
72
|
"region": {
|
|
73
73
|
"state": "South Dakota",
|
|
74
74
|
"abbr": "SD",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
{
|
|
80
80
|
"name": "Susie Lee",
|
|
81
81
|
"email": "susie.lee@mail.house.gov",
|
|
82
|
-
"party": "
|
|
82
|
+
"party": "democrat",
|
|
83
83
|
"region": {
|
|
84
84
|
"state": "Nevada",
|
|
85
85
|
"abbr": "NV",
|
|
@@ -35,7 +35,7 @@ import { Table } from "tabler-react-2";
|
|
|
35
35
|
{
|
|
36
36
|
"name": "Ed Case",
|
|
37
37
|
"email": "ed.case@mail.house.gov",
|
|
38
|
-
"party": "
|
|
38
|
+
"party": "democrat",
|
|
39
39
|
"region": {
|
|
40
40
|
"state": "Hawaii",
|
|
41
41
|
"abbr": "HI",
|
|
@@ -46,7 +46,7 @@ import { Table } from "tabler-react-2";
|
|
|
46
46
|
{
|
|
47
47
|
"name": "Mike Carey",
|
|
48
48
|
"email": "mike.carey@mail.house.gov",
|
|
49
|
-
"party": "
|
|
49
|
+
"party": "republican",
|
|
50
50
|
"region": {
|
|
51
51
|
"state": "Ohio",
|
|
52
52
|
"abbr": "OH",
|
|
@@ -57,7 +57,7 @@ import { Table } from "tabler-react-2";
|
|
|
57
57
|
{
|
|
58
58
|
"name": "Andrew Clyde",
|
|
59
59
|
"email": "andrew.clyde@mail.house.gov",
|
|
60
|
-
"party": "
|
|
60
|
+
"party": "republican",
|
|
61
61
|
"region": {
|
|
62
62
|
"state": "Georgia",
|
|
63
63
|
"abbr": "GA",
|
|
@@ -68,7 +68,7 @@ import { Table } from "tabler-react-2";
|
|
|
68
68
|
{
|
|
69
69
|
"name": "Angie Craig",
|
|
70
70
|
"email": "angie.craig@mail.house.gov",
|
|
71
|
-
"party": "
|
|
71
|
+
"party": "democrat",
|
|
72
72
|
"region": {
|
|
73
73
|
"state": "Minnesota",
|
|
74
74
|
"abbr": "MN",
|
|
@@ -79,7 +79,7 @@ import { Table } from "tabler-react-2";
|
|
|
79
79
|
{
|
|
80
80
|
"name": "Rick Crawford",
|
|
81
81
|
"email": "rick.crawford@mail.house.gov",
|
|
82
|
-
"party": "
|
|
82
|
+
"party": "republican",
|
|
83
83
|
"region": {
|
|
84
84
|
"state": "Arkansas",
|
|
85
85
|
"abbr": "AR",
|
|
@@ -90,7 +90,7 @@ import { Table } from "tabler-react-2";
|
|
|
90
90
|
{
|
|
91
91
|
"name": "Jared Golden",
|
|
92
92
|
"email": "jared.golden@mail.house.gov",
|
|
93
|
-
"party": "
|
|
93
|
+
"party": "democrat",
|
|
94
94
|
"region": {
|
|
95
95
|
"state": "Maine",
|
|
96
96
|
"abbr": "ME",
|
|
@@ -101,7 +101,7 @@ import { Table } from "tabler-react-2";
|
|
|
101
101
|
{
|
|
102
102
|
"name": "Dusty Johnson",
|
|
103
103
|
"email": "dusty.johnson@mail.house.gov",
|
|
104
|
-
"party": "
|
|
104
|
+
"party": "republican",
|
|
105
105
|
"region": {
|
|
106
106
|
"state": "South Dakota",
|
|
107
107
|
"abbr": "SD",
|
|
@@ -112,7 +112,7 @@ import { Table } from "tabler-react-2";
|
|
|
112
112
|
{
|
|
113
113
|
"name": "Susie Lee",
|
|
114
114
|
"email": "susie.lee@mail.house.gov",
|
|
115
|
-
"party": "
|
|
115
|
+
"party": "democrat",
|
|
116
116
|
"region": {
|
|
117
117
|
"state": "Nevada",
|
|
118
118
|
"abbr": "NV",
|
|
@@ -452,3 +452,5 @@ const customSortFn = (a, b) => {
|
|
|
452
452
|
data={congressPeople}
|
|
453
453
|
/>;
|
|
454
454
|
```
|
|
455
|
+
|
|
456
|
+
> **Note**: Sorting only works for the data in the table. If, for example, you have thousands of rows and are only rendering a few, you will need to handle the sorting yourself, outside of the table. Incorporating internal pagination that supports sorting is a planned feature but not yet implemented.
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Timeline
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { Timeline } from "../../components/LoadableTabler";
|
|
6
|
+
import { Excerpt } from "../../components/Excerpt.jsx";
|
|
7
|
+
import { IconCheck, IconMessage, IconUser } from "@tabler/icons-react";
|
|
8
|
+
|
|
9
|
+
Timeline is a component that displays a list of events. Used to communicate a series of related events, usually in a chronological order.
|
|
10
|
+
|
|
11
|
+
## Signature
|
|
12
|
+
|
|
13
|
+
```jsx
|
|
14
|
+
import { Timeline } from "tabler-react-2";
|
|
15
|
+
|
|
16
|
+
<Timeline {...props} />;
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Props
|
|
20
|
+
|
|
21
|
+
| Prop | Required | Type | Default | Description |
|
|
22
|
+
| -------- | -------- | ------------------------- | ------- | --------------------------- |
|
|
23
|
+
| `events` | Yes | [`EventList`](#eventlist) | | A list of events to display |
|
|
24
|
+
| `dense` | No | `boolean` | `false` | Dense mode |
|
|
25
|
+
|
|
26
|
+
### EventList
|
|
27
|
+
|
|
28
|
+
The `events` prop is an array of objects that define the events to display. Each event object must contain the following properties:
|
|
29
|
+
|
|
30
|
+
| Prop | Required | Type | Default | Description |
|
|
31
|
+
| -------------- | -------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
32
|
+
| `icon` | Yes | `node` | | The icon to display for the event. This can be any React node, but it is recommended to use an SVG icon from the `@tabler/icons-react` package. |
|
|
33
|
+
| `iconBgClass` | No | `string` | | Optional background color class for the icon. |
|
|
34
|
+
| `time` | Yes | `string` | | The time of the event (e.g., "10 hrs ago"). |
|
|
35
|
+
| `title` | Yes | `string` | | The title of the event (e.g., "+1150 Followers"). |
|
|
36
|
+
| `description` | Yes | `string` | | The description of the event. |
|
|
37
|
+
| `extraContent` | No | `node` | | Optional extra content (e.g., images, avatars, etc.). |
|
|
38
|
+
|
|
39
|
+
## Basic Usage
|
|
40
|
+
|
|
41
|
+
<Excerpt>
|
|
42
|
+
<div style={{ width: 400 }}>
|
|
43
|
+
<Timeline
|
|
44
|
+
events={[
|
|
45
|
+
{
|
|
46
|
+
icon: IconCheck,
|
|
47
|
+
time: "10 hrs ago",
|
|
48
|
+
title: "+1150 Followers",
|
|
49
|
+
description: "Joined the community",
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
icon: IconMessage,
|
|
53
|
+
time: "1 hr ago",
|
|
54
|
+
title: "New message",
|
|
55
|
+
description: "You have 1 new message",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
icon: IconUser,
|
|
59
|
+
time: "1 hr ago",
|
|
60
|
+
title: "New user",
|
|
61
|
+
description: "You have 1 new user",
|
|
62
|
+
},
|
|
63
|
+
]}
|
|
64
|
+
/>
|
|
65
|
+
</div>
|
|
66
|
+
</Excerpt>
|