npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wh-oa-contacts

v0.1.24

Published

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

Downloads

9

Readme

基本信息

组件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;