Skip to content

Commit

Permalink
fix searchBar onClear #1721
Browse files Browse the repository at this point in the history
  • Loading branch information
@pingan1927
pingan1927 committed Aug 23, 2017
1 parent 3b83f04 commit ba43c99
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 90 deletions.
71 changes: 22 additions & 49 deletions components/search-bar/index.web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import getDataAttr from '../_util/getDataAttr';
export default class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
static defaultProps = defaultProps;
refs: any;
rightBtnInitMarginleft: any;
firstFocus: any;
scrollIntoViewTimeout: any;
onBlurTimeout: any;
blurFromOnClear: boolean;

constructor(props) {
super(props);
Expand All @@ -25,32 +25,16 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
focus: false,
focused: props.focused || false,
};
this.blurFromOnClear = false;
}

componentDidMount() {
const initBtn = window.getComputedStyle(this.refs.rightBtn);
this.rightBtnInitMarginleft = initBtn['margin-left'];
if ((this.props.autoFocus || this.state.focused) && navigator.userAgent.indexOf('AlipayClient') > 0) {
if (this.props.autoFocus && navigator.userAgent.indexOf('AlipayClient') > 0) {
(this.refs as any).searchInput.focus();
}
this.componentDidUpdate();
}
componentDidUpdate() {
// 检测是否包含名为 ${this.props.prefixCls}-start 样式，生成动画
// offsetWidth 某些时候是向上取整，某些时候是向下取整，不能用
const realWidth = this.refs.syntheticPhContainer.getBoundingClientRect().width; // 包含小数
if (this.refs.searchInputContainer.className.indexOf(`${this.props.prefixCls}-start`) > -1) {
this.refs.syntheticPh.style.width = `${Math.ceil(realWidth)}px`;
if (!this.props.showCancelButton) {
this.refs.rightBtn.style.marginRight = 0;
}
} else {
this.refs.syntheticPh.style.width = '100%';
if (!this.props.showCancelButton) {
this.refs.rightBtn.style.marginRight =
`-${this.refs.rightBtn.offsetWidth + parseInt(this.rightBtnInitMarginleft, 10)}px`;
}
}
if (this.state.focused) {
(this.refs as any).searchInput.focus();
}
Expand All @@ -74,6 +58,10 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
clearTimeout(this.scrollIntoViewTimeout);
this.scrollIntoViewTimeout = null;
}
if (this.onBlurTimeout) {
clearTimeout(this.onBlurTimeout);
this.onBlurTimeout = null;
}
}

onSubmit = (e) => {
Expand Down Expand Up @@ -103,8 +91,6 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
this.setState({
focus: true,
});
this.firstFocus = true;

if (!('focused' in this.props)) {
this.setState({
focused: true,
Expand All @@ -126,10 +112,13 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar

onBlur = () => {
setTimeout(() => {
this.setState({
focus: false,
});
}, 0);
if (!this.blurFromOnClear) {
this.setState({
focus: false,
});
}
this.blurFromOnClear = false;
}, 50);
if (!('focused' in this.props)) {
this.setState({
focused: false,
Expand All @@ -141,6 +130,8 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
}

onClear = () => {
this.blurFromOnClear = true;

if (!('value' in this.props)) {
this.setState({ value: '' });
}
Expand All @@ -152,15 +143,7 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
}
// 加上setTimeout 为了解决Android的兼容性问题。
// https://github.com/ant-design/ant-design-mobile/issues/1341
// 只有支付宝系客户端才完美支持
const ua = navigator.userAgent;
if (ua.indexOf('AlipayClient') > 0 && (ua.match(/Android/i) || ua.indexOf('AliApp(AM') < 0)) {
// 口碑掌柜iOS 只有5.2以上版本才支持
setTimeout(() => {
(this.refs as any).searchInput.focus();
this.componentDidUpdate();
}, 300);
}
(this.refs as any).searchInput.focus();
}

onCancel = () => {
Expand All @@ -181,7 +164,6 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar

const wrapCls = classNames({
[`${prefixCls}`]: true,
[`${prefixCls}-start`]: focus || value && value.length > 0,
[className as string]: className,
});

Expand All @@ -193,22 +175,13 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
const cancelCls = classNames({
[`${prefixCls}-cancel`]: true,
[`${prefixCls}-cancel-show`]: showCancelButton || focus || value && value.length > 0,
[`${prefixCls}-cancel-anim`]: this.firstFocus,
});

return (
<form onSubmit={this.onSubmit} className={wrapCls} style={style} ref="searchInputContainer" action="#">
<form onSubmit={this.onSubmit} className={wrapCls} style={style} action="#">
<div className={`${prefixCls}-input`}>
<div className={`${prefixCls}-synthetic-ph`} ref="syntheticPh">
<span className={`${prefixCls}-synthetic-ph-container`} ref="syntheticPhContainer">
<i className={`${prefixCls}-synthetic-ph-icon`}/>
<span
className={`${prefixCls}-synthetic-ph-placeholder`}
style={{ visibility: placeholder && !value ? 'visible' : 'hidden' }}
>
{placeholder}
</span>
</span>
<div className={`${prefixCls}-synthetic-ph`}>
<i className={`${prefixCls}-synthetic-ph-icon`}/>
</div>
<input
type="search"
Expand All @@ -225,7 +198,7 @@ export default class SearchBar extends React.Component<SearchBarProps, SearchBar
/>
<a onClick={this.onClear} className={clearCls} />
</div>
<div className={cancelCls} onClick={this.onCancel} ref="rightBtn">
<div className={cancelCls} onClick={this.onCancel}>
{cancelText}
</div>
</form>
Expand Down
50 changes: 9 additions & 41 deletions components/search-bar/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,13 @@
}

.@{searchPrefixCls}-synthetic-ph {
display: block;
z-index: 1;
height: @search-bar-input-height;
line-height: @search-bar-input-height;
width: 100%;
transition: width .3s;
display: block;
text-align: center;

padding-left: @h-spacing-lg;
width: auto;
&-icon {
display: inline-block;
margin-right: @h-spacing-sm;
Expand All @@ -50,16 +49,10 @@
background-size: @icon-size-xxs auto;
.encoded-svg-background('search_bar_search');
}

&-placeholder {
color: @color-text-placeholder;
font-size: @searchbar-font-size;
}
}

input[type="search"] {
z-index: 2;
opacity: 0;
width: 100%;
text-align: left;
display: block;
Expand All @@ -68,13 +61,13 @@
font-size: @searchbar-font-size;
background-color: transparent;
border: 0;
padding-left: @h-spacing-lg + @icon-size-xxs + @h-spacing-sm;

&::placeholder {
background: none;
text-align: left;
// color: @color-text-placeholder;
color: transparent;
// font-size: @input-font-size;
height: @search-bar-input-height;
color: @color-text-placeholder;
font-size: @searchbar-font-size;
}

&::-webkit-search-cancel-button {
Expand Down Expand Up @@ -111,40 +104,15 @@

&-cancel {
flex: none;
opacity: 0;
padding-left: @h-spacing-md;
height: @search-bar-height;
line-height: @search-bar-height;
font-size: @link-button-font-size;
color: @brand-primary;
text-align: right;

&-anim {
transition: margin-right .3s, opacity .3s;
transition-delay: .1s;
}

display: none;
&-show {
opacity: 1;
}
}

&.@{searchPrefixCls}-start {
.@{searchPrefixCls}-input {
input[type="search"] {
opacity: 1;
padding-left: @h-spacing-lg + @icon-size-xxs + @h-spacing-sm;

&::placeholder {
// display: none;
color: transparent;
}
}

.@{searchPrefixCls}-synthetic-ph {
padding-left: @h-spacing-lg;
width: auto;
}
display: block;
}
}
}

0 comments on commit ba43c99

Please sign in to comment.