@sangwonl/pocato-react 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -76,7 +76,7 @@ var PocaCard = forwardRef(
|
|
|
76
76
|
style: props.style,
|
|
77
77
|
className: props.className,
|
|
78
78
|
children: [
|
|
79
|
-
portalTargets.front && props.
|
|
79
|
+
portalTargets.front && props.frontContent && createPortal(props.frontContent, portalTargets.front),
|
|
80
80
|
portalTargets.back && props.backContent && createPortal(props.backContent, portalTargets.back)
|
|
81
81
|
]
|
|
82
82
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/PocaCard.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { PocaCard as CorePocaCard, type PocaCardOptions } from '@sangwonl/pocato-core'\n\nexport interface PocaCardHandle {\n flip(): void\n wiggle(): void\n reset(): void\n}\n\nexport interface PocaCardProps {\n type: PocaCardOptions['type']\n baseImage: string\n popupImage?: string\n maskImage?: string\n backImage?: string\n flippable?: boolean\n initialFlipped?: boolean\n customShader?: string\n
|
|
1
|
+
{"version":3,"sources":["../src/PocaCard.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { PocaCard as CorePocaCard, type PocaCardOptions } from '@sangwonl/pocato-core'\n\nexport interface PocaCardHandle {\n flip(): void\n wiggle(): void\n reset(): void\n}\n\nexport interface PocaCardProps {\n type: PocaCardOptions['type']\n baseImage: string\n popupImage?: string\n maskImage?: string\n backImage?: string\n flippable?: boolean\n initialFlipped?: boolean\n customShader?: string\n frontContent?: ReactNode\n backContent?: ReactNode\n onFlip?: (flipped: boolean) => void\n onReady?: () => void\n onError?: (error: Error) => void\n style?: CSSProperties\n className?: string\n}\n\nexport const PocaCard = forwardRef<PocaCardHandle, PocaCardProps>(\n (props, ref) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const cardRef = useRef<CorePocaCard | null>(null)\n const [portalTargets, setPortalTargets] = useState<{\n front: HTMLElement | null\n back: HTMLElement | null\n }>({ front: null, back: null })\n\n // Create/destroy core instance\n useEffect(() => {\n if (!containerRef.current) return\n\n const card = new CorePocaCard(containerRef.current, {\n type: props.type,\n baseImage: props.baseImage,\n popupImage: props.popupImage,\n maskImage: props.maskImage,\n backImage: props.backImage,\n flippable: props.flippable,\n initialFlipped: props.initialFlipped,\n customShader: props.customShader,\n })\n\n cardRef.current = card\n setPortalTargets({\n front: card.getFrontContentEl(),\n back: card.getBackContentEl(),\n })\n\n return () => {\n card.destroy()\n cardRef.current = null\n setPortalTargets({ front: null, back: null })\n }\n // Re-create only when type changes (major config change)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.type])\n\n // Sync image options\n useEffect(() => {\n cardRef.current?.updateOptions({\n baseImage: props.baseImage,\n popupImage: props.popupImage,\n maskImage: props.maskImage,\n })\n }, [props.baseImage, props.popupImage, props.maskImage])\n\n // Sync custom shader\n useEffect(() => {\n if (props.customShader) {\n cardRef.current?.updateOptions({ customShader: props.customShader })\n }\n }, [props.customShader])\n\n // Bind events\n useEffect(() => {\n const card = cardRef.current\n if (!card) return\n\n const onFlip = props.onFlip\n const onReady = props.onReady\n const onError = props.onError\n\n if (onFlip) card.on('flip', onFlip)\n if (onReady) card.on('ready', onReady)\n if (onError) card.on('error', onError)\n\n return () => {\n if (onFlip) card.off('flip', onFlip)\n if (onReady) card.off('ready', onReady)\n if (onError) card.off('error', onError)\n }\n }, [props.onFlip, props.onReady, props.onError])\n\n // Expose imperative handle\n useImperativeHandle(ref, () => ({\n flip: () => cardRef.current?.flip(),\n wiggle: () => cardRef.current?.wiggle(),\n reset: () => cardRef.current?.reset(),\n }))\n\n return (\n <div\n ref={containerRef}\n style={props.style}\n className={props.className}\n >\n {portalTargets.front && props.frontContent && createPortal(props.frontContent, portalTargets.front)}\n {portalTargets.back && props.backContent && createPortal(props.backContent, portalTargets.back)}\n </div>\n )\n },\n)\n\nPocaCard.displayName = 'PocaCard'\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,oBAAoB;AAC7B,SAAS,YAAY,oBAA0C;AA6GzD;AAnFC,IAAM,WAAW;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,UAAU,OAA4B,IAAI;AAChD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAGvC,EAAE,OAAO,MAAM,MAAM,KAAK,CAAC;AAG9B,cAAU,MAAM;AACd,UAAI,CAAC,aAAa,QAAS;AAE3B,YAAM,OAAO,IAAI,aAAa,aAAa,SAAS;AAAA,QAClD,MAAM,MAAM;AAAA,QACZ,WAAW,MAAM;AAAA,QACjB,YAAY,MAAM;AAAA,QAClB,WAAW,MAAM;AAAA,QACjB,WAAW,MAAM;AAAA,QACjB,WAAW,MAAM;AAAA,QACjB,gBAAgB,MAAM;AAAA,QACtB,cAAc,MAAM;AAAA,MACtB,CAAC;AAED,cAAQ,UAAU;AAClB,uBAAiB;AAAA,QACf,OAAO,KAAK,kBAAkB;AAAA,QAC9B,MAAM,KAAK,iBAAiB;AAAA,MAC9B,CAAC;AAED,aAAO,MAAM;AACX,aAAK,QAAQ;AACb,gBAAQ,UAAU;AAClB,yBAAiB,EAAE,OAAO,MAAM,MAAM,KAAK,CAAC;AAAA,MAC9C;AAAA,IAGF,GAAG,CAAC,MAAM,IAAI,CAAC;AAGf,cAAU,MAAM;AACd,cAAQ,SAAS,cAAc;AAAA,QAC7B,WAAW,MAAM;AAAA,QACjB,YAAY,MAAM;AAAA,QAClB,WAAW,MAAM;AAAA,MACnB,CAAC;AAAA,IACH,GAAG,CAAC,MAAM,WAAW,MAAM,YAAY,MAAM,SAAS,CAAC;AAGvD,cAAU,MAAM;AACd,UAAI,MAAM,cAAc;AACtB,gBAAQ,SAAS,cAAc,EAAE,cAAc,MAAM,aAAa,CAAC;AAAA,MACrE;AAAA,IACF,GAAG,CAAC,MAAM,YAAY,CAAC;AAGvB,cAAU,MAAM;AACd,YAAM,OAAO,QAAQ;AACrB,UAAI,CAAC,KAAM;AAEX,YAAM,SAAS,MAAM;AACrB,YAAM,UAAU,MAAM;AACtB,YAAM,UAAU,MAAM;AAEtB,UAAI,OAAQ,MAAK,GAAG,QAAQ,MAAM;AAClC,UAAI,QAAS,MAAK,GAAG,SAAS,OAAO;AACrC,UAAI,QAAS,MAAK,GAAG,SAAS,OAAO;AAErC,aAAO,MAAM;AACX,YAAI,OAAQ,MAAK,IAAI,QAAQ,MAAM;AACnC,YAAI,QAAS,MAAK,IAAI,SAAS,OAAO;AACtC,YAAI,QAAS,MAAK,IAAI,SAAS,OAAO;AAAA,MACxC;AAAA,IACF,GAAG,CAAC,MAAM,QAAQ,MAAM,SAAS,MAAM,OAAO,CAAC;AAG/C,wBAAoB,KAAK,OAAO;AAAA,MAC9B,MAAM,MAAM,QAAQ,SAAS,KAAK;AAAA,MAClC,QAAQ,MAAM,QAAQ,SAAS,OAAO;AAAA,MACtC,OAAO,MAAM,QAAQ,SAAS,MAAM;AAAA,IACtC,EAAE;AAEF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO,MAAM;AAAA,QACb,WAAW,MAAM;AAAA,QAEhB;AAAA,wBAAc,SAAS,MAAM,gBAAgB,aAAa,MAAM,cAAc,cAAc,KAAK;AAAA,UACjG,cAAc,QAAQ,MAAM,eAAe,aAAa,MAAM,aAAa,cAAc,IAAI;AAAA;AAAA;AAAA,IAChG;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;","names":[]}
|