Skip to content
This repository has been archived by the owner on Mar 1, 2024. It is now read-only.

Commit

Permalink
Merge pull request #309 from tabler/table-body-items-key
Browse files Browse the repository at this point in the history 
Table body items key.
  • Loading branch information
@AaronCoplan
AaronCoplan committed Oct 1, 2018
2 parents ee48dbe + 5281d49 commit 22be281
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 112 deletions.
100 changes: 50 additions & 50 deletions example/src/App.react.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
// @flow

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import {
Expand Down Expand Up @@ -54,54 +52,56 @@ type Props = {||};

function App(props: Props): React.Node {
return (
<Router basename={process.env.PUBLIC_URL}>
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/400" component={Error400} />
<Route exact path="/401" component={Error401} />
<Route exact path="/403" component={Error403} />
<Route exact path="/404" component={Error404} />
<Route exact path="/500" component={Error500} />
<Route exact path="/503" component={Error503} />
<Route exact path="/blog" component={BlogPage} />
<Route exact path="/cards" component={CardsDesignPage} />
<Route exact path="/charts" component={ChartsPage} />
<Route exact path="/docs" component={DocsIntroPage} />
<Route exact path="/docs/alerts" component={DocsAlertsPage} />
<Route exact path="/docs/buttons" component={DocsButtonsPage} />
<Route exact path="/docs/avatars" component={DocsAvatarsPage} />
<Route exact path="/docs/badges" component={DocsBadgePage} />
<Route exact path="/docs/cards" component={DocsCardsPage} />
<Route exact path="/docs/charts" component={DocsChartsPage} />
<Route exact path="/docs/colors" component={DocsColorsPage} />
<Route exact path="/docs/dropdowns" component={DocsDropdownPage} />
<Route
exact
path="/docs/form-components"
component={DocsFormComponentsPage}
/>
<Route exact path="/docs/grids" component={DocsGridPage} />
<Route exact path="/docs/lists" component={DocsListPage} />
<Route exact path="/docs/navs" component={DocsNavPage} />
<Route exact path="/docs/stamps" component={DocsStampPage} />
<Route exact path="/docs/tags" component={DocsTagsPage} />
<Route exact path="/docs/tables" component={DocsTablePage} />
<Route exact path="/docs/typography" component={DocsTypographyPage} />
<Route exact path="/email" component={Email} />
<Route exact path="/empty-page" component={Empty} />
<Route exact path="/form-elements" component={FormElementsPage} />
<Route exact path="/forgot-password" component={ForgotPasswordPage} />
<Route exact path="/gallery" component={GalleryPage} />
<Route exact path="/icons" component={IconPage} />
<Route exact path="/login" component={LoginPage} />
<Route exact path="/maps" component={MapCardsPage} />
<Route exact path="/pricing-cards" component={PricingCardsPage} />
<Route exact path="/profile" component={ProfilePage} />
<Route exact path="/register" component={RegisterPage} />
<Route exact path="/store" component={StoreCardsPage} />
<Route component={Error404} />
</Switch>
</Router>
<React.StrictMode>
<Router basename={process.env.PUBLIC_URL}>
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/400" component={Error400} />
<Route exact path="/401" component={Error401} />
<Route exact path="/403" component={Error403} />
<Route exact path="/404" component={Error404} />
<Route exact path="/500" component={Error500} />
<Route exact path="/503" component={Error503} />
<Route exact path="/blog" component={BlogPage} />
<Route exact path="/cards" component={CardsDesignPage} />
<Route exact path="/charts" component={ChartsPage} />
<Route exact path="/docs" component={DocsIntroPage} />
<Route exact path="/docs/alerts" component={DocsAlertsPage} />
<Route exact path="/docs/buttons" component={DocsButtonsPage} />
<Route exact path="/docs/avatars" component={DocsAvatarsPage} />
<Route exact path="/docs/badges" component={DocsBadgePage} />
<Route exact path="/docs/cards" component={DocsCardsPage} />
<Route exact path="/docs/charts" component={DocsChartsPage} />
<Route exact path="/docs/colors" component={DocsColorsPage} />
<Route exact path="/docs/dropdowns" component={DocsDropdownPage} />
<Route
exact
path="/docs/form-components"
component={DocsFormComponentsPage}
/>
<Route exact path="/docs/grids" component={DocsGridPage} />
<Route exact path="/docs/lists" component={DocsListPage} />
<Route exact path="/docs/navs" component={DocsNavPage} />
<Route exact path="/docs/stamps" component={DocsStampPage} />
<Route exact path="/docs/tags" component={DocsTagsPage} />
<Route exact path="/docs/tables" component={DocsTablePage} />
<Route exact path="/docs/typography" component={DocsTypographyPage} />
<Route exact path="/email" component={Email} />
<Route exact path="/empty-page" component={Empty} />
<Route exact path="/form-elements" component={FormElementsPage} />
<Route exact path="/forgot-password" component={ForgotPasswordPage} />
<Route exact path="/gallery" component={GalleryPage} />
<Route exact path="/icons" component={IconPage} />
<Route exact path="/login" component={LoginPage} />
<Route exact path="/maps" component={MapCardsPage} />
<Route exact path="/pricing-cards" component={PricingCardsPage} />
<Route exact path="/profile" component={ProfilePage} />
<Route exact path="/register" component={RegisterPage} />
<Route exact path="/store" component={StoreCardsPage} />
<Route component={Error404} />
</Switch>
</Router>
</React.StrictMode>
);
}

Expand Down
95 changes: 49 additions & 46 deletions example/src/HomePage.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -847,53 +847,56 @@ function Home() {
{ content: null },
]}
bodyItems={[
[
{
content: (
<Text RootComponent="span" muted>
001401
</Text>
),
},
{
content: (
<a href="invoice.html" className="text-inherit">
Design Works
</a>
),
},
{ content: "Carlson Limited" },
{ content: "87956621" },
{ content: "15 Dec 2017" },
{
content: (
<React.Fragment>
<span className="status-icon bg-success" /> Paid
</React.Fragment>
),
},
{ content: "$887" },
{
alignContent: "right",
content: (
<React.Fragment>
<Button size="sm" color="secondary">
Manage
</Button>
<div className="dropdown">
<Button
color="secondary"
size="sm"
isDropdownToggle
>
Actions
{
key: "1",
item: [
{
content: (
<Text RootComponent="span" muted>
001401
</Text>
),
},
{
content: (
<a href="invoice.html" className="text-inherit">
Design Works
</a>
),
},
{ content: "Carlson Limited" },
{ content: "87956621" },
{ content: "15 Dec 2017" },
{
content: (
<React.Fragment>
<span className="status-icon bg-success" /> Paid
</React.Fragment>
),
},
{ content: "$887" },
{
alignContent: "right",
content: (
<React.Fragment>
<Button size="sm" color="secondary">
Manage
</Button>
</div>
</React.Fragment>
),
},
{ content: <Icon link name="edit" /> },
],
<div className="dropdown">
<Button
color="secondary"
size="sm"
isDropdownToggle
>
Actions
</Button>
</div>
</React.Fragment>
),
},
{ content: <Icon link name="edit" /> },
],
},
]}
/>
</Card>
Expand Down
2 changes: 1 addition & 1 deletion example/src/components/BlogPage.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import * as React from "react";

import { Page, Grid, Card, Icon, BlogCard } from "tabler-react";
import { Page, Grid, BlogCard } from "tabler-react";
import SiteWrapper from "../SiteWrapper.react";

function BlogPage(): React.Node {
Expand Down
13 changes: 8 additions & 5 deletions example/src/documentation/DocsTablePage.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,14 @@ function DocsTablePage(): React.Node {
{ content: "Action" },
]}
bodyItems={[
[
{ content: "1" },
{ content: "Jon" },
{ content: <Button color="primary">Edit</Button> },
],
{
key: '1',
item: [
{ content: "1" },
{ content: "Jon" },
{ content: <Button color="primary">Edit</Button> },
]
},
]}
/>
</ComponentDemo>
Expand Down
7 changes: 6 additions & 1 deletion scripts/runflow
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
#!/usr/bin/env bash

flow version > /dev/null 2>&1
uses_global_flow=$?

yarn flow version > /dev/null 2>&1
uses_yarn=$?

npm run flow version > /dev/null 2>&1
uses_npm=$?

if [ $uses_yarn -eq 0 ]; then
if [ $uses_global_flow -eq 0 ]; then
flow
elif [ $uses_yarn -eq 0 ]; then
yarn flow
elif [ $uses_npm -eq 0 ]; then
npm run flow
Expand Down
22 changes: 13 additions & 9 deletions src/components/Table/Table.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,15 @@ import TableRow from "./TableRow.react";
import TableCol from "./TableCol.react";
import TableColHeader from "./TableColHeader.react";

type BodyItem = {|
key: string | number,
item: Array<{
+content?: React.Node,
+className?: string,
+alignContent?: "left" | "center" | "right",
}>
|};

type Props = {|
+children?: React.Node,
+className?: string,
Expand All @@ -27,13 +36,7 @@ type Props = {|
+hasOutline?: boolean,
+verticalAlign?: "center",
+headerItems?: Array<{ +content?: React.Node, +className?: string }>,
+bodyItems?: Array<
Array<{
+content?: React.Node,
+className?: string,
+alignContent?: "left" | "center" | "right",
}>
>,
+bodyItems?: Array<BodyItem>,
|};

function Table({
Expand Down Expand Up @@ -74,11 +77,12 @@ function Table({
const body = props.bodyItems && (
<Table.Body>
{props.bodyItems.map((row, i) => (
<Table.Row>
{row.map(col => (
<Table.Row key={row.key}>
{row.item.map((col, i) => (
<Table.Col
className={col.className}
alignContent={col.alignContent}
key={i}
>
{col.content}
</Table.Col>
Expand Down

0 comments on commit 22be281

Please sign in to comment.