v1.0.0

CHANGELOG.md

@@ -6,7 +6,7 @@
 
 #### 新增
 
-- 键盘操作，up，down，enter
+- 键盘操作，up(上)，down(下)，Left(上一页)，Right(下一页)，enter(选中、取消)
 
 #### Bug fixes
 

docs/mds/ZTEST.md

@@ -8,7 +8,8 @@
 var demo1 = xmSelect.render({
 	el: '#demo1', 
 	autoRow: true,
-	filterable: true,
+	paging: true,
+	pageSize: 2,
 	tree: {
 		strict: true,
 		show: false,

docs/mds/options.md

@@ -89,8 +89,9 @@
 
 | 参数		| 说明				| 类型		| 可选值  | 默认值 	|
 | --------- | ----------------- | --------- | ------ | -------- |
-| color		| 主题颜色   			| string	|	-	 |	#009688 |
+| color		| 主题颜色   		| string	|	-	 |	#009688 |
-| maxColor	| 选中上限闪烁边框颜色	| string	|	-	 |	#e54d42 |
+| maxColor	| 选中上限闪烁边框颜色| string	|	-	 |	#e54d42 |
+| hover		| 键盘操作的背景色	| string	|	-	 |	#f2f2f2 |
 
 
 ### model

src/components/framework/index.js

@@ -298,6 +298,10 @@ class Framework extends Component{
 		//树状结构数据更新
 		if(type === 'treeData'){
 			this.value(this.state.sels, null, true)
+		}else
+		//树状结构数据更新
+		if(type === 'close'){
+			this.onClick();
 		}
 	}
 
@@ -351,6 +355,7 @@ class Framework extends Component{
 			onClick: this.onClick.bind(this),
 			ua: checkUserAgent(),
 			size: config.size,
+			tabindex: 1,
 		}
 		if(tmpColor){
 			xmSelectProps.style.borderColor = tmpColor;
@@ -385,6 +390,13 @@ class Framework extends Component{
 	//组件完成挂载
 	componentDidMount(){
 		this.prepare = true;
+
+		this.base.addEventListener('keydown', e => {
+			let keyCode = e.keyCode;
+			if(keyCode === 13){
+				this.onClick()
+			}
+		});
 	}
 
 	//此时页面又被重新渲染了

src/components/plugin/general.js

@@ -24,6 +24,7 @@ class General extends Component{
 		this.inputOver = true;
 		this.__value = '';
 		this.tempData = [];
+		this.size = 0;
 	}
 
 	optionClick(item, selected, disabled, e){
@@ -45,16 +46,17 @@ class General extends Component{
 			this.props.onReset(arr, 'auto');
 		}else if(isFunction(m)){
 			m(item);
-		}
+		}
+		this.focus();
 		//阻止父组件上的事件冒泡
 		this.blockClick(e);
 	}
 
-	blockClick(e){
+	blockClick(e){
 		e.stopPropagation();
 	}
 
-	pagePrevClick(e){
+	pagePrevClick(size = this.size){
 		let index = this.state.pageIndex;
 		if(index <= 1){
 			return ;
@@ -62,7 +64,7 @@ class General extends Component{
 		this.changePageIndex(index - 1);
 		this.props.pageRemote && this.postData(index - 1, true);
 	}
-	pageNextClick(e, size){
+	pageNextClick(size = this.size){
 		let index = this.state.pageIndex;
 		if(index >= size){
 			return ;
@@ -135,9 +137,24 @@ class General extends Component{
 	}
 
 	//键盘事件
-	keydown(e){
+	keydown(type, e){
 		let keyCode = e.keyCode;
 
+		if(type === 'div'){
+			//Esc, Tab
+			if(keyCode === 27 || keyCode === 9){
+				this.props.onReset(false, 'close');
+			}else
+			//Left
+			if(keyCode === 37){
+				this.pagePrevClick();
+			}else
+			//Right 键
+			if(keyCode === 39){
+				this.pageNextClick();
+			}
+		}
+
 		const { value, optgroup, disabled } = this.props.prop;
 		let data = this.tempData.filter(item => !item[optgroup] && !item[disabled]);
 		let len = data.length - 1;
@@ -186,7 +203,13 @@ class General extends Component{
 				this.searchInputRef && (this.searchInputRef.value = '');
 			}else{
 				//聚焦输入框
-				setTimeout(() => this.focus(), 0);
+				setTimeout(() => {
+					if(props.filterable){
+						this.focus()
+					}else{
+						this.base.focus()
+					}
+				}, 0);
 			}
 		}
 	}
@@ -279,13 +302,14 @@ class General extends Component{
 			pageIndex <= 1 && (prevStyle = disabledStyle);
 			pageIndex == size && (nextStyle = disabledStyle);
 
-			this.state.pageIndex !== pageIndex && this.changePageIndex(pageIndex);
+			this.state.pageIndex !== pageIndex && this.changePageIndex(pageIndex);
+			this.size = size;
 
 			paging = (
 				<div class='xm-paging'>
-					<span style={ prevStyle } onClick={ this.pagePrevClick.bind(this) }>上一页</span>
+					<span style={ prevStyle } onClick={ this.pagePrevClick.bind(this, size) }>上一页</span>
 					<span>{ this.state.pageIndex } / { size }</span>
-					<span style={ nextStyle } onClick={ e => this.pageNextClick.bind(this, e, size)() }>下一页</span>
+					<span style={ nextStyle } onClick={ this.pageNextClick.bind(this, size) }>下一页</span>
 				</div>
 			)
 		}else{
@@ -363,7 +387,8 @@ class General extends Component{
 					}
 
 					return (<div class={ toolClass } style={ toolStyle } onClick={ () => {
-						isFunction(info.method) && info.method(safetyArr)
+						isFunction(info.method) && info.method(safetyArr)
+						this.focus()
 					} } onMouseEnter={ hoverChange } onMouseLeave={ hoverChange }>
 						{ config.toolbar.showIcon && <i class={ info.icon }></i> }
 						<span>{ info.name }</span>
@@ -386,14 +411,26 @@ class General extends Component{
 				itemStyle.backgroundColor = theme.color;
 				item[disabled] && (itemStyle.backgroundColor = '#C2C2C2');
 			}
-			if(item[value] === this.state.val){
-				itemStyle.backgroundColor = '#f2f2f2'
-			}
 			const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
 			const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : 'xm-icon-duox'].join(' ');
+
+			//处理键盘的选择背景色
+			if(item[value] === this.state.val){
+				itemStyle.backgroundColor = theme.hover
+			}
+			//处理鼠标选择的背景色
+			const hoverChange = e => {
+				if(e.type === 'mouseenter'){
+					if(!item[disabled]){
+						this.setState({ val: item[value] })
+					}
+				}
+			}
 
 			return (
-				<div class={ className } style={ itemStyle } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
+				<div class={ className } style={ itemStyle } value={ item[value] } onClick={
+					this.optionClick.bind(this, item, selected, item[disabled])
+				} onMouseEnter={ hoverChange } onMouseLeave={ hoverChange }>
 					{ showIcon && <i class={ iconClass } style={ iconStyle }></i> }
 					<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
 				</div>
@@ -424,7 +461,7 @@ class General extends Component{
 		}
 
 		return (
-			<div onClick={ this.blockClick }>
+			<div onClick={ this.blockClick } tabindex="1" style="outline: none;">
 				<div>
 					{ config.toolbar.show && toolbar }
 					{ filterable && search }
@@ -445,10 +482,10 @@ class General extends Component{
 			input.addEventListener('compositionstart', this.handleComposition.bind(this));
 			input.addEventListener('compositionupdate', this.handleComposition.bind(this));
 			input.addEventListener('compositionend', this.handleComposition.bind(this));
-			input.addEventListener('input', this.searchInput.bind(this));
+			input.addEventListener('input', this.searchInput.bind(this, 'input'));
-			input.addEventListener('keydown', this.keydown.bind(this));
 			this.searchInputRef = input;
 		}
+		this.base.addEventListener('keydown', this.keydown.bind(this, 'div'));
 	}
 
 	//此时页面又被重新渲染了

src/components/plugin/tree.js

@@ -298,7 +298,7 @@ class Tree extends Component{
 
 		return (
 			<div onClick={ this.blockClick } class="xm-body-tree" >
-				{ config.toolbar.show && toolbar }
+				// { config.toolbar.show && toolbar }
 				{ filterable && search }
 				<div class="scroll-body" style={ {maxHeight: config.height} }>{ arr }</div>
 			</div>

src/config/options.js

@@ -114,8 +114,9 @@ export default function (lan = 'zn') {
 		},
 		//主题配置
 		theme: {
-			color: '#009688',	   //默认主题颜色
+			color: '#009688',		//默认主题颜色
 			maxColor: '#e54d42',	//多选上限边框闪烁颜色
+			hover: '#f2f2f2',		//键盘hover的颜色
 		},
 		//模型
 		model: {

src/style/index.less

@@ -59,6 +59,7 @@ xm-select{
 	display: block;
 	width: 100%;
 	cursor: pointer;
+	outline: none;
 
 	&:hover{
 		border-color: #C0C4CC;
@@ -212,9 +213,9 @@ xm-select{
 			padding: 0 10px;
 			cursor: pointer;
 
-			&:hover{
+			// &:hover{
-				background-color: #f2f2f2;
+			// 	background-color: #f2f2f2;
-			}
+			// }
 			&-icon{
 				color: transparent;
 				display: flex;
@@ -305,7 +306,6 @@ xm-select{
 			&>span:last-child{
 				border-radius: 0 2px 2px 0
 			}
-
 			&>span{
 				display: flex;
 				flex: auto;