@activecollab/components
Version:
ActiveCollab Components
45 lines • 1.63 kB
JavaScript
import React, { useState, useCallback, useEffect } from "react";
import { StyledInputSubmenu, StyledInputSubmenuFooter, StyledInput } from "./Styles";
import { Button } from "../Button";
export const InputSubmenu = _ref => {
let _ref$value = _ref.value,
value = _ref$value === void 0 ? "" : _ref$value,
placeholder = _ref.placeholder,
saveLabel = _ref.saveLabel,
_ref$clearLabel = _ref.clearLabel,
clearLabel = _ref$clearLabel === void 0 ? "Clear" : _ref$clearLabel,
onSave = _ref.onSave,
onClear = _ref.onClear;
const _useState = useState(value),
inputValue = _useState[0],
setInputValue = _useState[1];
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