index.tsx 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { use } from '../utils';
  2. import { emit, inherit } from '../utils/functional';
  3. import Button from '../button';
  4. import RadioGroup from '../radio-group';
  5. import AddressItem, { AddressItemData } from './Item';
  6. // Types
  7. import { CreateElement, RenderContext } from 'vue/types';
  8. import { ScopedSlot, DefaultSlots } from '../utils/use/sfc';
  9. export type AddressListProps = {
  10. value?: string | number;
  11. switchable: boolean;
  12. disabledText?: string;
  13. addButtonText?: string;
  14. list: AddressItemData[];
  15. disabledList: AddressItemData[];
  16. };
  17. export type AddressListSlots = DefaultSlots & {
  18. top?: ScopedSlot;
  19. };
  20. const [sfc, bem, t] = use('address-list');
  21. function AddressList(
  22. h: CreateElement,
  23. props: AddressListProps,
  24. slots: AddressListSlots,
  25. ctx: RenderContext<AddressListProps>
  26. ) {
  27. const getList = (list: AddressItemData[], disabled?: boolean) =>
  28. list.map((item, index) => (
  29. <AddressItem
  30. data={item}
  31. key={item.id}
  32. disabled={disabled}
  33. switchable={props.switchable && !disabled}
  34. onSelect={() => {
  35. emit(ctx, disabled ? 'select-disabled' : 'select', item, index);
  36. }}
  37. onEdit={() => {
  38. emit(ctx, disabled ? 'edit-disabled' : 'edit', item, index);
  39. }}
  40. />
  41. ));
  42. const List = getList(props.list);
  43. const DisabledList = getList(props.disabledList, true);
  44. return (
  45. <div class={bem()} {...inherit(ctx)}>
  46. {slots.top && slots.top()}
  47. <RadioGroup
  48. value={props.value}
  49. onInput={(event: Event) => {
  50. emit(ctx, 'input', event);
  51. }}
  52. >
  53. {List}
  54. </RadioGroup>
  55. {props.disabledText && (
  56. <div class={bem('disabled-text')}>{props.disabledText}</div>
  57. )}
  58. {DisabledList}
  59. {slots.default && slots.default()}
  60. <Button
  61. square
  62. size="large"
  63. type="danger"
  64. class={bem('add')}
  65. text={props.addButtonText || t('add')}
  66. onClick={() => {
  67. emit(ctx, 'add');
  68. }}
  69. />
  70. </div>
  71. );
  72. }
  73. AddressList.props = {
  74. list: Array,
  75. disabledList: Array,
  76. disabledText: String,
  77. addButtonText: String,
  78. value: [String, Number],
  79. switchable: {
  80. type: Boolean,
  81. default: true
  82. }
  83. };
  84. export default sfc<AddressListProps>(AddressList);