|
@@ -0,0 +1,116 @@
|
|
|
+import React, { Component } from "react";
|
|
|
+// import cx from "classnames";
|
|
|
+import style from "./../index.less";
|
|
|
+import selectSex from '../../../common/images/selectSex.png'
|
|
|
+import { CLEARMENSTRUATIONTEXTDATA, } from '@store/types/menstruationHistory';
|
|
|
+import store from '@store';
|
|
|
+export default class Select extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ isOpen: false,
|
|
|
+ value: "",
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: 'patientSex',
|
|
|
+ id: 'patientSex',
|
|
|
+ value: 1,
|
|
|
+ title: '性别',
|
|
|
+ maxlength: 11
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'patientSex',
|
|
|
+ id: 'patientSex',
|
|
|
+ value: 2,
|
|
|
+ title: '性别',
|
|
|
+ maxlength: 11
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.toggleContainer = React.createRef();
|
|
|
+ this.onClickHandler = this.onClickHandler.bind(this)
|
|
|
+ this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this)
|
|
|
+ this.onChange = this.onChange.bind(this)
|
|
|
+ }
|
|
|
+ componentDidMount() {
|
|
|
+ window.addEventListener("click", this.onClickOutsideHandler);
|
|
|
+ this.setState({
|
|
|
+ value: this.props.default,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillUnmount() {
|
|
|
+ window.removeEventListener("click", this.onClickOutsideHandler);
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillReceiveProps(nextProps){
|
|
|
+ if (nextProps.default.value !== this.state.value.value) {
|
|
|
+ this.setState({
|
|
|
+ value: nextProps.default
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onClickHandler() {
|
|
|
+ this.setState(currentState => ({
|
|
|
+ isOpen: !currentState.isOpen
|
|
|
+ }));
|
|
|
+ };
|
|
|
+
|
|
|
+ onClickOutsideHandler(event) {
|
|
|
+ if (
|
|
|
+ this.state.isOpen &&
|
|
|
+ !this.toggleContainer.current.contains(event.target)
|
|
|
+ ) {
|
|
|
+ this.setState({ isOpen: false });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ onChange(e,val) {
|
|
|
+ e.stopPropagation()
|
|
|
+ this.setState({
|
|
|
+ value: val,
|
|
|
+ isOpen: false
|
|
|
+ });
|
|
|
+ this.props.onChange(val);
|
|
|
+ store.dispatch({
|
|
|
+ type: CLEARMENSTRUATIONTEXTDATA,
|
|
|
+ });
|
|
|
+ };
|
|
|
+ render() {
|
|
|
+ const { isOpen, value, options} = this.state;
|
|
|
+ const { label, placeholder } = this.props;
|
|
|
+ return (
|
|
|
+ <div className={style.selectBox}>
|
|
|
+ {label && <label className={style.label}>{label}:</label>}
|
|
|
+
|
|
|
+ <div className={style.select} ref={this.toggleContainer}>
|
|
|
+ <input
|
|
|
+ className={[style.selfInput, isOpen ? style.selfInput : ''].join('')}
|
|
|
+ readonly=""
|
|
|
+ value={value.value=== 2? '女' : '男'}
|
|
|
+ onClick={this.onClickHandler}
|
|
|
+ placeholder={placeholder}
|
|
|
+ />
|
|
|
+ <div className={style.down} onClick={this.onClickHandler}>
|
|
|
+ <img src={selectSex} alt=""/>
|
|
|
+ </div>
|
|
|
+ <div className={[isOpen ? '' : style.optionsHidden, isOpen ? style.options :''].join('')}>
|
|
|
+ {options &&
|
|
|
+ options.map((item) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ key={item.id}
|
|
|
+ className={style.item}
|
|
|
+ onClick={(e)=>this.onChange( e, item)}
|
|
|
+ >
|
|
|
+ {item.value === 2 ? '女' : '男'}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|