Skip to content

Commit f461880

Browse files
williamsteinwilliamstein
committed
rewriting code to remove some deprecated defaultProps
1 parent 3060b47 commit f461880

File tree

3 files changed

+226
-225
lines changed

3 files changed

+226
-225
lines changed

‎src/packages/frontend/account/avatar/avatar.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function Avatar(props) {
5555
return (
5656
<LanguageModelVendorAvatar
5757
model={service2model(props.account_id)}
58-
size={props.size}
58+
size={props.size ?? 30}
5959
style={props.style}
6060
/>
6161
);
@@ -248,23 +248,27 @@ const Avatar0: React.FC<Props> = (props) => {
248248
return <span style={{ ...style, ...CIRCLE_INNER_STYLE }}>{letter()}</span>;
249249
}
250250

251+
const { max_age_s = 600 } = props;
252+
251253
function fade() {
252-
if (props.activity == null || !props.max_age_s) {
254+
if (props.activity == null || !max_age_s) {
253255
return 1;
254256
}
255257
const { last_used } = props.activity;
256258
// don't fade out completely as then just see an empty face, which looks broken...
257259
return ensure_bound(
258260
1 -
259261
(webapp_client.server_time().valueOf() - last_used.valueOf()) /
260-
(props.max_age_s * 1000),
262+
(max_age_s * 1000),
261263
0,
262264
0.85,
263265
);
264266
}
265267

266-
const { size } = props;
267-
if (size == null) throw Error("bug");
268+
const { size = 30 } = props;
269+
if (size == null) {
270+
throw Error("bug");
271+
}
268272
const outer_style = {
269273
height: `${size}px`,
270274
width: `${size}px`,
@@ -290,4 +294,3 @@ const Avatar0: React.FC<Props> = (props) => {
290294
}
291295
};
292296

293-
Avatar.defaultProps = { size: 30, max_age_s: 600 };

‎src/packages/frontend/components/html.tsx

Lines changed: 142 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// etc. This is an assumption that makes things much more efficient,
99
// and should be fine for everything in cocalc.
1010

11-
import React, { CSSProperties as CSS, useEffect, useRef } from "react";
11+
import { CSSProperties as CSS, useEffect, useRef } from "react";
1212
import ReactDOM from "react-dom";
1313
import useIsMountedRef from "@cocalc/frontend/app-framework/is-mounted-hook";
1414
import { is_share_server } from "./share-server";
@@ -66,175 +66,180 @@ export interface Props {
6666

6767
id?: string;
6868

69-
// if given, only run mathjax on result of jquery select with this
70-
// selector and never use katex.
71-
mathjax_selector?: string;
72-
7369
onClick?: (event?: any) => void;
7470
onDoubleClick?: (event?: any) => void;
7571
}
7672

77-
export const HTML: React.FC<Props> = React.memo(
78-
(props) => {
79-
const isMountedRef = useIsMountedRef();
80-
const ref = useRef(null);
81-
82-
function jq(): any {
83-
if (!isMountedRef.current) return;
84-
return $(ReactDOM.findDOMNode(ref.current)) as any;
73+
export function HTML({
74+
value,
75+
style,
76+
auto_render_math = true,
77+
preProcessMath,
78+
project_id,
79+
file_path,
80+
className,
81+
safeHTML = true,
82+
href_transform,
83+
post_hook,
84+
content_editable,
85+
reload_images,
86+
smc_image_scaling,
87+
highlight_code = true,
88+
id,
89+
onClick,
90+
onDoubleClick,
91+
}: Props) {
92+
const isMountedRef = useIsMountedRef();
93+
const ref = useRef(null);
94+
95+
function jq(): any {
96+
if (!isMountedRef.current) return;
97+
return $(ReactDOM.findDOMNode(ref.current)) as any;
98+
}
99+
100+
function update_mathjax(): void {
101+
if (!isMountedRef.current) {
102+
// see https://github.com/sagemathinc/cocalc/issues/1689
103+
return;
85104
}
86-
87-
function update_mathjax(): void {
88-
if (!isMountedRef.current) {
89-
// see https://github.com/sagemathinc/cocalc/issues/1689
90-
return;
91-
}
92-
if (!props.auto_render_math) {
93-
return;
94-
}
95-
jq()?.katex({ preProcess: props.preProcessMath ?? true });
105+
if (!auto_render_math) {
106+
return;
96107
}
108+
jq()?.katex({ preProcess: preProcessMath ?? true });
109+
}
97110

98-
function update_links(): void {
99-
if (!isMountedRef.current) {
100-
return;
101-
}
102-
jq()?.process_smc_links({
103-
project_id: props.project_id,
104-
file_path: props.file_path,
105-
href_transform: props.href_transform,
106-
});
111+
function update_links(): void {
112+
if (!isMountedRef.current) {
113+
return;
107114
}
108-
109-
function update_tables(): void {
110-
if (!isMountedRef.current) {
111-
return;
112-
}
113-
jq()?.find("table").addClass("table");
115+
jq()?.process_smc_links({
116+
project_id,
117+
file_path,
118+
href_transform,
119+
});
120+
}
121+
122+
function update_tables(): void {
123+
if (!isMountedRef.current) {
124+
return;
114125
}
126+
jq()?.find("table").addClass("table");
127+
}
115128

116-
function update_images(): void {
117-
if (!isMountedRef.current) {
118-
return;
119-
}
120-
if (props.reload_images) {
121-
jq()?.reload_images();
122-
}
123-
if (props.smc_image_scaling) {
124-
jq()?.smc_image_scaling();
125-
}
129+
function update_images(): void {
130+
if (!isMountedRef.current) {
131+
return;
126132
}
127-
128-
function update_code(): void {
129-
if (isMountedRef.current && props.highlight_code) {
130-
// note that the highlight_code plugin might not be defined.
131-
jq()?.highlight_code?.();
132-
}
133+
if (reload_images) {
134+
jq()?.reload_images();
135+
}
136+
if (smc_image_scaling) {
137+
jq()?.smc_image_scaling();
133138
}
139+
}
134140

135-
function do_updates(): void {
136-
if (is_share_server()) {
137-
return;
138-
}
139-
update_mathjax();
140-
update_links();
141-
update_tables();
142-
update_code();
143-
update_images();
141+
function update_code(): void {
142+
if (isMountedRef.current && highlight_code) {
143+
// note that the highlight_code plugin might not be defined.
144+
jq()?.highlight_code?.();
144145
}
146+
}
145147

146-
function update_content(): void {
147-
if (!isMountedRef.current) {
148-
return;
149-
}
150-
do_updates();
148+
function do_updates(): void {
149+
if (is_share_server()) {
150+
return;
151151
}
152+
update_mathjax();
153+
update_links();
154+
update_tables();
155+
update_code();
156+
update_images();
157+
}
158+
159+
function update_content(): void {
160+
if (!isMountedRef.current) {
161+
return;
162+
}
163+
do_updates();
164+
}
152165

153-
useEffect(update_content);
166+
useEffect(update_content);
154167

155-
function render_html(): { __html: string } {
156-
let html;
157-
if (!props.value) {
158-
return { __html: "" };
159-
}
168+
function render_html(): { __html: string } {
169+
let html;
170+
if (!value) {
171+
return { __html: "" };
172+
}
160173

161-
if (is_share_server()) {
162-
/* No sanitization at all for share server. For now we
174+
if (is_share_server()) {
175+
/* No sanitization at all for share server. For now we
163176
have set things up so that the share server is served
164177
from a different subdomain and user can't sign into it,
165178
so XSS is not an issue. Note that the sanitizing
166179
in the else below (on non-share server) is expensive and
167180
can crash on "big" documents (e.g., 500K).
168181
*/
169-
const elt = $("<div>") as any;
170-
elt.html(props.value);
171-
if (props.auto_render_math) {
172-
elt.katex({ preProcess: props.preProcessMath ?? true });
173-
}
174-
elt.find("table").addClass("table");
175-
if (props.highlight_code) {
176-
elt.highlight_code();
177-
}
178-
elt.process_smc_links({
179-
project_id: props.project_id,
180-
file_path: props.file_path,
181-
href_transform: props.href_transform,
182-
});
183-
html = elt.html();
182+
const elt = $("<div>") as any;
183+
elt.html(value);
184+
if (auto_render_math) {
185+
elt.katex({ preProcess: preProcessMath ?? true });
186+
}
187+
elt.find("table").addClass("table");
188+
if (highlight_code) {
189+
elt.highlight_code();
190+
}
191+
elt.process_smc_links({
192+
project_id,
193+
file_path,
194+
href_transform,
195+
});
196+
html = elt.html();
197+
} else {
198+
if (safeHTML) {
199+
html = sanitize_html_safe(value, post_hook);
184200
} else {
185-
if (props.safeHTML) {
186-
html = sanitize_html_safe(props.value, props.post_hook);
187-
} else {
188-
html = sanitize_html(props.value, true, true, props.post_hook);
189-
}
201+
html = sanitize_html(value, true, true, post_hook);
190202
}
191-
192-
return { __html: html };
193203
}
194204

195-
/* The random key is the whole span (hence the html) does
205+
return { __html: html };
206+
}
207+
208+
/* The random key is the whole span (hence the html) does
196209
get rendered whenever this component is updated. Otherwise,
197210
it will NOT re-render except when the value changes.
198211
*/
199-
if (props.content_editable) {
200-
return (
201-
<div
202-
ref={ref}
203-
id={props.id}
204-
contentEditable={true}
205-
key={Math.random()}
206-
className={`${props.className ?? ""} cocalc-html-component`}
207-
dangerouslySetInnerHTML={render_html()}
208-
style={props.style}
209-
onClick={props.onClick}
210-
onDoubleClick={props.onDoubleClick}
211-
></div>
212-
);
213-
} else {
214-
return (
215-
<span
216-
ref={ref}
217-
id={props.id}
218-
contentEditable={false}
219-
key={Math.random()}
220-
className={`${props.className ?? ""} cocalc-html-component`}
221-
dangerouslySetInnerHTML={render_html()}
222-
style={props.style}
223-
onClick={props.onClick}
224-
onDoubleClick={props.onDoubleClick}
225-
></span>
226-
);
227-
}
228-
},
229-
(props, prev) => props.value == prev.value
230-
);
212+
if (content_editable) {
213+
return (
214+
<div
215+
ref={ref}
216+
id={id}
217+
contentEditable={true}
218+
key={Math.random()}
219+
className={`${className ?? ""} cocalc-html-component`}
220+
dangerouslySetInnerHTML={render_html()}
221+
style={style}
222+
onClick={onClick}
223+
onDoubleClick={onDoubleClick}
224+
></div>
225+
);
226+
} else {
227+
return (
228+
<span
229+
ref={ref}
230+
id={id}
231+
contentEditable={false}
232+
key={Math.random()}
233+
className={`${className ?? ""} cocalc-html-component`}
234+
dangerouslySetInnerHTML={render_html()}
235+
style={style}
236+
onClick={onClick}
237+
onDoubleClick={onDoubleClick}
238+
></span>
239+
);
240+
}
241+
}
231242

232243
// this displayName is assumed and USED in the packages/hub/share/mathjax-support
233244
// to identify this component; do NOT change or remove!!
234245
HTML.displayName = "Misc-HTML";
235-
236-
HTML.defaultProps = {
237-
auto_render_math: true,
238-
safeHTML: true,
239-
highlight_code: true,
240-
};

0 commit comments

Comments
 (0)