ListItem.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. "use client";
  2. import * as React from 'react';
  3. import DeleteOutlined from "@ant-design/icons/es/icons/DeleteOutlined";
  4. import classNames from 'classnames';
  5. import Checkbox from '../checkbox';
  6. import { useLocale } from '../locale';
  7. import defaultLocale from '../locale/en_US';
  8. const ListItem = props => {
  9. const {
  10. renderedText,
  11. renderedEl,
  12. item,
  13. checked,
  14. disabled,
  15. prefixCls,
  16. onClick,
  17. onRemove,
  18. showRemove
  19. } = props;
  20. const className = classNames(`${prefixCls}-content-item`, {
  21. [`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
  22. [`${prefixCls}-content-item-checked`]: checked && !item.disabled
  23. });
  24. let title;
  25. if (typeof renderedText === 'string' || typeof renderedText === 'number') {
  26. title = String(renderedText);
  27. }
  28. const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);
  29. const liProps = {
  30. className,
  31. title
  32. };
  33. const labelNode = /*#__PURE__*/React.createElement("span", {
  34. className: `${prefixCls}-content-item-text`
  35. }, renderedEl);
  36. if (showRemove) {
  37. return /*#__PURE__*/React.createElement("li", Object.assign({}, liProps), labelNode, /*#__PURE__*/React.createElement("button", {
  38. type: "button",
  39. disabled: disabled || item.disabled,
  40. className: `${prefixCls}-content-item-remove`,
  41. "aria-label": contextLocale === null || contextLocale === void 0 ? void 0 : contextLocale.remove,
  42. onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item)
  43. }, /*#__PURE__*/React.createElement(DeleteOutlined, null)));
  44. }
  45. // Default click to select
  46. liProps.onClick = disabled || item.disabled ? undefined : event => onClick(item, event);
  47. return /*#__PURE__*/React.createElement("li", Object.assign({}, liProps), /*#__PURE__*/React.createElement(Checkbox, {
  48. className: `${prefixCls}-checkbox`,
  49. checked: checked,
  50. disabled: disabled || item.disabled
  51. }), labelNode);
  52. };
  53. export default /*#__PURE__*/React.memo(ListItem);