Skip to content

Commit

Permalink
refactor(Card): convert to TypeScript, improve docs and tests, close#…
Browse files Browse the repository at this point in the history
…4571
  • Loading branch information
FairyYang authored and eternalsky committed Sep 10, 2024
1 parent 324b0d3 commit 15ff8b6
Show file tree
Hide file tree
Showing 22 changed files with 745 additions and 578 deletions.
90 changes: 0 additions & 90 deletions components/card/__docs__/adaptor/index.jsx

This file was deleted.

121 changes: 121 additions & 0 deletions components/card/__docs__/adaptor/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import React from 'react';
import { Card, Button } from '@alifd/next';
import { Types } from '@alifd/adaptor-helper';

export default {
name: 'Card',
editor: () => ({
props: [
{
name: 'divider',
type: Types.bool,
default: true,
},
{
name: 'width',
type: Types.number,
default: 300,
},
{
name: 'height',
label: 'height',
type: Types.number,
default: 215,
},
{
name: 'title',
type: Types.string,
default: 'Title',
},
{
name: 'subTitle',
label: 'Subtitle',
type: Types.string,
default: '',
},
{
name: 'extra',
label: 'Extra Data',
type: Types.string,
default: '',
},
],
data: {
default: '',
},
}),
adaptor: ({
bullet,
divider,
expand,
width,
height,
title,
subTitle,
extra,
style,
data,
...others
}: any) => {
const cardStyle = {
width: width === 0 ? '' : width,
height: height === 0 ? 'auto' : height,
...style,
};

return (
<Card free style={cardStyle} {...others}>
<Card.Header
title={title}
subTitle={subTitle}
extra={
<Button text type="primary">
{extra}
</Button>
}
/>
{divider && <Card.Divider />}
<Card.Content>{data}</Card.Content>
</Card>
);
},
content: () => ({
options: [
{
name: 'bullet',
options: ['show', 'hide'],
default: 'hide',
},
{
name: 'divider',
options: ['show', 'hide'],
default: 'show',
},
{
name: 'expanded',
options: ['yes', 'no'],
default: 'no',
},
{
name: 'subTitle',
options: ['show', 'hide'],
default: 'hide',
},
{
name: 'link',
options: ['show', 'hide'],
default: 'hide',
},
],
transform: (props: any, { bullet, divider, expanded, subTitle, link }: any) => {
return {
...props,
bullet: bullet === 'show',
divider: divider === 'show',
expand: expanded === 'yes',
subTitle: subTitle === 'show' ? 'Sub Title' : '',
extra: link === 'show' ? 'Link' : '',
};
},
}),
};
6 changes: 3 additions & 3 deletions components/card/__docs__/demo/divider/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
import { Card, Button, Box } from '@alifd/next';

const commonProps = {
title: 'Title',
title: 'Simple Card',
style: { width: 300 },
subTitle: 'Sub-title',
extra: (
Expand All @@ -16,7 +16,7 @@ const commonProps = {
ReactDOM.render(
<Box direction="row" spacing={20}>
<Card free style={{ width: 300 }}>
<Card.Header title="Simple Card" {...commonProps} />
<Card.Header {...commonProps} />
<Card.Divider />
<Card.Content>
Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum
Expand All @@ -34,7 +34,7 @@ ReactDOM.render(
</Card.Actions>
</Card>
<Card free style={{ width: 300 }}>
<Card.Header title="Simple Card" {...commonProps} />
<Card.Header {...commonProps} />
<Card.Divider inset />
<Card.Content>
Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum
Expand Down
75 changes: 38 additions & 37 deletions components/card/__docs__/index.en-us.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,50 +19,51 @@ A card could contain a photo, text, and a link about a single subject.

### Card

| Param | Description | Type | Default Value |
| --------------- | ------------ | ------------- | ---- |
| title | Title of card | String | - |
| subTitle | Sub title of card | String | - |
| showTitleBullet | If show title bullet | Boolean | true |
| showHeadDivider | If show head divider | Boolean | true |
| contentHeight | Height of content | String/Number | 120 |
| extra | Extra of card header | ReactNode | - |
| media | Media content | ReactNode | - |
| actions | Actions of card | ReactNode | - |
| free | Whether to open free mode, if opened, can`t set title subTitle ..., must use Card.Header Card.Content ... to set Card | Boolean | - |
| Param | Description | Type | Default Value | Required | Supported Version |
| --------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------- | -------- | ----------------- |
| media | Media content | ReactNode | - | | - |
| title | Title of card | ReactNode | - | | - |
| subTitle | Sub title of card | ReactNode | - | | - |
| actions | Actions of card | ReactNode | - | | - |
| showTitleBullet | If show title bullet | boolean | true | | - |
| showHeadDivider | If show head divider | boolean | true | | - |
| contentHeight | Height of content | string \| number | 120 | | - |
| extra | Extra of card header | ReactNode | - | | - |
| free | Whether to open free mode, if opened, can not set title subTitle ..., must use Card.Header Card.Content ... to set Card | boolean | false | | - |
| hasBorder | Whether to show border | boolean | true | | 1.24 |

### Card.Actions
### Card.Media

| Param | Description | Type | Default Value |
| --------- | ------ | ------ | ----- |
| component | The html tag to be rendered | custom | 'div' |
| Param | Description | Type | Default Value | Required |
| --------- | --------------------------- | ----------- | ------------- | -------- |
| component | The html tag to be rendered | ElementType | 'div' | |
| image | Media background image | string | - | |
| src | Media source URL | string | - | |

### Card.Content
### Card.Header

| Param | Description | Type | Default Value |
| --------- | ------ | ------ | ----- |
| component | The html tag to be rendered | custom | 'div' |
| Param | Description | Type | Default Value | Required |
| --------- | --------------------------- | ----------- | ------------- | -------- |
| title | Title of card | ReactNode | - | |
| subTitle | Sub Title of Card | ReactNode | - | |
| extra | Extra of card header | ReactNode | - | |
| component | The html tag to be rendered | ElementType | 'div' | |

### Card.Divider
### Card.Content

| Param | Description | Type | Default Value |
| --------- | ------ | ------ | ---- |
| component | The html tag to be rendered | custom | 'hr' |
| inset | inset | Boolean | - |
| Param | Description | Type | Default Value | Required |
| --------- | --------------------------- | ----------- | ------------- | -------- |
| component | The html tag to be rendered | ElementType | 'div' | |

### Card.Header
### Card.Divider

| 参数 | 说明 | 类型 | 默认值 |
| --------- | ------------ | --------- | ----- |
| title | Title of card | ReactNode | - |
| subTitle | Sub Title of Card | ReactNode | - |
| extra | Extra of card header | ReactNode | - |
| component | The html tag to be rendered | custom | 'div' |
| Param | Description | Type | Default Value | Required |
| --------- | --------------------------- | ----------- | ------------- | -------- |
| component | The html tag to be rendered | ElementType | 'hr' | |
| inset | Inset | boolean | - | |

### Card.Media
### Card.Actions

| 参数 | 说明 | 类型 | 默认值 |
| --------- | ------- | ------ | ----- |
| component | The html tag to be rendered | custom | 'div' |
| image | Media background image | String | - |
| src | Media source URL | String | - |
| Param | Description | Type | Default Value | Required |
| --------- | --------------------------- | ----------- | ------------- | -------- |
| component | The html tag to be rendered | ElementType | 'div' | |
Loading

0 comments on commit 15ff8b6

Please sign in to comment.