groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: auto format whole project

Browse Source
This commit is contained in:
Ali BARIN
2022-11-05 23:57:33 +01:00
parent e338770e57
commit 475f24f661
199 changed files with 2421 additions and 1839 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
packages/web/src/components/EditableTypography/index.tsx
View File

@@ -1,6 +1,6 @@
import * as React from 'react';
import Typography from '@mui/material/Typography';
import type { TypographyProps } from '@mui/material/Typography';
import type { TypographyProps } from '@mui/material/Typography';
import EditIcon from '@mui/icons-material/Edit';
import { Box, TextField } from './style';
@@ -17,40 +17,45 @@ function EditableTypography(props: EditableTypographyProps) {
const [editing, setEditing] = React.useState(false);
const handleClick = React.useCallback(() => {
setEditing(editing => !editing);
setEditing((editing) => !editing);
}, []);
const handleTextFieldClick = React.useCallback((event: React.SyntheticEvent) => {
event.stopPropagation();
}, []);
const handleTextFieldClick = React.useCallback(
(event: React.SyntheticEvent) => {
event.stopPropagation();
},
[]
);
const handleTextFieldKeyDown = React.useCallback(async (event: React.KeyboardEvent<HTMLInputElement>) => {
const target = event.target as HTMLInputElement;
if (event.key === 'Enter') {
if (target.value !== children) {
await onConfirm(target.value);
const handleTextFieldKeyDown = React.useCallback(
async (event: React.KeyboardEvent<HTMLInputElement>) => {
const target = event.target as HTMLInputElement;
if (event.key === 'Enter') {
if (target.value !== children) {
await onConfirm(target.value);
}
setEditing(false);
}
},
[children]
);
const handleTextFieldBlur = React.useCallback(
async (event: React.FocusEvent<HTMLInputElement>) => {
const value = event.target.value;
if (value !== children) {
await onConfirm(value);
}
setEditing(false);
}
}, [children]);
const handleTextFieldBlur = React.useCallback(async (event: React.FocusEvent<HTMLInputElement>) => {
const value = event.target.value;
if (value !== children) {
await onConfirm(value);
}
setEditing(false);
}, [onConfirm, children]);
let component = (
<Typography {...typographyProps}>
{children}
</Typography>
},
[onConfirm, children]
);
let component = <Typography {...typographyProps}>{children}</Typography>;
if (editing) {
component = (
<TextField
@@ -62,7 +67,7 @@ function EditableTypography(props: EditableTypographyProps) {
defaultValue={children}
/>
);
};
}
return (
<Box sx={sx} onClick={handleClick} editing={editing}>

13
packages/web/src/components/EditableTypography/style.ts
View File

@@ -5,10 +5,12 @@ import { inputClasses } from '@mui/material/Input';
type BoxProps = {
editing?: boolean;
}
};
const boxShouldForwardProp = (prop: string) => !['editing'].includes(prop);
export const Box = styled(MuiBox, { shouldForwardProp: boxShouldForwardProp })<BoxProps>`
export const Box = styled(MuiBox, {
shouldForwardProp: boxShouldForwardProp,
})<BoxProps>`
display: flex;
flex: 1;
width: 300px;
@@ -19,7 +21,8 @@ export const Box = styled(MuiBox, { shouldForwardProp: boxShouldForwardProp })<B
export const TextField = styled(MuiTextField)({
width: '100%',
[`.${inputClasses.root}:before, .${inputClasses.root}:after, .${inputClasses.root}:hover`]: {
borderBottom: '0 !important',
}
[`.${inputClasses.root}:before, .${inputClasses.root}:after, .${inputClasses.root}:hover`]:
{
borderBottom: '0 !important',
},
});