50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { PopComponentRegistry } from "../../PopComponentRegistry";
|
||
|
|
import { PopSearchComponent } from "./PopSearchComponent";
|
||
|
|
import { PopSearchConfigPanel } from "./PopSearchConfig";
|
||
|
|
import type { PopSearchConfig } from "./types";
|
||
|
|
|
||
|
|
const defaultConfig: PopSearchConfig = {
|
||
|
|
inputType: "text",
|
||
|
|
fieldName: "",
|
||
|
|
placeholder: "검색어 입력",
|
||
|
|
debounceMs: 500,
|
||
|
|
triggerOnEnter: true,
|
||
|
|
labelPosition: "top",
|
||
|
|
labelText: "",
|
||
|
|
labelVisible: true,
|
||
|
|
};
|
||
|
|
|
||
|
|
function PopSearchPreviewComponent({ config, label }: { config?: PopSearchConfig; label?: string }) {
|
||
|
|
const cfg = config || defaultConfig;
|
||
|
|
const displayLabel = label || cfg.fieldName || "검색";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
|
||
|
|
<span className="text-[10px] font-medium text-muted-foreground">
|
||
|
|
{displayLabel}
|
||
|
|
</span>
|
||
|
|
<div className="flex h-6 w-full items-center rounded border border-dashed border-muted-foreground/30 px-2">
|
||
|
|
<span className="text-[9px] text-muted-foreground">
|
||
|
|
{cfg.placeholder || cfg.inputType}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
PopComponentRegistry.registerComponent({
|
||
|
|
id: "pop-search",
|
||
|
|
name: "검색",
|
||
|
|
description: "조건 입력 (텍스트/날짜/선택/모달)",
|
||
|
|
category: "input",
|
||
|
|
icon: "Search",
|
||
|
|
component: PopSearchComponent,
|
||
|
|
configPanel: PopSearchConfigPanel,
|
||
|
|
preview: PopSearchPreviewComponent,
|
||
|
|
defaultProps: defaultConfig,
|
||
|
|
touchOptimized: true,
|
||
|
|
supportedDevices: ["mobile", "tablet"],
|
||
|
|
});
|