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';
|
@import '../mixins';
|
||||||
|
|
||||||
.toggle {
|
.details {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
> :first-child {
|
> :first-child {
|
|
@ -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;
|
|
@ -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}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue