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

Commitf06631b

Browse files
committed
emotion:AuditLogDiff
1 parent641ede7 commitf06631b

File tree

1 file changed

+30
-42
lines changed

1 file changed

+30
-42
lines changed
Lines changed: 30 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import{makeStyles}from"@mui/styles";
2-
import{AuditLog}from"api/typesGenerated";
1+
import{typeInterpolation,typeTheme}from"@emotion/react";
2+
import{typeFC}from"react";
3+
importtype{AuditLog}from"api/typesGenerated";
34
import{colors}from"theme/colors";
45
import{MONOSPACE_FONT_FAMILY}from"theme/constants";
5-
import{combineClasses}from"utils/combineClasses";
6-
import{FC}from"react";
76

87
constgetDiffValue=(value:unknown):string=>{
98
if(typeofvalue==="string"){
@@ -23,43 +22,32 @@ const getDiffValue = (value: unknown): string => {
2322
};
2423

2524
exportconstAuditLogDiff:FC<{diff:AuditLog["diff"]}>=({ diff})=>{
26-
conststyles=useStyles();
2725
constdiffEntries=Object.entries(diff);
2826

2927
return(
30-
<divclassName={styles.diff}>
31-
<divclassName={combineClasses([styles.diffColumn,styles.diffOld])}>
28+
<divcss={styles.diff}>
29+
<divcss={[styles.diffColumn,styles.diffOld]}>
3230
{diffEntries.map(([attrName,valueDiff],index)=>(
33-
<divkey={attrName}className={styles.diffRow}>
34-
<divclassName={styles.diffLine}>{index+1}</div>
35-
<divclassName={styles.diffIcon}>-</div>
31+
<divkey={attrName}css={styles.diffRow}>
32+
<divcss={styles.diffLine}>{index+1}</div>
33+
<divcss={styles.diffIcon}>-</div>
3634
<div>
3735
{attrName}:{" "}
38-
<span
39-
className={combineClasses([
40-
styles.diffValue,
41-
styles.diffValueOld,
42-
])}
43-
>
36+
<spancss={[styles.diffValue,styles.diffValueOld]}>
4437
{valueDiff.secret ?"••••••••" :getDiffValue(valueDiff.old)}
4538
</span>
4639
</div>
4740
</div>
4841
))}
4942
</div>
50-
<divclassName={combineClasses([styles.diffColumn,styles.diffNew])}>
43+
<divcss={[styles.diffColumn,styles.diffNew]}>
5144
{diffEntries.map(([attrName,valueDiff],index)=>(
52-
<divkey={attrName}className={styles.diffRow}>
53-
<divclassName={styles.diffLine}>{index+1}</div>
54-
<divclassName={styles.diffIcon}>+</div>
45+
<divkey={attrName}css={styles.diffRow}>
46+
<divcss={styles.diffLine}>{index+1}</div>
47+
<divcss={styles.diffIcon}>+</div>
5548
<div>
5649
{attrName}:{" "}
57-
<span
58-
className={combineClasses([
59-
styles.diffValue,
60-
styles.diffValueNew,
61-
])}
62-
>
50+
<spancss={[styles.diffValue,styles.diffValueNew]}>
6351
{valueDiff.secret ?"••••••••" :getDiffValue(valueDiff.new)}
6452
</span>
6553
</div>
@@ -70,60 +58,60 @@ export const AuditLogDiff: FC<{ diff: AuditLog["diff"] }> = ({ diff }) => {
7058
);
7159
};
7260

73-
constuseStyles=makeStyles((theme)=>({
74-
diff:{
61+
conststyles={
62+
diff:(theme)=>({
7563
display:"flex",
7664
alignItems:"flex-start",
7765
fontSize:theme.typography.body2.fontSize,
7866
borderTop:`1px solid${theme.palette.divider}`,
7967
fontFamily:MONOSPACE_FONT_FAMILY,
8068
position:"relative",
8169
zIndex:2,
82-
},
70+
}),
8371

84-
diffColumn:{
72+
diffColumn:(theme)=>({
8573
flex:1,
8674
paddingTop:theme.spacing(2),
8775
paddingBottom:theme.spacing(2.5),
8876
paddingRight:theme.spacing(2),
8977
lineHeight:"160%",
9078
alignSelf:"stretch",
9179
overflowWrap:"anywhere",
92-
},
80+
}),
9381

94-
diffOld:{
82+
diffOld:(theme)=>({
9583
backgroundColor:theme.palette.error.dark,
9684
color:theme.palette.error.contrastText,
97-
},
85+
}),
9886

9987
diffRow:{
10088
display:"flex",
10189
alignItems:"baseline",
10290
},
10391

104-
diffLine:{
92+
diffLine:(theme)=>({
10593
opacity:0.5,
10694
width:theme.spacing(6),
10795
textAlign:"right",
10896
flexShrink:0,
109-
},
97+
}),
11098

111-
diffIcon:{
99+
diffIcon:(theme)=>({
112100
width:theme.spacing(4),
113101
textAlign:"center",
114102
fontSize:theme.typography.body1.fontSize,
115103
flexShrink:0,
116-
},
104+
}),
117105

118-
diffNew:{
106+
diffNew:(theme)=>({
119107
backgroundColor:theme.palette.success.dark,
120108
color:theme.palette.success.contrastText,
121-
},
109+
}),
122110

123-
diffValue:{
111+
diffValue:(theme)=>({
124112
padding:1,
125113
borderRadius:theme.shape.borderRadius/2,
126-
},
114+
}),
127115

128116
diffValueOld:{
129117
backgroundColor:colors.red[12],
@@ -132,4 +120,4 @@ const useStyles = makeStyles((theme) => ({
132120
diffValueNew:{
133121
backgroundColor:colors.green[12],
134122
},
135-
}));
123+
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

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