文本输入

一个单行文本输入框，具有丰富的风格化样式和交互提示信息配置。

基础

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 16/12/29
 */
import React, {Component} from 'react';
import {Text} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Base
 *
 * This component could work in two mode which decided by `auto` property.
 *
 * In the `auto` mode, the component will be controlled by itself, you can give it a `defaultValue` to initialize it.
 * In the other mode, hana wishes you to provides property `value` and use following callbacks to control it:
 * `onChange`、`onBlur`、`onFocus`......
 *
 * @cn
 * 基础
 *
 * 此组件可以工作在两种模式，模式的切换由`auto`属性决定。
 *
 * 若`auto`为真，则会切换为自动模式，此模式下，组件将会完全由内部的状态自行控制，并且可以由`defaultValue`属性设置初始值。
 * 否则则为受控模式，此模式下，hana希望你使用`value`属性来提供一个值，并使用以下回调函数来对其进行控制：
 * `onChange`、`onBlur`、`onFocus`......
 */
export default class ExampleBase extends Component {
  state = {
    autoValue: 'youk.',
    controlledValue: 'Eternal feather'
  };

  render() {
    const {
      autoValue,
      controlledValue
    } = this.state;

    return (
      <div>
        <ExampleBlock
          en={(
            <p>Auto mode, {autoValue}</p>
          )}
          cn={(
            <p>自动模式，{autoValue}</p>
          )}
        >
          <Text
            auto
            defaultValue={autoValue}
            onChange={(e, v) => this.setState({
              autoValue: `${v === 'youko' ? 'Ever forever' : 'Emotional flutter'}: ${e.target.value}`
            })}
            onFocus={e => this.setState({autoValue: `Ebullient future: ${e.target.value}`})}
            onBlur={e => this.setState({autoValue: `Euphoric field: ${e.target.value}`})}
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Controlled mode</p>
          )}
          cn={(
            <p>受控模式</p>
          )}
        >
          <Text
            value={controlledValue}
            onChange={e => this.setState({controlledValue: e.target.value})}
          />
        </ExampleBlock>
      </div>
    );
  }
}

此组件可以工作在两种模式，模式的切换由auto属性决定。

若auto为真，则会切换为自动模式，此模式下，组件将会完全由内部的状态自行控制，并且可以由defaultValue属性设置初始值。否则则为受控模式，此模式下，hana希望你使用value属性来提供一个值，并使用以下回调函数来对其进行控制： onChange、onBlur、onFocus......

自动模式，youk.

受控模式

显示类型

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/2
 */
import React from 'react';
import {Text} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * View
 *
 * hana provides property `view` to decides how the component will be shown,
 * it could be `underline` and `box`.
 *
 * @cn
 * 显示类型
 *
 * hana提供了属性`view`来控制组件显示的方式，目前提供`underline`和`box`两种模式。
 */
export default () => (
  <div>
    <ExampleBlock>
      <Text
        auto
        defaultValue={'underline'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        view={'box'}
        defaultValue={'box'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <div className="flex">
        <Text
          auto
          view={'underline'}
          defaultValue={'underline'}
        />
        <Text
          auto
          view={'box'}
          defaultValue={'box'}
        />
        <Text
          auto
          view={'underline'}
          defaultValue={'underline'}
        />
      </div>
    </ExampleBlock>
  </div>
);

hana提供了属性view来控制组件显示的方式，目前提供underline和box两种模式。

状态

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 16/12/29
 */
import React from 'react';
import {Text} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * State
 *
 * hana feels the real world is very complicated, there must be rich states to adapted different scenes,
 * so, following properties are provided to manage theme:
 *
 * Property `focus` and `disable` could focus or disable component,
 * `active`, `success`, `warning` and `error` properties could define messages, styles...... in different states,
 * check the definitions for mor information,
 * their order is from `error` to `default`.
 *
 * @cn
 * 状态
 *
 * hana觉得现实世界非常复杂，需要有丰富的状态来适应各种环境，所以提供了以下几种属性来管理这些状态：
 *
 * `focus`和`disable`属性可以聚焦或者禁用组件，
 * 而`active`、`success`、`warning`和`error`几个属性则可以定义在不同状态下的提示信息、样式等，详见属性定义，
 * 她们的优先级按照以上列举顺序的倒序排列。
 *
 */
export default () => (
  <div>
    <ExampleBlock>
      <Text
        auto
        disabled
        defaultValue={'Disabled'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        focus
        defaultValue={'Focus'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        message={'Default state!'}
        color={'#888'}
        defaultValue={'Default'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        focus
        active={{
          message: 'Activity!',
          color: '#52c5bb'
        }}
        defaultValue={'Active'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        warning={{
          show: true,
          message: 'Option causes warning!'
        }}
        defaultValue={'Warning'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        success={{
          show: true,
          message: 'Option is successful!'
        }}
        defaultValue={'Success'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        error={{
          show: true,
          message: 'Option causes error!'
        }}
        defaultValue={'Error'}
      />
    </ExampleBlock>
  </div>
);

hana觉得现实世界非常复杂，需要有丰富的状态来适应各种环境，所以提供了以下几种属性来管理这些状态：

focus和disable属性可以聚焦或者禁用组件，而active、success、warning和error几个属性则可以定义在不同状态下的提示信息、样式等，详见属性定义，她们的优先级按照以上列举顺序的倒序排列。

Default state!

Activity!

Option causes warning!

Option is successful!

Option causes error!

尺寸

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 16/12/30
 */
import React from 'react';
import {Text} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Size
 *
 * For different scenes, hana provides three preset sizes defined by property `size`:
 * `small`, `middle` and `large`.
 *
 * @cn
 * 尺寸
 *
 * 针对不同场景，hana提供了一个属性`size`来定义尺寸的大小，现在有`small`、`middle`和`large`三种。
 *
 */
export default () => (
  <div>
    <ExampleBlock>
      <Text
        auto
        size={'small'}
        defaultValue={'Small'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        size={'middle'}
        defaultValue={'Middle'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        size={'large'}
        defaultValue={'Large'}
      />
    </ExampleBlock>
  </div>
);

针对不同场景，hana提供了一个属性size来定义尺寸的大小，现在有small、middle和large三种。

文本类型

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 16/12/30
 */
import React from 'react';
import {Text} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Text type
 *
 * `type` property is a constraint on the input value, it is useful when you need to disable some value.
 * There are three preset types in Text component: `string`, `int` and `float`.
 *
 * Otherwise, if you want to use the text as a password, please set the property `mode` to `password`.
 *
 * @cn
 * 文本类型
 *
 * `type`属性用于对输入内容进行约束，当你需要禁用某些输入时，她非常有用，目前已支持`string`, `int` and `float`三种类型，
 *
 * 另外，如果你需要加密输入内容呢，请直接将`mode`属性设置为`password`.
 */
export default () => (
  <div>
    <ExampleBlock
      en={(
        <p>String</p>
      )}
      cn={(
        <p>字符串</p>
      )}
    >
      <Text
        auto
        defaultValue={'string'}
      />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Int</p>
      )}
      cn={(
        <p>整数</p>
      )}
    >
      <Text
        auto
        type={'int'}
        defaultValue={'0'}
      />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Float</p>
      )}
      cn={(
        <p>浮点数</p>
      )}
    >
      <Text
        auto
        type={'float'}
        defaultValue={'0.0'}
      />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Password</p>
      )}
      cn={(
        <p>密码</p>
      )}
    >
      <Text
        auto
        mode={'password'}
        defaultValue={'password'}
      />
    </ExampleBlock>
  </div>
);

type属性用于对输入内容进行约束，当你需要禁用某些输入时，她非常有用，目前已支持string, int and float三种类型，

另外，如果你需要加密输入内容呢，请直接将mode属性设置为password.

字符串

整数

浮点数

密码

图标

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 16/12/30
 */
import React from 'react';
import {Text, Icon} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Icon
 *
 * Icon is a important part of this component to make it more nijigen-style,
 * you can customize it with property `withIcon`, `icon` and `iconPosition`,
 * there is also a way to show different icons with states' properties.
 *
 * @cn
 * 图标
 *
 * Icon对于组件的风格化非常重要，你可以使用`withIcon`、`icon`和`iconPosition`属性来对其进行控制，
 * 如果你想在不同的状态（详见上个例子）显示不同图标，可以在那些状态对应的属性中进行修改。
 */
export default () => (
  <div>
    <ExampleBlock>
      <Text
        auto
        withIcon={false}
        defaultValue={'without icon'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        iconPosition={'before'}
        defaultValue={'Position: before'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        iconPosition={'after'}
        defaultValue={'Position: after'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        icon={<Icon type={'himawari'} />}
        defaultValue={'Custom icon: default'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        success={{
          show: true,
          icon: <Icon type={'smile'} />
        }}
        defaultValue={'Custom icon: success'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        warning={{
          show: true,
          icon: <Icon type={'warn'} />
        }}
        defaultValue={'Custom icon: waring'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        error={{
          show: true,
          icon: <Icon type={'sad'} />
        }}
        defaultValue={'Custom icon: error'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        icon={<p>Text</p>}
        defaultValue={'Custom icon: tag p'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        view={'box'}
        icon={<p>Text</p>}
        defaultValue={'Custom icon: tag p, box'}
      />
    </ExampleBlock>
  </div>
);

Icon对于组件的风格化非常重要，你可以使用withIcon、icon和iconPosition属性来对其进行控制，如果你想在不同的状态（详见上个例子）显示不同图标，可以在那些状态对应的属性中进行修改。

Text

样式

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 16/12/30
 */
import React from 'react';
import {Text} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Styles
 *
 * hana also provide properties to cover default style and css, check the definitions.
 *
 * @cn
 * 样式
 *
 * hana也预留了样式和CSS类的接口，详情请查看属性定义。
 */
export default () => (
  <div>
    <ExampleBlock>
      <Text
        auto
        style={{
          height: 40
        }}
        defaultValue={'style={{height: 40}}'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        inputStyle={{
          width: 320
        }}
        defaultValue={'inputStyle={{width: 320}}'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        active={{
          message: 'active style',
          style: {
            color: '#52c5bb'
          }
        }}
        defaultValue={'Custom style: active'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        success={{
          show: true,
          message: 'successful style',
          style: {
            color: '#d56767'
          }
        }}
        defaultValue={'Custom style: success'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        warning={{
          show: true,
          message: 'warning style',
          style: {
            color: '#4fc478'
          }
        }}
        defaultValue={'Custom style: waring'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        error={{
          show: true,
          message: 'error style',
          style: {
            color: '#e8964a'
          }
        }}
        defaultValue={'Custom style: error'}
      />
    </ExampleBlock>
  </div>
);

hana也预留了样式和CSS类的接口，详情请查看属性定义。

successful style

warning style

error style

属性说明

属性名	类型	默认值	说明
auto	bool	false	是否工作在自动模式，如果是，组件将会自动管理它的状态。
mode	enum: 'text' 'password'	'text'	组件的应用场景。
type	enum: 'string' 'int' 'float'	'string'	文本类型。
view	enum: 'box' 'underline'	'underline'	组件的显示类型。
disabled	bool	false	禁用输入。
defaultValue	valueType	''	在自动模式下，该值将作为组件内容的初始值。
value	valueType	''	在普通模式下，用于控制组件内容的值。
size	enum: 'small' 'middle' 'large'	'middle'	组件显示的尺寸。
withIcon	bool	true	是否要显示图标。
icon	node	null	用于替代默认图标。
color	string		默认的主题颜色。
message	string		默认的提示信息。
iconPosition	enum: 'before' 'after'	'before'	图标的位置。
focus	bool		组件是否被focus。
onChange	function	() => {}	当输入的值发生变化时，将会被调用的回调。 (event: Event, value: valueType) => void
onSubmit	function	() => {}	当输入的值被提交时，将会被调用的回调。"提交"，是指在输入时按下回车键或者点击图标。 (event: Event, value: valueType) => void
onBlur	function	() => {}	当组件被blur时，将会被调用的回调。 (event: Event, value: valueType) => void
onFocus	function	() => {}	当组件被focus时，将会被调用的回调。 (event: Event, value: valueType) => void
className	string		根元素的class。
style	object	{}	根元素的样式。
inputStyle	object	{}	输入框的样式。
active	hintType	{ show: false, message: '', style: {}, icon: null, color: null}	用于指定活动状态（主要是focus时）下的一些组件属性，包括样式、提示信息等。 {message: string, color: string, style: style, icon: node}
error	hintType	{ show: false, message: '', style: {}, icon: null, color: null}	用于指定错误状态下的一些组件属性，这些属性将会替换掉默认属性。 {show: bool, message: string, color: string, style: style, icon: node to replace the default icon while in this condition}
warning	hintType	{ show: false, message: '', style: {}, icon: null, color: null}	用于指定警告状态下的一些组件属性，这些属性将会替换掉默认属性。 {show: bool, message: string, color: string, style: style}
success	hintType	{ show: false, message: '', style: {}, icon: null, color: null}	用于指定成功状态下的一些组件属性，这些属性将会替换掉默认属性。 {show: bool, message: string, color: string, style: style, icon: node}

未在文档中说明的属性将会被自动加到根元素或form元素上。