059c8b55-5adf-41de-bd7c-982aac16578c

Committed 04 Mar 2024 06:52PM UTC coverage: 96.018%. First build

Build # 059c8b55-5adf-41de-bd7c-982aac16578c

Build Type

Pull #1730

circleci

Committed by

geotrev

Commit Message

feat: deprecates table exports and adds sub-component mapping

Pull Request Pull Request #1730: feat: adds Table sub-component mapping + deprecates stand-alone exports

Run Details

3251 of 3597 branches covered (90.38%)

Branch coverage included in aggregate %.

25 of 25 new or added lines in 1 file covered. (100.0%)

9915 of 10115 relevant lines covered (98.02%)

221.03 hits per line

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

57.14

/packages/colorpickers/src/elements/ColorPicker/ColorWell.tsx

/**
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

import React, { useRef, useState, useCallback, useContext, useEffect, useMemo } from 'react';
import throttle from 'lodash.throttle';
import { ThemeContext } from 'styled-components';
import { hslToHsv } from '../../utils/conversion';
import { getNextHsv, getThumbPosition } from '../../utils/saturation';
import { StyledColorWell, StyledColorWellThumb } from '../../styled';
import { IHSVColor } from '../../types';

interface IColorWellProps {
  hue: number;
  saturation: number;
  lightness: number;
  onChange?: (hsv: IHSVColor, event: MouseEvent) => void;
}

export const ColorWell: React.FC<IColorWellProps> = React.memo(
  ({ hue, saturation, lightness, onChange }) => {
    const { rtl } = useContext(ThemeContext);
    const containerRef = useRef<HTMLDivElement>(null);
    const hsv = hslToHsv(hue, saturation, lightness);
    const mouseActiveRef = useRef(false);

    // State for thumb position when change come from mouse activity on the color well
    const [x, setX] = useState(0);
    const [y, setY] = useState(0);
    const { topFromMouse, leftFromMouse } = getThumbPosition(x, y, rtl, containerRef);

    // State for thumb position when change come from saturation and lightness props without mouse activity
    const [topPosition, setTopPosition] = useState(0);
    const [leftPosition, setLeftPosition] = useState(0);

    useEffect(() => {
      setTopPosition(100 - hsv.v);
      setLeftPosition(rtl ? 100 - hsv.s : hsv.s);
    }, [hsv.s, hsv.v, rtl]);

    const throttledChange = useMemo(() => {
      return throttle((e: MouseEvent) => {
        if (containerRef.current) {
          const nextHsv = getNextHsv(e, hue, containerRef.current, rtl);

          onChange && onChange(nextHsv, e);
        }
      }, 50);
    }, [hue, rtl, onChange]);

    const handleMouseMove = useCallback(
      (e: MouseEvent) => {
        mouseActiveRef.current = true;
        setX(e.pageX);
        setY(e.pageY);
        throttledChange(e);
      },
      [throttledChange]
    );

    const handleMouseUp = useCallback(() => {
      mouseActiveRef.current = true;
      setTimeout(() => {
        mouseActiveRef.current = false;
      });
      throttledChange.cancel();
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleMouseUp);
    }, [throttledChange, handleMouseMove]);

    const handleMouseDown = useCallback(
      (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        mouseActiveRef.current = true;
        e.persist();
        handleMouseMove(e as any);
        throttledChange(e as any);
        window.addEventListener('mousemove', handleMouseMove);
        window.addEventListener('mouseup', handleMouseUp);
      },
      [throttledChange, handleMouseMove, handleMouseUp]
    );

    useEffect(() => {
      return () => {
        throttledChange.cancel();
      };
    }, [throttledChange]);

    return (
      /* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */
      <StyledColorWell
        hue={hue}
        ref={containerRef}
        role="presentation"
        onMouseDown={handleMouseDown}
      >
        <StyledColorWellThumb
          top={mouseActiveRef.current ? topFromMouse : topPosition}
          left={mouseActiveRef.current ? leftFromMouse : leftPosition}
        />
      </StyledColorWell>
    );
  }
);

ColorWell.displayName = 'ColorWell';

1	/**
2	* Copyright Zendesk, Inc.
3	*
4	* Use of this source code is governed under the Apache License, Version 2.0
5	* found at http://www.apache.org/licenses/LICENSE-2.0.
6	*/
7
8	import React, { useRef, useState, useCallback, useContext, useEffect, useMemo } from 'react';	3✔
9	import throttle from 'lodash.throttle';	3✔
10	import { ThemeContext } from 'styled-components';	3✔
11	import { hslToHsv } from '../../utils/conversion';	3✔
12	import { getNextHsv, getThumbPosition } from '../../utils/saturation';	3✔
13	import { StyledColorWell, StyledColorWellThumb } from '../../styled';	3✔
14	import { IHSVColor } from '../../types';
15
16	interface IColorWellProps {
17	hue: number;
18	saturation: number;
19	lightness: number;
20	onChange?: (hsv: IHSVColor, event: MouseEvent) => void;
21	}
22
23	export const ColorWell: React.FC<IColorWellProps> = React.memo(	276✔
24	({ hue, saturation, lightness, onChange }) => {
25	const { rtl } = useContext(ThemeContext);	168✔
26	const containerRef = useRef<HTMLDivElement>(null);	168✔
27	const hsv = hslToHsv(hue, saturation, lightness);	168✔
28	const mouseActiveRef = useRef(false);	168✔
29
30	// State for thumb position when change come from mouse activity on the color well
31	const [x, setX] = useState(0);	168✔
32	const [y, setY] = useState(0);	168✔
33	const { topFromMouse, leftFromMouse } = getThumbPosition(x, y, rtl, containerRef);	168✔
34
35	// State for thumb position when change come from saturation and lightness props without mouse activity
36	const [topPosition, setTopPosition] = useState(0);	168✔
37	const [leftPosition, setLeftPosition] = useState(0);	168✔
38
39	useEffect(() => {	168✔
40	setTopPosition(100 - hsv.v);	83✔
41	setLeftPosition(rtl ? 100 - hsv.s : hsv.s);	83✔
42	}, [hsv.s, hsv.v, rtl]);
43
44	const throttledChange = useMemo(() => {	168✔
45	return throttle((e: MouseEvent) => {	82✔
46	if (containerRef.current) {	×
47	const nextHsv = getNextHsv(e, hue, containerRef.current, rtl);	×
48
49	onChange && onChange(nextHsv, e);	×
50	}
51	}, 50);
52	}, [hue, rtl, onChange]);
53
54	const handleMouseMove = useCallback(	168✔
55	(e: MouseEvent) => {
56	mouseActiveRef.current = true;	×
57	setX(e.pageX);	×
58	setY(e.pageY);	×
59	throttledChange(e);	×
60	},
61	[throttledChange]
62	);
63
64	const handleMouseUp = useCallback(() => {	168✔
65	mouseActiveRef.current = true;	×
66	setTimeout(() => {	×
67	mouseActiveRef.current = false;	×
68	});
69	throttledChange.cancel();	×
70	window.removeEventListener('mousemove', handleMouseMove);	×
71	window.removeEventListener('mouseup', handleMouseUp);	×
72	}, [throttledChange, handleMouseMove]);
73
74	const handleMouseDown = useCallback(	168✔
75	(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
76	mouseActiveRef.current = true;	×
77	e.persist();	×
78	handleMouseMove(e as any);	×
79	throttledChange(e as any);	×
80	window.addEventListener('mousemove', handleMouseMove);	×
81	window.addEventListener('mouseup', handleMouseUp);	×
82	},
83	[throttledChange, handleMouseMove, handleMouseUp]
84	);
85
86	useEffect(() => {	168✔
87	return () => {	82✔
88	throttledChange.cancel();	82✔
89	};
90	}, [throttledChange]);
91
92	return (
93	/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */
94	<StyledColorWell
95	hue={hue}
96	ref={containerRef}
97	role="presentation"
98	onMouseDown={handleMouseDown}
99	>
100	<StyledColorWellThumb
101	top={mouseActiveRef.current ? topFromMouse : topPosition}	168!
102	left={mouseActiveRef.current ? leftFromMouse : leftPosition}	168!
103	/>
104	</StyledColorWell>
105	);
106	}
107	);
108
109	ColorWell.displayName = 'ColorWell';	3✔

zendeskgarden / react-components / 059c8b55-5adf-41de-bd7c-982aac16578c

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