6284995514

Committed 23 Sep 2023 05:11PM UTC coverage: 48.214% (-0.06%) from 48.276%

Build # 6284995514

Build Type

push

github

Committed by

jaywcjlove

Commit Message

chore(deps): update dependency @uiw/react-json-view to ^2.0.0-alpha.7

Run Details

7 of 18 branches covered (0.0%)

Branch coverage included in aggregate %.

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

20 of 38 relevant lines covered (52.63%)

0.68 hits per line

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

48.21

/src/app/App.tsx

import React, { Fragment, useEffect, useState } from 'react';
import JsonViewer from '@uiw/react-json-view';
import { darkTheme } from '@uiw/react-json-view/dark';
import { lightTheme } from '@uiw/react-json-view/light';
import CopyToClipboard from '@uiw/react-copy-to-clipboard';
import GitHubCorners from '@uiw/react-github-corners';
import '@wcj/dark-mode';
import styled, { css } from 'styled-components';

const Wrapper = styled.main`
  text-align: center;
`;

const CopiedInfo = styled.div`
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: #03a132;
  color: #fff;
  padding: 2px 5px;
  border-radius: 2px;
`;

const Header = styled.header`
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 6rem;
`;

const Keyboard = styled.div`
  display: flex;
  & > span + span {
    margin-left: 10px;
    display: inline-block;
  }
  & .deprecated {
    background-color: #ff9696;
    text-decoration: line-through;
  }
  & .copied kbd {
    background: #03a132;
  }
  & kbd {
    font-size: 18px;
    min-width: 45px;
    min-height: 23px;
    font-weight: bold;
    display: inline-block;
    background: #eff0f2;
    background: var(--color-theme-text);
    color: var(--color-theme-bg);
    border-radius: 3px;
    padding: 5px 10px;
    border-top: 1px solid #f5f5f5;
    box-shadow:
      inset 0 0 25px #e8e8e8,
      0 1px 0 #c3c3c3,
      0 2px 0 #c9c9c9,
      0 2px 3px #333;
    text-shadow: 0px 1px 0px #f5f5f5;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s;
  }
`;

const KbdKey = styled.kbd`
  font-size: 40vmin;
  text-align: center;
`;

const view = css`
  display: inline-block;
  color: var(--color-theme-text);
  text-decoration: none;
  text-align: center;
  margin: 20px auto;
  padding: 15px 20px;
  background-color: var(--color-json-bg);
  border-radius: 5px;
  min-width: 24px;
`;

const Help = styled.div`
  ${view}
  font-size: 26px;
  box-shadow: 0 14px 26px rgb(0 0 0 / 4%);
`;

const JsonView = styled.div`
  ${view}
  text-align: initial;
  min-width: 320px;
  font-size: 16px;
  background-color: var(--color-json-bg);
`;

type Writeable<T> = { -readonly [P in keyof T]: T[P] };
type KeyboardEventType = Writeable<KeyboardEvent>;

const App = () => {
  const [data, setData] = useState<KeyboardEventType>();
  const [copied, setCopied] = useState(false);
  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
  function keypressHandle(evn: KeyboardEvent) {
    evn.preventDefault();
    const protoKeys: (keyof KeyboardEventType)[] = [
      'altKey',
      'code',
      'ctrlKey',
      'isComposing',
      'key',
      // 'locale',
      'location',
      'metaKey',
      'repeat',
      'shiftKey',
      // 'char',
      'charCode',
      'keyCode',
      // 'keyIdentifier',
      // 'keyLocation',
      'which',

      'cancelBubble',
      'cancelable',
      'composed',
      'defaultPrevented',
      'detail',
      'eventPhase',
      'isTrusted',
      'timeStamp',
      'returnValue',
      'type',
    ];
    const result = {} as any;
    for (let key of protoKeys) {
      result[key] = evn[key];
    }
    setData(result as KeyboardEventType);
  }
  let timer: NodeJS.Timeout;
  function handleClick(text: string, isCopy: boolean, event: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
    event.preventDefault();
    const target = event.target as HTMLSpanElement;
    target.parentElement!.classList.add('copied');
    if (timer) clearTimeout(timer);
    setCopied(true);
    timer = setTimeout(() => {
      setCopied(false);
      target.parentElement!.classList.remove('copied');
      clearTimeout(timer);
    }, 1000);
  }
  useEffect(() => {
    document.addEventListener('colorschemechange', (evn) => {
      setTheme(evn.detail.colorScheme === 'dark' ? 'dark' : 'light');
    });
    setTheme(document.documentElement.dataset.colorMode === 'dark' ? 'dark' : 'light');
    document.addEventListener('keydown', keypressHandle);
    return () => {
      document.removeEventListener('keydown', keypressHandle);
    };
  }, []);
  const style = (theme === 'dark' ? darkTheme : lightTheme) as React.CSSProperties;
  return (
    <Wrapper>
      <dark-mode permanent light="Light" dark="Dart" style={{ position: 'fixed', top: '6px', left: '10px', fontSize: 18 }} />
      <GitHubCorners fixed size={56} target="_blank" href="https://github.com/uiwjs/keycode-info" />
      {copied && <CopiedInfo>copied</CopiedInfo>}
      <Header>
        {!data && <Help>Press any key to get the JavaScript event keycode</Help>}
        {data && (
          <Fragment>
            <KbdKey className="key-which">{data.which}</KbdKey>
            <Keyboard>
              <CopyToClipboard onClick={handleClick} text={data.key}>
                <kbd title="event.key">{data.key}</kbd>
              </CopyToClipboard>
              <CopyToClipboard onClick={handleClick} text={`${data.location}`}>
                <kbd title="event.location">{data.location}</kbd>
              </CopyToClipboard>
              <CopyToClipboard onClick={handleClick} text={`${data.which}`}>
                <kbd title="event.which" className="deprecated">
                  {data.which}
                </kbd>
              </CopyToClipboard>
              <CopyToClipboard onClick={handleClick} text={`${data.keyCode}`}>
                <kbd title="event.keyCode" className="deprecated">
                  {data.keyCode}
                </kbd>
              </CopyToClipboard>
              <CopyToClipboard onClick={handleClick} text={`${data.code}`}>
                <kbd title="event.code">{data.code}</kbd>
              </CopyToClipboard>
            </Keyboard>
            <JsonView>
              <JsonViewer value={data} style={{ ...style, '--w-rjv-background-color': 'transparent' } as React.CSSProperties}>
                <JsonViewer.KeyName
                  render={(props, { value, keyName }) => {
                    if (/(keycode|charcode|which)/i.test(keyName?.toString() || '')) {
                      return <del {...props}>{keyName}</del>;
                    }
                  }}
                />
              </JsonViewer>
            </JsonView>
          </Fragment>
        )}
      </Header>
    </Wrapper>
  );
};

export default App;

1	import React, { Fragment, useEffect, useState } from 'react';
2	import JsonViewer from '@uiw/react-json-view';
3	import { darkTheme } from '@uiw/react-json-view/dark';
4	import { lightTheme } from '@uiw/react-json-view/light';
5	import CopyToClipboard from '@uiw/react-copy-to-clipboard';
6	import GitHubCorners from '@uiw/react-github-corners';
7	import '@wcj/dark-mode';
8	import styled, { css } from 'styled-components';
9
10	const Wrapper = styled.main`	1✔
11	text-align: center;
12	`;
13
14	const CopiedInfo = styled.div`	1✔
15	position: fixed;
16	top: 10px;
17	left: 10px;
18	background-color: #03a132;
19	color: #fff;
20	padding: 2px 5px;
21	border-radius: 2px;
22	`;
23
24	const Header = styled.header`	1✔
25	min-height: 100vh;
26	display: flex;
27	flex-direction: column;
28	align-items: center;
29	justify-content: center;
30	padding-bottom: 6rem;
31	`;
32
33	const Keyboard = styled.div`	1✔
34	display: flex;
35	& > span + span {
36	margin-left: 10px;
37	display: inline-block;
38	}
39	& .deprecated {
40	background-color: #ff9696;
41	text-decoration: line-through;
42	}
43	& .copied kbd {
44	background: #03a132;
45	}
46	& kbd {
47	font-size: 18px;
48	min-width: 45px;
49	min-height: 23px;
50	font-weight: bold;
51	display: inline-block;
52	background: #eff0f2;
53	background: var(--color-theme-text);
54	color: var(--color-theme-bg);
55	border-radius: 3px;
56	padding: 5px 10px;
57	border-top: 1px solid #f5f5f5;
58	box-shadow:
59	inset 0 0 25px #e8e8e8,
60	0 1px 0 #c3c3c3,
61	0 2px 0 #c9c9c9,
62	0 2px 3px #333;
63	text-shadow: 0px 1px 0px #f5f5f5;
64	cursor: pointer;
65	user-select: none;
66	transition: background-color 0.3s;
67	}
68	`;
69
70	const KbdKey = styled.kbd`	1✔
71	font-size: 40vmin;
72	text-align: center;
73	`;
74
75	const view = css`	1✔
76	display: inline-block;
77	color: var(--color-theme-text);
78	text-decoration: none;
79	text-align: center;
80	margin: 20px auto;
81	padding: 15px 20px;
82	background-color: var(--color-json-bg);
83	border-radius: 5px;
84	min-width: 24px;
85	`;
86
87	const Help = styled.div`	1✔
88	${view}
89	font-size: 26px;
90	box-shadow: 0 14px 26px rgb(0 0 0 / 4%);
91	`;
92
93	const JsonView = styled.div`	1✔
94	${view}
95	text-align: initial;
96	min-width: 320px;
97	font-size: 16px;
98	background-color: var(--color-json-bg);
99	`;
100
101	type Writeable<T> = { -readonly [P in keyof T]: T[P] };
102	type KeyboardEventType = Writeable<KeyboardEvent>;
103
104	const App = () => {	1✔
105	const [data, setData] = useState<KeyboardEventType>();	2✔
106	const [copied, setCopied] = useState(false);	2✔
107	const [theme, setTheme] = useState<'light' \| 'dark'>('dark');	2✔
108	function keypressHandle(evn: KeyboardEvent) {
109	evn.preventDefault();	×
110	const protoKeys: (keyof KeyboardEventType)[] = [	×
111	'altKey',
112	'code',
113	'ctrlKey',
114	'isComposing',
115	'key',
116	// 'locale',
117	'location',
118	'metaKey',
119	'repeat',
120	'shiftKey',
121	// 'char',
122	'charCode',
123	'keyCode',
124	// 'keyIdentifier',
125	// 'keyLocation',
126	'which',
127
128	'cancelBubble',
129	'cancelable',
130	'composed',
131	'defaultPrevented',
132	'detail',
133	'eventPhase',
134	'isTrusted',
135	'timeStamp',
136	'returnValue',
137	'type',
138	];
139	const result = {} as any;	×
140	for (let key of protoKeys) {	×
141	result[key] = evn[key];	×
142	}
143	setData(result as KeyboardEventType);	×
144	}
145	let timer: NodeJS.Timeout;
146	function handleClick(text: string, isCopy: boolean, event: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
147	event.preventDefault();	×
148	const target = event.target as HTMLSpanElement;	×
149	target.parentElement!.classList.add('copied');	×
150	if (timer) clearTimeout(timer);	×
151	setCopied(true);	×
152	timer = setTimeout(() => {	×
153	setCopied(false);	×
154	target.parentElement!.classList.remove('copied');	×
155	clearTimeout(timer);	×
156	}, 1000);
157	}
158	useEffect(() => {	2✔
159	document.addEventListener('colorschemechange', (evn) => {	1✔
160	setTheme(evn.detail.colorScheme === 'dark' ? 'dark' : 'light');	×
161	});
162	setTheme(document.documentElement.dataset.colorMode === 'dark' ? 'dark' : 'light');	1!
163	document.addEventListener('keydown', keypressHandle);	1✔
164	return () => {	1✔
165	document.removeEventListener('keydown', keypressHandle);	1✔
166	};
167	}, []);
168	const style = (theme === 'dark' ? darkTheme : lightTheme) as React.CSSProperties;	2✔
169	return (	2✔
170	<Wrapper>
171	<dark-mode permanent light="Light" dark="Dart" style={{ position: 'fixed', top: '6px', left: '10px', fontSize: 18 }} />
172	<GitHubCorners fixed size={56} target="_blank" href="https://github.com/uiwjs/keycode-info" />
173	{copied && <CopiedInfo>copied</CopiedInfo>}	2!
174	<Header>
175	{!data && <Help>Press any key to get the JavaScript event keycode</Help>}	4✔
176	{data && (	2!
177	<Fragment>
178	<KbdKey className="key-which">{data.which}</KbdKey>
179	<Keyboard>
180	<CopyToClipboard onClick={handleClick} text={data.key}>
181	<kbd title="event.key">{data.key}</kbd>
182	</CopyToClipboard>
183	<CopyToClipboard onClick={handleClick} text={`${data.location}`}>
184	<kbd title="event.location">{data.location}</kbd>
185	</CopyToClipboard>
186	<CopyToClipboard onClick={handleClick} text={`${data.which}`}>
187	<kbd title="event.which" className="deprecated">
188	{data.which}
189	</kbd>
190	</CopyToClipboard>
191	<CopyToClipboard onClick={handleClick} text={`${data.keyCode}`}>
192	<kbd title="event.keyCode" className="deprecated">
193	{data.keyCode}
194	</kbd>
195	</CopyToClipboard>
196	<CopyToClipboard onClick={handleClick} text={`${data.code}`}>
197	<kbd title="event.code">{data.code}</kbd>
198	</CopyToClipboard>
199	</Keyboard>
200	<JsonView>
201	<JsonViewer value={data} style={{ ...style, '--w-rjv-background-color': 'transparent' } as React.CSSProperties}>
202	<JsonViewer.KeyName
203	render={(props, { value, keyName }) => {
204	if (/(keycode\|charcode\|which)/i.test(keyName?.toString() \|\| '')) {	×
205	return <del {...props}>{keyName}</del>;	×
206	}
207	}}
208	/>
209	</JsonViewer>
210	</JsonView>
211	</Fragment>
212	)}
213	</Header>
214	</Wrapper>
215	);
216	};
217
218	export default App;

uiwjs / keycode-info / 6284995514

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