v1.0.1

1. [新增]物理分页配置
2. [新增]自定义搜索模式(远程搜索)
3. [新增]下拉选高度配置
4. [修改]调整布局为flex布局
5. [修改]展开下拉选时, 自动聚焦搜索框

docs/data.js

@@ -33,7 +33,15 @@ xmSelect.render({
 <p>如果有bug欢迎提issues, 或者在群内@群主进行反馈</p>
 
 <h3>更新日志</h3>
-`, js: ``, comment: `
+`, js: ``, comment: `,
+[2019-09-22] v1.0.1
+1. [新增]物理分页配置
+2. [新增]自定义搜索模式(远程搜索)
+3. [新增]下拉选高度配置
+4. [修改]调整布局为flex布局
+5. [修改]展开下拉选时, 自动聚焦搜索框
+
+
 [2019-07-29] v1.0.0.0729
 1. 更新文档显示问题
 
@@ -75,10 +83,22 @@ xmSelect.render({
 		if(!val) return true;
 		return item[prop.name].indexOf(val) != -1;
 	},
+	//是否开启自定义搜索, 必须设置 filterable: true
+	remoteSearch: false,
+	//远程搜索回调
+	remoteMethod: function(val, cb){
+		cb([]);
+	},
 	//下拉方向
 	direction: 'auto',
 	//自定义样式
 	style: {},
+	//默认多选的高度
+	height: '200px',
+	//是否开启分页
+	paging: false,
+	//分页每页的条数
+	pageSize: 10,
 	//是否开启单选模式
 	radio: false,
 	//是否开启重复选模式
@@ -644,4 +664,36 @@ var demo27 = xmSelect.render({
 `, brush: 'js', title: '控制下拉框的打开与关闭'},
 
 
+{ html: `
+<h3>启用分页</h3>
+<div id="demo28"></div>
+`, js: `
+var demo28 = xmSelect.render({
+	el: '#demo28', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	paging: true,//开启分页
+	pageSize: 10,//每页10条
+})
+`, brush: 'js', title: '启用分页'},
+
+
+{ html: `
+<h3>自定义搜索</h3>
+<div id="demo29"></div>
+`, js: `
+var demo29 = xmSelect.render({
+	el: '#demo29', 
+	data: ''.padEnd(100, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+	filterable: true,//开启搜索
+	remoteSearch: true,//自定义搜索
+	remoteMethod: function(val, cb){
+		//这里模拟2s后回调
+		setTimeout(() =>  {
+			cb([{name: 'xxx' + val, value: 1}])
+		}, 2000);
+	},
+})
+`, brush: 'js', title: '自定义搜索'},
+
+
 ];

docs/index.css

@@ -11,7 +11,7 @@ h3{font-size: 20px; font-weight: bold; margin-bottom: 20px;}
 
 p{font-size: 14px; color: #5e6d82; line-height: 1.5em;margin: 15px 0 10px;}
 a{color: #409eff; text-decoration: none;}
-#content{height: calc(100vh - 99px); overflow: auto; padding: 10px;}
+#content{height: calc(100vh - 99px); overflow: auto; padding: 10px 50px;}
 /* #header{left: 5vw; right: 5vw; top: 20px; position: fixed;} */
 #header{padding: 20px 50px; background-color: #0B0D10; top: 0; left: 0; right: 0; z-index: 99999; border-bottom: 1px solid #DCDFE5;}
 #header xm-select{background-color: #17191C; color: #FFF;}

src/components/common/util.js

@@ -57,3 +57,13 @@ export function watch(data) {
 		}
 	});
 }
+
+export function checkUserAgent(){
+	const ua = navigator.userAgent;
+	if(ua.indexOf('Mac OS')){
+		return 'mac';
+	}
+	
+	
+	return 'win';
+}

src/components/config/options.js

@@ -26,10 +26,22 @@ export default function (lan = 'zn') {
 			if(!val) return true;
 			return item[prop.name].indexOf(val) != -1;
 		},
+		//是否开启远程搜索
+		remoteSearch: false,
+		//远程搜索回调
+		remoteMethod: function(val, cb){
+			cb([]);
+		},
 		//下拉方向
 		direction: 'auto',
 		//自定义样式
 		style: {},
+		//默认多选的高度
+		height: '200px',
+		//是否开启分页
+		paging: false,
+		//分页每页的条数
+		pageSize: 10,
 		//是否开启单选模式
 		radio: false,
 		//是否开启重复选模式

src/components/core/index.js

@@ -49,9 +49,13 @@ class xmOptions {
 		//如果是历史渲染过的数据, 重置一下数据
 		isNew && childs[this.options.el] && childs[this.options.el].reset();
 		
+		let isRender = false;
 		const onRef = (ref) => childs[this.options.el] = ref;
+		const onReset = result => {
+			this.options.data = result;
+		}
 		
-		render(<Framework { ...this.options } onClose={ onClose } onRef={ onRef } />, dom);
+		render(<Framework { ...this.options } onReset={ onReset } onClose={ onClose } onRef={ onRef } />, dom);
 		
 		//记录数据
 		data[this.options.el] = this;

src/components/element/framework.js

@@ -1,4 +1,5 @@
 import { h, Component, render } from '@/components/preact'
+import { checkUserAgent } from '@/components/common/util'
 
 //渲染类
 import Tips from './tips';
@@ -22,6 +23,11 @@ class Framework extends Component{
 	reset(){
 		let selected = this.props.prop.selected;
 		this.value(this.props.initValue ? this.props.initValue : this.props.data.filter(item => item[selected]), false);
+		this.resetDate(this.props.data);
+	}
+	
+	resetDate(data = []){
+		this.setState({ data });
 	}
 	
 	value(sels, show){
@@ -38,6 +44,10 @@ class Framework extends Component{
 		})
 	}
 	
+	onReset(data){
+		this.resetDate(data);
+	}
+	
 	onClick(e){
 		let show = !this.state.show;
 		
@@ -72,11 +82,11 @@ class Framework extends Component{
 	}
 	
 	componentWillReceiveProps(props){
-		
+		this.resetDate(props.data);
 	}
 	
 	render(config, { sels, show }) {
-		const { tips, theme, data, prop, template, model, empty, style, radio, repeat, clickClose, on } = config;
+		const { tips, theme, prop, style, radio, repeat, clickClose, on } = config;
 		const borderStyle = { borderColor: theme.color };
 		//最外层边框的属性
 		const xmSelectProps = {
@@ -84,7 +94,8 @@ class Framework extends Component{
 				...style,
 				...(show ? borderStyle : {})
 			},
-			onClick: this.onClick.bind(this)
+			onClick: this.onClick.bind(this),
+			ua: checkUserAgent(),
 		}
 		//右边下拉箭头的变化class
 		const iconClass = show ? 'xm-icon xm-icon-expand' : 'xm-icon';
@@ -124,8 +135,8 @@ class Framework extends Component{
 			clickClose && !mandatoryDelete && this.onClick();
 		};
 		
-		const labelProps = {  ...config, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
-		const bodyProps = {  ...config, sels, ck, show }
+		const labelProps = {  ...config, data: this.state.data, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') }
+		const bodyProps = {  ...config, data: this.state.data, sels, ck, show, onReset: this.onReset.bind(this) }
 		//控制下拉框的显示于隐藏
 		const bodyClass = ['xm-body', this.state.directionVal, show ? '' : 'dis'].join(' ');
 		

src/components/element/label.js

@@ -67,7 +67,9 @@ class Label extends Component{
 		
 		return (
 			<div class="xm-label">
-				{ html }
+				<div class="scroll">
+					<div class="label-content">{ html }</div>
+				</div>
 			</div>
 		)
 	}

src/components/element/model/general.js

@@ -8,47 +8,189 @@ class General extends Component{
 	constructor(options){
 		super(options);
 		this.searchCid = 0;
-		this.setState({ searchVal: '', });
+		this.setState({ 
+			searchVal: '',
+			remote: true,
+			loading: false,
+			pageIndex: 1,
+			pageSize: 10,
+			
+			inputOver: true,
+		});
 	}
 	
 	optionClick(item, selected, disabled, e){
 		this.props.ck(item, selected, disabled);
 		//阻止父组件上的事件冒泡
+		this.blockClick(e);
+	}
+	
+	blockClick(e){
 		e.stopPropagation();
 	}
 	
-	searchInputClick(e){
-		e.stopPropagation();
+	pagePrevClick(e){
+		let index = this.state.pageIndex;
+		if(index <= 1){
+			return ;
+		}
+		this.changePageIndex(index - 1);
+	}
+	pageNextClick(e, size){
+		let index = this.state.pageIndex;
+		if(index >= size){
+			return ;
+		}
+		this.changePageIndex(index + 1);
+	}
+	
+	changePageIndex(index){
+		this.setState({
+			pageIndex: index
+		})
 	}
 	
 	searchInput(e){
+		
+		let v = e.target.value;
+		
+		setTimeout(() => {
+			if(this.state.inputOver){
 				clearTimeout(this.searchCid);
-		this.searchCid = setTimeout(() => this.setState({ searchVal: e.target.value }), this.props.delay);
+				this.searchCid = setTimeout(() => this.setState({ 
+					searchVal: v,
+					remote: true,
+				}), this.props.delay);
+			}
+		}, 0)
+	}
+	
+	focus(){
+		this.searchInputRef.focus();
+	}
+	
+	handleComposition(e){
+		let type = e.type;
+		
+		if(type === 'compositionstart'){
+			this.setState({ inputOver: false })
+		}else if(type === 'compositionend'){
+			this.setState({ inputOver: true })
+		}
 	}
 	
 	componentWillReceiveProps(props){
 		if(!props.show){
 			//清空输入框的值
-			this.setState({ searchVal: '', });
+			this.setState({ searchVal: '' });
+		}else{
+			//聚焦输入框
+			setTimeout(() => this.focus(), 0);
 		}
 	}
 	
-	render({ data, prop, template, theme, sels, empty, filterable, filterMethod, delay, searchTips }) {
+	render(config) {
+	
+		let { data, prop, template, theme, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips } = config
 		
 		const { name, value, disabled } = prop;
 		
-		const arr = (filterable ? data.filter((item, index) => filterMethod(this.state.searchVal, item, index, prop)) : data).map(item => {
+		let arr = data;
+		//是否开启了搜索
+		if(filterable){
+			if(remoteSearch){//是否进行远程搜索
+				if(this.state.remote){
+					this.setState({ loading: true, remote: false });
+					remoteMethod(this.state.searchVal, result => {
+						this.setState({ loading: false });
+						this.props.onReset(result);
+					});
+				}
+			}else{
+				arr = data.filter((item, index) => filterMethod(this.state.searchVal, item, index, prop));
+			}
+		}
+		
+		const searchClass = ['xm-search', filterable ? '':'dis'].join(' ');
+		const search = (
+			<div class={ searchClass }>
+				<i class="xm-iconfont xm-icon-sousuo"></i>
+				<input type="text" class="xm-input xm-search-input" placeholder={ searchTips } value={ this.state.searchVal } 
+					ref={ (input) => { this.searchInputRef = input; } }
+					autoFocus
+					onClick={ this.blockClick.bind(this) } 
+					onInput={ this.searchInput.bind(this) } 
+					onCompositionStart={ this.handleComposition.bind(this) }
+					onCompositionUpdate={ this.handleComposition.bind(this) }
+					onCompositionEnd={ this.handleComposition.bind(this) }
+				/>
+			</div>
+		);
+		
+		
+		let paging = '';
+		
+		if(config.paging){
+			
+			//计算当前分页的总页码
+			const size = Math.floor((arr.length - 1) / config.pageSize) + 1;
+			
+			//如果当前页码大于总页码, 重置一下
+			if(this.state.pageIndex > size){
+				this.changePageIndex(size);
+			}
+			
+			//实现简单的物理分页
+			let start = (this.state.pageIndex - 1) * config.pageSize;
+			let end = start + config.pageSize;
+			arr = arr.slice(start, end);
+			
+			const disabledStyle = {cursor: 'no-drop', color: '#d2d2d2'};
+			
+			let prevStyle = {}, nextStyle = {};
+			this.state.pageIndex <= 1 && (prevStyle = disabledStyle);
+			this.state.pageIndex == size && (nextStyle = disabledStyle);
+			
+			const defaultCurrClass = {
+				position: 'relative',
+				borderRadius: '1px',
+			}
+			const pagingClass = 'xm-paging';
+			// {
+			// 	''.padEnd(size, ' ').split('').map((s, i) => (
+			// 		<span style={
+			// 			this.state.pageIndex == i + 1 ? { 
+			// 				...defaultCurrClass, 
+			// 				backgroundColor: theme.color, 
+			// 				borderColor: theme.color,
+			// 				color: '#FFF',
+			// 			} : defaultCurrClass 
+			// 		}>{ i + 1 }</span>
+			// 	))
+			// }
+			paging = (
+				<div class={ pagingClass }>
+					<span style={ prevStyle } onClick={ this.pagePrevClick.bind(this) }>上一页</span>
+					<span>{ this.state.pageIndex } / { size }</span>
+					<span style={ nextStyle } onClick={ e => this.pageNextClick.bind(this, e, size)() }>下一页</span>
+				</div>
+			)
+			
+		}
+		
+		arr = arr.map(item => {
 			
 			const selected = !!sels.find(sel => sel[value] == item[value])
-			const iconStyle = { color: selected ? theme.color : '' }
+			const iconStyle = { 
+				color: selected ? theme.color : '',
+				borderColor: theme.color,
+			}
 			// const className = 'xm-option' + (item.disabled ? ' disabled' : '');
 			const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : '')].join(' ');
 			
 			return (
 				<div class={className} value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
-					<div class="xm-option-icon" style={ { borderColor: theme.color, } }>
-						<i class="xm-iconfont xm-icon-duox" style={ iconStyle }></i>
-					</div>
+					<i class="xm-option-icon xm-iconfont xm-icon-duox" style={ iconStyle }></i>
 					<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
 				</div>
 			)
@@ -60,18 +202,16 @@ class General extends Component{
 			)
 		}
 		
-		const searchClass = ['xm-search', filterable ? '':'dis'].join(' ');
-		const search = (
-			<div class={ searchClass }>
-				<i class="xm-iconfont xm-icon-sousuo"></i>
-				<input type="text" class="xm-input xm-search-input" placeholder={ searchTips } value={ this.state.searchVal } onInput={ this.searchInput.bind(this) } onClick={ this.searchInputClick.bind(this) } />
-			</div>
-		);
-		
 		return (
+			<div onClick={ this.blockClick }> 
 				<div>
 					{ search }
-				<div>{ arr }</div>
+					<div style={ {maxHeight: config.height, overflow: 'auto'} }>{ arr }</div>
+					{ config.paging && paging }
+				</div>
+				{ this.state.loading && <div class="loading" >
+					<span class="loader"></span>
+				</div> }
 			</div>
 		)
 	}

src/index.ejs

@@ -8,12 +8,32 @@
 		<link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" as="script">
 	<% } %>
 	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 	<title>xm-select</title>
 </head>
 <body>
 	
 	<div id="demo1"></div>
 	
+	<script type="text/javascript">
+		setTimeout(() => {
+			var demo1 = xmSelect.render({
+				// 这里绑定css选择器
+				el: '#demo1', 
+				// 渲染的数据
+				data: ''.padEnd(11, ' ').split('').map((a, i) => ( {name: 'name' + i, value: i} )),
+				filterable: true,
+				remoteSearch: true,
+				remoteMethod: function(val, cb){
+					setTimeout(() =>  {
+						cb([{name: 'xxx' + val, value: 1}])
+					}, 2000);
+				},
+				paging: true,
+			})
+			demo1.opened()
+		}, 1000);
+	</script>
 	
 </body>
 </html>

src/style/index.less

@@ -13,6 +13,27 @@
 	to {transform: translate3d(0, 0, 0);opacity: 1}
 }
 
+@-webkit-keyframes loader {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@keyframes loader {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
 xm-select{
 	*{
 		margin: 0; 
@@ -69,27 +90,42 @@ xm-select{
 	}
 	
 	& > .xm-label{
-		padding: 0 10px;
-		height: 100%;
+		// padding: 0 30px 0 10px;
+		position: absolute;
+		top: 0;
+		bottom: 0px;
+		left: 10px;
+		right: 30px;
+		overflow: auto hidden;
+		
+		.scroll{
 			overflow-y: hidden;
 			
+			.label-content{
+				height: calc(100% - 20px);
+				display: flex;
+				align-items: baseline;
+				&:after{
+					content: '-';
+					opacity: 0;
+				}
+			}
+		}
+		
 		.xm-label-block{
-			display: inline-block;
+			display: flex;
 			position: relative;
 			padding: 0px 5px;
-			margin: 2px 5px 2px 0;
-			height: 22px;
-			line-height: 22px;
+			margin-right: 5px;
+			height: 26px;
+			line-height: 26px;
 			border-radius: 3px;
 			vertical-align: middle;
 			color: #FFF;
-			max-width: calc(100% - 20px);
 			
 			& > span{
-				display: inline-block;
+				display: flex;
 				color: #FFF;
-				text-overflow: ellipsis;
-				overflow: hidden;
 			}
 			
 			& > i{
@@ -97,9 +133,7 @@ xm-select{
 				margin-left: 8px;
 				font-size: 12px;
 				cursor: pointer;
-				line-height: 20px;
-				float: right;
-				margin-top: 2px;
+				display: flex;
 			}
 			
 			&.disabled{
@@ -120,8 +154,8 @@ xm-select{
 		z-index: 999;
 		width: 100%;
 		border: @border;
-		max-height: 300px;
-		overflow-y: auto;
+		// max-height: 300px;
+		// overflow-y: auto;
 		background-color: #fff;
 		border-radius: 2px;
 		box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
@@ -136,6 +170,8 @@ xm-select{
 		}
 		
 		.xm-option{
+			display: flex;
+			align-items: center;
 			position: relative;
 			padding: 0 10px;
 			cursor: pointer;
@@ -143,42 +179,34 @@ xm-select{
 			&:hover{
 				background-color: #f2f2f2;
 				
-				&>.xm-option-icon>i{
+				&>.xm-option-icon{
 					color: #f2f2f2;
 				}
 			}
 			
 			&-icon{
 				color: #FFF;
-				width: 18px;
-				height: 18px;
+				display: flex;
 				border: @border;
 				border-radius: 5px;
-				z-index: 2;
-				display: inline-block;
-				vertical-align: middle;
-				// position: absolute;
-				// top: 9px;
-				
-				& > i {
-					float: left;
+				&:before{
 					height: 18px;
-					line-height: 17px;
-					color: #FFF;
+					display: flex;
+					align-items: center;
+					margin-top: -1px;
+					margin-bottom: -1px;
 				}
 			}
 			
 			&-content{
-				display: inline-block;
+				display: flex;
 				position: relative;
-				padding: 0 15px;
+				padding-left: 15px;
 				overflow: hidden;
 				white-space: nowrap;
 				text-overflow: ellipsis;
 				color: #666;
-				line-height: 36px;
-				vertical-align: middle;
-				width: calc(100% - 18px);
+				width: 100%;
 			}
 		}
 		
@@ -191,7 +219,7 @@ xm-select{
 			cursor: no-drop;
 			&:hover{
 				background-color: #FFF;
-				&>.xm-option-icon>i{
+				&>.xm-option-icon{
 					color: #FFF !important;
 				}
 			}
@@ -202,7 +230,7 @@ xm-select{
 				color: @disabledColor !important;
 			}
 			
-			&.selected>.xm-option-icon>i{
+			&.selected>.xm-option-icon{
 				color: @disabledColor !important;
 			}
 		}
@@ -211,6 +239,7 @@ xm-select{
 			background-color: #FFF !important;
 			position: relative;
 			padding: 0 10px;
+			margin-bottom: 5px;
 			cursor: pointer;
 			
 			&>i{
@@ -224,6 +253,33 @@ xm-select{
 				cursor: text;
 			}
 		}
+		
+		.xm-paging{
+			padding: 0 10px;
+			display: flex;
+			
+			&>span:first-child{
+				border-radius: 2px 0 0 2px;
+			}
+			&>span:last-child{
+				border-radius: 0 2px 2px 0
+			}
+			
+			&>span{
+				display: flex;
+				flex: auto;
+				justify-content: center;
+				vertical-align: middle;
+				padding: 0 15px;
+				height: 28px;
+				line-height: 28px;
+				margin: 0 -1px 0 0;
+				background-color: #fff;
+				color: #333;
+				font-size: 12px;
+				border: 1px solid #e2e2e2;
+			}
+		}
 	}
 	
 	.xm-input{
@@ -246,4 +302,39 @@ xm-select{
 		display: none;
 	}
 	
+	.loading{
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(255,255,255,.6);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		
+		
+		
+		.loader{
+			border: .2em dotted currentcolor;
+			border-radius: 50%;
+			-webkit-animation: 1s loader linear infinite;
+			animation: 1s loader linear infinite;
+			
+			display: inline-block;
+			width: 1em;
+			height: 1em;
+			color: inherit;
+			vertical-align: middle;
+			pointer-events: none;
+		}
+	}
+	
+}
+
+xm-select[ua='win']{
+	.xm-option-icon{
+		margin-top: 0px;
+		margin-bottom: -2px;
+	}
 }