chore(Transfer): clean code

Author: jinchanz

src/transfer/view/transfer-panel.jsx

@@ -47,16 +47,8 @@ export default class TransferPanel extends Component {
             dragValue: null,
             dragOverValue: null,
         };
-        this.footerId = props.baseId
-            ? htmlId.escapeForId(
-                  `${props.baseId}-panel-footer-${props.position}`
-              )
-            : '';
-        this.headerId = props.baseId
-            ? htmlId.escapeForId(
-                  `${props.baseId}-panel-header-${props.position}`
-              )
-            : '';
+        this.footerId = props.baseId ? htmlId.escapeForId(`${props.baseId}-panel-footer-${props.position}`) : '';
+        this.headerId = props.baseId ? htmlId.escapeForId(`${props.baseId}-panel-header-${props.position}`) : '';
 
         bindCtx(this, [
             'handleCheck',
@@ -76,10 +68,7 @@ export default class TransferPanel extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (
-            prevProps.dataSource.length !== this.props.dataSource.length &&
-            this.list
-        ) {
+        if (prevProps.dataSource.length !== this.props.dataSource.length && this.list) {
             if (this.list.scrollTop > 0) {
                 this.list.scrollTop = 0;
             }
@@ -93,16 +82,7 @@ export default class TransferPanel extends Component {
     }
 
     getListData(dataSource, disableHighlight) {
-        const {
-            prefix,
-            position,
-            mode,
-            value,
-            onMove,
-            disabled,
-            itemRender,
-            sortable,
-        } = this.props;
+        const { prefix, position, mode, value, onMove, disabled, itemRender, sortable } = this.props;
         const { dragPosition, dragValue, dragOverValue } = this.state;
         return dataSource.map(item => {
             const others =
@@ -122,9 +102,7 @@ export default class TransferPanel extends Component {
                     item={item}
                     onCheck={this.handleCheck}
                     onClick={onMove}
-                    needHighlight={
-                        !this.firstRender && !this.searched && !disableHighlight
-                    }
+                    needHighlight={!this.firstRender && !this.searched && !disableHighlight}
                     itemRender={itemRender}
                     draggable={sortable}
                     onDragStart={this.handleItemDragStart}
@@ -209,10 +187,7 @@ export default class TransferPanel extends Component {
         const { title, prefix } = this.props;
 
         return (
-            <div
-                id={this.headerId}
-                className={`${prefix}transfer-panel-header`}
-            >
+            <div id={this.headerId} className={`${prefix}transfer-panel-header`}>
                 {title}
             </div>
         );
@@ -232,13 +207,7 @@ export default class TransferPanel extends Component {
     }
 
     renderList(dataSource) {
-        const {
-            prefix,
-            listClassName,
-            listStyle,
-            customerList,
-            useVirtual,
-        } = this.props;
+        const { prefix, listClassName, listStyle, customerList, useVirtual } = this.props;
         const newClassName = cx({
             [`${prefix}transfer-panel-list`]: true,
             [listClassName]: !!listClassName,
@@ -247,11 +216,7 @@ export default class TransferPanel extends Component {
         const customerPanel = customerList && customerList(this.props);
         if (customerPanel) {
             return (
-                <div
-                    className={newClassName}
-                    style={listStyle}
-                    ref={this.getListDOM}
-                >
+                <div className={newClassName} style={listStyle} ref={this.getListDOM}>
                     {customerPanel}
                 </div>
             );
@@ -267,10 +232,7 @@ export default class TransferPanel extends Component {
 
         if (useVirtual) {
             return (
-                <div
-                    className={newClassName}
-                    style={{ position: 'relative', ...listStyle }}
-                >
+                <div className={newClassName} style={{ position: 'relative', ...listStyle }}>
                     <VirtualList
                         itemsRenderer={(items, ref) => (
                             <Menu style={{ border: 'none' }} ref={ref}>
@@ -285,11 +247,7 @@ export default class TransferPanel extends Component {
         }
 
         return (
-            <Menu
-                className={newClassName}
-                style={listStyle}
-                ref={this.getListDOM}
-            >
+            <Menu className={newClassName} style={listStyle} ref={this.getListDOM}>
                 {this.getListData(dataSource)}
             </Menu>
         );
@@ -300,22 +258,13 @@ export default class TransferPanel extends Component {
 
         return (
             <div className={`${prefix}transfer-panel-not-found-container`}>
-                <div className={`${prefix}transfer-panel-not-found`}>
-                    {notFoundContent}
-                </div>
+                <div className={`${prefix}transfer-panel-not-found`}>{notFoundContent}</div>
             </div>
         );
     }
 
     renderFooter() {
-        const {
-            prefix,
-            position,
-            mode,
-            disabled,
-            locale,
-            showCheckAll,
-        } = this.props;
+        const { prefix, position, mode, disabled, locale, showCheckAll } = this.props;
         if (mode === 'simple') {
             const { onMoveAll } = this.props;
             const classNames = cx({
@@ -324,13 +273,7 @@ export default class TransferPanel extends Component {
             });
             return (
                 <div className={`${prefix}transfer-panel-footer`}>
-                    <a
-                        className={classNames}
-                        onClick={onMoveAll.bind(
-                            this,
-                            position === 'left' ? 'right' : 'left'
-                        )}
-                    >
+                    <a className={classNames} onClick={onMoveAll.bind(this, position === 'left' ? 'right' : 'left')}>
                         {locale.moveAll}
                     </a>
                 </div>
@@ -342,13 +285,9 @@ export default class TransferPanel extends Component {
         const totalCount = dataSource.length;
         const totalEnabledCount = this.enabledDatasource.length;
         const checked = checkedCount > 0 && checkedCount >= totalEnabledCount;
-        const indeterminate =
-            checkedCount > 0 && checkedCount < totalEnabledCount;
+        const indeterminate = checkedCount > 0 && checkedCount < totalEnabledCount;
         const items = totalCount > 1 ? locale.items : locale.item;
-        const countLabel =
-            checkedCount === 0
-                ? `${totalCount} ${items}`
-                : `${checkedCount}/${totalCount} ${items}`;
+        const countLabel = checkedCount === 0 ? `${totalCount} ${items}` : `${checkedCount}/${totalCount} ${items}`;
 
         return (
             <div className={`${prefix}transfer-panel-footer`}>
@@ -361,10 +300,7 @@ export default class TransferPanel extends Component {
                         aria-labelledby={this.footerId}
                     />
                 )}
-                <span
-                    className={`${prefix}transfer-panel-count`}
-                    id={this.footerId}
-                >
+                <span className={`${prefix}transfer-panel-count`} id={this.footerId}>
                     {countLabel}
                 </span>
             </div>