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:
parent
0e75ad078d
commit
74c45f93ad
4 changed files with 10 additions and 10 deletions
|
@ -16,7 +16,7 @@ limitations under the License.
|
|||
|
||||
@import '../mixins';
|
||||
|
||||
.toggle {
|
||||
.details {
|
||||
display: flex;
|
||||
|
||||
> :first-child {
|
|
@ -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;
|
|
@ -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}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue