@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
224 lines (223 loc) • 8.76 kB
JavaScript
import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React, { useRef, useState, useCallback, useEffect, useMemo } from "react";
import classNames from "classnames";
/* empty css */
import { Search, Close, ArrowLeft, MaskClose } from "@nutui/icons-react-taro";
import { View, Input } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
import { u as usePropsValue } from "./use-props-value-DuhZMy4U.js";
import { useConfig } from "@nutui/nutui-react-taro";
const a = {
size: "",
classPrefix: "icon",
fontClassName: "iconfont",
color: "",
tag: "i",
onClick: (e) => {
},
className: ""
};
function $(e) {
return e === "" ? "" : Number.isNaN(Number(e)) ? String(e) : `${e}px`;
}
function n(e) {
const r = "search", {
size: i,
classPrefix: l,
color: f,
tag: m,
children: p,
className: N,
fontClassName: u,
style: d,
logValue: o,
onClick: s,
...k
} = {
...a,
...e
}, C = (h) => {
s && s(h);
}, t = {}, c = $(i);
return c && (t.fontSize = c), React.createElement(
m,
{
className: classNames(`${u} ${l}-${r} ${N || ""}`, { "auto-track": !!o }),
style: {
color: f,
...t,
...d
},
...k,
onClick: C,
"data-log-name": o
},
p
);
}
n.defaultProps = a;
n.displayName = "FiresoonMobileIcon-search";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { placeholder: "", shape: "square", disabled: false, maxLength: 9999, clearable: true, readOnly: false, autoFocus: false, backable: false, left: "", right: "", rightIn: "", leftIn: React.createElement(Search, null), tag: false });
const SearchBar$1 = (props) => {
const classPrefix = "nut-searchbar";
const { locale } = useConfig();
const { value: outerValue, defaultValue, style, placeholder, shape, className, disabled, maxLength, clearable, readOnly, autoFocus, backable, right, left, leftIn, rightIn, tag, searchRef, contentHeight = 32, onChange, onFocus, onBlur, onClear, onSearch, onInputClick, onItemClick } = Object.assign(Object.assign({}, defaultProps), props);
const innerSearchInputRef = useRef(null);
const searchInputRef = searchRef !== null && searchRef !== void 0 ? searchRef : innerSearchInputRef;
const [value, setValue] = usePropsValue({
value: outerValue,
defaultValue,
finalValue: ""
});
const [innerTag, setInnerTag] = useState(tag);
const forceFocus = useCallback(() => {
var _a;
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, []);
const handleInput = useCallback((event) => {
var _a;
const eventValue = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.value;
if (value === eventValue)
return;
onChange && onChange(eventValue, event);
setValue(eventValue);
eventValue === "" && forceFocus();
}, [onChange, setValue, forceFocus, value]);
const handleFocus = useCallback((event) => {
var _a;
onFocus && onFocus((_a = event.detail) === null || _a === void 0 ? void 0 : _a.value, event);
if (tag)
setInnerTag(false);
}, [onFocus]);
const [blurTimer, setBlurTimer] = useState(null);
const handleBlur = useCallback((event) => {
var _a, _b;
(_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
onBlur && onBlur((_b = event.detail) === null || _b === void 0 ? void 0 : _b.value, event);
if (tag) {
const timer = setTimeout(() => {
var _a2;
if (Taro.getEnv() === "WEB") {
setInnerTag(((_a2 = event.target) === null || _a2 === void 0 ? void 0 : _a2.value) ? tag : false);
} else {
setInnerTag(tag);
}
}, 200);
setBlurTimer(timer);
}
}, [onBlur, tag, value]);
useEffect(() => {
return () => {
if (blurTimer)
clearTimeout(blurTimer);
};
}, [blurTimer]);
const clearaVal = useCallback((event) => {
if (disabled || readOnly)
return;
setValue("");
forceFocus();
onChange && onChange("");
onClear && onClear(event);
}, [disabled, readOnly, onChange, onClear, setValue]);
const cls = useMemo(() => classNames(classPrefix, {
[`${classPrefix}-disabled`]: disabled,
[`${classPrefix}-focus`]: left || backable
}, className), [disabled, backable, left, className]);
useEffect(() => {
if (autoFocus) {
forceFocus();
}
if (tag && !innerTag) {
forceFocus();
}
}, [autoFocus, forceFocus, innerTag]);
const renderField = () => {
const inputCls = classNames(`${classPrefix}-input`);
return React.createElement(React.Fragment, null, Taro.getEnv() === "WEB" ? React.createElement(Input, { className: inputCls, ref: searchInputRef, style: Object.assign(Object.assign({}, style), { color: `${innerTag ? "transparent" : "#333"}` }), value, placeholder: placeholder || locale.placeholder, disabled: disabled || readOnly, maxlength: maxLength, focus: autoFocus, onInput: handleInput, onFocus: handleFocus, onBlur: handleBlur, onClick: onInputClick, onConfirm }) : React.createElement(Input, { className: inputCls, ref: searchInputRef, style: Object.assign(Object.assign({}, style), { color: `${innerTag ? "transparent" : "#333"}` }), value, placeholder: placeholder || locale.placeholder, disabled: disabled || readOnly, maxlength: maxLength, focus: autoFocus, onInput: handleInput, onFocus: handleFocus, onBlur: handleBlur, onClick: onInputClick, onConfirm }));
};
const renderValueByTags = useCallback(() => {
if (!innerTag)
return null;
if (!value) {
setTimeout(() => {
forceFocus();
}, 0);
return null;
}
const list = value.split(",");
if (!list)
return null;
return React.createElement(View, { className: "nut-searchbar-values" }, list.map((item, index) => React.createElement(
View,
{ key: `def-${index}`, className: "nut-searchbar-value", onClick: (e) => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e) },
item,
React.createElement(Close, null)
)));
}, [value, onItemClick, innerTag]);
const renderLeftIn = useCallback(() => {
if (!leftIn)
return null;
return React.createElement(View, { className: `${classPrefix}-leftin ${classPrefix}-icon` }, leftIn);
}, [leftIn]);
const renderLeft = useCallback(() => {
if (!backable && !left)
return null;
return React.createElement(View, { className: `${classPrefix}-left` }, backable ? React.createElement(ArrowLeft, null) : left);
}, [backable, left]);
const renderRightIn = useCallback(() => {
if (!rightIn)
return null;
return React.createElement(React.Fragment, null, React.isValidElement(rightIn) ? React.createElement(View, { className: `${classPrefix}-rightin ${classPrefix}-icon` }, rightIn) : React.createElement(View, { className: `${classPrefix}-rightin` }, rightIn));
}, [rightIn]);
const renderRight = useCallback(() => {
if (!right)
return null;
return React.createElement(View, { className: `${classPrefix}-right` }, right);
}, [right]);
const renderClear = useCallback(() => {
return React.createElement(
View,
{ className: `${classPrefix}-clear ${classPrefix}-icon`, style: {
visibility: `${!innerTag && value && clearable ? "visible" : "hidden"}`
}, onClick: clearaVal, "aria-label": "清除" },
React.createElement(MaskClose, null)
);
}, [value, clearable, clearaVal, innerTag]);
const onConfirm = () => {
onSearch && onSearch(value);
};
return React.createElement(
View,
{ className: cls, style },
renderLeft(),
React.createElement(
View,
{ className: classNames(`${classPrefix}-content`, {
[`${classPrefix}-round`]: shape === "round"
}), style: { height: `${contentHeight}px` } },
renderLeftIn(),
React.createElement(View, { className: "nut-searchbar-input-box" }, renderField()),
renderValueByTags(),
renderClear(),
renderRightIn()
),
renderRight()
);
};
SearchBar$1.displayName = "NutSearchBar";
const SearchBar = (props) => {
const { border = false, className, initialType = "default", onClick, placeholder } = props, rest = __rest(props, ["border", "className", "initialType", "onClick", "placeholder"]);
return React.createElement(
"div",
{ onClick },
React.createElement(SearchBar$1, Object.assign({ className: classNames("mj-searchbar", className, {
"mj-searchbar-border": !!border,
[`mj-searchbar-${initialType}`]: !!initialType
}), leftIn: React.createElement(n, null), placeholder }, rest))
);
};
export {
SearchBar as S
};