semantic-ui-react#Accordion TypeScript Examples
The following examples show how to use
semantic-ui-react#Accordion.
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: DisplayShareControl.tsx From FLECT_Amazon_Chime_Meeting with Apache License 2.0 | 6 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' />
Display Share
</Accordion.Title>
<Accordion.Content active={this.state.open}>
<div style={{paddingLeft:"10px"}}>
<Icon basic link name="play"
onClick={() => { props.sharedDisplaySelected()}}
/>
<Icon basic link name="stop"
onClick={() => { props.stopSharedDisplay() }}
/>
</div>
</Accordion.Content>
</Accordion>
)
return grid
}
Example #2
| 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 #3
| Source File: SecondaryCameraAccordion.tsx From FLECT_Amazon_Chime_Meeting with Apache License 2.0 | 6 votes |
|
////////////////////////////////
/// UI
///////////////////////////////
generateAccordion = () => {
const gs = this.props as GlobalState
const inputVideoDevicesOpts = gs.inputVideoDevices!.map(info => { return { key: info.label, text: info.label, value: info.deviceId } })
inputVideoDevicesOpts.push({key:"none", text:"none", value:"none"})
const grid = (
<Accordion>
<Accordion.Title
active={this.state.open}
index={0}
onClick={() => { this.handleClick() }}
>
<Icon name='dropdown' />
Secondary camera(experimental)
</Accordion.Title>
<Accordion.Content active={this.state.open}>
<Dropdown
pointing='top left'
options={inputVideoDevicesOpts}
trigger={trigger}
onChange={(e, { value }) => this.setSecondaryCamera(value as string)}
/>
<video ref={this.secondaryVideoRef} autoPlay width="200px" height="160px"/>
</Accordion.Content>
</Accordion>
)
return grid
}
Example #4
| Source File: SendTextAccordion.tsx From FLECT_Amazon_Chime_Meeting with Apache License 2.0 | 6 votes |
|
////////////////////////////////
/// UI
///////////////////////////////
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' />
SendText
</Accordion.Title>
<Accordion.Content active={this.state.open}>
<Form onSubmit={(e)=>{props.sendText( appState.focusedMeeting, appState.joinedMeetings[appState.focusedMeeting].focusAttendeeId, this.state.message); this.setState({message: ""})}}>
<Form.Input placeholder='message' value={this.state.message} onChange={(e)=>{this.setState({message: e.target.value})}} />
</Form>
</Accordion.Content>
</Accordion>
)
return grid
}
Example #5
| Source File: StampAccordion.tsx From FLECT_Amazon_Chime_Meeting with Apache License 2.0 | 6 votes |
|
////////////////////////////////
/// UI
///////////////////////////////
generateAccordion = () =>{
const grid = (
<Accordion>
<Accordion.Title
active={this.state.open}
index={0}
onClick={()=>{this.handleClick()}}
>
<Icon name='dropdown' />
Stamps
</Accordion.Title>
<Accordion.Content active={this.state.open}>
{this.generateStampTiles()}
</Accordion.Content>
</Accordion>
)
return grid
}
Example #6
| Source File: StampAccordionBySignal.tsx From FLECT_Amazon_Chime_Meeting with Apache License 2.0 | 6 votes |
|
////////////////////////////////
/// UI
///////////////////////////////
generateAccordion = () =>{
const grid = (
<Accordion>
<Accordion.Title
active={this.state.open}
index={0}
onClick={()=>{this.handleClick()}}
>
<Icon name='dropdown' />
Stamps by signal(experimental)
</Accordion.Title>
<Accordion.Content active={this.state.open}>
{this.generateStampTiles()}
</Accordion.Content>
</Accordion>
)
return grid
}
Example #7
| 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 #8
| Source File: commoncrewdata.tsx From website with MIT License | 4 votes |
|
render() {
const { markdownRemark, crew, compact, crewDemands, roster } = this.props;
let panels = [
{
index: 0,
key: 0,
title: getCoolStats(crew, false),
content: { content: <div style={{ paddingBottom: '1em' }}>{this.renderOtherRanks(crew)}</div> }
}
];
if (roster && roster.length > 0) {
panels.push(
{
index: 1,
key: 1,
title: this.rosterComparisonTitle(crew, roster),
content: { content: <div style={{ paddingBottom: '1em' }}>{this.renderOtherRanks(crew, roster)}</div> }
});
}
return (
<React.Fragment>
{compact ? (
<Segment>
<Grid columns={2}>
<Grid.Column width={4}>
<Image src={`${process.env.GATSBY_ASSETS_URL}${crew.imageUrlFullBody}`} size="tiny" />
</Grid.Column>
<Grid.Column width={12}>
<CrewStat
skill_name="security_skill"
data={crew.base_skills.security_skill}
scale={compact ? 0.75 : 1}
/>
<CrewStat skill_name="command_skill" data={crew.base_skills.command_skill} scale={compact ? 0.75 : 1} />
<CrewStat
skill_name="diplomacy_skill"
data={crew.base_skills.diplomacy_skill}
scale={compact ? 0.75 : 1}
/>
<CrewStat skill_name="science_skill" data={crew.base_skills.science_skill} scale={compact ? 0.75 : 1} />
<CrewStat
skill_name="medicine_skill"
data={crew.base_skills.medicine_skill}
scale={compact ? 0.75 : 1}
/>
<CrewStat
skill_name="engineering_skill"
data={crew.base_skills.engineering_skill}
scale={compact ? 0.75 : 1}
/>
</Grid.Column>
</Grid>
</Segment>
) : (
<Segment>
<CrewStat skill_name="security_skill" data={crew.base_skills.security_skill} scale={compact ? 0.75 : 1} />
<CrewStat skill_name="command_skill" data={crew.base_skills.command_skill} scale={compact ? 0.75 : 1} />
<CrewStat skill_name="diplomacy_skill" data={crew.base_skills.diplomacy_skill} scale={compact ? 0.75 : 1} />
<CrewStat skill_name="science_skill" data={crew.base_skills.science_skill} scale={compact ? 0.75 : 1} />
<CrewStat skill_name="medicine_skill" data={crew.base_skills.medicine_skill} scale={compact ? 0.75 : 1} />
<CrewStat
skill_name="engineering_skill"
data={crew.base_skills.engineering_skill}
scale={compact ? 0.75 : 1}
/>
</Segment>
)}
{crew.skill_data && crew.skill_data.length > 0 && (
<Accordion
defaultActiveIndex={-1}
panels={[
{
index: 0,
key: 0,
title: 'Other fuse levels',
content: {
content: (
<Segment.Group raised>
{crew.skill_data.map((sk: any, idx: number) => (
<Segment key={idx}>
<Rating
defaultRating={sk.rarity}
maxRating={crew.max_rarity}
icon="star"
size="small"
disabled
/>
<CrewStat skill_name="security_skill" data={sk.base_skills.security_skill} scale={0.75} />
<CrewStat skill_name="command_skill" data={sk.base_skills.command_skill} scale={0.75} />
<CrewStat skill_name="diplomacy_skill" data={sk.base_skills.diplomacy_skill} scale={0.75} />
<CrewStat skill_name="science_skill" data={sk.base_skills.science_skill} scale={0.75} />
<CrewStat skill_name="medicine_skill" data={sk.base_skills.medicine_skill} scale={0.75} />
<CrewStat
skill_name="engineering_skill"
data={sk.base_skills.engineering_skill}
scale={0.75}
/>
</Segment>
))}
</Segment.Group>
)
}
}
]}
/>
)}
{crew.flavor && !compact && <p>{crew.flavor}</p>}
{compact && (
<div style={{ textAlign: 'center' }}>
<StatLabel title="Voyage rank" value={crew.ranks.voyRank} />
<StatLabel title="Gauntlet rank" value={crew.ranks.gauntletRank} />
<StatLabel title="Big book tier" value={formatTierLabel(markdownRemark.frontmatter.bigbook_tier)} />
{markdownRemark.frontmatter.events !== null && (
<StatLabel title="Events" value={markdownRemark.frontmatter.events} />
)}
</div>
)}
{!compact && (
<>
<Statistic.Group size="tiny">
{markdownRemark.frontmatter.events !== null && (
<Statistic>
<Statistic.Label>Events</Statistic.Label>
<Statistic.Value>{markdownRemark.frontmatter.events}</Statistic.Value>
</Statistic>
)}
<Statistic>
<Statistic.Label>Big Book Tier</Statistic.Label>
<Statistic.Value>{formatTierLabel(markdownRemark.frontmatter.bigbook_tier)}</Statistic.Value>
</Statistic>
<Statistic>
<Statistic.Label>CAB Rating <CABExplanation /></Statistic.Label>
<Statistic.Value>{crew.cab_ov ?? 'None'}</Statistic.Value>
</Statistic>
{!compact && markdownRemark.frontmatter.in_portal !== null && (
<Statistic color={markdownRemark.frontmatter.in_portal ? 'green' : 'red'}>
<Statistic.Label>Portal</Statistic.Label>
<Statistic.Value>{markdownRemark.frontmatter.in_portal ? 'YES' : 'NO'}</Statistic.Value>
</Statistic>
)}
</Statistic.Group>
<Statistic.Group style={{ paddingBottom: '2em' }} size="tiny">
<Statistic>
<Statistic.Label>CAB Rank <CABExplanation /></Statistic.Label>
<Statistic.Value>{crew.cab_ov_rank ? rankLinker(false, crew.cab_ov_rank, crew.symbol, 'cab_ov', 'descending', 'rarity:'+crew.max_rarity) : 'None'}</Statistic.Value>
</Statistic>
<Statistic>
<Statistic.Label>Voyage Rank</Statistic.Label>
<Statistic.Value>{rankLinker(false, crew.ranks.voyRank, crew.symbol, 'ranks.voyRank')}</Statistic.Value>
</Statistic>
<Statistic>
<Statistic.Label>Gauntlet Rank</Statistic.Label>
<Statistic.Value>{rankLinker(false, crew.ranks.gauntletRank, crew.symbol, 'ranks.gauntletRank')}</Statistic.Value>
</Statistic>
</Statistic.Group>
</>
)}
{crewDemands && (
<p>
<b>{crewDemands.factionOnlyTotal}</b>
{' faction items, '}
<span style={{ display: 'inline-block' }}>
<img src={`${process.env.GATSBY_ASSETS_URL}atlas/energy_icon.png`} height={14} />
</span>{' '}
<b>{crewDemands.totalChronCost}</b>
{', '}
<span style={{ display: 'inline-block' }}>
<img src={`${process.env.GATSBY_ASSETS_URL}currency_sc_currency_0.png`} height={16} />
</span>{' '}
<b>{crewDemands.craftCost}</b>
</p>
)}
<Accordion
exclusive={false}
panels={panels}
/>
<p>
<b>Traits: </b>
{crew.traits_named
.map(trait => (
<a key={trait} href={`/?search=trait:${trait}`}>
{trait}
</a>
))
.reduce((prev, curr) => [prev, ', ', curr])}
{', '}
{crew.traits_hidden
.map(trait => (
<a style={{ color: 'lightgray' }} key={trait} href={`/?search=trait:${trait}`}>
{trait}
</a>
))
.reduce((prev, curr) => [prev, ', ', curr])}
</p>
{crew.cross_fuse_targets && crew.cross_fuse_targets.symbol && (
<p>
Can cross-fuse with{' '}
<Link to={`/crew/${crew.cross_fuse_targets.symbol}/`}>{crew.cross_fuse_targets.name}</Link>.
</p>
)}
{crew.collections.length > 0 && (
<p>
<b>Collections: </b>
{crew.collections
.map(col => (
<Link key={col} to={`/collections/#${encodeURIComponent(col)}`}>
{col}
</Link>
))
.reduce((prev, curr) => [prev, ', ', curr])}
</p>
)}
<p>
<b>Date added: </b>{new Date(crew.date_added).toLocaleDateString("en-US")} (<b>Obtained: </b>{crew.obtained})
</p>
{crew.nicknames && crew.nicknames.length > 0 && (
<p>
<b>Also known as: </b>
{crew.nicknames
.map((nick, idx) => (
<span key={idx}>{nick.cleverThing}{nick.creator ? <> (coined by <i>{nick.creator}</i>)</> : ''}</span>
))
.reduce((prev, curr) => [prev, ', ', curr])}
</p>
)}
</React.Fragment>
);
}
Example #9
| Source File: voyagestats.tsx From website with MIT License | 4 votes |
|
/* Not yet in use
_renderReminder() {
return (
<div>
<p>Remind me :-</p>
<Form.Field
control={Checkbox}
label={<label>At the next dilemma.</label>}
checked={this.state.dilemmaAlarm}
onChange={(e, { checked }) => this.setState({ dilemmaAlarm: checked}) }
/>
<Form.Field
control={Checkbox}
label={<label>When the probably of voyage still running reaches {oddsControl}.</label>}
checked={this.state.failureAlarm}
onChange={(e, {checked}) => this.setState({failureAlarm : checked}) }
/>
</div>
);
}
*/
render() {
const { voyageData } = this.props;
if (!voyageData)
return (<Dimmer active>
<Loader>Calculating...</Loader>
</Dimmer>);
const { activePanels } = this.state;
const voyState = voyageData.state;
const rewards = {
'pending': () => [],
'started': () => voyageData.pending_rewards.loot,
'failed': () => voyageData.pending_rewards.loot,
'recalled': () => voyageData.pending_rewards.loot,
'completed': () => voyageData.granted_rewards.loot
}[voyState]();
// Adds/Removes panels from the active list
const flipItem = (items, item) => items.includes(item)
? items.filter(i => i != item)
: items.concat(item);
const handleClick = (e, {index}) =>
this.setState({
activePanels: flipItem(activePanels, index)
});
const accordionPanel = (title, content, key, ctitle = false) => {
const collapsedTitle = ctitle ? ctitle : title;
const isActive = activePanels.includes(key);
return (
<Accordion.Panel
active={isActive}
index={key}
onTitleClick={handleClick}
title={isActive ? {icon: 'caret down', content: title} : {icon: 'caret right', content: collapsedTitle}}
content={{content: <Segment>{content}</Segment>}}/>
);
};
if (voyState !== 'pending') {
return (
<div>
{Math.floor(voyageData.log_index/360) < Math.floor(voyageData.voyage_duration/7200) &&
<Message warning>
WARNING!!! A potential problem with the reported voyage duration has been detected.
The estimate is likely to be inaccurate.
Load the game then return to Datacore with a fresh copy of your player file to get an accurate estimate.
</Message>
}
<Message>Your voyage {voyState === 'failed' ? 'failed at ' : 'has been running for ' + this._formatTime(voyageData.voyage_duration/3600)}.</Message>
<Accordion fluid exclusive={false}>
{
voyState !== 'recalled' && voyState !== 'completed' &&
accordionPanel('Voyage estimate', this._renderEstimate(voyState === 'failed'), 'estimate', this._renderEstimateTitle())
}
{ accordionPanel('Voyage lineup', this._renderCrew(), 'crew') }
{
accordionPanel('Rewards', this._renderRewards(rewards), 'rewards', this._renderRewardsTitle(rewards))
}
</Accordion>
</div>
);
} else {
return (
<div>
<Accordion fluid exclusive={false}>
{ accordionPanel('Voyage estimate', this._renderEstimate(false), 'estimate', this._renderEstimateTitle()) }
{ accordionPanel('Voyage lineup', this._renderCrew(), 'crew') }
</Accordion>
</div>
);
}
}
