cloud-b2b 1.1.58 → 1.1.59

package/src/SuperTable3/SuperTable.js

@@ -0,0 +1,498 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import {getTitle} from '../Control';
+import {Table, Tooltip} from 'antd';
+import FilterDropDown from './FilterDropDown';
+import fixed from './fixed';
+import variables from '../variables';
+
+/**
+ * sorter: [可选]，不传表示该列不支持排序；为string表示按字符串排序；为number表示按数字大小排序
+ * filter: [可选],是否支持过滤，默认为false
+ * link: [可选],为true表示超链接，内容来至items;为字符串表示超链接，内容就是该字符串;为字符串‘list’表示超链接数组，内容就是该items对应key对象数组的linkTitleKey属性拼接
+ * linkTitleKey: [可选],当link为'list'表示超链接组时，该值表示要拼接展示的属性key值
+ * isDateFilterByStartAndEnd: [可选]，为true时做过滤操作会显示时间段搜索，默认为false
+ *
+ */
+const ColType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  sorter: PropTypes.oneOf(['string', 'number']),
+  filter: PropTypes.bool,
+  hide: PropTypes.bool,
+  options: PropTypes.array,
+  link: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  linkTitleKey: PropTypes.string,
+  noWrap: PropTypes.bool,
+  isDateFilterByStartAndEnd: PropTypes.bool,
+};
+
+const ItemType = {
+  checked: PropTypes.bool
+};
+
+/**
+ * onCheck：点击复选框时触发, 原型为onCheck(checkedRows)
+ * onRadio: 点击单选按钮时触发，原型为func(checkedRows)
+ * onDoubleClick: 行双击时触发，原型func(rowIndex)
+ * onLink: 点击超链接时触发，原型为func(key, rowIndex, item)
+ * onTableChange: 排序信息改变时触发，原型为func(sortInfo, filterInfo)
+ */
+const CallbackType = {
+  onCheck: PropTypes.func,
+  onRadio: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onLink: PropTypes.func,
+  onTableChange: PropTypes.func,
+};
+
+/**
+ * checkbox: [可选]，是否有复选框，默认为true
+ * isPaging: [可选]，是否分页，默认为false
+ * radio: [可选]，是否为单选按钮，当checkbox为true时生效，默认值为false
+ * checkedRows: [可选]，选中的行数，radio为true时生效
+ * index: [可选]，是否有序号，默认值为true
+ * indexTitle：[可选]，序号标题，默认为'序号'
+ * sortInfo: [可选]，排序信息，默认为null
+ * filterInfo: [可选]，过滤信息，默认为null
+ * maxHeight: [可选]，设置表格的最大高度
+ * childrenKey: [可选]，设置子列表数据的key，默认children
+ */
+class SuperTable extends React.Component {
+  static propTypes = {
+    cols: PropTypes.arrayOf(PropTypes.shape(ColType)).isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape(ItemType)).isRequired,
+    isPaging:PropTypes.bool,
+    checkbox: PropTypes.bool,
+    radio: PropTypes.bool,
+    checkedRows: PropTypes.array,
+    index: PropTypes.bool,
+    indexTitle: PropTypes.string,
+    sortInfo: PropTypes.object,
+    filterInfo: PropTypes.object,
+    maxHeight: PropTypes.string,
+    callback: PropTypes.shape(CallbackType),
+    childrenKey: PropTypes.string,
+  };
+
+  state = {filterVisibleKey: ''};
+
+  onTableChange = (pagination, filters, sorter) => {
+    const {onTableChange} = this.props.callback || {};
+    const {filterInfo=null} = this.props;
+    onTableChange && onTableChange(sorter, filterInfo);
+  };
+
+  onChange = (selectedKeyArr=[]) => {
+    const {onCheck} = this.props.callback || {};
+    if (onCheck) {
+      const {items=[]} = this.props;
+      let offset = 0;
+      const realSlectedList = selectedKeyArr.length > items.length ? selectedKeyArr.slice(0, selectedKeyArr.length + offset) : selectedKeyArr;
+      const selectedKeys = realSlectedList;
+      const newItems = items;
+      if (selectedKeys.length === 0) {
+        onCheck(true, false, -1);
+      } else if (selectedKeys.length === newItems.length) {
+        const checked = newItems.every(o => o.checked);
+        onCheck(true, !checked, -1);
+      } else  {
+        const defaultSelectedKeys = this.getSelectedRowKeys(newItems);
+        if (selectedKeys.length > defaultSelectedKeys.length) {
+          if (this.props.isPaging && selectedKeys.length - defaultSelectedKeys.length > 1) {
+            return onCheck(true, true, -1);
+          }
+          onCheck(false, true, selectedKeys[selectedKeys.length - 1]);
+        } else {
+          const index = defaultSelectedKeys.findIndex(key => !selectedKeys.some(select => select === key));
+          onCheck(false, false, defaultSelectedKeys[index]);
+        }
+      }
+    }
+  };
+
+  onCheckChange = (selectedKeys) => {
+    const {onCheck} = this.props.callback || {};
+    onCheck && onCheck(selectedKeys);
+  };
+
+  onRadioChange = (selectedKeys) => {
+    const {onRadio} = this.props.callback || {};
+    onRadio && onRadio(selectedKeys);
+  };
+
+  onRadioRowClick = (record) => {
+    const {onRadio} = this.props.callback || {};
+    onRadio && onRadio([record.key]);
+  };
+
+  onRowClick = (record) => {
+    const {items} = this.props;
+    if (items.length <= record.key) return;
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      const {onCheck} = this.props.callback || {};
+      if (onCheck) {
+        const {checkedRows=[]} = this.props;
+        if (checkedRows.includes(record.key)) {
+          onCheck(checkedRows.filter(key => record.key !== key));
+        } else {
+          onCheck(checkedRows.concat(record.key));
+        }
+      }
+    }, 250);
+  };
+
+  onDoubleClick = (record) => {
+    clearTimeout(this.timer);
+    const {onDoubleClick} = this.props.callback || {};
+    onDoubleClick && onDoubleClick(record.key);
+  };
+
+  onLink = (key, index, item, e) => {
+    const {onLink} = this.props.callback || {};
+    onLink && onLink(key, index, item);
+    e.stopPropagation();
+  };
+
+  onLinkDouble = (e) => {
+    e.stopPropagation();
+  };
+
+  getSelectedRowKeys = (items) => {
+    return items.reduce((result, item, index) => {
+      item.checked && result.push(index);
+      return result;
+    }, []);
+  };
+
+  getIndexInfo = (items=[]) => {
+    const {index=true, indexTitle='序号'} = this.props;
+    return index ? [{key: 'index', title: indexTitle, render: (text, record, index) => (index + 1)}] : [];
+  };
+
+  setSortInfo = (col, sortInfo) => {
+    if (col.sorter === 'string') {
+      col.sortOrder = sortInfo.columnKey === col.key && sortInfo.order;
+      col.sorter = (row1, row2) => {
+        const a = !col.link ? row1[col.key] : row1[col.key].props.children;
+        const b = !col.link ? row2[col.key] : row2[col.key].props.children;
+        if (a > b) {
+          return 1;
+        } else if (a === b) {
+          return 0;
+        } else {
+          return -1;
+        }
+      };
+    } else if (col.sorter === 'number') {
+      col.sortOrder = sortInfo.columnKey === col.key && sortInfo.order;
+      col.sorter = (a, b) => a[col.key] - b[col.key];
+    } else {
+      delete col.sorter;
+    }
+  };
+
+  setFilterInfo = (col, filterInfo, visibleKey) => {
+    if (col.filter) {
+      const {isDateFilterByStartAndEnd=false} = col;
+      const onSearch = (value) => {
+        const {onTableChange} = this.props.callback || {};
+        const {sortInfo=null} = this.props;
+        const newFilterInfo = Object.assign({}, filterInfo, {[col.key]: value});
+        this.setState({filterVisibleKey: ''});
+        onTableChange && onTableChange(sortInfo, newFilterInfo);
+      };
+      const value = filterInfo[col.key];
+      col.filteredValue = value ? [value] : null;
+      col.filterDropdownVisible = visibleKey === col.key;
+      const onClose = () => {
+        this.setState({filterVisibleKey: ''});
+      };
+      col.filterDropdown = <FilterDropDown {...{value, onSearch, onClose, isDateFilterByStartAndEnd}} />;
+      col.onFilterDropdownVisibleChange = (visible) => {
+        if (isDateFilterByStartAndEnd) {
+          visible && this.setState({filterVisibleKey: col.key});
+        } else {
+          this.setState({filterVisibleKey: visible ? col.key : ''});
+        }
+      };
+      col.onFilter = (value, record) => {
+        const content = !col.link ? record[col.key] : record[col.key].props.children;
+        if(!col.isDateFilterByStartAndEnd){
+          const con = Array.isArray(content) ? content : String(content);
+          return con.includes(value);
+        } else {
+          return !((value.start && new Date(value.start) > new Date(content)) || (value.end && value.end < content));
+        }
+      }
+    }
+    delete col.filter;
+  };
+
+  linkList = (key, index, item, linkTitleKey='fileName') => {
+    const list = item[key] || [];
+    return (
+      <div>
+        {list.map((item2, index2) => {
+          const split = index2 === list.length-1 ? '' : ',';
+          const onClick = this.onLink.bind(null, key, index, item2);
+          return <a key={index2} onClick={onClick} onDoubleClick={this.onLinkDouble}>{`${item2[linkTitleKey]}${split}`}</a>;
+        })}
+      </div>
+    )
+  };
+
+  waring = (key,index,item,warningKey) => {
+    const text = item[key] ? item[key] : '';
+    const color = item[warningKey] == 1 ?'red' :'rgba(0, 0, 0, 0.65)';
+    return (
+      <div>
+        <p style={{color:color}}>{text.title ? text.title : text}</p>
+      </div>
+    )
+  };
+
+  defaultList  = (key,index,item,text,link) => {
+    const onClick = this.onLink.bind(null, key, index, item);
+    if (link && (typeof link === 'string')) {
+      return <a onClick={onClick} onDoubleClick={this.onLinkDouble}>{text}</a>;
+    }
+    return (
+      <div>
+        <p>{text}</p>
+      </div>
+    )
+  };
+
+  getColumns = (cols, items) => {
+    const {sortInfo, filterInfo} = this.props;
+    const {filterVisibleKey} = this.state;
+    return this.getIndexInfo(items).concat(cols.filter(col => !col.hide)).map(({...col}) => {
+      col.dataIndex = col.key;
+      col.className = col.key === 'index' ? 'ant-table-selection-column' : (col.align ? s[col.align] : '');
+      col.noWrap && (col.className = variables('SuperTable3').noWrap);
+      this.setSortInfo(col, sortInfo || {});
+      this.setFilterInfo(col, filterInfo || {}, filterVisibleKey);
+
+      if(col.defaultValue){
+        col.render = (text, record, index) => this.defaultList(col.key, index, items[index],col.defaultValue,col.link)
+      }else if (col.link === 'list') {
+        col.render = (text, record, index) => this.linkList(col.key, index, items[index], col.linkTitleKey);
+      }else if (col.link && (typeof col.link === 'string')) {
+        col.render = (text, record, index) => this.link(col.key, index, items[index], col.link);
+      }else if(col.isWarning){
+        col.render = (text, record, index) => this.waring(col.key, index, items[index],col.warningKey);
+      }else if (col.tooltip) {
+        col.render = (text, record, index) => this.tooltip(col.key, index, items[index], col);
+      }
+      return col;
+    });
+  };
+
+  getText = (value, options) => {
+    if (Array.isArray(value)) {
+      return value.map(v => getTitle(v, options)).toString();
+    } else {
+      return getTitle(value, options);
+    }
+  };
+
+  link = (key, index, item, text) => {
+    const onClick = this.onLink.bind(null, key, index, item);
+    return <a onClick={onClick} onDoubleClick={this.onLinkDouble}>{text}</a>;
+  };
+
+  tooltip = (key, index, item, {tooltip:tipLen, options}) => {
+    const text = this.getText(item[key], options);
+    const needTip = tipLen > 1 && text && typeof text === 'string' && text.length > tipLen;
+    return needTip ? (
+      <Tooltip title={text}>
+        <span>{text.slice(0, tipLen) + '...'}</span>
+      </Tooltip>
+    ) : <span>{Array.isArray(text) ? text.join(',') : text}</span>;
+  };
+
+  getImgSrc = (value, options) => {
+    const index = options.findIndex(obj => obj.value == value);
+    return index === -1 ? null : options[index].img;
+  };
+
+  /**
+   *
+   * @param item{array}:列数据
+   * @param key{string}:字段key
+   * @param options{array}:字段options
+   * @param dataSource{string,array}:数据源，如果列数据有多层则用此决定
+   */
+  getSourceText = (item,key,options,dataSource) => {
+    let value = {};
+    if(typeof dataSource === 'string'){
+      value = item[dataSource] || {};
+    }else if(Array.isArray(dataSource)){
+      dataSource.forEach((source,index) => {
+        /*如果字段重复则用dataSource取到结果，key不作为取字段的标准*/
+        if(index === 0){
+          value = item[source] || {};
+        }else {
+          value = value[source] || {}
+        }
+      })
+    }
+    /*如果上面已经取到结果则不进入*/
+    if(typeof value !== 'string'){
+      value = value[key];
+    }
+    return this.getText(value, options);
+  };
+
+
+  getDataSource = (items, cols) => {
+    const getItemObj = (item, index) => {
+      return cols.reduce((result, {key, options, link, icon,dataSource}) => {
+        if (link) {
+          if (typeof link === 'boolean') {
+            result[key] = this.link(key, index, item, this.getText(item[key], options));
+          }
+        } else if (icon) { //单独的icon列，icon=true数据值根据options获得显示的图片url
+          const src = this.getImgSrc(item[key], options);
+          const onClick = this.onLink.bind(null, key, index, item);
+          result[key] = src ? <img src={src} onClick={onClick} /> : '';
+        } else if(dataSource){
+          result[key] = this.getSourceText(item,key,options,dataSource);
+        }else {
+          result[key] = this.getText(item[key], options);
+        }
+        return result;
+      }, {key: index, checked: !!item.checked});
+    };
+
+    const data = items.map((item, index) => {
+      return {
+        ...getItemObj(item, index),
+        children: item.children ? item.children.map((item2, index2) => getItemObj(item2, `${index}-${index2}`)) : null
+      };
+    });
+    return data;
+  };
+
+  getPropsByCheckbox = () => {
+    const {checkbox=true, checkedRows=[]} = this.props;
+    const rowClassName1 = (record) => {
+      return checkedRows.includes(record.key) ? variables('SuperTable3').select : '';
+    };
+    if (checkbox) {
+      return {
+          rowClassName: rowClassName1,
+          onRowClick: this.onRowClick,
+          rowSelection: {
+            selectedRowKeys: checkedRows,
+            onChange: this.onCheckChange,
+            getCheckboxProps: (record) => {
+              const checked = checkedRows.includes(record.key);
+              return {
+                checked,
+              }
+            },
+          }
+        }
+    }
+  };
+
+  getRowProps = (onRowClick) => {
+    return (record) => {
+      return {
+        onClick: () => onRowClick && onRowClick(record),
+        onDoubleClick: () => this.onDoubleClick(record)
+      };
+    };
+  };
+
+  getItems = () => {
+    const {items, childrenKey} = this.props;
+    let resItems = items;
+    if (childrenKey) {
+      resItems = items.map(o => o[childrenKey] && o[childrenKey].length ? {...o, children: o[childrenKey]} : o);
+    }
+    return resItems;
+  };
+
+  toTotalFooter = () => {
+    const {cols, items, checkedRows} = this.props;
+    const totalCols = cols.filter(item => item.total);
+    if (totalCols.length > 0) {
+      const checkedItems = items.filter((item, index) => checkedRows.includes(index));
+      const countItems = checkedItems.length ? checkedItems : items;
+      const totalItems = totalCols.map(({title, key, props={}}) => {
+        const value = countItems.reduce((result, item) => parseFloat((result + Number(item[key] || 0)).toFixed(props.precision || 6)), 0);
+        return {title, value};
+      });
+      return (
+        <div style={{height: '36px',lineHeight: '36px'}}>
+          <span style={{marginRight: `15px`}}>{checkedItems.length ? '【当页勾选汇总】' : '【当页汇总】'}</span>
+          {totalItems.map(({title, value}, index) => {
+            return (
+              <span key={index} style={{marginRight: `10px`}}>
+                <span>{title}: </span>
+                <span style={{color: '#01a4ff'}}>{value}</span>
+              </span>
+            )
+          })}
+        </div>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  getProps = () => {
+    const {cols, isPaging=false, footer = null} = this.props;
+    const items = this.getItems();
+    const {onRowClick, ...extraProps} = this.getPropsByCheckbox(items);
+    const renderProps = {
+      className: variables('SuperTable3'),
+      columns: this.getColumns(cols, items),
+      dataSource: this.getDataSource(items, cols),
+      size: 'small',
+      pagination: isPaging,
+      scroll: {x: true},
+      onChange: this.onTableChange,
+      onRow: this.getRowProps(onRowClick),
+      components: {},
+      footer: footer ? footer : this.toTotalFooter,
+      ...extraProps
+    };
+    return renderProps;
+  };
+
+  setScroll = () => {
+    const {maxHeight} = this.props;
+    if (maxHeight && this.getItems().length) {
+      const root = ReactDOM.findDOMNode(this);
+      const container = root.getElementsByClassName('ant-table-body')[0];
+      const header = root.getElementsByClassName('ant-table-thead')[0];
+      fixed(container, header, maxHeight);
+    }
+  };
+
+  shouldComponentUpdate(props, state) {
+    const keys = ['cols', 'items', 'maxHeight', 'checkedRows', 'sortInfo', 'filterInfo'];
+    return keys.some(key => props[key] !== this.props[key]) || state.filterVisibleKey !== this.state.filterVisibleKey;
+  }
+
+  componentDidMount() {
+    this.setScroll();
+  }
+
+  componentDidUpdate() {
+    this.setScroll();
+  }
+
+  render() {
+    return <Table {...this.getProps()} key={this.props.items.length} />;
+  }
+}
+
+export default SuperTable;

package/src/SuperTable3/fixed.js

@@ -0,0 +1,34 @@
+
+const isFirefox = () => {
+  return navigator.userAgent.indexOf('Firefox') > 0;
+};
+
+const getComputedStyle = (element) => {
+  return window.getComputedStyle ? window.getComputedStyle(element, null) : element.currentStyle;
+}
+
+const fixed = (container, header, maxHeight, totalFooter={}) => {
+  container.style.overflowY = 'auto';
+  container.style.maxHeight = maxHeight;
+  if (isFirefox()) {
+    container.style.position = 'relative';
+    header.style.top = '0';
+    header.style.position = 'sticky';
+    header.style.zIndex = '1';
+  } else {
+    header.parentNode.appendChild(header);
+  }
+  const containerHeight = Number(getComputedStyle(container).height.replace('px', ''))
+  const translateHeight = containerHeight - 10 - container.scrollHeight;
+  const {pageTotalElement, searchTotalElement} = totalFooter;
+  pageTotalElement && (pageTotalElement.style.transform = `translateY(${translateHeight + container.scrollTop}px)`);
+  searchTotalElement && (searchTotalElement.style.transform = `translateY(${translateHeight + container.scrollTop}px)`);
+  container.onscroll = () => {
+    if (container.scrollTop + containerHeight - 10 > container.scrollHeight) return;
+    !isFirefox() && (header.style.transform = `translateY(${container.scrollTop}px)`);
+    pageTotalElement && (pageTotalElement.style.transform = `translateY(${translateHeight + container.scrollTop}px)`);
+    searchTotalElement && (searchTotalElement.style.transform = `translateY(${translateHeight + container.scrollTop}px)`);
+  };
+};
+
+export default fixed;

package/src/SuperToolbar/SuperToolbar.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Button, Popconfirm, Icon, Dropdown, Menu} from 'antd';
+import variables from '../variables';
+const MenuItem = Menu.Item;
+const SubMenu = Menu.SubMenu;
+
+let clicktag = 0; //被点击标识
+
+/**
+ * key: 用于标识菜单项
+ * title: 菜单项上的文字
+ * subMenu: [可选]，菜单项子列表，包含key和title的对象数组，此时点击菜单项不触发事件，只有点击子列表项才会触发onSubClick事件
+ */
+const MenuType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  subMenu: PropTypes.array
+};
+
+/**
+ * key: 用于标识按钮
+ * title: 按钮上的文字
+ * bsStyle: 按钮样式，与antd中Button的type取值一样
+ * confirm: 触发按钮事件前，是否需要用户确认，以及确认的提示文字；为空串则不会触发确认提示
+ * menu: [可选]，下拉菜单项，有此属性时点击按钮不触发事件，菜单项如果仅是包含key和title的对象，点击菜单项会触发onClick事件
+ *                菜单项如果是包含key、title、subMenu的对象，则点击此菜单项不触发事件，必须点击子列表项时才会触发onSubClick事件
+ * loading: 是否正在加载，与antd中Button的loading取值一样
+ */
+const ButtonType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  bsStyle: PropTypes.string,
+  confirm: PropTypes.string,
+  menu: PropTypes.arrayOf(PropTypes.shape(MenuType)),
+  loading: PropTypes.bool,
+};
+
+const ButtonEx = ({type, children, ...props}) => {
+  props[type === 'primary-o' ? 'data-btn-type' : 'type'] = type;
+  return <Button {...props}>{children}</Button>;
+};
+
+/**
+ * onClick: 纯按钮点击时或按钮下拉项中无子菜单列表项点击触发，原型为function(key)
+ * onSubClick: 按钮为下拉时下拉项子列表项点击时触发，原型为function(key, subKey)
+ */
+class SuperToolbar extends React.Component {
+  static propTypes = {
+    buttons: PropTypes.arrayOf(PropTypes.shape(ButtonType)).isRequired,
+    size: PropTypes.oneOf(['small', 'default', 'large']),
+    onClick: PropTypes.func,
+    onSubClick: PropTypes.func
+  };
+
+  onClick = (e) => {
+    const {onClick, onSubClick} = this.props;
+    const key = typeof e === 'object' ? e.key : e;
+    if (typeof e === 'object' && e.keyPath.length === 2 && onSubClick) {
+      onSubClick(e.keyPath[1], e.keyPath[0]);
+    } else if (onClick) {
+      if(clicktag === 0){
+        clicktag = 1;
+        onClick(key);
+        //1秒过后可以再次点击
+        setTimeout(function () { clicktag = 0 }, 1000);
+      }else{
+        console.log('请勿频繁操作！');
+      }
+    }
+  };
+
+  toSubMenu = ({key, title, subMenu=[]}) => {
+    return (
+      <SubMenu key={key} title={title}>
+        {subMenu.map(({key, title}) => <MenuItem key={key}>{title}</MenuItem>)}
+      </SubMenu>
+    );
+  };
+
+  toMenu = (menu) => {
+    return (
+      <Menu onClick={this.onClick}>
+        {
+          menu.map((item) => {
+            const {key, title, subMenu} = item;
+            if (subMenu) {
+              return this.toSubMenu(item);
+            } else {
+              return <MenuItem key={key}>{title}</MenuItem>;
+            }
+          })
+        }
+      </Menu>
+    );
+  };
+
+  toButton = ({key, title, bsStyle: type, confirm, menu, loading}) => {
+    const onClick = this.onClick.bind(this, key);
+    const {size='small'} = this.props;
+    if (menu && menu.length) {
+      return (
+        <Dropdown key={key} trigger={['hover']} overlay={this.toMenu(menu)}>
+          <ButtonEx {...{size, type}}>{title}<Icon type='down'/></ButtonEx>
+        </Dropdown>
+      );
+    } else if (!confirm) {
+      return <ButtonEx {...{key, size, type, onClick, loading}}>{title}</ButtonEx>;
+    } else {
+      return (
+        <Popconfirm key={key} title={confirm} onConfirm={onClick}>
+          <ButtonEx {...{size, type, loading}}>{title}</ButtonEx>
+        </Popconfirm>
+      );
+    }
+  };
+
+  render() {
+    const {buttons} = this.props;
+    return (
+      <div className={variables('SuperToolbar')} role='toolbar'>
+        {buttons.map(this.toButton)}
+      </div>
+    );
+  }
+}
+
+export default SuperToolbar;