shinemo-input v0.0.7

输入框 / Input

Input使用方式

Input.Search使用方式

// index.scss

@font-face {font-family: "test";
	src: url('//at.alicdn.com/t/font_503250_aco29ccjum2yy14i.eot?t=1512792123102'); /* IE9*/
	src: url('//at.alicdn.com/t/font_503250_aco29ccjum2yy14i.eot?t=1512792123102#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAXQAAsAAAAACHgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW/kfvY21hcAAAAYAAAABjAAABnM65aZlnbHlmAAAB5AAAAecAAAI43wdW12hlYWQAAAPMAAAALwAAADYPwkX7aGhlYQAAA/wAAAAcAAAAJAfeA4VobXR4AAAEGAAAABAAAAAQD+kAAGxvY2EAAAQoAAAACgAAAAoBkgDYbWF4cAAABDQAAAAfAAAAIAETAF1uYW1lAAAEVAAAAUUAAAJtPlT+fXBvc3QAAAWcAAAAMwAAAEQ8Lh7WeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sU4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxjZm7438AQw9zAMAEozAiSAwAkywyBeJzFkMENgCAMRV+pGmIcxaNxIE+OwMSsgW3lwgR88mj701BSYAXUOI0F5EVwPeZK+Moe/sJtdbaTLJZK1daGzCXRkSNL/rJsTJPMGz3qiPvqle+7dOyLlR/fa9Uf9AP4Bg9/AHicZZE9b9NQFIbvOddfiROH+OM6ceokdkjcqtTIjpMMEclAF1BbVerEhFiaiaRdqEBUKgMSSAxI1BJji5AQv4HOzW/oBAh+ATuB66hMXB09OufeZzivLhEJ+fOdXtAKMcgqicgm2SUEpHXwNXTBC5IQ18HyRMs2NRq0Ak9u+SG9A7YvmSzuJx1bkqUSaFCHrhf3gxAD6CUjHELMXIBqzdnT2ys6fQv5SlB/ubiPH8BqtFZKo43FvVtjM24aylFB16u6/kaRRFFBFEoaPLZZTszlpcVHseRYF401bEChGjhbD4rNmv7oVTJ123YO4OQEjFpT+zQuO2Vezx1m6FX5RlGpOMXWTROOfqoVo+B2fhB+KM96QF/gFamRgIx5Tg1kk9mc3TrE/UG3N4IB63KEQEMIeFMH/gxJxKeowzPbUR1cuNaRzk5xGE+OEZB5DIC+f1LUZu8oPZ1u7yPub29lhAiGieoxdXXj2sMrmh7enbXDL0/LllWmzz5rlKYHh+liEyc7OxNccnEMu697KvMLa9MRzURCcBnkIX4jKv+vZQK+4nJjQ/Jvgyz5nWQMQSfpxw0Y9GNmlsBmJpJ0Tuk8TS8F4dIV8sLZmaDK9PycymrW55WM+PWfkqbz37+E7E753yXkL5XsZNAAeJxjYGRgYADilak3dOL5bb4ycLMwgMC1wEZrBP2/gIWBWQLI5WBgAokCABZfCSEAeJxjYGRgYG7438AQw8IAAkCSkQEVsAAARwoCbQQAAAAD6QAABAAAAAQAAAAAAAAAAHYA2AEcAAB4nGNgZGBgYGEIZGBlAAEmIOYCQgaG/2A+AwAREgFxAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgIWRiZGZkYWRlYGxgqs8NTMpMzG/JNOQMzknvzg1LTMnh4EBAHJMCFoA') format('woff'),
	url('//at.alicdn.com/t/font_503250_aco29ccjum2yy14i.ttf?t=1512792123102') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
	url('//at.alicdn.com/t/font_503250_aco29ccjum2yy14i.svg?t=1512792123102#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
	font-family:"test" !important;
	font-size:16px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-user:before { content: "\e600"; }

.icon-close {
	color: gray;
	font-size: 18px;
	cursor: pointer;
}
.icon-close:before { content: "\e603"; }


.search_icon {
	padding-right: 40px!important;
}

.search_btn {
	padding-right: 45px!important;
}

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import ClassNames from 'classnames'
import Input from '@xm/Input'
import styles from './index.scss'

const style = {
  marginBottom: '20px'
}

class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      inputValue: ''
    }

    this.onChange = this.onChange.bind(this)
    this.empty = this.empty.bind(this)
    this.ref = this.ref.bind(this)
  }

  onChange (e) {
    this.setState({
      inputValue: e.target.value
    })
  }
  
  onPressEnter (ev) {
    console.log(ev.target.value)
  }

  onSearch (val) {
    console.log(val)
  }

  empty () {
    this.input.focus()
    this.setState({
      inputValue: ''
    })
  }

  ref (x) {
    this.input = x
  }

  render () {
    const {inputValue} = this.state
    const prefix = <i className={ClassNames(styles.iconfont, styles['icon-user'])} />
    const suffix = inputValue ?
      <i className={ClassNames(styles.iconfont, styles['icon-close'])} onClick={this.empty} /> :
      null

    return (
      <div>
        <Input style={style} placeholder="default input" onPressEnter={this.onPressEnter} />
        <Input style={style} type="password" defaultValue="password" />
        <Input style={style} disabled defaultValue="disabled input" />
        <Input style={style} placeholder="default input with prefix"
               onChange={this.onChange} value={inputValue}
               suffix={suffix} prefix={prefix} ref={this.ref}
        />

        <Input.Search style={style} placeholder="search something" onSearch={this.onSearch} />
        <Input.Search style={style} cls={styles.search_icon} enterButton placeholder="search something" onSearch={this.onSearch} />
        <Input.Search style={style} cls={styles.search_btn} enterButton="搜索" placeholder="search something" onSearch={this.onSearch} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))