@contentstack/live-preview-utils/dist/modern/visualBuilder/components/Collab/Button/Button.cjs.map

Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane.

{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Button/Button.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { JSX } from \"preact\";\nimport classNames from \"classnames\";\nimport Icon, { IconProps } from \"../Icon/Icon\";\nimport AsyncLoader from \"../AsyncLoader/AsyncLoader\";\nimport { iconComponents } from \"../../icons/CollabIcons\";\nimport {\n    collabStyles,\n    flexAlignCenter,\n    flexCentered,\n} from \"../../../collab.style\";\n\ntype IconName = keyof typeof iconComponents;\n\ninterface ButtonProps {\n    buttonType?: \"primary\" | \"secondary\" | \"tertiary\" | \"destructive\";\n    children?: React.ReactNode;\n    className?: string;\n    testId?: string;\n    onClick?: JSX.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;\n    isLoading?: boolean;\n    loadingColor?: \"primary\" | \"secondary\" | \"tertiary\" | \"destructive\";\n    disabled?: boolean;\n    type?: \"button\" | \"submit\" | \"reset\";\n    style?: React.CSSProperties;\n    href?: string;\n    id?: string;\n    size?: \"large\" | \"small\";\n    icon?: IconName;\n    iconProps?: Partial<IconProps>;\n    iconAlignment?: \"left\" | \"right\" | \"both\";\n}\n\nconst Button: React.FC<ButtonProps> = ({\n    buttonType = \"primary\",\n    children,\n    className = \"\",\n    testId,\n    onClick,\n    isLoading,\n    loadingColor = \"primary\",\n    disabled = false,\n    type = \"button\",\n    style,\n    href,\n    id,\n    size = \"large\",\n    icon,\n    iconProps,\n    iconAlignment = \"left\",\n}) => {\n    const Element = href ? \"a\" : \"button\";\n    let nestedChildren: React.ReactNode =\n        children && React.Children.toArray([children]);\n\n    if (icon) {\n        let iconChild = <Icon icon={icon} {...iconProps} />;\n\n        switch (iconAlignment) {\n            case \"left\":\n                nestedChildren = React.Children.toArray([\n                    iconChild,\n                    nestedChildren,\n                ]);\n                break;\n            case \"right\":\n                nestedChildren = React.Children.toArray([\n                    nestedChildren,\n                    iconChild,\n                ]);\n                break;\n            case \"both\":\n                nestedChildren = React.Children.toArray([\n                    iconChild,\n                    nestedChildren,\n                    iconChild,\n                ]);\n                break;\n            default:\n                break;\n        }\n    }\n\n    const combinedClassName = classNames(\n        collabStyles()[\"collab-button--basestyle\"],\n        collabStyles()[\"collab-button--type\"][buttonType],\n        collabStyles()[\"collab-button--size\"][size],\n        icon && collabStyles()[\"collab-button--icon-allignment\"][iconAlignment],\n        disabled && collabStyles()[\"collab-button--disabled\"],\n        isLoading && collabStyles()[\"collab-button--loading\"],\n        className,\n\n        `collab-button collab-button--${buttonType} collab-button--${size} ${\n            icon ? `collab-button--icon-${iconAlignment}` : \"\"\n        } ${disabled ? \"collab-button--disabled\" : \"\"}\n        ${isLoading ? \"collab-button--loading\" : \"\"}`\n    );\n\n    // Ensure style is valid\n    const validStyle = Object.fromEntries(\n        Object.entries(style || {}).filter(([_, value]) => value != null)\n    );\n\n    return (\n        <Element\n            className={combinedClassName}\n            id={id}\n            onClick={onClick}\n            type={type}\n            style={validStyle as React.CSSProperties}\n            disabled={disabled}\n            href={href}\n            data-testid={testId}\n        >\n            <div className={classNames(\"flex-center\", flexCentered)}>\n                {isLoading && (\n                    <div\n                        className={classNames(\n                            collabStyles()[\"collab-button--loader--wrapper\"],\n                            \"collab-button--loader--wrapper\"\n                        )}\n                    >\n                        <AsyncLoader color={loadingColor} />\n                    </div>\n                )}\n                <div\n                    className={classNames(\n                        \"flex-v-center\",\n                        flexAlignCenter,\n                        {\n                            [`${collabStyles()[\"collab-button--size\"][\"regular\"]} collab-button--regular`]:\n                                size !== \"small\",\n                        },\n                        !isLoading\n                            ? `${collabStyles()[\"collab-button--visible\"]} collab-button--visible`\n                            : `${collabStyles()[\"collab-button--hidden\"]} collab-button--hidden`\n                    )}\n                >\n                    {nestedChildren}\n                </div>\n            </div>\n        </Element>\n    );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAkB;AAElB,wBAAuB;AACvB,kBAAgC;AAChC,yBAAwB;AAExB,oBAIO;AA8CiB;AAvBxB,IAAM,SAAgC,CAAC;AAAA,EACnC,aAAa;AAAA,EACb;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,gBAAgB;AACpB,MAAM;AACF,QAAM,UAAU,OAAO,MAAM;AAC7B,MAAI,iBACA,YAAY,cAAAA,QAAM,SAAS,QAAQ,CAAC,QAAQ,CAAC;AAEjD,MAAI,MAAM;AACN,QAAI,YAAY,4CAAC,YAAAC,SAAA,EAAK,MAAa,GAAG,WAAW;AAEjD,YAAQ,eAAe;AAAA,MACnB,KAAK;AACD,yBAAiB,cAAAD,QAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ,KAAK;AACD,yBAAiB,cAAAA,QAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ,KAAK;AACD,yBAAiB,cAAAA,QAAM,SAAS,QAAQ;AAAA,UACpC;AAAA,UACA;AAAA,UACA;AAAA,QACJ,CAAC;AACD;AAAA,MACJ;AACI;AAAA,IACR;AAAA,EACJ;AAEA,QAAM,wBAAoB,kBAAAE;AAAA,QACtB,4BAAa,EAAE,0BAA0B;AAAA,QACzC,4BAAa,EAAE,qBAAqB,EAAE,UAAU;AAAA,QAChD,4BAAa,EAAE,qBAAqB,EAAE,IAAI;AAAA,IAC1C,YAAQ,4BAAa,EAAE,gCAAgC,EAAE,aAAa;AAAA,IACtE,gBAAY,4BAAa,EAAE,yBAAyB;AAAA,IACpD,iBAAa,4BAAa,EAAE,wBAAwB;AAAA,IACpD;AAAA,IAEA,gCAAgC,UAAU,mBAAmB,IAAI,IAC7D,OAAO,uBAAuB,aAAa,KAAK,EACpD,IAAI,WAAW,4BAA4B,EAAE;AAAA,UAC3C,YAAY,2BAA2B,EAAE;AAAA,EAC/C;AAGA,QAAM,aAAa,OAAO;AAAA,IACtB,OAAO,QAAQ,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,MAAM,SAAS,IAAI;AAAA,EACpE;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MAEb,uDAAC,SAAI,eAAW,kBAAAA,SAAW,eAAe,0BAAY,GACjD;AAAA,qBACG;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAA;AAAA,kBACP,4BAAa,EAAE,gCAAgC;AAAA,cAC/C;AAAA,YACJ;AAAA,YAEA,sDAAC,mBAAAC,SAAA,EAAY,OAAO,cAAc;AAAA;AAAA,QACtC;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACG,eAAW,kBAAAD;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,gBACI,CAAC,OAAG,4BAAa,EAAE,qBAAqB,EAAE,SAAS,CAAC,yBAAyB,GACzE,SAAS;AAAA,cACjB;AAAA,cACA,CAAC,YACK,OAAG,4BAAa,EAAE,wBAAwB,CAAC,4BAC3C,OAAG,4BAAa,EAAE,uBAAuB,CAAC;AAAA,YACpD;AAAA,YAEC;AAAA;AAAA,QACL;AAAA,SACJ;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,iBAAQ;","names":["React","Icon","classNames","AsyncLoader"]}