ListItem.js 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import { createVNode as _createVNode } from "vue";
  2. import PropTypes from '../_util/vue-types';
  3. import classNames from '../_util/classNames';
  4. import DeleteOutlined from "@ant-design/icons-vue/es/icons/DeleteOutlined";
  5. import defaultLocale from '../locale/en_US';
  6. import Checkbox from '../checkbox';
  7. import TransButton from '../_util/transButton';
  8. import LocaleReceiver from '../locale-provider/LocaleReceiver';
  9. import { defineComponent } from 'vue';
  10. import { booleanType } from '../_util/type';
  11. function noop() {}
  12. export const transferListItemProps = {
  13. renderedText: PropTypes.any,
  14. renderedEl: PropTypes.any,
  15. item: PropTypes.any,
  16. checked: booleanType(),
  17. prefixCls: String,
  18. disabled: booleanType(),
  19. showRemove: booleanType(),
  20. onClick: Function,
  21. onRemove: Function
  22. };
  23. export default defineComponent({
  24. compatConfig: {
  25. MODE: 3
  26. },
  27. name: 'ListItem',
  28. inheritAttrs: false,
  29. props: transferListItemProps,
  30. emits: ['click', 'remove'],
  31. setup(props, _ref) {
  32. let {
  33. emit
  34. } = _ref;
  35. return () => {
  36. const {
  37. renderedText,
  38. renderedEl,
  39. item,
  40. checked,
  41. disabled,
  42. prefixCls,
  43. showRemove
  44. } = props;
  45. const className = classNames({
  46. [`${prefixCls}-content-item`]: true,
  47. [`${prefixCls}-content-item-disabled`]: disabled || item.disabled
  48. });
  49. let title;
  50. if (typeof renderedText === 'string' || typeof renderedText === 'number') {
  51. title = String(renderedText);
  52. }
  53. return _createVNode(LocaleReceiver, {
  54. "componentName": "Transfer",
  55. "defaultLocale": defaultLocale.Transfer
  56. }, {
  57. default: transferLocale => {
  58. const labelNode = _createVNode("span", {
  59. "class": `${prefixCls}-content-item-text`
  60. }, [renderedEl]);
  61. if (showRemove) {
  62. return _createVNode("li", {
  63. "class": className,
  64. "title": title
  65. }, [labelNode, _createVNode(TransButton, {
  66. "disabled": disabled || item.disabled,
  67. "class": `${prefixCls}-content-item-remove`,
  68. "aria-label": transferLocale.remove,
  69. "onClick": () => {
  70. emit('remove', item);
  71. }
  72. }, {
  73. default: () => [_createVNode(DeleteOutlined, null, null)]
  74. })]);
  75. }
  76. return _createVNode("li", {
  77. "class": className,
  78. "title": title,
  79. "onClick": disabled || item.disabled ? noop : () => {
  80. emit('click', item);
  81. }
  82. }, [_createVNode(Checkbox, {
  83. "class": `${prefixCls}-checkbox`,
  84. "checked": checked,
  85. "disabled": disabled || item.disabled
  86. }, null), labelNode]);
  87. }
  88. });
  89. };
  90. }
  91. });