Files
growstuff/app/javascript/components/PlantingChip.jsx
T
Brenda WallaceandClaude Sonnet 5 eb18622b78 Make the crop chip the planting's menu, for annuals and perennials
Clicking a chip opens the planting's menu under it (view, edit, add
photo, record harvest, save seeds, mark as finished), in place of the
three dots on annual rows, so perennials get the same menu. A caret shows
the chip opens something. Someone who can't change the planting still gets
a plain link chip. The menu items are lowercase for every planting menu.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-22 17:42:26 +12:00

34 lines
1.2 KiB
React

import React from 'react';
import {selectPlantingAction} from '../plantingActions';
import ActionsMenu from './ActionsMenu';
import CropChip from './CropChip';
// A planting's crop chip, which is also its menu: click it for view, edit,
// harvest and the rest, the same for annuals and perennials. Someone who can't
// change the planting has no menu, so for them it stays a plain link to it.
export default function PlantingChip({planting, defaultIconUrl, highlighted, handlers}) {
const {id, url, crop, actions} = planting;
if (!actions || actions.length === 0) {
return <CropChip url={url} crop={crop} defaultIconUrl={defaultIconUrl} highlighted={highlighted} />;
}
return (
<ActionsMenu
id={`planting-${id}`}
actions={actions}
label={(
<>
<img className="crop-icon" src={crop.icon_url || defaultIconUrl} alt="" />
{crop.name}
</>
)}
ariaLabel={`Actions for ${crop.name}`}
className={`chip crop-chip chip-menu-toggle dropdown-toggle${highlighted ? ' planting-just-added' : ''}`}
menuClassName="dropdown-menu-start planting-menu"
onSelect={selectPlantingAction(planting, handlers)}
/>
);
}