@activecollab/components
Version:
ActiveCollab Components
43 lines • 1.38 kB
JavaScript
import React, { useState, useCallback, useEffect } from "react";
import { StyledInputSubmenu, StyledInputSubmenuFooter, StyledInput } from "./Styles";
import { Button } from "../Button";
export const InputSubmenu = _ref => {
let {
value = "",
placeholder,
saveLabel,
clearLabel = "Clear",
onSave,
onClear
} = _ref;
const [inputValue, setInputValue] = useState(value);
useEffect(() => {
setInputValue(value);
}, [value]);
const handleChange = useCallback(event => {
setInputValue(event.target.value);
}, []);
const handleSave = useCallback(() => {
onSave(inputValue);
}, [inputValue, onSave]);
const handleKeyDown = useCallback(event => {
if (event.key === "Enter") {
onSave(inputValue);
}
}, [inputValue, onSave]);
return /*#__PURE__*/React.createElement(StyledInputSubmenu, null, /*#__PURE__*/React.createElement(StyledInput, {
value: inputValue,
onChange: handleChange,
onKeyDown: handleKeyDown,
placeholder: placeholder
}), /*#__PURE__*/React.createElement(StyledInputSubmenuFooter, null, /*#__PURE__*/React.createElement(Button, {
variant: "primary",
size: "small",
onClick: handleSave
}, saveLabel), /*#__PURE__*/React.createElement(Button, {
variant: "text gray",
size: "small",
onClick: onClear
}, clearLabel)));
};
//# sourceMappingURL=InputSubmenu.js.map