@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
86 lines (82 loc) • 2.15 kB
JavaScript
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 /*#__PURE__*/React.createElement("div", {
className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`,
"data-id": `${dataId}_search`,
"data-test-id": `${dataId}_search`
}, /*#__PURE__*/React.createElement(TextBox, {
placeHolder: placeHolder,
customClass: style.input,
maxLength: maxLength,
value: value,
onChange: onChange,
onKeyUp: onKeyPress,
onFocus: this.onFocus,
needAppearance: false,
onBlur: this.onBlur
}), value != '' && value ? /*#__PURE__*/React.createElement("span", {
className: style.icon,
onClick: this.onBlur,
"data-id": `${dataId}_clear`,
"data-test-id": `${dataId}_clear`
}, /*#__PURE__*/React.createElement(Icon, {
name: "ZD-close",
size: "19"
})) : null);
}
}
Search.propTypes = propTypes;
Search.defaultProps = defaultProps; // if (__DOCS__) {
// Search.docs = {
// componentGroup: 'Header',
// folderName: 'Setup'
// };
// }