3437763424

Build Type

push

github

Committed by GitHub

Commit Message

fix: cli template and widget compile issue (#1717)

Run Details

7226 of 15438 branches covered (46.81%)

Branch coverage included in aggregate %.

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

5 existing lines in 1 file now uncovered.

11502 of 20858 relevant lines covered (55.14%)

107719.48 hits per line

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

29.31

/packages/ringcentral-widgets/components/MeetingConfigs/MeetingDate.tsx

import 'react-widgets/dist/css/react-widgets.css';

import React, { FunctionComponent } from 'react';

import classnames from 'classnames';
import Moment from 'moment';
import DateTimePicker from 'react-widgets/lib/DateTimePicker';

import DateIcon from '../../assets/images/Date.svg';
import TimeIcon from '../../assets/images/Time.svg';
import MeetingSection from '../MeetingSection';
import { NO_NUMBER_REGEX } from './constants';
import i18n from './i18n';
import styles from './styles.scss';

interface MeetingDateProps {
  update: (...args: any[]) => any;
  currentLocale: string;
  meeting: any;
  that: any;
  onToggle: (...args: any[]) => any;
  useTimePicker: boolean;
  isRecurring: boolean;
}

const MeetingDate: FunctionComponent<MeetingDateProps> = ({
  currentLocale,
  meeting,
  update,
  that,
  onToggle,
  useTimePicker,
  isRecurring,
}) => {
  // The default value of the text input is in the componentDidMount.
  const formatDisplay = (Hours, Minutes) => {
    setTimeout(() => {
      that.minutes.value = `0${Minutes}0`.slice(-3, -1);
      const currentHours = `0${Hours}0`.slice(-3, -1);
      if (useTimePicker) {
        if (currentHours > 12) {
          const convertedHours = +currentHours % 12;
          that.hours.value =
            convertedHours.toString().length === 1
              ? `0${convertedHours}`
              : convertedHours;
        }
      }
    }, 0);
  };
  const changeTime = () => {
    if (useTimePicker) {
      return;
    }
    setTimeout(() => {
      const allInputBlur = document.querySelectorAll(
        'input[flag=timeInput]:focus',
      ).length;
      if (!allInputBlur && that.hours) {
        const startTime = new Date(meeting.schedule.startTime);
        const hours = parseInt(that.hours.value, 10);
        const minutes = parseInt(that.minutes.value, 10);
        startTime.setHours(hours);
        startTime.setMinutes(minutes);
        let time = startTime;
        if (startTime.getTime() > new Date().getTime()) {
          update({
            ...meeting,
            schedule: {
              ...meeting.schedule,
              startTime: startTime.getTime(),
            },
          });
        } else {
          time = new Date(meeting.schedule.startTime);
        }
        const Minutes = time.getMinutes();
        const Hours = time.getHours();
        formatDisplay(Hours, Minutes);
      }
    }, 100);
  };
  const accumulator = (event, max) => {
    const currentValue = parseInt(event.target.value, 10);
    const isValid = (value) =>
      currentValue > 0 - value && currentValue < max - value;
    const isUpKey = event.keyCode === 38;
    if (isUpKey) {
      const value = isValid(1) ? currentValue + 1 : 0;
      event.target.value = `0${value}0`.slice(-3, -1);
    }
    const isDownKey = event.keyCode === 40;
    if (isDownKey) {
      const value = isValid(0) ? currentValue - 1 : max - 1;
      event.target.value = `0${value}0`.slice(-3, -1);
    }
  };
  const preventDatePickerReplay = (isFocus) => {
    that.dateBlur = true;
    setTimeout(() => {
      if (!isFocus && !that.timeBlur) {
        that.topic.focus();
      }
      that.dateBlur = false;
    }, 200);
  };
  const preventTimePickerReplay = (isFocus) => {
    that.timeBlur = true;
    setTimeout(() => {
      if (!isFocus && !that.dateBlur) {
        that.topic.focus();
      }
      that.timeBlur = false;
    }, 200);
  };
  let minMinute;
  if (meeting.schedule && meeting.schedule.startTime && useTimePicker) {
    const isToday = Moment(meeting.schedule.startTime).isSame(
      new Date(),
      'day',
    );
    if (isToday) {
      const currentMinute = +Moment().format('mm');
      const nearlest = Moment()
        .set('minute', Math.ceil(currentMinute / 15) * 15)
        .toDate();
      minMinute = nearlest;
    }
    console.log('prepared minTime', +minMinute);
  }
  return !isRecurring ? (
    <MeetingSection title={i18n.getString('when', currentLocale)}>
      <div className={styles.dateTimeBox}>
        <div className={styles.list}>
          <div className={styles.datePicker}>
            <DateTimePicker
              culture={currentLocale}
              time={false}
              value={new Date(meeting.schedule.startTime)}
              onChange={(currentStartTime) => {
                preventDatePickerReplay(false);
                if (currentStartTime) {
                  const date = new Date(meeting.schedule.startTime);
                  date.setFullYear(
                    currentStartTime.getFullYear(),
                    currentStartTime.getMonth(),
                    currentStartTime.getDate(),
                  );
                  let startTime = date.getTime();
                  const now = new Date().getTime();
                  if (startTime < now) {
                    startTime = now;
                    const Minutes = new Date().getMinutes();
                    const Hours = new Date().getHours();
                    formatDisplay(Hours, Minutes);
                  }
                  update({
                    ...meeting,
                    schedule: {
                      ...meeting.schedule,
                      startTime,
                    },
                  });
                }
              }}
              onBlur={() => {
                preventDatePickerReplay(false);
              }}
              onToggle={preventDatePickerReplay}
              ref={(ref) => {
                that.date = ref;
              }}
              format="MM/DD/YY"
              min={new Date()}
            />
            <div
              onClick={() => onToggle('date')}
              data-sign="dateText"
              className={classnames(styles.dateTimeText, styles.dateText)}
            >
              {Moment(meeting.schedule.startTime).format('MM/DD/YY')}
            </div>
          </div>
          <div
            ref={(ref) => {
              that.dateIcon = ref;
            }}
            className={styles.dateIcon}
          >
            <DateIcon
              onClick={() => onToggle('date')}
              className={styles.icon}
            />
          </div>
        </div>

        <div className={styles.list}>
          <div
            className={classnames([
              styles.timePicker,
              useTimePicker && styles.useTimePicker,
            ])}
          >
            <DateTimePicker
              culture={currentLocale}
              date={false}
              step={15}
              value={new Date(meeting.schedule.startTime)}
              onChange={(startTime) => {
                preventTimePickerReplay(false);
                if (startTime) {
                  update({
                    ...meeting,
                    schedule: {
                      ...meeting.schedule,
                      startTime: startTime.getTime(),
                    },
                  });
                }
              }}
              onBlur={() => {
                preventTimePickerReplay(false);
              }}
              onToggle={preventTimePickerReplay}
              ref={(ref) => {
                that.time = ref;
              }}
              format="hh:mm A"
              min={minMinute}
            />
            <div
              className={styles.timeText}
              onClick={() => {
                if (useTimePicker) {
                  onToggle('time');
                }
              }}
            >
              <input
                flag="timeInput"
                disabled={useTimePicker}
                ref={(ref) => {
                  that.hours = ref;
                }}
                data-sign="timeInputHour"
                className={styles.timeInput}
                defaultValue={Moment(meeting.schedule.startTime).format(
                  useTimePicker ? 'hh' : 'HH',
                )}
                onChange={({ target }) => {
                  that.hours.value = target.value.replace(NO_NUMBER_REGEX, '');
                  const isSelectionEnd = target.selectionEnd === 2;
                  if (isSelectionEnd) {
                    that.minutes.value = '';
                    that.minutes.focus();
                  }
                }}
                onKeyDown={(event) => {
                  accumulator(event, 24);
                  const isRightKey = event.keyCode === 39;
                  const isSelectionEnd = event.target.selectionEnd === 2;
                  if (isRightKey && isSelectionEnd) {
                    that.minutes.focus();
                  }
                }}
                onBlur={changeTime}
                maxLength={2}
                type="text"
              />
              <div className={styles.colon}>:</div>
              <input
                flag="timeInput"
                disabled={useTimePicker}
                ref={(ref) => {
                  that.minutes = ref;
                }}
                data-sign="timeInputMinute"
                className={styles.timeInput}
                defaultValue={Moment(meeting.schedule.startTime).format('mm')}
                onKeyDown={(event) => {
                  const isDelKey = event.keyCode === 8;
                  const isLeftKey = event.keyCode === 37;
                  const isSelectionHead = event.target.selectionEnd === 0;
                  if (isSelectionHead && (isDelKey || isLeftKey)) {
                    that.hours.focus();
                    that.hours.setSelectionRange(2, 2);
                  }
                  accumulator(event, 60);
                }}
                onChange={({ target }) => {
                  that.minutes.value = target.value.replace(
                    NO_NUMBER_REGEX,
                    '',
                  );
                }}
                onBlur={changeTime}
                maxLength={2}
                type="text"
              />
              {useTimePicker && (
                <div className={styles.colon}>
                  {Moment(meeting.schedule.startTime).locale('en').format('A')}
                </div>
              )}
            </div>
          </div>
          <div
            ref={(ref) => {
              that.TimeIcon = ref;
            }}
            className={styles.timeIcon}
          >
            <TimeIcon
              onClick={() => {
                if (useTimePicker) {
                  onToggle('time');
                }
              }}
              className={styles.icon}
            />
          </div>
        </div>
      </div>
    </MeetingSection>
  ) : null;
};

export { MeetingDate };

1	import 'react-widgets/dist/css/react-widgets.css';
2
3	import React, { FunctionComponent } from 'react';
4
5	import classnames from 'classnames';
6	import Moment from 'moment';
7	import DateTimePicker from 'react-widgets/lib/DateTimePicker';
8
9	import DateIcon from '../../assets/images/Date.svg';
10	import TimeIcon from '../../assets/images/Time.svg';
11	import MeetingSection from '../MeetingSection';
12	import { NO_NUMBER_REGEX } from './constants';
13	import i18n from './i18n';
14	import styles from './styles.scss';
15
16	interface MeetingDateProps {
17	update: (...args: any[]) => any;
18	currentLocale: string;
19	meeting: any;
20	that: any;
21	onToggle: (...args: any[]) => any;
22	useTimePicker: boolean;
23	isRecurring: boolean;
24	}
25
26	const MeetingDate: FunctionComponent<MeetingDateProps> = ({	34✔
27	currentLocale,
28	meeting,
29	update,
30	that,
31	onToggle,
32	useTimePicker,
33	isRecurring,
34	}) => {
35	// The default value of the text input is in the componentDidMount.
36	const formatDisplay = (Hours, Minutes) => {	33✔
37	setTimeout(() => {	×
38	that.minutes.value = `0${Minutes}0`.slice(-3, -1);	×
39	const currentHours = `0${Hours}0`.slice(-3, -1);	×
40	if (useTimePicker) {	×
41	if (currentHours > 12) {	×
42	const convertedHours = +currentHours % 12;	×
43	that.hours.value =	×
44	convertedHours.toString().length === 1	×
45	? `0${convertedHours}`
46	: convertedHours;
47	}
48	}
49	}, 0);
50	};
51	const changeTime = () => {	33✔
52	if (useTimePicker) {	×
53	return;	×
54	}
55	setTimeout(() => {	×
56	const allInputBlur = document.querySelectorAll(	×
57	'input[flag=timeInput]:focus',
58	).length;
59	if (!allInputBlur && that.hours) {	×
60	const startTime = new Date(meeting.schedule.startTime);	×
61	const hours = parseInt(that.hours.value, 10);	×
62	const minutes = parseInt(that.minutes.value, 10);	×
63	startTime.setHours(hours);	×
64	startTime.setMinutes(minutes);	×
65	let time = startTime;	×
66	if (startTime.getTime() > new Date().getTime()) {	×
67	update({	×
68	...meeting,
69	schedule: {
70	...meeting.schedule,
71	startTime: startTime.getTime(),
72	},
73	});
74	} else {
75	time = new Date(meeting.schedule.startTime);	×
76	}
77	const Minutes = time.getMinutes();	×
78	const Hours = time.getHours();	×
79	formatDisplay(Hours, Minutes);	×
80	}
81	}, 100);
82	};
83	const accumulator = (event, max) => {	33✔
84	const currentValue = parseInt(event.target.value, 10);	×
85	const isValid = (value) =>	×
86	currentValue > 0 - value && currentValue < max - value;	×
87	const isUpKey = event.keyCode === 38;	×
88	if (isUpKey) {	×
89	const value = isValid(1) ? currentValue + 1 : 0;	×
90	event.target.value = `0${value}0`.slice(-3, -1);	×
91	}
92	const isDownKey = event.keyCode === 40;	×
93	if (isDownKey) {	×
94	const value = isValid(0) ? currentValue - 1 : max - 1;	×
95	event.target.value = `0${value}0`.slice(-3, -1);	×
96	}
97	};
98	const preventDatePickerReplay = (isFocus) => {	33✔
99	that.dateBlur = true;	1✔
100	setTimeout(() => {	1✔
UNCOV 101	if (!isFocus && !that.timeBlur) {	×
102	that.topic.focus();	×
103	}
UNCOV 104	that.dateBlur = false;	×
105	}, 200);
106	};
107	const preventTimePickerReplay = (isFocus) => {	33✔
108	that.timeBlur = true;	1✔
109	setTimeout(() => {	1✔
UNCOV 110	if (!isFocus && !that.dateBlur) {	×
UNCOV 111	that.topic.focus();	×
112	}
UNCOV 113	that.timeBlur = false;	×
114	}, 200);
115	};
116	let minMinute;
117	if (meeting.schedule && meeting.schedule.startTime && useTimePicker) {	33!
118	const isToday = Moment(meeting.schedule.startTime).isSame(	33✔
119	new Date(),
120	'day',
121	);
122	if (isToday) {	33✔
123	const currentMinute = +Moment().format('mm');	10✔
124	const nearlest = Moment()	10✔
125	.set('minute', Math.ceil(currentMinute / 15) * 15)
126	.toDate();
127	minMinute = nearlest;	10✔
128	}
129	console.log('prepared minTime', +minMinute);	33✔
130	}
131	return !isRecurring ? (	33✔
132	<MeetingSection title={i18n.getString('when', currentLocale)}>
133	<div className={styles.dateTimeBox}>
134	<div className={styles.list}>
135	<div className={styles.datePicker}>
136	<DateTimePicker
137	culture={currentLocale}
138	time={false}
139	value={new Date(meeting.schedule.startTime)}
140	onChange={(currentStartTime) => {
141	preventDatePickerReplay(false);	1✔
142	if (currentStartTime) {	1!
143	const date = new Date(meeting.schedule.startTime);	1✔
144	date.setFullYear(	1✔
145	currentStartTime.getFullYear(),
146	currentStartTime.getMonth(),
147	currentStartTime.getDate(),
148	);
149	let startTime = date.getTime();	1✔
150	const now = new Date().getTime();	1✔
151	if (startTime < now) {	1!
152	startTime = now;	×
153	const Minutes = new Date().getMinutes();	×
154	const Hours = new Date().getHours();	×
155	formatDisplay(Hours, Minutes);	×
156	}
157	update({	1✔
158	...meeting,
159	schedule: {
160	...meeting.schedule,
161	startTime,
162	},
163	});
164	}
165	}}
166	onBlur={() => {
167	preventDatePickerReplay(false);	×
168	}}
169	onToggle={preventDatePickerReplay}
170	ref={(ref) => {
171	that.date = ref;	63✔
172	}}
173	format="MM/DD/YY"
174	min={new Date()}
175	/>
176	<div
177	onClick={() => onToggle('date')}	×
178	data-sign="dateText"
179	className={classnames(styles.dateTimeText, styles.dateText)}
180	>
181	{Moment(meeting.schedule.startTime).format('MM/DD/YY')}
182	</div>
183	</div>
184	<div
185	ref={(ref) => {
186	that.dateIcon = ref;	63✔
187	}}
188	className={styles.dateIcon}
189	>
190	<DateIcon
191	onClick={() => onToggle('date')}	×
192	className={styles.icon}
193	/>
194	</div>
195	</div>
196
197	<div className={styles.list}>
198	<div
199	className={classnames([
200	styles.timePicker,
201	useTimePicker && styles.useTimePicker,	64✔
202	])}
203	>
204	<DateTimePicker
205	culture={currentLocale}
206	date={false}
207	step={15}
208	value={new Date(meeting.schedule.startTime)}
209	onChange={(startTime) => {
210	preventTimePickerReplay(false);	1✔
211	if (startTime) {	1!
212	update({	1✔
213	...meeting,
214	schedule: {
215	...meeting.schedule,
216	startTime: startTime.getTime(),
217	},
218	});
219	}
220	}}
221	onBlur={() => {
222	preventTimePickerReplay(false);	×
223	}}
224	onToggle={preventTimePickerReplay}
225	ref={(ref) => {
226	that.time = ref;	63✔
227	}}
228	format="hh:mm A"
229	min={minMinute}
230	/>
231	<div
232	className={styles.timeText}
233	onClick={() => {
234	if (useTimePicker) {	×
235	onToggle('time');	×
236	}
237	}}
238	>
239	<input
240	flag="timeInput"
241	disabled={useTimePicker}
242	ref={(ref) => {
243	that.hours = ref;	63✔
244	}}
245	data-sign="timeInputHour"
246	className={styles.timeInput}
247	defaultValue={Moment(meeting.schedule.startTime).format(
248	useTimePicker ? 'hh' : 'HH',	32!
249	)}
250	onChange={({ target }) => {
251	that.hours.value = target.value.replace(NO_NUMBER_REGEX, '');	×
252	const isSelectionEnd = target.selectionEnd === 2;	×
253	if (isSelectionEnd) {	×
254	that.minutes.value = '';	×
255	that.minutes.focus();	×
256	}
257	}}
258	onKeyDown={(event) => {
259	accumulator(event, 24);	×
260	const isRightKey = event.keyCode === 39;	×
261	const isSelectionEnd = event.target.selectionEnd === 2;	×
262	if (isRightKey && isSelectionEnd) {	×
263	that.minutes.focus();	×
264	}
265	}}
266	onBlur={changeTime}
267	maxLength={2}
268	type="text"
269	/>
270	<div className={styles.colon}>:</div>
271	<input
272	flag="timeInput"
273	disabled={useTimePicker}
274	ref={(ref) => {
275	that.minutes = ref;	63✔
276	}}
277	data-sign="timeInputMinute"
278	className={styles.timeInput}
279	defaultValue={Moment(meeting.schedule.startTime).format('mm')}
280	onKeyDown={(event) => {
281	const isDelKey = event.keyCode === 8;	×
282	const isLeftKey = event.keyCode === 37;	×
283	const isSelectionHead = event.target.selectionEnd === 0;	×
284	if (isSelectionHead && (isDelKey \|\| isLeftKey)) {	×
285	that.hours.focus();	×
286	that.hours.setSelectionRange(2, 2);	×
287	}
288	accumulator(event, 60);	×
289	}}
290	onChange={({ target }) => {
291	that.minutes.value = target.value.replace(	×
292	NO_NUMBER_REGEX,
293	'',
294	);
295	}}
296	onBlur={changeTime}
297	maxLength={2}
298	type="text"
299	/>
300	{useTimePicker && (	64✔
301	<div className={styles.colon}>
302	{Moment(meeting.schedule.startTime).locale('en').format('A')}
303	</div>
304	)}
305	</div>
306	</div>
307	<div
308	ref={(ref) => {
309	that.TimeIcon = ref;	63✔
310	}}
311	className={styles.timeIcon}
312	>
313	<TimeIcon
314	onClick={() => {
315	if (useTimePicker) {	×
316	onToggle('time');	×
317	}
318	}}
319	className={styles.icon}
320	/>
321	</div>
322	</div>
323	</div>
324	</MeetingSection>
325	) : null;
326	};
327
328	export { MeetingDate };

ringcentral / ringcentral-js-widgets / 3437763424

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