react-base-guide/lib/components/autocomplete/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const input_1 = __importDefault(require("../input"));
const dropdown_menu_1 = __importDefault(require("../dropdown-menu"));
const add_custom_style_1 = require("../../utils/add-custom-style");
const dropdown_menu_keys_handler_1 = __importDefault(require("../../utils/dropdown-menu-keys-handler"));
const AutocompleteRoot = styled_components_1.default.div `
  position: relative;
  box-sizing: border-box;
  ${p => (0, add_custom_style_1.addCustomStyle)(p.$styled, "inline-block")}
`;
const AutoComplete = (props, ref) => {
    var _a;
    const [open, setOpen] = (0, react_1.useState)(false);
    const rows = (_a = props.rows) === null || _a === void 0 ? void 0 : _a.filter(row => { var _a, _b, _c; return ((_a = row === null || row === void 0 ? void 0 : row.value) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf((_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.toString()) === null || _c === void 0 ? void 0 : _c.toLowerCase())) > -1; });
    return (0, jsx_runtime_1.jsxs)(AutocompleteRoot, Object.assign({ "$styled": props.styled }, { children: [(0, jsx_runtime_1.jsx)(input_1.default, { styled: { display: "block", width: "100%" }, label: props.label, message: props.message, type: props.type, placeholder: props.placeholder, maxLength: props.maxLength, value: props.value, onChange: props.onChange, ref: ref, id: props.id, name: props.name, tabIndex: props.tabIndex, max: props.max, min: props.min, disabled: props.disabled, readOnly: props.readOnly, autoComplete: props.autoComplete, autoFocus: props.autoFocus, onClick: props.onClick, onMouseUp: props.onMouseUp, onMouseDown: props.onMouseDown, onKeyUp: (e) => (0, dropdown_menu_keys_handler_1.default)({ e, setOpen, rows }), onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, onFocus: () => setOpen(true), onBlur: e => { setOpen(false); props.onBlur && props.onBlur(e); }, error: props.error, warning: props.warning, success: props.success }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.default, { rows: rows, open: open, menuWidth: props.menuWidth || "100%", menuHeight: props.menuHeight, right: props.right, up: props.up })] }));
};
exports.default = (0, react_1.forwardRef)(AutoComplete);
//# sourceMappingURL=index.js.map