feat: form 支持分割线 (#1389)

* feat: form 支持分割线 * test: sticky * fix: review * test: sticky
jdf2e · Sep 6, 2023 · 1cbf930 · 1cbf930
1 parent 069dced
commit 1cbf930
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 8 deletions.
diff --git a/src/packages/cell/cell.taro.tsx b/src/packages/cell/cell.taro.tsx
@@ -1,7 +1,8 @@
-import React, { FunctionComponent, ReactNode } from 'react'
+import React, { FunctionComponent, ReactNode, useContext } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { CellGroup } from '@/packages/cellgroup/cellgroup.taro'
+import CellGroupContext from '@/packages/cellgroup/context'
 
 export interface CellProps extends BasicComponent {
   title: ReactNode
@@ -27,6 +28,7 @@ const classPrefix = 'nut-cell'
 export const Cell: FunctionComponent<
   Partial<CellProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
 > & { Group: typeof CellGroup } = (props) => {
+  const ctx = useContext(CellGroupContext)
   const {
     children,
     onClick,
@@ -88,9 +90,9 @@ export const Cell: FunctionComponent<
               {extra}
             </div>
           ) : null}
-          <div className={`${classPrefix}__divider`} />
         </>
       )}
+      {ctx?.divider ? <div className={`${classPrefix}__divider`} /> : null}
     </div>
   )
 }

diff --git a/src/packages/cell/cell.tsx b/src/packages/cell/cell.tsx
@@ -1,7 +1,8 @@
-import React, { FunctionComponent, ReactNode } from 'react'
+import React, { FunctionComponent, ReactNode, useContext } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import CellGroup from '@/packages/cellgroup'
+import CellGroupContext from '@/packages/cellgroup/context'
 
 export interface CellProps extends BasicComponent {
   title: ReactNode
@@ -27,6 +28,7 @@ const classPrefix = 'nut-cell'
 export const Cell: FunctionComponent<
   Partial<CellProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
 > & { Group: typeof CellGroup } = (props) => {
+  const ctx = useContext(CellGroupContext)
   const {
     children,
     onClick,
@@ -88,9 +90,9 @@ export const Cell: FunctionComponent<
               {extra}
             </div>
           ) : null}
-          <div className={`${classPrefix}__divider`} />
         </>
       )}
+      {ctx?.divider ? <div className={`${classPrefix}__divider`} /> : null}
     </div>
   )
 }

diff --git a/src/packages/cellgroup/cellgroup.taro.tsx b/src/packages/cellgroup/cellgroup.taro.tsx
@@ -2,13 +2,15 @@ import React, { FunctionComponent, ReactNode } from 'react'
 
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import CellGroupContext from '@/packages/cellgroup/context'
 
 export interface CellGroupProps extends BasicComponent {
   title: ReactNode
   description: ReactNode
   children?: ReactNode
   divider: boolean
 }
+
 const defaultProps = {
   ...ComponentDefaults,
   title: '',
@@ -36,7 +38,9 @@ export const CellGroup: FunctionComponent<Partial<CellGroupProps>> = (
           divider ? `${classPrefix}__wrap--divider` : ''
         }`}
       >
-        {children}
+        <CellGroupContext.Provider value={{ divider }}>
+          {children}
+        </CellGroupContext.Provider>
       </div>
     </div>
   )

diff --git a/src/packages/cellgroup/cellgroup.tsx b/src/packages/cellgroup/cellgroup.tsx
@@ -2,13 +2,15 @@ import React, { FunctionComponent, ReactNode } from 'react'
 
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import CellGroupContext from '@/packages/cellgroup/context'
 
 export interface CellGroupProps extends BasicComponent {
   title: ReactNode
   description: ReactNode
   children?: ReactNode
   divider: boolean
 }
+
 const defaultProps = {
   ...ComponentDefaults,
   title: '',
@@ -36,7 +38,9 @@ export const CellGroup: FunctionComponent<Partial<CellGroupProps>> = (
           divider ? `${classPrefix}__wrap--divider` : ''
         }`}
       >
-        {children}
+        <CellGroupContext.Provider value={{ divider }}>
+          {children}
+        </CellGroupContext.Provider>
       </div>
     </div>
   )

diff --git a/src/packages/cellgroup/context.ts b/src/packages/cellgroup/context.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const CellGroupContext = createContext<{ divider: boolean } | null>(null)
+
+export default CellGroupContext
diff --git a/src/packages/form/demo.taro.tsx b/src/packages/form/demo.taro.tsx
@@ -311,6 +311,7 @@ const FormDemo = () => {
         </Form>
         <h2>{translated.title2}</h2>
         <Form
+          divider
           onFinish={(values) => submitSucceed(values)}
           onFinishFailed={(values, errors) => submitFailed(errors)}
           footer={

diff --git a/src/packages/form/demo.tsx b/src/packages/form/demo.tsx
@@ -267,6 +267,7 @@ const FormDemo = () => {
         </Form>
         <h2>{translated.title2}</h2>
         <Form
+          divider
           onFinish={(values) => submitSucceed(values)}
           onFinishFailed={(values, errors) => submitFailed(errors)}
           footer={

diff --git a/src/packages/form/form.taro.tsx b/src/packages/form/form.taro.tsx
@@ -11,6 +11,7 @@ export interface FormProps extends BasicComponent {
   initialValues: any
   name: string
   form: any
+  divider: boolean
   labelPosition: 'top' | 'left' | 'right'
   starPosition: 'left' | 'right'
   onFinish: (values: any) => void
@@ -21,6 +22,7 @@ const defaultProps = {
   ...ComponentDefaults,
   labelPosition: 'right',
   starPosition: 'left',
+  divider: false,
   onFinish: (values) => {},
   onFinishFailed: (values, errorFields) => {},
 } as FormProps
@@ -41,6 +43,7 @@ export const Form: FunctionComponent<
     footer,
     children,
     initialValues,
+    divider,
     onFinish,
     onFinishFailed,
     labelPosition,
@@ -91,7 +94,7 @@ export const Form: FunctionComponent<
         resetFields()
       }}
     >
-      <Cell.Group>
+      <Cell.Group divider={divider}>
         <Context.Provider value={formInstance}>{children}</Context.Provider>
         {footer ? <Cell>{footer}</Cell> : null}
       </Cell.Group>

diff --git a/src/packages/form/form.tsx b/src/packages/form/form.tsx
@@ -11,6 +11,7 @@ export interface FormProps extends BasicComponent {
   initialValues: any
   name: string
   form: any
+  divider: boolean
   labelPosition: 'top' | 'left' | 'right'
   starPosition: 'left' | 'right'
   onFinish: (values: any) => void
@@ -21,6 +22,7 @@ const defaultProps = {
   ...ComponentDefaults,
   labelPosition: 'right',
   starPosition: 'left',
+  divider: false,
   onFinish: (values) => {},
   onFinishFailed: (values, errorFields) => {},
 } as FormProps
@@ -41,6 +43,7 @@ export const Form: FunctionComponent<
     footer,
     children,
     initialValues,
+    divider,
     onFinish,
     onFinishFailed,
     labelPosition,
@@ -91,7 +94,7 @@ export const Form: FunctionComponent<
         resetFields()
       }}
     >
-      <Cell.Group>
+      <Cell.Group divider={divider}>
         <Context.Provider value={formInstance}>{children}</Context.Provider>
         {footer ? <Cell>{footer}</Cell> : null}
       </Cell.Group>