Skip to content

Commit

Permalink
List aside prop (#142)
Browse files Browse the repository at this point in the history 
* create default aside component

* delete default aside component

* update list with aside prop

* create aside component for example

* delete card style

* texts update for aside component

* add optional component

* npm i

* add aside component test to list

* update list snapshots test

* update example package-lock.json

* fix resource test

Co-authored-by: Omer Faruk APLAK <[email protected]>
  • Loading branch information
@burcukaragozzz @omeraplak
burcukaragozzz and omeraplak authored Feb 24, 2021
1 parent 9dde495 commit 78517a6
Show file tree
Hide file tree
Showing 7 changed files with 233 additions and 179 deletions.
17 changes: 17 additions & 0 deletions example/src/components/aside.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from "react";
import { Card, CardProps } from "antd";

export const Aside: React.FC<CardProps> = (props: any) => {
return (
<Card
{...props}
title="Users List Details"
extra={<a href="#">More</a>}
>
<p>
You can view personal data of users registered in your system in
the user table.
</p>
</Card>
);
};
4 changes: 3 additions & 1 deletion example/src/components/pages/user.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ import {
DateField,
} from "readmin";

import { Aside } from "../aside";

export const UserList = (props: any) => {
return (
<List {...props}>
<List {...props} aside={Aside}>
<Table
rowKey="id"
pagination={{
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

316 changes: 163 additions & 153 deletions src/components/crud/list/__snapshots__/index.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,189 +3,199 @@
exports[`<List/> JSON Rest Server renders given data 1`] = `
<div>
<div
class="ant-card ant-card-bordered"
class="ant-row"
style="margin: -8px -8px -8px -8px;"
>
<div
class="ant-card-head"
class="ant-col"
style="padding: 8px 8px 8px 8px; flex: 1 1 200px;"
>
<div
class="ant-card-head-wrapper"
class="ant-card ant-card-bordered"
>
<div
class="ant-card-head-title"
class="ant-card-head"
>
Posts
</div>
</div>
</div>
<div
class="ant-card-body"
style="padding: 0px;"
>
<div
class="ant-table-wrapper"
style="width: 100%;"
>
<div
class="ant-spin-nested-loading"
>
<div>
<div
class="ant-card-head-wrapper"
>
<div
class="ant-spin ant-spin-spinning"
class="ant-card-head-title"
>
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
Posts
</div>
</div>
</div>
<div
class="ant-card-body"
style="padding: 0px; flex: 1;"
>
<div
class="ant-spin-container ant-spin-blur"
class="ant-table-wrapper"
style="width: 100%;"
>
<div
class="ant-table"
class="ant-spin-nested-loading"
>
<div>
<div
class="ant-spin ant-spin-spinning"
>
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
</div>
</div>
<div
class="ant-table-container"
class="ant-spin-container ant-spin-blur"
>
<div
class="ant-table-content"
class="ant-table"
>
<table
style="table-layout: auto;"
<div
class="ant-table-container"
>
<colgroup />
<thead
class="ant-table-thead"
<div
class="ant-table-content"
>
<tr>
<th
class="ant-table-cell"
>
Title
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
<table
style="table-layout: auto;"
>
<td
class="ant-table-cell"
<colgroup />
<thead
class="ant-table-thead"
>
Necessitatibus necessitatibus id et cupiditate provident est qui amet.
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="2"
>
<td
class="ant-table-cell"
<tr>
<th
class="ant-table-cell"
>
Title
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
Recusandae consectetur aut atque est.
</td>
</tr>
</tbody>
</table>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
>
<td
class="ant-table-cell"
>
Necessitatibus necessitatibus id et cupiditate provident est qui amet.
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="2"
>
<td
class="ant-table-cell"
>
Recusandae consectetur aut atque est.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<ul
class="ant-pagination ant-table-pagination ant-table-pagination-right"
unselectable="unselectable"
>
<li
aria-disabled="true"
class="ant-pagination-prev ant-pagination-disabled"
title="Previous Page"
>
<button
class="ant-pagination-item-link"
disabled=""
tabindex="-1"
type="button"
<ul
class="ant-pagination ant-table-pagination ant-table-pagination-right"
unselectable="unselectable"
>
<span
aria-label="left"
class="anticon anticon-left"
role="img"
<li
aria-disabled="true"
class="ant-pagination-prev ant-pagination-disabled"
title="Previous Page"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<button
class="ant-pagination-item-link"
disabled=""
tabindex="-1"
type="button"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</button>
</li>
<li
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
tabindex="0"
title="1"
>
<a
rel="nofollow"
>
1
</a>
</li>
<li
aria-disabled="true"
class="ant-pagination-next ant-pagination-disabled"
title="Next Page"
>
<button
class="ant-pagination-item-link"
disabled=""
tabindex="-1"
type="button"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
<span
aria-label="left"
class="anticon anticon-left"
role="img"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</button>
</li>
<li
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
tabindex="0"
title="1"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<a
rel="nofollow"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</button>
</li>
</ul>
1
</a>
</li>
<li
aria-disabled="true"
class="ant-pagination-next ant-pagination-disabled"
title="Next Page"
>
<button
class="ant-pagination-item-link"
disabled=""
tabindex="-1"
type="button"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 78517a6

Please sign in to comment.