11411095067

Committed 18 Oct 2024 09:12PM UTC coverage: 31.649% (+0.007%) from 31.642%

Build # 11411095067

Build Type

push

github

Committed by

darkruby501

Commit Message

factor votearrow into solid and hollow

Run Details

5072 of 41883 branches covered (12.11%)

Branch coverage included in aggregate %.

30 of 48 new or added lines in 5 files covered. (62.5%)

1 existing line in 1 file now uncovered.

29636 of 67784 relevant lines covered (43.72%)

180.59 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

35.29

/packages/lesswrong/components/votes/VoteArrowIconHollow.tsx

import React from 'react';
import classNames from 'classnames';
import UpArrowIcon from '@material-ui/icons/KeyboardArrowUp';
import IconButton from '@material-ui/core/IconButton';
import Transition from 'react-transition-group/Transition';
import { useVoteColors } from './useVoteColors';
import { registerComponent } from '@/lib/vulcan-lib';
import { isEAForum } from '../../lib/instanceSettings';
import type { VoteArrowIconProps } from './VoteArrowIcon';

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    color: theme.palette.grey[400],
    fontSize: 'inherit',
    width: 'initial',
    height: 'initial',
    padding: 0,
    '&:hover': {
      backgroundColor: 'transparent',
    },
  },
  disabled: {
    cursor: 'not-allowed',
  },
  smallArrow: {
    fontSize: '50%',
    opacity: isEAForum ? 0.7 : 0.6,
  },
  up: {
  },
  right: {
    transform: 'rotate(-270deg)',
  },
  down: {
    transform: 'rotate(-180deg)',
  },
  left: {
    transform: 'rotate(-90deg)',
  },
  bigArrow: {
    position: 'absolute',
    top: '-70%',
    fontSize: '82%',
    opacity: 0,
    transition: `opacity ${theme.voting.strongVoteDelay}ms cubic-bezier(0.74, -0.01, 1, 1) 0ms`,
  },
  bigArrowCompleted: {
    fontSize: '90%',
    top: '-75%',
  },
  entering: {
    opacity: 1,
  },
  entered: {
    opacity: 1,
  },
  exiting: {
    transition: 'opacity 150ms cubic-bezier(0.74, -0.01, 1, 1) 0ms',
  },
});

const VoteArrowIconHollow = ({
  orientation,
  enabled = true,
  color,
  voted,
  eventHandlers,
  bigVotingTransition,
  bigVoted,
  bigVoteCompleted,
  alwaysColored,
  strongVoteDelay,
  classes,
}: VoteArrowIconProps & {
  classes: ClassesType
}) => {
  const { mainColor, lightColor } = useVoteColors(color);

  const handlers = enabled ? eventHandlers : {};

  return (
    <IconButton
      className={classNames(
        classes.root,
        classes[orientation],
        !enabled && classes.disabled
      )}
      onMouseDown={handlers.handleMouseDown}
      onMouseUp={handlers.handleMouseUp}
      onMouseOut={handlers.clearState}
      onClick={handlers.handleClick}
      disableRipple
    >
      <UpArrowIcon
        style={{ color: voted || alwaysColored ? mainColor : 'inherit' }}
        className={classNames(classes.smallArrow)}
        viewBox="6 6 12 12"
      />
      <Transition in={!!(bigVotingTransition || bigVoted)} timeout={strongVoteDelay}>
        {(state) => (
          <UpArrowIcon
            style={bigVoteCompleted || bigVoted ? { color: lightColor } : undefined}
            className={classNames(
              classes.bigArrow,
              bigVoteCompleted && classes.bigArrowCompleted,
                  classes[state]
            )}
            viewBox="6 6 12 12"
        />)}
      </Transition>
    </IconButton>
  );
};

const VoteArrowIconHollowComponent = registerComponent(
  'VoteArrowIconHollow',
  VoteArrowIconHollow,
  { styles }
);

declare global {
  interface ComponentTypes {
    VoteArrowIconHollow: typeof VoteArrowIconHollowComponent;
  }
}

1	import React from 'react';	1✔
2	import classNames from 'classnames';	1✔
3	import UpArrowIcon from '@material-ui/icons/KeyboardArrowUp';	1✔
4	import IconButton from '@material-ui/core/IconButton';	1✔
5	import Transition from 'react-transition-group/Transition';	1✔
6	import { useVoteColors } from './useVoteColors';	1✔
7	import { registerComponent } from '@/lib/vulcan-lib';	1✔
8	import { isEAForum } from '../../lib/instanceSettings';	1✔
9	import type { VoteArrowIconProps } from './VoteArrowIcon';
10
11	const styles = (theme: ThemeType): JssStyles => ({	1✔
12	root: {
13	color: theme.palette.grey[400],
14	fontSize: 'inherit',
15	width: 'initial',
16	height: 'initial',
17	padding: 0,
18	'&:hover': {
19	backgroundColor: 'transparent',
20	},
21	},
22	disabled: {
23	cursor: 'not-allowed',
24	},
25	smallArrow: {
26	fontSize: '50%',
27	opacity: isEAForum ? 0.7 : 0.6,	1!
28	},
29	up: {
30	},
31	right: {
32	transform: 'rotate(-270deg)',
33	},
34	down: {
35	transform: 'rotate(-180deg)',
36	},
37	left: {
38	transform: 'rotate(-90deg)',
39	},
40	bigArrow: {
41	position: 'absolute',
42	top: '-70%',
43	fontSize: '82%',
44	opacity: 0,
45	transition: `opacity ${theme.voting.strongVoteDelay}ms cubic-bezier(0.74, -0.01, 1, 1) 0ms`,
46	},
47	bigArrowCompleted: {
48	fontSize: '90%',
49	top: '-75%',
50	},
51	entering: {
52	opacity: 1,
53	},
54	entered: {
55	opacity: 1,
56	},
57	exiting: {
58	transition: 'opacity 150ms cubic-bezier(0.74, -0.01, 1, 1) 0ms',
59	},
60	});
61
62	const VoteArrowIconHollow = ({	1✔
63	orientation,
64	enabled = true,	×
65	color,
66	voted,
67	eventHandlers,
68	bigVotingTransition,
69	bigVoted,
70	bigVoteCompleted,
71	alwaysColored,
72	strongVoteDelay,
73	classes,
74	}: VoteArrowIconProps & {
75	classes: ClassesType
76	}) => {
NEW 77	const { mainColor, lightColor } = useVoteColors(color);	×
78
NEW 79	const handlers = enabled ? eventHandlers : {};	×
80
NEW 81	return (	×
82	<IconButton
83	className={classNames(
84	classes.root,
85	classes[orientation],
86	!enabled && classes.disabled	×
87	)}
88	onMouseDown={handlers.handleMouseDown}
89	onMouseUp={handlers.handleMouseUp}
90	onMouseOut={handlers.clearState}
91	onClick={handlers.handleClick}
92	disableRipple
93	>
94	<UpArrowIcon
95	style={{ color: voted \|\| alwaysColored ? mainColor : 'inherit' }}	×
96	className={classNames(classes.smallArrow)}
97	viewBox="6 6 12 12"
98	/>
99	<Transition in={!!(bigVotingTransition \|\| bigVoted)} timeout={strongVoteDelay}>	×
100	{(state) => (
NEW 101	<UpArrowIcon	×
102	style={bigVoteCompleted \|\| bigVoted ? { color: lightColor } : undefined}	×
103	className={classNames(
104	classes.bigArrow,
105	bigVoteCompleted && classes.bigArrowCompleted,	×
106	classes[state]
107	)}
108	viewBox="6 6 12 12"
109	/>)}
110	</Transition>
111	</IconButton>
112	);
113	};
114
115	const VoteArrowIconHollowComponent = registerComponent(	1✔
116	'VoteArrowIconHollow',
117	VoteArrowIconHollow,
118	{ styles }
119	);
120
121	declare global {
122	interface ComponentTypes {
123	VoteArrowIconHollow: typeof VoteArrowIconHollowComponent;
124	}
125	}

ForumMagnum / ForumMagnum / 11411095067

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous