weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
261 lines (248 loc) • 7.54 kB
Markdown
# 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-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,
'md-focus-placeholder-color': '#9E9E9E',
'md-error-placeholder-color': '#9E9E9E',
'md-placeholder-font-size': 28,
'md-input-margin-bottom': 0,
'md-input-margin-top': 14,
'md-error-text-font-size': 24
}
};
let App = class NukeDemoIndex extends Component {
constructor() {
super();
this.state = {
status1: 'error',
status2: 'error',
status3: 'error',
value: '111',
disabled: true,
getval: ''
};
this.checkLength = this.checkLength.bind(this);
this.checkLengthOnInput = this.checkLengthOnInput.bind(this);
this.change = this.change.bind(this);
this.onIconPress = this.onIconPress.bind(this);
this.getvalue = this.getvalue.bind(this);
}
change() {
this.setState({
status1: 'success'
});
}
onIconPress() {
alert('icon pressed');
}
checkLength(text) {
let length = text.length;
// this.setState({value:text});
}
getvalue() {
this.setState({
getVal: this.refs.test.getValue()
});
}
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 }}>
<Page title="single md">
<Page.Intro main=" placeholder" />
<View style={styles.demoBlock}>
<Input type="text" ref="test" placeholder="ยังไมีนี้ให้ลูอื่ห็" floatPlaceholder={true} />
</View>
<Text>get Value: {this.state.getVal}</Text>
<View x="buttons" style={styles.btns}>
<Button block type="primary" onPress={this.getvalue}>
获得值
</Button>
</View>
<Page.Intro main="static placeholder" />
<View style={styles.demoBlock}>
<Input type="text" placeholder="Address" floatPlaceholder={false} />
</View>
<Page.Intro main="disabled" />
<View style={styles.demoBlock}>
<Input disabled={this.state.disabled} maxLength={10} type="text" placeholder="Disabled TextField" />
</View>
<Button
onPress={() => {
this.setState({ disabled: false });
}}
type="primary">
switch
</Button>
<Page.Intro main="error" />
<View style={styles.demoBlock}>
<Input
hasClear={true}
defaultValue={'1234522'}
onInput={this.checkLength}
status={this.state.status1}
type="text"
onChange={(text) => {
console.log('change', text);
}}
onClear={(text) => {
console.log('clear==>', text);
}}
placeholder="Enter Voucher Code"
errorMessage={'Voucher code error'}
autoAdjustHeight={true}
/>
</View>
<Page.Intro main="error, always show until it's OK" />
<View style={styles.demoBlock}>
<Input
hasClear={true}
hideErrorWhenFocus={false}
defaultValue={'1234522'}
onInput={this.checkLengthOnInput}
status={this.state.status3}
type="text"
placeholder="Enter Voucher Code"
errorMessage={'Voucher code error'}
autoAdjustHeight={true}
/>
</View>
<Page.Intro main="error message can be clicked" />
<View style={styles.demoBlock}>
<Input
hasClear={true}
defaultValue={'1234522'}
onInput={this.checkLength}
status={this.state.status1}
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>
<Page.Intro main="has defaultValue" />
<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>
<Page.Intro main="control test" />
<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>
<Page.Intro main="Custom Icon" />
<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();
}
}}
placeholder="custom input with icon"
/>
</View>
</Page>
</StyleProvider>
);
}
};
const styles = {
demoBlock: {
marginLeft: 40,
marginRight: 40
}
};
render(<App />);
```