Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { Switch } from '@wordpress/ui';
import clsx from 'clsx';
import { useCallback } from 'react';
import useSocialMediaConnections from '../../hooks/use-social-media-connections';
import { Connection } from '../../social-store/types';
import { getA11yLabelForConnectionToggle } from '../../utils/misc';
import { ConnectionIcon } from '../connection-icon';
import { useConnectionState } from '../form/use-connection-state';
import styles from './styles.module.scss';
export type ConnectionsToggleListProps = {
onClickItem: ( connection: Connection ) => void;
getItemClassName?: ( connection: Connection ) => string;
};
/**
* The component to render a list of social media connections as a toggle list.
*
* @param {ConnectionsToggleListProps} props - The component props.
* @return React element
*/
export function ConnectionsToggleList( {
onClickItem,
getItemClassName,
}: ConnectionsToggleListProps ) {
const { canBeTurnedOn, shouldBeDisabled } = useConnectionState();
const { connections } = useSocialMediaConnections();
const onClickConnection = useCallback(
( connection: Connection ) => () => {
onClickItem( connection );
},
[ onClickItem ]
);
return (
<div
role="group"
className={ styles.wrapper }
aria-label={ __( 'Connection toggles', 'jetpack-publicize-pkg' ) }
>
{ connections.map( connection => {
const isSelected = Boolean( canBeTurnedOn( connection ) && connection.enabled );
const isDisabled = shouldBeDisabled( connection );
const ariaLabel = getA11yLabelForConnectionToggle( connection );
return (
<Button
key={ connection.connection_id }
role="switch"
disabled={ isDisabled }
icon={
<ConnectionIcon
serviceName={ connection.service_name }
label={ connection.display_name }
profilePicture={ connection.profile_picture }
disabled={ isDisabled }
/>
}
iconPosition="right"
onClick={ onClickConnection( connection ) }
aria-label={ ariaLabel }
aria-checked={ isSelected }
className={ clsx( styles.item, getItemClassName?.( connection ) ) }
>
<div className={ styles[ 'connection-info' ] }>
{ /* Visual only: the row's button is the control, so this stays out of the tab order and the accessibility tree. */ }
<Switch
className={ styles.switch }
checked={ isSelected }
disabled={ isDisabled }
tabIndex={ -1 }
aria-hidden
/>
<div className={ styles[ 'display-name' ] } title={ connection.display_name }>
{ connection.display_name }
</div>
</div>
</Button>
);
} ) }
</div>
);
}
|