import React from 'react' ; import _isArray from 'lodash/isArray' ; import _isFunction from 'lodash/isFunction' ; import { Icon , Dropdown , Menu , Popconfirm , Modal } from 'antd' ; import { DETAIL_NAME , UPDATE_NAME , DELETE_NAME } from '../../../constants' ; import { InternalCurdBox , ActionsConfig } from '../index' ; import styles from './index.less' ; export type ConfirmKey < T > = ( number | [ number , ( record : T ) => string ] ) ; function isConfirmKeyAndItem < T > ( key , confirmKeys = [ ] ) { for ( let i = 0 ; i < confirmKeys . length ; i += 1 ) { if ( _isArray ( confirmKeys [ i ] ) && confirmKeys [ i ] [ 0 ] === key ) { return confirmKeys [ i ] ; } if ( confirmKeys [ i ] === key ) { return confirmKeys [ i ] ; } } return null ; } function setConfirmTitle < T > ( confirmKey , action , record ) { if ( _isArray ( confirmKey ) ) { const [ , setTitle ] = confirmKey ; return setTitle ( record ) ; } return `确定${ action . title }吗？` ; } export interface ActionType < T > { key : number ; title : string ; handleClick : ( record : T ) => void ; } ; export function sortAndFilterActionsAsc < T > ( record , actions , hideActions ) { return [ ... actions ] . filter ( ( item ) => { if ( _isFunction ( hideActions ) ) { const hideActionKeys = hideActions ( record ) || [ ] ; return ! hideActionKeys . includes ( item . key ) ; } else { return ! hideActions . includes ( item . key ) ; } } ) . sort ( ( x , y ) => { if ( x . key > y . key ) return 1 ; if ( x . key < y . key ) return - 1 ; return 0 ; } ) ; } export function initialActions < T extends { id : number | string ; } > ( record , handleDefaultActionClick , actionsConfig ) { const { detailActionTitle = '详情' , updateActionTitle = '编辑' , deleteActionTitle = '删除' , showActionsCount = 3 , extraActions = [ ] , hideActions = [ ] } = actionsConfig ; const actions = [ { key : 4 , title : detailActionTitle , handleClick : ( ) => { handleDefaultActionClick ( DETAIL_NAME , record ) ; } } , { key : 8 , title : updateActionTitle , handleClick : ( ) => { handleDefaultActionClick ( UPDATE_NAME , record ) ; } } , { key : 12 , title : deleteActionTitle , handleClick : ( ) => { handleDefaultActionClick ( DELETE_NAME , record ) ; } } , ... extraActions ] ; const sortedActions = sortAndFilterActionsAsc ( record , actions , hideActions ) ; return [ sortedActions . slice ( 0 , showActionsCount ) , sortedActions . slice ( showActionsCount ) ] ; } function renderShowActions < T > ( record ) { return ( actions , actionsConfig , disabledActionKeys = [ ] ) => { const { confirmKeys , confirmProps } = actionsConfig ; return actions . map ( ( item ) => { if ( disabledActionKeys . includes ( item . key ) ) { return ( < span key = { item . key } className = { styles . disabledAction } > { item . title } < /span>); } const confirmKey = isConfirmKeyAndItem ( item . key , confirmKeys ) ; if ( confirmKey ) { return ( < span key = { item . key } onClick = { ( event ) => { if ( event ) { event . stopPropagation ( ) ; } } } > < Popconfirm { ... confirmProps } title = { setConfirmTitle ( confirmKey , item , record ) } onConfirm = { ( ) => { item . handleClick ( record ) ; } } onCancel = { ( event ) => { if ( event ) { event . stopPropagation ( ) ; } } } > < a > { item . title } < /a> < /Popconfirm> < /span>); } return ( < a key = { item . key } onClick = { ( event ) => { event . stopPropagation ( ) ; item . handleClick ( record ) ; } } > { item . title } < /a>); } ) ; } ; } export function renderActions < T > ( record ) { return ( actions , moreActions , actionsConfig ) => { const { confirmKeys , disabledActions } = actionsConfig ; let disabledActionKeys = [ ] ; if ( disabledActions ) { disabledActionKeys = disabledActions ( record ) || [ ] ; } if ( ! moreActions . length ) { return renderShowActions ( record ) ( actions , actionsConfig , disabledActionKeys ) ; } return [ ... renderShowActions ( record ) ( actions , actionsConfig , disabledActionKeys ) , < span key = "dropdown" onClick = { ( event ) => { if ( event ) { event . stopPropagation ( ) ; } } } > < Dropdown key = "more" overlay = { < Menu onClick = { ( { domEvent } ) => { domEvent . stopPropagation ( ) ; } } > { moreActions . map ( ( item ) => { const confirmKey = isConfirmKeyAndItem ( item . key , confirmKeys ) ; const isDisabled = disabledActionKeys . includes ( item . key ) ; return ( < Menu . Item key = { item . key } disabled = { isDisabled } onClick = { ( ) => { if ( confirmKey ) { Modal . confirm ( { title : setConfirmTitle ( confirmKey , item , record ) , onOk ( ) { item . handleClick ( record ) ; } , okText : '确定' , cancelText : '取消' } ) ; return ; } item . handleClick ( record ) ; } } > { isDisabled ? item . title : < a > { item . title } < /a>} < /Menu.Item>); } ) } < /Menu>}> < a style = { { whiteSpace : 'nowrap' } } > 更多 < Icon type = "down" style = { { width : 24 } } /> < /a> < /Dropdown> < /span> ] ; } ; } export function setActions < T extends { id : number | string ; } > ( record , handleDefaultActionClick , actionsConfig ) { const [ actions , moreActions ] = initialActions ( record , handleDefaultActionClick , actionsConfig ) ; return renderActions ( record ) ( actions , moreActions , actionsConfig ) ; }