beyond-components v0.5.0-beta2

beyond-components

用于提供二次开发的 React 原型组件，只提供最基本的样式。

计划组件（尚在整理中）

• Document
• Placeholder
• Modal
• Grid
• Tabs
• Tooltip
• Notification
• Form

安装 install

npm install beyond-components  --save

文档 doc

Document

用 react 绑定的事件，会全部绑定在 document 元素上，如果用原生 js 在 document 上绑定点击事件，用 react 绑定的点击事件，即使阻止冒泡，也会触发原生绑定在 document 上的点击事件，该组件就是为了解决此类问题。

可用于弹窗、下拉框组件

import Document from 'beyond-components/lib/Document'
class App extends React.Component{

    hide(){
        //hide modal
    }

    show(){
        //show modal
    }

    render(){
        <Document onClick={this.hide.bind(this)}>
            <div className="modal" onClick={this.show.bind(this)}></div>
        </Document>
    }
}

API

Placeholder

在不支持 Placeholder 的浏览器上（IE8,IE9）上模拟 Placeholder，会自动判断是否支持 Placeholder，如果支持则使用原生的。

使用该组件一定要确认 input/textarea 组件的 value 是受控的

import Placeholder from 'beyond-components/lib/Placeholder'

class App extends React.Component{

    constructor(props){
        super(props)
        this.state = {value : ''}
    }

    handlerInputChange(event){
        let value = event.target.value
        this.setState({value})
    }

    render(){
        <Placeholder>
            <input type="text" placeholder="请输入用户名" value={this.state.value} onChange={this.handlerInputChange.bind(this)} />
        </Placeholder>
    }
}

API

Modal

弹窗组件

require('beyond-components/lib/Modal/index.css')
import Modal from 'beyond-components/lib/Modal'
class App extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            visible : false
        }
    }

    hide(){
        this.setState({visible : false})
    }

    show(){
        this.setState({visible : true})
    }

    render(){
        <div>
            <button onClick={this.show.bind(this)}>点击弹窗</button>
            <Modal visible={this.state.visible} onClose={this.hide.bind(this)} title="我是标题">我是内容</Modal>
        </div>
    }
}

API

定制

dom 结构

<div className="beyond_p-modal">
    <div className="beyond_p-modal-mask"></div>
    <div className="beyond_p-modal-dialog">
        <div className="beyond_p-modal-header">
            {this.props.title}
            <span className="beyond_p-modal-close">
                {this.props.closeIcon}
            </span>
        </div>
        <div className="beyond_p-modal-dialog">
            {this.props.children}
        </div>
        <div className="beyond_p-modal-footer">
            {this.props.footer}
        </div>
    </div>
</div>

Grid(Row,Col)

排版布局组件

require("beyond-components/lib/Grid/index.css")
import {Col,Row} from 'beyond-components/lib/Grid'
class App extends React.Component{

    render(){
        <Row>
            <Col col={4}>
                this is content
            </Col>
            <Col col={4}>
                this is content
            </Col>
            <Col col={4}>
                this is content
            </Col>
        </Row>
    }
}

API

Row

Col

定制

dom 结构

<div className="beyond_p-row">
    <div className="beyond_p-col"></div>
    <div className="beyond_p-col"></div>
    <div className="beyond_p-col"></div>
</div>

Tabs (Tabs Tab)

Tab 组件

require("beyond-components/lib/Tabs/index.css");
import Tabs,{Tab} from 'beyond-components/lib/Tabs'

class App extends React.Component{

    render(){
        <Tabs defaultActiveKey="0">
            <Tab title="页面1" key="0">页面1的内容</Tab>
            <Tab title="页面2" key="1" disabled>页面2的内容</Tab>
            <Tab title="页面3" key="2">页面3的内容</Tab>
            <Tab title="页面4" key="3">页面4的内容</Tab>
        </Tabs>
    }
}

API

Tabs

Tab

定制

dom 结构

<div className="beyond_p-tabs">
    <ul className="beyond_p-navs">
        <li className="beyond_p-nav">{Tab.props.title}</li>
        <li className="beyond_p-nav">{Tab.props.title}</li>
    </ul>
    <div className="beyond_p-panes">
        <div className="beyond_p-pane">{Tab.props.children}</div>
        <div className="beyond_p-pane">{Tab.props.children}</div>
    </div>
</div>

Tooltip (Tooltip Trigger)

提示气泡

require("beyond-components/lib/Tooltip/index.css");
import Tooltip,{Trigger} from 'beyond-components/lib/Tooltip'
class App extends React.Component{

    render(){
        <Trigger tooltip={<Tooltip placement="top">hello world</Tooltip>}>
            <span>hover me</span>
        </Trigger>
    }
}

API

Tooltip

Trigger

定制

Tooltip dom 结构

<div className="beyond_p-tooltip">
    <div className="beyond_p-content">{this.props.children}</div>
    <div className="beyond_p-triangle"></div>
</div>

Notification

消息组件

require("beyond-components/lib/Notification/index.css");
import Notification from 'beyond-components/lib/Notification'
class App extends React.Component{

    handlerClick(){
        if(!this.notice){
            this.notice = Notification.getInstance(<Notification />)
        }
        this.notice.show('hello world:' + Math.random())
    }

    handlerClick2(){
        if(!this.notice2){
            this.notice2 = Notification.getInstance(<Notification>hello world</Notification>)
        }
        this.notice.show()
    }

    render(){
        <div>
            <button onClick={this.handlerClick.bind(this)}>click me to show hello world</button>
            <button onClick={this.handlerClick2.bind(this)}>click me to show another hello world</button>
        </div>
    }
}

API

Notification (作为组件)

Notification （类）

定制

Notification dom 结构

<div className="beyond_p-notification">
    <div className="beyond_p-notification-content">
        {this.props.children}
    </div>
</div>

Form Ajax文件上传

使用 iframe 模拟文件 ajax 上传，兼容到 IE8 ，假如浏览器支持 FormData，则不会自动生成 iframe 标签，请使用 FormData 上传文件
在使用 iframe 模拟文件上传的时候，IE 浏览器，包括最新的 IE11，请求返回的 content-type 不支持 json，建议服务端直接返回 text/plain

import Form from 'beyond-components/lib/Form'
class App extends React.Component{

    handlerSubmit(event){
        if(typeof FormData !== 'undefined'){
            //如果使用 FormData 上传，则阻止表单进行普通提交，使用 FormData进行文件上传
            event.preventDefault()
            //code here
        }
    }

    handlerFormSuccess(res){
        //不使用 iframe 上传文件，不会触发此方法
        //res 是服务单返回的body信息
        console.log(res)
    }

    render(){
        <Form action="http://www.example.com" 
                onSubmit={this.handlerSubmit.bind(this)} 
				onSuccess={this.handlerFormSuccess.bind(this)}>
            <input type="file"/>
            <button type="submit">submit</button>
        </Form>
    }
}

API