loader functional + refactoring

extension/iframe/create.tsx

@@ -40,7 +40,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 
 		return (
 			<div ref={ref => this.node = ref} className="page pageCreate">
-				{isLoading ? <Loader type="loader" /> : ''}
+				{isLoading ? <Loader type={I.LoaderType.Loader} /> : ''}
 
 				<div className="head">
 					<div className="side left">

extension/popup/create.tsx

@@ -62,7 +62,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 				ref={ref => this.node = ref} 
 				className="page pageCreate"
 			>
-				{isLoading ? <Loader type="loader" /> : ''}
+				{isLoading ? <Loader type={I.LoaderType.Loader} /> : ''}
 
 				<form onSubmit={this.onSubmit}>
 					<div className="rows">

src/ts/component/block/index.tsx

@@ -910,7 +910,7 @@ const Block = observer(class Block extends React.Component<Props> {
 
 			let icon = null;
 			if (_empty_) {
-				icon = <Loader type="loader" className={[ 'c' + size, 'inline' ].join(' ')} />;
+				icon = <Loader type={I.LoaderType.Loader} className={[ 'c' + size, 'inline' ].join(' ')} />;
 			} else {
 				icon = (
 					<IconObject 

src/ts/component/block/link.tsx

@@ -51,7 +51,7 @@ const BlockLink = observer(class BlockLink extends React.Component<I.BlockCompon
 					className="loading" 
 					{...U.Common.dataProps({ 'target-block-id': object.id })}
 				>
-					<Loader type="loader" />
+					<Loader type={I.LoaderType.Loader} />
 					<div className="name">{translate('blockLinkSyncing')}</div>
 				</div>
 			);

src/ts/component/util/label.tsx

@@ -12,7 +12,7 @@ interface Props {
 	onMouseLeave?: (e: any) => void;
 	onMouseDown?: (e: any) => void;
 	onClick?: (e: any) => void;
-}
+};
 
 const Label: FC<Props> = ({
 	id = '',
@@ -54,6 +54,7 @@ const Label: FC<Props> = ({
 			{...U.Common.dataProps({ ...dataset, content: text, 'animation-type': I.AnimType.Text })}
 		/>
 	);
+
 };
 
 export default Label;

src/ts/component/util/loader.tsx

@@ -1,47 +1,44 @@
-import * as React from 'react';
+import React, { forwardRef } from 'react';
+import { I } from 'Lib';
 
 interface Props {
 	id?: string;
-	type?: string;
+	type?: I.LoaderType;
 	className?: string;
 };
 
-class Loader extends React.Component<Props> {
+const Loader = forwardRef<HTMLDivElement, Props>(({
+	id = '',
+	type = I.LoaderType.Dots,
+	className = '',
+}, ref) => {
 
-	public static defaultProps = {
-		className: '',
-		type: 'dots',
-	};
-
-	render () {
-		const { id, type, className } = this.props;
-
-		let content = null;
-		switch (type) {
-			case 'loader': {
-				content = <div className="loader" />;
-				break;
-			};
-
-			case 'dots': {
-				content = (
-					<div className="dots">
-						<div className="dot" />
-						<div className="dot" />
-						<div className="dot" />
-					</div>
-				);
-				break;
-			};
+	let content = null;
+	switch (type) {
+		default:
+		case I.LoaderType.Dots: {
+			content = (
+				<div className="dots">
+					<div className="dot" />
+					<div className="dot" />
+					<div className="dot" />
+				</div>
+			);
+			break;
 		};
 
-		return (
-			<div id={id} className={[ 'loaderWrapper', className ].join(' ')}>
-				{content}
-			</div>
-		);
+		case I.LoaderType.Loader: {
+			content = <div className="loader" />;
+			break;
+		};
 	};
-	
-};
+
+	return (
+		<div id={id} className={[ 'loaderWrapper', className ].join(' ')}>
+			{content}
+		</div>
+	);
+
+});
 
 export default Loader;

src/ts/interface/common.ts

@@ -313,4 +313,9 @@ export enum SortId {
 	LastUsed	 = 'lastUsed',
 	List		 = 'list',
 	Compact		 = 'compact',
+};
+
+export enum LoaderType {
+	Loader		 = 'loader',
+	Dots		 = 'dots',
 };