104 lines
2.3 KiB
TypeScript
104 lines
2.3 KiB
TypeScript
import { createNamespace } from '../utils';
|
||
import { RED } from '../utils/color';
|
||
import { emit, inherit } from '../utils/functional';
|
||
import Icon from '../icon';
|
||
import Cell from '../cell';
|
||
import Button from '../button';
|
||
import Radio from '../radio';
|
||
import RadioGroup from '../radio-group';
|
||
|
||
// Types
|
||
import { CreateElement, RenderContext } from 'vue/types';
|
||
import { DefaultSlots } from '../utils/types';
|
||
|
||
export type ContactListItem = {
|
||
id: string | number;
|
||
tel: string | number;
|
||
name: string;
|
||
};
|
||
|
||
export type ContactListProps = {
|
||
value?: any;
|
||
list?: ContactListItem[];
|
||
addText?: string;
|
||
};
|
||
|
||
const [createComponent, bem, t] = createNamespace('contact-list');
|
||
|
||
function ContactList(
|
||
h: CreateElement,
|
||
props: ContactListProps,
|
||
slots: DefaultSlots,
|
||
ctx: RenderContext<ContactListProps>
|
||
) {
|
||
const List =
|
||
props.list &&
|
||
props.list.map((item, index) => {
|
||
function onClick() {
|
||
emit(ctx, 'input', item.id);
|
||
emit(ctx, 'select', item, index);
|
||
}
|
||
|
||
function Content() {
|
||
return (
|
||
<Radio name={item.id} iconSize={16} checkedColor={RED} onClick={onClick}>
|
||
<div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
|
||
</Radio>
|
||
);
|
||
}
|
||
|
||
function RightIcon() {
|
||
return (
|
||
<Icon
|
||
name="edit"
|
||
class={bem('edit')}
|
||
onClick={event => {
|
||
event.stopPropagation();
|
||
emit(ctx, 'edit', item, index);
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Cell
|
||
key={item.id}
|
||
isLink
|
||
class={bem('item')}
|
||
valueClass={bem('item-value')}
|
||
scopedSlots={{
|
||
default: Content,
|
||
'right-icon': RightIcon
|
||
}}
|
||
onClick={onClick}
|
||
/>
|
||
);
|
||
});
|
||
|
||
return (
|
||
<div class={bem()} {...inherit(ctx)}>
|
||
<RadioGroup value={props.value} class={bem('group')}>
|
||
{List}
|
||
</RadioGroup>
|
||
<Button
|
||
square
|
||
size="large"
|
||
type="danger"
|
||
class={bem('add')}
|
||
text={props.addText || t('addText')}
|
||
onClick={() => {
|
||
emit(ctx, 'add');
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
ContactList.props = {
|
||
value: null as any,
|
||
list: Array,
|
||
addText: String
|
||
};
|
||
|
||
export default createComponent(ContactList);
|