Document Component

Lib

Popup

Description

importimport Popup from "@lib/component/Popup"

When to Use

Sử dụng khi muốn popup stick theo một elemnt

Examples

Basic

- Để mở popup sẽ có 9 hướng mở cơ bản. - Những thuộc tính cơ bản cần sử dụng trong method Open của Popup là elementRef, tranformOrigin, direction. - Cách này sử dụng khi bạn muốn popup mở ra stick theo một phần tử nào đó.

tranformPath

Sử dụng để di chuyển popup toạ độ [x,y] => [x1, y1]

Props

Property

Description

Type

Default

backdrop

Hiển thị backdrop hoặc ẩn backdrop

boolean

true

backdropBlur

Value blur backdrop

number

backdropColor

Màu của backdrop

string

rgba(0,0,0,0.4)

onBackdropPress

Function chạy khi click vào backdrop

function()

empty function

className

className Popup

string

children

Component inside Popup

ReactNode

openDuration

Thời gian mở popup (đơn vị: s)

number

0.3

closeDuration

Thời gian đóng popup (đơn vị: s)

number

0.25

lazyload

Component children chỉ được mount khi Popup mở

boolean

unmountOnHide

unmount component khi popup đóng

boolean

onOpenEnd

Function chạy khi popup mở hoàn toàn

function()

empty function

onCloseEnd

Function chạy khi popup đóng hoàn toàn

function()

empty function

initalScale

number

0.7

borderAnimate

- Aimate border của children khi animtion. - Tham số đầu tiên trong mảng là giá trị borderRadius khi animate. - Tham số thứ 2 là 1 mảng number sẽ theo thứ tự top-left, top-right, bottom-right, bottom-left (chỉ có 2 giá trị 1 vs 0 nếu 1 áp dụng animate còn 0 thì không áp dụng)

[number, [number, number, number, number]]

[0, [0, 0, 0, 0]]

animationParams

Timing function dành cho animate

{ easeOpenOpacity: Easing | Easing[], easeOpenPopup?: Easing | Easing[], easeCloseOpacity?: Easing | Easing[], easeClosePopup?: Easing | Easing[] }

easeOpenOpacity = cubicBezier(0.22, 0.98, 0.24, 0.98), easeOpenPopup = cubicBezier(0.39, 0.35, 0.14, 1.26), easeCloseOpacity = cubicBezier(0.7, 0.03, 0.88, 0.27), easeClosePopup = cubicBezier(0.45, 0, 0.55, 1)

Handler

Method: open: ( parameter1 ) => void

description method open

Parameter 1: Object

Property

Description

Type

Default

elementRef

Ref of element that want popup stick on

RefObject<HTMLElement>

originPlace

Which root point that popup start from, the stable place of popup that not change while animate

POPUP_ORIGIN_PLACE

POPUP_ORIGIN_PLACE.CENTER

direction

Direction that popup will animated to

POPUP_DIRECTION

POPUP_DIRECTION.CENTER

relativeXY

Relative coordinate to origin place

[number, number]

[0, 0]

vectorTransform

Transform vector (vector của phép tịnh tiến)

[number, number]

[0, 0]

transformPath

- Xác định toạ độ ban đầu và toạ độ kết thúc của animate. - Function này có 2 tham số toạ độ có sẵn là controlElementLayout: toạ độ của elementRef mà popup stick, popupLayout: width, height của popup

( controlElementLayout: { x1: number, y1: number, w1: number, h1: number }, popupLayout: { w2: number, y2: number } ) => { from: [number, number], to: [number, number] }

transformOrigin

- Giống với tranform origin trong css. - Chỉ áp dụng với tranformPath

TransformOrigin

borderAnimate

[number, [number, number, number, number]]

[0, [0, 0, 0, 0]]

initialScale

Giá trị scale ban đầu của children popup

number

0.7

Method: close: ( ) => void

no description

Method: isVisible: ( ) => boolean

no description

Method: isOpening: ( ) => boolean

no description

Method: isClosing: ( ) => boolean

no description