weex-nuke/docs/input/demo/single-md-color.md

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

# Input Demo

* order: 4
* hide:true

单行文本 md 定制

---

```js
/** @jsx createElement */
import { View, Text, Input, Button, Env, ThemeProvider } from 'weex-nuke';
const { isWeb, appInfo } = Env;
const { StyleProvider } = ThemeProvider;
import { createElement, Component, render } from 'rax';
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-border-radius': 0,
    'single-radius': 4,
    'single-font-size': 28,
    'error-text-color': '#F44336',
    'error-border-color': '#F44336',
    'md-placeholder-height': 50,
    'md-help-margin-top': 16,
    'md-help-height': 56,
    'md-input-height': 50,
    'placeholder-color': 'yellow',
    'md-focus-placeholder-color': 'green',
    'md-placeholder-color': 'blue',
    'md-empty-placeholder-color': 'red',
    'md-placeholder-font-size': 28,
    'md-input-margin-bottom': 0,
    'md-input-margin-top': 14,
    'md-error-text-font-size': 24,
    'disabled-color': 'orange'
  }
};

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      status1: 'error',
      status2: 'error',
      status3: 'error',
      value: '111',
      disabled: true
    };
    this.checkLength = this.checkLength.bind(this);
    this.checkLengthOnInput = this.checkLengthOnInput.bind(this);
    this.change = this.change.bind(this);
    this.onIconPress = this.onIconPress.bind(this);
  }
  change() {
    this.setState({
      status1: 'success'
    });
  }
  onIconPress() {
    alert('icon pressed');
  }
  checkLength(text) {
    let length = text.length;
    // this.setState({value:text});
  }
  checkLengthOnInput(e) {
    let text = e.value;
    let length = text.length;
    if (length > 10) {
      this.setState({ status3: 'success' });
      console.log('success');
    }
  }

  render() {
    return (
      <StyleProvider
        style={md}
        commonConfigs={{ fixedFont: true, optimizeLineHeight: true }}
        androidConfigs={{ materialDesign: true }}
      >
        <View x="test" title="single md" style={{ flex: 1 }}>
          <View style={styles.demoBlock}>
            <Input type="text" disabled placeholder="Address" />
          </View>

          <View style={styles.demoBlock}>
            <Input
              hasClear={true}
              defaultValue={'1234522'}
              placeholderColor={'yellow'}
              onInput={this.checkLength}
              type="text"
              onChange={text => {
                console.log('change', text);
              }}
              onClear={text => {
                console.log('clear==>', text);
              }}
              placeholder="Enter Voucher Code"
            />
          </View>

          <View style={styles.demoBlock}>
            <Input
              hasClear={true}
              hideErrorWhenFocus={false}
              defaultValue={'1234522'}
              onInput={this.checkLengthOnInput}
              type="text"
              placeholder="Enter Voucher Code"
              errorMessage={'Voucher code error'}
              autoAdjustHeight={true}
            />
          </View>
          <View style={styles.demoBlock}>
            <Input
              hasClear={true}
              defaultValue={'1234522'}
              onInput={this.checkLength}
              type="text"
              onChange={text => {
                console.log('change', text);
              }}
              onClear={text => {
                console.log('clear==>', text);
              }}
              placeholder="Enter Voucher Code"
              errorMessage={
                <Text
                  style={{ fontSize: 30 }}
                  fixedFont={true}
                  onClick={() => {
                    alert('error !!!!');
                  }}
                >
                  error here,click me to see more
                </Text>
              }
              autoAdjustHeight={true}
            />
          </View>

          <View style={styles.demoBlock}>
            <Input
              maxLength={10}
              value={this.state.value}
              onInput={this.checkLength}
              renderCount={true}
              type="text"
              placeholder="Single-line input label"
            />
            <Button
              onPress={() => {
                this.setState({ value: '888888' });
              }}
              type="primary"
            >
              set number to 888888
            </Button>
          </View>

          <View style={styles.demoBlock}>
            <Input
              value={this.state.valuetest}
              onInput={this.validate}
              type="text"
              placeholder="Single-line input label"
            />
            <Button
              onPress={() => {
                this.setState({ valuetest: '888888' });
              }}
              type="primary"
            >
              set number to 888888
            </Button>
          </View>

          <View style={styles.demoBlock}>
            <Input
              defaultValue={this.state.value}
              onInput={this.checkLength}
              type="text"
              icon={{
                uri:
                  'https://img.alicdn.com/tfs/TB1P2ogh4rI8KJjy0FpXXb5hVXa-12-12.png',
                style: {},
                onPress: () => {
                  this.onIconPress();
                }
              }}
              disabled
              placeholder="custom input with icon"
            />
          </View>
        </View>
      </StyleProvider>
    );
  }
};
const styles = {
  demoBlock: {
    marginLeft: 40,
    marginRight: 40
  }
};
render(<App />);
```