Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import { Icon } from '@zohodesk/icons';
import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
import style from './Search.module.css';
export default class Search extends React.Component {
constructor(props) {
super(props);
let { value } = this.props;
this.state = {
value: value || '',
isFocus: false
};
this.onFocus = this.onFocus.bind(this);
this.onBlur = this.onBlur.bind(this);
}
onFocus(id, name, value) {
let { onFocus } = this.props;
this.setState({ isFocus: true });
onFocus && onFocus(id, name, value);
}
onBlur(id, name, value) {
let { onBlur } = this.props;
this.state.value == '' && this.setState({ isFocus: false });
onBlur && onBlur(id, name, value);
}
render() {
let { placeHolder, maxLength, value, onChange, onKeyPress, customClass, dataId } = this.props;
let { isFocus } = this.state;
return (
<div className={`${style.container} ${isFocus ? style.active : ''} ${customClass}`} data-id={`${dataId}_search`} data-test-id={`${dataId}_search`}>
<TextBox
placeHolder={placeHolder}
customClass={style.input}
maxLength={maxLength}
value={value}
onChange={onChange}
onKeyUp={onKeyPress}
onFocus={this.onFocus}
needAppearance={false}
onBlur={this.onBlur}
/>
{value != '' && value ? (
<span className={style.icon} onClick={this.onBlur} data-id={`${dataId}_clear`} data-test-id={`${dataId}_clear`}>
<Icon name='ZD-close' size='19' />
</span>
) : null}
</div>
);
}
}
Search.propTypes = propTypes;
Search.defaultProps = defaultProps;
// if (__DOCS__) {
// Search.docs = {
// componentGroup: 'Header',
// folderName: 'Setup'
// };
// }
|