Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 27x 27x | import React, { useState, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import Typedown from '../Typedown';
import { useTypedownData } from '../hooks/typedownHooks';
const QueryTypedown = ({
dataFormatter = d => d,
path,
pathMutator,
...rest
}) => {
const [callPath, setCallPath] = useState(pathMutator(null, path));
const rawData = useTypedownData(path, callPath);
const data = useMemo(() => dataFormatter(rawData), [dataFormatter, rawData]);
const [userQuery, setUserQuery] = useState('');
const onType = e => {
setUserQuery(e.target.value);
};
useEffect(() => {
setCallPath(pathMutator(userQuery, path));
}, [path, pathMutator, userQuery]);
return (
<Typedown
{...rest}
additionalInfo={{
rawData // Pass raw query response into additionalInfo
}}
dataOptions={data}
onType={onType}
/>
);
};
QueryTypedown.propTypes = {
dataFormatter: PropTypes.func,
path: PropTypes.string,
pathMutator: PropTypes.func,
};
export default QueryTypedown;
|