import cx from 'classnames' ; import React from 'react' ; import styled from 'styled-components' ; import { noop } from '../../utils' ; import { ActionList , ActionListItem } from '../action-list' ; const defaultConfigs = { new : { icon : 'add' , label : '新增' } , refresh : { icon : 'refresh' , label : '刷新' } , print : { icon : 'print' , label : '打印' } , import : { icon : 'import' , label : '导入' } , export : { icon : 'download' , label : '导出' } , } ; function mergeConfig ( userConfig ) { const defaultConfig = defaultConfigs [ userConfig . key ] || { } ; return { ... defaultConfig , ... userConfig , props : { ... defaultConfig . props , ... userConfig . props , } , } ; } const ToolbarDiv = styled . div `
  display: flex;
  align-items: center;

  .rex-toolbar-tip-node {
    margin-left: 6px;
  }

  .rex-toolbar-search-node:not(:first-child) {
    margin-left: 40px;
  }

  .rex-toolbar-second-actions {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }
` ; export interface ToolbarProps { /** 主操作列表（左侧） */ leftActions ? : ActionListItem [ ] ; /** 次操作列表（左侧） */ rightActions ? : ActionListItem [ ] ; param { string } key onActionClick ? ( key ) : void ; /**
     * 右侧节点（如果 rightNode 存在，则忽略 rightActions）
     */ rightNode ? : React . ReactNode ; /**
     * 提示节点
     */ tipNode ? : React . ReactNode ; /**
     * 搜索节点
     */ searchNode ? : React . ReactNode ; className ? : string ; style ? : React . CSSProperties ; } export class Toolbar extends React . PureComponent < ToolbarProps > { static defaultProps = { leftActions : [ ] as ActionListItem [ ] , rightActions : [ ] as ActionListItem [ ] , onActionClick : noop , } ; normalizeActions ( actions ) { return actions . map ( ( item ) => mergeConfig ( item ) ) ; } render ( ) { const { searchNode , tipNode , leftActions , rightActions , onActionClick , rightNode : rightNodeProp , className , style , } = this . props ; let leftNode = null ; if ( leftActions . length ) { leftNode = ( < ActionList className = "rex-toolbar-main-actions" actions = { this . normalizeActions ( leftActions ) } onSelect = { onActionClick } / > ) ; } let rightNode = null ; if ( rightNodeProp ) { rightNode = < div className = "rex-toolbar-second-actions" > { rightNodeProp } < /div>; } else if ( rightActions . length > 0 ) { rightNode = ( < ActionList className = "rex-toolbar-second-actions" actions = { this . normalizeActions ( rightActions ) } onSelect = { onActionClick } / > ) ; } return ( < ToolbarDiv className = { cx ( 'rex-toolbar' , className ) } style = { style } > { leftNode } { tipNode && < div className = "rex-toolbar-tip-node" > { tipNode } < /div>} { searchNode && < div className = "rex-toolbar-search-node" > { searchNode } < /div>} { rightNode } < /ToolbarDiv>); } }