@chayns-components/core 5.0.0-beta.104 → 5.0.0-beta.1040

package/lib/esm/components/sharing-bar/SharingBar.js

@@ -0,0 +1,110 @@
+import { getSite } from 'chayns-api';
+import React, { useCallback, useRef } from 'react';
+import { SHAREPROVIDER } from '../../constants/sharingBar';
+import { getIsTouch } from '../../utils/environment';
+import { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';
+import ContextMenu from '../context-menu/ContextMenu';
+import Icon from '../icon/Icon';
+import { StyledSharingBar, StyledSharingBarIconWrapper, StyledSharingBarText } from './SharingBar.styles';
+const SharingBar = _ref => {
+  let {
+    label,
+    link,
+    popupAlignment,
+    container
+  } = _ref;
+  const contextMenuRef = useRef(null);
+  const handleImageDownload = () => {
+    shareWithUrl(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    SHAREPROVIDER[5].url.replace('{url}', encodeURIComponent(link)).replace('{linkText}', 'Teilen').replace('{color}', getSite().color.replace('#', '')));
+  };
+  const handleShare = key => {
+    contextMenuRef.current?.hide();
+    const isTouch = getIsTouch();
+    switch (key) {
+      case 'whatsapp':
+        shareWithUrl(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        SHAREPROVIDER[0].url.replace('{url}', encodeURIComponent(`${link}`.trim())));
+        break;
+      case 'facebook':
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        shareWithUrl(SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)));
+        break;
+      case 'twitter':
+        shareWithUrl(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        SHAREPROVIDER[4].url.replace('{url}', encodeURIComponent(link)).replace('{linkText}', ''));
+        break;
+      case 'mail':
+        if (isTouch) {
+          shareWithApp(`${link}`.trim());
+        } else {
+          shareWithUrl(
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          SHAREPROVIDER[2].url.replace('{url}', encodeURIComponent(`${link}`.trim())));
+        }
+        break;
+      case 'copy':
+        copyToClipboard(link);
+        break;
+      default:
+        break;
+    }
+  };
+  const contextMenuItems = [{
+    icons: ['fa fa-copy'],
+    key: 'copy',
+    onClick: () => handleShare('copy'),
+    text: 'Zwischenablage'
+  }, {
+    icons: ['fa-solid fa-brands fa-whatsapp'],
+    key: 'whatsapp',
+    onClick: () => handleShare('whatsapp'),
+    text: 'Whatsapp'
+  }, {
+    icons: ['fa-solid fa-brands fa-facebook-f'],
+    key: 'facebook',
+    onClick: () => handleShare('facebook'),
+    text: 'Facebook'
+  }, {
+    icons: ['fa-solid fa-brands fa-x-twitter'],
+    key: 'twitter',
+    onClick: () => handleShare('twitter'),
+    text: 'X'
+  }, {
+    icons: ['fa fa-envelope'],
+    key: 'mail',
+    onClick: () => handleShare('mail'),
+    text: 'Mail'
+  }, {
+    icons: ['fa fa-qrcode'],
+    key: 'callingCode',
+    onClick: handleImageDownload,
+    text: 'Calling Code herunterladen'
+  }];
+  const handleSharingBarClick = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    contextMenuRef.current?.show();
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledSharingBar, {
+    onClick: handleSharingBarClick
+  }, /*#__PURE__*/React.createElement(StyledSharingBarIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa-solid fa-share-nodes']
+  })), /*#__PURE__*/React.createElement(ContextMenu, {
+    items: contextMenuItems,
+    ref: contextMenuRef,
+    alignment: popupAlignment,
+    container: container
+  }, null), /*#__PURE__*/React.createElement(StyledSharingBarText, null, label));
+};
+SharingBar.displayName = 'SharingBar';
+export default SharingBar;
+//# sourceMappingURL=SharingBar.js.map

package/lib/esm/components/sharing-bar/SharingBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharingBar.js","names":["getSite","React","useCallback","useRef","SHAREPROVIDER","getIsTouch","copyToClipboard","shareWithApp","shareWithUrl","ContextMenu","Icon","StyledSharingBar","StyledSharingBarIconWrapper","StyledSharingBarText","SharingBar","_ref","label","link","popupAlignment","container","contextMenuRef","handleImageDownload","url","replace","encodeURIComponent","color","handleShare","key","current","hide","isTouch","trim","contextMenuItems","icons","onClick","text","handleSharingBarClick","event","preventDefault","stopPropagation","show","createElement","items","ref","alignment","displayName"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport React, { FC, MouseEventHandler, useCallback, useRef } from 'react';\nimport { SHAREPROVIDER } from '../../constants/sharingBar';\nimport type { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSharingBar,\n    StyledSharingBarIconWrapper,\n    StyledSharingBarText,\n} from './SharingBar.styles';\n\nexport type SharingBarProps = {\n    /**\n     * The element where the content of the `SharingBar` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The label that should be displayed.\n     */\n    label: string;\n    /**\n     * The link that should be shared.\n     */\n    link: string;\n    /**\n     * The alignment of the sharing options.\n     */\n    popupAlignment: ContextMenuAlignment;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({ label, link, popupAlignment, container }) => {\n    const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n\n    const handleImageDownload = () => {\n        shareWithUrl(\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            SHAREPROVIDER[5].url\n                .replace('{url}', encodeURIComponent(link))\n                .replace('{linkText}', 'Teilen')\n                .replace('{color}', getSite().color.replace('#', '')),\n        );\n    };\n\n    const handleShare = (key: string) => {\n        contextMenuRef.current?.hide();\n\n        const isTouch = getIsTouch();\n\n        switch (key) {\n            case 'whatsapp':\n                shareWithUrl(\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    SHAREPROVIDER[0].url.replace('{url}', encodeURIComponent(`${link}`.trim())),\n                );\n                break;\n            case 'facebook':\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                shareWithUrl(SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)));\n                break;\n            case 'twitter':\n                shareWithUrl(\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    SHAREPROVIDER[4].url\n                        .replace('{url}', encodeURIComponent(link))\n                        .replace('{linkText}', ''),\n                );\n                break;\n            case 'mail':\n                if (isTouch) {\n                    shareWithApp(`${link}`.trim());\n                } else {\n                    shareWithUrl(\n                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                        // @ts-ignore\n                        SHAREPROVIDER[2].url.replace('{url}', encodeURIComponent(`${link}`.trim())),\n                    );\n                }\n                break;\n            case 'copy':\n                copyToClipboard(link);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const contextMenuItems = [\n        {\n            icons: ['fa fa-copy'],\n            key: 'copy',\n            onClick: () => handleShare('copy'),\n            text: 'Zwischenablage',\n        },\n        {\n            icons: ['fa-solid fa-brands fa-whatsapp'],\n            key: 'whatsapp',\n            onClick: () => handleShare('whatsapp'),\n            text: 'Whatsapp',\n        },\n        {\n            icons: ['fa-solid fa-brands fa-facebook-f'],\n            key: 'facebook',\n            onClick: () => handleShare('facebook'),\n            text: 'Facebook',\n        },\n        {\n            icons: ['fa-solid fa-brands fa-x-twitter'],\n            key: 'twitter',\n            onClick: () => handleShare('twitter'),\n            text: 'X',\n        },\n        {\n            icons: ['fa fa-envelope'],\n            key: 'mail',\n            onClick: () => handleShare('mail'),\n            text: 'Mail',\n        },\n        {\n            icons: ['fa fa-qrcode'],\n            key: 'callingCode',\n            onClick: handleImageDownload,\n            text: 'Calling Code herunterladen',\n        },\n    ];\n\n    const handleSharingBarClick = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        contextMenuRef.current?.show();\n    }, []);\n\n    return (\n        <StyledSharingBar onClick={handleSharingBarClick}>\n            <StyledSharingBarIconWrapper>\n                <Icon icons={['fa-solid fa-share-nodes']} />\n            </StyledSharingBarIconWrapper>\n            <ContextMenu\n                items={contextMenuItems}\n                ref={contextMenuRef}\n                alignment={popupAlignment}\n                container={container}\n            >\n                {null}\n            </ContextMenu>\n            <StyledSharingBarText>{label}</StyledSharingBarText>\n        </StyledSharingBar>\n    );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/sharing-bar/SharingBar.styles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+export const StyledSharingBar = styled.div`
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+`;
+export const StyledSharingBarIconWrapper = styled.div``;
+export const StyledSharingBarText = styled.p`
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+    margin: 0 0 0 5px;
+`;
+//# sourceMappingURL=SharingBar.styles.js.map

package/lib/esm/components/sharing-bar/SharingBar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharingBar.styles.js","names":["styled","StyledSharingBar","div","StyledSharingBarIconWrapper","StyledSharingBarText","p","_ref","theme","text"],"sources":["../../../../src/components/sharing-bar/SharingBar.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSharingBar = styled.div`\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n`;\n\nexport const StyledSharingBarIconWrapper = styled.div``;\n\ntype StyledSharingBarTextProps = WithTheme<unknown>;\n\nexport const StyledSharingBarText = styled.p<StyledSharingBarTextProps>`\n    color: ${({ theme }: StyledSharingBarTextProps) => theme.text};\n    margin: 0 0 0 5px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,gBAAgB,GAAGD,MAAM,CAACE,GAAG;AAC1C;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAG,EAAE;AAIvD,OAAO,MAAME,oBAAoB,GAAGJ,MAAM,CAACK,CAA4B;AACvE,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AACjE;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/signature/Signature.js

@@ -0,0 +1,98 @@
+import { createDialog, DialogType } from 'chayns-api';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
+import { deleteUserSignature } from '../../api/signature/delete';
+import { getUserSignature } from '../../api/signature/get';
+import { putUserSignature } from '../../api/signature/put';
+import Button from '../button/Button';
+import Icon from '../icon/Icon';
+import { StyledSignature, StyledSignatureDeleteIconWrapper, StyledSignatureImage, StyledSignatureImageWrapper } from './Signature.styles';
+const Signature = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    onEdit,
+    onRemove,
+    onUnsubscribe,
+    onSubscribe,
+    buttonText,
+    isDisabled
+  } = _ref;
+  const [signatureUrl, setSignatureUrl] = useState(undefined);
+  const [hasSubscribed, setHasSubscribed] = useState(false);
+  useEffect(() => {
+    const loadUserSignature = async () => {
+      await getUserSignature().then(signature => {
+        setSignatureUrl(signature);
+      });
+    };
+    void loadUserSignature();
+  }, []);
+  const handleCallDialog = useCallback(async shouldSubscribe => {
+    const {
+      result,
+      buttonType
+    } = await createDialog({
+      type: DialogType.SIGNATURE
+    }).open();
+    if (buttonType === 1 && result) {
+      await putUserSignature(result).then(success => {
+        if (success) {
+          setSignatureUrl(result);
+          if (shouldSubscribe) {
+            setHasSubscribed(true);
+            if (typeof onSubscribe === 'function') {
+              onSubscribe(result);
+            }
+          } else if (typeof onEdit === 'function') {
+            onEdit(result);
+          }
+        }
+      });
+    }
+  }, [onEdit, onSubscribe]);
+  const handleEdit = useCallback(() => {
+    void handleCallDialog(false);
+  }, [handleCallDialog]);
+  const handleDelete = useCallback(async () => {
+    await deleteUserSignature().then(success => {
+      if (success) {
+        setHasSubscribed(false);
+        setSignatureUrl(undefined);
+        if (typeof onRemove === 'function') {
+          onRemove();
+        }
+      }
+    });
+  }, [onRemove]);
+  const handleClick = useCallback(() => {
+    if (signatureUrl) {
+      setHasSubscribed(true);
+      if (typeof onSubscribe === 'function') {
+        onSubscribe(signatureUrl);
+      }
+    } else {
+      void handleCallDialog(true);
+    }
+  }, [handleCallDialog, onSubscribe, signatureUrl]);
+  const handleUnSubscribe = () => {
+    setHasSubscribed(false);
+    if (typeof onUnsubscribe === 'function') {
+      onUnsubscribe();
+    }
+  };
+  useImperativeHandle(ref, () => ({
+    edit: handleEdit,
+    delete: handleDelete
+  }), [handleDelete, handleEdit]);
+  return /*#__PURE__*/React.createElement(StyledSignature, null, !hasSubscribed ? /*#__PURE__*/React.createElement(Button, {
+    isDisabled: isDisabled,
+    onClick: handleClick
+  }, buttonText) : /*#__PURE__*/React.createElement(StyledSignatureImageWrapper, null, /*#__PURE__*/React.createElement(StyledSignatureImage, {
+    src: signatureUrl
+  }), /*#__PURE__*/React.createElement(StyledSignatureDeleteIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['ts-wrong'],
+    size: 20,
+    onClick: handleUnSubscribe
+  }))));
+});
+Signature.displayName = 'Signature';
+export default Signature;
+//# sourceMappingURL=Signature.js.map

package/lib/esm/components/signature/Signature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.js","names":["createDialog","DialogType","React","forwardRef","useCallback","useEffect","useImperativeHandle","useState","deleteUserSignature","getUserSignature","putUserSignature","Button","Icon","StyledSignature","StyledSignatureDeleteIconWrapper","StyledSignatureImage","StyledSignatureImageWrapper","Signature","_ref","ref","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","signatureUrl","setSignatureUrl","undefined","hasSubscribed","setHasSubscribed","loadUserSignature","then","signature","handleCallDialog","shouldSubscribe","result","buttonType","type","SIGNATURE","open","success","handleEdit","handleDelete","handleClick","handleUnSubscribe","edit","delete","createElement","onClick","src","icons","size","displayName"],"sources":["../../../../src/components/signature/Signature.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport { putUserSignature } from '../../api/signature/put';\nimport Button from '../button/Button';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signatureUrl: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: (signatureUrl: string) => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\ninterface SignatureDialogResult {\n    buttonType: number;\n    result?: string;\n}\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                const { result, buttonType } = (await createDialog({\n                    type: DialogType.SIGNATURE,\n                }).open()) as SignatureDialogResult;\n\n                if (buttonType === 1 && result) {\n                    await putUserSignature(result).then((success) => {\n                        if (success) {\n                            setSignatureUrl(result);\n\n                            if (shouldSubscribe) {\n                                setHasSubscribed(true);\n\n                                if (typeof onSubscribe === 'function') {\n                                    onSubscribe(result);\n                                }\n                            } else if (typeof onEdit === 'function') {\n                                onEdit(result);\n                            }\n                        }\n                    });\n                }\n            },\n            [onEdit, onSubscribe],\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setHasSubscribed(false);\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe(signatureUrl);\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit],\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    },\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/signature/Signature.styles.js

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components';
+export const StyledSignature = styled.div``;
+export const StyledSignatureImageWrapper = styled.div`
+    position: relative;
+    aspect-ratio: 3.8;
+    width: 100%;
+`;
+export const StyledSignatureImage = styled.img`
+    ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colorMode === 'dark' && css`
+            filter: invert(1);
+        `;
+}}
+`;
+export const StyledSignatureDeleteIconWrapper = styled.div`
+    position: absolute;
+    top: 0;
+    right: 0;
+`;
+//# sourceMappingURL=Signature.styles.js.map

package/lib/esm/components/signature/Signature.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Signature.styles.js","names":["styled","css","StyledSignature","div","StyledSignatureImageWrapper","StyledSignatureImage","img","_ref","theme","colorMode","StyledSignatureDeleteIconWrapper"],"sources":["../../../../src/components/signature/Signature.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSignature = styled.div``;\nexport const StyledSignatureImageWrapper = styled.div`\n    position: relative;\n    aspect-ratio: 3.8;\n    width: 100%;\n`;\n\ntype StyledSignatureImageProps = WithTheme<unknown>;\n\nexport const StyledSignatureImage = styled.img<StyledSignatureImageProps>`\n    ${({ theme }: StyledSignatureImageProps) =>\n        theme.colorMode === 'dark' &&\n        css`\n            filter: invert(1);\n        `}\n`;\nexport const StyledSignatureDeleteIconWrapper = styled.div`\n    position: absolute;\n    top: 0;\n    right: 0;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,eAAe,GAAGF,MAAM,CAACG,GAAG,EAAE;AAC3C,OAAO,MAAMC,2BAA2B,GAAGJ,MAAM,CAACG,GAAG;AACrD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,oBAAoB,GAAGL,MAAM,CAACM,GAA8B;AACzE,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,IAAA;EAAA,OACnCC,KAAK,CAACC,SAAS,KAAK,MAAM,IAC1BR,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AACD,OAAO,MAAMS,gCAAgC,GAAGV,MAAM,CAACG,GAAG;AAC1D;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/slider/Slider.js

@@ -0,0 +1,319 @@
+import { setRefreshScrollEnabled } from 'chayns-api';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+import { useElementSize } from '../../hooks/useElementSize';
+import { calculateGradientOffset, calculatePopupPosition, fillSlider, getThumbMaxWidth } from '../../utils/slider';
+import { StyledSlider, StyledSliderInput, StyledSliderThumb, StyledSliderThumbLabel } from './Slider.styles';
+const Slider = _ref => {
+  let {
+    maxValue,
+    minValue,
+    value,
+    onSelect,
+    onChange,
+    interval,
+    isDisabled,
+    thumbLabelFormatter,
+    shouldShowThumbLabel = false,
+    steps = 1
+  } = _ref;
+  const [fromValue, setFromValue] = useState(0);
+  const [toValue, setToValue] = useState(maxValue);
+  const [thumbWidth, setThumbWidth] = useState(20);
+  const [isBigSlider, setIsBigSlider] = useState(false);
+  const fromSliderRef = useRef(null);
+  const toSliderRef = useRef(null);
+  const fromSliderThumbRef = useRef(null);
+  const toSliderThumbRef = useRef(null);
+  const fromSliderThumbContentRef = useRef(null);
+  const toSliderThumbContentRef = useRef(null);
+  const sliderWrapperRef = useRef(null);
+  const sliderWrapperSize = useElementSize(sliderWrapperRef);
+  const theme = useTheme();
+  useEffect(() => {
+    if (shouldShowThumbLabel) {
+      setThumbWidth(getThumbMaxWidth({
+        maxNumber: maxValue,
+        thumbLabelFormatter
+      }));
+    }
+  }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);
+
+  /**
+   * This function sets the value
+   */
+  useEffect(() => {
+    if (typeof value !== 'number') {
+      return;
+    }
+    if (value >= minValue && value <= maxValue) {
+      setFromValue(value);
+    }
+  }, [maxValue, minValue, value]);
+  useEffect(() => {
+    if (fromValue > toValue) {
+      setFromValue(toValue);
+    }
+    if (toValue < fromValue) {
+      setToValue(fromValue);
+    }
+  }, [fromValue, toValue]);
+  const handleMouseUp = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    const from = Number(fromSliderRef.current?.value);
+    const to = Number(toSliderRef.current?.value);
+    if (typeof onSelect === 'function') {
+      onSelect(interval ? undefined : from, interval ? {
+        maxValue: to,
+        minValue: from
+      } : undefined);
+    }
+  }, [interval, isDisabled, onSelect]);
+  const handleControlFromSlider = useCallback(event => {
+    if (!fromSliderRef.current || !toSliderRef.current) {
+      return;
+    }
+    let newValue = Number(event.target.value);
+    if (newValue > maxValue || newValue > maxValue - maxValue % steps) {
+      newValue = maxValue;
+    } else if (newValue < minValue) {
+      newValue = minValue;
+    } else {
+      newValue = Math.round(newValue / steps) * steps;
+    }
+    setFromValue(newValue);
+    const to = Number(toSliderRef.current.value);
+    if (typeof onChange === 'function') {
+      onChange(undefined, {
+        maxValue: to,
+        minValue: newValue
+      });
+    }
+    fillSlider({
+      toSlider: toSliderRef.current,
+      fromSlider: fromSliderRef.current,
+      fromValue: newValue,
+      theme
+    });
+    if (newValue > to) {
+      fromSliderRef.current.value = String(to);
+    } else {
+      fromSliderRef.current.value = String(newValue);
+    }
+  }, [maxValue, minValue, onChange, steps, theme]);
+  const handleControlToSlider = useCallback(event => {
+    if (isDisabled) {
+      return;
+    }
+    if (!fromSliderRef.current || !toSliderRef.current) {
+      return;
+    }
+    let newValue = Number(event.target.value);
+    if (newValue > maxValue || newValue > maxValue - maxValue % steps) {
+      newValue = maxValue;
+    } else if (newValue < minValue) {
+      newValue = minValue;
+    } else {
+      newValue = Math.round(newValue / steps) * steps;
+    }
+    setToValue(newValue);
+    const from = Number(fromSliderRef.current.value);
+    if (typeof onChange === 'function') {
+      onChange(undefined, {
+        maxValue: newValue,
+        minValue: from
+      });
+    }
+    fillSlider({
+      toSlider: toSliderRef.current,
+      fromSlider: fromSliderRef.current,
+      toValue: newValue,
+      theme
+    });
+    if (from <= newValue) {
+      toSliderRef.current.value = String(newValue);
+    } else {
+      toSliderRef.current.value = String(from);
+    }
+  }, [isDisabled, maxValue, minValue, onChange, steps, theme]);
+  useEffect(() => {
+    if (!fromSliderRef.current || !toSliderRef.current || !interval) {
+      return;
+    }
+    setFromValue(interval.minValue);
+    setToValue(interval.maxValue);
+    fromSliderRef.current.value = String(interval.minValue);
+    toSliderRef.current.value = String(interval.maxValue);
+    fillSlider({
+      fromSlider: fromSliderRef.current,
+      toSlider: toSliderRef.current,
+      theme
+    });
+    // Note: interval can´t be in the deps because of rerender
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [theme]);
+
+  /**
+   * This function updates the value
+   */
+  const handleInputChange = useCallback(event => {
+    if (isDisabled) {
+      return;
+    }
+    let newValue = Number(event.target.value);
+    if (newValue > maxValue || newValue > maxValue - maxValue % steps) {
+      newValue = maxValue;
+    } else if (newValue < minValue) {
+      newValue = minValue;
+    } else {
+      newValue = Math.round(newValue / steps) * steps;
+    }
+    if (interval) {
+      handleControlFromSlider(event);
+      return;
+    }
+    setFromValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  }, [handleControlFromSlider, interval, isDisabled, maxValue, minValue, onChange, steps]);
+  const fromSliderThumbPosition = useMemo(() => {
+    if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {
+      return calculateGradientOffset({
+        max: maxValue,
+        min: minValue,
+        value: fromValue,
+        thumbWidth: 20,
+        containerWidth: fromSliderRef.current.offsetWidth
+      });
+    }
+    return 0;
+  }, [fromValue, maxValue, minValue, sliderWrapperSize]);
+  const toSliderThumbPosition = useMemo(() => {
+    if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {
+      return calculateGradientOffset({
+        max: maxValue,
+        min: minValue,
+        value: toValue,
+        thumbWidth: 20,
+        containerWidth: toSliderRef.current.offsetWidth
+      });
+    }
+    return 0;
+  }, [toValue, minValue, maxValue, sliderWrapperSize]);
+  const toSliderThumbContentPosition = useMemo(() => calculatePopupPosition({
+    min: minValue,
+    max: maxValue,
+    sliderValue: toValue,
+    popupWidth: thumbWidth
+  }), [maxValue, minValue, thumbWidth, toValue]);
+  const fromSliderThumbContentPosition = useMemo(() => calculatePopupPosition({
+    min: minValue,
+    max: maxValue,
+    sliderValue: fromValue,
+    popupWidth: thumbWidth
+  }), [fromValue, maxValue, minValue, thumbWidth]);
+  const handleTouchStart = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    void setRefreshScrollEnabled(false);
+    if (shouldShowThumbLabel) {
+      setIsBigSlider(true);
+    }
+  }, [isDisabled, shouldShowThumbLabel]);
+  const handleTouchEnd = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    void setRefreshScrollEnabled(true);
+    const from = Number(fromSliderRef.current?.value);
+    const to = Number(toSliderRef.current?.value);
+    if (typeof onSelect === 'function') {
+      onSelect(interval ? undefined : from, interval ? {
+        maxValue: to,
+        minValue: from
+      } : undefined);
+    }
+    if (shouldShowThumbLabel) {
+      setIsBigSlider(false);
+    }
+  }, [interval, isDisabled, onSelect, shouldShowThumbLabel]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledSlider, {
+    ref: sliderWrapperRef,
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(StyledSliderInput, {
+    animate: {
+      height: isBigSlider ? 30 : 10
+    },
+    initial: {
+      height: 10
+    },
+    exit: {
+      height: 10
+    },
+    $thumbWidth: 40,
+    ref: fromSliderRef,
+    $isInterval: !!interval,
+    type: "range",
+    value: fromValue,
+    step: 0.01,
+    max: maxValue,
+    min: minValue,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
+    onChange: handleInputChange,
+    onMouseUp: handleMouseUp,
+    $max: maxValue,
+    $min: minValue,
+    $value: fromValue
+  }), /*#__PURE__*/React.createElement(StyledSliderThumb, {
+    ref: fromSliderThumbRef,
+    $position: fromSliderThumbPosition,
+    $isBigSlider: isBigSlider
+  }, shouldShowThumbLabel && /*#__PURE__*/React.createElement(StyledSliderThumbLabel, {
+    $width: thumbWidth,
+    $isBigSlider: isBigSlider,
+    $position: fromSliderThumbContentPosition,
+    ref: fromSliderThumbContentRef
+  }, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/React.createElement(StyledSliderThumb, {
+    ref: toSliderThumbRef,
+    $position: toSliderThumbPosition,
+    $isBigSlider: isBigSlider
+  }, shouldShowThumbLabel && /*#__PURE__*/React.createElement(StyledSliderThumbLabel, {
+    $width: thumbWidth,
+    $isBigSlider: isBigSlider,
+    $position: toSliderThumbContentPosition,
+    ref: toSliderThumbContentRef
+  }, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(toValue) : toValue)), interval && /*#__PURE__*/React.createElement(StyledSliderInput, {
+    animate: {
+      height: isBigSlider ? 30 : 10
+    },
+    initial: {
+      height: 10
+    },
+    exit: {
+      height: 10
+    },
+    $thumbWidth: 40,
+    $max: maxValue,
+    $min: minValue,
+    $value: toValue,
+    ref: toSliderRef,
+    $isInterval: !!interval,
+    type: "range",
+    value: toValue,
+    step: 0.01,
+    max: maxValue,
+    min: minValue,
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
+    onChange: handleControlToSlider,
+    onMouseUp: handleMouseUp
+  })), [isDisabled, isBigSlider, interval, fromValue, maxValue, minValue, handleTouchStart, handleTouchEnd, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbWidth, fromSliderThumbContentPosition, thumbLabelFormatter, toSliderThumbPosition, toSliderThumbContentPosition, toValue, handleControlToSlider]);
+};
+Slider.displayName = 'Slider';
+export default Slider;
+//# sourceMappingURL=Slider.js.map