mirror of
https://github.com/toeverything/AFFiNE.git
synced 2025-01-05 10:12:22 +03:00
chore: reduce code by gndelia/codemod-replace-react-fc-typescript
This commit is contained in:
parent
b4f56cda59
commit
40b617c429
@ -3,7 +3,7 @@ import * as uiIcons from '@toeverything/components/icons';
|
||||
import { message, styled } from '@toeverything/components/ui';
|
||||
import { copy } from './copy';
|
||||
|
||||
const IconBooth: FC<{ name: string; Icon: FC<any> }> = ({ name, Icon }) => {
|
||||
const IconBooth = ({ name, Icon }: { name: string; Icon: FC<any> }) => {
|
||||
const on_click = () => {
|
||||
copy(`<${name} />`);
|
||||
message.success('Copied ~');
|
||||
@ -18,7 +18,7 @@ const IconBooth: FC<{ name: string; Icon: FC<any> }> = ({ name, Icon }) => {
|
||||
|
||||
const _icons = Object.entries(uiIcons).filter(([key]) => key !== 'timestamp');
|
||||
|
||||
export const Icons: FC = () => {
|
||||
export const Icons = () => {
|
||||
const ref = useRef<HTMLHeadingElement>(null);
|
||||
return (
|
||||
<Container>
|
||||
|
@ -34,10 +34,7 @@ const _getIconRenderColor = (shapes: TDShape[]) => {
|
||||
return max[0];
|
||||
};
|
||||
|
||||
export const BorderColorConfig: FC<BorderColorConfigProps> = ({
|
||||
app,
|
||||
shapes,
|
||||
}) => {
|
||||
export const BorderColorConfig = ({ app, shapes }: BorderColorConfigProps) => {
|
||||
const setBorderColor = (color: string) => {
|
||||
app.style({ stroke: color }, getShapeIds(shapes));
|
||||
};
|
||||
|
@ -13,7 +13,7 @@ import { DeleteShapes } from './DeleteOperation';
|
||||
import { Lock, Unlock } from './LockOperation';
|
||||
import { FrameFillColorConfig } from './FrameFillColorConfig';
|
||||
|
||||
export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => {
|
||||
export const CommandPanel = ({ app }: { app: TldrawApp }) => {
|
||||
const state = app.useStore();
|
||||
const bounds = TLDR.get_selected_bounds(state);
|
||||
const camera = app.useStore(
|
||||
|
@ -10,7 +10,7 @@ interface DeleteShapesProps {
|
||||
shapes: TDShape[];
|
||||
}
|
||||
|
||||
export const DeleteShapes: FC<DeleteShapesProps> = ({ app, shapes }) => {
|
||||
export const DeleteShapes = ({ app, shapes }: DeleteShapesProps) => {
|
||||
const deleteShapes = () => {
|
||||
app.delete(getShapeIds(shapes));
|
||||
};
|
||||
|
@ -41,10 +41,7 @@ const _getIconRenderColor = (shapes: TDShape[]) => {
|
||||
return max[0];
|
||||
};
|
||||
|
||||
export const FillColorConfig: FC<BorderColorConfigProps> = ({
|
||||
app,
|
||||
shapes,
|
||||
}) => {
|
||||
export const FillColorConfig = ({ app, shapes }: BorderColorConfigProps) => {
|
||||
const theme = useTheme();
|
||||
const setFillColor = (color: ColorType) => {
|
||||
app.style(
|
||||
|
@ -51,7 +51,7 @@ const _getFontSize = (shapes: TDShape[]): FontSizeStyle => {
|
||||
return max[0] as unknown as FontSizeStyle;
|
||||
};
|
||||
|
||||
export const FontSizeConfig: FC<FontSizeConfigProps> = ({ app, shapes }) => {
|
||||
export const FontSizeConfig = ({ app, shapes }: FontSizeConfigProps) => {
|
||||
const setFontSize = (size: FontSizeStyle) => {
|
||||
app.style({ fontSize: size }, getShapeIds(shapes));
|
||||
};
|
||||
|
@ -40,10 +40,10 @@ const _getIconRenderColor = (shapes: TDShape[]) => {
|
||||
return max[0];
|
||||
};
|
||||
|
||||
export const FrameFillColorConfig: FC<BorderColorConfigProps> = ({
|
||||
export const FrameFillColorConfig = ({
|
||||
app,
|
||||
shapes,
|
||||
}) => {
|
||||
}: BorderColorConfigProps) => {
|
||||
const theme = useTheme();
|
||||
const setFillColor = (color: ColorType) => {
|
||||
app.style(
|
||||
|
@ -10,7 +10,7 @@ interface GroupAndUnGroupProps {
|
||||
shapes: TDShape[];
|
||||
}
|
||||
|
||||
export const Group: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
|
||||
export const Group = ({ app, shapes }: GroupAndUnGroupProps) => {
|
||||
const group = () => {
|
||||
app.group(getShapeIds(shapes));
|
||||
};
|
||||
@ -23,7 +23,7 @@ export const Group: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const UnGroup: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
|
||||
export const UnGroup = ({ app, shapes }: GroupAndUnGroupProps) => {
|
||||
const ungroup = () => {
|
||||
app.ungroup(getShapeIds(shapes));
|
||||
};
|
||||
|
@ -10,7 +10,7 @@ interface GroupAndUnGroupProps {
|
||||
shapes: TDShape[];
|
||||
}
|
||||
|
||||
export const Lock: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
|
||||
export const Lock = ({ app, shapes }: GroupAndUnGroupProps) => {
|
||||
const lock = () => {
|
||||
app.lock(getShapeIds(shapes));
|
||||
};
|
||||
@ -23,7 +23,7 @@ export const Lock: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Unlock: FC<GroupAndUnGroupProps> = ({ app, shapes }) => {
|
||||
export const Unlock = ({ app, shapes }: GroupAndUnGroupProps) => {
|
||||
const unlock = () => {
|
||||
app.unlock(getShapeIds(shapes));
|
||||
};
|
||||
|
@ -44,12 +44,12 @@ interface LineStyleProps {
|
||||
onStrokeWidthChange: (width: StrokeWidth) => void;
|
||||
}
|
||||
|
||||
export const LineStyle: FC<LineStyleProps> = ({
|
||||
export const LineStyle = ({
|
||||
strokeStyle,
|
||||
onStrokeStyleChange,
|
||||
strokeWidth,
|
||||
onStrokeWidthChange,
|
||||
}) => {
|
||||
}: LineStyleProps) => {
|
||||
return (
|
||||
<Container>
|
||||
<Title>Stroke Style</Title>
|
||||
|
@ -24,10 +24,10 @@ interface BorderColorConfigProps {
|
||||
shapes: TDShape[];
|
||||
}
|
||||
|
||||
export const StrokeLineStyleConfig: FC<BorderColorConfigProps> = ({
|
||||
export const StrokeLineStyleConfig = ({
|
||||
app,
|
||||
shapes,
|
||||
}) => {
|
||||
}: BorderColorConfigProps) => {
|
||||
const strokeStyle = _getStrokeStyle(shapes);
|
||||
const strokeWidth = _getStrokeWidth(shapes);
|
||||
const setStrokeLineStyle = (style: DashStyle) => {
|
||||
|
@ -1,5 +1,5 @@
|
||||
import type { FC, ReactNode } from 'react';
|
||||
|
||||
export const ContextMenu: FC<{ children: ReactNode }> = ({ children }) => {
|
||||
export const ContextMenu = ({ children }: { children: ReactNode }) => {
|
||||
return <div>{children}</div>;
|
||||
};
|
||||
|
@ -26,11 +26,11 @@ const formatColors = (colors: ColorValue[]): ColorObject[] => {
|
||||
});
|
||||
};
|
||||
|
||||
export const Palette: FC<PaletteProps> = ({
|
||||
export const Palette = ({
|
||||
colors: propColors,
|
||||
selected,
|
||||
onSelect,
|
||||
}) => {
|
||||
}: PaletteProps) => {
|
||||
const colorObjects = useMemo(() => formatColors(propColors), [propColors]);
|
||||
return (
|
||||
<Container>
|
||||
|
@ -33,7 +33,7 @@ const shapes = [
|
||||
|
||||
const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
|
||||
|
||||
export const LineTools: FC<{ app: TldrawApp }> = ({ app }) => {
|
||||
export const LineTools = ({ app }: { app: TldrawApp }) => {
|
||||
const activeTool = app.useStore(activeToolSelector);
|
||||
|
||||
const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
|
||||
|
@ -69,7 +69,7 @@ const shapes = [
|
||||
|
||||
const activeToolSelector = (s: TDSnapshot) => s.appState.activeTool;
|
||||
|
||||
export const ShapeTools: FC<{ app: TldrawApp }> = ({ app }) => {
|
||||
export const ShapeTools = ({ app }: { app: TldrawApp }) => {
|
||||
const activeTool = app.useStore(activeToolSelector);
|
||||
|
||||
const [lastActiveTool, setLastActiveTool] = useState<ShapeTypes>(
|
||||
|
@ -68,7 +68,7 @@ const tools: Array<{
|
||||
},
|
||||
];
|
||||
|
||||
export const ToolsPanel: FC<{ app: TldrawApp }> = ({ app }) => {
|
||||
export const ToolsPanel = ({ app }: { app: TldrawApp }) => {
|
||||
const activeTool = app.useStore(activeToolSelector);
|
||||
|
||||
const isToolLocked = app.useStore(toolLockedSelector);
|
||||
|
@ -9,13 +9,13 @@ interface PenProps {
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export const Pen: FC<PenProps> = ({
|
||||
export const Pen = ({
|
||||
name,
|
||||
icon,
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
onClick,
|
||||
}) => {
|
||||
}: PenProps) => {
|
||||
return (
|
||||
<Tooltip content={name}>
|
||||
<StyledIconButton
|
||||
|
@ -105,7 +105,7 @@ const PENCIL_CONFIGS_MAP = PENCIL_CONFIGS.reduce<
|
||||
return acc;
|
||||
}, {} as Record<TDToolType, PencilConfig>);
|
||||
|
||||
export const PenTools: FC<{ app: TldrawApp }> = ({ app }) => {
|
||||
export const PenTools = ({ app }: { app: TldrawApp }) => {
|
||||
const appCurrentTool = app.useStore(state => state.appState.activeTool);
|
||||
const chosenPen =
|
||||
PENCIL_CONFIGS.find(config => config.key === appCurrentTool) ||
|
||||
|
@ -16,7 +16,7 @@ import { MiniMap } from './mini-map';
|
||||
const zoomSelector = (s: TDSnapshot) =>
|
||||
s.document.pageStates[s.appState.currentPageId].camera.zoom;
|
||||
|
||||
export const ZoomBar: FC = () => {
|
||||
export const ZoomBar = () => {
|
||||
const app = useTldrawApp();
|
||||
const zoom = app.useStore(zoomSelector);
|
||||
|
||||
|
@ -18,7 +18,7 @@ const getScaleToMap = (width: number, height: number) => {
|
||||
return scaleWidth > scaleHeight ? scaleWidth : scaleHeight;
|
||||
};
|
||||
|
||||
export const MiniMap: FC = () => {
|
||||
export const MiniMap = () => {
|
||||
const app = useTldrawApp();
|
||||
const page = app.useStore(s => s.document.pages[s.appState.currentPageId]);
|
||||
const pageState = app.useStore(
|
||||
|
@ -6,13 +6,13 @@ interface SimplifiedShapeProps extends TLBounds {
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export const SimplifiedShape: FC<SimplifiedShapeProps> = ({
|
||||
export const SimplifiedShape = ({
|
||||
onClick,
|
||||
width,
|
||||
height,
|
||||
minX,
|
||||
minY,
|
||||
}) => {
|
||||
}: SimplifiedShapeProps) => {
|
||||
const style: CSSProperties = {
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
|
@ -8,13 +8,13 @@ interface ViewportProps extends TLBounds {
|
||||
onPan?: (delta: [number, number]) => void;
|
||||
}
|
||||
|
||||
export const Viewport: FC<ViewportProps> = ({
|
||||
export const Viewport = ({
|
||||
onPan,
|
||||
width,
|
||||
height,
|
||||
minX,
|
||||
minY,
|
||||
}) => {
|
||||
}: ViewportProps) => {
|
||||
const style: CSSProperties = {
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
|
@ -43,7 +43,7 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
|
||||
const BulletLeft = styled('div')(() => ({
|
||||
height: '22px',
|
||||
}));
|
||||
export const BulletView: FC<CreateView> = ({ block, editor }) => {
|
||||
export const BulletView = ({ block, editor }: CreateView) => {
|
||||
// block.remove();
|
||||
const properties = { ...defaultBulletProps, ...block.getProperties() };
|
||||
const textRef = useRef<ExtendedTextUtils>(null);
|
||||
|
@ -126,7 +126,7 @@ const CodeBlock = styled('div')(({ theme }) => ({
|
||||
outline: 'none !important',
|
||||
},
|
||||
}));
|
||||
export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
|
||||
export const CodeView = ({ block, editor }: CreateCodeView) => {
|
||||
const initValue: string = block.getProperty('text')?.value?.[0]?.text;
|
||||
const langType: string = block.getProperty('lang');
|
||||
const [extensions, setExtensions] = useState<Extension[]>();
|
||||
|
@ -18,7 +18,7 @@ const Line = styled('div')({
|
||||
backgroundColor: '#e2e8f0',
|
||||
});
|
||||
|
||||
export const DividerView: FC<CreateView> = ({ block, editor }) => {
|
||||
export const DividerView = ({ block, editor }: CreateView) => {
|
||||
const [isSelected, setIsSelected] = useState(false);
|
||||
|
||||
useOnSelect(block.id, (isSelect: boolean) => {
|
||||
|
@ -13,7 +13,7 @@ const MESSAGES = {
|
||||
};
|
||||
|
||||
type EmbedLinkView = CreateView;
|
||||
export const EmbedLinkView: FC<EmbedLinkView> = props => {
|
||||
export const EmbedLinkView = (props: EmbedLinkView) => {
|
||||
const { block, editor } = props;
|
||||
const [isSelect, setIsSelect] = useState(false);
|
||||
|
||||
|
@ -16,7 +16,7 @@ const MESSAGES = {
|
||||
interface FigmaView extends CreateView {
|
||||
figmaUrl?: string;
|
||||
}
|
||||
export const FigmaView: FC<FigmaView> = ({ block, editor }) => {
|
||||
export const FigmaView = ({ block, editor }: FigmaView) => {
|
||||
const [figmaUrl, setFigmaUrl] = useState<string>(
|
||||
block.getProperty('embedLink')?.value
|
||||
);
|
||||
|
@ -48,7 +48,7 @@ const FileViewContainer = styled('div')<{ isSelected: boolean }>(
|
||||
};
|
||||
}
|
||||
);
|
||||
export const FileView: FC<FileView> = ({ block, editor }) => {
|
||||
export const FileView = ({ block, editor }: FileView) => {
|
||||
const [fileUrl, setFileUrl] = useState<string>();
|
||||
const fileInfo = block.getProperty('file') || ({} as FileColumnValue);
|
||||
const file_id = fileInfo.value;
|
||||
|
@ -7,7 +7,7 @@ import { GRID_PROPERTY_KEY, removePercent } from '../grid';
|
||||
export const GRID_ITEM_CLASS_NAME = 'grid-item';
|
||||
export const GRID_ITEM_CONTENT_CLASS_NAME = `${GRID_ITEM_CLASS_NAME}-content`;
|
||||
|
||||
export const GridItem: FC<ChildrenView> = function (props) {
|
||||
export const GridItem = function (props: ChildrenView) {
|
||||
const { children, block, editor } = props;
|
||||
const RENDER_DELAY_TIME = 100;
|
||||
const ref = useRef<HTMLDivElement>();
|
||||
|
@ -3,7 +3,7 @@ import { RenderBlock } from '@toeverything/components/editor-core';
|
||||
import { ChildrenView, CreateView } from '@toeverything/framework/virgo';
|
||||
|
||||
export const GridItemRender = function (creator: FC<ChildrenView>) {
|
||||
const GridItem: FC<CreateView> = function (props) {
|
||||
const GridItem = function (props: CreateView) {
|
||||
const { block } = props;
|
||||
const children = (
|
||||
<>
|
||||
|
@ -16,7 +16,7 @@ type GridHandleProps = {
|
||||
onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
|
||||
};
|
||||
|
||||
export const GridHandle: FC<GridHandleProps> = function ({
|
||||
export const GridHandle = function ({
|
||||
blockId,
|
||||
editor,
|
||||
enabledAddItem,
|
||||
@ -25,7 +25,7 @@ export const GridHandle: FC<GridHandleProps> = function ({
|
||||
draggable,
|
||||
alertHandleId,
|
||||
onMouseEnter,
|
||||
}) {
|
||||
}: GridHandleProps) {
|
||||
const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
|
||||
const handleMouseDown: React.MouseEventHandler<HTMLDivElement> = e => {
|
||||
if (draggable) {
|
||||
|
@ -20,7 +20,7 @@ export function removePercent(str: string) {
|
||||
return str.replace('%', '');
|
||||
}
|
||||
|
||||
export const Grid: FC<CreateView> = function (props) {
|
||||
export const Grid = function (props: CreateView) {
|
||||
const { block, editor } = props;
|
||||
const gridItemMinWidth = editor.configManager.grid.gridItemMinWidth;
|
||||
const [isOnDrag, setIsOnDrag] = useState<boolean>(false);
|
||||
|
@ -78,7 +78,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
|
||||
})
|
||||
);
|
||||
|
||||
export const GroupView: FC<CreateView> = props => {
|
||||
export const GroupView = (props: CreateView) => {
|
||||
const { block, editor } = props;
|
||||
const [currentView] = useCurrentView();
|
||||
const [groupIsSelect, setGroupIsSelect] = useState(false);
|
||||
|
@ -2,6 +2,6 @@ import { RenderBlockChildren } from '@toeverything/components/editor-core';
|
||||
import type { CreateView } from '@toeverything/framework/virgo';
|
||||
import { FC } from 'react';
|
||||
|
||||
export const ScenePage: FC<CreateView> = ({ block }) => {
|
||||
export const ScenePage = ({ block }: CreateView) => {
|
||||
return <RenderBlockChildren block={block} />;
|
||||
};
|
||||
|
@ -5,7 +5,7 @@ import type { CreateView } from '@toeverything/framework/virgo';
|
||||
import type { TableColumn, TableRow } from '../../components/table';
|
||||
import { Table, CustomCell } from '../../components/table';
|
||||
|
||||
export const SceneTable: FC<CreateView> = ({ block, columns, editor }) => {
|
||||
export const SceneTable = ({ block, columns, editor }: CreateView) => {
|
||||
const [rows, set_rows] = useState<TableRow[]>([]);
|
||||
const data_columns = useMemo<TableColumn[]>(() => {
|
||||
return (columns || [])
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { FC } from 'react';
|
||||
import { CreateView } from '@toeverything/framework/virgo';
|
||||
|
||||
export const GroupDividerView: FC<CreateView> = ({ block, editor }) => {
|
||||
export const GroupDividerView = ({ block, editor }: CreateView) => {
|
||||
return <></>;
|
||||
};
|
||||
|
@ -54,7 +54,7 @@ const KanbanImageContainer = styled('div')<{ isSelected: boolean }>(
|
||||
};
|
||||
}
|
||||
);
|
||||
export const ImageView: FC<ImageView> = ({ block, editor }) => {
|
||||
export const ImageView = ({ block, editor }: ImageView) => {
|
||||
const workspace = editor.workspace;
|
||||
const [imgUrl, set_image_url] = useState<string>();
|
||||
const [imgWidth, setImgWidth] = useState<number>(0);
|
||||
|
@ -40,7 +40,7 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
|
||||
);
|
||||
};
|
||||
|
||||
export const NumberedView: FC<CreateView> = ({ block, editor }) => {
|
||||
export const NumberedView = ({ block, editor }: CreateView) => {
|
||||
// block.remove();
|
||||
const properties = { ...defaultTodoProps, ...block.getProperties() };
|
||||
const [number, set_number] = useState<number>(1);
|
||||
|
@ -15,7 +15,7 @@ import {
|
||||
type ExtendedTextUtils,
|
||||
} from '../../components/text-manage';
|
||||
|
||||
export const PageView: FC<CreateView> = ({ block, editor }) => {
|
||||
export const PageView = ({ block, editor }: CreateView) => {
|
||||
const { workspace_id } = useParams();
|
||||
const textRef = useRef<ExtendedTextUtils>(null);
|
||||
const [backLinks, setBackLinks] =
|
||||
|
@ -5,7 +5,7 @@ import { CreateView } from '@toeverything/framework/virgo';
|
||||
|
||||
type RefLinkView = CreateView;
|
||||
|
||||
export const RefLinkView: FC<RefLinkView> = ({ block, editor }) => {
|
||||
export const RefLinkView = ({ block, editor }: RefLinkView) => {
|
||||
const page_id = useMemo(() => block.getProperty('reference'), [block]);
|
||||
|
||||
const [block_content, set_block] =
|
||||
|
@ -51,11 +51,11 @@ const TextBlock = styled(TextManage)<{ type: string }>(({ theme, type }) => {
|
||||
}
|
||||
});
|
||||
|
||||
export const TextView: FC<CreateTextView> = ({
|
||||
export const TextView = ({
|
||||
block,
|
||||
editor,
|
||||
containerClassName,
|
||||
}) => {
|
||||
}: CreateTextView) => {
|
||||
const [isSelect, setIsSelect] = useState<boolean>();
|
||||
useOnSelect(block.id, (is_select: boolean) => {
|
||||
setIsSelect(is_select);
|
||||
|
@ -11,7 +11,7 @@ const INITIAL_LIST: MenuItem[] = [];
|
||||
const MESSAGES = {
|
||||
NO_HEADINGS_FOUND: 'No headings found',
|
||||
};
|
||||
export const TocView: FC<CreateView> = ({ block, editor }) => {
|
||||
export const TocView = ({ block, editor }: CreateView) => {
|
||||
const [list, setList] = useState(INITIAL_LIST);
|
||||
useEffect(() => {
|
||||
const sync_toc = async () => {
|
||||
|
@ -8,12 +8,12 @@ interface CheckBoxProps {
|
||||
onChange: (checked: boolean) => void;
|
||||
}
|
||||
|
||||
export const CheckBox: FC<CheckBoxProps> = ({
|
||||
export const CheckBox = ({
|
||||
size = 16,
|
||||
height = 23,
|
||||
checked,
|
||||
onChange,
|
||||
}) => {
|
||||
}: CheckBoxProps) => {
|
||||
const dynamic_style = useMemo(
|
||||
() => ({
|
||||
height: {
|
||||
|
@ -33,7 +33,7 @@ const todoIsEmpty = (contentValue: ContentColumnValue): boolean => {
|
||||
);
|
||||
};
|
||||
|
||||
export const TodoView: FC<CreateView> = ({ block, editor }) => {
|
||||
export const TodoView = ({ block, editor }: CreateView) => {
|
||||
const properties = { ...defaultTodoProps, ...block.getProperties() };
|
||||
const text_ref = useRef<ExtendedTextUtils>(null);
|
||||
|
||||
|
@ -10,7 +10,7 @@ const _messages = {
|
||||
};
|
||||
|
||||
type YoutubeView = CreateView;
|
||||
export const YoutubeView: FC<YoutubeView> = ({ block }) => {
|
||||
export const YoutubeView = ({ block }: YoutubeView) => {
|
||||
const [youtubeUrl, setYoutubeUrl] = useState<string>(
|
||||
block.getProperty('embedLink')?.value
|
||||
);
|
||||
|
@ -7,13 +7,13 @@ type BlockContainerProps = Parameters<typeof Container>[0] & {
|
||||
editor: BlockEditor;
|
||||
};
|
||||
|
||||
export const BlockContainer: FC<BlockContainerProps> = function ({
|
||||
export const BlockContainer = function ({
|
||||
block,
|
||||
children,
|
||||
className,
|
||||
editor,
|
||||
...restProps
|
||||
}) {
|
||||
}: BlockContainerProps) {
|
||||
return (
|
||||
<Container
|
||||
className={`${className || ''} block_container`}
|
||||
|
@ -33,7 +33,7 @@ const ImageContainer = styled('div')<{ isSelected: boolean }>(
|
||||
};
|
||||
}
|
||||
);
|
||||
export const Image: FC<Props> = props => {
|
||||
export const Image = (props: Props) => {
|
||||
const { link, viewStyle, isSelected, block } = props;
|
||||
const on_resize_end = (e: any, data: any) => {
|
||||
block.setProperty('image_style', data.size);
|
||||
|
@ -5,7 +5,7 @@ import { styled } from '@toeverything/components/ui';
|
||||
/**
|
||||
* Indent rendering child nodes
|
||||
*/
|
||||
export const IndentWrapper: FC<PropsWithChildren> = props => {
|
||||
export const IndentWrapper = (props: PropsWithChildren) => {
|
||||
return <StyledIdentWrapper>{props.children}</StyledIdentWrapper>;
|
||||
};
|
||||
|
||||
|
@ -9,7 +9,7 @@ import { ErrorBoundary } from '@toeverything/utils';
|
||||
// onChange: () => void;
|
||||
// }
|
||||
|
||||
export const Editable: FC = () => {
|
||||
export const Editable = () => {
|
||||
const editor = useMemo(() => withReact(createEditor()), []);
|
||||
return (
|
||||
<ErrorBoundary
|
||||
|
@ -156,7 +156,7 @@ const LoadingContiner = () => {
|
||||
return <Loading>loading...</Loading>;
|
||||
};
|
||||
|
||||
export const SourceView: FC<Props> = props => {
|
||||
export const SourceView = (props: Props) => {
|
||||
const { link, isSelected, block, editorElement } = props;
|
||||
const src = formatUrl(link);
|
||||
// let iframeShow = useLazyIframe(src, 3000, iframeContainer);
|
||||
|
@ -64,8 +64,13 @@ export const DEFAULT_RENDER_CELL: CustomCell = ({ value }) => {
|
||||
return <span>{value ? String(value) : '--'}</span>;
|
||||
};
|
||||
|
||||
const Cell: FC<GridChildComponentProps<TableData>> = memo(
|
||||
({ data, rowIndex, columnIndex, style }) => {
|
||||
const Cell = memo(
|
||||
({
|
||||
data,
|
||||
rowIndex,
|
||||
columnIndex,
|
||||
style,
|
||||
}: GridChildComponentProps<TableData>) => {
|
||||
const column = data.columns[columnIndex];
|
||||
const row = data.rows[rowIndex];
|
||||
const is_first_column = columnIndex === 0;
|
||||
@ -89,18 +94,17 @@ const Cell: FC<GridChildComponentProps<TableData>> = memo(
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
areEqual
|
||||
}
|
||||
);
|
||||
|
||||
export const BasicTable: FC<BasicTableProps> = ({
|
||||
export const BasicTable = ({
|
||||
columns,
|
||||
rows,
|
||||
headerHeight = DEFAULT_ROW_HEIGHT,
|
||||
rowKey,
|
||||
border = true,
|
||||
renderCell = DEFAULT_RENDER_CELL,
|
||||
}) => {
|
||||
}: BasicTableProps) => {
|
||||
const container_ref = useRef<HTMLDivElement>();
|
||||
const [table_width, set_table_width] = useState(0);
|
||||
|
||||
|
@ -6,10 +6,10 @@ import type { CellProps } from '../types';
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export const CheckBoxCell: FC<CellProps<BooleanColumnValue>> = ({
|
||||
export const CheckBoxCell = ({
|
||||
value,
|
||||
onChange,
|
||||
}) => {
|
||||
}: CellProps<BooleanColumnValue>) => {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={value?.value}
|
||||
|
@ -9,7 +9,7 @@ import type { CellProps } from './types';
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
const DefaultCell: FC<CellProps> = ({ onChange, ...props }) => {
|
||||
const DefaultCell = ({ onChange, ...props }: CellProps) => {
|
||||
return <DEFAULT_RENDER_CELL {...props} />;
|
||||
};
|
||||
|
||||
@ -33,7 +33,7 @@ interface CustomCellProps extends TableCustomCellProps<unknown> {
|
||||
onChange: (data: TableCustomCellProps<unknown>) => void;
|
||||
}
|
||||
|
||||
export const CustomCell: FC<CustomCellProps> = props => {
|
||||
export const CustomCell = (props: CustomCellProps) => {
|
||||
const View =
|
||||
props.rowIndex === 0
|
||||
? DefaultCell
|
||||
|
@ -8,11 +8,11 @@ import type { CellProps } from '../types';
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
export const SelectCell: FC<CellProps<EnumColumnValue>> = ({
|
||||
export const SelectCell = ({
|
||||
value,
|
||||
column,
|
||||
onChange,
|
||||
}) => {
|
||||
}: CellProps<EnumColumnValue>) => {
|
||||
const options = useMemo(() => {
|
||||
if (isEnumColumn(column.columnConfig)) {
|
||||
return column.columnConfig.options.map(option => {
|
||||
|
@ -6,7 +6,7 @@ interface TableProps extends BasicTableProps {
|
||||
addon?: ReactNode;
|
||||
}
|
||||
|
||||
export const Table: FC<TableProps> = ({ addon, ...props }) => {
|
||||
export const Table = ({ addon, ...props }: TableProps) => {
|
||||
return (
|
||||
<div>
|
||||
{addon}
|
||||
|
@ -71,7 +71,7 @@ const UploadBox = styled('div')<{ isSelected: boolean }>(
|
||||
);
|
||||
|
||||
const button_styles: SxProps = { width: '60%', fontSize: '12px' };
|
||||
export const Upload: FC<Props> = props => {
|
||||
export const Upload = (props: Props) => {
|
||||
const {
|
||||
fileChange,
|
||||
size,
|
||||
|
@ -24,11 +24,11 @@ interface RenderRootProps {
|
||||
const MAX_PAGE_WIDTH = 5000;
|
||||
export const MIN_PAGE_WIDTH = 1480;
|
||||
|
||||
export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
|
||||
export const RenderRoot = ({
|
||||
editor,
|
||||
editorElement,
|
||||
children,
|
||||
}) => {
|
||||
}: PropsWithChildren<RenderRootProps>) => {
|
||||
const selectionRef = useRef<SelectionRef>(null);
|
||||
const triggeredBySelect = useRef(false);
|
||||
const [pageWidth, setPageWidth] = useState<number>(MIN_PAGE_WIDTH);
|
||||
|
@ -12,10 +12,10 @@ interface BlockTagProps {
|
||||
block: AsyncBlock;
|
||||
}
|
||||
|
||||
export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
|
||||
export const BlockPendantProvider = ({
|
||||
block,
|
||||
children,
|
||||
}) => {
|
||||
}: PropsWithChildren<BlockTagProps>) => {
|
||||
const triggerRef = useRef<HTMLDivElement>();
|
||||
const { getProperties } = useRecastBlockMeta();
|
||||
const properties = getProperties();
|
||||
|
@ -8,11 +8,11 @@ import {
|
||||
} from '@toeverything/components/ui';
|
||||
import { AddPendantPopover } from '../AddPendantPopover';
|
||||
|
||||
export const PendantPopover: FC<
|
||||
{
|
||||
export const PendantPopover = (
|
||||
props: {
|
||||
block: AsyncBlock;
|
||||
} & Omit<PopperProps, 'content'>
|
||||
> = props => {
|
||||
) => {
|
||||
const { block, ...popoverProps } = props;
|
||||
const popoverHandlerRef = useRef<PopperHandler>();
|
||||
return (
|
||||
|
@ -10,10 +10,10 @@ interface RenderBlockProps {
|
||||
hasContainer?: boolean;
|
||||
}
|
||||
|
||||
export const RenderBlock: FC<RenderBlockProps> = ({
|
||||
export const RenderBlock = ({
|
||||
blockId,
|
||||
hasContainer = true,
|
||||
}) => {
|
||||
}: RenderBlockProps) => {
|
||||
const { editor, editorElement } = useEditor();
|
||||
const { block } = useBlock(blockId);
|
||||
const blockRef = useRef<HTMLDivElement>(null);
|
||||
|
@ -6,7 +6,7 @@ interface RenderChildrenProps {
|
||||
block: AsyncBlock;
|
||||
}
|
||||
|
||||
export const RenderBlockChildren: FC<RenderChildrenProps> = ({ block }) => {
|
||||
export const RenderBlockChildren = ({ block }: RenderChildrenProps) => {
|
||||
return block.childrenIds.length ? (
|
||||
<>
|
||||
{block.childrenIds.map(childId => {
|
||||
|
@ -128,7 +128,7 @@ function DragComponent(props: {
|
||||
);
|
||||
}
|
||||
|
||||
export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
|
||||
export const LeftMenuDraggable = (props: LeftMenuProps) => {
|
||||
const { editor, blockInfo, defaultVisible, lineInfo } = props;
|
||||
const [visible, setVisible] = useState(defaultVisible);
|
||||
const [anchorEl, setAnchorEl] = useState<Element>();
|
||||
|
@ -8,7 +8,7 @@ interface StatusTrackProps {
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export const StatusTrack: FC<StatusTrackProps> = ({ mode, onClick }) => {
|
||||
export const StatusTrack = ({ mode, onClick }: StatusTrackProps) => {
|
||||
return (
|
||||
<Container onClick={onClick}>
|
||||
<StatusIcon mode={mode} />
|
||||
|
@ -3,7 +3,7 @@ import { styled } from '@toeverything/components/ui';
|
||||
import { LastModified } from './LastModified';
|
||||
import { Logout } from './Logout';
|
||||
|
||||
export const Footer: FC = () => {
|
||||
export const Footer = () => {
|
||||
return (
|
||||
<Container>
|
||||
<LastModified />
|
||||
|
@ -4,7 +4,7 @@ import { Typography, styled } from '@toeverything/components/ui';
|
||||
import { useUserAndSpaces } from '@toeverything/datasource/state';
|
||||
import { usePageLastUpdated, useWorkspaceAndPageId } from '../util';
|
||||
|
||||
export const LastModified: FC = () => {
|
||||
export const LastModified = () => {
|
||||
const { user } = useUserAndSpaces();
|
||||
const username = user ? user.nickname : 'Anonymous';
|
||||
const { workspaceId, pageId } = useWorkspaceAndPageId();
|
||||
|
@ -21,7 +21,7 @@ const logout = () => {
|
||||
window.location.href = '/';
|
||||
};
|
||||
|
||||
export const Logout: FC = () => {
|
||||
export const Logout = () => {
|
||||
return (
|
||||
<ListItem onClick={logout}>
|
||||
<StyledIcon />
|
||||
|
@ -39,13 +39,13 @@ interface IconButtonProps {
|
||||
hoverColor?: string;
|
||||
}
|
||||
|
||||
export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
|
||||
export const IconButton = ({
|
||||
children,
|
||||
disabled,
|
||||
onClick,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
}: PropsWithChildren<IconButtonProps>) => {
|
||||
return (
|
||||
<Container
|
||||
{...props}
|
||||
|
@ -20,11 +20,11 @@ const _textAlignMap: Record<
|
||||
end: 'right',
|
||||
};
|
||||
|
||||
export const Divider: FC<DividerProps> = ({
|
||||
export const Divider = ({
|
||||
orientation = 'horizontal',
|
||||
textAlign = 'center',
|
||||
children,
|
||||
}) => {
|
||||
}: DividerProps) => {
|
||||
return (
|
||||
<StyledMuiDivider
|
||||
orientation={orientation}
|
||||
|
@ -9,13 +9,13 @@ interface ListItemProps {
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
export const ListItem: FC<PropsWithChildren<ListItemProps>> = ({
|
||||
export const ListItem = ({
|
||||
active,
|
||||
children,
|
||||
onClick,
|
||||
className,
|
||||
style,
|
||||
}) => {
|
||||
}: PropsWithChildren<ListItemProps>) => {
|
||||
return (
|
||||
<Container
|
||||
active={active}
|
||||
|
@ -17,12 +17,7 @@ interface Props {
|
||||
extraStyle?: CSSProperties;
|
||||
}
|
||||
|
||||
export const OldSelect: FC<Props> = ({
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
extraStyle,
|
||||
}: Props) => {
|
||||
export const OldSelect = ({ value, options, onChange, extraStyle }: Props) => {
|
||||
const onSelectChange = useCallback(
|
||||
(e: ChangeEvent<HTMLSelectElement>) => {
|
||||
onChange(e.target.value);
|
||||
|
@ -14,7 +14,7 @@ interface SliderProps {
|
||||
onChange?: SliderUnstyledProps['onChange'];
|
||||
}
|
||||
|
||||
export const Slider: FC<SliderProps> = props => {
|
||||
export const Slider = (props: SliderProps) => {
|
||||
return <StyledSlider {...props} />;
|
||||
};
|
||||
|
||||
|
@ -19,7 +19,7 @@ export interface TagProps {
|
||||
endElement?: ReactNode;
|
||||
}
|
||||
|
||||
export const Tag: FC<PropsWithChildren<TagProps>> = ({
|
||||
export const Tag = ({
|
||||
onClick,
|
||||
style,
|
||||
children,
|
||||
@ -27,7 +27,7 @@ export const Tag: FC<PropsWithChildren<TagProps>> = ({
|
||||
onClose,
|
||||
startElement,
|
||||
endElement,
|
||||
}) => {
|
||||
}: PropsWithChildren<TagProps>) => {
|
||||
return (
|
||||
<StyledTag
|
||||
className={`affine-tag ${closeable ? 'affine-tag--closeable' : ''}`}
|
||||
|
@ -23,7 +23,7 @@ const theme = createTheme({
|
||||
affine: Theme,
|
||||
});
|
||||
|
||||
export const ThemeProvider: FC<{ children?: ReactNode }> = ({ children }) => {
|
||||
export const ThemeProvider = ({ children }: { children?: ReactNode }) => {
|
||||
return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user