From 6f83c63d743f614d19cb656f618f8e48da195ece Mon Sep 17 00:00:00 2001 From: JarvisArt <38420763+JarvisArt@users.noreply.github.com> Date: Thu, 8 Dec 2022 18:06:36 +0800 Subject: [PATCH] feat: New Component Watermark (#39064) * feat: New Component Watermark * docs: add watermark docs * docs: add watermark demo * test: add watermark test * test: add watermark snapshot * chore: add jest-canvas-mock * feat: Watermark calculates the width and height of content by default * docs: update docs * docs: update demo * test: update snapshot * docs: update docs * chore: update bundlesize * chore: Optimize code logic * chore: update size-limit * test: update watermark snapshot --- .jest.js | 2 +- .../__snapshots__/index.test.ts.snap | 1 + components/index.tsx | 2 + .../__snapshots__/demo-extend.test.ts.snap | 1290 +++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 788 ++++++++++ .../__snapshots__/index.test.tsx.snap | 71 + .../watermark/__tests__/demo-extend.test.ts | 3 + components/watermark/__tests__/demo.test.ts | 3 + components/watermark/__tests__/image.test.ts | 5 + components/watermark/__tests__/index.test.tsx | 69 + components/watermark/demo/basic.md | 7 + components/watermark/demo/basic.tsx | 10 + components/watermark/demo/custom.md | 7 + components/watermark/demo/custom.tsx | 166 +++ components/watermark/demo/image.md | 7 + components/watermark/demo/image.tsx | 14 + components/watermark/demo/multi-line.md | 7 + components/watermark/demo/multi-line.tsx | 10 + components/watermark/index.en-US.md | 50 + components/watermark/index.tsx | 262 ++++ components/watermark/index.zh-CN.md | 51 + components/watermark/useMutationObserver.ts | 32 + package.json | 5 +- tests/__snapshots__/index.test.ts.snap | 1 + 24 files changed, 2860 insertions(+), 3 deletions(-) create mode 100644 components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap create mode 100644 components/watermark/__tests__/__snapshots__/demo.test.ts.snap create mode 100644 components/watermark/__tests__/__snapshots__/index.test.tsx.snap create mode 100644 components/watermark/__tests__/demo-extend.test.ts create mode 100644 components/watermark/__tests__/demo.test.ts create mode 100644 components/watermark/__tests__/image.test.ts create mode 100644 components/watermark/__tests__/index.test.tsx create mode 100644 components/watermark/demo/basic.md create mode 100644 components/watermark/demo/basic.tsx create mode 100644 components/watermark/demo/custom.md create mode 100644 components/watermark/demo/custom.tsx create mode 100644 components/watermark/demo/image.md create mode 100644 components/watermark/demo/image.tsx create mode 100644 components/watermark/demo/multi-line.md create mode 100644 components/watermark/demo/multi-line.tsx create mode 100644 components/watermark/index.en-US.md create mode 100644 components/watermark/index.tsx create mode 100644 components/watermark/index.zh-CN.md create mode 100644 components/watermark/useMutationObserver.ts diff --git a/.jest.js b/.jest.js index 2af90f6d8f6a..679d0b161aa7 100644 --- a/.jest.js +++ b/.jest.js @@ -34,7 +34,7 @@ function getTestRegex(libDir) { module.exports = { verbose: true, testEnvironment: 'jsdom', - setupFiles: ['./tests/setup.js'], + setupFiles: ['./tests/setup.js', 'jest-canvas-mock'], setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'], modulePathIgnorePatterns: ['/_site/'], diff --git a/components/__tests__/__snapshots__/index.test.ts.snap b/components/__tests__/__snapshots__/index.test.ts.snap index a0b933818ac3..a44faf7cfcad 100644 --- a/components/__tests__/__snapshots__/index.test.ts.snap +++ b/components/__tests__/__snapshots__/index.test.ts.snap @@ -67,6 +67,7 @@ exports[`antd exports modules correctly 1`] = ` "TreeSelect", "Typography", "Upload", + "Watermark", "message", "notification", "theme", diff --git a/components/index.tsx b/components/index.tsx index 806fdee89a83..b3b5bd62ede2 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -150,6 +150,8 @@ export { default as Typography } from './typography'; export type { TypographyProps } from './typography'; export { default as Upload } from './upload'; export type { UploadFile, UploadProps } from './upload'; +export { default as Watermark } from './watermark'; +export type { WatermarkProps } from './watermark'; export { default as QRCode } from './qrcode'; export type { QRCodeProps, QRPropsCanvas } from './qrcode/interface'; export { default as version } from './version'; diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap new file mode 100644 index 000000000000..e5dc9abb7590 --- /dev/null +++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -0,0 +1,1290 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/watermark/demo/basic.tsx extend context correctly 1`] = ` +
+
+
+`; + +exports[`renders ./components/watermark/demo/custom.tsx extend context correctly 1`] = ` +
+
+
+
+ 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. +
+
+ 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. +
+
+ 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. +
+
+ 示例图片 +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+