@chayns-components/core 5.0.0-beta.1173 → 5.0.0-beta.1174
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/list/list-item/list-item-head/ListItemHead.js +14 -54
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js +13 -53
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
- package/package.json +2 -3
|
@@ -11,7 +11,6 @@ var _ListItemIcon = _interopRequireDefault(require("./list-item-icon/ListItemIco
|
|
|
11
11
|
var _ListItemImage = _interopRequireDefault(require("./list-item-image/ListItemImage"));
|
|
12
12
|
var _ListItemRightElements = _interopRequireDefault(require("./list-item-right-elements/ListItemRightElements"));
|
|
13
13
|
var _ListItemHead = require("./ListItemHead.styles");
|
|
14
|
-
var _reactResizeDetector = require("react-resize-detector");
|
|
15
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
15
|
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
16
|
const ListItemHead = ({
|
|
@@ -40,33 +39,23 @@ const ListItemHead = ({
|
|
|
40
39
|
setShouldEnableTooltip
|
|
41
40
|
}) => {
|
|
42
41
|
const [shouldShowHoverItem, setShouldShowHoverItem] = (0, _react.useState)(false);
|
|
43
|
-
const
|
|
42
|
+
const titleWrapperRef = (0, _react.useRef)(null);
|
|
44
43
|
const longPressTimeoutRef = (0, _react.useRef)();
|
|
45
44
|
const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';
|
|
46
45
|
const shouldShowMultilineTitle = (0, _react.useMemo)(() => !subtitle, [subtitle]);
|
|
47
|
-
const handleShowTooltipResize = (0, _react.useCallback)(
|
|
48
|
-
var
|
|
49
|
-
const el = (
|
|
46
|
+
const handleShowTooltipResize = (0, _react.useCallback)(entries => {
|
|
47
|
+
var _entries$;
|
|
48
|
+
const el = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.target;
|
|
50
49
|
if (!el) return;
|
|
51
50
|
setShouldEnableTooltip(el.scrollWidth > el.clientWidth);
|
|
52
51
|
}, [setShouldEnableTooltip]);
|
|
53
|
-
const {
|
|
54
|
-
ref: titleRef
|
|
55
|
-
} = (0, _reactResizeDetector.useResizeDetector)({
|
|
56
|
-
onResize: handleShowTooltipResize,
|
|
57
|
-
skipOnMount: true
|
|
58
|
-
});
|
|
59
|
-
const {
|
|
60
|
-
ref: ellipsisTitleRef
|
|
61
|
-
} = (0, _reactResizeDetector.useResizeDetector)({
|
|
62
|
-
onResize: handleShowTooltipResize,
|
|
63
|
-
skipOnMount: true
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
// This is used to trigger a rerender, so the head height can be calculated
|
|
67
52
|
(0, _react.useEffect)(() => {
|
|
68
|
-
|
|
69
|
-
|
|
53
|
+
const element = titleWrapperRef === null || titleWrapperRef === void 0 ? void 0 : titleWrapperRef.current;
|
|
54
|
+
if (!element) return undefined;
|
|
55
|
+
const resizeObserver = new ResizeObserver(handleShowTooltipResize);
|
|
56
|
+
resizeObserver.observe(element);
|
|
57
|
+
return () => resizeObserver.disconnect();
|
|
58
|
+
}, [handleShowTooltipResize]);
|
|
70
59
|
const handleMouseEnter = (0, _react.useCallback)(() => setShouldShowHoverItem(true), []);
|
|
71
60
|
const handleMouseLeave = (0, _react.useCallback)(() => setShouldShowHoverItem(false), []);
|
|
72
61
|
const handleTouchStart = (0, _react.useCallback)(event => {
|
|
@@ -148,39 +137,10 @@ const ListItemHead = ({
|
|
|
148
137
|
})), leftElements, iconOrImageElement), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadContent, {
|
|
149
138
|
$isIconOrImageGiven: iconOrImageElement !== undefined,
|
|
150
139
|
$isOpen: isOpen
|
|
151
|
-
}, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleContent, null,
|
|
152
|
-
|
|
153
|
-
ref:
|
|
154
|
-
$shouldShowMultilineTitle: shouldShowMultilineTitle
|
|
155
|
-
initial: {
|
|
156
|
-
opacity: 0
|
|
157
|
-
},
|
|
158
|
-
animate: {
|
|
159
|
-
opacity: 1
|
|
160
|
-
},
|
|
161
|
-
exit: {
|
|
162
|
-
opacity: 0
|
|
163
|
-
},
|
|
164
|
-
transition: {
|
|
165
|
-
duration: 0.4
|
|
166
|
-
}
|
|
167
|
-
}, title) : /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {
|
|
168
|
-
key: "ellipsisTitle",
|
|
169
|
-
$isEllipsis: true,
|
|
170
|
-
ref: ellipsisTitleRef,
|
|
171
|
-
$shouldShowMultilineTitle: shouldShowMultilineTitle,
|
|
172
|
-
initial: {
|
|
173
|
-
opacity: 0
|
|
174
|
-
},
|
|
175
|
-
animate: {
|
|
176
|
-
opacity: 1
|
|
177
|
-
},
|
|
178
|
-
exit: {
|
|
179
|
-
opacity: 0
|
|
180
|
-
},
|
|
181
|
-
transition: {
|
|
182
|
-
duration: 0.3
|
|
183
|
-
}
|
|
140
|
+
}, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleContent, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleText, {
|
|
141
|
+
$isEllipsis: !isOpen,
|
|
142
|
+
ref: titleWrapperRef,
|
|
143
|
+
$shouldShowMultilineTitle: shouldShowMultilineTitle
|
|
184
144
|
}, title), /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitle, null, /*#__PURE__*/_react.default.createElement(_ListItemHead.StyledListItemHeadSubtitleText, {
|
|
185
145
|
$isOpen: isOpen
|
|
186
146
|
}, subtitle))), rightElements && /*#__PURE__*/_react.default.createElement(_ListItemRightElements.default, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_accordion","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","_reactResizeDetector","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldShowHoverItem","setShouldShowHoverItem","useState","setIsFirstRender","longPressTimeoutRef","useRef","shouldShowSubtitleRow","shouldShowMultilineTitle","useMemo","handleShowTooltipResize","useCallback","data","_data$entry","el","entry","target","scrollWidth","clientWidth","ref","titleRef","useResizeDetector","onResize","skipOnMount","ellipsisTitleRef","useEffect","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","getElementClickEvent","center","top","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","StyledListItemHead","layout","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleText","key","$shouldShowMultilineTitle","exit","$isEllipsis","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItemWrapper","marginLeft","width","StyledMotionListItemHeadHoverItem","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport { getElementClickEvent } from '../../../../utils/accordion';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\nimport { ResizePayload, useResizeDetector } from 'react-resize-detector';\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n setShouldEnableTooltip: (value: boolean) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n setShouldEnableTooltip,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n\n const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n const handleShowTooltipResize = useCallback(\n (data: ResizePayload) => {\n const el = data.entry?.target;\n if (!el) return;\n setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n },\n [setShouldEnableTooltip],\n );\n\n const { ref: titleRef } = useResizeDetector<HTMLDivElement>({\n onResize: handleShowTooltipResize,\n skipOnMount: true,\n });\n const { ref: ellipsisTitleRef } = useResizeDetector<HTMLDivElement>({\n onResize: handleShowTooltipResize,\n skipOnMount: true,\n });\n\n // This is used to trigger a rerender, so the head height can be calculated\n useEffect(() => {\n setIsFirstRender(true);\n }, []);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const shouldPreventRightElementClick = useMemo(() => {\n if (!rightElements) return false;\n\n if (\n typeof rightElements === 'object' &&\n ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n ) {\n if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n return true;\n }\n\n if (rightElements.center && getElementClickEvent(rightElements.center)) {\n return true;\n }\n\n if (rightElements.top && getElementClickEvent(rightElements.top)) {\n return true;\n }\n } else {\n return getElementClickEvent(rightElements as ReactNode);\n }\n\n return false;\n }, [rightElements]);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerImage,\n icons,\n imageBackground,\n images,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n return (\n <StyledListItemHead\n layout\n animate={{\n opacity: isTitleGreyed ? 0.5 : 1,\n }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && !shouldHideIndicator && (\n <Icon icons={['fa fa-chevron-right']} />\n )}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n {isOpen ? (\n <StyledListItemHeadTitleText\n key=\"title\"\n ref={titleRef}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.4 }}\n >\n {title}\n </StyledListItemHeadTitleText>\n ) : (\n <StyledListItemHeadTitleText\n key=\"ellipsisTitle\"\n $isEllipsis\n ref={ellipsisTitleRef}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n >\n {title}\n </StyledListItemHeadTitleText>\n )}\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && (\n <ListItemRightElements\n rightElements={rightElements}\n shouldPreventRightElementClick={shouldPreventRightElementClick}\n />\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ListItemHead.js","names":["_react","_interopRequireWildcard","require","_accordion","_Icon","_interopRequireDefault","_ListItemIcon","_ListItemImage","_ListItemRightElements","_ListItemHead","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldShowHoverItem","setShouldShowHoverItem","useState","titleWrapperRef","useRef","longPressTimeoutRef","shouldShowSubtitleRow","shouldShowMultilineTitle","useMemo","handleShowTooltipResize","useCallback","entries","_entries$","el","target","scrollWidth","clientWidth","useEffect","element","current","undefined","resizeObserver","ResizeObserver","observe","disconnect","handleMouseEnter","handleMouseLeave","handleTouchStart","event","window","setTimeout","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","getElementClickEvent","center","top","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","StyledListItemHead","layout","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","StyledListItemHeadLeftWrapper","StyledMotionListItemHeadIndicator","rotate","StyledListItemHeadContent","$isIconOrImageGiven","$isOpen","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleText","$isEllipsis","ref","$shouldShowMultilineTitle","StyledListItemHeadTitleElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledMotionListItemHeadHoverItemWrapper","marginLeft","width","StyledMotionListItemHeadHoverItem","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport { getElementClickEvent } from '../../../../utils/accordion';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n setShouldEnableTooltip: (value: boolean) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n setShouldEnableTooltip,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const longPressTimeoutRef = useRef<number>();\n\n const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n const handleShowTooltipResize = useCallback(\n (entries: ResizeObserverEntry[]) => {\n const el = entries[0]?.target;\n if (!el) return;\n setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n },\n [setShouldEnableTooltip],\n );\n\n useEffect(() => {\n const element = titleWrapperRef?.current;\n if (!element) return undefined;\n\n const resizeObserver = new ResizeObserver(handleShowTooltipResize);\n resizeObserver.observe(element);\n\n return () => resizeObserver.disconnect();\n }, [handleShowTooltipResize]);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const shouldPreventRightElementClick = useMemo(() => {\n if (!rightElements) return false;\n\n if (\n typeof rightElements === 'object' &&\n ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n ) {\n if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n return true;\n }\n\n if (rightElements.center && getElementClickEvent(rightElements.center)) {\n return true;\n }\n\n if (rightElements.top && getElementClickEvent(rightElements.top)) {\n return true;\n }\n } else {\n return getElementClickEvent(rightElements as ReactNode);\n }\n\n return false;\n }, [rightElements]);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerImage,\n icons,\n imageBackground,\n images,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n return (\n <StyledListItemHead\n layout\n animate={{\n opacity: isTitleGreyed ? 0.5 : 1,\n }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && !shouldHideIndicator && (\n <Icon icons={['fa fa-chevron-right']} />\n )}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n <StyledListItemHeadTitleText\n $isEllipsis={!isOpen}\n ref={titleWrapperRef}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n >\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && (\n <ListItemRightElements\n rightElements={rightElements}\n shouldPreventRightElementClick={shouldPreventRightElementClick}\n />\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,7 +5,6 @@ import ListItemIcon from './list-item-icon/ListItemIcon';
|
|
|
5
5
|
import ListItemImage from './list-item-image/ListItemImage';
|
|
6
6
|
import ListItemRightElements from './list-item-right-elements/ListItemRightElements';
|
|
7
7
|
import { StyledListItemHead, StyledListItemHeadContent, StyledListItemHeadLeftWrapper, StyledListItemHeadSubtitle, StyledListItemHeadSubtitleText, StyledListItemHeadTitle, StyledListItemHeadTitleContent, StyledListItemHeadTitleElement, StyledListItemHeadTitleText, StyledMotionListItemHeadHoverItem, StyledMotionListItemHeadHoverItemWrapper, StyledMotionListItemHeadIndicator } from './ListItemHead.styles';
|
|
8
|
-
import { useResizeDetector } from 'react-resize-detector';
|
|
9
8
|
const ListItemHead = ({
|
|
10
9
|
careOfLocationId,
|
|
11
10
|
cornerImage,
|
|
@@ -32,32 +31,22 @@ const ListItemHead = ({
|
|
|
32
31
|
setShouldEnableTooltip
|
|
33
32
|
}) => {
|
|
34
33
|
const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);
|
|
35
|
-
const
|
|
34
|
+
const titleWrapperRef = useRef(null);
|
|
36
35
|
const longPressTimeoutRef = useRef();
|
|
37
36
|
const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';
|
|
38
37
|
const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);
|
|
39
|
-
const handleShowTooltipResize = useCallback(
|
|
40
|
-
const el =
|
|
38
|
+
const handleShowTooltipResize = useCallback(entries => {
|
|
39
|
+
const el = entries[0]?.target;
|
|
41
40
|
if (!el) return;
|
|
42
41
|
setShouldEnableTooltip(el.scrollWidth > el.clientWidth);
|
|
43
42
|
}, [setShouldEnableTooltip]);
|
|
44
|
-
const {
|
|
45
|
-
ref: titleRef
|
|
46
|
-
} = useResizeDetector({
|
|
47
|
-
onResize: handleShowTooltipResize,
|
|
48
|
-
skipOnMount: true
|
|
49
|
-
});
|
|
50
|
-
const {
|
|
51
|
-
ref: ellipsisTitleRef
|
|
52
|
-
} = useResizeDetector({
|
|
53
|
-
onResize: handleShowTooltipResize,
|
|
54
|
-
skipOnMount: true
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
// This is used to trigger a rerender, so the head height can be calculated
|
|
58
43
|
useEffect(() => {
|
|
59
|
-
|
|
60
|
-
|
|
44
|
+
const element = titleWrapperRef?.current;
|
|
45
|
+
if (!element) return undefined;
|
|
46
|
+
const resizeObserver = new ResizeObserver(handleShowTooltipResize);
|
|
47
|
+
resizeObserver.observe(element);
|
|
48
|
+
return () => resizeObserver.disconnect();
|
|
49
|
+
}, [handleShowTooltipResize]);
|
|
61
50
|
const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);
|
|
62
51
|
const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);
|
|
63
52
|
const handleTouchStart = useCallback(event => {
|
|
@@ -139,39 +128,10 @@ const ListItemHead = ({
|
|
|
139
128
|
})), leftElements, iconOrImageElement), /*#__PURE__*/React.createElement(StyledListItemHeadContent, {
|
|
140
129
|
$isIconOrImageGiven: iconOrImageElement !== undefined,
|
|
141
130
|
$isOpen: isOpen
|
|
142
|
-
}, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleContent, null,
|
|
143
|
-
|
|
144
|
-
ref:
|
|
145
|
-
$shouldShowMultilineTitle: shouldShowMultilineTitle
|
|
146
|
-
initial: {
|
|
147
|
-
opacity: 0
|
|
148
|
-
},
|
|
149
|
-
animate: {
|
|
150
|
-
opacity: 1
|
|
151
|
-
},
|
|
152
|
-
exit: {
|
|
153
|
-
opacity: 0
|
|
154
|
-
},
|
|
155
|
-
transition: {
|
|
156
|
-
duration: 0.4
|
|
157
|
-
}
|
|
158
|
-
}, title) : /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
|
|
159
|
-
key: "ellipsisTitle",
|
|
160
|
-
$isEllipsis: true,
|
|
161
|
-
ref: ellipsisTitleRef,
|
|
162
|
-
$shouldShowMultilineTitle: shouldShowMultilineTitle,
|
|
163
|
-
initial: {
|
|
164
|
-
opacity: 0
|
|
165
|
-
},
|
|
166
|
-
animate: {
|
|
167
|
-
opacity: 1
|
|
168
|
-
},
|
|
169
|
-
exit: {
|
|
170
|
-
opacity: 0
|
|
171
|
-
},
|
|
172
|
-
transition: {
|
|
173
|
-
duration: 0.3
|
|
174
|
-
}
|
|
131
|
+
}, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleContent, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
|
|
132
|
+
$isEllipsis: !isOpen,
|
|
133
|
+
ref: titleWrapperRef,
|
|
134
|
+
$shouldShowMultilineTitle: shouldShowMultilineTitle
|
|
175
135
|
}, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, null, titleElement))), shouldShowSubtitleRow && /*#__PURE__*/React.createElement(StyledListItemHeadSubtitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
|
|
176
136
|
$isOpen: isOpen
|
|
177
137
|
}, subtitle))), rightElements && /*#__PURE__*/React.createElement(ListItemRightElements, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","getElementClickEvent","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadIndicator","useResizeDetector","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldShowHoverItem","setShouldShowHoverItem","setIsFirstRender","longPressTimeoutRef","shouldShowSubtitleRow","shouldShowMultilineTitle","handleShowTooltipResize","data","el","entry","target","scrollWidth","clientWidth","ref","titleRef","onResize","skipOnMount","ellipsisTitleRef","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","center","top","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","undefined","layout","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$isOpen","key","$shouldShowMultilineTitle","exit","$isEllipsis","marginLeft","width","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport { getElementClickEvent } from '../../../../utils/accordion';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\nimport { ResizePayload, useResizeDetector } from 'react-resize-detector';\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n setShouldEnableTooltip: (value: boolean) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n setShouldEnableTooltip,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n const [, setIsFirstRender] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n\n const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n const handleShowTooltipResize = useCallback(\n (data: ResizePayload) => {\n const el = data.entry?.target;\n if (!el) return;\n setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n },\n [setShouldEnableTooltip],\n );\n\n const { ref: titleRef } = useResizeDetector<HTMLDivElement>({\n onResize: handleShowTooltipResize,\n skipOnMount: true,\n });\n const { ref: ellipsisTitleRef } = useResizeDetector<HTMLDivElement>({\n onResize: handleShowTooltipResize,\n skipOnMount: true,\n });\n\n // This is used to trigger a rerender, so the head height can be calculated\n useEffect(() => {\n setIsFirstRender(true);\n }, []);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const shouldPreventRightElementClick = useMemo(() => {\n if (!rightElements) return false;\n\n if (\n typeof rightElements === 'object' &&\n ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n ) {\n if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n return true;\n }\n\n if (rightElements.center && getElementClickEvent(rightElements.center)) {\n return true;\n }\n\n if (rightElements.top && getElementClickEvent(rightElements.top)) {\n return true;\n }\n } else {\n return getElementClickEvent(rightElements as ReactNode);\n }\n\n return false;\n }, [rightElements]);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerImage,\n icons,\n imageBackground,\n images,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n return (\n <StyledListItemHead\n layout\n animate={{\n opacity: isTitleGreyed ? 0.5 : 1,\n }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && !shouldHideIndicator && (\n <Icon icons={['fa fa-chevron-right']} />\n )}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n {isOpen ? (\n <StyledListItemHeadTitleText\n key=\"title\"\n ref={titleRef}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.4 }}\n >\n {title}\n </StyledListItemHeadTitleText>\n ) : (\n <StyledListItemHeadTitleText\n key=\"ellipsisTitle\"\n $isEllipsis\n ref={ellipsisTitleRef}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n >\n {title}\n </StyledListItemHeadTitleText>\n )}\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && (\n <ListItemRightElements\n rightElements={rightElements}\n shouldPreventRightElementClick={shouldPreventRightElementClick}\n />\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ListItemHead.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","getElementClickEvent","Icon","ListItemIcon","ListItemImage","ListItemRightElements","StyledListItemHead","StyledListItemHeadContent","StyledListItemHeadLeftWrapper","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTitle","StyledListItemHeadTitleContent","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadHoverItemWrapper","StyledMotionListItemHeadIndicator","ListItemHead","careOfLocationId","cornerImage","hoverItem","icons","imageBackground","images","isAnyItemExpandable","isExpandable","isOpen","isTitleGreyed","leftElements","onClick","onLongPress","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldShowRoundImageOrIcon","subtitle","shouldForceHover","title","titleElement","setShouldEnableTooltip","shouldShowHoverItem","setShouldShowHoverItem","titleWrapperRef","longPressTimeoutRef","shouldShowSubtitleRow","shouldShowMultilineTitle","handleShowTooltipResize","entries","el","target","scrollWidth","clientWidth","element","current","undefined","resizeObserver","ResizeObserver","observe","disconnect","handleMouseEnter","handleMouseLeave","handleTouchStart","event","window","setTimeout","handleTouchEnd","clearTimeout","shouldPreventRightElementClick","bottom","center","top","iconOrImageElement","createElement","shouldHideBackground","shouldShowRoundIcon","shouldShowRoundImage","layout","animate","opacity","initial","transition","duration","type","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","rotate","$isIconOrImageGiven","$isOpen","$isEllipsis","ref","$shouldShowMultilineTitle","marginLeft","width","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { IListItemRightElements } from '../../../../types/list';\nimport { getElementClickEvent } from '../../../../utils/accordion';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport ListItemRightElements from './list-item-right-elements/ListItemRightElements';\nimport {\n StyledListItemHead,\n StyledListItemHeadContent,\n StyledListItemHeadLeftWrapper,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleContent,\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadHoverItemWrapper,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ntype ListItemHeadProps = {\n careOfLocationId?: number;\n cornerImage?: string;\n hoverItem?: ReactNode;\n icons?: string[];\n imageBackground?: CSSProperties['background'];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n isTitleGreyed?: boolean;\n leftElements?: ReactNode;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: IListItemRightElements;\n shouldHideImageOrIconBackground?: boolean;\n shouldHideIndicator?: boolean;\n shouldOpenImageOnClick: boolean;\n shouldShowRoundImageOrIcon?: boolean;\n subtitle?: ReactNode;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldForceHover?: boolean;\n setShouldEnableTooltip: (value: boolean) => void;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n careOfLocationId,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onLongPress,\n rightElements,\n shouldHideImageOrIconBackground,\n shouldHideIndicator,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n subtitle,\n shouldForceHover,\n title,\n titleElement,\n setShouldEnableTooltip,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const longPressTimeoutRef = useRef<number>();\n\n const shouldShowSubtitleRow = subtitle || typeof subtitle === 'string';\n\n const shouldShowMultilineTitle = useMemo(() => !subtitle, [subtitle]);\n\n const handleShowTooltipResize = useCallback(\n (entries: ResizeObserverEntry[]) => {\n const el = entries[0]?.target;\n if (!el) return;\n setShouldEnableTooltip(el.scrollWidth > el.clientWidth);\n },\n [setShouldEnableTooltip],\n );\n\n useEffect(() => {\n const element = titleWrapperRef?.current;\n if (!element) return undefined;\n\n const resizeObserver = new ResizeObserver(handleShowTooltipResize);\n resizeObserver.observe(element);\n\n return () => resizeObserver.disconnect();\n }, [handleShowTooltipResize]);\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const shouldPreventRightElementClick = useMemo(() => {\n if (!rightElements) return false;\n\n if (\n typeof rightElements === 'object' &&\n ('bottom' in rightElements || 'center' in rightElements || 'top' in rightElements)\n ) {\n if (rightElements.bottom && getElementClickEvent(rightElements.bottom)) {\n return true;\n }\n\n if (rightElements.center && getElementClickEvent(rightElements.center)) {\n return true;\n }\n\n if (rightElements.top && getElementClickEvent(rightElements.top)) {\n return true;\n }\n } else {\n return getElementClickEvent(rightElements as ReactNode);\n }\n\n return false;\n }, [rightElements]);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return (\n <ListItemIcon\n icons={icons}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundIcon={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n if (images) {\n return (\n <ListItemImage\n imageBackground={imageBackground}\n careOfLocationId={careOfLocationId}\n cornerImage={cornerImage}\n images={images}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldHideBackground={!!shouldHideImageOrIconBackground}\n shouldShowRoundImage={!!shouldShowRoundImageOrIcon}\n />\n );\n }\n\n return undefined;\n }, [\n careOfLocationId,\n cornerImage,\n icons,\n imageBackground,\n images,\n shouldHideImageOrIconBackground,\n shouldOpenImageOnClick,\n shouldShowRoundImageOrIcon,\n ]);\n\n return (\n <StyledListItemHead\n layout\n animate={{\n opacity: isTitleGreyed ? 0.5 : 1,\n }}\n initial={false}\n transition={{ duration: 0.2, type: 'tween' }}\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n <StyledListItemHeadLeftWrapper>\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && !shouldHideIndicator && (\n <Icon icons={['fa fa-chevron-right']} />\n )}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n </StyledListItemHeadLeftWrapper>\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleContent>\n <StyledListItemHeadTitleText\n $isEllipsis={!isOpen}\n ref={titleWrapperRef}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n >\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemHeadTitleContent>\n </StyledListItemHeadTitle>\n {shouldShowSubtitleRow && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements && (\n <ListItemRightElements\n rightElements={rightElements}\n shouldPreventRightElementClick={shouldPreventRightElementClick}\n />\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItemWrapper\n className=\"beta-chayns-list-item-hover-item\"\n animate={{\n marginLeft: shouldForceHover || shouldShowHoverItem ? 8 : 0,\n opacity: shouldForceHover || shouldShowHoverItem ? 1 : 0,\n width: shouldForceHover || shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n <StyledMotionListItemHeadHoverItem>\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n </StyledMotionListItemHeadHoverItemWrapper>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1174",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -73,7 +73,6 @@
|
|
|
73
73
|
"@chayns/colors": "^2.0.0",
|
|
74
74
|
"@chayns/uac-service": "~0.0.58",
|
|
75
75
|
"clsx": "^2.1.1",
|
|
76
|
-
"react-resize-detector": "^12.1.0",
|
|
77
76
|
"uuid": "^10.0.0"
|
|
78
77
|
},
|
|
79
78
|
"peerDependencies": {
|
|
@@ -86,5 +85,5 @@
|
|
|
86
85
|
"publishConfig": {
|
|
87
86
|
"access": "public"
|
|
88
87
|
},
|
|
89
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "77393ea2aca7dbafa11c646c3e7513616eef8442"
|
|
90
89
|
}
|