Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* docs: add watermark docs * docs: add watermark demo * test: add watermark test * test: add watermark snapshot * chore: add jest-canvas-mock
- Loading branch information
Showing
24 changed files
with
727 additions
and
1 deletion.
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
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
63 changes: 63 additions & 0 deletions
63
components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
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 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`renders ./components/watermark/demo/basic.tsx extend context correctly 1`] = ` | ||
<div | ||
style="position:relative" | ||
> | ||
<div | ||
style="height:500px" | ||
/> | ||
</div> | ||
`; | ||
|
||
exports[`renders ./components/watermark/demo/image.tsx extend context correctly 1`] = ` | ||
<div | ||
style="position:relative" | ||
> | ||
<div | ||
style="height:500px" | ||
/> | ||
</div> | ||
`; | ||
|
||
exports[`renders ./components/watermark/demo/multi-line.tsx extend context correctly 1`] = ` | ||
<div | ||
style="position:relative" | ||
> | ||
<div | ||
style="height:500px" | ||
/> | ||
</div> | ||
`; | ||
|
||
exports[`renders ./components/watermark/demo/z-index.tsx extend context correctly 1`] = ` | ||
<div | ||
style="position:relative" | ||
> | ||
<article | ||
class="ant-typography" | ||
> | ||
<div | ||
class="ant-typography" | ||
> | ||
The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design. | ||
</div> | ||
<div | ||
class="ant-typography" | ||
> | ||
Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience. | ||
</div> | ||
<div | ||
class="ant-typography" | ||
> | ||
Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural. | ||
</div> | ||
</article> | ||
<img | ||
alt="示例图片" | ||
src="https://gw.alipayobjects.com/zos/bmw-prod/d283f09a-64d6-4d59-bfc7-37b49ea0da2b.svg" | ||
style="z-index:10;max-width:100%;position:relative" | ||
width="600" | ||
/> | ||
</div> | ||
`; |
63 changes: 63 additions & 0 deletions
63
components/watermark/__tests__/__snapshots__/demo.test.ts.snap
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 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`renders ./components/watermark/demo/basic.tsx correctly 1`] = ` | ||
<div | ||
style="position:relative" | ||
> | ||
<div | ||
style="height:500px" | ||
/> | ||
</div> | ||
`; | ||
|
||
exports[`renders ./components/watermark/demo/image.tsx correctly 1`] = ` | ||
<div | ||
style="position:relative" | ||
> | ||
<div | ||
style="height:500px" | ||
/> | ||
</div> | ||
`; | ||
|
||
exports[`renders ./components/watermark/demo/multi-line.tsx correctly 1`] = ` | ||
<div | ||
style="position:relative" | ||
> | ||
<div | ||
style="height:500px" | ||
/> | ||
</div> | ||
`; | ||
|
||
exports[`renders ./components/watermark/demo/z-index.tsx correctly 1`] = ` | ||
<div | ||
style="position:relative" | ||
> | ||
<article | ||
class="ant-typography" | ||
> | ||
<div | ||
class="ant-typography" | ||
> | ||
The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design. | ||
</div> | ||
<div | ||
class="ant-typography" | ||
> | ||
Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience. | ||
</div> | ||
<div | ||
class="ant-typography" | ||
> | ||
Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural. | ||
</div> | ||
</article> | ||
<img | ||
alt="示例图片" | ||
src="https://gw.alipayobjects.com/zos/bmw-prod/d283f09a-64d6-4d59-bfc7-37b49ea0da2b.svg" | ||
style="z-index:10;max-width:100%;position:relative" | ||
width="600" | ||
/> | ||
</div> | ||
`; |
57 changes: 57 additions & 0 deletions
57
components/watermark/__tests__/__snapshots__/index.test.tsx.snap
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,57 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Watermark Image watermark snapshot 1`] = ` | ||
<div> | ||
<div | ||
style="position: relative;" | ||
> | ||
<div | ||
data-watermark-id="7mte-1669650061677" | ||
style="z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 320px; pointer-events: none; background-repeat: repeat; background-position: 0px 0px; background-image: url('data:image/png;base64,00'); " | ||
/> | ||
</div> | ||
</div> | ||
`; | ||
|
||
exports[`Watermark MutationObserver should work properly 1`] = ` | ||
<div> | ||
<div | ||
class="watermark" | ||
style="position: relative;" | ||
/> | ||
</div> | ||
`; | ||
|
||
exports[`Watermark The offset should be correct 1`] = ` | ||
<div> | ||
<div | ||
class="watermark" | ||
style="position: relative;" | ||
> | ||
<div | ||
data-watermark-id="7mte-1669650061677" | ||
style="z-index: 9; position: absolute; left: 100px; top: 100px; width: calc(100% - 100px); height: calc(100% - 100px); background-size: 320px; pointer-events: none; background-repeat: repeat; background-position: 0px 0px; background-image: url('data:image/png;base64,00'); " | ||
/> | ||
</div> | ||
</div> | ||
`; | ||
|
||
exports[`Watermark The watermark should render successfully 1`] = ` | ||
<div> | ||
<div | ||
class="watermark" | ||
style="position: relative;" | ||
> | ||
<div | ||
data-watermark-id="7mte-1669650061677" | ||
style="z-index: 9; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 320px; pointer-events: none; background-repeat: repeat; background-position: 0px 0px; background-image: url('data:image/png;base64,00'); " | ||
/> | ||
</div> | ||
</div> | ||
`; | ||
|
||
exports[`Watermark rtl render component should be rendered correctly in RTL direction 1`] = ` | ||
<div | ||
style="position: relative;" | ||
/> | ||
`; |
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,3 @@ | ||
import { extendTest } from '../../../tests/shared/demoTest'; | ||
|
||
extendTest('watermark'); |
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,3 @@ | ||
import demoTest from '../../../tests/shared/demoTest'; | ||
|
||
demoTest('watermark'); |
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,5 @@ | ||
import { imageDemoTest } from '../../../tests/shared/imageTest'; | ||
|
||
describe('Watermark image', () => { | ||
imageDemoTest('watermark'); | ||
}); |
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,62 @@ | ||
import React from 'react'; | ||
import Watermark from '..'; | ||
import mountTest from '../../../tests/shared/mountTest'; | ||
import rtlTest from '../../../tests/shared/rtlTest'; | ||
import { render } from '../../../tests/utils'; | ||
|
||
describe('Watermark', () => { | ||
mountTest(Watermark); | ||
rtlTest(Watermark); | ||
|
||
const mockSrcSet = jest.spyOn(Image.prototype, 'src', 'set'); | ||
|
||
beforeAll(() => { | ||
mockSrcSet.mockImplementation(function fn() { | ||
if (this.onload) { | ||
this.onload(); | ||
} | ||
}); | ||
}); | ||
|
||
afterAll(() => { | ||
mockSrcSet.mockRestore(); | ||
}); | ||
|
||
it('The watermark should render successfully', () => { | ||
const { container } = render(<Watermark className="watermark" content="Ant Design" />); | ||
expect(container.querySelector('.watermark div')).toBeTruthy(); | ||
expect(container).toMatchSnapshot(); | ||
}); | ||
|
||
it('The offset should be correct', () => { | ||
const { container } = render( | ||
<Watermark | ||
className="watermark" | ||
offset={[200, 200]} | ||
content={['Ant Design', 'Ant Design Pro']} | ||
/>, | ||
); | ||
const target = container.querySelector('.watermark div') as HTMLDivElement; | ||
expect(target.style.left).toBe('100px'); | ||
expect(target.style.top).toBe('100px'); | ||
expect(target.style.width).toBe('calc(100% - 100px)'); | ||
expect(target.style.height).toBe('calc(100% - 100px)'); | ||
expect(container).toMatchSnapshot(); | ||
}); | ||
|
||
it('Image watermark snapshot', () => { | ||
const { container } = render( | ||
<Watermark image="https://gw.alipayobjects.com/zos/bmw-prod/59a18171-ae17-4fc5-93a0-2645f64a3aca.svg" />, | ||
); | ||
expect(container).toMatchSnapshot(); | ||
}); | ||
|
||
it('MutationObserver should work properly', () => { | ||
const { container } = render(<Watermark className="watermark" content="MutationObserver" />); | ||
const target = container.querySelector('.watermark div') as HTMLDivElement; | ||
target.style.zIndex = '0'; | ||
target.setAttribute('data-watermark-id', 'jfei'); | ||
target.remove(); | ||
expect(container).toMatchSnapshot(); | ||
}); | ||
}); |
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 @@ | ||
## zh-CN | ||
|
||
最简单的用法。 | ||
|
||
## en-US | ||
|
||
The most basic usage. |
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,10 @@ | ||
import React from 'react'; | ||
import { Watermark } from 'antd'; | ||
|
||
const App: React.FC = () => ( | ||
<Watermark content="Ant Design"> | ||
<div style={{ height: 500 }} /> | ||
</Watermark> | ||
); | ||
|
||
export default App; |
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 @@ | ||
## zh-CN | ||
|
||
通过 `image` 指定图片地址。为保证图片高清且不被拉伸,请设置 width 和 height, 并上传至少两倍的宽高的 logo 图片地址。 | ||
|
||
## en-US | ||
|
||
Specify the image address via 'image'. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address. |
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,14 @@ | ||
import React from 'react'; | ||
import { Watermark } from 'antd'; | ||
|
||
const App: React.FC = () => ( | ||
<Watermark | ||
height={36} | ||
width={115} | ||
image="https://gw.alipayobjects.com/zos/bmw-prod/59a18171-ae17-4fc5-93a0-2645f64a3aca.svg" | ||
> | ||
<div style={{ height: 500 }} /> | ||
</Watermark> | ||
); | ||
|
||
export default App; |
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 @@ | ||
## zh-CN | ||
|
||
通过 `content` 设置 字符串数组 指定多行文字水印内容。 | ||
|
||
## en-US | ||
|
||
Use 'content' to set a string array to specify multi-line text watermark content. |
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,10 @@ | ||
import React from 'react'; | ||
import { Watermark } from 'antd'; | ||
|
||
const App: React.FC = () => ( | ||
<Watermark content={['Ant Design', 'Ant Design Pro']}> | ||
<div style={{ height: 500 }} /> | ||
</Watermark> | ||
); | ||
|
||
export default App; |
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 @@ | ||
## zh-CN | ||
|
||
zIndex 默认值为 9,通过设置更大的 `zIndex` 堆叠在元素的顶级。 | ||
|
||
## en-US | ||
|
||
zIndex defaults to 9, by setting a larger `zIndex` to stack at the top level of the element. |
Oops, something went wrong.