abeff25ec0
* refactor: use the DefaultSelectionTemplate to list out the items * refactor: rename function so that we map it to the deselect item event * feat: first pass of adding edit functionality * feat: update the name of the function from clearSelection to clearInput * feat: setup the edit state by ensuring that we set the editValue and the inputPosition and then use useEffect to monitor changes * chore: remove the old method in favour of a shared component * feat: set the order of the items * refactor: rename handleBlur function name to handleInputBlur * feat: ensure that the edit field gets resized according to its current input * feat: oops add inputSizerRef * feat: when an item is being edited we need to ensure that it gets set back into the correct position and that we clear the previous state * feat: handle the actual resizing fo the field on an input edit * feat: use a shared DefaultSelectionTemplate for both the multiautocomplete and the multiinput component * feat: make the defaultSelectionTemplate customizable based on the variant adn the classname * feat: pressing backspace will start editing a previous selection if there is one * feat: read out the selected items as its removed or edited * feat: pass the regex through as a prop * feat: move the functions around * feat: add screen-reader only class * Update app/javascript/crayons/MultiInput/__stories__/MultiInput.stories.jsx Co-authored-by: Julianna Tetreault <32834804+juliannatetreault@users.noreply.github.com> * Update app/javascript/crayons/MultiInput/MultiInput.jsx Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * feat: add the props to JSDoc Co-authored-by: Julianna Tetreault <32834804+juliannatetreault@users.noreply.github.com> Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
48 lines
1.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
import { h } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { Icon, ButtonNew as Button } from '@crayons';
|
|
import { Close } from '@images/x.svg';
|
|
|
|
/**
|
|
* Responsible for the layout of a selected item in the crayons autocomplete and multi input components
|
|
*
|
|
* @param {string} name The selected item name
|
|
* @param {string} buttonVariant Optional button variant
|
|
* @param {string} className Optional classname for selected item
|
|
* @param {Function} onEdit Callback for edit click on the name of the selected item
|
|
* @param {Function} onDeselect Callback for deselect click on the close icon
|
|
*/
|
|
export const DefaultSelectionTemplate = ({
|
|
name,
|
|
buttonVariant = 'default',
|
|
className = 'c-autocomplete--multi__selected',
|
|
onEdit,
|
|
onDeselect,
|
|
}) => (
|
|
<div role="group" aria-label={name} className="flex mr-1 mb-1 w-max">
|
|
<Button
|
|
variant={buttonVariant}
|
|
className={`${className} p-1 cursor-text`}
|
|
aria-label={`Edit ${name}`}
|
|
onClick={onEdit}
|
|
>
|
|
{name}
|
|
</Button>
|
|
<Button
|
|
variant={buttonVariant}
|
|
className={`${className} p-1`}
|
|
aria-label={`Remove ${name}`}
|
|
onClick={onDeselect}
|
|
>
|
|
<Icon src={Close} />
|
|
</Button>
|
|
</div>
|
|
);
|
|
|
|
DefaultSelectionTemplate.propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
buttonVariant: PropTypes.string,
|
|
className: PropTypes.string,
|
|
onEdit: PropTypes.func.isRequired,
|
|
onDeselect: PropTypes.func.isRequired,
|
|
};
|