semantic-ui-react#List TypeScript Examples
The following examples show how to use
semantic-ui-react#List.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: FileShare.tsx From FLECT_Amazon_Chime_Meeting with Apache License 2.0 | 6 votes |
|
generateAccordion = () =>{
const props = this.props as any
const appState = props.appState as AppState
const grid = (
<Accordion>
<Accordion.Title
active={this.state.open}
index={0}
onClick={()=>{this.handleClick()}}
>
<Icon name='dropdown' />
ShareFile
</Accordion.Title>
<Accordion.Content active={this.state.open}>
<div style={{paddingLeft:"10px"}}>
<List link>
<List.Item as='a' active onClick={() => this.fileInputRef.current!.click()}>
<Icon name="folder" active />Choose file.
</List.Item>
</List>
</div>
<input
ref={this.fileInputRef}
type="file"
hidden
onChange={(e) => props.sharedFileSelected(appState.focusedMeeting, appState.joinedMeetings[appState.focusedMeeting].focusAttendeeId, e)}
/>
{this.sendingStatus()}
{this.receivingStatus()}
</Accordion.Content>
</Accordion>
)
return grid
}
Example #2
| Source File: SettingControl.tsx From FLECT_Amazon_Chime_Meeting with Apache License 2.0 | 6 votes |
|
render() {
return (
// @ts-ignore
<div>
<List link>
<List.Item as='a' active onClick={() => { this.settingOpen() }}><Icon name="setting" active />Virtual Background</List.Item>
</List>
{this.generateSettingModal()}
</div>
)
}
Example #3
| Source File: ExampleList.tsx From plugin-vscode with Apache License 2.0 | 6 votes |
|
public renderColumnItem(column: BallerinaExampleCategory) {
return (
<List verticalAlign="middle" divided relaxed key={column.title} className="examples-block">
<List.Item>
<List.Header>{column.title}</List.Header>
<List animated verticalAlign="middle">
{
column.samples.map((sample) => {
return (
<List.Item className="example" key={sample.url}>
<a
href="#"
onClick={
() => this.props.openSample(sample.url)}
>
{sample.name}
</a>
</List.Item>);
})
}
</List>
</List.Item>
</List>
);
}
Example #4
| Source File: MultiStreamModal.tsx From watchparty with MIT License | 6 votes |
|
MultiStreamModal = ({
streams,
setMedia,
resetMultiSelect,
}: {
streams: any[];
setMedia: Function;
resetMultiSelect: Function;
}) => (
<Modal inverted basic open closeIcon onClose={resetMultiSelect as any}>
<Modal.Header>Select a file</Modal.Header>
<Modal.Content>
{streams.length === 0 && <Loader />}
{streams && (
<List inverted>
{streams.map((file: any) => (
<List.Item>
<List.Icon name="file" />
<List.Content>
<List.Header
as="a"
onClick={() => {
setMedia(null, { value: file.url });
resetMultiSelect();
}}
>
{file.name}
</List.Header>
<List.Description>
{file.length.toLocaleString()} bytes
</List.Description>
</List.Content>
</List.Item>
))}
</List>
)}
</Modal.Content>
</Modal>
)
Example #5
| Source File: Comments.tsx From communitymap-ui with Apache License 2.0 | 6 votes |
|
CommentView: React.FC<{ comment: ObjectComment }> = ({ comment: c }) => {
const { author, comment, created } = c;
return (
<List.Item>
<List.Content>
<List.Description>
<AuthorWidget userId={author} />
{' on '}
{new Date(created).toLocaleString()}
</List.Description>
<List.Header>{comment}</List.Header>
</List.Content>
</List.Item>
);
}
Example #6
| Source File: Comments.tsx From communitymap-ui with Apache License 2.0 | 6 votes |
|
CommentsList: React.FC<{ comments: ObjectComment[] }> = ({
comments,
}) => {
return (
<List relaxed divided size="big" className="comments-list">
{comments.map((c) => (
<CommentView key={c.id} comment={c} />
))}
</List>
);
}
Example #7
| Source File: DirectMessage.tsx From communitymap-ui with Apache License 2.0 | 6 votes |
|
DialogInfoItem: React.FC<{ info: DirectMessageInfo; me: AuthUser }> = ({
info,
me,
}) => {
const { updated, members, lastMsgId, lastReadBy } = info;
const peerId = members[0] === me?.uid ? members[1] : members[0];
const peer = useUserPublicInfo(peerId);
const unread = lastMsgId !== lastReadBy?.[me?.uid || ''];
return (
<List.Item className="direct-message-dialog">
<List.Content>
<List.Header>
<Link
to={`/direct-messages/${directMessageId(
me?.uid || '',
peer?.id || ''
)}`}
className={unread ? 'unread' : 'read'}
>
{peer?.name || 'Anonymous'}
</Link>
</List.Header>
{dayjs(updated).fromNow()}
</List.Content>
</List.Item>
);
}
Example #8
| Source File: DirectMessage.tsx From communitymap-ui with Apache License 2.0 | 6 votes |
|
DirectMessageDialogs: React.FC = () => {
const me = useAuth();
const { dialogs } = useMyDirectMessages();
return (
<List divided size="big">
{dialogs?.map((dlg) => (
<DialogInfoItem info={dlg} me={me} key={dlg.id} />
))}
</List>
);
}
Example #9
| Source File: SchoolList.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0 | 6 votes |
|
SchoolList: VFC<{ schools: School[] }> = ({ schools }) => (
<>
<h2>登場人物</h2>
<List as="ul">
{schools.map((school) => (
<List.Item as="li" key={school.code}>
<Link to={`/characters/${school.code}`}>{school.name}</Link>
</List.Item>
))}
<List.Item as="li" key="all">
<Link to="/characters">全校の選手（身長順）</Link>
</List.Item>
</List>
</>
)
Example #10
| Source File: Home.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0 | 6 votes |
|
Home: VFC<{ orgCodes: string[] }> = ({ orgCodes = [] }) => (
<>
<header className="app-header">
<h1>会社一覧</h1>
</header>
<List celled relaxed>
{orgCodes.map((orgCode) => (
<List.Item className="list-item" key={orgCode}>
<List.Icon name="users" size="large" verticalAlign="middle" />
<List.Content>
<Link to={`/${orgCode}/members`}>
{capitalize(orgCode)} のメンバー
</Link>
</List.Content>
</List.Item>
))}
</List>
</>
)
Example #11
| Source File: VideoControl.tsx From FLECT_Amazon_Chime_Meeting with Apache License 2.0 | 5 votes |
|
render() {
const props = this.props as any
const gs = this.props as GlobalState
const appState = props.appState as AppState
const inputVideoDevicesOpts=gs.inputVideoDevices!.map(info => { return { key: info.label, text: info.label, value: info.deviceId } })
const enableIcon=appState.currentSettings.videoEnable ?
(
<Popup
trigger={
<Icon size="large" name="video camera" color="black" link onClick={() => { props.toggleVideo() }}/>
}
content="disable."
/>
)
:
(
<Popup
trigger={
<Icon.Group link onClick={() => { props.toggleVideo() }}>
<Icon size="large" color='black' name='video camera' />
<Icon size="large" color='red' name='dont' />
</Icon.Group>
}
content="enable."
/>
)
return (
<Grid>
<Grid.Row>
<Grid.Column>
{enableIcon}
<Dropdown
style={{paddingLeft:"10px"}}
pointing='top left'
options={inputVideoDevicesOpts}
trigger={trigger}
onChange={(e, { value }) => props.selectInputVideoDevice(value as string)}
/>
{/* <List style={{paddingLeft:"15px",paddingTop:"0px",paddingBottom:"0px"}} link>
<List.Item as='a' active onClick={() => { props.toggleVideo() }}><Icon name="ban" color={appState.currentSettings.videoEnable ? "grey" : "red"}/>Disable Camera</List.Item>
</List> */}
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<List link>
<List.Item as='a' active onClick={() => this.fileInputRef.current!.click()}>
<Icon name="folder" active />dummy mov.
</List.Item>
</List>
<input
ref={this.fileInputRef}
type="file"
hidden
onChange={(e) => props.setSelectedVideo(e)}
/>
</Grid.Column>
</Grid.Row>
</Grid>
)
}
Example #12
| Source File: VideoShareControl.tsx From FLECT_Amazon_Chime_Meeting with Apache License 2.0 | 5 votes |
|
generateAccordion = () =>{
const props = this.props as any
const grid = (
<Accordion>
<Accordion.Title
active={this.state.open}
index={0}
onClick={()=>{this.handleClick()}}
>
<Icon name='dropdown' />
Video Share
</Accordion.Title>
<Accordion.Content active={this.state.open}>
<div style={{paddingLeft:"10px"}}>
<List link>
<List.Item as='a' active onClick={() => this.fileInputRef.current!.click()}>
<Icon name="folder" active />Choose file.
</List.Item>
</List>
</div>
<input
ref={this.fileInputRef}
type="file"
hidden
onChange={(e) => props.sharedVideoSelected(e)}
/>
<div style={{paddingLeft:"10px"}}>
<Icon basic link name="play"
onClick={() => { props.playSharedVideo() }}
/>
<Icon basic link name="pause"
onClick={() => { props.pauseSharedVideo() }}
/>
<Icon basic link name="stop"
onClick={() => { props.stopSharedVideo() }}
/>
</div>
</Accordion.Content>
</Accordion>
)
return grid
}
Example #13
| Source File: LobbyRoomList.tsx From FLECT_Amazon_Chime_Meeting with Apache License 2.0 | 4 votes |
|
render() {
const gs = this.props as GlobalState
const props = this.props as any
const appState = props.appState as AppState
const joinedMeetingIds = Object.keys(appState.joinedMeetings)
const meetings = gs.meetings.map((meeting:MeetingInfo)=>{
let joinButton
const currentMeetingId = meeting.meetingId
if(joinedMeetingIds.includes(currentMeetingId)){
joinButton = (
<Button basic color="red" floated='right'
onClick={()=>{
console.log("CLICK LEAVE", meeting.meetingId)
props._leaveMeeting(meeting.meetingId, appState.joinedMeetings[currentMeetingId].meetingSession.configuration.credentials!.attendeeId)
}}
>
leave
<Icon name='chevron left' />
</Button>
)
}else{
joinButton = (
<Button basic color="teal" floated='right'
onClick={()=>{
console.log("CLICK JOIN", meeting.meetingId)
props._joinMeeting(meeting.meetingId, gs)
}}>
join
<Icon name='chevron right' />
</Button>
)
}
return (
<Item>
{/* <Item.Image size='mini' src='/' /> */}
<Item.Content>
<Item.Header>
<Icon name="lock open" />
{meeting.meetingName}
</Item.Header>
<Item.Meta>
<div>
<b>Owner: </b>
{meeting.metaData.UserName}
</div>
<div>
<b>Open Date: </b>
<span>{new Date(Number(meeting.metaData.StartTime)).toLocaleDateString()}</span>
<span>{new Date(Number(meeting.metaData.StartTime)).toLocaleTimeString()}</span>
</div>
</Item.Meta>
<Item.Extra>
{joinButton}
</Item.Extra>
</Item.Content>
</Item>
)
})
return (
<div>
<div>
<Modal dimmer={'blurring'} size={'small'} open={this.state.open} onClose={this.close}>
<Modal.Header>Create New Meeting</Modal.Header>
<Modal.Content>
<Form>
<Form.Field>
<label>Room Name</label>
<input placeholder='name' ref={this.roomNameRef}/>
</Form.Field>
<Form.Field>
<Checkbox label='Use Passcode?(not implement)' checked={this.state.usePasscodeChecked}
onClick={()=>{this.setState({ usePasscodeChecked: !this.state.usePasscodeChecked })}}
/>
<label>Pass Code(not implement)</label>
<input placeholder='pass' ref={this.roomPassCodeRef}/>
</Form.Field>
<Form.Field>
<Checkbox label='Secret?(not implement)' checked={this.state.secretRoomCreateChecked}
onClick={()=>{this.setState({ secretRoomCreateChecked: !this.state.secretRoomCreateChecked })}}
/>
</Form.Field>
</Form>
</Modal.Content>
<Modal.Actions>
<Button negative onClick={this.close}>Cancel</Button>
<Button positive icon='checkmark' labelPosition='right' content='Create' onClick={this.createMeeting}/>
</Modal.Actions>
</Modal>
</div>
<div>
<Segment padded>
<Divider horizontal>
<Header as='h2' textAlign="left">
Lobby
</Header>
</Divider>
<Header as='h3' textAlign="left">
Actions
</Header>
<List link>
<List.Item as='a' active onClick={(e, d)=>{this.show()}}>
<Header as='h5' textAlign={'left'}>
<Icon name="chat" active />New Meeting!
</Header>
</List.Item>
<List.Item as='a' active onClick={()=>{props.refreshRoomList()}}>
<Header as='h5' textAlign={'left'}>
<Icon name="refresh" active />Refresh Meeting List
</Header>
</List.Item>
</List>
<Divider hidden />
<Header as='h3' textAlign="left">
Meetings
</Header>
<div>
<Item.Group >
{meetings}
</Item.Group>
</div>
</Segment>
</div>
</div>
)
}
