Rename Toggle component to Details

It's much more like a details / disclosure view you can expand than a typically
toggle switch.
This commit is contained in:
J. Ryan Stinnett 2020-10-29 15:13:37 +00:00
parent 0e75ad078d
commit 74c45f93ad
4 changed files with 10 additions and 10 deletions

View File

@ -16,7 +16,7 @@ limitations under the License.
@import '../mixins';
.toggle {
.details {
display: flex;
> :first-child {

View File

@ -18,18 +18,18 @@ import React from 'react';
import chevron from '../imgs/chevron-down.svg';
import './Toggle.scss';
import './Details.scss';
interface IProps extends React.InputHTMLAttributes<Element> {
children?: React.ReactNode;
}
const Toggle: React.FC<IProps> = ({ children, ...props }: IProps) => (
<label className="toggle">
const Details: React.FC<IProps> = ({ children, ...props }: IProps) => (
<label className="details">
{children}
<input type="checkbox" {...props} />
<img src={chevron} alt="" />
</label>
);
export default Toggle;
export default Details;

View File

@ -63,7 +63,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
break;
}
const advancedToggle = (
const advancedButton = (
<p>
{inviteUseString}
<TextButton
@ -77,7 +77,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
invite = (
<>
{invite}
{advancedToggle}
{advancedButton}
</>
);
}

View File

@ -25,7 +25,7 @@ import EventPreview from './EventPreview';
import GroupPreview from './GroupPreview';
import HomeserverOptions from './HomeserverOptions';
import DefaultPreview from './DefaultPreview';
import Toggle from './Toggle';
import Details from './Details';
import { clientMap } from '../clients';
import {
getRoomFromId,
@ -133,7 +133,7 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
content = (
<>
<DefaultPreview link={link} />
<Toggle
<Details
checked={showHSOptions}
onChange={(): void => setShowHSOPtions(!showHSOptions)}
>
@ -143,7 +143,7 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
{link.identifier}
</span>
</span>
</Toggle>
</Details>
</>
);
if (showHSOptions) {