wh-oa-contacts

基本信息

组件npm包名: wh-oa-contacts 当前版本: 0.1.4 (持续更新)

使用示例

参考ContactsModal组件相关部分.

import React from "react";
import {
    Button,
    List,
    InputItem,
    Picker,
    NoticeBar,
    DatePicker,
    WhiteSpace
} from "antd-mobile";
import "./App.css";
import { ContactsModal, IMemberInfo  } from "wh-oa-contacts/build/components";

const Item = List.Item;

interface AppState {
    user: {
        id: string;
    };
    meeting: {
        theme: string;
        startTime: Date;
        duration: string;
        attendees: Array<IMemberInfo>;
    };
    contactsVisible: boolean;
}

const durations = [
    {
        label: (
            <div>
                <span>0.5小时</span>
            </div>
        ),
        value: "30-min",
    },
    {
        label: (
            <div>
                <span>1小时</span>
            </div>
        ),
        value: "60-min",
    },
    {
        label: (
            <div>
                <span>1.5小时</span>
            </div>
        ),
        value: "90-min",
    },
    {
        label: (
            <div>
                <span>2小时</span>
            </div>
        ),
        value: "120-min",
    },
    {
        label: (
            <div>
                <span>2.5小时</span>
            </div>
        ),
        value: "150-min",
    },
    {
        label: (
            <div>
                <span>3小时</span>
            </div>
        ),
        value: "180-min",
    },
];

const tenMinutesInMs = 10 * 60 * 1000;

class App extends React.Component<object, AppState> {
    state = {
        user: {
            id: "zhangsan",
            name: "张三",
        },
        meeting: {
            theme: `我发起的会议`,
            startTime: new Date(Date.now() + tenMinutesInMs),
            duration: "30-min",
            attendees: Array<IMemberInfo>()
        },
        contactsVisible: false,
    };

    onDurationChange = (duration: any) => {
        let { meeting } = this.state;
        meeting.duration = duration[0];
        this.setState({
            meeting,
        });
    };

    onStartTimeChange = (datetime: any) => {
        let { meeting } = this.state;
        meeting.startTime = datetime;
        this.setState({
            meeting,
        });
    };

    onThemeChange = (theme: any) => {
        let { meeting } = this.state;
        meeting.theme = theme;
        this.setState({
            meeting,
        });
    };

    changeContactsVisible = () => {
        this.setState({
            contactsVisible: !this.state.contactsVisible,
        });
    };

    render(): React.ReactNode {
        const { meeting, contactsVisible } = this.state;

        return (
            <div className="App">
                <List>
                    <InputItem
                        clear
                        value={meeting.theme}
                        placeholder="输入会议主题"
                        onChange={this.onThemeChange}
                        style={{
                            textAlign: "right",
                        }}
                    >
                        会议主题
                    </InputItem>
                    <DatePicker
                        value={meeting.startTime}
                        onChange={this.onStartTimeChange}
                    >
                        <List.Item arrow="horizontal">开始时间</List.Item>
                    </DatePicker>
                    <Picker
                        data={durations}
                        value={[meeting.duration]}
                        cols={1}
                        onOk={this.onDurationChange}
                    >
                        <Item arrow="horizontal">会议时长</Item>
                    </Picker>
                    <Item
                        extra={
                            <span style={{ verticalAlign: "middle" }}>
								<span className="attendeeCount">
									{meeting.attendees.length}
								</span>
								<Button
                                    type="ghost"
                                    inline
                                    className="attendeeAddBtn"
                                    icon="plus"
                                    size="small"
                                    onClick={this.changeContactsVisible}
                                />
							</span>
                        }
                    >
                        参会人数
                    </Item>
                    <Item multipleLine wrap style={{ paddingLeft: "0px" }}>
                        <NoticeBar icon={null} style={{ backgroundColor: "white" }}>
                            <span>还没有选择参会人</span>
                            <WhiteSpace size="sm" />
                        </NoticeBar>
                    </Item>
                </List>
                <ContactsModal
                    visible={contactsVisible}
                    onVisibleChange={(visible: boolean) => {
                        this.setState({ contactsVisible: visible });
                    }}
                    onOk={(selectedUsers: Array<IMemberInfo>) => {
                        let { meeting } = this.state;
                        meeting.attendees = selectedUsers;
                        this.setState({
                            meeting
                        });
                        console.log(selectedUsers);
                    }}
                    selectedUsers={[]}
                    currentUser={{
                        id: '13333334444'
                    }}
                />
            </div>
        );
    }
}
export default App;