@tarojsx/ui/dist/SearchBar.js

We reinvents the UI for Taro3+

import React, { useState, useCallback } from 'react';
import classNames from 'classnames';
import { Input, Text, View } from '@tarojs/components';
import '../style/SearchBar.scss';
export const SearchBar = (props) => {
    var _a, _b;
    const { className, style, value = '', placeholder = '搜索', fixed = false, focus = false, disabled = false, showActionButton = false, actionName = '搜索', inputType = 'text', onChange = () => { }, onFocus = () => { }, onBlur = () => { }, onConfirm = () => { }, onClear = () => { }, onActionClick = () => { }, } = props;
    const maxlength = (_b = (_a = props.maxlength) !== null && _a !== void 0 ? _a : props.maxLength) !== null && _b !== void 0 ? _b : 140;
    const [isFocus, setIsFocus] = useState(focus);
    const handleFocus = useCallback((e) => {
        setIsFocus(true);
        onFocus(e);
    }, [onFocus]);
    const handleBlur = useCallback((e) => {
        setIsFocus(false);
        onBlur(e);
    }, [onBlur]);
    const handleClear = useCallback((e) => {
        if (onClear) {
            onClear(e);
        }
        else {
            e.detail.value = '';
            onChange(e);
        }
    }, [onClear, onChange]);
    const fontSize = 14;
    const rootCls = classNames('at-search-bar', { 'at-search-bar--fixed': fixed }, className);
    const placeholderWrapStyle = {};
    const actionStyle = {};
    if (isFocus || (!isFocus && value)) {
        actionStyle.opacity = 1;
        actionStyle.marginRight = `0`;
        placeholderWrapStyle.flexGrow = 0;
    }
    else if (!isFocus && !value) {
        placeholderWrapStyle.flexGrow = 1;
        actionStyle.opacity = 0;
        actionStyle.marginRight = `-${(actionName.length + 1) * fontSize + fontSize / 2 + 10}px`;
    }
    if (showActionButton) {
        actionStyle.opacity = 1;
        actionStyle.marginRight = `0`;
    }
    const clearIconStyle = { display: 'flex' };
    const placeholderStyle = { visibility: 'hidden' };
    if (!value.length) {
        clearIconStyle.display = 'none';
        placeholderStyle.visibility = 'visible';
    }
    return (React.createElement(View, { className: rootCls, style: style },
        React.createElement(View, { className: "at-search-bar__input-cnt" },
            React.createElement(View, { className: "at-search-bar__placeholder-wrap", style: placeholderWrapStyle },
                React.createElement(Text, { className: "at-icon at-icon-search" }),
                React.createElement(Text, { className: "at-search-bar__placeholder", style: placeholderStyle }, isFocus ? '' : placeholder)),
            React.createElement(Input, { className: "at-search-bar__input", type: inputType, confirmType: "search", value: value, focus: isFocus, disabled: disabled, maxlength: maxlength, onInput: onChange, onFocus: handleFocus, onBlur: handleBlur, onConfirm: onConfirm }),
            React.createElement(View, { className: "at-search-bar__clear", style: clearIconStyle, onClick: handleClear },
                React.createElement(Text, { className: "at-icon at-icon-close-circle" }))),
        React.createElement(View, { className: "at-search-bar__action", style: actionStyle, onClick: (e) => {
                e.detail.value = value;
                onActionClick(e);
            } }, actionName)));
};
//# sourceMappingURL=SearchBar.js.map