cloud-b2b 1.1.46 → 1.1.51

package/src/SuperTable/SuperTable.js

@@ -0,0 +1,590 @@
+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 DragSortRow from './DragSortRow';
+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：点击复选框时触发，原型func(isAll, checked, rowIndex);isolation为true时，原型为onCheck(checkedRows)
+ * onRadio: 点击单选按钮时触发，原型为func(checkedRows)
+ * onDoubleClick: 行双击时触发，原型func(rowIndex)
+ * onLink: 点击超链接时触发，原型为func(key, rowIndex, item)
+ * onTableChange: 排序信息改变时触发，原型为func(sortInfo, filterInfo)
+ * onMoveRow：行拖曳排序时触发，原型为func(dragIndex, targetIndex)
+ */
+const CallbackType = {
+  onCheck: PropTypes.func,
+  onRadio: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onLink: PropTypes.func,
+  onTableChange: PropTypes.func,
+  onMoveRow: PropTypes.func
+};
+
+/**
+ * checkbox: [可选]，是否有复选框，默认为true
+ * isPaging: [可选]，是否分页，默认为false
+ * radio: [可选]，是否为单选按钮，当checkbox为true时生效，默认值为false
+ * isolation: [可选]，为true时，复选框的选中行采用checkedRows存储
+ * checkedRows: [可选]，选中的行数，radio为true时生效
+ * index: [可选]，是否有序号，默认值为true
+ * indexTitle：[可选]，序号标题，默认为'序号'
+ * sortInfo: [可选]，排序信息，默认为null
+ * filterInfo: [可选]，过滤信息，默认为null
+ * maxHeight: [可选]，设置表格的最大高度
+ * dragSort: [可选], 为true表示支持行拖曳排序，且不支持行单击选中复选或单选按钮和双击事件，默认为false
+ * isEmphasized: [可选]，是否强调，行字体加粗显示；要实现字体加粗显示除了isEmphasized设置为true之外，加粗行数据里要设置__isEmphasized为true
+ * isWeaken: [可选]，是否弱化行字体置灰显示，除了isWeaken设置为true之外，置灰行数据里要设置__isWeaken为true
+ * pageTotal: [可选], 为true表示开启表格末行自动汇总表格列数据，默认为false || searchTotal，当开启时，需要汇总的列需设置属性total为true,当dragSort为true时，该选项失效
+ * searchTotal: [可选], 表格汇总数据对象，该属性不为空时pageTotal默认开启，当dragSort为true时，该选项失效
+ */
+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,
+    isolation: PropTypes.bool,
+    checkedRows: PropTypes.array,
+    index: PropTypes.bool,
+    indexTitle: PropTypes.string,
+    sortInfo: PropTypes.object,
+    filterInfo: PropTypes.object,
+    maxHeight: PropTypes.string,
+    callback: PropTypes.shape(CallbackType),
+    isEmphasized: PropTypes.bool,
+    isWeaken: PropTypes.bool,
+    dragSort: PropTypes.bool,
+    pageTotal: PropTypes.bool,
+    searchTotal: PropTypes.object,
+  };
+
+  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=[], isWeaken=false, pageTotal, searchTotal} = this.props;
+      let offset = 0;
+      pageTotal && offset--;
+      searchTotal && offset--;
+      const realSlectedList = selectedKeyArr.length > items.length ? selectedKeyArr.slice(0, selectedKeyArr.length + offset) : selectedKeyArr;
+      const selectedKeys = isWeaken ? realSlectedList.filter(o => !items[o].__isWeaken) : realSlectedList;
+      const newItems = isWeaken ? items.filter(o => !o.__isWeaken) : 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 {isWeaken=false, items} = this.props;
+    if (items.length <= record.key) return;
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      const {onCheck} = this.props.callback || {};
+      if (onCheck) {
+        const {isolation, checkedRows=[]} = this.props;
+        if (isolation) {
+          if (checkedRows.includes(record.key)) {
+            onCheck(checkedRows.filter(key => record.key !== key));
+          } else {
+            onCheck(checkedRows.concat(record.key));
+          }
+        } else {
+          const checked = isWeaken && items[record.key].__isWeaken ? false : !record.checked;
+          onCheck(false, checked, 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();
+  };
+
+  onMoveRow = (dragIndex, targetIndex) => {
+    const {onMoveRow} = this.props.callback || {};
+    onMoveRow && onMoveRow(dragIndex, targetIndex);
+  };
+
+  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) => (items[record.key].__totalIndexTitle || 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 items = this.getItems();
+        if (items[record.key].__total) return true;
+        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 ? variables('SuperTable')[col.align] : '');
+      col.noWrap && (col.className = variables('SuperTable').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) => {
+    return items.map((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});
+    });
+  };
+
+  getPropsByCheckbox = (items) => {
+    const {checkbox=true, radio=false, isolation, checkedRows=[],isEmphasized=false, isWeaken=true} = this.props;
+    const rowClassName1 = (record) => {
+      if (items[record.key].__total) return variables('SuperTable').totalRow;
+      if(items[record.key].__warningRow) return variables('SuperTable').warningRow;
+      return checkedRows.includes(record.key) ? variables('SuperTable').select : '';
+    };
+    const rowClassName2 = (record) => {
+      if (items[record.key].__total) return variables('SuperTable').totalRow;
+      if(items[record.key].__warningRow) return variables('SuperTable').warningRow;
+      if (isEmphasized && items[record.key].__isEmphasized) {
+        return items[record.key].checked ? variables('SuperTable').emphasizedSelectRow : variables('SuperTable').emphasizedUnselectRow;
+      }
+      if (isWeaken && items[record.key].__isWeaken) {
+        return items[record.key].checked ? variables('SuperTable').weakenedSelectRow : variables('SuperTable').weakenedUnselectRow;
+      }
+      return items[record.key].checked ? variables('SuperTable').select : '';
+    };
+    if (checkbox) {
+      if (radio) {
+        return {
+          rowClassName: rowClassName1,
+          onRowClick: this.onRadioRowClick,
+          rowSelection: {
+            type: 'radio',
+            selectedRowKeys: checkedRows,
+            onChange: this.onRadioChange
+          }
+        }
+      } else if (isolation) {
+        return {
+          rowClassName: rowClassName1,
+          onRowClick: this.onRowClick,
+          rowSelection: {
+            selectedRowKeys: checkedRows,
+            onChange: this.onCheckChange,
+            getCheckboxProps: (record) => {
+              const checked = checkedRows.includes(record.key);
+              return {
+                checked,
+                disabled: items[record.key].__isWeaken,
+                style: items[record.key].__total ? {display: 'none'} : {}
+              }
+            },
+          }
+        }
+      } else {
+        return {
+          rowClassName: rowClassName2,
+          onRowClick: this.onRowClick,
+          rowSelection: {
+            selectedRowKeys: this.getSelectedRowKeys(items),
+            onChange: this.onChange,
+            getCheckboxProps: (record) => {
+              const checked = isWeaken && items[record.key].__isWeaken ? false : !!record.checked;
+              return {
+                checked,
+                disabled: items[record.key].__isWeaken,
+                style: items[record.key].__total ? {display: 'none'} : {}
+              }
+            },
+          }
+        }
+      }
+    } else {
+      return {
+        rowClassName: rowClassName2,
+      };
+    }
+  };
+
+  getRowProps = (onRowClick) => {
+    return (record) => {
+      return {
+        onClick: () => onRowClick && onRowClick(record),
+        onDoubleClick: () => this.onDoubleClick(record)
+      };
+    };
+  };
+
+  getRowPropsForDrag = () => {
+    return (record, index) => {
+      return {
+        index,
+        onMoveRow: this.onMoveRow
+      };
+    }
+  };
+
+  getItems = () => {
+    const {items, cols, dragSort = false, pageTotal = false, searchTotal} = this.props;
+    let resItems = items;
+    if (!dragSort && items.length > 1) {
+      if (pageTotal || searchTotal) {
+        const totalItem = cols.reduce((result, {key, total=false}) => {
+          if (total) {
+            result[key] = parseFloat(Number(items.reduce((result, item) => parseFloat(String(item[key] || 0)) + result, 0)).toFixed(4));
+          }
+          return result;
+        }, {__total: true, __totalIndexTitle: '本页汇总'});
+        resItems = resItems.concat([totalItem]);
+      }
+      if (searchTotal) {
+        resItems = resItems.concat([{...searchTotal, __total: true, __totalIndexTitle: '查询汇总'}]);
+      }
+    }
+    return resItems;
+  };
+
+  toTotalFooter = () => {
+    const {cols, items, isolation, checkedRows} = this.props;
+    const totalCols = cols.filter(item => item.total);
+    if (totalCols.length > 0) {
+      const checkedItems = isolation ? items.filter((item, index) => checkedRows.includes(index)) : items.filter(item => item.checked);
+      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, isEmphasized=false, isWeaken=false, dragSort ,footer = null} = this.props;
+    const items = this.getItems();
+    const {onRowClick, ...extraProps} = this.getPropsByCheckbox(items);
+    const renderProps = {
+      className: !isEmphasized || !isWeaken ? variables('SuperTable') : variables('SuperTable').noTransition,
+      columns: this.getColumns(cols, items),
+      dataSource: this.getDataSource(items, cols),
+      size: 'small',
+      pagination: isPaging,
+      scroll: {x: true},
+      onChange: this.onTableChange,
+      onRow: dragSort ? this.getRowPropsForDrag(): this.getRowProps(onRowClick),
+      components: dragSort ? {body: {row: DragSortRow}} : {},
+      footer: footer ? footer : this.toTotalFooter,
+      ...extraProps
+    };
+    return renderProps;
+  };
+
+  setScroll = () => {
+    const {maxHeight, pageTotal, searchTotal} = 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];
+
+      const tbody = root.getElementsByClassName('ant-table-tbody')[0];
+      const pageTotalOffset = searchTotal ? 2 : 1;
+      const pageTotalElement = pageTotal && tbody && tbody.children ? tbody.children[tbody.children.length - pageTotalOffset] : null;
+      const searchTotalElement = searchTotal && tbody && tbody.children ? tbody.children[tbody.children.length - 1] : null;
+      fixed(container, header, maxHeight, {pageTotalElement, searchTotalElement});
+    }
+  };
+
+  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/SuperTable/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;