afa73e06e3
* Migrate to esbuild WIP * Add exclude * Remove redundant file * Move file * Move to javascript_include_tag * Lint fix * WIP * WIP * Add watch mode to esbuild WIP * Get jest working * Remove babel * Revert "Remove babel" This reverts commit 6da35260aa19d6f97f586deb66c0ecaf48433b73. * More WIP * Got image to load * WIP * Resolve audit * Lint fix * WIP * Fix jest spec * [CI] Remove asset-restore for test build stage * Production compliant * Temp disable sourcemap * Update glob * Add esbuild helper to stimulus * Import fragment * Temp disable coverage to see failing tests * Fix broken spec * Address lint * Set proper es6 target * Use esbuild for everything * wait what * Revert "Set proper es6 target" This reverts commit 98f5278093421baa8ffe2ca580845b01c1a1eadf. * Revert "Use esbuild for everything" This reverts commit 0ac46738f07ffcb6af095ccb1ffa5e439b7fefa3. * Replace uglifier with terser * New compiled assets version * Remvoe honeybadger-io/webpack * Remove cypress coverage checks for now * Update jsconfig.json * Update docker-compose * Remove public/packs-test from ci cache
71 lines
2 KiB
JavaScript
71 lines
2 KiB
JavaScript
import { Fragment, 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,
|
|
enableValidation = false,
|
|
valid = true,
|
|
buttonVariant = 'default',
|
|
className = 'c-autocomplete--multi__selected',
|
|
onEdit,
|
|
onDeselect,
|
|
}) => {
|
|
const conditionalAttributes = () => {
|
|
if (enableValidation) {
|
|
return { 'aria-describedby': `invalid-item-${name}` };
|
|
}
|
|
return {};
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{enableValidation && (
|
|
<div
|
|
id={`invalid-item-${name}`}
|
|
className="screen-reader-only"
|
|
aria-live="assertive"
|
|
>
|
|
{!valid ? 'Invalid entry' : ''}
|
|
</div>
|
|
)}
|
|
<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}`}
|
|
{...conditionalAttributes()}
|
|
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,
|
|
};
|