6815137007

Committed 09 Nov 2023 05:12PM UTC coverage: 79.118% (+0.03%) from 79.087%

Build # 6815137007

Build Type

push

github

Committed by

web-flow

Commit Message

[feat] Effect manager - UI improvements (timezone, time slider, time dropdown) (#2433)

Run Details

5107 of 7614 branches covered (0.0%)

Branch coverage included in aggregate %.

199 of 219 new or added lines in 17 files covered. (90.87%)

8 existing lines in 4 files now uncovered.

12037 of 14055 relevant lines covered (85.64%)

169.89 hits per line

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

64.71

/src/components/src/effects/effect-time-selector.tsx

import React, {useMemo, useCallback} from 'react';
import styled, {withTheme} from 'styled-components';
import classNames from 'classnames';
import moment from 'moment-timezone';

import ItemSelector from '../common/item-selector/item-selector';
import {StyledTimePicker} from '../common/styled-components';
import {classList} from '../common/item-selector/dropdown-list';

const HEADER_ITEM_ID = 'HEADER_ITEM_ID';

export type EffectTimeSelectorProps = {
  value: string;
  onChange: (string) => void;
  theme?: any;
};

const StyledEffectTimeSelector = styled.div`
  .item-selector {
    background-color: transparent;
  }
  .item-selector .item-selector__dropdown {
    padding: 0px;
    width: 110px;
    height: 30px;
  }
  border: 1px solid ${props => props.theme.inputBgd};
  border-radius: 4px;
  :hover {
    border: 1px solid ${props => props.theme.inputBgdHover};
  }
  .active {
    border: 1px solid ${props => props.theme.activeColor};
    border-radius: 4px 4px 0px 0px;
  }
`;

const StyledLabel = styled.div`
  color: ${props => props.theme.effectPanelTextMain};
  font-size: ${props => props.theme.inputFontSize};
  height: 13px;
  display: flex;
  align-items: center;
`;

const DropdownListWrapper = styled.div`
  ${props => props.theme.dropdownList};
  background-color: ${props => props.theme.inputBgdHover};
  display: flex;
  flex-wrap: wrap;
  padding: 0px;
  max-height: 160px;
  border-radius: 0px 0px 4px 4px;
`;

const StyledDropdownListItem = styled.div`
  padding: 10px 5px 9px 10px;
  width: 100%;
  :hover {
    background-color: ${props => props.theme.effectPanelElementColorSelected};
    cursor: pointer;
  }
`;

// Generate time options for the dropdown with 30 min intervals.
const timeOptions = (() => {
  const m = moment().utcOffset(0);
  m.set({hour: 12, minute: 0, second: 0, millisecond: 0});

  const out: {name: string; id: string}[] = [];
  for (let i = 0; i < 48; i++) {
    out.push({name: m.format('hh:mm A'), id: m.format('HH:mm')});
    m.add(30, 'minutes');
  }
  return out;
})();

const getDisplayOption = op => op.name;
const getOptionValue = op => op.id;

/**
 * A component to render TimePicker as the header for the dropdown component.
 */
const EffectTimeListItem = ({value}) => {
  if (value?.id === HEADER_ITEM_ID) {
    return (
      <StyledTimePicker
        value={value.value}
        onChange={value.onChange}
        onClick={value.onClick}
        disableClock={true}
        format={'hh:mm a'}
      />
    );
  }

  return <StyledLabel>{value.name}</StyledLabel>;
};

const EffectTimeDropdownList = ({
  onOptionSelected,
  options,
  selectionIndex,
  customListItemComponent
}) => {
  const onSelectOption = useCallback(
    (e, value) => {
      e.preventDefault();
      onOptionSelected(value);
    },
    [onOptionSelected]
  );

  const ListItemComponent = customListItemComponent;

  return (
    <DropdownListWrapper className={classList.list}>
      {options.map((value, i) => (
        <StyledDropdownListItem
          className={classNames('effect-type-selector__item', {
            hover: selectionIndex === i
          })}
          key={`${value.id}_${i}`}
          onMouseDown={e => onSelectOption(e, value)}
          onClick={e => onSelectOption(e, value)}
        >
          <ListItemComponent value={value} />
        </StyledDropdownListItem>
      ))}
    </DropdownListWrapper>
  );
};

EffectTimeSelectorFactory.deps = [];

function EffectTimeSelectorFactory() {
  const EffectTimeSelector: React.FC<EffectTimeSelectorProps> = ({
    value,
    onChange
  }: EffectTimeSelectorProps) => {
    // Selected item is rendered as TimePicker in EffectTimeListItem
    const selectedItems = useMemo(() => {
      return [
        {
          id: HEADER_ITEM_ID,
          value,
          onChange,
          onClick: e => {
            // DatePicker is used as custom header.
            // Don't open the dropdown when the user is editing time values directly.
            const name = e?.target?.name;
            if (name === 'hour12' || name === 'minute' || name === 'amPm') {
              e.stopPropagation();
            }
          }
        }
      ];
    }, [value, onChange]);

    return (
      <StyledEffectTimeSelector>
        <ItemSelector
          selectedItems={selectedItems}
          options={timeOptions}
          multiSelect={false}
          searchable={false}
          placeholder=""
          filterOption="name"
          onChange={onChange}
          getOptionValue={getOptionValue}
          displayOption={getDisplayOption}
          DropDownLineItemRenderComponent={EffectTimeListItem}
          DropDownRenderComponent={EffectTimeDropdownList}
        />
      </StyledEffectTimeSelector>
    );
  };

  return withTheme(EffectTimeSelector);
}

export default EffectTimeSelectorFactory;

1	import React, {useMemo, useCallback} from 'react';
2	import styled, {withTheme} from 'styled-components';
3	import classNames from 'classnames';
4	import moment from 'moment-timezone';
5
6	import ItemSelector from '../common/item-selector/item-selector';
7	import {StyledTimePicker} from '../common/styled-components';
8	import {classList} from '../common/item-selector/dropdown-list';
9
10	const HEADER_ITEM_ID = 'HEADER_ITEM_ID';	6✔
11
12	export type EffectTimeSelectorProps = {
13	value: string;
14	onChange: (string) => void;
15	theme?: any;
16	};
17
18	const StyledEffectTimeSelector = styled.div`	6✔
19	.item-selector {
20	background-color: transparent;
21	}
22	.item-selector .item-selector__dropdown {
23	padding: 0px;
24	width: 110px;
25	height: 30px;
26	}
27	border: 1px solid ${props => props.theme.inputBgd};
28	border-radius: 4px;
29	:hover {
30	border: 1px solid ${props => props.theme.inputBgdHover};	6✔
31	}
32	.active {
33	border: 1px solid ${props => props.theme.activeColor};	6✔
34	border-radius: 4px 4px 0px 0px;
35	}
36	`;
37
38	const StyledLabel = styled.div`	6✔
39	color: ${props => props.theme.effectPanelTextMain};
40	font-size: ${props => props.theme.inputFontSize};	6✔
41	height: 13px;
42	display: flex;
43	align-items: center;
44	`;
45
46	const DropdownListWrapper = styled.div`	6✔
47	${props => props.theme.dropdownList};
48	background-color: ${props => props.theme.inputBgdHover};
49	display: flex;
50	flex-wrap: wrap;
51	padding: 0px;
52	max-height: 160px;
53	border-radius: 0px 0px 4px 4px;
54	`;
55
56	const StyledDropdownListItem = styled.div`	6✔
57	padding: 10px 5px 9px 10px;
58	width: 100%;
59	:hover {
60	background-color: ${props => props.theme.effectPanelElementColorSelected};	8✔
61	cursor: pointer;
62	}
63	`;
64
65	// Generate time options for the dropdown with 30 min intervals.
66	const timeOptions = (() => {	8✔
67	const m = moment().utcOffset(0);
68	m.set({hour: 12, minute: 0, second: 0, millisecond: 0});	6✔
69
70	const out: {name: string; id: string}[] = [];
NEW 71	for (let i = 0; i < 48; i++) {	×
NEW 72	out.push({name: m.format('hh:mm A'), id: m.format('HH:mm')});	×
73	m.add(30, 'minutes');	12✔
NEW 74	}	×
75	return out;
76	})();
77
78	const getDisplayOption = op => op.name;	6✔
79	const getOptionValue = op => op.id;
80
81	/**	6✔
82	* A component to render TimePicker as the header for the dropdown component.
83	*/	6✔
84	const EffectTimeListItem = ({value}) => {
85	if (value?.id === HEADER_ITEM_ID) {
86	return (
87	<StyledTimePicker
88	value={value.value}	6✔
89	onChange={value.onChange}
90	onClick={value.onClick}
91	disableClock={true}	6✔
NEW 92	format={'hh:mm a'}	×
93	/>
94	);
95	}
96
NEW 97	return <StyledLabel>{value.name}</StyledLabel>;	×
98	};
99
100	const EffectTimeDropdownList = ({
101	onOptionSelected,
102	options,
103	selectionIndex,
104	customListItemComponent	6✔
105	}) => {
106	const onSelectOption = useCallback(	8✔
107	(e, value) => {
108	e.preventDefault();
109	onOptionSelected(value);	8!
110	},
111	[onOptionSelected]
112	);
113
114	const ListItemComponent = customListItemComponent;
115
116	return (
NEW 117	<DropdownListWrapper className={classList.list}>	×
118	{options.map((value, i) => (
119	<StyledDropdownListItem
120	className={classNames('effect-type-selector__item', {
121	hover: selectionIndex === i
122	})}
NEW 123	key={`${value.id}_${i}`}	×
124	onMouseDown={e => onSelectOption(e, value)}
NEW 125	onClick={e => onSelectOption(e, value)}	×
126	>
NEW 127	<ListItemComponent value={value} />	×
128	</StyledDropdownListItem>
129	))}
130	</DropdownListWrapper>
131	);
132	};
133
NEW 134	EffectTimeSelectorFactory.deps = [];	×
135
136	function EffectTimeSelectorFactory() {
NEW 137	const EffectTimeSelector: React.FC<EffectTimeSelectorProps> = ({	×
138	value,
139	onChange
140	}: EffectTimeSelectorProps) => {
141	// Selected item is rendered as TimePicker in EffectTimeListItem
142	const selectedItems = useMemo(() => {
143	return [
144	{
NEW 145	id: HEADER_ITEM_ID,	×
146	value,
147	onChange,
NEW 148	onClick: e => {	×
149	// DatePicker is used as custom header.
150	// Don't open the dropdown when the user is editing time values directly.
151	const name = e?.target?.name;
152	if (name === 'hour12' \|\| name === 'minute' \|\| name === 'amPm') {
153	e.stopPropagation();	6✔
154	}
155	}
156	}
157	];
158	}, [value, onChange]);	8✔
159
160	return (	8!
161	<StyledEffectTimeSelector>
162	<ItemSelector
163	selectedItems={selectedItems}
164	options={timeOptions}
165	multiSelect={false}	8✔
166	searchable={false}
167	placeholder=""
168	filterOption="name"
169	onChange={onChange}
170	getOptionValue={getOptionValue}
171	displayOption={getDisplayOption}
172	DropDownLineItemRenderComponent={EffectTimeListItem}
173	DropDownRenderComponent={EffectTimeDropdownList}
174	/>
175	</StyledEffectTimeSelector>
176	);
177	};
178
NEW 179	return withTheme(EffectTimeSelector);	×
180	}
181
182	export default EffectTimeSelectorFactory;

keplergl / kepler.gl / 6815137007

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