6fe9d7d7a6
* Basics might be working? * Stop propagating button clicks in autocomplete pills * Better blank slate * Better location to stop propagation * Remove author_id from org co-authors * Move UserStore and try testing it * Remove extraneous comments * OH... that's what that does! * Very basic testing * Re-organize javascripts * Rename & re-org for testing * Cleanup * More tests * Remove unnecessary nesting * Coninuing to try to bump coverage * Include /packs/ in code coverage metric * Try tweaking jest coverage more? We probably can't collect coverage from all of packs/* (because coverage is too low) but maybe we can try to opt-in for newer areas as we go? * Relocate JS tests, for build & coverage * User ID exception on search, not fetch * Remove commented-out console.log --------- Co-authored-by: Mac Siri <krairit.siri@gmail.com>
49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { MultiSelectAutocomplete } from '@crayons/MultiSelectAutocomplete/MultiSelectAutocomplete';
|
|
|
|
/**
|
|
* UsernameInput — produces a field that can autocomplete usernames
|
|
*
|
|
* @param {Function} fetchSuggestions Callback to sync selections to article form state
|
|
* @param {string} defaultValue Comma separated list of any currently user IDs
|
|
*/
|
|
export const UsernameInput = ({
|
|
fetchSuggestions,
|
|
defaultValue,
|
|
inputId,
|
|
labelText,
|
|
placeholder,
|
|
maxSelections,
|
|
handleSelectionsChanged,
|
|
}) => {
|
|
const onSelectionsChanged = function (selections) {
|
|
const ids = selections.map((item) => item.id).join(', ');
|
|
handleSelectionsChanged?.(ids);
|
|
};
|
|
|
|
return (
|
|
<MultiSelectAutocomplete
|
|
allowUserDefinedSelections={false}
|
|
showLabel={false}
|
|
border={true}
|
|
inputId={inputId}
|
|
labelText={labelText}
|
|
placeholder={placeholder}
|
|
maxSelections={maxSelections}
|
|
defaultValue={defaultValue}
|
|
fetchSuggestions={fetchSuggestions}
|
|
onSelectionsChanged={onSelectionsChanged}
|
|
/>
|
|
);
|
|
};
|
|
|
|
UsernameInput.propTypes = {
|
|
fetchSuggestions: PropTypes.func.isRequired,
|
|
defaultValue: PropTypes.string,
|
|
inputId: PropTypes.string,
|
|
labelText: PropTypes.string,
|
|
placeholder: PropTypes.string,
|
|
maxSelections: PropTypes.string,
|
|
handleSelectionsChanged: PropTypes.func.isRequired,
|
|
};
|