feat(page): add props to control the style of dot

components/page/__tests__/__snapshots__/index.test.tsx.snap

@@ -24,3 +24,36 @@ exports[`Page should render correctly 1`] = `
         }
       </style></section>"
 `;
+
+exports[`Page should work correctly with dot configs 1`] = `
+"<section><main class=\\"\\"><style>
+        main {
+          font-size: calc(1 * 16px);
+          width: 100%;
+          height: 100%;
+          padding: calc(3.125 * 16px) 0 calc(3.125 * 16px) 0;
+          margin: 0 0 0 0;
+        }
+      </style></main><span><style>
+        :global(body) {
+          background-image: radial-gradient(#e3e3e3 20px, transparent 0),
+            radial-gradient(#e3e3e3 20px, transparent 0);
+          background-position: 0 0, calc(0.5 * 25px) calc(0.5 * 25px);
+          background-attachment: fixed;
+          background-size: calc(0.5 * 50px) calc(0.5 * 50px);
+        }
+      </style></span><style>
+        section {
+          max-width: 100vw;
+          min-height: 100vh;
+          box-sizing: border-box;
+          position: relative;
+          font-size: calc(1 * 16px);
+          width: calc(100% - 100pt);
+          height: auto;
+          padding: 0 calc(1.34 * 16px) 0 calc(1.34 * 16px);
+          margin: 0 auto 0
+            auto;
+        }
+      </style></section>"
+`;

components/page/__tests__/index.test.tsx

@@ -41,4 +41,10 @@ describe('Page', () => {
     )
     expect(wrapper.html()).not.toContain('global(body)')
   })
+
+  it('should work correctly with dot configs', () => {
+    const wrapper = mount(<Page dotBackdrop dotSize="20px" dotSpace={0.5} />)
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
 })

components/page/page.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { CSSProperties, useEffect, useMemo, useState } from 'react'
 import { tuple } from '../utils/prop-types'
 import useTheme from '../use-theme'
 import PageContent from './page-content'
@@ -12,26 +12,44 @@ export type PageRenderMode = typeof renderMode[number]
 interface Props {
   render?: PageRenderMode
   dotBackdrop?: boolean
+  dotSize?: CSSProperties['fontSize']
+  dotSpace?: number
 }
 
 const defaultProps = {
   render: 'default' as PageRenderMode,
   dotBackdrop: false,
+  dotSize: '1px' as CSSProperties['fontSize'],
+  dotSpace: 1,
 }
 
-const DotStyles: React.FC<unknown> = () => (
-  <span>
-    <style jsx>{`
-      :global(body) {
-        background-image: radial-gradient(#e3e3e3 1px, transparent 0),
-          radial-gradient(#e3e3e3 1px, transparent 0);
-        background-position: 0 0, 25px 25px;
-        background-attachment: fixed;
-        background-size: 50px 50px;
-      }
-    `}</style>
-  </span>
-)
+export type DotStylesProps = {
+  dotSize: CSSProperties['fontSize']
+  dotSpace: number
+}
+
+const DotStyles: React.FC<DotStylesProps> = ({ dotSpace, dotSize }) => {
+  const background = useMemo(
+    () => ({
+      position: `calc(${dotSpace} * 25px)`,
+      size: `calc(${dotSpace} * 50px)`,
+    }),
+    [dotSpace],
+  )
+  return (
+    <span>
+      <style jsx>{`
+        :global(body) {
+          background-image: radial-gradient(#e3e3e3 ${dotSize}, transparent 0),
+            radial-gradient(#e3e3e3 ${dotSize}, transparent 0);
+          background-position: 0 0, ${background.position} ${background.position};
+          background-attachment: fixed;
+          background-size: ${background.size} ${background.size};
+        }
+      `}</style>
+    </span>
+  )
+}
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type PageProps = Props & NativeAttrs
@@ -41,6 +59,8 @@ const PageComponent: React.FC<React.PropsWithChildren<PageProps>> = ({
   render,
   dotBackdrop,
   className,
+  dotSize,
+  dotSpace,
   ...props
 }: React.PropsWithChildren<PageProps> & typeof defaultProps) => {
   const theme = useTheme()
@@ -76,7 +96,7 @@ const PageComponent: React.FC<React.PropsWithChildren<PageProps>> = ({
   return (
     <section className={className} {...withPureProps(props)}>
       {hasContent ? children : <PageContent>{children}</PageContent>}
-      {showDot && <DotStyles />}
+      {showDot && <DotStyles dotSize={dotSize} dotSpace={dotSpace} />}
       <style jsx>{`
         section {
           max-width: 100vw;

pages/en-us/components/page.mdx

@@ -1,4 +1,4 @@
-import { Layout, Playground, ExampleBlock, Attributes } from 'lib/components'
+import { Layout, Playground, Attributes } from 'lib/components'
 import { Page, Button } from 'components'
 import MockPage from 'lib/components/displays/mock-page'
 
@@ -72,6 +72,8 @@ Container of general for display page content.
 | --------------- | ---------------------------------- | --------------------------------- | ------------------------ | --------- |
 | **render**      | render mode                        | [PageRenderMode](#pagerendermode) | -                        | `default` |
 | **dotBackdrop** | show decorations in the background | `boolean`                         | -                        | `false`   |
+| **dotSize** | dot size in the background | `CSSProperties`                         | -                        | `1px`   |
+| **dotSpace** | space multiple between each dot | `number`                         | -                        | `1`   |
 | ...             | native props                       | `HTMLAttributes`                  | `'id', 'className', ...` | -         |
 
 <Attributes.Title>Page.Header.Props</Attributes.Title>

pages/zh-cn/components/page.mdx

@@ -1,4 +1,4 @@
-import { Layout, Playground, ExampleBlock, Attributes } from 'lib/components'
+import { Layout, Playground, Attributes } from 'lib/components'
 import { Page, Button } from 'components'
 import MockPage from 'lib/components/displays/mock-page'
 
@@ -72,6 +72,8 @@ export const meta = {
 | --------------- | -------------------- | --------------------------------- | --------------------------------------- | --------- |
 | **render**      | 渲染方式             | [PageRenderMode](#pagerendermode) | -                                       | `default` |
 | **dotBackdrop** | 在背景中显示装饰样式 | `boolean`                         | -                                       | `false`   |
+| **dotSize** | 背景中的点大小 | `CSSProperties`                         | -                        | `1px`   |
+| **dotSpace** | 背景中每个点的间距 | `number`                         | -                        | `1`   |
 | ...             | 原生属性             | `HTMLAttributes`                  | `'autoFocus', 'name', 'className', ...` | -         |
 
 <Attributes.Title>Page.Header.Props</Attributes.Title>