mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）
131 lines • 5.01 kB
JavaScript
import Nerv from "nervjs";
import { Button, Input, ScrollView, Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { BG_COLOR_LIST, TEXT_COLOR_LIST } from "../../lib/model";
import ClCard from "../card/index";
import ClSearchResult from "./searchResult/index";
import { classNames } from "../../lib/index";
import ClIcon from "../icon/index";
export default class ClSearchBar extends Taro.Component {
constructor() {
super(...arguments);
this.state = {
showSearch: false,
value: ""
};
}
onIconClick(index) {
this.props.onIconClick && this.props.onIconClick(index);
}
onSearch(e) {
e.stopPropagation();
this.props.onSearch && this.props.onSearch(this.state.value || "");
}
onFocus(e) {
this.props.onFocus && this.props.onFocus(this.state.value || "");
this.setState({
showSearch: true,
value: e.detail.value
});
}
onBlur(e) {
this.props.onBlur && this.props.onBlur(this.state.value || "");
this.setState({
showSearch: false,
value: e.detail.value
});
}
onInput(e) {
this.setState({
value: e.detail.value
});
this.props.onInput && this.props.onInput(e.detail.value);
}
static onPreventProp(e) {
e.stopPropagation();
}
render() {
const { bgColor, rightButtonColor, rightTextColor, leftIcons, shape, placeholder, clear, fix, className, style, searchType, showResult, result, showLoading, onScrollToLower, onScrollToUpper, onTouchResult } = this.props;
const { showSearch, value } = this.state;
const bgColorClassName = bgColor ? BG_COLOR_LIST[bgColor] : "";
const buttonColorClassName = rightButtonColor ? BG_COLOR_LIST[rightButtonColor] : "";
const textColorClassName = rightTextColor ? TEXT_COLOR_LIST[rightTextColor] : "";
const leftIconComponent = leftIcons ? leftIcons.map((item, index) => <View key={"key-" + index} className={`cu-avatar round cuIcon-${item}`} onClick={this.onIconClick.bind(this, index)} />) : "";
const searchComponent = <View className={`search-form ${shape}`}>
<Text className="cuIcon-search" />
<Input placeholder={placeholder} confirmType="search" type="text" onFocus={this.onFocus} onBlur={this.onBlur} focus={showSearch} adjustPosition autoFocus={this.props.autoFocus} value={value} onConfirm={this.onSearch.bind(this)} onInput={this.onInput.bind(this)} />
{clear && value ? <View onClick={e => {
const { onClear } = this.props;
e.stopPropagation();
this.setState({
value: ""
});
onClear && onClear();
}}>
<ClIcon iconName="close" size={32} style={{
display: "flex",
alignItems: "center"
}} />
</View> : ""}
</View>;
const buttonComponent = <View className="action" onClick={ClSearchBar.onPreventProp.bind(this)}>
<Button className={`cu-btn shadow-blur ${shape} ${buttonColorClassName} ${textColorClassName}`} onClick={this.onSearch.bind(this)}>
搜索
</Button>
</View>;
const textComponent = <View className="action" onClick={ClSearchBar.onPreventProp.bind(this)}>
<Text className={`${textColorClassName}`} onClick={this.onSearch.bind(this)}>
搜索
</Text>
</View>;
return <View style={fix ? { position: "fixed", top: "0", width: "100vw", zIndex: 10 } : ""}>
<View className={classNames(`cu-bar ${bgColorClassName}`, className)} style={Object.assign({ position: "relative" }, style)}>
{leftIconComponent}
{searchComponent}
{searchType === "text" ? textComponent : searchType === "none" ? "" : buttonComponent}
{showResult ? <View style={{
position: "absolute",
width: "100%",
zIndex: 11,
top: Taro.pxTransform(100)
}}>
{result && result.length || showLoading ? <ClCard shadow={false} bgColor={bgColor}>
<ScrollView scrollY style={{ maxHeight: "300px" }} onScrollToLower={() => {
onScrollToLower && onScrollToLower();
}} onScrollToUpper={() => {
onScrollToUpper && onScrollToUpper();
}}>
<ClSearchResult result={result} showLoading={showLoading} onTouchResult={index => {
onTouchResult && onTouchResult(index);
}} />
</ScrollView>
</ClCard> : ""}
</View> : ""}
</View>
</View>;
}
}
ClSearchBar.options = {
addGlobalClass: true
};
ClSearchBar.defaultProps = {
shape: "radius",
fix: false,
searchType: "button",
leftIcons: [],
bgColor: undefined,
rightButtonColor: "white",
rightTextColor: "black",
placeholder: "请搜索",
showLoading: false,
showResult: false,
result: [],
autoFocus: false,
clear: false,
onClear: () => {},
onTouchResult: () => {},
onScrollToUpper: () => {},
onScrollToLower: () => {},
onBlur: () => {},
onFocus: () => {}
};