多行文本

多行文本输入框，具有丰富的风格化样式和提示信息配置，同时支持自适应大小。

基础

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/7
 */
import React, {Component} from 'react';
import {TextArea} 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>
          )}
        >
          <TextArea
            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>
          )}
        >
          <TextArea
            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: 2017/2/8
 */
import React from 'react';
import {TextArea} 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>
      <TextArea
        auto
        disabled
        defaultValue={'Disabled'}
      />
    </ExampleBlock>

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

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

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

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

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

    <ExampleBlock>
      <TextArea
        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: 2017/2/8
 */
import React from 'react';
import {TextArea} 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`.
 *
 * TextArea is different from TextArea, hana allows you to use the property `height` to set her height.
 * If you don't need a fixed height, property `autoSize` is also provided to make this component's height be automatic computation,
 * in this mode, property `height` is invalid.
 *
 * @cn
 * 尺寸
 *
 * 针对不同场景，hana提供了一个属性`size`来定义尺寸的大小，现在有`small`、`middle`和`large`三种。
 *
 * 作为一个多行文本，比起单行，高度也是一个重要的属性，hana允许你通过`height`来进行设置。
 * 如果不想用指定的高度，你可以用`autoSize`属性指定一个最大行数和最小行数，
 * 在这种状况下，组件的高度将根据输入的内容自行计算，并且此时`height`会无效。
 *
 */
export default () => (
  <div
    style={{
      backgroundColor: '#fff',
      padding: 8
    }}
  >
    <ExampleBlock>
      <TextArea
        auto
        size={'small'}
        defaultValue={'Small'}
      />
    </ExampleBlock>

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

    <ExampleBlock>
      <TextArea
        auto
        size={'large'}
        defaultValue={'Large'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        defaultValue={'height={32}'}
        height={32}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        defaultValue={'autoSize={{minLines: 3, maxLines: 8}}'}
        autoSize={{minLines: 3, maxLines: 8}}
      />
    </ExampleBlock>
  </div>
);

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

作为一个多行文本，比起单行，高度也是一个重要的属性，hana允许你通过height来进行设置。如果不想用指定的高度，你可以用autoSize属性指定一个最大行数和最小行数，在这种状况下，组件的高度将根据输入的内容自行计算，并且此时height会无效。

图标

/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/8
 */
import React from 'react';
import {TextArea, 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` and `icon``,
 * there is also a way to show different icons with states' properties.
 *
 * @cn
 * 图标
 *
 * Icon对于组件的风格化非常重要，你可以使用`withIcon`和`icon`属性来对其进行控制，
 * 如果你想在不同的状态（详见上个例子）显示不同图标，可以在那些状态对应的属性中进行修改。
 */
export default () => (
  <div>
    <ExampleBlock>
      <TextArea
        auto
        withIcon={false}
        defaultValue={'without icon'}
      />
    </ExampleBlock>

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

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

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

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

    <ExampleBlock>
      <TextArea
        auto
        icon={<p>TextArea</p>}
        defaultValue={'Custom icon: tag p'}
      />
    </ExampleBlock>
  </div>
);

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

TextArea

样式

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

/**
 * Styles
 *
 * hana also provide properties to cover default style and css, check the definitions.
 *
 * hana also provide a property `backgroundColor` to set the background-color of desc quickly.
 *
 * @cn
 * 样式
 *
 * hana也预留了样式和CSS类的接口，详情请查看属性定义。
 *
 * 除了基本样式之外，由于此组件Hint信息的实现方式，你可能需要使用`backgroundColor`属性指定一个当前背景环境的主题颜色。
 *
 */
export default () => (
  <div
    style={{
      backgroundColor: '#fff',
      padding: 8
    }}
  >
    <ExampleBlock>
      <TextArea
        auto
        style={{
          height: 40
        }}
        defaultValue={'style={{height: 40}}'}
      />
    </ExampleBlock>

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

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

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

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

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

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

除了基本样式之外，由于此组件Hint信息的实现方式，你可能需要使用backgroundColor属性指定一个当前背景环境的主题颜色。

successful style

warning style

error style

属性说明

属性名	类型	默认值	说明
auto	bool	false	是否工作在自动模式，如果是，组件将会自动管理它的状态。
autoSize	shape		是否允许输入框自动根据文本调整高度, 需要提供 {最小行数, 最大行数}
disabled	bool	false	禁用输入。
defaultValue	string	''	在自动模式下，该值将作为组件内容的初始值。
value	string	''	在普通模式下，用于控制组件内容的值。
size	enum: 'small' 'middle' 'large'	'middle'	组件显示的尺寸。
height	union		组件高度。
backgroundColor	string	'#fff'	应用环境的主要背景色。
withIcon	bool	true	是否要显示图标。
icon	node	null	用于替代默认图标。
color	string		默认的主题颜色。
message	string		默认的提示信息。
focus	bool		组件是否被focus。
onChange	function	() => {}	当输入的值发生变化时，将会被调用的回调。 (event, value) => void.
onBlur	function	() => {}	当组件被blur时，将会被调用的回调。 (event, value) => void.
onFocus	function	() => {}	当组件被focus时，将会被调用的回调。 (event, value) => void.
className	string		根元素的class。
style	object	{}	根元素的样式。
inputStyle	object	{}	输入框的样式。
descStyle	object		顶部解释条的样式。
active	hintType	{ show: false, message: '', style: {}, descStyle: {}, icon: null, color: null}	用于指定活动状态（主要是focus时）下的一些组件属性，包括样式、提示信息等。 {message: string, color: string, style: style, icon}
error	hintType	{ show: false, message: '', style: {}, descStyle: {}, icon: null, color: null}	用于指定错误状态下的一些组件属性，这些属性将会替换掉默认属性。 {show: bool, message: string, color: string, style: style, icon: node}
warning	hintType	{ show: false, message: '', style: {}, descStyle: {}, icon: null, color: null}	用于指定警告状态下的一些组件属性，这些属性将会替换掉默认属性。 {show: bool, message: string, color: string, style: style, icon: node}
success	hintType	{ show: false, message: '', style: {}, descStyle: {}, icon: null, color: null}	用于指定成功状态下的一些组件属性，这些属性将会替换掉默认属性。 {show: bool, message: string, color: string, style: style, icon: node}

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