@brizy/ui
Version:
React elements in Brizy style
28 lines (27 loc) • 1.56 kB
JavaScript
import React, { useCallback, useEffect, useRef } from "react";
import { classNames } from "../classNamesFn";
import AntInputSearch from "antd/lib/input/Search";
import { Icon } from "../Icon";
import { CmsClose } from "../icons";
import { Button } from "../Button";
import { WrapperForDisabled } from "./WrapperForDisabled";
export const Search = ({ placeholder, size = "middle", disabled, loading, value, theme, focused, onChange, onSearch, onBlur, onFocus, onClear, border = "field", }) => {
const input = useRef(null);
const _onChange = useCallback((e) => {
onChange(e.target.value);
}, [onChange]);
const className = classNames()("input-form", {
"input-search--disabled": disabled,
[`input-search--${size}`]: size,
[`input-search--${theme}`]: theme,
[`input-search--border--${border}`]: border,
});
useEffect(() => {
if (focused && input.current && document.activeElement !== input.current.input)
input.current.focus();
}, [focused, input]);
return (React.createElement(WrapperForDisabled, { disabled: disabled },
React.createElement(AntInputSearch, { ref: input, className: className, value: value, placeholder: placeholder, disabled: disabled, loading: loading, onChange: _onChange, onSearch: onSearch, onBlur: onBlur, onFocus: onFocus, prefix: onClear &&
value && (React.createElement(Button, { type: "dashed", onClick: onClear },
React.createElement(Icon, { source: CmsClose, size: "10px", color: "gray-mid" }))) })));
};