feat: added disabled state to right panel components

ts/components/basic/SessionRadio.tsx

@@ -3,15 +3,6 @@ import styled from 'styled-components';
 import { Flex } from '../basic/Flex';
 // tslint:disable: react-unused-props-and-state
 
-type Props = {
-  label: string;
-  value: string;
-  active: boolean;
-  inputName?: string;
-  beforeMargins?: string;
-  onClick?: (value: string) => void;
-};
-
 const StyledInput = styled.input<{
   filledSize: number;
   outlineOffset: number;
@@ -19,23 +10,29 @@ const StyledInput = styled.input<{
 }>`
   opacity: 0;
   position: absolute;
-  cursor: pointer;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
   width: ${props => props.filledSize + props.outlineOffset}px;
   height: ${props => props.filledSize + props.outlineOffset}px;
 
   :checked + label:before {
-    background: ${props => (props.selectedColor ? props.selectedColor : 'var(--primary-color)')};
+    background: ${props =>
+      props.disabled
+        ? 'var(--disabled-color)'
+        : props.selectedColor
+        ? props.selectedColor
+        : 'var(--primary-color)'};
   }
 `;
 // tslint:disable: use-simple-attributes
 
 const StyledLabel = styled.label<{
+  disabled: boolean;
   filledSize: number;
   outlineOffset: number;
   beforeMargins?: string;
 }>`
   cursor: pointer;
-  color: var(--text-primary-color);
+  color: ${props => (props.disabled ? 'var(--disabled-color)' : 'var(--text-primary-color)')};
 
   :before {
     content: '';
@@ -51,16 +48,26 @@ const StyledLabel = styled.label<{
   }
 `;
 
-export const SessionRadio = (props: Props) => {
-  const { label, inputName, value, active, onClick, beforeMargins } = props;
+type SessionRadioProps = {
+  label: string;
+  value: string;
+  active: boolean;
+  inputName?: string;
+  beforeMargins?: string;
+  onClick?: (value: string) => void;
+  disabled?: boolean;
+};
 
-  function clickHandler(e: ChangeEvent<any>) {
-    if (onClick) {
+export const SessionRadio = (props: SessionRadioProps) => {
+  const { label, inputName, value, active, onClick, beforeMargins, disabled = false } = props;
+
+  const clickHandler = (e: ChangeEvent<any>) => {
+    if (!disabled && onClick) {
       // let something else catch the event if our click handler is not set
       e.stopPropagation();
       onClick(value);
     }
-  }
+  };
 
   const filledSize = 15 / 2;
   const outlineOffset = 2;
@@ -76,6 +83,7 @@ export const SessionRadio = (props: Props) => {
         onChange={clickHandler}
         filledSize={filledSize * 2}
         outlineOffset={outlineOffset}
+        disabled={disabled}
         data-testid={`input-${value}`}
       />
       <StyledLabel
@@ -85,6 +93,7 @@ export const SessionRadio = (props: Props) => {
         outlineOffset={outlineOffset}
         beforeMargins={beforeMargins}
         aria-label={label}
+        disabled={disabled}
         data-testid={`label-${value}`}
       >
         {label}
@@ -94,7 +103,7 @@ export const SessionRadio = (props: Props) => {
 };
 
 const StyledInputOutlineSelected = styled(StyledInput)`
-  color: var(--text-primary-color);
+  color: ${props => (props.disabled ? 'var(--disabled-color)' : 'var(--text-primary-color)')};
   label:before,
   label:before {
     outline: none;
@@ -105,7 +114,12 @@ const StyledInputOutlineSelected = styled(StyledInput)`
 `;
 const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>`
   :before {
-    background: ${props => (props.selectedColor ? props.selectedColor : 'var(--primary-color)')};
+    background: ${props =>
+      props.disabled
+        ? 'var(--disabled-color)'
+        : props.selectedColor
+        ? props.selectedColor
+        : 'var(--primary-color)'};
     outline: 1px solid transparent; /* CSS variables don't work here */
   }
 `;
@@ -120,8 +134,9 @@ export const SessionRadioPrimaryColors = (props: {
   onClick: (value: string) => void;
   ariaLabel: string;
   color: string; // by default, we use the theme accent color but for the settings screen we need to be able to force it
+  disabled?: boolean;
 }) => {
-  const { inputName, value, active, onClick, color, ariaLabel } = props;
+  const { inputName, value, active, onClick, color, ariaLabel, disabled = false } = props;
 
   function clickHandler(e: ChangeEvent<any>) {
     e.stopPropagation();
@@ -144,6 +159,7 @@ export const SessionRadioPrimaryColors = (props: {
         outlineOffset={outlineOffset}
         selectedColor={color}
         aria-label={ariaLabel}
+        disabled={disabled}
       />
 
       <StyledLabelOutlineSelected
@@ -152,6 +168,7 @@ export const SessionRadioPrimaryColors = (props: {
         selectedColor={color}
         filledSize={filledSize}
         outlineOffset={outlineOffset}
+        disabled={disabled}
       >
         {''}
       </StyledLabelOutlineSelected>

ts/components/buttons/PanelButton.tsx

@@ -2,10 +2,11 @@ import React, { ReactNode } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 
 // NOTE Used for descendant components
-export const StyledContent = styled.div`
+export const StyledContent = styled.div<{ disabled: boolean }>`
   display: flex;
   align-items: center;
   width: 100%;
+  color: ${props => (props.disabled ? 'var(--disabled-color)' : 'inherit')};
 `;
 
 export const StyledText = styled.span`
@@ -62,9 +63,10 @@ export const PanelButtonGroup = (props: PanelButtonGroupProps) => {
 };
 
 const StyledPanelButton = styled.button<{
-  disableBg?: boolean;
+  noBackgroundColor?: boolean;
+  disabled: boolean;
 }>`
-  cursor: pointer;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -76,7 +78,8 @@ const StyledPanelButton = styled.button<{
   width: 100%;
   transition: var(--default-duration);
   background-color: ${props =>
-    !props.disableBg ? 'var(--right-panel-item-background-hover-color) !important' : null};
+    !props.noBackgroundColor ? 'var(--right-panel-item-background-hover-color) !important' : null};
+  color: ${props => (props.disabled ? 'var(--disabled-color)' : 'inherit')};
 
   :not(:last-child) {
     border-bottom: 1px solid var(--border-color);
@@ -86,7 +89,8 @@ const StyledPanelButton = styled.button<{
 export type PanelButtonProps = {
   // https://styled-components.com/docs/basics#styling-any-component
   className?: string;
-  disableBg?: boolean;
+  disabled?: boolean;
+  noBackgroundColor?: boolean;
   children: ReactNode;
   onClick: (...args: Array<any>) => void;
   dataTestId?: string;
@@ -94,12 +98,21 @@ export type PanelButtonProps = {
 };
 
 export const PanelButton = (props: PanelButtonProps) => {
-  const { className, disableBg, children, onClick, dataTestId, style } = props;
+  const {
+    className,
+    disabled = false,
+    noBackgroundColor,
+    children,
+    onClick,
+    dataTestId,
+    style,
+  } = props;
 
   return (
     <StyledPanelButton
       className={className}
-      disableBg={disableBg}
+      noBackgroundColor={noBackgroundColor}
+      disabled={disabled}
       onClick={onClick}
       style={style}
       data-testid={dataTestId}

ts/components/buttons/PanelIconButton.tsx

@@ -8,11 +8,16 @@ interface PanelIconButton extends Omit<PanelButtonProps, 'children'> {
 }
 
 export const PanelIconButton = (props: PanelIconButton) => {
-  const { iconType, text, disableBg, onClick, dataTestId } = props;
+  const { iconType, text, disabled = false, noBackgroundColor, onClick, dataTestId } = props;
 
   return (
-    <PanelButton disableBg={disableBg} onClick={onClick} dataTestId={dataTestId}>
-      <StyledContent>
+    <PanelButton
+      disabled={disabled}
+      noBackgroundColor={noBackgroundColor}
+      onClick={onClick}
+      dataTestId={dataTestId}
+    >
+      <StyledContent disabled={disabled}>
         <SessionIcon iconType={iconType} iconSize="medium" />
         <StyledText>{text}</StyledText>
       </StyledContent>

ts/components/buttons/PanelRadioButton.tsx

@@ -44,23 +44,40 @@ interface PanelRadioButtonProps extends Omit<PanelButtonProps, 'children' | 'onC
 }
 
 export const PanelRadioButton = (props: PanelRadioButtonProps) => {
-  const { value, text, subtitle, isSelected, onSelect, onUnselect, disableBg, dataTestId } = props;
+  const {
+    value,
+    text,
+    subtitle,
+    isSelected,
+    onSelect,
+    onUnselect,
+    disabled = false,
+    noBackgroundColor,
+    dataTestId,
+  } = props;
 
   return (
     <StyledPanelButton
-      disableBg={disableBg}
+      disabled={disabled}
+      noBackgroundColor={noBackgroundColor}
       onClick={() => {
         isSelected ? onUnselect?.('bye') : onSelect?.('hi');
       }}
       dataTestId={dataTestId}
     >
-      <StyledContent>
+      <StyledContent disabled={disabled}>
         <Flex container={true} width={'100%'} flexDirection={'column'} alignItems={'flex-start'}>
           <StyledText>{text}</StyledText>
           {subtitle && <StyledSubtitle>{subtitle}</StyledSubtitle>}
         </Flex>
         <StyledCheckContainer>
-          <SessionRadio active={isSelected} value={value} inputName={value} label="" />
+          <SessionRadio
+            active={isSelected}
+            value={value}
+            inputName={value}
+            label=""
+            disabled={disabled}
+          />
         </StyledCheckContainer>
       </StyledContent>
     </StyledPanelButton>

ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx

@@ -336,7 +336,7 @@ export const OverlayRightPanelSettings = () => {
           <PanelIconButton
             iconType={'timer50'}
             text={window.i18n('disappearingMessages')}
-            disableBg={true}
+            noBackgroundColor={true}
             onClick={() => {
               dispatch(setRightOverlayMode('disappearing-messages'));
             }}