Skip to content

Commit

Permalink
fix: recover array-base actors icon button wrap (#30)
Browse files Browse the repository at this point in the history
  • Loading branch information
@faner11
faner11 authored Nov 9, 2023
1 parent 29fa45a commit 9f6fe64
Showing 1 changed file with 73 additions and 30 deletions.
103 changes: 73 additions & 30 deletions packages/components/src/array-base/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
PlusOutlined,
UpOutlined,
} from '@ant-design/icons'
import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon'
import { ArrayField } from '@formily/core'
import {
ReactFC,
Expand All @@ -16,7 +15,7 @@ import {
useField,
useFieldSchema,
} from '@formily/react'
import { clone, isValid } from '@formily/shared'
import { clone, isUndef, isValid } from '@formily/shared'
import { Button, ButtonProps } from 'antd'
import cls from 'classnames'
import React, { createContext, forwardRef, useContext } from 'react'
Expand All @@ -40,7 +39,7 @@ export interface IArrayBaseItemProps {
record: ((index: number) => Record<string, any>) | Record<string, any>
}

type CommonProps = AntdIconProps & {
type CommonProps = ButtonProps & {
index?: number
}

Expand Down Expand Up @@ -198,8 +197,7 @@ const Addition: ReactFC<IArrayBaseAdditionProps> = (props) => {
</Button>
)
}

const Copy = forwardRef<HTMLSpanElement, CommonProps>((props, ref) => {
const Copy = forwardRef<HTMLButtonElement, CommonProps>((props, ref) => {
const self = useField()
const array = useArray()
const index = useIndex(props.index) || 0
Expand All @@ -208,8 +206,16 @@ const Copy = forwardRef<HTMLSpanElement, CommonProps>((props, ref) => {
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return wrapSSR(
<CopyOutlined
<Button
type="ghost"
{...props}
style={{
padding: '0 0 0 6px',
width: 'auto',
height: 'auto',
...props.style,
}}
disabled={self?.disabled}
className={cls(
`${prefixCls}-copy`,
hashId,
Expand All @@ -221,29 +227,42 @@ const Copy = forwardRef<HTMLSpanElement, CommonProps>((props, ref) => {
if (self?.disabled) return
e.stopPropagation()
if (array.props?.disabled) return
if (props.onClick) {
props.onClick(e)
if (e.defaultPrevented) return
}
const value = clone(array?.field?.value[index])
const distIndex = index + 1
array.field?.insert?.(distIndex, value)
array.props?.onCopy?.(distIndex)
if (props.onClick) {
props.onClick(e)
}
}}
/>
icon={isUndef(props.icon) ? <CopyOutlined /> : props.icon}
>
{props.title || self.title}
</Button>
)
})

const Remove = forwardRef<HTMLSpanElement, CommonProps>((props, ref) => {
const index = useIndex(props.index) || 0
const index = useIndex(props.index)
const self = useField()
const array = useArray()
const prefixCls = usePrefixCls('formily-array-base')
const [wrapSSR, hashId] = useStyle(prefixCls)

if (!array) return null
if (array.field?.pattern !== 'editable') return null
return wrapSSR(
<DeleteOutlined
<Button
type="ghost"
{...props}
style={{
padding: '0 0 0 6px',
width: 'auto',
height: 'auto',
...props.style,
}}
disabled={self?.disabled}
className={cls(
`${prefixCls}-remove`,
hashId,
Expand All @@ -254,44 +273,58 @@ const Remove = forwardRef<HTMLSpanElement, CommonProps>((props, ref) => {
onClick={(e) => {
if (self?.disabled) return
e.stopPropagation()
array.field?.remove?.(index)
array.props?.onRemove?.(index)
if (props.onClick) {
props.onClick(e)
if (e.defaultPrevented) return
}
array.field?.remove?.(index)
array.props?.onRemove?.(index)
}}
/>
icon={isUndef(props.icon) ? <DeleteOutlined /> : props.icon}
>
{props.title || self.title}
</Button>
)
})

const MoveDown = forwardRef<HTMLSpanElement, CommonProps>((props, ref) => {
const index = useIndex(props.index) || 0
const index = useIndex(props.index)
const self = useField()
const array = useArray()
const prefixCls = usePrefixCls('formily-array-base')
const [wrapSSR, hashId] = useStyle(prefixCls)
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return wrapSSR(
<DownOutlined
return (
<Button
type="ghost"
{...props}
style={{
padding: '0 0 0 6px',
width: 'auto',
height: 'auto',
...props.style,
}}
disabled={self?.disabled}
className={cls(
`${prefixCls}-move-down`,
hashId,
self?.disabled ? `${prefixCls}-move-down-disabled` : '',
props.className
)}
ref={ref}
onClick={(e) => {
if (self?.disabled) return
e.stopPropagation()
array.field?.moveDown?.(index)
array.props?.onMoveDown?.(index)
if (props.onClick) {
props.onClick(e)
if (e.defaultPrevented) return
}
array.field?.moveDown?.(index)
array.props?.onMoveDown?.(index)
}}
/>
icon={isUndef(props.icon) ? <DownOutlined /> : props.icon}
>
{props.title || self.title}
</Button>
)
})

Expand All @@ -300,29 +333,39 @@ const MoveUp = forwardRef<HTMLSpanElement, CommonProps>((props, ref) => {
const self = useField()
const array = useArray()
const prefixCls = usePrefixCls('formily-array-base')
const [wrapSSR, hashId] = useStyle(prefixCls)
if (!array) return null
if (array.field?.pattern !== 'editable') return null
return wrapSSR(
<UpOutlined
return (
<Button
type="ghost"
{...props}
style={{
padding: '0 0 0 6px',
width: 'auto',
height: 'auto',
...props.style,
}}
disabled={self?.disabled}
className={cls(
`${prefixCls}-move-up`,
hashId,
self?.disabled ? `${prefixCls}-move-up-disabled` : '',
props.className
)}
ref={ref}
onClick={(e) => {
if (self?.disabled) return
e.stopPropagation()
array?.field?.moveUp(index)
array?.props?.onMoveUp?.(index)
if (props.onClick) {
props.onClick(e)
if (e.defaultPrevented) return
}
array?.field?.moveUp(index)
array?.props?.onMoveUp?.(index)
}}
/>
icon={isUndef(props.icon) ? <UpOutlined /> : props.icon}
>
{props.title || self.title}
</Button>
)
})

Expand Down

0 comments on commit 9f6fe64

Please sign in to comment.