[Web] Allow selecting most texts, except buttons and icons

#87

packages/components/src/components/animated/AnimatedIcon.tsx

@@ -16,6 +16,7 @@ export interface AnimatedIconProps extends Omit<IconProps, 'color' | 'style'> {
 
 export const AnimatedIcon = ({ color, style, ...props }: AnimatedIconProps) => (
   <AnimatedIconComponent
+    selectable={false}
     {...props}
     style={StyleSheet.flatten([{ color } as any, style])}
   />

packages/components/src/components/columns/ColumnHeaderItem.tsx

@@ -193,7 +193,6 @@ export function ColumnHeaderItem(props: ColumnHeaderItemProps) {
                 !!iconName && (
                   <AnimatedIcon
                     color={theme.foregroundColor}
-                    selectable={selectable}
                     name={iconName}
                     style={[
                       styles.icon,

packages/components/src/components/common/Link.tsx

@@ -75,6 +75,7 @@ export function Link(props: LinkProps) {
         web: {
           accessibilityRole: 'link',
           href,
+          selectable: true,
           target: openOnNewTab ? '_blank' : undefined,
           ...otherProps,
           ...webProps,

packages/components/src/components/common/TouchableOpacity.tsx

@@ -7,13 +7,14 @@ import { analytics } from '../../libs/analytics'
 import { AnimatedTouchableOpacity } from '../animated/AnimatedTouchableOpacity'
 
 export interface TouchableOpacityProps extends TouchableOpacityComponentProps {
-  analyticsCategory?: 'button' | 'checkbox' | 'link' | string | undefined
   analyticsAction?: 'press' | 'toggle' | string | undefined
+  analyticsCategory?: 'button' | 'checkbox' | 'link' | string | undefined
   analyticsLabel?: string | undefined
-  analyticsValue?: number | undefined
   analyticsPayload?: Record<string, string | number | undefined> | undefined
+  analyticsValue?: number | undefined
   animated?: boolean
   className?: string
+  selectable?: boolean
 }
 
 export const TouchableOpacity = React.forwardRef(
@@ -25,6 +26,7 @@ export const TouchableOpacity = React.forwardRef(
       analyticsValue,
       animated,
       onPress: _onPress,
+      selectable,
       ...props
     }: TouchableOpacityProps,
     ref: any,
@@ -53,7 +55,11 @@ export const TouchableOpacity = React.forwardRef(
         ref={ref}
         className={`touchable-opacity ${props.className || ''}`.trim()}
         onPress={onPress}
-        style={[props.style, props.disabled && { opacity: 0.5 }]}
+        style={[
+          props.style,
+          props.disabled && { opacity: 0.5 },
+          selectable === true && ({ userSelect: undefined } as any),
+        ]}
       />
     )
   },