import { createElement, useState, render } from 'rax';
import DriverUniversal from 'driver-universal';
import { Input, Button } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

import './index.css';

const InputDemo = () => {
  const [val, setVal] = useState('initvalue');

  return (
    <View>
      <Text className="demo-title">Align</Text>
      <View className="demo-content">
        <View className="input-action">
          <Button
            type="primary"
            onClick={() => {
              setVal('new value');
            }}
          >
            set valid value
          </Button>
          <Button
            type="warning"
            onClick={() => {
              setVal(undefined);
            }}
          >
            set undefined
          </Button>
        </View>
        <Input className="my-input" placeholder="please input something" value={val} controlled autoFocus />
      </View>
    </View>
  );
};

// render(<InputDemo />, null, { driver: DriverUniversal });
 export default InputDemo