joywok-material-components/components/editor/autoEditor.js

<h1 align="center"> Joywok Material Components </h1>

/**
 *
 * @api {}   自添加input输入框
 * @apiName   输入组件
 * @apiGroup 组件使用
 *
 * @apiParam {Array } defaultValue 多少个input以及每个input的内容
 * @apiParam {function } onChange 返回所有的input数据
 *
 * @apiSuccessExample {json} 使用案例:
  import AutoEditor from 'joywok-material-components/lib/editor/autoEditor';
  <AutoEditor defaultValue={[]} onChange={(e)=>{console.log(e)}}></AutoEditor>
 *
 *
 */
import React from 'react';
import ReactDOM from 'react-dom';
import async from "async";
import {withStyles} from "@material-ui/core";
import Input from './../input'
window.htmlencode = function(s){
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(s));
  let html = div.innerHTML;
  return html;
}
window.htmldecode = function(s){
  var div = document.createElement('div');
  div.innerHTML = s;
  let content = div.innerText || div.textContent;
  return content
}

const styles = theme => ({
  input:{
    '&:before': {
      borderBottom: `1px solid #E7E7E7!important`,
    },
    '&:after': {
      borderBottom: `1px solid #E7E7E7!important`,
    },
    '&:hover:after': {
      borderBottom: `1px solid #3297FC!important`,
    },
    '&:hover:before': {
      borderBottom: `1px solid #3297FC!important`,
    },
    '&:focus:after': {
      borderBottom: `1px solid #3297FC!important`,
    },
    '&:focus:after': {
      borderBottom: `1px solid #3297FC!important`,
    },
  }
});

require('./style/autoEditor.css');
class JwEditor extends React.Component{
  constructor(props) {
    super(props);
    // let beforData = props.defaultValue.slice(0,(props.defaultValue.length==0?0:props.defaultValue.length-1))
    this.state = {
      defaultValue:props.defaultValue.length!=0?props.defaultValue:['']
    }
  }
  onChange(e,targetIndex){
    const value=e.target.value;
    let list = JSON.parse(JSON.stringify(this.state.defaultValue));

    // if(list.length>1){
    //   list[list.length-1] = value
    // }else{
    //   list[0] = value
    // }
    _.each(list,function(i,index){
      if(index == targetIndex){
        list[index] = value;
      }
    })
    this.setState({
      // inputValue:value,
      defaultValue:list
    })
    this.props.onChange && this.props.onChange(list)
  }
  onKeyUp(e,targetIndex){
    let self = this;
    let keyCode = e.keyCode;
    const value=e.target.value;
    if(keyCode == 13 && value.length!=0){
      let list = JSON.parse(JSON.stringify(this.state.defaultValue));
      let newList = [];
      _.each(list,function(i,index){
        if(index == targetIndex){
          newList.push(i)
          newList.push('')
        }else{
          newList.push(i)
        }
      })
      self.setState({
        defaultValue:newList
      })
      this.props.onChange && this.props.onChange(list)
      setTimeout(function(){
        $('.jw-auto-editor-input').eq(targetIndex+1).find('input').focus();
      },0)

    }
    if(keyCode == 8 && value.length == 0){
      let list = JSON.parse(JSON.stringify(this.state.defaultValue));
      let newList = [];
      _.each(list,function(i,index){
        if(index == targetIndex){
        }else{
          newList.push(i)
        }
      })
      if(newList.length==0){
        newList.push('');
      }
      this.props.onChange && this.props.onChange(newList)
      self.setState({
        defaultValue:newList
      })
    }

  }
  onPaste(e){
    const value=e.target.value;
    let list = JSON.parse(JSON.stringify(this.state.defaultValue));

    _.each(list,function(i,index){
      if(index == targetIndex){
        list[index] = value;
      }
    })
    this.setState({
      // inputValue:value,
      defaultValue:list
    })
    this.props.onChange && this.props.onChange(list)
  }
  render(){
    let self = this;

    let { classes } = this.props;
    let list = this.state.defaultValue
    return (<div className="jw-auto-editor">
        {
          _.map(list,function(i,index){
                return <div className={'jw-auto-editor-input'}>
                  <Input onChange={(e)=>self.onChange(e,index)} value={i} InputProps={{
                    className:classes.input,
                  }} onKeyUp={(e)=>self.onKeyUp(e,index)}/>
                </div>
              })
        }

      </div>
    )
  }
  componentDidMount(){
    let self = this;
  }
  componentWillUnmount(){
  }
  componentDidUpdate(){
  }
}

export default withStyles(styles)(JwEditor);