semantic-ui-react#Item TypeScript Examples
The following examples show how to use
semantic-ui-react#Item.
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: CharacterList.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0 | 6 votes |
|
CharacterList: VFC<Props> = (props) => {
const { school, characters } = props;
return (
<>
<Header as="h2">{school}</Header>
<Item.Group>
{characters.map((character) => (
<Item key={character.id}>
<Icon name="user circle" size="huge" />
<Item.Content>
<Item.Header>{character.name}</Item.Header>
<Item.Meta>{character.grade}年生</Item.Meta>
<Item.Meta>
{character.height ? character.height : '???'}
cm
</Item.Meta>
</Item.Content>
</Item>
))}
</Item.Group>
</>
);
}
Example #2
| Source File: CharacterList.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0 | 6 votes |
|
render(): ReactElement {
const { school, characters } = this.props;
return (
<>
<Header as="h2">{school}</Header>
<Item.Group>
{characters.map((character) => (
<Item key={character.id}>
<Icon name="user circle" size="huge" />
<Item.Content>
<Item.Header>{character.name}</Item.Header>
<Item.Meta>{character.grade}年生</Item.Meta>
<Item.Meta>
{character.height ?? '???'}
cm
</Item.Meta>
</Item.Content>
</Item>
))}
</Item.Group>
</>
);
}
Example #3
| Source File: CharactersList.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0 | 6 votes |
|
CharactersList: VFC<Props> = ({ characters = [], isLoading = false }) => (
<>
{isLoading ? (
<Spinner />
) : (
<Item.Group>
{characters.map((character) => (
<Item key={character.id}>
<Icon name="user circle" size="huge" />
<Item.Content>
<Item.Header>{character.name}</Item.Header>
<Item.Meta>
{character.grade}
年生
</Item.Meta>
<Item.Meta>
{character.height ?? '???'}
cm
</Item.Meta>
</Item.Content>
</Item>
))}
</Item.Group>
)}
</>
)
Example #4
| Source File: CharactersList.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0 | 6 votes |
|
CharactersList: VFC<Props> = ({ characters = [], isLoading = false }) => (
<>
{isLoading ? (
<Spinner />
) : (
<Item.Group>
{characters.map((character) => (
<Item key={character.id}>
<Icon name="user circle" size="huge" />
<Item.Content>
<Item.Header>{character.name}</Item.Header>
<Item.Meta>
{character.grade}
年生
</Item.Meta>
<Item.Meta>
{character.height ? character.height : '???'}
cm
</Item.Meta>
</Item.Content>
</Item>
))}
</Item.Group>
)}
</>
)
Example #5
| Source File: OrgInfo.tsx From Riakuto-StartingReact-ja3.1 with Apache License 2.0 | 6 votes |
|
OrgInfo: VFC<{ org: Organization | null }> = ({ org = null }) =>
org ? (
<>
<Item.Group>
<Item>
<Item.Image src={org.avatarUrl} size="small" />
<Item.Content>
<Item.Header as="a">{org.name}</Item.Header>
<Item.Meta>{org.description}</Item.Meta>
<Item.Extra>
{org.location && (
<span>
<Icon name="map marker alternate" />
{org.location}
</span>
)}
{org.blog && (
<span>
<Icon name="globe" />
<a href={org.blog} target="_blank" rel="noopener noreferrer">
{org.blog}
</a>
</span>
)}
{org.isVerified && (
<Label basic color="teal">
verified
</Label>
)}
</Item.Extra>
</Item.Content>
</Item>
</Item.Group>
</>
) : (
<div />
)
Example #6
| Source File: collections.tsx From website with MIT License | 6 votes |
|
render() {
const { collections, allcrew } = this.state;
if (!collections || collections.length === 0) {
return (
<Layout title='Collections'>
<Icon loading name='spinner' /> Loading...
</Layout>
);
}
return (
<Layout title='Collections'>
<Item.Group>
{collections.map(collection => (
<Item key={collection.name} id={encodeURIComponent(collection.name)}>
<Item.Image size='medium' src={`${process.env.GATSBY_ASSETS_URL}${collection.image}`} />
<Item.Content>
<Item.Header>{collection.name}</Item.Header>
<Item.Meta>
<span dangerouslySetInnerHTML={{ __html: collection.description }} />
</Item.Meta>
<Item.Description>
<b>Crew: </b>
{collection.crew
.map(crew => (
<Link key={crew} to={`/crew/${crew}/`}>
{allcrew.find(c => c.symbol === crew).name}
</Link>
))
.reduce((prev, curr) => [prev, ', ', curr])}
</Item.Description>
</Item.Content>
</Item>
))}
</Item.Group>
</Layout>
);
}
Example #7
| Source File: episodepage.tsx From website with MIT License | 6 votes |
|
render() {
const { allEpisodesJson } = this.props.data;
if (allEpisodesJson.edges.length === 0) {
return <span>Episode not found!</span>;
}
const episode = allEpisodesJson.edges[0].node;
return (
<Layout title={getEpisodeName(episode)}>
<Header as='h2'>{getEpisodeName(episode)}</Header>
<p dangerouslySetInnerHTML={{ __html: episode.description }} />
<Item.Group divided>
{episode.quests.map((c, idx) => (
<Item key={idx}>
<Item.Image size='small' src={`${process.env.GATSBY_ASSETS_URL}${this._getImageUrl(c)}`} />
<Item.Content>
<Item.Header as='a'>{c.name}</Item.Header>
<Item.Description>{this.renderQuestDescription(c)}</Item.Description>
<Item.Extra>{this._questType(c.quest_type)}</Item.Extra>
</Item.Content>
</Item>
))}
</Item.Group>
</Layout>
);
}
Example #8
| Source File: episodes.tsx From website with MIT License | 5 votes |
|
render() {
return (
<StaticQuery
query={graphql`
query {
allEpisodesJson {
edges {
node {
name
description
cadet
episode_title
episode
total_stars
episode_portrait {
file
}
fields {
slug
}
}
}
}
}
`}
render={data => (
<Layout title='Episodes'>
<Item.Group>
{data.allEpisodesJson.edges.map(({ node }, index) => (
<Item key={index}>
<Item.Image
size="tiny"
src={`${process.env.GATSBY_ASSETS_URL}${node.episode_portrait
? node.episode_portrait.file.substr(1).replace('/', '_') + '.png'
: 'crew_full_body_cm_empty_full.png'
}`}
/>
<Item.Content>
<Item.Header as="a" onClick={() => navigate(`/episode${node.fields.slug}`)}>
{getEpisodeName(node)}
</Item.Header>
<Item.Meta>Total stars: {node.total_stars}</Item.Meta>
<Item.Description>
<p>{node.description}</p>
</Item.Description>
</Item.Content>
</Item>
))}
</Item.Group>
</Layout>
)}
/>
);
}
Example #9
| 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>
)
}
Example #10
| Source File: fleet_info.tsx From website with MIT License | 4 votes |
|
render() {
const { fleet_id, errorMessage, fleet_data, factions, events } = this.state;
if (fleet_id === undefined || fleet_data === undefined || errorMessage !== undefined) {
return (
<Layout title='Fleet information'>
<Header as="h4">Fleet information</Header>
{errorMessage && (
<Message negative>
<Message.Header>Unable to load fleet profile</Message.Header>
<pre>{errorMessage.toString()}</pre>
</Message>
)}
{!errorMessage && (
<div>
<Icon loading name="spinner" /> Loading...
</div>
)}
<p>
Are you looking to share your player profile? Go to the <Link to={`/playertools`}>Player Tools page</Link> to
upload your player.json and access other useful player tools.
</p>
</Layout>
);
}
let imageUrl = 'icons_icon_faction_starfleet.png';
if (factions && factions[fleet_data.nicon_index]) {
imageUrl = factions[fleet_data.nicon_index].icon;
}
let event1;
let event2;
let event3;
if (events[0].event_name === fleet_data.leaderboard[0].event_name) {
event1 = events[0];
event2 = events[1];
event3 = events[2];
} else {
event1 = events.find(ev => ev.event_name === fleet_data.leaderboard[0].event_name);
event2 = events.find(ev => ev.event_name === fleet_data.leaderboard[1].event_name);
event3 = events.find(ev => ev.event_name === fleet_data.leaderboard[2].event_name);
}
return (
<Layout title={fleet_data.name}>
<Item.Group>
<Item>
<Item.Image size="tiny" src={`${process.env.GATSBY_ASSETS_URL}${imageUrl}`} />
<Item.Content>
<Item.Header>{fleet_data.name}</Item.Header>
<Item.Meta>
<Label>Starbase level: {fleet_data.nstarbase_level}</Label>
<Label>
Size: {fleet_data.cursize} / {fleet_data.maxsize}
</Label>
<Label>Created: {new Date(fleet_data.created).toLocaleDateString()}</Label>
<Label>
Enrollment {fleet_data.enrollment} (min level: {fleet_data.nmin_level})
</Label>
</Item.Meta>
</Item.Content>
</Item>
</Item.Group>
{event1 && <table>
<tbody>
<tr>
<th>
{' '}
<Link to={`/event_info?instance_id=${event1.instance_id}`}>
{fleet_data.leaderboard[0].event_name}
</Link>
</th>
<th>
{' '}
<Link to={`/event_info?instance_id=${event2.instance_id}`}>
{fleet_data.leaderboard[1].event_name}
</Link>
</th>
<th>
{' '}
<Link to={`/event_info?instance_id=${event3.instance_id}`}>
{fleet_data.leaderboard[2].event_name}
</Link>
</th>
</tr>
<tr>
<td><Image size="medium" src={`${process.env.GATSBY_ASSETS_URL}${event1.image}`} /></td>
<td><Image size="medium" src={`${process.env.GATSBY_ASSETS_URL}${event2.image}`} /></td>
<td><Image size="medium" src={`${process.env.GATSBY_ASSETS_URL}${event3.image}`} /></td>
</tr>
<tr>
<td align="center">Fleet rank: {fleet_data.leaderboard[0].fleet_rank}</td>
<td align="center">Fleet rank: {fleet_data.leaderboard[1].fleet_rank}</td>
<td align="center">Fleet rank: {fleet_data.leaderboard[2].fleet_rank}</td>
</tr>
</tbody>
</table>}
<Header as="h4">Members</Header>
<Table celled selectable striped collapsing unstackable compact="very">
<Table.Header>
<Table.Row>
<Table.HeaderCell width={3}>Name</Table.HeaderCell>
<Table.HeaderCell width={1}>Rank</Table.HeaderCell>
<Table.HeaderCell width={1}>Profile</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{fleet_data.members.map((member, idx) => (
<Table.Row key={idx}>
<Table.Cell>
<div
style={{
display: 'grid',
gridTemplateColumns: '60px auto',
gridTemplateAreas: `'icon stats' 'icon description'`,
gridGap: '1px'
}}
>
<div style={{ gridArea: 'icon' }}>
<img
width={48}
src={`${process.env.GATSBY_ASSETS_URL}${member.crew_avatar || 'crew_portraits_cm_empty_sm.png'}`}
/>
</div>
<div style={{ gridArea: 'stats' }}>
<span style={{ fontWeight: 'bolder', fontSize: '1.25em' }}>
{member.last_update ? (
<Link to={`/profile?dbid=${member.dbid}`}>{member.display_name}</Link>
) : (
<span>{member.display_name}</span>
)}
</span>
</div>
<div style={{ gridArea: 'description' }}>
{member.last_update && (
<Label size="tiny">
Last profile upload: {new Date(Date.parse(member.last_update)).toLocaleDateString()}
</Label>
)}
</div>
</div>
</Table.Cell>
<Table.Cell>{member.rank}</Table.Cell>
<Table.Cell>
{member.last_update
? `Last profile upload: ${new Date(Date.parse(member.last_update)).toLocaleDateString()}`
: 'Never'}
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
</Layout>
);
}
Example #11
| Source File: gauntlets.tsx From website with MIT License | 4 votes |
|
render() {
return (
<StaticQuery
query={graphql`
query {
allGauntletsJson {
edges {
node {
gauntlet_id
date
jackpot_crew
contest_data {
featured_skill
traits
}
}
}
}
allCrewJson {
edges {
node {
symbol
name
traits_named
imageUrlPortrait
max_rarity
ranks {
gauntletRank
}
base_skills {
security_skill {
core
range_min
range_max
}
command_skill {
core
range_min
range_max
}
diplomacy_skill {
core
range_min
range_max
}
science_skill {
core
range_min
range_max
}
medicine_skill {
core
range_min
range_max
}
engineering_skill {
core
range_min
range_max
}
}
}
}
}
}
`}
render={data => (
<Layout title='Gauntlets'>
<Item.Group divided>
{data.allGauntletsJson.edges.sort((a, b) => Date.parse(b.node.date) - Date.parse(a.node.date)).map(({ node }, index) => {
const prettyDate = new Date(node.date).toDateString();
const prettyTraits = node.contest_data.traits.map(t => trait_names[t]);
const matchedCrew = data.allCrewJson.edges.filter(e => e.node.max_rarity > 3 && prettyTraits.filter(t => e.node.traits_named.includes(t)).length > 1).sort((a, b) => (prettyTraits.filter(t => b.node.traits_named.includes(t)).length - prettyTraits.filter(t => a.node.traits_named.includes(t)).length));
return (
<Item key={index}>
<Item.Content>
<Item.Header>
{node.contest_data.traits.map(t => trait_names[t]).join("/")}/{SKILLS[node.contest_data.featured_skill]}
</Item.Header>
<Item.Meta style={{color: 'white'}}>{prettyDate}</Item.Meta>
<Item.Description>
<Grid stackable>
{matchedCrew.map(({ node: crew }) => (
<Grid.Column width={1} style={{textAlign: 'center'}}>
<a href={`/crew/${crew.symbol}`}>
<Image
src={`${process.env.GATSBY_ASSETS_URL}${crew.imageUrlPortrait}`}
size='tiny'
alt={crew.name}
style={{
borderColor: CONFIG.RARITIES[crew.max_rarity].color,
borderWidth: '1px',
borderRadius: '4px',
borderStyle: 'solid',
marginLeft: 'auto',
marginRight: 'auto'
}}
/>
</a>
{prettyTraits.filter(t => crew.traits_named.includes(t)).length == 3 ? '65%' : '45%'}
<br />
{crew.base_skills[node.contest_data.featured_skill] ? <img style={{width: '1em'}} src={`${process.env.GATSBY_ASSETS_URL}atlas/icon_${node.contest_data.featured_skill}.png`} /> : ''}
</Grid.Column>
))}
</Grid>
</Item.Description>
</Item.Content>
</Item>
)
})}
</Item.Group>
</Layout>
)}
/>
);
}
Example #12
| Source File: profile.tsx From website with MIT License | 4 votes |
|
renderDesktop() {
const { playerData } = this.state;
const panes = [
{
menuItem: 'Crew',
render: () => <ProfileCrew playerData={this.state.playerData} />
},
{
menuItem: 'Crew (mobile)',
render: () => <ProfileCrewMobile playerData={this.state.playerData} isMobile={false} />
},
{
menuItem: 'Ships',
render: () => <ProfileShips playerData={this.state.playerData} />
},
{
menuItem: 'Items',
render: () => <ProfileItems playerData={this.state.playerData} />
},
{
menuItem: 'Other',
render: () => <ProfileOther playerData={this.state.playerData} />
},
{
menuItem: 'Charts & Stats',
render: () => <ProfileCharts playerData={this.state.playerData} />
}
];
return (
<Layout title={playerData.player.character.display_name}>
<Item.Group>
<Item>
<Item.Image
size='tiny'
src={`${process.env.GATSBY_ASSETS_URL}${playerData.player.character.crew_avatar
? playerData.player.character.crew_avatar.portrait
: 'crew_portraits_cm_empty_sm.png'
}`}
/>
<Item.Content>
<Item.Header>{playerData.player.character.display_name}</Item.Header>
<Item.Meta>
<Label>VIP {playerData.player.vip_level}</Label>
<Label>Level {playerData.player.character.level}</Label>
<Label>{playerData.calc.numImmortals} crew</Label>
<Label>{playerData.player.character.shuttle_bays} shuttles</Label>
</Item.Meta>
<Item.Description>
{playerData.player.fleet && (
<p>
Fleet{' '}
<Link to={`/fleet_info?fleetid=${playerData.player.fleet.id}`}>
<b>{playerData.player.fleet.slabel}</b>
</Link>{' '}
({playerData.player.fleet.rank}) Starbase level {playerData.player.fleet.nstarbase_level}{' '}
</p>
)}
</Item.Description>
</Item.Content>
</Item>
</Item.Group>
<Menu compact>
<Menu.Item>
{playerData.calc.lastModified ? <span>Last updated: {playerData.calc.lastModified.toLocaleString()}</span> : <span />}
</Menu.Item>
<Dropdown item text='Download'>
<Dropdown.Menu>
<Dropdown.Item onClick={() => this._exportExcel()}>Complete spreadsheet (XLSX)</Dropdown.Item>
<Dropdown.Item onClick={() => this._exportCrew()}>Crew table (CSV)</Dropdown.Item>
<Dropdown.Item onClick={() => this._exportShips()}>Ship table (CSV)</Dropdown.Item>
<Dropdown.Item onClick={() => this._exportItems()}>Item table (CSV)</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Menu>
<Tab menu={{ secondary: true, pointing: true }} panes={panes} />
</Layout>
);
}
