Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit7ea58ea

Browse files
authored
chore: use emotion for styling (pt. 4) (#10149)
1 parent00589d6 commit7ea58ea

File tree

22 files changed

+516
-635
lines changed

22 files changed

+516
-635
lines changed

‎site/src/components/DeploySettingsLayout/OptionsTable.tsx

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,44 @@
1-
import{makeStyles}from"@mui/styles";
21
importTablefrom"@mui/material/Table";
32
importTableBodyfrom"@mui/material/TableBody";
43
importTableCellfrom"@mui/material/TableCell";
54
importTableContainerfrom"@mui/material/TableContainer";
65
importTableHeadfrom"@mui/material/TableHead";
76
importTableRowfrom"@mui/material/TableRow";
7+
import{typeFC}from"react";
8+
importBoxfrom"@mui/material/Box";
9+
import{css}from"@emotion/react";
10+
importtype{ClibaseOption}from"api/typesGenerated";
811
import{
912
OptionConfig,
1013
OptionConfigFlag,
1114
OptionDescription,
1215
OptionName,
1316
OptionValue,
1417
}from"components/DeploySettingsLayout/Option";
15-
import{FC}from"react";
1618
import{optionValue}from"./optionValue";
17-
importBoxfrom"@mui/material/Box";
18-
import{ClibaseOption}from"api/typesGenerated";
1919

2020
constOptionsTable:FC<{
2121
options:ClibaseOption[];
2222
}>=({ options})=>{
23-
conststyles=useStyles();
24-
2523
if(options.length===0){
2624
return<p>No options to configure</p>;
2725
}
2826

2927
return(
3028
<TableContainer>
31-
<TableclassName={styles.table}>
29+
<Table
30+
css={(theme)=>css`
31+
&td {
32+
padding-top:${theme.spacing(3)};
33+
padding-bottom:${theme.spacing(3)};
34+
}
35+
36+
&td:last-child,
37+
&th:last-child {
38+
padding-left:${theme.spacing(4)};
39+
}
40+
`}
41+
>
3242
<TableHead>
3343
<TableRow>
3444
<TableCellwidth="50%">Option</TableCell>
@@ -96,17 +106,4 @@ const OptionsTable: FC<{
96106
);
97107
};
98108

99-
constuseStyles=makeStyles((theme)=>({
100-
table:{
101-
"& td":{
102-
paddingTop:theme.spacing(3),
103-
paddingBottom:theme.spacing(3),
104-
},
105-
106-
"& td:last-child, & th:last-child":{
107-
paddingLeft:theme.spacing(4),
108-
},
109-
},
110-
}));
111-
112109
exportdefaultOptionsTable;
Lines changed: 17 additions & 190 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
importDialogActionsfrom"@mui/material/DialogActions";
2-
import{makeStyles}from"@mui/styles";
3-
import{ReactNode,FC,PropsWithChildren}from"react";
2+
import{typeInterpolation,typeTheme}from"@emotion/react";
3+
import{typeFC,typePropsWithChildren,typeReactNode}from"react";
44
import{
55
Dialog,
66
DialogActionButtons,
77
DialogActionButtonsProps,
88
}from"../Dialog";
9-
import{ConfirmDialogType}from"../types";
10-
importCheckboxfrom"@mui/material/Checkbox";
11-
importFormControlLabelfrom"@mui/material/FormControlLabel";
12-
import{Stack}from"@mui/system";
9+
importtype{ConfirmDialogType}from"../types";
1310

1411
interfaceConfirmDialogTypeConfig{
1512
confirmText:ReactNode;
@@ -58,8 +55,8 @@ export interface ConfirmDialogProps
5855
readonlytitle:string;
5956
}
6057

61-
constuseStyles=makeStyles((theme)=>({
62-
dialogWrapper:{
58+
conststyles={
59+
dialogWrapper:(theme)=>({
6360
"& .MuiPaper-root":{
6461
background:theme.palette.background.paper,
6562
border:`1px solid${theme.palette.divider}`,
@@ -69,19 +66,19 @@ const useStyles = makeStyles((theme) => ({
6966
"& .MuiDialogActions-spacing":{
7067
padding:`0${theme.spacing(5)}${theme.spacing(5)}`,
7168
},
72-
},
73-
dialogContent:{
69+
}),
70+
dialogContent:(theme)=>({
7471
color:theme.palette.text.secondary,
7572
padding:theme.spacing(5),
76-
},
77-
dialogTitle:{
73+
}),
74+
dialogTitle:(theme)=>({
7875
margin:0,
7976
marginBottom:theme.spacing(2),
8077
color:theme.palette.text.primary,
8178
fontWeight:400,
8279
fontSize:theme.spacing(2.5),
83-
},
84-
dialogDescription:{
80+
}),
81+
dialogDescription:(theme)=>({
8582
color:theme.palette.text.secondary,
8683
lineHeight:"160%",
8784
fontSize:16,
@@ -97,8 +94,8 @@ const useStyles = makeStyles((theme) => ({
9794
"& > p":{
9895
margin:theme.spacing(1,0),
9996
},
100-
},
101-
}));
97+
}),
98+
}satisfiesRecord<string,Interpolation<Theme>>;
10299

103100
/**
104101
* Quick-use version of the Dialog component with slightly alternative styles,
@@ -117,8 +114,6 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
117114
title,
118115
type="info",
119116
})=>{
120-
conststyles=useStyles({ type});
121-
122117
constdefaults=CONFIRM_DIALOG_DEFAULTS[type];
123118

124119
if(typeofhideCancel==="undefined"){
@@ -127,16 +122,14 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
127122

128123
return(
129124
<Dialog
130-
className={styles.dialogWrapper}
125+
css={styles.dialogWrapper}
131126
onClose={onClose}
132127
open={open}
133128
data-testid="dialog"
134129
>
135-
<divclassName={styles.dialogContent}>
136-
<h3className={styles.dialogTitle}>{title}</h3>
137-
{description&&(
138-
<divclassName={styles.dialogDescription}>{description}</div>
139-
)}
130+
<divcss={styles.dialogContent}>
131+
<h3css={styles.dialogTitle}>{title}</h3>
132+
{description&&<divcss={styles.dialogDescription}>{description}</div>}
140133
</div>
141134

142135
<DialogActions>
@@ -154,169 +147,3 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
154147
</Dialog>
155148
);
156149
};
157-
158-
exportinterfaceScheduleDialogPropsextendsConfirmDialogProps{
159-
readonlyinactiveWorkspacesToGoDormant:number;
160-
readonlyinactiveWorkspacesToGoDormantInWeek:number;
161-
readonlydormantWorkspacesToBeDeleted:number;
162-
readonlydormantWorkspacesToBeDeletedInWeek:number;
163-
readonlyupdateDormantWorkspaces:(confirm:boolean)=>void;
164-
readonlyupdateInactiveWorkspaces:(confirm:boolean)=>void;
165-
readonlydormantValueChanged:boolean;
166-
readonlydeletionValueChanged:boolean;
167-
}
168-
169-
exportconstScheduleDialog:FC<PropsWithChildren<ScheduleDialogProps>>=({
170-
cancelText,
171-
confirmLoading,
172-
disabled=false,
173-
hideCancel,
174-
onClose,
175-
onConfirm,
176-
type,
177-
open=false,
178-
title,
179-
inactiveWorkspacesToGoDormant,
180-
inactiveWorkspacesToGoDormantInWeek,
181-
dormantWorkspacesToBeDeleted,
182-
dormantWorkspacesToBeDeletedInWeek,
183-
updateDormantWorkspaces,
184-
updateInactiveWorkspaces,
185-
dormantValueChanged,
186-
deletionValueChanged,
187-
})=>{
188-
conststyles=useScheduleStyles({ type});
189-
190-
constdefaults=CONFIRM_DIALOG_DEFAULTS["delete"];
191-
192-
if(typeofhideCancel==="undefined"){
193-
hideCancel=defaults.hideCancel;
194-
}
195-
196-
constshowDormancyWarning=
197-
dormantValueChanged&&
198-
(inactiveWorkspacesToGoDormant>0||
199-
inactiveWorkspacesToGoDormantInWeek>0);
200-
constshowDeletionWarning=
201-
deletionValueChanged&&
202-
(dormantWorkspacesToBeDeleted>0||
203-
dormantWorkspacesToBeDeletedInWeek>0);
204-
205-
return(
206-
<Dialog
207-
className={styles.dialogWrapper}
208-
onClose={onClose}
209-
open={open}
210-
data-testid="dialog"
211-
>
212-
<divclassName={styles.dialogContent}>
213-
<h3className={styles.dialogTitle}>{title}</h3>
214-
<>
215-
{showDormancyWarning&&(
216-
<>
217-
<h4>{"Dormancy Threshold"}</h4>
218-
<Stackdirection="row"spacing={5}>
219-
<divclassName={styles.dialogDescription}>{`
220-
This change will result in${inactiveWorkspacesToGoDormant} workspaces being immediately transitioned to the dormant state and${inactiveWorkspacesToGoDormantInWeek} over the next seven days. To prevent this, do you want to reset the inactivity period for all template workspaces?`}</div>
221-
<FormControlLabel
222-
sx={{
223-
marginTop:2,
224-
}}
225-
control={
226-
<Checkbox
227-
size="small"
228-
onChange={(e)=>{
229-
updateInactiveWorkspaces(e.target.checked);
230-
}}
231-
/>
232-
}
233-
label="Reset"
234-
/>
235-
</Stack>
236-
</>
237-
)}
238-
239-
{showDeletionWarning&&(
240-
<>
241-
<h4>{"Dormancy Auto-Deletion"}</h4>
242-
<Stackdirection="row"spacing={5}>
243-
<div
244-
className={styles.dialogDescription}
245-
>{`This change will result in${dormantWorkspacesToBeDeleted} workspaces being immediately deleted and${dormantWorkspacesToBeDeletedInWeek} over the next 7 days. To prevent this, do you want to reset the dormancy period for all template workspaces?`}</div>
246-
<FormControlLabel
247-
sx={{
248-
marginTop:2,
249-
}}
250-
control={
251-
<Checkbox
252-
size="small"
253-
onChange={(e)=>{
254-
updateDormantWorkspaces(e.target.checked);
255-
}}
256-
/>
257-
}
258-
label="Reset"
259-
/>
260-
</Stack>
261-
</>
262-
)}
263-
</>
264-
</div>
265-
266-
<DialogActions>
267-
<DialogActionButtons
268-
cancelText={cancelText}
269-
confirmDialog
270-
confirmLoading={confirmLoading}
271-
confirmText="Submit"
272-
disabled={disabled}
273-
onCancel={!hideCancel ?onClose :undefined}
274-
onConfirm={onConfirm||onClose}
275-
type="delete"
276-
/>
277-
</DialogActions>
278-
</Dialog>
279-
);
280-
};
281-
282-
constuseScheduleStyles=makeStyles((theme)=>({
283-
dialogWrapper:{
284-
"& .MuiPaper-root":{
285-
background:theme.palette.background.paper,
286-
border:`1px solid${theme.palette.divider}`,
287-
width:"100%",
288-
maxWidth:theme.spacing(125),
289-
},
290-
"& .MuiDialogActions-spacing":{
291-
padding:`0${theme.spacing(5)}${theme.spacing(5)}`,
292-
},
293-
},
294-
dialogContent:{
295-
color:theme.palette.text.secondary,
296-
padding:theme.spacing(5),
297-
},
298-
dialogTitle:{
299-
margin:0,
300-
marginBottom:theme.spacing(2),
301-
color:theme.palette.text.primary,
302-
fontWeight:400,
303-
fontSize:theme.spacing(2.5),
304-
},
305-
dialogDescription:{
306-
color:theme.palette.text.secondary,
307-
lineHeight:"160%",
308-
fontSize:16,
309-
310-
"& strong":{
311-
color:theme.palette.text.primary,
312-
},
313-
314-
"& p:not(.MuiFormHelperText-root)":{
315-
margin:0,
316-
},
317-
318-
"& > p":{
319-
margin:theme.spacing(1,0),
320-
},
321-
},
322-
}));

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp