@adyen/kyc-components
Version:
This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.
106 lines (105 loc) • 4.62 kB
JavaScript
try {
let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "0c7d18ba-8446-4a44-a8b9-5a661cc381ab", e._sentryDebugIdIdentifier = "sentry-dbid-0c7d18ba-8446-4a44-a8b9-5a661cc381ab");
} catch (e) {}
import cx from "classnames";
import { jsx } from "preact/jsx-runtime";
import { Fragment as Fragment$1, toChildArray } from "preact";
var StackLayout_module_default = {
"stack-layout": "adyen-kyc-stack-layout",
stackLayout: "adyen-kyc-stack-layout",
"stack-layout-gap-xs": "adyen-kyc-stack-layout-gap-xs",
stackLayoutGapXs: "adyen-kyc-stack-layout-gap-xs",
"stack-layout-gap-s": "adyen-kyc-stack-layout-gap-s",
stackLayoutGapS: "adyen-kyc-stack-layout-gap-s",
"stack-layout-gap-m": "adyen-kyc-stack-layout-gap-m",
stackLayoutGapM: "adyen-kyc-stack-layout-gap-m",
"stack-layout-gap-l": "adyen-kyc-stack-layout-gap-l",
stackLayoutGapL: "adyen-kyc-stack-layout-gap-l",
"stack-layout-gap-xl": "adyen-kyc-stack-layout-gap-xl",
stackLayoutGapXl: "adyen-kyc-stack-layout-gap-xl",
"stack-layout-left": "adyen-kyc-stack-layout-left",
stackLayoutLeft: "adyen-kyc-stack-layout-left",
"stack-layout-center": "adyen-kyc-stack-layout-center",
stackLayoutCenter: "adyen-kyc-stack-layout-center",
"stack-layout-right": "adyen-kyc-stack-layout-right",
stackLayoutRight: "adyen-kyc-stack-layout-right",
"stack-layout-item": "adyen-kyc-stack-layout-item",
stackLayoutItem: "adyen-kyc-stack-layout-item",
"stack-layout-horizontal": "adyen-kyc-stack-layout-horizontal",
stackLayoutHorizontal: "adyen-kyc-stack-layout-horizontal",
"stack-layout-left-horizontal": "adyen-kyc-stack-layout-left-horizontal",
stackLayoutLeftHorizontal: "adyen-kyc-stack-layout-left-horizontal",
"stack-layout-center-horizontal": "adyen-kyc-stack-layout-center-horizontal",
stackLayoutCenterHorizontal: "adyen-kyc-stack-layout-center-horizontal",
"stack-layout-right-horizontal": "adyen-kyc-stack-layout-right-horizontal",
stackLayoutRightHorizontal: "adyen-kyc-stack-layout-right-horizontal"
};
//#endregion
//#region src/components/ui/layout/StackLayout/StackLayout.tsx
var gapStyles = {
xSmall: StackLayout_module_default.stackLayoutGapXs,
small: StackLayout_module_default.stackLayoutGapS,
medium: StackLayout_module_default.stackLayoutGapM,
large: StackLayout_module_default.stackLayoutGapL,
xLarge: StackLayout_module_default.stackLayoutGapXl,
none: null
};
var alignStyles = {
left: StackLayout_module_default.stackLayoutLeft,
center: StackLayout_module_default.stackLayoutCenter,
right: StackLayout_module_default.stackLayoutRight,
auto: null
};
var horizontalAlignStyles = {
left: StackLayout_module_default.stackLayoutLeftHorizontal,
center: StackLayout_module_default.stackLayoutCenterHorizontal,
right: StackLayout_module_default.stackLayoutRightHorizontal,
auto: null
};
var flattenChildren = (children) => {
return toChildArray(children).flatMap((child) => {
if (typeof child === "object" && child.type === Fragment$1) return flattenChildren(child.props.children);
return child;
});
};
/**
* Layout helper to easily boostrap form and page layouts.
*
* It can be used to render children as a column or row. When rendered as a row, responsiveness is handle automatically. On small devices, children rendered as a row will be rendered as a column.
* *
* @example
* ```jsx
* <StackLayout align="center" gap="large">
* <div />
* <div />
* </StackLayout>
*
* <StackLayout align="center" gap="large" horizontal>
* <div />
* <div />
* </StackLayout>
* ```
*
* @param align Specify how content should be rendered. Default: 'auto'.
* @param gap Specify spacing between children. Default: 'medium'.
* @param horizontal Specify if children are rendered as a row. Responsiveness is handled automatically.
*/
var StackLayout = ({ align = "auto", children, gap = "medium", horizontal = false }) => {
const flattenedChildren = flattenChildren(children);
return /* @__PURE__ */ jsx("div", {
className: cx(StackLayout_module_default.stackLayout, gapStyles[gap], alignStyles[align], {
[horizontalAlignStyles[align]]: horizontal,
[StackLayout_module_default.stackLayoutHorizontal]: horizontal
}),
children: flattenedChildren.map((item, i) => {
if (align === "auto") return /* @__PURE__ */ jsx("div", {
className: StackLayout_module_default.stackLayoutItem,
children: item
}, item.key ?? i);
return item;
})
});
};
//#endregion
export { StackLayout as t };