style: Fix jsx-no-multiline-js (#3994)

* Fix jsx-no-multiline-js

* TimePicker addon test

* Transfer search test

components/alert/index.tsx

@@ -108,6 +108,12 @@ export default class Alert extends React.Component<AlertProps, any> {
       closable = true;
     }
 
+    const closeIcon = closable ? (
+      <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
+        {closeText || <Icon type="cross" />}
+      </a>
+    ) : null;
+
     return this.state.closed ? null : (
       <Animate
         component=""
@@ -119,9 +125,7 @@ export default class Alert extends React.Component<AlertProps, any> {
           {showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
           <span className={`${prefixCls}-message`}>{message}</span>
           <span className={`${prefixCls}-description`}>{description}</span>
-          {closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
-            {closeText || <Icon type="cross" />}
-          </a> : null}
+          {closeIcon}
         </div>
       </Animate>
     );

components/back-top/index.tsx

@@ -118,15 +118,15 @@ export default class BackTop extends React.Component<BackTopProps, any> {
       'visibilityHeight',
     ]);
 
+    const backTopBtn = this.state.visible ? (
+      <div {...divProps} className={classString} onClick={this.scrollToTop}>
+        {children || defaultElement}
+      </div>
+    ) : null;
+
     return (
       <Animate component="" transitionName="fade">
-        {
-          this.state.visible ?
-            <div {...divProps} className={classString} onClick={this.scrollToTop}>
-              {children || defaultElement}
-            </div>
-          : null
-        }
+        {backTopBtn}
       </Animate>
     );
   }

components/badge/index.tsx

@@ -83,6 +83,19 @@ export default class Badge extends React.Component<BadgeProps, any> {
       );
     }
 
+    const scrollNumber = hidden ? null : (
+      <ScrollNumber
+        data-show={!hidden}
+        className={scrollNumberCls}
+        count={count}
+        style={style}
+      />
+    );
+
+    const statusText = (hidden || !text) ? null : (
+      <span className={`${prefixCls}-status-text`}>{text}</span>
+    );
+
     return (
       <span {...restProps} className={badgeCls} title={realCount}>
         {children}
@@ -92,20 +105,9 @@ export default class Badge extends React.Component<BadgeProps, any> {
           transitionName={children ? `${prefixCls}-zoom` : ''}
           transitionAppear
         >
-          {
-            hidden ? null :
-              <ScrollNumber
-                data-show={!hidden}
-                className={scrollNumberCls}
-                count={count}
-                style={style}
-              />
-          }
+          {scrollNumber}
         </Animate>
-        {
-          hidden || !text ? null :
-            <span className={`${prefixCls}-status-text`}>{text}</span>
-        }
+        {statusText}
       </span>
     );
   }

components/cascader/index.tsx

@@ -310,6 +310,33 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     if (resultListMatchInputWidth && state.inputValue && this.refs.input) {
       dropdownMenuColumnStyle.width = this.refs.input.refs.input.offsetWidth;
     }
+
+    const input = children || (
+      <span
+        style={style}
+        className={pickerCls}
+      >
+        <Input
+          {...inputProps}
+          ref="input"
+          placeholder={value && value.length > 0 ? null : placeholder}
+          className={`${prefixCls}-input ${sizeCls}`}
+          value={state.inputValue}
+          disabled={disabled}
+          readOnly={!showSearch}
+          autoComplete="off"
+          onClick={showSearch ? this.handleInputClick : undefined}
+          onBlur={showSearch ? this.handleInputBlur : undefined}
+          onChange={showSearch ? this.handleInputChange : undefined}
+        />
+        <span className={`${prefixCls}-picker-label`}>
+          {this.getLabel()}
+        </span>
+        {clearIcon}
+        <Icon type="down" className={arrowCls} />
+      </span>
+    );
+
     return (
       <RcCascader
         {...props}
@@ -320,31 +347,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
         onChange={this.handleChange}
         dropdownMenuColumnStyle={dropdownMenuColumnStyle}
       >
-        {children ||
-          <span
-            style={style}
-            className={pickerCls}
-          >
-            <Input
-              {...inputProps}
-              ref="input"
-              placeholder={value && value.length > 0 ? null : placeholder}
-              className={`${prefixCls}-input ${sizeCls}`}
-              value={state.inputValue}
-              disabled={disabled}
-              readOnly={!showSearch}
-              autoComplete="off"
-              onClick={showSearch ? this.handleInputClick : undefined}
-              onBlur={showSearch ? this.handleInputBlur : undefined}
-              onChange={showSearch ? this.handleInputChange : undefined}
-            />
-            <span className={`${prefixCls}-picker-label`}>
-              {this.getLabel()}
-            </span>
-            {clearIcon}
-            <Icon type="down" className={arrowCls} />
-          </span>
-        }
+        {input}
       </RcCascader>
     );
   }

components/checkbox/Group.tsx

@@ -84,22 +84,21 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps, C
   }
   render() {
     const { prefixCls } = this.props;
-    const options = this.getOptions();
+    const options = this.getOptions().map(option =>
+      <Checkbox
+        disabled={'disabled' in option ? option.disabled : this.props.disabled}
+        checked={this.state.value.indexOf(option.value) !== -1}
+        onChange={() => this.toggleOption(option)}
+        className={`${prefixCls}-item`}
+        key={option.value}
+      >
+        {option.label}
+      </Checkbox>
+    );
+
     return (
       <div className={prefixCls}>
-        {
-          options.map(option =>
-            <Checkbox
-              disabled={'disabled' in option ? option.disabled : this.props.disabled}
-              checked={this.state.value.indexOf(option.value) !== -1}
-              onChange={() => this.toggleOption(option)}
-              className={`${prefixCls}-item`}
-              key={option.value}
-            >
-              {option.label}
-            </Checkbox>
-          )
-        }
+        {options}
       </div>
     );
   }

components/date-picker/RangePicker.tsx

@@ -141,6 +141,32 @@ export default class RangePicker extends React.Component<any, any> {
         onClick={this.clearSelection}
       /> : null;
 
+    const input = ({ value }) => {
+      const start = value[0];
+      const end = value[1];
+      return (
+        <span className={props.pickerInputClass} disabled={props.disabled}>
+          <input
+            disabled={props.disabled}
+            readOnly
+            value={(start && start.format(props.format)) || ''}
+            placeholder={startPlaceholder}
+            className={`${prefixCls}-range-picker-input`}
+          />
+          <span className={`${prefixCls}-range-picker-separator`}> ~ </span>
+          <input
+            disabled={props.disabled}
+            readOnly
+            value={(end && end.format(props.format)) || ''}
+            placeholder={endPlaceholder}
+            className={`${prefixCls}-range-picker-input`}
+          />
+          {clearIcon}
+          <span className={`${prefixCls}-picker-icon`} />
+        </span>
+      );
+    };
+
     return (<span className={props.pickerClass} style={style}>
       <RcDatePicker
         {...props}
@@ -152,33 +178,7 @@ export default class RangePicker extends React.Component<any, any> {
         prefixCls={`${prefixCls}-picker-container`}
         style={popupStyle}
       >
-        {
-          ({ value }) => {
-            const start = value[0];
-            const end = value[1];
-            return (
-              <span className={props.pickerInputClass} disabled={props.disabled}>
-                <input
-                  disabled={props.disabled}
-                  readOnly
-                  value={(start && start.format(props.format)) || ''}
-                  placeholder={startPlaceholder}
-                  className={`${prefixCls}-range-picker-input`}
-                />
-                <span className={`${prefixCls}-range-picker-separator`}> ~ </span>
-                <input
-                  disabled={props.disabled}
-                  readOnly
-                  value={(end && end.format(props.format)) || ''}
-                  placeholder={endPlaceholder}
-                  className={`${prefixCls}-range-picker-input`}
-                />
-                {clearIcon}
-                <span className={`${prefixCls}-picker-icon`} />
-              </span>
-            );
-          }
-        }
+        {input}
       </RcDatePicker>
     </span>);
   }

components/date-picker/createPicker.tsx

@@ -134,6 +134,21 @@ export default function createPicker(TheCalendar) {
           className={`${prefixCls}-picker-clear`}
           onClick={this.clearSelection}
         /> : null;
+
+      const input = ({ value }) => (
+        <span>
+          <input
+            disabled={props.disabled}
+            readOnly
+            value={(value && value.format(props.format)) || ''}
+            placeholder={placeholder}
+            className={props.pickerInputClass}
+          />
+          {clearIcon}
+          <span className={`${prefixCls}-picker-icon`} />
+        </span>
+      );
+
       return (
         <span className={props.pickerClass} style={props.style}>
           <RcDatePicker
@@ -145,23 +160,7 @@ export default function createPicker(TheCalendar) {
             prefixCls={`${prefixCls}-picker-container`}
             style={props.popupStyle}
           >
-            {
-              ({ value }) => {
-                return (
-                  <span>
-                    <input
-                      disabled={props.disabled}
-                      readOnly
-                      value={(value && value.format(props.format)) || ''}
-                      placeholder={placeholder}
-                      className={props.pickerInputClass}
-                    />
-                    {clearIcon}
-                    <span className={`${prefixCls}-picker-icon`} />
-                  </span>
-                );
-              }
-            }
+            {input}
           </RcDatePicker>
         </span>
       );

components/table/filterDropdown.tsx

@@ -95,13 +95,15 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
   renderMenuItem(item) {
     const { column } = this.props;
     const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
+    const input = multiple ? (
+      <Checkbox checked={this.state.selectedKeys.indexOf(item.value.toString()) >= 0} />
+    ) : (
+      <Radio checked={this.state.selectedKeys.indexOf(item.value.toString()) >= 0} />
+    );
+
     return (
       <MenuItem key={item.value}>
-        {
-          multiple
-            ? <Checkbox checked={this.state.selectedKeys.indexOf(item.value.toString()) >= 0} />
-            : <Radio checked={this.state.selectedKeys.indexOf(item.value.toString()) >= 0} />
-        }
+        {input}
         <span>{item.text}</span>
       </MenuItem>
     );

components/tabs/index.tsx

@@ -121,17 +121,19 @@ export default class Tabs extends React.Component<TabsProps, any> {
       </div>
     ) : null;
 
+    const renderTabBar = () => (
+      <ScrollableInkTabBar
+        extraContent={tabBarExtraContent}
+        onTabClick={onTabClick}
+      />
+    );
+
     return (
       <RcTabs
         {...this.props}
         className={cls}
         tabBarPosition={tabPosition}
-        renderTabBar={() => (
-          <ScrollableInkTabBar
-            extraContent={tabBarExtraContent}
-            onTabClick={onTabClick}
-          />
-        )}
+        renderTabBar={renderTabBar}
         renderTabContent={() => <TabContent animated={animated} />}
         onChange={this.handleChange}
       >

components/tag/index.tsx

@@ -92,6 +92,20 @@ export default class Tag extends React.Component<TagProps, any> {
       'onClose',
       'afterClose',
     ]);
+    const tagStyle = assign({
+      backgroundColor: /blue|red|green|yellow/.test(color) ? null : color,
+    }, style);
+    const tag = this.state.closed ? null : (
+      <div
+        data-show={!this.state.closing}
+        {...divProps}
+        className={classString}
+        style={tagStyle}
+      >
+        <span className={`${prefixCls}-text`}>{children}</span>
+        {closeIcon}
+      </div>
+    );
     return (
       <Animate
         component=""
@@ -100,19 +114,7 @@ export default class Tag extends React.Component<TagProps, any> {
         transitionAppear
         onEnd={this.animationEnd}
       >
-        {this.state.closed ? null : (
-          <div
-            data-show={!this.state.closing}
-            {...divProps}
-            className={classString}
-            style={assign({
-              backgroundColor: /blue|red|green|yellow/.test(color) ? null : color,
-            }, style)}
-          >
-            <span className={`${prefixCls}-text`}>{children}</span>
-            {closeIcon}
-          </div>
-        ) }
+        {tag}
       </Animate>
     );
   }

components/time-picker/index.tsx

@@ -100,6 +100,14 @@ export default class TimePicker extends React.Component<TimePickerProps, any> {
       [`${props.prefixCls}-${props.size}`]: !!props.size,
     });
 
+    const addon = (panel) => (
+      props.addon ? (
+        <div className={`${props.prefixCls}-panel-addon`}>
+          {props.addon(panel)}
+        </div>
+      ) : null
+    );
+
     return (
       <RcTimePicker
         {...props}
@@ -110,11 +118,7 @@ export default class TimePicker extends React.Component<TimePickerProps, any> {
         showMinute={props.format.indexOf('mm') > -1}
         showSecond={props.format.indexOf('ss') > -1}
         onChange={this.handleChange}
-        addon={(panel) => (
-          props.addon ? <div className={`${props.prefixCls}-panel-addon`}>
-            {props.addon(panel)}
-          </div> : null
-        )}
+        addon={addon}
       />
     );
   }

components/timeline/Timeline.tsx

@@ -26,18 +26,18 @@ export default class Timeline extends React.Component<TimelineProps, any> {
       [`${prefixCls}-pending`]: !!pending,
       [className]: className,
     });
+    const items = React.Children.map(children, (ele: React.ReactElement<any>, idx) =>
+      React.cloneElement(ele, {
+        last: idx === children.length - 1,
+      })
+    );
+    const pendingItem = (!!pending) ? (
+      <TimelineItem pending={!!pending}>{pendingNode}</TimelineItem>
+    ) : null;
     return (
       <ul {...restProps} className={classString}>
-        {
-          React.Children.map(children, (ele: React.ReactElement<any>, idx) =>
-            React.cloneElement(ele, {
-              last: idx === children.length - 1,
-            })
-          )
-        }
-        {(!!pending)
-          ? <TimelineItem pending={!!pending}>{pendingNode}</TimelineItem>
-          : null}
+        {items}
+        {pendingItem}
       </ul>
     );
   }

components/transfer/list.tsx

@@ -171,6 +171,37 @@ export default class TransferList extends React.Component<TransferListProps, any
     const checkStatus = this.getCheckStatus(filteredDataSource);
     const outerPrefixCls = prefixCls.replace('-list', '');
 
+    const listBody = bodyDom || (
+      <div className={showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
+        {showSearch ? <div className={`${prefixCls}-body-search-wrapper`}>
+          <Search
+            prefixCls={`${prefixCls}-search`}
+            onChange={this.handleFilter}
+            handleClear={this.handleClear}
+            placeholder={searchPlaceholder || 'Search'}
+            value={filter}
+          />
+        </div> : null}
+        <Animate
+          component="ul"
+          className={`${prefixCls}-content`}
+          transitionName={this.state.mounted ? `${prefixCls}-content-item-highlight` : ''}
+          transitionLeave={false}
+        >
+          {showItems}
+        </Animate>
+        <div className={`${prefixCls}-body-not-found`}>
+          {notFoundContent || 'Not Found'}
+        </div>
+      </div>
+    );
+
+    const listFooter = footerDom ? (
+      <div className={`${prefixCls}-footer`}>
+        {footerDom}
+      </div>
+    ) : null;
+
     return (
       <div className={listCls} style={style}>
         <div className={`${prefixCls}-header`}>
@@ -191,32 +222,8 @@ export default class TransferList extends React.Component<TransferListProps, any
             </span>
           </span>
         </div>
-        {bodyDom ||
-          <div className={showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
-            {showSearch ? <div className={`${prefixCls}-body-search-wrapper`}>
-              <Search
-                prefixCls={`${prefixCls}-search`}
-                onChange={this.handleFilter}
-                handleClear={this.handleClear}
-                placeholder={searchPlaceholder || 'Search'}
-                value={filter}
-              />
-            </div> : null}
-            <Animate
-              component="ul"
-              className={`${prefixCls}-content`}
-              transitionName={this.state.mounted ? `${prefixCls}-content-item-highlight` : ''}
-              transitionLeave={false}
-            >
-              {showItems}
-            </Animate>
-            <div className={`${prefixCls}-body-not-found`}>
-              {notFoundContent || 'Not Found'}
-            </div>
-          </div>}
-        {footerDom ? <div className={`${prefixCls}-footer`}>
-          {footerDom}
-        </div> : null}
+        {listBody}
+        {listFooter}
       </div>
     );
   }

components/transfer/search.tsx

@@ -33,6 +33,14 @@ export default class Search extends React.Component<SearchProps, any> {
 
   render() {
     const { placeholder, value, prefixCls } = this.props;
+    const icon = (value && value.length > 0) ? (
+      <a href="#" className={`${prefixCls}-action`} onClick={this.handleClear}>
+        <Icon type="cross-circle" />
+      </a>
+    ) : (
+      <span className={`${prefixCls}-action`}><Icon type="search" /></span>
+    );
+
     return (
       <div>
         <Input
@@ -42,12 +50,7 @@ export default class Search extends React.Component<SearchProps, any> {
           ref="input"
           onChange={this.handleChange}
         />
-        {value && value.length > 0 ?
-          <a href="#" className={`${prefixCls}-action`} onClick={this.handleClear}>
-            <Icon type="cross-circle" />
-          </a>
-          : <span className={`${prefixCls}-action`}><Icon type="search" /></span>
-        }
+        {icon}
       </div>
     );
   }

components/upload/uploadList.tsx

@@ -101,51 +101,51 @@ export default class UploadList extends React.Component<UploadListProps, any> {
         [`${prefixCls}-list-item`]: true,
         [`${prefixCls}-list-item-${file.status}`]: true,
       });
+      const preview = file.url ? (
+        <a
+          href={file.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`${prefixCls}-list-item-name`}
+          onClick={e => this.handlePreview(file, e)}
+        >
+          {file.name}
+        </a>
+      ) : (
+        <span
+          className={`${prefixCls}-list-item-name`}
+          onClick={e => this.handlePreview(file, e)}
+        >
+          {file.name}
+        </span>
+      );
+      const style = (file.url || file.thumbUrl) ? undefined : {
+        pointerEvents: 'none',
+        opacity: 0.5,
+      };
+      const actions = (listType === 'picture-card' && file.status !== 'uploading') ? (
+        <span>
+          <a
+            href={file.url || file.thumbUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={style}
+            onClick={e => this.handlePreview(file, e)}
+          >
+            <Icon type="eye-o" />
+          </a>
+          <Icon type="delete" title="Remove file" onClick={() => this.handleClose(file)} />
+        </span>
+      ) : (
+        <Icon type="cross" title="Remove file" onClick={() => this.handleClose(file)} />
+      );
+
       return (
         <div className={infoUploadingClass} key={file.uid}>
           <div className={`${prefixCls}-list-item-info`}>
             {icon}
-            {
-              file.url
-              ? (
-                <a
-                  href={file.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={`${prefixCls}-list-item-name`}
-                  onClick={e => this.handlePreview(file, e)}
-                >
-                  {file.name}
-                </a>
-              ) : (
-                <span
-                  className={`${prefixCls}-list-item-name`}
-                  onClick={e => this.handlePreview(file, e)}
-                >
-                  {file.name}
-                </span>
-              )
-            }
-            {
-              listType === 'picture-card' && file.status !== 'uploading'
-              ? (
-                <span>
-                  <a
-                    href={file.url || file.thumbUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    style={(file.url || file.thumbUrl) ? undefined : {
-                      pointerEvents: 'none',
-                      opacity: 0.5,
-                    }}
-                    onClick={e => this.handlePreview(file, e)}
-                  >
-                    <Icon type="eye-o" />
-                  </a>
-                  <Icon type="delete" title="Remove file" onClick={() => this.handleClose(file)} />
-                </span>
-              ) : <Icon type="cross" title="Remove file" onClick={() => this.handleClose(file)} />
-            }
+            {preview}
+            {actions}
           </div>
           {progress}
         </div>

tests/time-picker/__snapshots__/index.test.js.snap

+exports[`TimePicker renders addon correctly 1`] = `
+<div
+  class="ant-time-picker-panel-addon">
+  <button>
+    Ok
+  </button>
+</div>
+`;

tests/time-picker/index.test.js

+import React from 'react';
+import { mount, render } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import RcTimePicker from 'rc-time-picker/lib/TimePicker';
+import TimePicker from '../../components/time-picker';
+
+describe('TimePicker', () => {
+  it('renders addon correctly', () => {
+    const addon = (panel) => (<button>Ok</button>);
+    const wrapper = mount(<TimePicker addon={addon} />);
+    const rcTimePicker = wrapper.find(RcTimePicker);
+    const addonWrapper = render(rcTimePicker.props().addon());
+
+    expect(renderToJson(addonWrapper)).toMatchSnapshot();
+  });
+});

tests/transfer/__snapshots__/search.test.js.snap

+exports[`Search shows cross icon when user inputting 1`] = `
+<Search
+  placeholder=""
+  value={true}>
+  <div>
+    <Input
+      autosize={false}
+      disabled={false}
+      onChange={[Function]}
+      placeholder=""
+      prefixCls="ant-input"
+      type="text"
+      value={true}>
+      <span
+        className="ant-input-wrapper">
+        <input
+          className="ant-input"
+          disabled={false}
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          placeholder=""
+          type="text"
+          value={true} />
+      </span>
+    </Input>
+    <span
+      className="undefined-action">
+      <Component
+        type="search">
+        <i
+          className="anticon anticon-search " />
+      </Component>
+    </span>
+  </div>
+</Search>
+`;
+
+exports[`Search shows cross icon when user inputting 2`] = `
+<Search
+  placeholder=""
+  value="a">
+  <div>
+    <Input
+      autosize={false}
+      disabled={false}
+      onChange={[Function]}
+      placeholder=""
+      prefixCls="ant-input"
+      type="text"
+      value="a">
+      <span
+        className="ant-input-wrapper">
+        <input
+          className="ant-input"
+          disabled={false}
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          placeholder=""
+          type="text"
+          value="a" />
+      </span>
+    </Input>
+    <a
+      className="undefined-action"
+      href="#"
+      onClick={[Function]}>
+      <Component
+        type="cross-circle">
+        <i
+          className="anticon anticon-cross-circle " />
+      </Component>
+    </a>
+  </div>
+</Search>
+`;

tests/transfer/search.test.js

+import React, { Component } from 'react';
+import { mount } from 'enzyme';
+import { mountToJson } from 'enzyme-to-json';
+import Search from '../../components/transfer/search';
+
+describe('Search', () => {
+  it('shows cross icon when user inputting', () => {
+    const wrapper = mount(<Search value />);
+
+    expect(mountToJson(wrapper)).toMatchSnapshot();
+
+    wrapper.setProps({ value: 'a' });
+
+    expect(mountToJson(wrapper)).toMatchSnapshot();
+  });
+});