/**
* Create by lutn on 2018-05-04
* 选项下拉菜单选择
例子:
<TabSelectComponent data={data}
selectStyle={{
height:40,
backgroundColor:'#fff',
color:'#f00',
currentColor:'#117cf1',
fontSize:14,
}}
OK={this._OKfn}
/>
样式和默认值说明:
(1)头部样式
selectStyle:{
height = 40;//高度
backgroundColor='#fff';//背景颜色
textColor = '#666';//字体颜色
textTempColor = '#666';
currentColor = '#117cf1';//当前 激活颜色
fontSize = 12;//字体大小
borderColor = '#E5E5E5';//边框颜色
borderBottomWidth = 1;//边框宽度
inLineColor = '#E5E5E5';//分隔线颜色
inLineWidth = 1;//分隔线宽度
triangleHeight = 7;//三角形高度
triangleWidth =12; //三角形宽度
}
(2)选项样式
optionStyle{
}
(3)按钮样式
buttonStyle{
height = 50;//高度
backgroundColor = '#fff'; //背景颜色
leftButtonBC = '#f5f5f5'; //左边按钮背景颜色
rightButtonBC = '#117cf1'; //右边按钮背景颜色
fontSize = 18; //字体大小
leftTextColor = '#666';//左边按钮字体颜色
rightTextColor = '#666';//右边按钮字体颜色
buttonWidth = 150; //按钮宽度
borderRadius = 5; //圆角
buttonPaddingUpDown = 5; //上下padding
}
数据例子:json格式
data={
"title": "区域",
"type":"2",
"name":"区域",
"selectRoot":
[
{"key": "000","value": "全国","selected": false, "child":[{"key": "0011","value": "全部","selected": false}]},
{"key": "001","value": "北京","selected": false, "child":[
{"key": "0011","value": "全部","selected": false},
{"key": "0011","value": "市区","selected": false},
{"key": "0011","value": "丰台","selected": false},
{"key": "0011","value": "大兴","selected": true},
{"key": "0011","value": "密云","selected": false},
{"key": "0011","value": "平谷","selected": false}
]},
{"key": "001","value": "天津","selected": false, "child":[
{"key": "0011","value": "全部","selected": false},
{"key": "0011","value": "和平区","selected": false},
{"key": "0011","value": "城厢区","selected": false},
{"key": "0011","value": "河北区","selected": true},
{"key": "0011","value": "河东区","selected": false},
{"key": "0011","value": "红桥区","selected": false}
]},
{"key": "001","value": "河北","selected": false, "child":[
{"key": "0011","value": "全部","selected": false},
{"key": "0011","value": "石家庄","selected": false},
{"key": "0011","value": "唐山","selected": false},
{"key": "0011","value": "秦皇岛","selected": true},
{"key": "0011","value": "邯郸","selected": false},
{"key": "0011","value": "邢台","selected": false}
]},
{"key": "001","value": "山西","selected": true, "child":[
{"key": "0011","value": "全部","selected": false},
{"key": "0011","value": "大同","selected": false},
{"key": "0011","value": "朔州","selected": false},
{"key": "0011","value": "忻州","selected": true},
{"key": "0011","value": "阳泉","selected": false},
{"key": "0011","value": "吕梁","selected": false}
]},
{"key": "001","value": "内蒙古","selected": false,"child":[
{"key": "0011","value": "全部","selected": false},
{"key": "0011","value": "包头","selected": false},
{"key": "0011","value": "乌海","selected": false},
{"key": "0011","value": "赤峰","selected": true},
{"key": "0011","value": "呼伦贝尔","selected": false},
{"key": "0011","value": "乌兰察布","selected": false}
]}
]
}]
*/
'use strict';
import
React, {
Component
}
from
'react';
import {
NativeModules,
StyleSheet,
Dimensions,
View,
Text,
Image,
ListView,
TouchableWithoutFeedback,
TouchableOpacity,
Modal,
ActivityIndicator,
Button,
ScrollView,
PixelRatio,
ART
}
from
'react-native';
import
PropTypes
from
'prop-types';
//类型检验组件
const {
Surface,
Shape,
Path,
Group} =
ART;
//图像
const {
width,
height} =
Dimensions.
get(
'window');
//手机屏幕宽高
const
LINE =
1 /
PixelRatio.
get();
export
default
class
TabSelectComponent
extends
Component {
/**
* 构造函数
*/
constructor(
props) {
super(
props);
this.
_buttonFrame =
null;
//按钮画布位置信息
this.
state = {
visible:
false,
//是否显示背景
index:
null,
//当前需要显示的下拉选项
data:
this.
props.
data,
//数据
showDropdown:
false,
//是否显示下拉菜单
};
}
/**props默认*/
static
defaultProps = {
data:
null,
//数据
selectStyle:
null,
//头部样式
optionStyle:
null,
//选项样式
buttonStyle:
null,
//按钮样式
OK:
null,
//确定按钮
seletIcon:
null,
//选中打钩图标
}
/**
* props类型验证
*/
static
propTypes = {
data:PropTypes.
array,
selectStyle:PropTypes.
oneOfType([
PropTypes.
number,
PropTypes.
object,
PropTypes.
array]),
//头部样式
optionStyle:PropTypes.
oneOfType([
PropTypes.
number,
PropTypes.
object,
PropTypes.
array]),
//选项样式
buttonStyle:PropTypes.
oneOfType([
PropTypes.
number,
PropTypes.
object,
PropTypes.
array]),
//按钮样式
OK:PropTypes.
func,
//确定按钮
seletIcon:PropTypes.
node,
//选中打钩图标
}
render() {
return (
<
View
>
{this.
canvas()
}
</
View
>
);
}
/**
* 画布
*/
canvas = ()
=>{
let
all =
new
Array();
let
header =
this.
selectHeader(
this.
state.
index);
let
haderYes = (
<
View
></
View
>);
if(!
this.
state.
visible){
all.
push(
header);
}
else{
haderYes =
header;
}
if(
this.
_buttonFrame &&
this.
state.
index !=
null){
let
frameStyle =
this.
_calcPosition();
//计算位置
all.
push(
<
Modal
key=
{
"$modal"
}
animationType=
{
'fade'
}
transparent=
{true}
visible=
{this.
state.
visible
}
onRequestClose=
{()
=>{
this.
_onRequestClose(
false)}
}
>
<
TouchableWithoutFeedback
style=
{{
backgroundColor:
'#fff'}
}
onPress=
{()
=>{
this.
hide()}
}
>
<
View
style=
{[{
backgroundColor:
'rgba(0, 0, 0, 0.5)',
flex:
1,}]
}
>
<
View
style=
{{
backgroundColor:
'#fff'}
}
>
{
haderYes
}
</
View
>
<
View
style=
{[
frameStyle,]
}
>
{this.
_chooseContent(
this.
state.
index)
}
</
View
>
</
View
>
</
TouchableWithoutFeedback
>
</
Modal
>
);
}
return
all;
}
/**
* 下拉头部
*
@memberof
Select
*/
selectHeader = (
index)
=>{
let
styles =
this.
_getSelectStyle();
//获取头部样式
if(
this.
state.
data !=
null){
let
header =
new
Array();
let
len =
this.
state.
data.
length;
let
dividingLine =
0;
if(
len >
4 ){
dividingLine =
3;
}
else
if(
0 <
len <=
4 ){
dividingLine =
len -
1;
}
let
selected =
false;
for(
let
i =
0;
i <
dividingLine +
1 ;
i++ ){
if(
index !=
null &&
index ==
i){
styles.
textColor =
styles.
currentColor;
selected =
false;
}
else{
selected =
true;
styles.
textColor =
styles.
textTempColor;
}
header.
push(
<
View
key=
{
i
}
style=
{[{
flex:
1,
height:styles.
height,}]
}
>
<
TouchableOpacity
ref=
{
button
=>
this.
_button =
button
}
onPress=
{()
=>this.
chooseButton(
true,
i)
}
>
<
View
style=
{[{
height:styles.
height,
alignItems:
'center',
justifyContent:
'center',}]
}
>
<
View
style=
{[{
height:styles.
height-
20,
alignItems:
'center',
justifyContent:
'center',
flexDirection:
'row',
}]
}
>
<
Text
style=
{[{
textAlign:
'center',
color:styles.
textColor,
fontSize:styles.
fontSize}]
}
>
{
len >
4 ?
i <
3 ?
this.
state.
data[
i].
title:
'更多'
:
this.
state.
data[
i].
title
}
</
Text
>
<
Triangle
color=
{
styles.
textColor
}
selected=
{
selected
}
width=
{
styles.
triangleWidth
}
height=
{
styles.
triangleHeight
}
/>
</
View
>
</
View
>
</
TouchableOpacity
>
</
View
>
);
if(
i !=
dividingLine){
header.
push(
<
View
key=
{
i+
'c'
}
style=
{{
height:
30,
borderRightColor:styles.
inLineColor,
borderRightWidth:styles.
inLineWidth,}
}
></
View
>);
}
}
return(
<
View
key=
{
"$header"
}
>
<
View
style=
{[{
flexDirection:
'row',
height:styles.
height,
backgroundColor:styles.
backgroundColor,
borderColor:styles.
borderColor,
borderBottomWidth:styles.
borderWidth,
borderTopWidth:styles.
borderWidth,
alignItems:
'center',
justifyContent:
'center',
}]
}
>
{
header
}
</
View
>
</
View
>);
}
}
/**
*
* 选择显示下拉内容
*
@param
{any}
index
tab标签
*
@returns
*
@memberof
Select
*/
_chooseContent(
tabIndex){
let
tab =
this.
state.
data[
tabIndex];
//取到当前tab
if(
tabIndex !=
null && (
tab !=
null &&
tab !=
undefined) &&
this.
state.
showDropdown){
let
allContents =
new
Array();
let
contents =
new
Array();
if(
this.
state.
data !=
null ){
if(
tabIndex ==
3){
if(
this.
state.
data.
length >
4){
for(
let
i =
tabIndex;
i <
this.
state.
data.
length;
i++ ){
contents.
push(
this.
_blockSelect(
i));
}
}
else{
contents =
this.
_chooseTab(
tabIndex);
}
}
else{
contents =
this.
_chooseTab(
tabIndex);
}
}
allContents.
push(
<
View
key=
"$selectScrollView001"
>
<
ScrollView
>
{
contents
}
</
ScrollView
>
</
View
>
);
allContents.
push(
this.
_findButton());
/** 按钮 */
return
allContents;
}
return (
<
View
></
View
>);
}
/**
* 选择tab显示内容
*
@param
{*}
index
*/
_chooseTab(
tabIndex){
let
option =
new
Array();
switch(
this.
state.
data[
tabIndex].
type){
//显示模式选择
case
"0" :
//简单下拉
option.
push(
this.
_defaultSelect(
tabIndex));
break;
case
"1" :
//块式下拉
option.
push(
this.
_blockSelect(
tabIndex)
);
break;
case
"2" :
//二级下拉
option.
push(
this.
_secondSelect(
tabIndex)
);
break;
default:
option.
push(
this.
_defaultSelect(
tabIndex));;
}
return
option;
}
/**
* 默认的列表 基本下拉列表
*
@param
index
tab下标
*
@memberof
Select
*/
_defaultSelect(
tabIndex){
let
styles =
this.
_getOptionStyle();
//获取选项样式
let
list =
this.
state.
data[
tabIndex].
selectRoot;
//取到当前tab
let
option =
new
Array();
let
textColor =
'#666';
for(
let
i =
0;
i <
list.
length;
i++ ){
if(
list[
i].
selected ){
textColor =
'#117cf1';
}
else{
textColor =
'#666';
}
option.
push(
<
TouchableOpacity
key=
{
'op$'+
i
}
activeOpacity=
{
1
}
onPress=
{()
=>this.
selected(
tabIndex,
i,
null)
}
>
<
View
style=
{{
backgroundColor:
'#fff'}
}
>
<
View
style=
{{
flexDirection:
'row',
height:styles.
lineHeight,
alignItems:
'center',
borderBottomWidth:
1,
borderColor:
'#f5f5f5'}
}
>
<
View
style=
{{
flex:
0.7,}
}
>
<
Text
style=
{{
marginLeft:
14,
fontSize:styles.
fontSize,
color:textColor}
}
>
{
list[
i].
value
}
</
Text
>
</
View
>
<
View
style=
{{
flex:
0.3,
flexDirection:
'row',
justifyContent:
'flex-end',
marginRight:
14,}
}
>
{
list[
i].
selected ?
<
View
>
{
this.
props.
seletIcon ?
<
Image
source=
{this.
props.
seletIcon
}
style=
{[{
height:
14,
width:
20,
}]
}
/>
:
<
CheckSelected
color=
{
textColor
}
/>
}
</
View
>
:
<
View
></
View
>
}
</
View
>
</
View
>
</
View
>
</
TouchableOpacity
>
);
}
return
option;
}
/**
*
* 块式下拉列表
*
@param
{any}
tabIndex
tab下标
*
@returns
*
@memberof
Select
*/
_blockSelect(
tabIndex){
let
styles =
this.
_getOptionStyle();
//获取选项样式
let
tab =
this.
state.
data[
tabIndex];
//取到当前tab
let
list =
this.
state.
data[
tabIndex].
selectRoot;
//取到当前tab
let
contents =
new
Array();
let
option =
new
Array();
let
textColor =
'#fff';
for(
let
i =
0;
i <
list.
length;
i++ ){
if(
list[
i].
selected ){
textColor =
'#117cf1';
}
else{
textColor =
'#fff';
}
option.
push(
<
TouchableOpacity
key=
{
'op$'+
i
}
activeOpacity=
{
1
}
onPress=
{()
=>this.
selected(
tabIndex,
i,
null)
}
>
<
View
style=
{[{
height:styles.
lineHeight,
width:
90,
backgroundColor:textColor,
marginRight:
15,
justifyContent:
'center',
alignItems:
'center',
borderRadius:
5,
marginBottom:
10,}]
}
>
<
Text
style=
{[{
fontSize:styles.
fontSize,}]
}
>
{
list[
i].
value
}
</
Text
>
</
View
>
</
TouchableOpacity
>
);
}
contents.
push(
<
View
key=
{
'op$111'
}
style=
{{
backgroundColor:
'#fff',
paddingBottom:
20,
borderBottomWidth:
1,
borderColor:
'#f5f5f5'}
}
>
<
View
style=
{{
marginLeft:
14,
marginRight:
14,}
}
>
<
View
style=
{{
marginTop:
20,
marginBottom:
20,}
}
>
<
Text
style=
{[{
fontSize:styles.
fontSize,}]
}
>
{
tab.
name
}
</
Text
>
</
View
>
<
View
style=
{[{
flexDirection:
'row',
flexWrap:
'wrap',}]
}
>
{
option
}
</
View
>
</
View
>
</
View
>
);
return
contents;
}
/**
* 二级下拉列表
*
@param
{any}
tabIndex
tab下标
*
@memberof
Select
*/
_secondSelect(
tabIndex){
let
styles =
this.
_getOptionStyle();
//获取选项样式
let
tab =
this.
state.
data[
tabIndex];
//取到当前tab
let
list =
this.
state.
data[
tabIndex].
selectRoot;
//取到当前根列表
let
contents =
new
Array();
//内容
let
textColor =
'#fff';
//字体颜色
let
optionBc =
'#f5f5f5';
//选项背景
let
option =
new
Array();
//一级列表
let
option2 =
new
Array();
//二级列表
for(
let
i =
0;
i <
list.
length;
i++ ){
if(
list[
i].
selected ){
textColor =
'#117cf1';
optionBc =
'#fff';
let
optionList =
list[
i].
child;
if(
optionList !=
null &&
optionList !=
undefined){
for(
let
j =
0;
j <
optionList.
length;
j++ ){
option2.
push(
<
TouchableOpacity
key=
{
'op2$'+
j
}
activeOpacity=
{
1
}
onPress=
{()
=>this.
selected(
tabIndex,
i,
j)
}
>
<
View
style=
{{
backgroundColor:
'#fff',
flexDirection:
'row',
height:styles.
lineHeight,
alignItems:
'center',}
}
>
<
View
style=
{{
flex:
0.7}
}
>
<
Text
style=
{[{
marginLeft:
20,
color:styles.
textColor}]
}
>
{
optionList[
j].
value
}
</
Text
>
</
View
>
<
View
style=
{{
flex:
0.3,
flexDirection:
'row',
justifyContent:
'flex-end',
marginRight:
14,}
}
>
{
optionList[
j].
selected ?
<
View
>
{
this.
props.
seletIcon ?
<
Image
source=
{this.
props.
seletIcon
}
style=
{[{
height:
14,
width:
20,
}]
}
/>
:
<
CheckSelected
color=
{
textColor
}
/>
}
</
View
>
:
<
View
></
View
>
}
</
View
>
</
View
>
</
TouchableOpacity
>
);
}
}
}
else{
textColor =
'#fff';
optionBc =
'#f5f5f5';
}
option.
push(
<
TouchableOpacity
key=
{
'op$'+
i
}
activeOpacity=
{
1
}
onPress=
{()
=>this.
selected(
tabIndex,
i,
null)
}
>
<
View
style=
{[{
flexDirection:
'row',
backgroundColor:optionBc,
height:styles.
lineHeight,
alignItems:
'center',}]
}
>
<
View
style=
{{
flexDirection:
'row',
justifyContent:
'flex-start',}
}
>
<
Text
style=
{{
width:
3,
height:styles.
lineHeight-
10,
backgroundColor:textColor,
marginLeft:
0,
color:styles.
textColor}
}
></
Text
>
</
View
>
<
View
style=
{[{
width:
107,
justifyContent:
'center',
alignItems:
'center',}]
}
>
<
Text
style=
{[{
fontSize:styles.
fontSize,
color:styles.
textColor}]
}
>
{
list[
i].
value
}
</
Text
>
</
View
>
</
View
>
</
TouchableOpacity
>
);
}
contents.
push(
<
View
key=
{
'op$222'
}
style=
{{
backgroundColor:
'#fff',
borderBottomWidth:
1,
borderColor:
'#f5f5f5',
flexDirection:
'row'}
}
>
<
View
style=
{[{
width:
110,
backgroundColor:
'#f5f5f5'}]
}
>
{
option
}
</
View
>
<
View
style=
{[{
width:width-
110,
backgroundColor:
'#fff'}]
}
>
{
option2
}
</
View
>
</
View
>
);
return
contents;
}
/**
* 确定(搜索)和重置按钮
*
@returns
View
*
@memberof
Select
*/
_findButton(){
let
styles =
this.
_getButtonStyle();
//获取样式
return(
<
View
key=
{
"bn$02"
}
style=
{{
justifyContent:
'center',
alignItems:
'center',}
}
>
<
View
style=
{{
flexDirection:
'row',
backgroundColor:styles.
backgroundColor,
height:styles.
height,
justifyContent:
'center',
alignItems:
'center'}
}
>
<
View
style=
{{
flex:
0.5,
alignItems:
'center'}
}
>
<
TouchableOpacity
style=
{{
backgroundColor:styles.
leftButtonBC,
justifyContent:
'center',
alignItems:
'center',
borderRadius:
styles.
borderRadius,
width:styles.
buttonWidth,
paddingTop:styles.
buttonPaddingUpDown,
paddingBottom:styles.
buttonPaddingUpDown,}
}
onPress=
{()
=> {
this.
_reset()}
}
>
<
Text
style=
{{
fontSize:styles.
fontSize,
color:styles.
leftTextColor }
}
>重置
</
Text
>
</
TouchableOpacity
>
</
View
>
<
View
style=
{{
flex:
0.5,
alignItems:
'center'}
}
>
<
TouchableOpacity
style=
{{
backgroundColor:styles.
rightButtonBC,
justifyContent:
'center',
alignItems:
'center',
borderRadius:
styles.
borderRadius,
width:styles.
buttonWidth,
paddingTop:styles.
buttonPaddingUpDown,
paddingBottom:styles.
buttonPaddingUpDown,}
}
onPress=
{()
=>{
this.
_OKFn()}
}
>
<
Text
style=
{{
fontSize:styles.
fontSize,
color:styles.
rightTextColor}
}
>确定
</
Text
>
</
TouchableOpacity
>
</
View
>
</
View
>
</
View
>
);
}
/**
* 确实按钮
*
@memberof
Select
*/
_OKFn(){
if(
this.
props.
OK !=
null){
this.
props.
OK(
this.
state.
data);
}
//关掉下拉
this.
setState({
showDropdown:
false,
visible:
false,
});
}
/**
*
*
@memberof
Select
*/
_reset(){
let
data =
this.
state.
data;
if(
data !=
null){
for(
let
i =
0;
i <
data.
length;
i++){
if(
data[
i].
selectRoot !=
null){
for(
let
j =
0;
j <
data[
i].
selectRoot.
length;
j++){
if(
data[
i].
selectRoot[
j].
selected){
data[
i].
selectRoot[
j].
selected =
false;
}
if(
data[
i].
selectRoot[
j].
child !=
null){
for(
let
k =
0;
k <
data[
i].
selectRoot[
j].
child.
length;
k++ ){
if(
data[
i].
selectRoot[
j].
child[
k].
selected){
data[
i].
selectRoot[
j].
child[
k].
selected =
false;
}
}
}
}
}
}
}
this.
setState({
data:
data,
});
}
/**
* 选择事件
*
@param
{any}
tabIndex
tab下标
*
@param
{any}
selectIndex
一级数组下标
*
@param
{any}
childIndex
二级数组下标
*/
selected = (
tabIndex,
selectIndex,
childIndex)
=> {
if(
childIndex ==
null ||
childIndex ==
undefined){
//一级列表
if(
this.
state.
data !=
null){
let
data =
this.
state.
data;
let
tab =
data[
tabIndex];
let
optionList =
tab.
selectRoot;
for(
let
i =
0;
i <
optionList.
length;
i++){
optionList[
i].
selected =
false;
}
optionList[
selectIndex].
selected =
true;
data[
tabIndex].
selectRoot =
optionList;
this.
setState({
data:
data,
});
}
}
else{
//二级列表
if(
this.
state.
data !=
null){
let
data =
this.
state.
data;
let
tab =
data[
tabIndex];
let
option1 =
tab.
selectRoot[
selectIndex];
let
option2 =
option1.
child[
childIndex];
let
selected =
option2.
selected;
if(
selected){
option2.
selected =
false;
}
else{
option2.
selected =
true;
}
data[
tabIndex].
selectRoot[
selectIndex].
child[
childIndex] =
option2;
this.
setState({
data:
data,
});
}
}
}
/**
* 获取头部样式
*
@memberof
TabSelectComponent
*/
_getSelectStyle(){
let
height =
40;
//高度
let
backgroundColor=
'#fff';
//背景颜色
let
textColor =
'#666';
//字体颜色
let
textTempColor =
'#666';
let
currentColor =
'#117cf1';
//当前 激活颜色
let
fontSize =
12;
//字体大小
let
borderColor =
'#E5E5E5';
//边框颜色
let
borderWidth =
1;
//边框宽度
let
inLineColor =
'#E5E5E5';
//分隔线颜色
let
inLineWidth =
1;
//分隔线宽度
let
triangleHeight =
7;
//三角形高度
let
triangleWidth =
12;
//三角形宽度
if(
this.
props.
selectStyle !=
null &&
this.
props.
selectStyle !=
undefined){
height =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
height) ?
40
:
StyleSheet.
flatten(
this.
props.
selectStyle).
height;
backgroundColor =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
backgroundColor)?
'#fff'
:
StyleSheet.
flatten(
this.
props.
selectStyle).
backgroundColor;
textTempColor =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
color)?
'#666'
:
StyleSheet.
flatten(
this.
props.
selectStyle).
color;
textColor =
textTempColor;
fontSize =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
fontSize)?
12
:
StyleSheet.
flatten(
this.
props.
selectStyle).
fontSize;
borderColor =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
borderColor)?
'#E5E5E5'
:
StyleSheet.
flatten(
this.
props.
selectStyle).
borderColor;
borderWidth =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
borderWidth)?
1
:
StyleSheet.
flatten(
this.
props.
selectStyle).
borderWidth;
inLineColor =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
inLineColor)?
'#E5E5E5'
:
StyleSheet.
flatten(
this.
props.
selectStyle).
inLineColor;
inLineWidth =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
inLineWidth)?
1
:
StyleSheet.
flatten(
this.
props.
selectStyle).
inLineWidth;
let
triangleHeight =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
triangleHeight)?
7
:
StyleSheet.
flatten(
this.
props.
selectStyle).
triangleHeight;
let
triangleWidth =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
triangleWidth)?
12
:
StyleSheet.
flatten(
this.
props.
selectStyle).
triangleWidth;
}
return {
"height"
:
height,
"backgroundColor"
:
backgroundColor,
"textColor"
:
textColor,
"textTempColor"
:
textTempColor,
"currentColor"
:
currentColor,
"fontSize"
:
fontSize,
"borderWidth"
:borderWidth,
"borderColor"
:
borderColor,
"inLineColor"
:
inLineColor,
"inLineWidth"
:
inLineWidth,
"triangleHeight"
:triangleHeight,
"triangleWidth"
:
triangleWidth
}
}
/**
* 获取下拉选项样式
*
@returns
*
@memberof
TabSelectComponent
*/
_getOptionStyle(){
let
lineHeight =
35;
//行高
let
fontSize =
14;
//字体
let
textColor =
'#666';
//字体颜色
let
titleColor =
'#666'
//标题颜色
if(
this.
props.
optionStyle !=
null &&
this.
props.
optionStyle !=
undefined){
lineHeight =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
lineHeight) ?
40
:
StyleSheet.
flatten(
this.
props.
selectStyle).
lineHeight;
fontSize =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
fontSize) ?
14
:
StyleSheet.
flatten(
this.
props.
selectStyle).
fontSize;
textColor =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
textColor) ?
'#666'
:
StyleSheet.
flatten(
this.
props.
selectStyle).
textColor;
titleColor =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
selectStyle).
titleColor) ?
'#666'
:
StyleSheet.
flatten(
this.
props.
selectStyle).
titleColor;
}
return {
"lineHeight"
:
lineHeight,
"fontSize"
:fontSize,
"textColor"
:textColor,
"titleColor"
:titleColor
} ;
}
/**
* 获取按钮样式
*
@memberof
TabSelectComponent
*/
_getButtonStyle(){
let
height =
50;
//高度
let
backgroundColor =
'#fff';
//背景颜色
let
leftButtonBC =
'#f5f5f5';
//左边按钮背景颜色
let
rightButtonBC =
'#117cf1';
//右边按钮背景颜色
let
fontSize =
18;
//字体大小
let
leftTextColor =
'#666';
//左边按钮字体颜色
let
rightTextColor =
'#666';
//右边按钮字体颜色
let
buttonWidth =
150;
//按钮宽度
let
borderRadius =
5;
//圆角
let
buttonPaddingUpDown =
5;
//上下padding
if(
this.
props.
buttonStyle !=
null &&
this.
props.
buttonStyle !=
undefined){
height =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
buttonStyle).
height) ?
50
:
StyleSheet.
flatten(
this.
props.
buttonStyle).
height;
backgroundColor =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
buttonStyle).
backgroundColor) ?
'#fff'
:
StyleSheet.
flatten(
this.
props.
buttonStyle).
backgroundColor;
leftButtonBC =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
buttonStyle).
leftButtonBC) ?
'#f5f5f5'
:
StyleSheet.
flatten(
this.
props.
buttonStyle).
leftButtonBC;
fontSize =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
buttonStyle).
fontSize) ?
18
:
StyleSheet.
flatten(
this.
props.
buttonStyle).
fontSize;
leftTextColor =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
buttonStyle).
leftTextColor) ?
'#666'
:
StyleSheet.
flatten(
this.
props.
buttonStyle).
leftTextColor;
rightTextColor =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
buttonStyle).
rightTextColor) ?
'#fff'
:
StyleSheet.
flatten(
this.
props.
buttonStyle).
rightTextColor;
buttonWidth =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
buttonStyle).
buttonWidth) ?
150
:
StyleSheet.
flatten(
this.
props.
buttonStyle).
buttonWidth;
buttonPaddingUpDown =
this.
_isEmpty(
StyleSheet.
flatten(
this.
props.
buttonStyle).
buttonPaddingUpDown) ?
5
:
StyleSheet.
flatten(
this.
props.
buttonStyle).
buttonPaddingUpDown;
}
return {
"height"
:height,
"backgroundColor"
:backgroundColor,
"leftButtonBC"
:leftButtonBC,
"rightButtonBC"
:rightButtonBC,
"fontSize"
:fontSize,
"leftTextColor"
:leftTextColor,
"rightTextColor"
:rightTextColor,
"buttonWidth"
:buttonWidth,
"borderRadius"
:borderRadius,
"buttonPaddingUpDown"
:buttonPaddingUpDown
};
}
/**
* 选择Tab事件
*
@param
visible
是否显示
*
@param
index
tab下标
*
@memberof
Select
*/
chooseButton = (
visible,
index)
=>{
this.
show(
index);
}
/**
* 显示下拉
*
@param
index
需要显示的下拉下标
*
@memberof
Select
*/
show = (
index)
=> {
//更新画布位置 并确定tab下标和是否显示
this.
_updatePosition(()
=> {
this.
setState({
visible:
true,
index:index,
showDropdown:
true,
});
});
}
/**隐藏下拉 */
hide = ()
=> {
this.
setState({
visible:
false });
}
/**
* 更新画布位置
*/
_updatePosition = (
callback)
=> {
if (
this.
_button &&
this.
_button.
measure) {
this.
_button.
measure((
fx,
fy,
width,
height,
px,
py)
=> {
this.
_buttonFrame = {
x:
px,
y:
py,
w:
width,
h:
height};
//下拉按钮的位置信息
console.
log(
"fx="+
fx +
"|fy="+
fy+
"|width="+
width+
"|height="+
height +
"|px="+
px +
"|py=" +
py);
callback &&
callback();
//设置显示
});
}
}
/**
* 计算画布位置
* return style={
height,top,left,width,right
}
*/
_calcPosition() {
var
style = {
top:
0,
//默认高度
height:height-
200,
//默认最高
}
return
style;
}
_isEmpty(
obj){
if(
obj !=
null &&
obj !=
undefined &&
obj !=
""){
return
false;
}
return
true;
};
}
/**
* 三角形图标
*
@class
Triangle
*
@extends
{React.Component}
*/
class
Triangle
extends
React.
Component {
/**
* 构造函数
*/
constructor(
props) {
super(
props);
}
/**props默认*/
static
defaultProps = {
selected:
false,
//是否选中
color:
'#e5e5e5',
//下三角填充颜色
width:
12,
//宽
height:
7,
//高
}
/**
* props类型验证
*/
static
propTypes = {
selected:PropTypes.
bool,
//是否选中
color:PropTypes.
string,
//下三角填充颜色
width:PropTypes.
number,
//宽
height:PropTypes.
number,
//高
}
render() {
let
path;
if (
this.
props.
selected) {
path =
new
Path()
.
moveTo(
this.
props.
width /
2,
0)
.
lineTo(
0,
this.
props.
height)
.
lineTo(
this.
props.
width,
this.
props.
height)
.
close();
}
else {
path =
new
Path()
.
moveTo(
0,
0)
.
lineTo(
this.
props.
width,
0)
.
lineTo(
this.
props.
width /
2,
this.
props.
height)
.
close();
}
return (
<
View
style=
{[{
marginLeft:
2}]
}
>
<
Surface
width=
{this.
props.
width
}
height=
{this.
props.
height
}
>
<
Shape
d=
{
path
}
stroke=
"#00000000"
fill=
{this.
props.
color
}
strokeWidth=
{
0
}
/>
</
Surface
>
</
View
>
)
}
}
/**
*
* 选中
*
@class
Cheack
*
@extends
{React.Component}
*/
class
CheckSelected
extends
React.
Component {
/**
* 构造函数
*/
constructor(
props) {
super(
props);
}
/**props默认*/
static
defaultProps = {
color:
'#117cf1',
//填充颜色
}
/**
* props类型验证
*/
static
propTypes = {
color:PropTypes.
string,
//填充颜色
}
render(){
return(
<
View
>
<
Surface
width=
{
18
}
height=
{
12
}
>
<
Group
scale=
{
0.03
}
>
<
Shape
fill=
{this.
props.
color
}
d=
{
`M494,52c-13-13-33-13-46,0L176,324L62,211c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10L494,99C507,86,507,65,494,52z`
}
/>
</
Group
>
</
Surface
>
</
View
>);
}
}
/**
* 样式
*/
const
styles =
StyleSheet.
create({
});