89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { AutoRegisteringLayoutRenderer } from "../AutoRegisteringLayoutRenderer";
|
|
import { LayoutRendererProps } from "../BaseLayoutRenderer";
|
|
import { FlexboxLayoutDefinition } from "./index";
|
|
import { FlexboxLayout } from "./FlexboxLayout";
|
|
|
|
/**
|
|
* flexbox 렌더러 (새 구조)
|
|
*/
|
|
export class FlexboxLayoutRenderer extends AutoRegisteringLayoutRenderer {
|
|
/**
|
|
* 레이아웃 정의 (자동 등록용)
|
|
*/
|
|
static readonly layoutDefinition = FlexboxLayoutDefinition;
|
|
|
|
/**
|
|
* 클래스 로드 시 자동 등록 실행
|
|
*/
|
|
static {
|
|
this.registerSelf();
|
|
}
|
|
|
|
/**
|
|
* 렌더링 실행
|
|
*/
|
|
render(): React.ReactElement {
|
|
return <FlexboxLayout {...this.props} renderer={this} />;
|
|
}
|
|
|
|
/**
|
|
* 플렉스 아이템의 flex 값을 계산합니다.
|
|
*/
|
|
calculateFlexValue(zone: any, direction: string): string {
|
|
// 존의 크기에 따라 flex 값 결정
|
|
if (direction === "row" || direction === "row-reverse") {
|
|
// 가로 방향: width를 기준으로 flex 값 계산
|
|
if (typeof zone.size.width === "string") {
|
|
if (zone.size.width.includes("fr")) {
|
|
return zone.size.width.replace("fr", "");
|
|
} else if (zone.size.width.includes("%")) {
|
|
const percent = parseInt(zone.size.width.replace("%", ""));
|
|
return `0 0 ${percent}%`;
|
|
} else if (zone.size.width.includes("px")) {
|
|
return `0 0 ${zone.size.width}`;
|
|
}
|
|
} else if (typeof zone.size.width === "number") {
|
|
return `0 0 ${zone.size.width}px`;
|
|
}
|
|
} else {
|
|
// 세로 방향: height를 기준으로 flex 값 계산
|
|
if (typeof zone.size.height === "string") {
|
|
if (zone.size.height.includes("fr")) {
|
|
return zone.size.height.replace("fr", "");
|
|
} else if (zone.size.height.includes("%")) {
|
|
const percent = parseInt(zone.size.height.replace("%", ""));
|
|
return `0 0 ${percent}%`;
|
|
} else if (zone.size.height.includes("px")) {
|
|
return `0 0 ${zone.size.height}`;
|
|
}
|
|
} else if (typeof zone.size.height === "number") {
|
|
return `0 0 ${zone.size.height}px`;
|
|
}
|
|
}
|
|
|
|
// 기본값: 균등 분할
|
|
return "1";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* React 함수 컴포넌트로 래핑 (외부 사용용)
|
|
*/
|
|
export const FlexboxLayoutComponent: React.FC<LayoutRendererProps> = (props) => {
|
|
const renderer = new FlexboxLayoutRenderer(props);
|
|
return renderer.render();
|
|
};
|
|
|
|
// 개발 모드에서 Hot Reload 지원
|
|
if (process.env.NODE_ENV === "development") {
|
|
// HMR API 등록
|
|
if ((module as any).hot) {
|
|
(module as any).hot.accept();
|
|
(module as any).hot.dispose(() => {
|
|
FlexboxLayoutRenderer.unregisterSelf();
|
|
});
|
|
}
|
|
}
|