Item.tsx 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { use } from '../utils';
  2. import { emit, inherit } from '../utils/functional';
  3. import Icon from '../icon';
  4. import Cell from '../cell';
  5. import Radio from '../radio';
  6. // Types
  7. import { CreateElement, RenderContext } from 'vue/types';
  8. import { DefaultSlots } from '../utils/use/sfc';
  9. export type AddressItemData = {
  10. id: string | number;
  11. tel: string | number;
  12. name: string;
  13. address: string;
  14. };
  15. export type AddressItemProps = {
  16. data: AddressItemData;
  17. disabled?: boolean;
  18. switchable?: boolean;
  19. };
  20. export type AddressItemEvents = {
  21. onEdit(): void;
  22. onSelect(): void;
  23. };
  24. const [sfc, bem] = use('address-item');
  25. function AddressItem(
  26. h: CreateElement,
  27. props: AddressItemProps,
  28. slots: DefaultSlots,
  29. ctx: RenderContext<AddressItemProps>
  30. ) {
  31. const { disabled, switchable } = props;
  32. const onSelect = () => {
  33. if (props.switchable) {
  34. emit(ctx, 'select');
  35. }
  36. };
  37. const renderRightIcon = () => (
  38. <Icon
  39. name="edit"
  40. class={bem('edit')}
  41. onClick={(event: Event) => {
  42. event.stopPropagation();
  43. emit(ctx, 'edit');
  44. }}
  45. />
  46. );
  47. const renderContent = () => {
  48. const { data } = props;
  49. const Info = [
  50. <div class={bem('name')}>{`${data.name},${data.tel}`}</div>,
  51. <div class={bem('address')}>{data.address}</div>
  52. ];
  53. return props.switchable ? (
  54. <Radio name={data.id} onClick={onSelect}>
  55. {Info}
  56. </Radio>
  57. ) : (
  58. Info
  59. );
  60. };
  61. return (
  62. <Cell
  63. class={bem({ disabled, unswitchable: !switchable })}
  64. valueClass={bem('value')}
  65. isLink={!disabled && switchable}
  66. scopedSlots={{
  67. default: renderContent,
  68. 'right-icon': renderRightIcon
  69. }}
  70. onClick={onSelect}
  71. {...inherit(ctx)}
  72. />
  73. );
  74. }
  75. AddressItem.props = {
  76. data: Object,
  77. disabled: Boolean,
  78. switchable: Boolean
  79. };
  80. export default sfc<AddressItemProps, AddressItemEvents>(AddressItem);