cloud-b2b 1.1.59 → 1.1.60

package/src/SuperTable3/SuperTable.js

@@ -1,498 +0,0 @@
-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

@@ -1,34 +0,0 @@
-
-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

@@ -1,128 +0,0 @@
-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;