beyond-components

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

计划组件（尚在整理中）

• [x] Document
• [x] Placeholder
• [x] Modal
• [x] Grid
• [x] Tabs
• [x] Tooltip
• [x] Notification
• [x] 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

属性	类型	说明	默认值
onClick	function		-
delay	number	document 事件延迟触发，请勿修改小于50	100

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

属性	类型	说明	默认值
color	string	placeholder 显示时候的默认颜色	#999

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

属性	类型	说明	默认值
title	string	弹窗的标题	-
close	boolean	是否在顶部显示关闭按钮	true
closeIcon	String/Element	改变关闭按钮样式	X
footer	mixin	尾部内容	-
visible	boolean	是否显示弹窗	false
maxBodyHeight	number	最大内容高度（不包括头部和底部），超出会出现滚动条	浏览器高度的*0.7
bodyHeight	number	内容高度（不包括头部和底部）	-
width	string	弹窗宽度	-
maxWidth	string	弹窗最大宽度	-
mask	boolean	是否显示遮罩层	true
maskClickClose	boolean	点击遮罩关闭	true
onOpen	function	显示的时候触发，返回false则阻止该事件发生	-
onClose	function	关闭的时候触发，返回false则阻止该事件发生	-
prefix	string	改变class前缀，深度定制时候使用	beyond_p-
extraClassName	string	外层元素增加class	-
style	object	外部样式	-

定制

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

属性	类型	默认值	说明
grids	number	12	非必需，总的grids数
gutter	number	0	非必需，grid内容水平间隔
verticalGutter	number	0	非必需，,grid内容垂直间隔
width	number/string	-	非必需，宽度
style	object	-	非必需，样式
prefix	string	改变class前缀，深度定制时候使用	beyond_p-
extraClassName	string	-	非必需，增加className，定制样式

Col

属性	类型	默认值	说明
col	number	-	非必需，所占grids数
offsetCol	number	-	非必需，margin-right 推移的grids数
width	number/string	-	非必需，宽度，单位是px
offsetWidth	number/string	-	非必需，margin-right 宽度，单位是px
style	Object	-	非必需，样式
prefix	string	改变class前缀，深度定制时候使用	beyond_p-
extraClassName	string	-	非必需，增加className，定制样式

定制

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

属性	类型	默认值	说明
defaultActiveKey	string	-	默认的 active Tab，不受控
activeKey	string	0	active Tab，受控
onChange	function	-	切换 tab 时的回掉函数
prefix	string	改变class前缀，深度定制时候使用	beyond_p-
extraClassName	string	-	非必需，增加className，定制样式

Tab

属性	类型	默认值	说明
key	string	-	必须，标识 key
title	string	-	每个 tab 的标题
disabled	boolean	false	禁止切换到该 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

属性	类型	默认值	说明
placement	string	top	top/bottom/left/right 设置 tooltip 显示的位置
prefix	string	改变class前缀，深度定制时候使用	beyond_p-
extraClassName	string	-	非必需，增加className，定制样式
style	object	-	设置外层样式

Trigger

属性	类型	默认值	说明
tooltip	Tooltip	-	必须

定制

** 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 (作为组件)

属性	类型	默认值	说明
duration	number	2	持续时间，单位为 秒 ，若为 0 则不自动消失
x	string	center/left/right	消息框水平位置
y	string	top/middle/bottom	消息框垂直位置
reverse	boolean	false	设置反转颜色
prefix	string	改变class前缀，深度定制时候使用	beyond_p-
extraClassName	string	-	非必需，增加className，定制样式
style	object	-	设置外层样式

Notification （类）

静态方法	返回类型	参数	说明
getInstance	-	-	返回一个 notice 对象

定制

** 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

属性	类型	默认值	说明
className	string	-	设置 form 的 class
style	object	-	设置 form 样式
encType	string	multipart/form-data	-
dataType	string(json/html)	json	对返回数据进行处理
method	string	POST	-
action	string	-	提交地址
onSubmit	function	-	表单提交触发事件
onSuccess	function	-	提交成功事件，仅在使用 iframe 时候触发
onError	function	-	提交成功，解析数据失败事件，仅在使用 iframe 时候触发
onComplete	function	-	提交完成事件，仅在使用 iframe 时候触发