weex-nuke/src/node_modules/nuke-input/docs/uppercase.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Input Demo

* order: 4

单行文本 md 定制

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Input from 'nuke-input';
import Page from 'nuke-page';
import Button from 'nuke-button';
import { isWeb, appInfo } from 'nuke-env';
import { StyleProvider } from 'nuke-theme-provider';

const isAndroid = true;

let md = {
  Core: {
    'color-brand1-1': '#00BBD3',
    'color-brand1-6': '#1A9CB7',
    'color-brand1-9': '#0096A6',
    'color-error-3': '#D50000',
    'color-line1-1': '#DADADA',
    'color-line1-2': '#E0E0E0',
    'color-text1-1': '#9E9E9E',
    ['font-size-title']: 40,
    ['font-size-subhead']: 32,
    ['font-size-body-3']: 28,
    ['font-size-body-2']: 28,
    ['font-size-body-1']: 28,
    ['font-size-caption']: 24,
    ['font-size-footnote']: 20
  },
  Input: {
    'md-placeholder-height': 50,
    'md-help-margin-top': 16,
    'md-input-height': 50,
    'md-placeholder-font-size': 28,
    'md-input-margin-bottom': 0
  }
};

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      cardNumber: '',
      x: ''
    };
    this.validateCreditCard = this.validateCreditCard.bind(this);
    // this.checkLengthOnInput = this.checkLengthOnInput.bind(this);
    // this.change = this.change.bind(this);
    // this.onIconPress = this.onIconPress.bind(this);
  }
  validateCreditCard(e) {
    let newValue = e.value.toUpperCase();
    // alert(typeof this.refs.upper.wrappedInstance.getSelectionRange);
    this.refs.upper.wrappedInstance.getSelectionRange(range => {
      const start = range.selectionStart;
      const end = range.selectionEnd;
      this.setState({
        x: `${start}-${end}-${newValue}`
      });
      this.refs.upper.wrappedInstance.setNativeVal(newValue);
      this.refs.upper.wrappedInstance.setSelectionRange(start, end);
    });
    // if (newValue !== e.value) {
    // this.setState({
    //   cardNumber: newValue
    // });
    // } else {
    // }
  }

  render() {
    return (
      <StyleProvider style={md} androidConfigs={{ materialDesign: true }}>
        <Page title="single md">
          <Page.Intro main="cardnumber" />
          <View style={styles.demoBlock}>
            <Text>{this.state.x}</Text>
            <Input
              maxLength={19}
              type="text"
              value={this.state.cardNumber}
              placeholder="Upper Case"
              ref="upper"
              onInput={this.validateCreditCard}
              status={this.state.status1}
              errorMessage={this.state.errorMessage}
            />
          </View>
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  demoBlock: {
    marginLeft: 40,
    marginRight: 40
  }
};
render(<App />);
```