@chayns-components/core 5.0.14 → 5.0.16
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/lib/cjs/components/accordion/accordion-content/AccordionContent.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/cjs/components/icon/Icon.styles.js.map +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.js +2 -2
- package/lib/cjs/components/multi-action-button/MultiActionButton.js.map +1 -1
- package/lib/cjs/components/multi-action-button/MultiActionButton.types.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
- package/lib/cjs/components/sharing-bar/SharingBar.js +5 -85
- package/lib/cjs/components/sharing-bar/SharingBar.js.map +1 -1
- package/lib/cjs/components/sharing-button/SharingButton.js +43 -0
- package/lib/cjs/components/sharing-button/SharingButton.js.map +1 -0
- package/lib/cjs/components/sharing-button/SharingButton.styles.js +11 -0
- package/lib/cjs/components/sharing-button/SharingButton.styles.js.map +1 -0
- package/lib/cjs/components/sharing-context-menu/SharingContextMenu.js +107 -0
- package/lib/cjs/components/sharing-context-menu/SharingContextMenu.js.map +1 -0
- package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
- package/lib/cjs/index.js +14 -0
- package/lib/cjs/index.js.map +1 -1
- package/lib/esm/components/accordion/accordion-content/AccordionContent.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/esm/components/icon/Icon.styles.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.js +2 -2
- package/lib/esm/components/multi-action-button/MultiActionButton.js.map +1 -1
- package/lib/esm/components/multi-action-button/MultiActionButton.types.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.js.map +1 -1
- package/lib/esm/components/sharing-bar/SharingBar.js +3 -82
- package/lib/esm/components/sharing-bar/SharingBar.js.map +1 -1
- package/lib/esm/components/sharing-button/SharingButton.js +35 -0
- package/lib/esm/components/sharing-button/SharingButton.js.map +1 -0
- package/lib/esm/components/sharing-button/SharingButton.styles.js +5 -0
- package/lib/esm/components/sharing-button/SharingButton.styles.js.map +1 -0
- package/lib/esm/components/sharing-context-menu/SharingContextMenu.js +99 -0
- package/lib/esm/components/sharing-context-menu/SharingContextMenu.js.map +1 -0
- package/lib/esm/components/slider/Slider.styles.js.map +1 -1
- package/lib/esm/index.js +2 -0
- package/lib/esm/index.js.map +1 -1
- package/lib/types/components/amount-control/AmountControl.styles.d.ts +2 -2
- package/lib/types/components/multi-action-button/MultiActionButton.types.d.ts +7 -0
- package/lib/types/components/sharing-button/SharingButton.d.ts +5 -0
- package/lib/types/components/sharing-button/SharingButton.styles.d.ts +1 -0
- package/lib/types/components/sharing-context-menu/SharingContextMenu.d.ts +15 -0
- package/lib/types/index.d.ts +2 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContent.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_AccordionContent","e","__esModule","default","AccordionContent","children","maxHeight","onScroll","shouldPreventBottomSpace","browser","getDevice","createElement","StyledAccordionContent","className","$browser","name","$maxHeight","$shouldPreventBottomSpace","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-content/AccordionContent.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent } from 'react';\nimport { BrowserName } from '../../../types/chayns';\nimport {
|
|
1
|
+
{"version":3,"file":"AccordionContent.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_AccordionContent","e","__esModule","default","AccordionContent","children","maxHeight","onScroll","shouldPreventBottomSpace","browser","getDevice","createElement","StyledAccordionContent","className","$browser","name","$maxHeight","$shouldPreventBottomSpace","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-content/AccordionContent.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent } from 'react';\nimport { BrowserName } from '../../../types/chayns';\nimport { StyledAccordionContent } from './AccordionContent.styles';\n\nexport type AccordionContentProps = {\n /**\n * The content of the accordion content element\n */\n children: ReactNode;\n /**\n * Maximum height of the element. This automatically makes the content of the element scrollable.\n */\n maxHeight?: number;\n /**\n * Function that is executed when the element will be scrolled\n */\n onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Whether the bottom space should be removed.\n */\n shouldPreventBottomSpace?: boolean;\n};\n\nconst AccordionContent: FC<AccordionContentProps> = ({\n children,\n maxHeight,\n onScroll,\n shouldPreventBottomSpace = false,\n}) => {\n const { browser } = getDevice();\n\n return (\n <StyledAccordionContent\n className=\"beta-chayns-accordion-content\"\n $browser={browser?.name as BrowserName}\n $maxHeight={maxHeight}\n onScroll={onScroll}\n $shouldPreventBottomSpace={shouldPreventBottomSpace}\n >\n {children}\n </StyledAccordionContent>\n );\n};\n\nAccordionContent.displayName = 'AccordionContent';\n\nexport default AccordionContent;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,iBAAA,GAAAH,OAAA;AAAmE,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAqBnE,MAAMG,gBAA2C,GAAGA,CAAC;EACjDC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,wBAAwB,GAAG;AAC/B,CAAC,KAAK;EACF,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,oBACIZ,MAAA,CAAAK,OAAA,CAAAQ,aAAA,CAACX,iBAAA,CAAAY,sBAAsB;IACnBC,SAAS,EAAC,+BAA+B;IACzCC,QAAQ,EAAEL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,IAAoB;IACvCC,UAAU,EAAEV,SAAU;IACtBC,QAAQ,EAAEA,QAAS;IACnBU,yBAAyB,EAAET;EAAyB,GAEnDH,QACmB,CAAC;AAEjC,CAAC;AAEDD,gBAAgB,CAACc,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjB,OAAA,GAEnCC,gBAAgB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AmountControl.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledAmountControl","exports","styled","div","theme","$isDisabled","css","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","motion","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type {
|
|
1
|
+
{"version":3,"file":"AmountControl.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledAmountControl","exports","styled","div","theme","$isDisabled","css","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","motion","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n overflow: hidden;\n transition: opacity 0.2s ease;\n height: 28px;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n pointer-events: none;\n `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n $displayState: DisplayState;\n $shouldShowIcon: boolean;\n $hasFocus: boolean;\n $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n height: 28px;\n width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n text-align: center;\n cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n ${({ $displayState }) =>\n $displayState === 'maxAmount' &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n ${({ $displayState, $shouldShowIcon }) =>\n $displayState === 'default' &&\n !$shouldShowIcon &&\n css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n $shouldShowWideInput: boolean;\n $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n height: 28px;\n min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n padding: 1px 8px;\n text-align: center;\n cursor: pointer;\n user-select: none;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n $shouldShowRightIcon ? '3px' : 'unset'};\n border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n $isDisabled: boolean;\n $color?: string;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n motion.button,\n)<StyledAmountControlButtonProps>`\n align-items: center;\n background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n $color ?? theme['408']};\n display: flex;\n justify-content: center;\n overflow: hidden;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n `}\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","css","StyledUnicodeIcon","headline","$icon"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\
|
|
1
|
+
{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","css","StyledUnicodeIcon","headline","$icon"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n $isDisabled?: boolean;\n $isOnClick: boolean;\n $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled, $isOnClick }) =>\n $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n display: inline-flex;\n min-height: ${({ $size }) => `${$size}px`};\n justify-content: center;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.3s ease;\n min-width: ${({ $size }) => `${$size}px`};\n\n // To insure that stacked icons have the same size as normal icons.\n &&.fa-stack {\n height: fit-content;\n width: fit-content;\n line-height: ${({ $size }) => $size}px;\n }\n`;\n\ntype StyledIconProps = WithTheme<{\n $fontSize: number;\n $isStacked?: boolean;\n $color?: string;\n $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n ${({ $fontSize, $size }) =>\n $fontSize !== $size &&\n css`\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n align-items: center;\n justify-content: center;\n display: flex;\n color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n &:before {\n content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AASzC,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASM,MAAMC,UAAU,GAAAN,OAAA,CAAAM,UAAA,GAAGL,yBAAM,CAACd,CAAkB;AACnD,aAAa,CAAC;EAAEoB,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD;AACA,MAAM,CAAC;EAAEA,SAAS;EAAER;AAAM,CAAC,KACnBQ,SAAS,KAAKR,KAAK,IACnB,IAAAS,qBAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAIM,MAAMC,iBAAiB,GAAAf,OAAA,CAAAe,iBAAA,GAAGd,yBAAM,CAACd,CAAyB;AACjE;AACA;AACA;AACA,aAAa,CAAC;EAAEqB;AAA8B,CAAC,KAAKA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACQ,QAAQ;AACrF;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,GAAG;AAChD;AACA,CAAC","ignoreList":[]}
|
|
@@ -152,7 +152,7 @@ const MultiActionButton = ({
|
|
|
152
152
|
}, /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
|
|
153
153
|
action: primaryAction,
|
|
154
154
|
actionType: "primary",
|
|
155
|
-
backgroundColor: backgroundColor,
|
|
155
|
+
backgroundColor: primaryAction.backgroundColor ?? backgroundColor,
|
|
156
156
|
isCollapsed: isCollapsed,
|
|
157
157
|
isDisabled: isDisabled,
|
|
158
158
|
isShrunk: hasSecondaryAction && isSecondaryExpanded,
|
|
@@ -166,7 +166,7 @@ const MultiActionButton = ({
|
|
|
166
166
|
}), /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
|
|
167
167
|
action: secondaryAction,
|
|
168
168
|
actionType: "secondary",
|
|
169
|
-
backgroundColor: backgroundColor,
|
|
169
|
+
backgroundColor: secondaryAction.backgroundColor ?? backgroundColor,
|
|
170
170
|
isCollapsed: isCollapsed,
|
|
171
171
|
isDisabled: isDisabled,
|
|
172
172
|
isExpanded: isSecondaryExpanded,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiActionButton.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","_environment","_ActionButton","_MultiActionButton","_MultiActionButton2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MultiActionButton","backgroundColor","className","extendedTimeoutMs","gapColor","height","MultiActionButtonHeight","Medium","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","width","isExtendedByClick","setIsExtendedByClick","useState","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","useRef","isTouch","useIsTouch","hasSecondaryAction","Boolean","shouldUseContentWidth","resolvedWidth","resetAutoCollapseTimeout","useCallback","current","window","clearTimeout","setTimeout","expandSecondaryByClick","useEffect","handlePrimaryClick","event","_primaryAction$onClic","payload","action","isExtended","onClick","handleSecondaryClick","_secondaryAction$onCl","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","StyledMultiActionButton","clsx","style","maxWidth","actionType","isShrunk","isSolo","showLabel","Fragment","StyledSeparator","$gapColor","isExpanded","isHidden","onMouseEnter","onMouseLeave","displayName","_default","exports"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton, StyledSeparator } from './MultiActionButton.styles';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n MultiActionButtonActionEvent,\n MultiActionButtonProps,\n} from './MultiActionButton.types';\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n backgroundColor,\n className,\n extendedTimeoutMs = 3000,\n gapColor,\n height = MultiActionButtonHeight.Medium,\n isCollapsed = false,\n isDisabled = false,\n primaryAction,\n secondaryAction,\n shouldUseFullWidth,\n width,\n}) => {\n const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n const autoCollapseTimeoutRef = useRef<number | null>(null);\n\n const isTouch = useIsTouch();\n\n const hasSecondaryAction = Boolean(secondaryAction);\n const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n const resolvedWidth = isCollapsed\n ? height\n : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n /**\n * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n */\n const resetAutoCollapseTimeout = useCallback(() => {\n if (autoCollapseTimeoutRef.current) {\n window.clearTimeout(autoCollapseTimeoutRef.current);\n }\n\n if (extendedTimeoutMs <= 0) {\n autoCollapseTimeoutRef.current = null;\n return;\n }\n\n autoCollapseTimeoutRef.current = window.setTimeout(() => {\n setIsSecondaryExpanded(false);\n setIsExtendedByClick(false);\n }, extendedTimeoutMs);\n }, [extendedTimeoutMs]);\n\n /**\n * Expands the secondary action and remembers that it originated from a click.\n */\n const expandSecondaryByClick = useCallback(() => {\n setIsSecondaryExpanded(true);\n setIsExtendedByClick(true);\n resetAutoCollapseTimeout();\n }, [resetAutoCollapseTimeout]);\n\n /**\n * Cleanup timers on unmount.\n */\n useEffect(\n () => () => {\n if (autoCollapseTimeoutRef.current) {\n window.clearTimeout(autoCollapseTimeoutRef.current);\n }\n },\n [],\n );\n\n /**\n * Collapsing the control should also reset any temporary expansion state.\n */\n useEffect(() => {\n if (isCollapsed) {\n setIsSecondaryExpanded(false);\n setIsExtendedByClick(false);\n }\n }, [isCollapsed]);\n\n /**\n * Handler for the primary action button.\n */\n const handlePrimaryClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled || primaryAction.isDisabled) {\n return;\n }\n\n const payload: MultiActionButtonActionEvent = {\n action: 'primary',\n event,\n isExtended: isSecondaryExpanded,\n isTouch,\n };\n\n primaryAction.onClick?.(payload);\n },\n [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n );\n\n /**\n * Handler for the secondary action button.\n */\n const handleSecondaryClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {\n return;\n }\n\n const payload: MultiActionButtonActionEvent = {\n action: 'secondary',\n event,\n isExtended: isSecondaryExpanded,\n isTouch,\n };\n\n secondaryAction.onClick?.(payload);\n expandSecondaryByClick();\n },\n [\n expandSecondaryByClick,\n isCollapsed,\n isDisabled,\n isSecondaryExpanded,\n isTouch,\n secondaryAction,\n ],\n );\n\n /**\n * Desktop hover behavior keeps the secondary action expanded while hovered.\n */\n const handleSecondaryMouseEnter = useCallback(() => {\n if (\n !secondaryAction ||\n isCollapsed ||\n isTouch ||\n isDisabled ||\n secondaryAction.isDisabled\n ) {\n return;\n }\n\n setIsSecondaryHovered(true);\n if (!isExtendedByClick) {\n setIsSecondaryExpanded(true);\n }\n }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n const handleSecondaryMouseLeave = useCallback(() => {\n if (isTouch) {\n return;\n }\n\n setIsSecondaryHovered(false);\n if (!isExtendedByClick && !isCollapsed) {\n setIsSecondaryExpanded(false);\n }\n }, [isCollapsed, isExtendedByClick, isTouch]);\n\n /**\n * Secondary label is visible when expanded or when hovered (desktop only).\n */\n const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n return (\n <StyledMultiActionButton\n className={clsx('beta-chayns-multi-action', className)}\n style={{ maxWidth: '100%', width: resolvedWidth }}\n >\n <ActionButton\n action={primaryAction}\n actionType=\"primary\"\n backgroundColor={backgroundColor}\n isCollapsed={isCollapsed}\n isDisabled={isDisabled}\n isShrunk={hasSecondaryAction && isSecondaryExpanded}\n isSolo={!hasSecondaryAction && !isCollapsed}\n onClick={handlePrimaryClick}\n showLabel={!isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded)}\n shouldUseContentWidth={shouldUseContentWidth}\n height={height}\n />\n {secondaryAction && (\n <>\n {!isCollapsed && <StyledSeparator $gapColor={gapColor} />}\n <ActionButton\n action={secondaryAction}\n actionType=\"secondary\"\n backgroundColor={backgroundColor}\n isCollapsed={isCollapsed}\n isDisabled={isDisabled}\n isExpanded={isSecondaryExpanded}\n isHidden={isCollapsed}\n onClick={handleSecondaryClick}\n onMouseEnter={handleSecondaryMouseEnter}\n onMouseLeave={handleSecondaryMouseLeave}\n showLabel={isSecondaryLabelVisible}\n shouldUseContentWidth={shouldUseContentWidth}\n height={height}\n />\n </>\n )}\n </StyledMultiActionButton>\n );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"MultiActionButton.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","_environment","_ActionButton","_MultiActionButton","_MultiActionButton2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MultiActionButton","backgroundColor","className","extendedTimeoutMs","gapColor","height","MultiActionButtonHeight","Medium","isCollapsed","isDisabled","primaryAction","secondaryAction","shouldUseFullWidth","width","isExtendedByClick","setIsExtendedByClick","useState","isSecondaryExpanded","setIsSecondaryExpanded","isSecondaryHovered","setIsSecondaryHovered","autoCollapseTimeoutRef","useRef","isTouch","useIsTouch","hasSecondaryAction","Boolean","shouldUseContentWidth","resolvedWidth","resetAutoCollapseTimeout","useCallback","current","window","clearTimeout","setTimeout","expandSecondaryByClick","useEffect","handlePrimaryClick","event","_primaryAction$onClic","payload","action","isExtended","onClick","handleSecondaryClick","_secondaryAction$onCl","handleSecondaryMouseEnter","handleSecondaryMouseLeave","isSecondaryLabelVisible","createElement","StyledMultiActionButton","clsx","style","maxWidth","actionType","isShrunk","isSolo","showLabel","Fragment","StyledSeparator","$gapColor","isExpanded","isHidden","onMouseEnter","onMouseLeave","displayName","_default","exports"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport ActionButton from './action-button/ActionButton';\nimport { StyledMultiActionButton, StyledSeparator } from './MultiActionButton.styles';\nimport { MultiActionButtonHeight } from './MultiActionButton.types';\nimport type {\n MultiActionButtonActionEvent,\n MultiActionButtonProps,\n} from './MultiActionButton.types';\n\n/**\n * Multi-action button with optional secondary action that can expand on hover/click.\n */\nconst MultiActionButton: FC<MultiActionButtonProps> = ({\n backgroundColor,\n className,\n extendedTimeoutMs = 3000,\n gapColor,\n height = MultiActionButtonHeight.Medium,\n isCollapsed = false,\n isDisabled = false,\n primaryAction,\n secondaryAction,\n shouldUseFullWidth,\n width,\n}) => {\n const [isExtendedByClick, setIsExtendedByClick] = useState(false);\n const [isSecondaryExpanded, setIsSecondaryExpanded] = useState(false);\n const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);\n\n const autoCollapseTimeoutRef = useRef<number | null>(null);\n\n const isTouch = useIsTouch();\n\n const hasSecondaryAction = Boolean(secondaryAction);\n const shouldUseContentWidth = !width && !shouldUseFullWidth;\n\n const resolvedWidth = isCollapsed\n ? height\n : (width ?? (shouldUseFullWidth ? '100%' : 'fit-content'));\n\n /**\n * Clears and restarts the auto-collapse timer used after click-triggered expansion.\n */\n const resetAutoCollapseTimeout = useCallback(() => {\n if (autoCollapseTimeoutRef.current) {\n window.clearTimeout(autoCollapseTimeoutRef.current);\n }\n\n if (extendedTimeoutMs <= 0) {\n autoCollapseTimeoutRef.current = null;\n return;\n }\n\n autoCollapseTimeoutRef.current = window.setTimeout(() => {\n setIsSecondaryExpanded(false);\n setIsExtendedByClick(false);\n }, extendedTimeoutMs);\n }, [extendedTimeoutMs]);\n\n /**\n * Expands the secondary action and remembers that it originated from a click.\n */\n const expandSecondaryByClick = useCallback(() => {\n setIsSecondaryExpanded(true);\n setIsExtendedByClick(true);\n resetAutoCollapseTimeout();\n }, [resetAutoCollapseTimeout]);\n\n /**\n * Cleanup timers on unmount.\n */\n useEffect(\n () => () => {\n if (autoCollapseTimeoutRef.current) {\n window.clearTimeout(autoCollapseTimeoutRef.current);\n }\n },\n [],\n );\n\n /**\n * Collapsing the control should also reset any temporary expansion state.\n */\n useEffect(() => {\n if (isCollapsed) {\n setIsSecondaryExpanded(false);\n setIsExtendedByClick(false);\n }\n }, [isCollapsed]);\n\n /**\n * Handler for the primary action button.\n */\n const handlePrimaryClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n if (isDisabled || primaryAction.isDisabled) {\n return;\n }\n\n const payload: MultiActionButtonActionEvent = {\n action: 'primary',\n event,\n isExtended: isSecondaryExpanded,\n isTouch,\n };\n\n primaryAction.onClick?.(payload);\n },\n [isDisabled, isSecondaryExpanded, isTouch, primaryAction],\n );\n\n /**\n * Handler for the secondary action button.\n */\n const handleSecondaryClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n if (!secondaryAction || isCollapsed || isDisabled || secondaryAction.isDisabled) {\n return;\n }\n\n const payload: MultiActionButtonActionEvent = {\n action: 'secondary',\n event,\n isExtended: isSecondaryExpanded,\n isTouch,\n };\n\n secondaryAction.onClick?.(payload);\n expandSecondaryByClick();\n },\n [\n expandSecondaryByClick,\n isCollapsed,\n isDisabled,\n isSecondaryExpanded,\n isTouch,\n secondaryAction,\n ],\n );\n\n /**\n * Desktop hover behavior keeps the secondary action expanded while hovered.\n */\n const handleSecondaryMouseEnter = useCallback(() => {\n if (\n !secondaryAction ||\n isCollapsed ||\n isTouch ||\n isDisabled ||\n secondaryAction.isDisabled\n ) {\n return;\n }\n\n setIsSecondaryHovered(true);\n if (!isExtendedByClick) {\n setIsSecondaryExpanded(true);\n }\n }, [isCollapsed, isDisabled, isExtendedByClick, isTouch, secondaryAction]);\n\n const handleSecondaryMouseLeave = useCallback(() => {\n if (isTouch) {\n return;\n }\n\n setIsSecondaryHovered(false);\n if (!isExtendedByClick && !isCollapsed) {\n setIsSecondaryExpanded(false);\n }\n }, [isCollapsed, isExtendedByClick, isTouch]);\n\n /**\n * Secondary label is visible when expanded or when hovered (desktop only).\n */\n const isSecondaryLabelVisible = isSecondaryExpanded || (!isTouch && isSecondaryHovered);\n\n return (\n <StyledMultiActionButton\n className={clsx('beta-chayns-multi-action', className)}\n style={{ maxWidth: '100%', width: resolvedWidth }}\n >\n <ActionButton\n action={primaryAction}\n actionType=\"primary\"\n backgroundColor={primaryAction.backgroundColor ?? backgroundColor}\n isCollapsed={isCollapsed}\n isDisabled={isDisabled}\n isShrunk={hasSecondaryAction && isSecondaryExpanded}\n isSolo={!hasSecondaryAction && !isCollapsed}\n onClick={handlePrimaryClick}\n showLabel={!isCollapsed && (!hasSecondaryAction || !isSecondaryExpanded)}\n shouldUseContentWidth={shouldUseContentWidth}\n height={height}\n />\n {secondaryAction && (\n <>\n {!isCollapsed && <StyledSeparator $gapColor={gapColor} />}\n <ActionButton\n action={secondaryAction}\n actionType=\"secondary\"\n backgroundColor={secondaryAction.backgroundColor ?? backgroundColor}\n isCollapsed={isCollapsed}\n isDisabled={isDisabled}\n isExpanded={isSecondaryExpanded}\n isHidden={isCollapsed}\n onClick={handleSecondaryClick}\n onMouseEnter={handleSecondaryMouseEnter}\n onMouseLeave={handleSecondaryMouseLeave}\n showLabel={isSecondaryLabelVisible}\n shouldUseContentWidth={shouldUseContentWidth}\n height={height}\n />\n </>\n )}\n </StyledMultiActionButton>\n );\n};\n\nMultiActionButton.displayName = 'MultiActionButton';\n\nexport default MultiActionButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","exports","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactElement, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n /**\n * Pulsing background effect.\n * @description Applies a subtle animated overlay on the action background to draw attention.\n * This is intended for temporary states like recording or live activity indicators.\n */\n Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n /**\n * Medium height (42px).\n */\n Medium = 42,\n /**\n * Large height (48px).\n */\n Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n /**\n * Optional pulse colors for the animation.\n * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n * @optional\n */\n pulseColors?: [string, string];\n /**\n * Status type to apply.\n * @description Selects the visual emphasis type applied to the action. The component currently\n * supports a pulsing overlay, and additional types may be added later.\n * @optional\n */\n type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n /**\n * Which action was clicked.\n * @description Indicates whether the primary or secondary action fired. This is helpful when\n * sharing a handler between both actions.\n */\n action: 'primary' | 'secondary';\n /**\n * Original click event.\n * @description Useful to access modifier keys, prevent default, or stop propagation.\n */\n event: MouseEvent<HTMLButtonElement>;\n /**\n * Whether the secondary action is currently extended.\n * @description Useful for flows that need to distinguish between a collapsed and expanded\n * secondary action, especially on touch devices.\n */\n isExtended: boolean;\n /**\n * Whether the device is considered touch.\n * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n */\n isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n /**\n * Optional color for the icon and label.\n * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n * @optional\n */\n color?: string;\n /**\n * The icon for the action.\n * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom React element.\n * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n */\n icon: string | ReactElement;\n /**\n * Whether the action is disabled.\n * @description Disabled actions do not respond to hover or click and are visually dimmed.\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Optional reason shown in a tooltip when the action is disabled.\n * @description Use this to explain why the action is currently unavailable.\n * @optional\n */\n disabledReason?: string;\n /**\n * The optional label for the action.\n * @description The label is shown next to the icon and will be truncated with ellipsis when\n * there is not enough horizontal space.\n * @optional\n */\n label: ReactNode;\n /**\n * Click handler for the action.\n * @description Receives a payload that includes the action type, extension state, and device info.\n * This allows external logic to decide whether the click should trigger an action immediately.\n * @optional\n */\n onClick?: (info: MultiActionButtonActionEvent) => void;\n /**\n * Status effect configuration for the action.\n * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n * @optional\n */\n status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n /**\n * Optional background color for both actions.\n * @description Overrides the default background color for the action buttons. This is useful\n * when the button is used on different backgrounds or when a specific brand color is needed.\n * If omitted, the primary color from the theme is used.\n * @default theme.primary\n * @optional\n */\n backgroundColor?: string;\n /**\n * Additional class name for the wrapper element.\n * @description Useful for custom styling or testing hooks.\n * @optional\n */\n className?: string;\n /**\n * Timeout in ms before the secondary action collapses after a click.\n * @description Set to 0 to keep the secondary action extended until the user collapses it.\n * @example\n * <MultiActionButton\n * primaryAction={primaryAction}\n * secondaryAction={secondaryAction}\n * extendedTimeoutMs={0}\n * />\n * @default 3000\n * @optional\n */\n extendedTimeoutMs?: number;\n /**\n * Height of the button.\n * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n * @default MultiActionButtonHeight.Medium\n * @optional\n */\n height?: number;\n /**\n * Optional color for the 1px separator line between actions.\n * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n * @optional\n */\n gapColor?: string;\n /**\n * Whether the button is collapsed to a single icon.\n * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n * Use this to provide compact states or toolbar modes.\n * @default false\n * @optional\n */\n isCollapsed?: boolean;\n /**\n * Whether the whole control is disabled.\n * @description Disables interactions for both actions, including hover expansion and clicks.\n * @default false\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Primary action configuration.\n * @description Required action shown on the left side (or as the only action when no secondary is provided).\n */\n primaryAction: MultiActionButtonAction;\n /**\n * Secondary action configuration.\n * @description Optional action shown on the right side. When present, it can expand on hover or click.\n * @optional\n */\n secondaryAction?: MultiActionButtonAction;\n /**\n * Whether the button should take the full width of its parent.\n * @description When true, the control stretches to 100% width unless `width` is provided.\n * @optional\n */\n shouldUseFullWidth?: boolean;\n /**\n * Optional width override for the whole button.\n * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n * the width is driven by the content unless `shouldUseFullWidth` is true.\n * @optional\n */\n width?: number | MotionValue<number>;\n};\n"],"mappings":";;;;;;AAGA;AACA;AACA;AAFA,IAGYA,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AASvC;AACA;AACA;AAFA,IAGYE,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;AAWnC;AACA;AACA;AAiBA;AACA;AACA;AA0BA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":"MultiActionButton.types.js","names":["MultiActionButtonStatusType","exports","MultiActionButtonHeight"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.types.ts"],"sourcesContent":["import type { MouseEvent, ReactElement, ReactNode } from 'react';\nimport type { MotionValue } from 'motion/react';\n\n/**\n * Supported status types for the multi action button.\n */\nexport enum MultiActionButtonStatusType {\n /**\n * Pulsing background effect.\n * @description Applies a subtle animated overlay on the action background to draw attention.\n * This is intended for temporary states like recording or live activity indicators.\n */\n Pulse = 'pulse',\n}\n\n/**\n * Supported heights for the multi action button.\n */\nexport enum MultiActionButtonHeight {\n /**\n * Medium height (42px).\n */\n Medium = 42,\n /**\n * Large height (48px).\n */\n Large = 48,\n}\n\n/**\n * Minimal status configuration for an action.\n */\nexport type MultiActionButtonActionStatus = {\n /**\n * Optional pulse colors for the animation.\n * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].\n * @optional\n */\n pulseColors?: [string, string];\n /**\n * Status type to apply.\n * @description Selects the visual emphasis type applied to the action. The component currently\n * supports a pulsing overlay, and additional types may be added later.\n * @optional\n */\n type?: MultiActionButtonStatusType;\n};\n\n/**\n * Event payload emitted on action click.\n */\nexport type MultiActionButtonActionEvent = {\n /**\n * Which action was clicked.\n * @description Indicates whether the primary or secondary action fired. This is helpful when\n * sharing a handler between both actions.\n */\n action: 'primary' | 'secondary';\n /**\n * Original click event.\n * @description Useful to access modifier keys, prevent default, or stop propagation.\n */\n event: MouseEvent<HTMLButtonElement>;\n /**\n * Whether the secondary action is currently extended.\n * @description Useful for flows that need to distinguish between a collapsed and expanded\n * secondary action, especially on touch devices.\n */\n isExtended: boolean;\n /**\n * Whether the device is considered touch.\n * @description Derived from pointer capabilities and used to decide between hover and click behavior.\n */\n isTouch: boolean;\n};\n\n/**\n * Configuration for a single action.\n */\nexport type MultiActionButtonAction = {\n /**\n * Optional background color for this action.\n * @description Overrides the component-level background color for this specific action.\n * If omitted, `MultiActionButton.backgroundColor` is used as fallback.\n * @optional\n */\n backgroundColor?: string;\n /**\n * Optional color for the icon and label.\n * @description Overrides the default text/icon color. If omitted, the current theme text color is used.\n * @optional\n */\n color?: string;\n /**\n * The icon for the action.\n * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom React element.\n * The icon is always rendered inside a fixed-size slot to keep alignment stable.\n */\n icon: string | ReactElement;\n /**\n * Whether the action is disabled.\n * @description Disabled actions do not respond to hover or click and are visually dimmed.\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Optional reason shown in a tooltip when the action is disabled.\n * @description Use this to explain why the action is currently unavailable.\n * @optional\n */\n disabledReason?: string;\n /**\n * The optional label for the action.\n * @description The label is shown next to the icon and will be truncated with ellipsis when\n * there is not enough horizontal space.\n * @optional\n */\n label: ReactNode;\n /**\n * Click handler for the action.\n * @description Receives a payload that includes the action type, extension state, and device info.\n * This allows external logic to decide whether the click should trigger an action immediately.\n * @optional\n */\n onClick?: (info: MultiActionButtonActionEvent) => void;\n /**\n * Status effect configuration for the action.\n * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.\n * @optional\n */\n status?: MultiActionButtonActionStatus;\n};\n\n/**\n * Props for the MultiActionButton component.\n */\nexport type MultiActionButtonProps = {\n /**\n * Optional background color for both actions.\n * @description Overrides the default background color for the action buttons. This is useful\n * when the button is used on different backgrounds or when a specific brand color is needed.\n * If omitted, the primary color from the theme is used.\n * @default theme.primary\n * @optional\n */\n backgroundColor?: string;\n /**\n * Additional class name for the wrapper element.\n * @description Useful for custom styling or testing hooks.\n * @optional\n */\n className?: string;\n /**\n * Timeout in ms before the secondary action collapses after a click.\n * @description Set to 0 to keep the secondary action extended until the user collapses it.\n * @example\n * <MultiActionButton\n * primaryAction={primaryAction}\n * secondaryAction={secondaryAction}\n * extendedTimeoutMs={0}\n * />\n * @default 3000\n * @optional\n */\n extendedTimeoutMs?: number;\n /**\n * Height of the button.\n * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.\n * @default MultiActionButtonHeight.Medium\n * @optional\n */\n height?: number;\n /**\n * Optional color for the 1px separator line between actions.\n * @description Defaults to theme.cw-body-background and falls back to #fff if not available.\n * @optional\n */\n gapColor?: string;\n /**\n * Whether the button is collapsed to a single icon.\n * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.\n * Use this to provide compact states or toolbar modes.\n * @default false\n * @optional\n */\n isCollapsed?: boolean;\n /**\n * Whether the whole control is disabled.\n * @description Disables interactions for both actions, including hover expansion and clicks.\n * @default false\n * @optional\n */\n isDisabled?: boolean;\n /**\n * Primary action configuration.\n * @description Required action shown on the left side (or as the only action when no secondary is provided).\n */\n primaryAction: MultiActionButtonAction;\n /**\n * Secondary action configuration.\n * @description Optional action shown on the right side. When present, it can expand on hover or click.\n * @optional\n */\n secondaryAction?: MultiActionButtonAction;\n /**\n * Whether the button should take the full width of its parent.\n * @description When true, the control stretches to 100% width unless `width` is provided.\n * @optional\n */\n shouldUseFullWidth?: boolean;\n /**\n * Optional width override for the whole button.\n * @description Can be a fixed number or a MotionValue for external animations. When omitted,\n * the width is driven by the content unless `shouldUseFullWidth` is true.\n * @optional\n */\n width?: number | MotionValue<number>;\n};\n"],"mappings":";;;;;;AAGA;AACA;AACA;AAFA,IAGYA,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,0BAA3BA,2BAA2B;EACnC;AACJ;AACA;AACA;AACA;EALYA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AASvC;AACA;AACA;AAFA,IAGYE,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,0BAAvBA,uBAAuB;EAC/B;AACJ;AACA;EAHYA,uBAAuB,CAAvBA,uBAAuB;EAK/B;AACJ;AACA;EAPYA,uBAAuB,CAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA;AAWnC;AACA;AACA;AAiBA;AACA;AACA;AA0BA;AACA;AACA;AAuDA;AACA;AACA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchInput","forwardRef","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","parentWidth","useElementSize","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","onClick","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","tabIndex","preventDefault","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n /**\n * Color of the icon\n */\n iconColor?: CSSProperties['color'];\n /**\n * Force the active state of the input and override the internal state\n */\n isActive?: boolean;\n /**\n * Function that is executed when the active state of the input changes\n */\n onActiveChange?: (isActive: boolean) => void;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a key is pressed\n */\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Whether the SearchInput should be positioned absolute.\n */\n shouldUseAbsolutePositioning?: boolean;\n /**\n * The size of the input field\n */\n size?: InputSize;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n /**\n * The width of the parent.\n */\n width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n (\n {\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n shouldUseAbsolutePositioning = false,\n size = InputSize.Medium,\n value,\n width: widthValue,\n },\n ref,\n ) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n const pseudoRef = useRef<HTMLDivElement>(null);\n\n const parentWidth = useElementSize(pseudoRef);\n\n const theme = useTheme() as Theme;\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n const width = useMemo(\n () => widthValue ?? parentWidth?.width,\n [parentWidth?.width, widthValue],\n );\n\n return (\n <>\n <StyledSearchInput\n className=\"beta-chayns-search-input\"\n $size={size}\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n onClick={() => {\n if (shouldUseAbsolutePositioning) {\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n {shouldUseAbsolutePositioning ? (\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n animate={{ opacity: 1, width }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <Input\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n onClick={\n isSearchInputActive\n ? handleBackIconClick\n : handleSearchIconClick\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n ) : (\n <>\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={\n isSearchInputActive\n ? ['fa fa-arrow-left']\n : ['fa fa-search']\n }\n onClick={\n isSearchInputActive\n ? handleBackIconClick\n : handleSearchIconClick\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n key=\"input\"\n leftElement={\n <Icon\n color={theme.text}\n icons={['far fa-search']}\n />\n }\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </>\n )}\n </StyledSearchInput>\n <StyledSearchInputPseudoElement ref={pseudoRef} />\n </>\n );\n },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchInput","forwardRef","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","parentWidth","useElementSize","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","useImperativeHandle","_inputRef$current2","blur","_inputRef$current3","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","onClick","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","tabIndex","preventDefault","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n /**\n * Color of the icon\n */\n iconColor?: CSSProperties['color'];\n /**\n * Force the active state of the input and override the internal state\n */\n isActive?: boolean;\n /**\n * Function that is executed when the active state of the input changes\n */\n onActiveChange?: (isActive: boolean) => void;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a key is pressed\n */\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Whether the SearchInput should be positioned absolute.\n */\n shouldUseAbsolutePositioning?: boolean;\n /**\n * The size of the input field\n */\n size?: InputSize;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n /**\n * The width of the parent.\n */\n width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n (\n {\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n shouldUseAbsolutePositioning = false,\n size = InputSize.Medium,\n value,\n width: widthValue,\n },\n ref,\n ) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n const pseudoRef = useRef<HTMLDivElement>(null);\n\n const parentWidth = useElementSize(pseudoRef);\n\n const theme = useTheme() as Theme;\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n const width = useMemo(\n () => widthValue ?? parentWidth?.width,\n [parentWidth?.width, widthValue],\n );\n\n return (\n <>\n <StyledSearchInput\n className=\"beta-chayns-search-input\"\n $size={size}\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n onClick={() => {\n if (shouldUseAbsolutePositioning) {\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n {shouldUseAbsolutePositioning ? (\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n animate={{ opacity: 1, width }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <Input\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n onClick={\n isSearchInputActive\n ? handleBackIconClick\n : handleSearchIconClick\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n ) : (\n <>\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={\n isSearchInputActive\n ? ['fa fa-arrow-left']\n : ['fa fa-search']\n }\n onClick={\n isSearchInputActive\n ? handleBackIconClick\n : handleSearchIconClick\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n key=\"input\"\n leftElement={\n <Icon\n color={theme.text}\n icons={['far fa-search']}\n />\n }\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </>\n )}\n </StyledSearchInput>\n <StyledSearchInputPseudoElement ref={pseudoRef} />\n </>\n );\n },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,14 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _chaynsApi = require("chayns-api");
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _sharingBar = require("../../constants/sharingBar");
|
|
10
|
-
var _environment = require("../../utils/environment");
|
|
11
|
-
var _sharingBar2 = require("../../utils/sharingBar");
|
|
12
|
-
var _ContextMenu = _interopRequireDefault(require("../context-menu/ContextMenu"));
|
|
13
8
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
14
9
|
var _SharingBar = require("./SharingBar.styles");
|
|
10
|
+
var _SharingContextMenu = _interopRequireDefault(require("../sharing-context-menu/SharingContextMenu"));
|
|
15
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
13
|
const SharingBar = ({
|
|
@@ -21,94 +17,18 @@ const SharingBar = ({
|
|
|
21
17
|
container
|
|
22
18
|
}) => {
|
|
23
19
|
const contextMenuRef = (0, _react.useRef)(null);
|
|
24
|
-
const handleImageDownload = () => {
|
|
25
|
-
(0, _sharingBar2.shareWithUrl)(
|
|
26
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
27
|
-
// @ts-ignore
|
|
28
|
-
_sharingBar.SHAREPROVIDER[5].url.replace('{url}', encodeURIComponent(link)).replace('{linkText}', 'Teilen').replace('{color}', (0, _chaynsApi.getSite)().color.replace('#', '')));
|
|
29
|
-
};
|
|
30
|
-
const isTouch = (0, _environment.useIsTouch)();
|
|
31
|
-
const handleShare = key => {
|
|
32
|
-
var _contextMenuRef$curre;
|
|
33
|
-
(_contextMenuRef$curre = contextMenuRef.current) === null || _contextMenuRef$curre === void 0 || _contextMenuRef$curre.hide();
|
|
34
|
-
switch (key) {
|
|
35
|
-
case 'whatsapp':
|
|
36
|
-
(0, _sharingBar2.shareWithUrl)(
|
|
37
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
38
|
-
// @ts-ignore
|
|
39
|
-
_sharingBar.SHAREPROVIDER[0].url.replace('{url}', encodeURIComponent(`${link}`.trim())));
|
|
40
|
-
break;
|
|
41
|
-
case 'facebook':
|
|
42
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
43
|
-
// @ts-ignore
|
|
44
|
-
(0, _sharingBar2.shareWithUrl)(_sharingBar.SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)));
|
|
45
|
-
break;
|
|
46
|
-
case 'twitter':
|
|
47
|
-
(0, _sharingBar2.shareWithUrl)(
|
|
48
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
49
|
-
// @ts-ignore
|
|
50
|
-
_sharingBar.SHAREPROVIDER[4].url.replace('{url}', encodeURIComponent(link)).replace('{linkText}', ''));
|
|
51
|
-
break;
|
|
52
|
-
case 'mail':
|
|
53
|
-
if (isTouch) {
|
|
54
|
-
(0, _sharingBar2.shareWithApp)(`${link}`.trim());
|
|
55
|
-
} else {
|
|
56
|
-
(0, _sharingBar2.shareWithUrl)(
|
|
57
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
58
|
-
// @ts-ignore
|
|
59
|
-
_sharingBar.SHAREPROVIDER[2].url.replace('{url}', encodeURIComponent(`${link}`.trim())));
|
|
60
|
-
}
|
|
61
|
-
break;
|
|
62
|
-
case 'copy':
|
|
63
|
-
(0, _sharingBar2.copyToClipboard)(link);
|
|
64
|
-
break;
|
|
65
|
-
default:
|
|
66
|
-
break;
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
const contextMenuItems = [{
|
|
70
|
-
icons: ['fa fa-copy'],
|
|
71
|
-
key: 'copy',
|
|
72
|
-
onClick: () => handleShare('copy'),
|
|
73
|
-
text: 'Zwischenablage'
|
|
74
|
-
}, {
|
|
75
|
-
icons: ['fa-solid fa-brands fa-whatsapp'],
|
|
76
|
-
key: 'whatsapp',
|
|
77
|
-
onClick: () => handleShare('whatsapp'),
|
|
78
|
-
text: 'Whatsapp'
|
|
79
|
-
}, {
|
|
80
|
-
icons: ['fa-solid fa-brands fa-facebook-f'],
|
|
81
|
-
key: 'facebook',
|
|
82
|
-
onClick: () => handleShare('facebook'),
|
|
83
|
-
text: 'Facebook'
|
|
84
|
-
}, {
|
|
85
|
-
icons: ['fa-solid fa-brands fa-x-twitter'],
|
|
86
|
-
key: 'twitter',
|
|
87
|
-
onClick: () => handleShare('twitter'),
|
|
88
|
-
text: 'X'
|
|
89
|
-
}, {
|
|
90
|
-
icons: ['fa fa-envelope'],
|
|
91
|
-
key: 'mail',
|
|
92
|
-
onClick: () => handleShare('mail'),
|
|
93
|
-
text: 'Mail'
|
|
94
|
-
}, {
|
|
95
|
-
icons: ['fa fa-qrcode'],
|
|
96
|
-
key: 'callingCode',
|
|
97
|
-
onClick: handleImageDownload,
|
|
98
|
-
text: 'Calling Code herunterladen'
|
|
99
|
-
}];
|
|
100
20
|
const handleSharingBarClick = (0, _react.useCallback)(event => {
|
|
101
|
-
var _contextMenuRef$
|
|
21
|
+
var _contextMenuRef$curre;
|
|
102
22
|
event.preventDefault();
|
|
103
23
|
event.stopPropagation();
|
|
104
|
-
(_contextMenuRef$
|
|
24
|
+
(_contextMenuRef$curre = contextMenuRef.current) === null || _contextMenuRef$curre === void 0 || _contextMenuRef$curre.show();
|
|
105
25
|
}, []);
|
|
106
26
|
return /*#__PURE__*/_react.default.createElement(_SharingBar.StyledSharingBar, {
|
|
107
27
|
onClick: handleSharingBarClick
|
|
108
28
|
}, /*#__PURE__*/_react.default.createElement(_SharingBar.StyledSharingBarIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
109
29
|
icons: ['fa-solid fa-share-nodes']
|
|
110
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
111
|
-
|
|
30
|
+
})), /*#__PURE__*/_react.default.createElement(_SharingContextMenu.default, {
|
|
31
|
+
link: link,
|
|
112
32
|
ref: contextMenuRef,
|
|
113
33
|
alignment: popupAlignment,
|
|
114
34
|
container: container
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SharingBar.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_sharingBar","_environment","_sharingBar2","_ContextMenu","_interopRequireDefault","_Icon","_SharingBar","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SharingBar","label","link","popupAlignment","container","contextMenuRef","useRef","handleImageDownload","shareWithUrl","SHAREPROVIDER","url","replace","encodeURIComponent","getSite","color","isTouch","useIsTouch","handleShare","key","_contextMenuRef$curre","current","hide","trim","shareWithApp","copyToClipboard","contextMenuItems","icons","onClick","text","handleSharingBarClick","useCallback","event","_contextMenuRef$curre2","preventDefault","stopPropagation","show","createElement","StyledSharingBar","StyledSharingBarIconWrapper","items","ref","alignment","StyledSharingBarText","displayName","_default","exports"],"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 { useIsTouch } 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';\nimport type { ContextMenuAlignment } from '../context-menu/ContextMenu.types';\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 isTouch = useIsTouch();\n\n const handleShare = (key: string) => {\n contextMenuRef.current?.hide();\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":[]}
|
|
1
|
+
{"version":3,"file":"SharingBar.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_SharingBar","_SharingContextMenu","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SharingBar","label","link","popupAlignment","container","contextMenuRef","useRef","handleSharingBarClick","useCallback","event","_contextMenuRef$curre","preventDefault","stopPropagation","current","show","createElement","StyledSharingBar","onClick","StyledSharingBarIconWrapper","icons","ref","alignment","StyledSharingBarText","displayName","_default","exports"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import React, { FC, MouseEventHandler, useCallback, useRef } from 'react';\nimport Icon from '../icon/Icon';\nimport {\n StyledSharingBar,\n StyledSharingBarIconWrapper,\n StyledSharingBarText,\n} from './SharingBar.styles';\nimport type { ContextMenuAlignment } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\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 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 <SharingContextMenu\n link={link}\n ref={contextMenuRef}\n alignment={popupAlignment}\n container={container}\n >\n {null}\n </SharingContextMenu>\n <StyledSharingBarText>{label}</StyledSharingBarText>\n </StyledSharingBar>\n );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAMA,IAAAI,mBAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA4E,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAqB5E,MAAMgB,UAA+B,GAAGA,CAAC;EAAEC,KAAK;EAAEC,IAAI;EAAEC,cAAc;EAAEC;AAAU,CAAC,KAAK;EACpF,MAAMC,cAAc,GAAG,IAAAC,aAAM,EAA6C,IAAI,CAAC;EAE/E,MAAMC,qBAAqB,GAAG,IAAAC,kBAAW,EAAqCC,KAAK,IAAK;IAAA,IAAAC,qBAAA;IACpFD,KAAK,CAACE,cAAc,CAAC,CAAC;IACtBF,KAAK,CAACG,eAAe,CAAC,CAAC;IAEvB,CAAAF,qBAAA,GAAAL,cAAc,CAACQ,OAAO,cAAAH,qBAAA,eAAtBA,qBAAA,CAAwBI,IAAI,CAAC,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIxC,MAAA,CAAAS,OAAA,CAAAgC,aAAA,CAACpC,WAAA,CAAAqC,gBAAgB;IAACC,OAAO,EAAEV;EAAsB,gBAC7CjC,MAAA,CAAAS,OAAA,CAAAgC,aAAA,CAACpC,WAAA,CAAAuC,2BAA2B,qBACxB5C,MAAA,CAAAS,OAAA,CAAAgC,aAAA,CAACtC,KAAA,CAAAM,OAAI;IAACoC,KAAK,EAAE,CAAC,yBAAyB;EAAE,CAAE,CAClB,CAAC,eAC9B7C,MAAA,CAAAS,OAAA,CAAAgC,aAAA,CAACnC,mBAAA,CAAAG,OAAkB;IACfmB,IAAI,EAAEA,IAAK;IACXkB,GAAG,EAAEf,cAAe;IACpBgB,SAAS,EAAElB,cAAe;IAC1BC,SAAS,EAAEA;EAAU,GAEpB,IACe,CAAC,eACrB9B,MAAA,CAAAS,OAAA,CAAAgC,aAAA,CAACpC,WAAA,CAAA2C,oBAAoB,QAAErB,KAA4B,CACrC,CAAC;AAE3B,CAAC;AAEDD,UAAU,CAACuB,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1C,OAAA,GAEvBiB,UAAU","ignoreList":[]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _SharingContextMenu = _interopRequireDefault(require("../sharing-context-menu/SharingContextMenu"));
|
|
9
|
+
var _SharingButton = require("./SharingButton.styles");
|
|
10
|
+
var _Button = _interopRequireDefault(require("../button/Button"));
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
const SharingButton = ({
|
|
13
|
+
link,
|
|
14
|
+
alignment,
|
|
15
|
+
container,
|
|
16
|
+
children
|
|
17
|
+
}) => {
|
|
18
|
+
const contextMenuRef = _react.default.useRef(null);
|
|
19
|
+
const [isButtonDisabled, setIsButtonDisabled] = _react.default.useState(false);
|
|
20
|
+
const handleButtonClick = () => {
|
|
21
|
+
var _contextMenuRef$curre;
|
|
22
|
+
(_contextMenuRef$curre = contextMenuRef.current) === null || _contextMenuRef$curre === void 0 || _contextMenuRef$curre.show();
|
|
23
|
+
};
|
|
24
|
+
const handleOnShow = () => {
|
|
25
|
+
setIsButtonDisabled(true);
|
|
26
|
+
};
|
|
27
|
+
const handleOnHide = () => {
|
|
28
|
+
setIsButtonDisabled(false);
|
|
29
|
+
};
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement(_SharingButton.StyledSharingButtonContainer, null, /*#__PURE__*/_react.default.createElement(_SharingContextMenu.default, {
|
|
31
|
+
link: link,
|
|
32
|
+
alignment: alignment,
|
|
33
|
+
container: container,
|
|
34
|
+
ref: contextMenuRef,
|
|
35
|
+
onShow: handleOnShow,
|
|
36
|
+
onHide: handleOnHide
|
|
37
|
+
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
38
|
+
onClick: handleButtonClick,
|
|
39
|
+
isDisabled: isButtonDisabled
|
|
40
|
+
}, children)));
|
|
41
|
+
};
|
|
42
|
+
var _default = exports.default = SharingButton;
|
|
43
|
+
//# sourceMappingURL=SharingButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SharingButton.js","names":["_react","_interopRequireDefault","require","_SharingContextMenu","_SharingButton","_Button","e","__esModule","default","SharingButton","link","alignment","container","children","contextMenuRef","React","useRef","isButtonDisabled","setIsButtonDisabled","useState","handleButtonClick","_contextMenuRef$curre","current","show","handleOnShow","handleOnHide","createElement","StyledSharingButtonContainer","ref","onShow","onHide","onClick","isDisabled","_default","exports"],"sources":["../../../../src/components/sharing-button/SharingButton.tsx"],"sourcesContent":["import React, { FunctionComponent, PropsWithChildren } from 'react';\nimport { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu, {\n SharingContextMenuProps,\n} from '../sharing-context-menu/SharingContextMenu';\nimport { StyledSharingButtonContainer } from './SharingButton.styles';\nimport Button from '../button/Button';\n\nexport type SharingButtonProps = PropsWithChildren<\n Pick<SharingContextMenuProps, 'link' | 'alignment' | 'container'>\n>;\n\nconst SharingButton: FunctionComponent<SharingButtonProps> = ({\n link,\n alignment,\n container,\n children,\n}) => {\n const contextMenuRef = React.useRef<ContextMenuRef>(null);\n const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);\n\n const handleButtonClick = () => {\n contextMenuRef.current?.show();\n };\n\n const handleOnShow = () => {\n setIsButtonDisabled(true);\n };\n\n const handleOnHide = () => {\n setIsButtonDisabled(false);\n };\n\n return (\n <StyledSharingButtonContainer>\n <SharingContextMenu\n link={link}\n alignment={alignment}\n container={container}\n ref={contextMenuRef}\n onShow={handleOnShow}\n onHide={handleOnHide}\n >\n <Button onClick={handleButtonClick} isDisabled={isButtonDisabled}>\n {children}\n </Button>\n </SharingContextMenu>\n </StyledSharingButtonContainer>\n );\n};\n\nexport default SharingButton;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,mBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAGA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAsC,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAMtC,MAAMG,aAAoD,GAAGA,CAAC;EAC1DC,IAAI;EACJC,SAAS;EACTC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGH,cAAK,CAACI,QAAQ,CAAC,KAAK,CAAC;EAErE,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAAA,IAAAC,qBAAA;IAC5B,CAAAA,qBAAA,GAAAP,cAAc,CAACQ,OAAO,cAAAD,qBAAA,eAAtBA,qBAAA,CAAwBE,IAAI,CAAC,CAAC;EAClC,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAM;IACvBN,mBAAmB,CAAC,IAAI,CAAC;EAC7B,CAAC;EAED,MAAMO,YAAY,GAAGA,CAAA,KAAM;IACvBP,mBAAmB,CAAC,KAAK,CAAC;EAC9B,CAAC;EAED,oBACIlB,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACtB,cAAA,CAAAuB,4BAA4B,qBACzB3B,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACvB,mBAAA,CAAAK,OAAkB;IACfE,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBgB,GAAG,EAAEd,cAAe;IACpBe,MAAM,EAAEL,YAAa;IACrBM,MAAM,EAAEL;EAAa,gBAErBzB,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACrB,OAAA,CAAAG,OAAM;IAACuB,OAAO,EAAEX,iBAAkB;IAACY,UAAU,EAAEf;EAAiB,GAC5DJ,QACG,CACQ,CACM,CAAC;AAEvC,CAAC;AAAC,IAAAoB,QAAA,GAAAC,OAAA,CAAA1B,OAAA,GAEaC,aAAa","ignoreList":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledSharingButtonContainer = void 0;
|
|
7
|
+
var _styledComponents = require("styled-components");
|
|
8
|
+
const StyledSharingButtonContainer = exports.StyledSharingButtonContainer = _styledComponents.styled.div`
|
|
9
|
+
width: fit-content;
|
|
10
|
+
`;
|
|
11
|
+
//# sourceMappingURL=SharingButton.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SharingButton.styles.js","names":["_styledComponents","require","StyledSharingButtonContainer","exports","styled","div"],"sources":["../../../../src/components/sharing-button/SharingButton.styles.ts"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const StyledSharingButtonContainer = styled.div`\n width: fit-content;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAEO,MAAMC,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAGE,wBAAM,CAACC,GAAG;AACtD;AACA,CAAC","ignoreList":[]}
|