Skip to content

Commit

Permalink
feat(antd): support array-base operator title display (#3646)
Browse files Browse the repository at this point in the history 
* feat(antd): support array-base operator title display

* feat(next): support array-base operator title display

* fix: fix eslint
  • Loading branch information
@wwyx778
wwyx778 committed Mar 20, 2023
1 parent f7ff2bd commit 3ba4820
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 36 deletions.
62 changes: 46 additions & 16 deletions packages/antd/src/array-base/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ import {
MenuOutlined,
CopyOutlined,
} from '@ant-design/icons'
import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
import { ButtonProps } from 'antd/lib/button'
import { ArrayField } from '@formily/core'
import { useField, useFieldSchema, Schema, JSXComponent } from '@formily/react'
import { isValid, clone } from '@formily/shared'
import { isValid, clone, isUndef } from '@formily/shared'
import { SortableHandle } from 'react-sortable-hoc'
import { usePrefixCls } from '../__builtins__'
import cls from 'classnames'
Expand All @@ -22,6 +21,11 @@ export interface IArrayBaseAdditionProps extends ButtonProps {
method?: 'push' | 'unshift'
defaultValue?: any
}
export interface IArrayBaseOperationProps extends ButtonProps {
title?: string
index?: number
ref?: React.Ref<HTMLElement>
}

export interface IArrayBaseContext {
props: IArrayBaseProps
Expand All @@ -36,14 +40,20 @@ export interface IArrayBaseItemProps {

export type ArrayBaseMixins = {
Addition?: React.FC<React.PropsWithChildren<IArrayBaseAdditionProps>>
Copy?: React.FC<React.PropsWithChildren<AntdIconProps & { index?: number }>>
Remove?: React.FC<React.PropsWithChildren<AntdIconProps & { index?: number }>>
MoveUp?: React.FC<React.PropsWithChildren<AntdIconProps & { index?: number }>>
Copy?: React.FC<
React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>
>
Remove?: React.FC<
React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>
>
MoveUp?: React.FC<
React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>
>
MoveDown?: React.FC<
React.PropsWithChildren<AntdIconProps & { index?: number }>
React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>
>
SortHandle?: React.FC<
React.PropsWithChildren<AntdIconProps & { index?: number }>
React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>
>
Index?: React.FC
useArray?: () => IArrayBaseContext
Expand Down Expand Up @@ -178,7 +188,7 @@ ArrayBase.Addition = (props) => {
props.onClick(e)
}
}}
icon={<PlusOutlined />}
icon={isUndef(props.icon) ? <PlusOutlined /> : props.icon}
>
{props.title || self.title}
</Button>
Expand All @@ -193,8 +203,10 @@ ArrayBase.Copy = React.forwardRef((props, ref) => {
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return (
<CopyOutlined
<Button
type="text"
{...props}
disabled={self?.disabled}
className={cls(
`${prefixCls}-copy`,
self?.disabled ? `${prefixCls}-copy-disabled` : '',
Expand All @@ -213,7 +225,10 @@ ArrayBase.Copy = React.forwardRef((props, ref) => {
props.onClick(e)
}
}}
/>
icon={isUndef(props.icon) ? <CopyOutlined /> : props.icon}
>
{props.title || self.title}
</Button>
)
})

Expand All @@ -225,8 +240,10 @@ ArrayBase.Remove = React.forwardRef((props, ref) => {
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return (
<DeleteOutlined
<Button
type="text"
{...props}
disabled={self?.disabled}
className={cls(
`${prefixCls}-remove`,
self?.disabled ? `${prefixCls}-remove-disabled` : '',
Expand All @@ -242,7 +259,10 @@ ArrayBase.Remove = React.forwardRef((props, ref) => {
props.onClick(e)
}
}}
/>
icon={isUndef(props.icon) ? <DeleteOutlined /> : props.icon}
>
{props.title || self.title}
</Button>
)
})

Expand All @@ -254,8 +274,10 @@ ArrayBase.MoveDown = React.forwardRef((props, ref) => {
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return (
<DownOutlined
<Button
type="text"
{...props}
disabled={self?.disabled}
className={cls(
`${prefixCls}-move-down`,
self?.disabled ? `${prefixCls}-move-down-disabled` : '',
Expand All @@ -271,7 +293,10 @@ ArrayBase.MoveDown = React.forwardRef((props, ref) => {
props.onClick(e)
}
}}
/>
icon={isUndef(props.icon) ? <DownOutlined /> : props.icon}
>
{props.title || self.title}
</Button>
)
})

Expand All @@ -283,8 +308,10 @@ ArrayBase.MoveUp = React.forwardRef((props, ref) => {
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return (
<UpOutlined
<Button
type="text"
{...props}
disabled={self?.disabled}
className={cls(
`${prefixCls}-move-up`,
self?.disabled ? `${prefixCls}-move-up-disabled` : '',
Expand All @@ -300,7 +327,10 @@ ArrayBase.MoveUp = React.forwardRef((props, ref) => {
props.onClick(e)
}
}}
/>
icon={isUndef(props.icon) ? <UpOutlined /> : props.icon}
>
{props.title || self.title}
</Button>
)
})

Expand Down
19 changes: 16 additions & 3 deletions packages/antd/src/array-base/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@
.@{array-base-prefix-cls}-copy {
transition: all 0.25s ease-in-out;
color: @text-color;
font-size: 16px;
font-size: 14px;
margin-left: 6px;
padding: 0;
border: none;
width: auto;
height: auto;

&:hover {
color: @primary-5;
Expand All @@ -34,8 +39,12 @@
.@{array-base-prefix-cls}-move-down {
transition: all 0.25s ease-in-out;
color: @text-color;
font-size: 16px;
font-size: 14px;
margin-left: 6px;
padding: 0;
border: none;
width: auto;
height: auto;

&:hover {
color: @primary-5;
Expand All @@ -53,8 +62,12 @@
.@{array-base-prefix-cls}-move-up {
transition: all 0.25s ease-in-out;
color: @text-color;
font-size: 16px;
font-size: 14px;
margin-left: 6px;
padding: 0;
border: none;
width: auto;
height: auto;

&:hover {
color: @primary-5;
Expand Down
68 changes: 52 additions & 16 deletions packages/next/src/array-base/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { createContext, useContext } from 'react'
import { Button } from '@alifd/next'
import { isValid, clone } from '@formily/shared'
import { isValid, isUndef, clone } from '@formily/shared'
import { ButtonProps } from '@alifd/next/lib/button'
import { ArrayField } from '@formily/core'
import { useField, useFieldSchema, Schema, JSXComponent } from '@formily/react'
Expand All @@ -12,7 +12,6 @@ import {
DownOutlinedIcon,
UpOutlinedIcon,
MenuOutlinedIcon,
IconProps,
CopyOutlinedIcon,
} from '../__builtins__'
import cls from 'classnames'
Expand All @@ -21,6 +20,14 @@ export interface IArrayBaseAdditionProps extends ButtonProps {
title?: string
method?: 'push' | 'unshift'
defaultValue?: any
icon?: React.ReactNode
}

export interface IArrayBaseOperationProps extends ButtonProps {
title?: string
index?: number
ref?: React.Ref<Button>
icon?: React.ReactNode
}

export interface IArrayBaseContext {
Expand All @@ -36,15 +43,23 @@ export interface IArrayBaseItemProps {

export type ArrayBaseMixins = {
Addition?: React.FC<React.PropsWithChildren<IArrayBaseAdditionProps>>
Remove?: React.FC<React.PropsWithChildren<IconProps & { index?: number }>>
Remove?: React.FC<
React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>
>
Copy?: React.FC<
React.PropsWithChildren<
IArrayBaseAdditionProps & IconProps & { index?: number }
IArrayBaseAdditionProps & IArrayBaseOperationProps & { index?: number }
>
>
MoveUp?: React.FC<React.PropsWithChildren<IconProps & { index?: number }>>
MoveDown?: React.FC<React.PropsWithChildren<IconProps & { index?: number }>>
SortHandle?: React.FC<React.PropsWithChildren<IconProps & { index?: number }>>
MoveUp?: React.FC<
React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>
>
MoveDown?: React.FC<
React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>
>
SortHandle?: React.FC<
React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>
>
Index?: React.FC
useArray?: () => IArrayBaseContext
useIndex?: (index?: number) => number
Expand Down Expand Up @@ -179,7 +194,7 @@ ArrayBase.Addition = (props) => {
}
}}
>
<PlusOutlinedIcon />
{isUndef(props.icon) ? <PlusOutlinedIcon /> : props.icon}
{props.title || self.title}
</Button>
)
Expand All @@ -193,8 +208,10 @@ ArrayBase.Remove = React.forwardRef((props, ref) => {
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return (
<DeleteOutlinedIcon
<Button
text
{...props}
disabled={self?.disabled}
className={cls(
`${prefixCls}-remove`,
self?.disabled ? `${prefixCls}-remove-disabled` : '',
Expand All @@ -210,7 +227,10 @@ ArrayBase.Remove = React.forwardRef((props, ref) => {
props.onClick(e)
}
}}
/>
>
{isUndef(props.icon) ? <DeleteOutlinedIcon /> : props.icon}
{props.title || self.title}
</Button>
)
})

Expand All @@ -222,8 +242,10 @@ ArrayBase.Copy = React.forwardRef((props, ref) => {
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return (
<CopyOutlinedIcon
<Button
text
{...props}
disabled={self?.disabled}
className={cls(
`${prefixCls}-copy`,
self?.disabled ? `${prefixCls}-copy-disabled` : '',
Expand All @@ -233,6 +255,7 @@ ArrayBase.Copy = React.forwardRef((props, ref) => {
onClick={(e) => {
if (self?.disabled) return
e.stopPropagation()
if (array.props?.disabled) return
const value = clone(array?.field?.value[index])
const distIndex = index + 1
array.field?.insert?.(distIndex, value)
Expand All @@ -241,7 +264,10 @@ ArrayBase.Copy = React.forwardRef((props, ref) => {
props.onClick(e)
}
}}
/>
>
{isUndef(props.icon) ? <CopyOutlinedIcon /> : props.icon}
{props.title || self.title}
</Button>
)
})

Expand All @@ -253,8 +279,10 @@ ArrayBase.MoveDown = React.forwardRef((props, ref) => {
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return (
<DownOutlinedIcon
<Button
text
{...props}
disabled={self?.disabled}
className={cls(
`${prefixCls}-move-down`,
self?.disabled ? `${prefixCls}-move-down-disabled` : '',
Expand All @@ -270,7 +298,10 @@ ArrayBase.MoveDown = React.forwardRef((props, ref) => {
props.onClick(e)
}
}}
/>
>
{isUndef(props.icon) ? <DownOutlinedIcon /> : props.icon}
{props.title || self.title}
</Button>
)
})

Expand All @@ -282,8 +313,10 @@ ArrayBase.MoveUp = React.forwardRef((props, ref) => {
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return (
<UpOutlinedIcon
<Button
text
{...props}
disabled={self?.disabled}
className={cls(
`${prefixCls}-move-up`,
self?.disabled ? `${prefixCls}-move-up-disabled` : '',
Expand All @@ -299,7 +332,10 @@ ArrayBase.MoveUp = React.forwardRef((props, ref) => {
props.onClick(e)
}
}}
/>
>
{isUndef(props.icon) ? <UpOutlinedIcon /> : props.icon}
{props.title || self.title}
</Button>
)
})

Expand Down

0 comments on commit 3ba4820

Please sign in to comment.