@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
101 lines • 4.84 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.useInputContext = exports.InputContextProvider = void 0;
const react_1 = __importStar(require("react"));
const create_context_1 = require("../../../util/create-context");
const hooks_1 = require("../../../util/hooks");
const useFormField_1 = require("../../useFormField");
const [InputContextProvider, useInputContext] = (0, create_context_1.createContext)({
name: "InputContext",
errorMessage: "useInputContext must be used within an InputContextProvider",
});
exports.useInputContext = useInputContext;
const InputProvider = ({ children, value: props }) => {
const { defaultValue = "", description, disabled, readOnly, error, errorId, id: externalId, value: externalValue, onChange: externalOnChange, onClear, shouldAutocomplete, size, } = props;
const formFieldProps = (0, useFormField_1.useFormField)({
description,
disabled,
readOnly,
error,
errorId,
id: externalId,
size,
}, "comboboxfield");
const inputRef = (0, react_1.useRef)(null);
const toggleOpenButtonRef = (0, react_1.useRef)(null);
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
const [hideCaret, setHideCaret] = (0, react_1.useState)(false);
const [anchorRef, setAnchorRef] = (0, react_1.useState)(null);
const value = (0, react_1.useMemo)(() => String(externalValue !== null && externalValue !== void 0 ? externalValue : internalValue), [externalValue, internalValue]);
const [searchTerm, setSearchTerm] = (0, react_1.useState)(value);
const onChange = (0, react_1.useCallback)((newValue) => {
externalValue !== null && externalValue !== void 0 ? externalValue : setInternalValue(newValue);
setSearchTerm(newValue);
externalOnChange === null || externalOnChange === void 0 ? void 0 : externalOnChange(newValue);
}, [externalValue, externalOnChange]);
const clearInput = (0, react_1.useCallback)((event) => {
onClear === null || onClear === void 0 ? void 0 : onClear(event);
externalOnChange === null || externalOnChange === void 0 ? void 0 : externalOnChange("");
setInternalValue("");
setSearchTerm("");
}, [externalOnChange, onClear]);
const focusInput = (0, react_1.useCallback)(() => {
var _a, _b;
(_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
}, []);
(0, hooks_1.useClientLayoutEffect)(() => {
var _a, _b;
if (shouldAutocomplete && inputRef && value !== searchTerm) {
(_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(_a, searchTerm.length, value.length);
}
}, [value, searchTerm, shouldAutocomplete]);
const contextValue = Object.assign(Object.assign({}, formFieldProps), { clearInput,
error,
focusInput,
inputRef,
value, setValue: setInternalValue, onChange,
searchTerm,
setSearchTerm,
shouldAutocomplete,
toggleOpenButtonRef,
hideCaret,
setHideCaret,
anchorRef,
setAnchorRef });
return (react_1.default.createElement(InputContextProvider, Object.assign({}, contextValue), children));
};
exports.InputContextProvider = InputProvider;
//# sourceMappingURL=Input.context.js.map