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'; @import '../mixins';
.toggle { .details {
display: flex; display: flex;
> :first-child { > :first-child {

View File

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

View File

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

View File

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