tf-react-cpn

常用react组件

组件说明

目前此组件的样式依赖于amazeui，若有需要可自行修改。

DateInput

属性参数：

{
    className:React.PropTypes.string,
    style:React.PropTypes.object,
    name:React.PropTypes.string, //普通name属性
    placeholder:React.PropTypes.string,
    disabled:React.PropTypes.bool,
    required:React.PropTypes.bool,
    onChange:React.PropTypes.func,
    //value:React.PropTypes.string,
    format:React.PropTypes.string, //格式
    type:React.PropTypes.oneOf(['year', 'month', 'week', 'date', 'datetime']),
    fixed:React.PropTypes.bool,
    parent:React.PropTypes.object, //相对定位的父元素
    hideClear:React.PropTypes.bool //是否隐藏“清空”操作
}

SearchSelect

属性参数：

{
    className:React.PropTypes.string,
    style:React.PropTypes.object,
    name:React.PropTypes.string, //普通name属性
    maxItemLength:React.PropTypes.number, //最多显示的匹配条数
    idField:React.PropTypes.string,
    nameField:React.PropTypes.string,
    emptyText:React.PropTypes.string,
    implicitNameField:React.PropTypes.string, //隐式匹配项，如中文人名时可用简拼作为隐式匹配项
    multiple:React.PropTypes.bool,
    list:React.PropTypes.array, //数据源
    //value:React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string, React.PropTypes.array]),
    onChange:React.PropTypes.func.isRequired
}

PullRefresh

DOM结构：

<div id="scrollWrapper" title="这是滚动容器，即overflow:auto。如果滚动容器是整个浏览器窗口，那么这层div就不要了">
    <div id="wrap" title="触发滑动事件的容器">
        <PullRefresh afterPull={this.onRefresh} container="wrap" scrollContainer="scrollWrapper"/>
        <div className="weui-cells margin-top-0" title="这就是个普通的列表，比如：ul">
            {
                list.map((o, i) => <PlaceItem key={i} data={o}/>)
            }
        </div>
    </div>
</div>

属性参数：

{
    container:React.PropTypes.string, //用于触发滑动事件的容器id，一般为PullRefresh组件的相邻父元素
    scrollContainer:React.PropTypes.string, //具有滚动条的容器id，不指定时为document.body，即浏览器窗口；如果是在页面局部容器中下拉刷新则必须指定
    dragThreshold:React.PropTypes.number, // 临界值：当拖动多高时触发正在刷新
    moveCount:React.PropTypes.number, // 位移系数
    beforePull:React.PropTypes.func, // 触发下拉刷新前调用
    afterPull:React.PropTypes.number, // 触发下拉刷新后调用  flag：true代表触发了刷新 flag：false代表没有触发下拉刷新只是拉下马又收回去了
    onRefresh:React.PropTypes.number // 触发下拉刷新回调 可以用来加载数据
}

日志更新

v2.2.1

• 修改PullRefresh组件，使其可以接收刷新成功信号。

v2.2.0

• 增加PullRefresh组件。

v2.1.1

• 增加DateInput属性placeholder。

v2.1.0

• 移除发布版本对React相关库的依赖（正式环境应另外引入React）。
• 移除SelectSearch组件对isMounted()的引用。
• 增加DateInput属性hideClear，支持隐藏“清空”按钮。

v2.0.6

• 修复DateInput组件因添加属性parent而引起的问题。

v2.0.5

• 完善DateInput属性parent。

v2.0.4

• 增加DateInput属性parent，使其定位时可相对该父元素。

v2.0.3

• 修复ImageViewer展示的高宽不对问题。
• 修复图片移动问题，现在点击左键才能移动。

v2.0.1

• 完善DateInput属性设置,不仅限在个别属性.

v2.0.0

• 使用ES6进行重写。
• 增加图片预览组件ImageViewer。

v1.1.３

• 修复DateInput事件绑定问题。
• 修复SearchSelect在blur的同时移除组件还会setState的问题。

v1.1.2

• 修改SearchSelect无选择项时的文本“(请选择)”为可配置项。

v1.1.1

• 修复SearchSelect的value为0时被当作（无选择）处理，实际上0是合法的。

v1.1.0

• 添加分页组件Pagination。
• 添加DateInput组件定位属性，使其支持absolute和fixed定位。
• 添加DateInput组件disabled属性。
• 添加className和style属性到SearchSelect组件和DateInput组件。

v1.0.4

• 修复DateInput默认值为空串时会显示undefined的问题。
• 调整SearchSelect部分样式问题。

v1.0.3

• 添加SearchSelect的value类型验证。
• 修改Modal的title属性类型为node，即允许多类型。

v1.0.2

• 添加examples测试页面。
• 修复DateInput组件清空时没有回调的问题。
• 修复严格模式下因调用arguments.callee而产生的问题。

v1.0.1

• 修改工具模块引用为tf-utils。
• 调整项目结构，使用babel编译。

v1.0.0

• 创建。