-
Notifications
You must be signed in to change notification settings - Fork 66
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
fafba58
commit db20395
Showing
12 changed files
with
149 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,40 +1,32 @@ | ||
import React, { FC } from 'react'; | ||
import classNames from 'classnames'; | ||
import { TdDividerProps } from './type'; | ||
import { dividerDefaultProps } from './defaultProps'; | ||
import { StyledProps } from '../common'; | ||
import useConfig from '../_util/useConfig'; | ||
import withNativeProps, { NativeProps } from '../_util/withNativeProps'; | ||
import useDefaultProps from '../hooks/useDefaultProps'; | ||
|
||
export interface DividerProps extends TdDividerProps, NativeProps {} | ||
|
||
const defaultProps = { | ||
align: 'center', | ||
dashed: false, | ||
layout: 'horizontal', | ||
lineColor: '', | ||
}; | ||
export interface DividerProps extends TdDividerProps, StyledProps {} | ||
|
||
const Divider: FC<DividerProps> = (props) => { | ||
const { children, align, dashed, layout, lineColor, content } = props; | ||
const { children, align, dashed, layout, content, style } = useDefaultProps<DividerProps>(props, dividerDefaultProps); | ||
const { classPrefix } = useConfig(); | ||
const name = `${classPrefix}-divider`; | ||
const dividerClass = `${classPrefix}-divider`; | ||
const contentNode = content || children; | ||
|
||
const classes = classNames(name, { | ||
[`${name}-${layout}`]: layout, | ||
[`${name}--hairline`]: true, | ||
[`${name}--content-${align}`]: align && contentNode, | ||
[`${name}--dashed`]: dashed, | ||
const classes = classNames(dividerClass, { | ||
[`${dividerClass}--${layout}`]: layout, | ||
[`${dividerClass}--${align}`]: align, | ||
[`${dividerClass}--dashed`]: dashed, | ||
}); | ||
|
||
return withNativeProps( | ||
props, | ||
<div className={classes} style={lineColor ? { borderColor: lineColor } : undefined}> | ||
{contentNode && <span className={`${name}__content`}>{contentNode}</span>} | ||
</div>, | ||
return ( | ||
<div className={classes} style={style} role="separator"> | ||
<div className={`${dividerClass}__content`}>{contentNode}</div> | ||
</div> | ||
); | ||
}; | ||
|
||
Divider.defaultProps = defaultProps as DividerProps; | ||
Divider.displayName = 'Divider'; | ||
|
||
export default Divider; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import React from 'react'; | ||
import { describe, expect, it, render, waitFor } from '@test/utils'; | ||
import Divider from '../Divider'; | ||
import { TdDividerProps } from '../type'; | ||
|
||
describe('Divider', () => { | ||
describe('props', () => { | ||
it(':align', async () => { | ||
const testId = 'divider test align'; | ||
const aligns: TdDividerProps['align'][] = ['left', 'right', 'center']; | ||
const { getByTestId } = render( | ||
<div data-testid={testId}> | ||
{aligns?.map((align, index) => ( | ||
<Divider key={index} align={align} /> | ||
))} | ||
</div>, | ||
); | ||
|
||
const instance = await waitFor(() => getByTestId(testId)); | ||
|
||
for (let index = 0; index < aligns.length; index++) { | ||
const align = aligns[index]; | ||
expect(() => instance.querySelector(`.t-divider--${align}`)).toBeTruthy(); | ||
} | ||
}); | ||
|
||
it(':layout', async () => { | ||
const testId = 'divider test layout'; | ||
const layouts: TdDividerProps['layout'][] = ['horizontal', 'vertical']; | ||
const { getByTestId } = render( | ||
<div data-testid={testId}> | ||
{layouts?.map((layout, index) => ( | ||
<Divider key={index} layout={layout} /> | ||
))} | ||
</div>, | ||
); | ||
|
||
const instance = await waitFor(() => getByTestId(testId)); | ||
|
||
for (let index = 0; index < layouts.length; index++) { | ||
const layout = layouts[index]; | ||
expect(() => instance.querySelector(`.t-divider--${layout}`)).toBeTruthy(); | ||
} | ||
}); | ||
|
||
it(':dashed', async () => { | ||
const { container } = render(<Divider dashed />); | ||
const dividerElement = container.firstChild; | ||
expect(dividerElement).toHaveClass('t-divider--dashed'); | ||
}); | ||
|
||
it(':content', async () => { | ||
const content = 'DividerContent'; | ||
const { getByText } = render(<Divider content={content}></Divider>); | ||
expect(getByText(content).textContent).toBeTruthy(); | ||
}); | ||
it(':children', async () => { | ||
const content = 'DividerContent'; | ||
const { getByText } = render(<Divider>{content}</Divider>); | ||
expect(getByText(content).textContent).toBeTruthy(); | ||
}); | ||
}); | ||
}); |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,17 @@ | ||
.tdesign-mobile-demo { | ||
background-color: #fff; | ||
padding-bottom: 16px; | ||
|
||
.divider-demo-container { | ||
h3 { | ||
font-size: 12px; | ||
font-weight: 400; | ||
font-family: 'PingFang SC'; | ||
color: #a9a9a9; | ||
padding: 16px; | ||
} | ||
} | ||
} | ||
|
||
.t-demo1 { | ||
margin: 0 16px; | ||
} | ||
|
||
.t-demo2 { | ||
margin-left: 16px; | ||
.divider-demo__title { | ||
font-size: 14px; | ||
color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6)); | ||
padding: 8px 16px; | ||
line-height: 20px; | ||
} | ||
|
||
.t-demo3 { | ||
margin-left: 76px; | ||
} | ||
|
||
.vertical-panel { | ||
.divider-wrapper { | ||
display: flex; | ||
height: 20px; | ||
margin: 0 16px; | ||
font-size: 12px; | ||
color: rgba(0, 0, 0, 0.4); | ||
align-items: center; | ||
font-size: 14px; | ||
color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9)); | ||
padding-left: 16px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from 'react'; | ||
import { Divider } from 'tdesign-mobile-react'; | ||
import './style/index.less'; | ||
|
||
export default function Theme() { | ||
return ( | ||
<div> | ||
<div className="divider-demo__title">虚线样式</div> | ||
<Divider dashed /> | ||
<Divider dashed content="文字信息" align="left" /> | ||
<Divider dashed content="文字信息" /> | ||
<Divider dashed content="文字信息" align="right" /> | ||
</div> | ||
); | ||
} |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
/** | ||
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC | ||
* */ | ||
|
||
import { TdDividerProps } from './type'; | ||
|
||
export const dividerDefaultProps: TdDividerProps = { align: 'center', dashed: false, layout: 'horizontal' }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
:: BASE_DOC :: | ||
|
||
## API | ||
|
||
### Divider Props | ||
|
||
name | type | default | description | required | ||
-- | -- | -- | -- | -- | ||
className | String | - | className of component | N | ||
style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N | ||
align | String | center | options: left/right/center | N | ||
children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N | ||
content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N | ||
dashed | Boolean | false | \- | N | ||
layout | String | horizontal | options: horizontal/vertical | N |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,14 @@ | ||
:: BASE_DOC :: | ||
## API | ||
|
||
### Divider Props | ||
|
||
名称 | 类型 | 默认值 | 说明 | 必传 | ||
名称 | 类型 | 默认值 | 描述 | 必传 | ||
-- | -- | -- | -- | -- | ||
className | String | - | 类名 | N | ||
style | Object | - | 样式,TS 类型:`React.CSSProperties` | N | ||
align | String | center | 文本位置(仅在水平分割线有效)。可选项:left/right/center | N | ||
children | TNode | - | 子元素,同 content。TS 类型:`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N | ||
content | TNode | - | 子元素。TS 类型:`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N | ||
children | TNode | - | 子元素,同 content。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N | ||
content | TNode | - | 子元素。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N | ||
dashed | Boolean | false | 是否虚线(仅在水平分割线有效) | N | ||
layout | String | horizontal | 分隔线类型有两种:水平和垂直。可选项:horizontal/vertical | N | ||
lineColor | String | - | 分隔线颜色 | N |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters