weex-nuke/lib/node_modules/nuke-normal-input/theme/index.jsx

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

/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Input from 'nuke-normal-input';
import { isWeb, appInfo } from 'nuke-env';
import { StyleProvider } from 'nuke-theme-provider';
import {
  decodeVar,
  DemoContainer,
  DemoSection,
  Demo,
  DemoItem,
  initDemo,
} from '@alife/nuke-demo-helper';

const isAndroid = appInfo.platform.toLowerCase() === 'android';
// const isAndroid = true;

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      status1: 'error',
      status2: 'error',
      value: '111',
    };
    this.checkLength = this.checkLength.bind(this);
  }
  change = () => {
    this.setState({
      status1: 'success',
    });
  };
  checkLength(text) {
    const length = text.length;
    // this.setState({value:text});
  }

  render() {
    return (
      <StyleProvider
        commonConfigs={{ fixedFont: true }}
        androidConfigs={{ materialDesign: isAndroid, rippleEnabled: false }}
        style={decodeVar(this.props.variable)}
      >
        <DemoContainer>
          <DemoSection title="单行">
            <Demo>
              <DemoItem direction="column">
                <Input
                  style={{ alignSelf: 'stretch' }}
                  materialDesign={false}
                  renderClear
                  disabled
                  type="text"
                  placeholder="Ender Voucher Code"
                />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="disabled">
            <Demo>
              <DemoItem direction="column">
                <Input
                  materialDesign={false}
                  disabled
                  renderClear
                  defaultValue={'WATSON$7189833'}
                  type="text"
                  onChange={this.change}
                />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="error">
            <Demo>
              <DemoItem direction="column">
                <Input
                  maxLength={20}
                  defaultValue={this.state.value}
                  onInput={this.checkLength}
                  renderCount={false}
                  renderError
                  renderClear
                  type="text"
                  status="error"
                  placeholder="Ender Voucher Code"
                  errorMessage={'Voucher code error'}
                />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="md 单行">
            <Demo>
              <DemoItem direction="column">
                <Input
                  materialDesign
                  renderClear
                  type="text"
                  placeholder="Ender Voucher Code"
                />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="md disabled">
            <Demo>
              <DemoItem direction="column">
                <Input
                  materialDesign
                  disabled
                  renderClear
                  defaultValue={'WATSON$7189833'}
                  type="text"
                  onChange={this.change}
                />
              </DemoItem>
            </Demo>
          </DemoSection>
          <DemoSection title="md error">
            <Demo>
              <DemoItem direction="column">
                <Input
                  maxLength={20}
                  materialDesign
                  defaultValue={this.state.value}
                  onInput={this.checkLength}
                  renderCount={false}
                  renderError
                  renderClear
                  type="text"
                  status="error"
                  placeholder="Ender Voucher Code"
                  errorMessage={'Voucher code error'}
                />
              </DemoItem>
            </Demo>
          </DemoSection>
        </DemoContainer>
      </StyleProvider>
    );
  }
};
const styles = {
  demoBlock: {
    marginLeft: 30,
    marginRight: 30,
  },
};
window.renderDemo = function (lang, variable) {
  render(<App variable={variable} />);
};
window.THEME_VARIABLE = window.THEME_VARIABLE || {};
renderDemo('en-us', window.THEME_VARIABLE);

initDemo('input');