semantic-ui-react#Responsive JavaScript Examples
The following examples show how to use
semantic-ui-react#Responsive.
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: NavMenu.js From cord-19 with Apache License 2.0 | 6 votes |
|
function Mobile() {
return (
<Responsive {...Responsive.onlyMobile}>
<Nav>
<Menu.Menu position="right">
<Dropdown item icon={null} trigger={<Icon name="bars" />}>
<Dropdown.Menu items={items}>
{items.map((item, idx) => (
<Dropdown.Item key={idx} {...item} />
))}
</Dropdown.Menu>
</Dropdown>
</Menu.Menu>
</Nav>
</Responsive>
);
}
Example #2
| Source File: NavMenu.js From cord-19 with Apache License 2.0 | 6 votes |
|
function Desktop() {
return (
<Responsive minWidth={Responsive.onlyTablet.minWidth}>
<Nav>
<Menu.Menu position="right">
{items.map((item, idx) => (
<Menu.Item key={idx} {...item} />
))}
</Menu.Menu>
</Nav>
</Responsive>
);
}
Example #3
| Source File: ResponsiveDiv.jsx From covid-19-nsw with GNU General Public License v3.0 | 6 votes |
|
ResponsiveDiv = ({ children }) => (
<>
<Responsive as='div' maxWidth={Responsive.onlyTablet.minWidth - 1}>
{children}
</Responsive>
<Responsive as='span' minWidth={Responsive.onlyTablet.minWidth}>
{children}
</Responsive>
</>
)
Example #4
| Source File: index.jsx From covid-19-nsw with GNU General Public License v3.0 | 6 votes |
|
ShareButton = () => {
const url = `https://covid-19.wileam.com/`;
return (
<Responsive {...Responsive.onlyComputer}>
<div style={{ textAlign: 'right' }}>
Share the page:
<Facebook link={url} />
<Twitter link={url} />
</div>
</Responsive>
);
}
Example #5
| Source File: index.jsx From covid-19-nsw with GNU General Public License v3.0 | 5 votes |
|
DetailTable = ({ pageId }) => (
<Segment>
{// eslint-disable-next-line
pageId === 'NT' ? (
<a id='detail' className='target'></a>
) : (
<a id='death' className='target'></a>
)}
<div className='title' style={{ marginBottom: '10px' }}>
{pageId === 'AUS' ? (
<>
<Label as='a' color='red' ribbon>
New
</Label>
<span className='ui small header'>
Death cases details
<Responsive as='span' {...Responsive.onlyMobile}>
(best view on desktop)
</Responsive>
:
</span>
</>
) : (
<h2 className='ui small header'>
Confirmed cases details
<Responsive as='span' {...Responsive.onlyMobile}>
(best view on desktop)
</Responsive>
:
</h2>
)}
</div>
<Iframe
className='airtable-embed'
url={`https://airtable.com/embed/${STATE_KEY_MAP[pageId]}?backgroundColor=teal`}
frameborder='0'
onmousewheel=''
width='100%'
height='500'
/>
</Segment>
)
Example #6
| Source File: AusSummary.jsx From covid-19-nsw with GNU General Public License v3.0 | 4 votes |
|
AusSummary = ({ pageId, data, setActive }) => {
let OFFSET = {};
let offsetText = '';
try {
OFFSET = JSON.parse(data.offset[1].config);
for (const key in OFFSET) {
if (OFFSET.hasOwnProperty(key)) {
const stateOffset = OFFSET[key];
if (
stateOffset.totalConfirmed &&
stateOffset.totalConfirmed !== 0 &&
key !== 'AUS'
) {
if (offsetText) {
offsetText += ', ';
}
offsetText += `${key} State ${
data[key].dailyHistorys[data[key].dailyHistorys.length - 1]
.totalConfirmed
}`;
}
}
}
if (offsetText) {
offsetText += '.';
}
} catch (error) {
OFFSET = {};
console.error(error);
}
const dailyHistorys = data[pageId].dailyHistorys;
const todaySummary = dailyHistorys[dailyHistorys.length - 1];
const totalRemianNumber =
todaySummary.totalConfirmed -
todaySummary.totalDeath -
todaySummary.totalRecovered;
const totalConfirmed = getActualNumber(
OFFSET,
pageId,
'totalConfirmed',
todaySummary
);
const totalRecovered = getActualNumber(
OFFSET,
pageId,
'totalRecovered',
todaySummary
);
const totalDeath = getActualNumber(
OFFSET,
pageId,
'totalDeath',
todaySummary
);
let totalTested = 0;
states.forEach(state => {
totalTested += data[state].statistics[0]['total tested'];
});
return (
<div className='summary'>
{
// eslint-disable-next-line
<a id='summary' className='target'></a>
}
<h2 className='ui small header'>Summary data:</h2>
<Grid columns='equal'>
<Grid.Column>
<Statistic color='blue' label='Active' value={totalRemianNumber} />
</Grid.Column>
<Grid.Column>
<NewNumber newNumber={todaySummary.newConfirmed} showDonut={true} />
<Statistic color='red' label='Total' value={totalConfirmed} />
</Grid.Column>
<Grid.Column>
<NewNumber newNumber={todaySummary.newDeath} />
<Statistic
color='grey'
label='Death'
value={getActualNumber(OFFSET, pageId, 'totalDeath', todaySummary)}
/>
</Grid.Column>
<Grid.Column>
<NewNumber newNumber={todaySummary.newRecovered} showZero={false} />
<Statistic color='green' label='Recovered' value={totalRecovered} />
</Grid.Column>
</Grid>
<Table unstackable compact>
<Table.Header>
<Table.Row textAlign='center'>
<Table.HeaderCell>State</Table.HeaderCell>
<Responsive as='th' minWidth={Responsive.onlyTablet.minWidth}>
Active
</Responsive>
<Table.HeaderCell>Total</Table.HeaderCell>
<Table.HeaderCell>Death</Table.HeaderCell>
<Table.HeaderCell>
Recovered
<ResponsiveDiv>
<small>(%)</small>
</ResponsiveDiv>
</Table.HeaderCell>
<Table.HeaderCell>
Tested
<ResponsiveDiv>
<small>(positive %)</small>
</ResponsiveDiv>
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{states.map(state => {
const dailyHistorys = data[state].dailyHistorys;
const todaySummary = dailyHistorys[dailyHistorys.length - 1];
const statistic = data[state].statistics[0];
const totalTested = statistic
? statistic['total tested']
: 'pending';
const totalTestedReport = data[state].totalTestedReport;
const totalConfirmed = getActualNumber(
OFFSET,
state,
'totalConfirmed',
todaySummary
);
const totalRecovered = getActualNumber(
OFFSET,
state,
'totalRecovered',
todaySummary
);
const totalDeath = getActualNumber(
OFFSET,
state,
'totalDeath',
todaySummary
);
return (
<Table.Row textAlign='center' key={state}>
<Table.Cell>
<NavLink
exact
activeClassName='active'
to={state}
onClick={() => setActive(state)}
>
{state}
</NavLink>
</Table.Cell>
<Responsive as='td' minWidth={Responsive.onlyTablet.minWidth}>
{todaySummary.totalConfirmed -
todaySummary.totalRecovered -
todaySummary.totalDeath}
</Responsive>
<Table.Cell>
<strong>{totalConfirmed}</strong>
{OFFSET[state] &&
typeof OFFSET[state].totalConfirmed === 'number' &&
OFFSET[state].totalConfirmed !== 0 && <span>*</span>}
<ResponsiveDiv>
<NewNumber
newNumber={todaySummary.newConfirmed}
showDonut={true}
className='new-number'
/>
</ResponsiveDiv>
</Table.Cell>
<Table.Cell>
{totalDeath}{' '}
<ResponsiveDiv>
<NewNumber
newNumber={todaySummary.newDeath}
className='new-number'
/>
</ResponsiveDiv>
</Table.Cell>
<Table.Cell>
{totalRecovered}
<ResponsiveDiv>
<small className='new-number'>
{((totalRecovered / totalConfirmed) * 100).toFixed(0)}%
</small>
</ResponsiveDiv>
</Table.Cell>
<Table.Cell>
{totalTestedReport && totalTestedReport.count
? Math.max(
totalTestedReport.count,
totalTested
).toLocaleString()
: totalTested.toLocaleString()}
<ResponsiveDiv>
<small>
({((totalConfirmed / totalTested) * 100).toFixed(1)}
%)
</small>
</ResponsiveDiv>
</Table.Cell>
</Table.Row>
);
})}
</Table.Body>
<Table.Footer>
<Table.Row textAlign='center'>
<Table.HeaderCell>Total</Table.HeaderCell>
<Responsive as='th' minWidth={Responsive.onlyTablet.minWidth}>
{totalRemianNumber.toLocaleString()}
</Responsive>
<Table.HeaderCell>
<strong>{totalConfirmed.toLocaleString()}</strong>
<ResponsiveDiv>
<NewNumber
newNumber={todaySummary.newConfirmed}
showDonut={true}
className='new-number'
/>
</ResponsiveDiv>
</Table.HeaderCell>
<Table.HeaderCell>
{totalDeath.toLocaleString()}
<ResponsiveDiv>
<NewNumber
newNumber={todaySummary.newDeath}
className='new-number'
/>
</ResponsiveDiv>
</Table.HeaderCell>
<Table.HeaderCell>
{totalRecovered.toLocaleString()}
<ResponsiveDiv>
<small className='new-number'>
{((totalRecovered / totalConfirmed) * 100).toFixed(0)}%
</small>
</ResponsiveDiv>
</Table.HeaderCell>
<Table.HeaderCell>
{totalTested.toLocaleString()}
<ResponsiveDiv>
<small>
({((totalConfirmed / totalTested) * 100).toFixed(1)}%)
</small>
</ResponsiveDiv>
</Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table>
{offsetText && (
<p style={{ marginTop: '10px' }}>
<small>
* Numbers in this national summary page reconciles with{' '}
<a href='https://www.health.gov.au/resources/publications/coronavirus-covid-19-at-a-glance'>
Feds number
</a>
, states with different number: {offsetText}
</small>
<br />
<small>
* Reason for that is the federal government reports cases according
to residency while states generally report cases diagnosed in the
state.
</small>
<br />
<small>
* On 3 July, 189 historic cases reported in crew members on board a
ship were classified as Australian cases and included in national
NSW totals, dated 15 April.
</small>
</p>
)}
</div>
);
}
Example #7
| Source File: TestsAndCasesByLocation.jsx From covid-19-nsw with GNU General Public License v3.0 | 4 votes |
|
TestsAndCasesByLocation = ({
id,
totalTestedReport,
suburbMapping
}) => {
const records = totalTestedReport.testsAndCasesByPostcode;
let columnDefsDesktop = [
{
headerName: 'Postcode',
flex: 1,
field: 'postcode',
sortable: true,
minWidth: 80
},
{
headerName: 'Suburb',
flex: 2,
valueGetter: ({ data }) =>
suburbMapping[data.postcode].join(', ').toLowerCase(),
tooltipValueGetter: ({ value }) => value,
tooltipShowDelay: 500,
minWidth: 120
},
{
headerName: 'Tested',
flex: 1,
field: 'total',
sort: 'desc',
filter: 'agNumberColumnFilter',
floatingFilterComponentParams: { suppressFilterButton: false },
minWidth: 80
},
{
headerName: 'Confirmed',
flex: 1,
field: 'confirmed',
filter: 'agNumberColumnFilter',
floatingFilterComponentParams: { suppressFilterButton: false },
minWidth: 80
},
{
headerName: 'Unknown',
flex: 1,
field: 'unknown',
filter: 'agNumberColumnFilter',
floatingFilterComponentParams: { suppressFilterButton: false },
minWidth: 80
},
{
headerName: 'Positive %',
flex: 1,
valueGetter: "(data.confirmed/data.total * 100).toFixed(2) + '%'",
minWidth: 80
},
{
headerName: 'Council',
flex: 1.5,
field: 'council',
minWidth: 120
}
];
let columnDefsMobile = [
{
headerName: 'Postcode',
flex: 1.1,
field: 'postcode',
sortable: true
},
{
headerName: 'Confirmed',
flex: 1.1,
field: 'confirmed'
},
{
headerName: 'Unknown',
flex: 1,
field: 'unknown'
},
{
headerName: 'Pos%',
flex: 1,
valueGetter: "(data.confirmed/data.total * 100).toFixed(2) + '%'",
filter: false,
floatingFilterComponentParams: { suppressFilterButton: false }
}
];
const gridOptionsDesktop = {
columnDefs: columnDefsDesktop,
defaultColDef: {
suppressMenu: true,
floatingFilterComponentParams: { suppressFilterButton: true },
flex: 1,
minWidth: 50,
sortable: true,
resizable: true,
filter: 'agTextColumnFilter'
},
floatingFilter: true
};
const gridOptionsMobile = {
columnDefs: columnDefsMobile,
defaultColDef: {
suppressMenu: true,
floatingFilterComponentParams: { suppressFilterButton: true },
flex: 1,
minWidth: 50,
sortable: true,
resizable: true,
filter: 'agTextColumnFilter'
},
floatingFilter: true
};
return (
<>
<Header as='h4'>Summary data by location</Header>
<p>
Number of tests/confirmed/source unknown(community transmission) cases
by location. NSW has done{' '}
<strong>{totalTestedReport.count.toLocaleString()}</strong> tests.
</p>
<small>
* Filter by columns separately or combined, sort by click the column
header.
</small>
<Responsive minWidth={Responsive.onlyTablet.minWidth}>
<div
className='ag-theme-balham'
style={{ height: '400px', width: '100%' }}
>
<AgGridReact gridOptions={gridOptionsDesktop} rowData={records} />
</div>
</Responsive>
<Responsive maxWidth={Responsive.onlyTablet.minWidth - 1}>
<strong>
<small>
Please use desktop to see more columns and better filter
functionality.
</small>
</strong>
<div
className='ag-theme-balham'
style={{ height: '300px', width: '100%' }}
>
<AgGridReact gridOptions={gridOptionsMobile} rowData={records} />
</div>
</Responsive>
{id === 'NSW' && (
<small>
* Data source: always up to date from{' '}
<a href='https://data.nsw.gov.au/nsw-covid-19-data/'>
NSW Health open data
</a>
, data in table excluded{' '}
{totalTestedReport.countNonNswCases.toLocaleString()} tests postcode
doesn't have a valid nsw postcode, and{' '}
{totalTestedReport.countNoLocationNswCases.toLocaleString()} tests has
no location information.
</small>
)}
</>
);
}
