From bd55d21f83bbe5c2cde383799f66fa044f0aca2e Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Fri, 25 Nov 2016 12:03:39 +0800 Subject: [PATCH] style: Fix jsx-no-multiline-js (#3994) * Fix jsx-no-multiline-js * TimePicker addon test * Transfer search test --- components/alert/index.tsx | 10 ++- components/back-top/index.tsx | 14 ++-- components/badge/index.tsx | 28 ++++--- components/cascader/index.tsx | 53 ++++++------ components/checkbox/Group.tsx | 27 +++--- components/date-picker/RangePicker.tsx | 54 ++++++------ components/date-picker/createPicker.tsx | 33 ++++---- components/table/filterDropdown.tsx | 12 +-- components/tabs/index.tsx | 14 ++-- components/tag/index.tsx | 28 ++++--- components/time-picker/index.tsx | 14 ++-- components/timeline/Timeline.tsx | 20 ++--- components/transfer/list.tsx | 59 +++++++------ components/transfer/search.tsx | 15 ++-- components/upload/uploadList.tsx | 82 +++++++++---------- .../__snapshots__/index.test.js.snap | 8 ++ tests/time-picker/index.test.js | 16 ++++ .../__snapshots__/search.test.js.snap | 75 +++++++++++++++++ tests/transfer/search.test.js | 16 ++++ 19 files changed, 360 insertions(+), 218 deletions(-) create mode 100644 tests/time-picker/__snapshots__/index.test.js.snap create mode 100644 tests/time-picker/index.test.js create mode 100644 tests/transfer/__snapshots__/search.test.js.snap create mode 100644 tests/transfer/search.test.js diff --git a/components/alert/index.tsx b/components/alert/index.tsx index 2ecb1bcd4e..edce09601c 100755 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -108,6 +108,12 @@ export default class Alert extends React.Component { closable = true; } + const closeIcon = closable ? ( + + {closeText || } + + ) : null; + return this.state.closed ? null : ( { {showIcon ? : null} {message} {description} - {closable ? - {closeText || } - : null} + {closeIcon} ); diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index 65a420aad6..622a4ae092 100755 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -118,15 +118,15 @@ export default class BackTop extends React.Component { 'visibilityHeight', ]); + const backTopBtn = this.state.visible ? ( +
+ {children || defaultElement} +
+ ) : null; + return ( - { - this.state.visible ? -
- {children || defaultElement} -
- : null - } + {backTopBtn} ); } diff --git a/components/badge/index.tsx b/components/badge/index.tsx index 0ad8cb6cfe..08e8d7c64b 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -83,6 +83,19 @@ export default class Badge extends React.Component { ); } + const scrollNumber = hidden ? null : ( + + ); + + const statusText = (hidden || !text) ? null : ( + {text} + ); + return ( {children} @@ -92,20 +105,9 @@ export default class Badge extends React.Component { transitionName={children ? `${prefixCls}-zoom` : ''} transitionAppear > - { - hidden ? null : - - } + {scrollNumber} - { - hidden || !text ? null : - {text} - } + {statusText} ); } diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index dca1e4f10b..4cb4657438 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -310,6 +310,33 @@ export default class Cascader extends React.Component { if (resultListMatchInputWidth && state.inputValue && this.refs.input) { dropdownMenuColumnStyle.width = this.refs.input.refs.input.offsetWidth; } + + const input = children || ( + + 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} + /> + + {this.getLabel()} + + {clearIcon} + + + ); + return ( { onChange={this.handleChange} dropdownMenuColumnStyle={dropdownMenuColumnStyle} > - {children || - - 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} - /> - - {this.getLabel()} - - {clearIcon} - - - } + {input} ); } diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx index 9da3f67da9..fa756207ae 100644 --- a/components/checkbox/Group.tsx +++ b/components/checkbox/Group.tsx @@ -84,22 +84,21 @@ export default class CheckboxGroup extends React.Component + this.toggleOption(option)} + className={`${prefixCls}-item`} + key={option.value} + > + {option.label} + + ); + return (
- { - options.map(option => - this.toggleOption(option)} - className={`${prefixCls}-item`} - key={option.value} - > - {option.label} - - ) - } + {options}
); } diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx index 7ee71cf6cf..c36e118226 100644 --- a/components/date-picker/RangePicker.tsx +++ b/components/date-picker/RangePicker.tsx @@ -141,6 +141,32 @@ export default class RangePicker extends React.Component { onClick={this.clearSelection} /> : null; + const input = ({ value }) => { + const start = value[0]; + const end = value[1]; + return ( + + + ~ + + {clearIcon} + + + ); + }; + return ( { prefixCls={`${prefixCls}-picker-container`} style={popupStyle} > - { - ({ value }) => { - const start = value[0]; - const end = value[1]; - return ( - - - ~ - - {clearIcon} - - - ); - } - } + {input} ); } diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index 85a11e26e5..12fd1f8799 100644 --- a/components/date-picker/createPicker.tsx +++ b/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 }) => ( + + + {clearIcon} + + + ); + return ( - { - ({ value }) => { - return ( - - - {clearIcon} - - - ); - } - } + {input} ); diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx index 2c16b1e38b..be7f006485 100755 --- a/components/table/filterDropdown.tsx +++ b/components/table/filterDropdown.tsx @@ -95,13 +95,15 @@ export default class FilterMenu extends React.Component { renderMenuItem(item) { const { column } = this.props; const multiple = ('filterMultiple' in column) ? column.filterMultiple : true; + const input = multiple ? ( + = 0} /> + ) : ( + = 0} /> + ); + return ( - { - multiple - ? = 0} /> - : = 0} /> - } + {input} {item.text} ); diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index 54c8c12ce3..4cf5dfd2cd 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -121,17 +121,19 @@ export default class Tabs extends React.Component { ) : null; + const renderTabBar = () => ( + + ); + return ( ( - - )} + renderTabBar={renderTabBar} renderTabContent={() => } onChange={this.handleChange} > diff --git a/components/tag/index.tsx b/components/tag/index.tsx index 5371b717be..f94a2a20a4 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -92,6 +92,20 @@ export default class Tag extends React.Component { 'onClose', 'afterClose', ]); + const tagStyle = assign({ + backgroundColor: /blue|red|green|yellow/.test(color) ? null : color, + }, style); + const tag = this.state.closed ? null : ( +
+ {children} + {closeIcon} +
+ ); return ( { transitionAppear onEnd={this.animationEnd} > - {this.state.closed ? null : ( -
- {children} - {closeIcon} -
- ) } + {tag} ); } diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index ee9f2d7e33..b3a2b56015 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -100,6 +100,14 @@ export default class TimePicker extends React.Component { [`${props.prefixCls}-${props.size}`]: !!props.size, }); + const addon = (panel) => ( + props.addon ? ( +
+ {props.addon(panel)} +
+ ) : null + ); + return ( { showMinute={props.format.indexOf('mm') > -1} showSecond={props.format.indexOf('ss') > -1} onChange={this.handleChange} - addon={(panel) => ( - props.addon ?
- {props.addon(panel)} -
: null - )} + addon={addon} /> ); } diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index 4d0eea8a6d..2575c40ff6 100644 --- a/components/timeline/Timeline.tsx +++ b/components/timeline/Timeline.tsx @@ -26,18 +26,18 @@ export default class Timeline extends React.Component { [`${prefixCls}-pending`]: !!pending, [className]: className, }); + const items = React.Children.map(children, (ele: React.ReactElement, idx) => + React.cloneElement(ele, { + last: idx === children.length - 1, + }) + ); + const pendingItem = (!!pending) ? ( + {pendingNode} + ) : null; return (
    - { - React.Children.map(children, (ele: React.ReactElement, idx) => - React.cloneElement(ele, { - last: idx === children.length - 1, - }) - ) - } - {(!!pending) - ? {pendingNode} - : null} + {items} + {pendingItem}
); } diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index 3276af09b6..f6971f94fc 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -171,6 +171,37 @@ export default class TransferList extends React.Component + {showSearch ?
+ +
: null} + + {showItems} + +
+ {notFoundContent || 'Not Found'} +
+ + ); + + const listFooter = footerDom ? ( +
+ {footerDom} +
+ ) : null; + return (
@@ -191,32 +222,8 @@ export default class TransferList extends React.Component
- {bodyDom || -
- {showSearch ?
- -
: null} - - {showItems} - -
- {notFoundContent || 'Not Found'} -
-
} - {footerDom ?
- {footerDom} -
: null} + {listBody} + {listFooter}
); } diff --git a/components/transfer/search.tsx b/components/transfer/search.tsx index d9a79baffb..6665c042ec 100644 --- a/components/transfer/search.tsx +++ b/components/transfer/search.tsx @@ -33,6 +33,14 @@ export default class Search extends React.Component { render() { const { placeholder, value, prefixCls } = this.props; + const icon = (value && value.length > 0) ? ( + + + + ) : ( + + ); + return (
{ ref="input" onChange={this.handleChange} /> - {value && value.length > 0 ? - - - - : - } + {icon}
); } diff --git a/components/upload/uploadList.tsx b/components/upload/uploadList.tsx index fde1e571db..565c78a3f3 100644 --- a/components/upload/uploadList.tsx +++ b/components/upload/uploadList.tsx @@ -101,51 +101,51 @@ export default class UploadList extends React.Component { [`${prefixCls}-list-item`]: true, [`${prefixCls}-list-item-${file.status}`]: true, }); + const preview = file.url ? ( + this.handlePreview(file, e)} + > + {file.name} + + ) : ( + this.handlePreview(file, e)} + > + {file.name} + + ); + const style = (file.url || file.thumbUrl) ? undefined : { + pointerEvents: 'none', + opacity: 0.5, + }; + const actions = (listType === 'picture-card' && file.status !== 'uploading') ? ( + + this.handlePreview(file, e)} + > + + + this.handleClose(file)} /> + + ) : ( + this.handleClose(file)} /> + ); + return (
{icon} - { - file.url - ? ( - this.handlePreview(file, e)} - > - {file.name} - - ) : ( - this.handlePreview(file, e)} - > - {file.name} - - ) - } - { - listType === 'picture-card' && file.status !== 'uploading' - ? ( - - this.handlePreview(file, e)} - > - - - this.handleClose(file)} /> - - ) : this.handleClose(file)} /> - } + {preview} + {actions}
{progress}
diff --git a/tests/time-picker/__snapshots__/index.test.js.snap b/tests/time-picker/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..681fc429e8 --- /dev/null +++ b/tests/time-picker/__snapshots__/index.test.js.snap @@ -0,0 +1,8 @@ +exports[`TimePicker renders addon correctly 1`] = ` +
+ +
+`; diff --git a/tests/time-picker/index.test.js b/tests/time-picker/index.test.js new file mode 100644 index 0000000000..69a54edb81 --- /dev/null +++ b/tests/time-picker/index.test.js @@ -0,0 +1,16 @@ +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) => (); + const wrapper = mount(); + const rcTimePicker = wrapper.find(RcTimePicker); + const addonWrapper = render(rcTimePicker.props().addon()); + + expect(renderToJson(addonWrapper)).toMatchSnapshot(); + }); +}); diff --git a/tests/transfer/__snapshots__/search.test.js.snap b/tests/transfer/__snapshots__/search.test.js.snap new file mode 100644 index 0000000000..ea65ea78ae --- /dev/null +++ b/tests/transfer/__snapshots__/search.test.js.snap @@ -0,0 +1,75 @@ +exports[`Search shows cross icon when user inputting 1`] = ` + +
+ + + + + + + + + + +
+ +`; + +exports[`Search shows cross icon when user inputting 2`] = ` + +
+ + + + + + + + + + +
+ +`; diff --git a/tests/transfer/search.test.js b/tests/transfer/search.test.js new file mode 100644 index 0000000000..023919997e --- /dev/null +++ b/tests/transfer/search.test.js @@ -0,0 +1,16 @@ +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(); + + expect(mountToJson(wrapper)).toMatchSnapshot(); + + wrapper.setProps({ value: 'a' }); + + expect(mountToJson(wrapper)).toMatchSnapshot(); + }); +});