@lumx/react 2.2.12 → 2.2.13
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/esm/_internal/CommentBlock.js +12 -5
- package/esm/_internal/CommentBlock.js.map +1 -1
- package/esm/_internal/comment-block.js +8 -0
- package/esm/_internal/comment-block.js.map +1 -1
- package/package.json +4 -4
- package/src/components/comment-block/CommentBlock.stories.tsx +7 -4
- package/src/components/comment-block/CommentBlock.tsx +13 -3
- package/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap +10 -5
- package/types.d.ts +3 -1
|
@@ -4,6 +4,7 @@ import React, { forwardRef, Children } from 'react';
|
|
|
4
4
|
import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
|
|
5
5
|
import { A as Avatar } from './Avatar2.js';
|
|
6
6
|
import isFunction from 'lodash/isFunction';
|
|
7
|
+
import { T as Tooltip } from './Tooltip2.js';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* Comment block variants.
|
|
@@ -44,6 +45,7 @@ var CommentBlock = forwardRef(function (props, ref) {
|
|
|
44
45
|
children = props.children,
|
|
45
46
|
className = props.className,
|
|
46
47
|
date = props.date,
|
|
48
|
+
fullDate = props.fullDate,
|
|
47
49
|
hasActions = props.hasActions,
|
|
48
50
|
headerActions = props.headerActions,
|
|
49
51
|
isOpen = props.isOpen,
|
|
@@ -55,7 +57,7 @@ var CommentBlock = forwardRef(function (props, ref) {
|
|
|
55
57
|
text = props.text,
|
|
56
58
|
theme = props.theme,
|
|
57
59
|
variant = props.variant,
|
|
58
|
-
forwardedProps = _objectWithoutProperties(props, ["actions", "avatarProps", "children", "className", "date", "hasActions", "headerActions", "isOpen", "isRelevant", "name", "onClick", "onMouseEnter", "onMouseLeave", "text", "theme", "variant"]);
|
|
60
|
+
forwardedProps = _objectWithoutProperties(props, ["actions", "avatarProps", "children", "className", "date", "fullDate", "hasActions", "headerActions", "isOpen", "isRelevant", "name", "onClick", "onMouseEnter", "onMouseLeave", "text", "theme", "variant"]);
|
|
59
61
|
|
|
60
62
|
var enterKeyPress = function enterKeyPress(evt) {
|
|
61
63
|
if (evt.key === 'Enter' && isFunction(onClick)) {
|
|
@@ -97,13 +99,18 @@ var CommentBlock = forwardRef(function (props, ref) {
|
|
|
97
99
|
onMouseLeave: onMouseLeave,
|
|
98
100
|
role: "button",
|
|
99
101
|
tabIndex: onClick ? 0 : -1
|
|
100
|
-
}, name),
|
|
101
|
-
className: "".concat(CLASSNAME, "__date")
|
|
102
|
-
}, date), headerActions && React.createElement("span", {
|
|
102
|
+
}, name), headerActions && React.createElement("span", {
|
|
103
103
|
className: "".concat(CLASSNAME, "__header-actions")
|
|
104
104
|
}, headerActions)), React.createElement("div", {
|
|
105
105
|
className: "".concat(CLASSNAME, "__text")
|
|
106
|
-
}, text)
|
|
106
|
+
}, text), date && (fullDate ? React.createElement(Tooltip, {
|
|
107
|
+
label: fullDate,
|
|
108
|
+
placement: "top"
|
|
109
|
+
}, React.createElement("span", {
|
|
110
|
+
className: "".concat(CLASSNAME, "__date")
|
|
111
|
+
}, date)) : React.createElement("span", {
|
|
112
|
+
className: "".concat(CLASSNAME, "__date")
|
|
113
|
+
}, date))), hasActions && React.createElement("div", {
|
|
107
114
|
className: "".concat(CLASSNAME, "__actions")
|
|
108
115
|
}, actions))), hasChildren && isOpen && React.createElement("div", {
|
|
109
116
|
className: "".concat(CLASSNAME, "__children")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommentBlock.js","sources":["../../../src/components/comment-block/CommentBlock.tsx"],"sourcesContent":["import React, { Children, forwardRef, KeyboardEvent, KeyboardEventHandler, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Avatar, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';\n\nimport isFunction from 'lodash/isFunction';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * Comment block variants.\n */\nexport const CommentBlockVariant = {\n indented: 'indented',\n linear: 'linear',\n} as const;\nexport type CommentBlockVariant = ValueOf<typeof CommentBlockVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface CommentBlockProps extends GenericProps {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Props to pass to the avatar. */\n avatarProps: AvatarProps;\n /** Comment block replies. */\n children?: ReactNode;\n /** Comment date
|
|
1
|
+
{"version":3,"file":"CommentBlock.js","sources":["../../../src/components/comment-block/CommentBlock.tsx"],"sourcesContent":["import React, { Children, forwardRef, KeyboardEvent, KeyboardEventHandler, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Avatar, Size, Theme, Tooltip } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';\n\nimport isFunction from 'lodash/isFunction';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * Comment block variants.\n */\nexport const CommentBlockVariant = {\n indented: 'indented',\n linear: 'linear',\n} as const;\nexport type CommentBlockVariant = ValueOf<typeof CommentBlockVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface CommentBlockProps extends GenericProps {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Props to pass to the avatar. */\n avatarProps: AvatarProps;\n /** Comment block replies. */\n children?: ReactNode;\n /** Comment date with the minimal timestamp informations (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/\n date: string;\n /** Comment date with the full timestamp informations (day, month, year, time) */\n fullDate?: string;\n /** Whether the component has actions to display or not. */\n hasActions?: boolean;\n /** Action toolbar header content. */\n headerActions?: ReactNode;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Whether the comment is relevant or not. */\n isRelevant?: boolean;\n /** Comment author name. */\n name: string;\n /** On click callback. */\n onClick?(): void;\n /** On mouse enter callback. */\n onMouseEnter?(): void;\n /** On mouse leave callback. */\n onMouseLeave?(): void;\n /** Comment content. */\n text: ReactNode | string;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Comment variant. */\n variant?: CommentBlockVariant;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'CommentBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<CommentBlockProps> = {\n theme: Theme.light,\n variant: CommentBlockVariant.indented,\n};\n\n/**\n * CommentBlock component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n actions,\n avatarProps,\n children,\n className,\n date,\n fullDate,\n hasActions,\n headerActions,\n isOpen,\n isRelevant,\n name,\n onClick,\n onMouseEnter,\n onMouseLeave,\n text,\n theme,\n variant,\n ...forwardedProps\n } = props;\n const enterKeyPress: KeyboardEventHandler<HTMLElement> = (evt: KeyboardEvent<HTMLElement>) => {\n if (evt.key === 'Enter' && isFunction(onClick)) {\n onClick();\n }\n };\n const hasChildren = Children.count(children) > 0;\n\n return (\n <div\n ref={ref}\n className={classNames(\n className,\n handleBasicClasses({\n hasChildren: hasChildren && isOpen,\n hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,\n hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,\n isRelevant,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n {...forwardedProps}\n >\n <div className={`${CLASSNAME}__wrapper`}>\n <div className={`${CLASSNAME}__avatar`}>\n <Avatar\n {...avatarProps}\n size={Size.m}\n tabIndex={onClick ? 0 : -1}\n onClick={onClick}\n onKeyPress={enterKeyPress}\n />\n </div>\n\n <div className={`${CLASSNAME}__container`}>\n <div className={`${CLASSNAME}__content`}>\n <div className={`${CLASSNAME}__meta`}>\n <span\n className={`${CLASSNAME}__name`}\n onClick={onClick}\n onKeyPress={enterKeyPress}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n role=\"button\"\n tabIndex={onClick ? 0 : -1}\n >\n {name}\n </span>\n {headerActions && <span className={`${CLASSNAME}__header-actions`}>{headerActions}</span>}\n </div>\n\n <div className={`${CLASSNAME}__text`}>{text}</div>\n {date &&\n (fullDate ? (\n <Tooltip label={fullDate} placement=\"top\">\n <span className={`${CLASSNAME}__date`}>{date}</span>\n </Tooltip>\n ) : (\n <span className={`${CLASSNAME}__date`}>{date}</span>\n ))}\n </div>\n {hasActions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n </div>\n </div>\n\n {hasChildren && isOpen && <div className={`${CLASSNAME}__children`}>{children}</div>}\n </div>\n );\n});\nCommentBlock.displayName = COMPONENT_NAME;\nCommentBlock.className = CLASSNAME;\nCommentBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["CommentBlockVariant","indented","linear","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","variant","CommentBlock","forwardRef","props","ref","actions","avatarProps","children","className","date","fullDate","hasActions","headerActions","isOpen","isRelevant","name","onClick","onMouseEnter","onMouseLeave","text","forwardedProps","enterKeyPress","evt","key","isFunction","hasChildren","Children","count","classNames","handleBasicClasses","hasIndentedChildren","hasLinearChildren","prefix","Size","m","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -3,13 +3,21 @@ import './components.js';
|
|
|
3
3
|
import 'react';
|
|
4
4
|
import './getRootClassName.js';
|
|
5
5
|
import './Icon2.js';
|
|
6
|
+
import '../index2.js';
|
|
6
7
|
import 'lodash/isBoolean';
|
|
7
8
|
import 'lodash/isEmpty';
|
|
8
9
|
import 'lodash/kebabCase';
|
|
9
10
|
import 'lodash/noop';
|
|
11
|
+
import './constants.js';
|
|
12
|
+
import 'lodash/get';
|
|
13
|
+
import './Popover2.js';
|
|
10
14
|
import './mergeRefs.js';
|
|
11
15
|
import './Avatar2.js';
|
|
12
16
|
import 'lodash/isFunction';
|
|
13
17
|
export { a as CommentBlock, C as CommentBlockVariant } from './CommentBlock.js';
|
|
18
|
+
import 'react-dom';
|
|
19
|
+
import './ClickAwayProvider.js';
|
|
20
|
+
import 'lodash/pull';
|
|
14
21
|
import './Thumbnail2.js';
|
|
22
|
+
import './Tooltip2.js';
|
|
15
23
|
//# sourceMappingURL=comment-block.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"comment-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"comment-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"@juggle/resize-observer": "^3.2.0",
|
|
10
|
-
"@lumx/core": "^2.2.
|
|
11
|
-
"@lumx/icons": "^2.2.
|
|
10
|
+
"@lumx/core": "^2.2.13",
|
|
11
|
+
"@lumx/icons": "^2.2.13",
|
|
12
12
|
"@popperjs/core": "^2.5.4",
|
|
13
13
|
"body-scroll-lock": "^3.1.5",
|
|
14
14
|
"classnames": "^2.2.6",
|
|
@@ -120,6 +120,6 @@
|
|
|
120
120
|
"build:storybook": "cd storybook && ./build"
|
|
121
121
|
},
|
|
122
122
|
"sideEffects": false,
|
|
123
|
-
"version": "2.2.
|
|
124
|
-
"gitHead": "
|
|
123
|
+
"version": "2.2.13",
|
|
124
|
+
"gitHead": "63c7d55406244c2946236cd614a6e269eedf5f64"
|
|
125
125
|
}
|
|
@@ -10,18 +10,21 @@ export const WithHeaderActions = ({ theme }: any) => (
|
|
|
10
10
|
<CommentBlock
|
|
11
11
|
hasActions
|
|
12
12
|
actions={[
|
|
13
|
-
<Button key="button0" emphasis={Emphasis.low} size={Size.s} leftIcon={mdiHeart}>
|
|
13
|
+
<Button key="button0" theme={theme} emphasis={Emphasis.low} size={Size.s} leftIcon={mdiHeart}>
|
|
14
14
|
24 likes
|
|
15
15
|
</Button>,
|
|
16
|
-
<Button key="button1" emphasis={Emphasis.low} size={Size.s} leftIcon={mdiReply}>
|
|
16
|
+
<Button key="button1" theme={theme} emphasis={Emphasis.low} size={Size.s} leftIcon={mdiReply}>
|
|
17
17
|
Reply
|
|
18
18
|
</Button>,
|
|
19
19
|
]}
|
|
20
20
|
theme={theme}
|
|
21
21
|
avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
|
|
22
|
-
date="
|
|
22
|
+
date="5 days"
|
|
23
|
+
fullDate="Monday, March 30, 2021 at 4:06 PM"
|
|
23
24
|
name="Emmitt O. Lum"
|
|
24
25
|
text="All the rumors have finally died down and many skeptics have tightened their lips, the iPod does support video format now on its fifth generation."
|
|
25
|
-
headerActions={
|
|
26
|
+
headerActions={
|
|
27
|
+
<IconButton label="Actions" icon={mdiDotsHorizontal} theme={theme} emphasis={Emphasis.low} size={Size.s} />
|
|
28
|
+
}
|
|
26
29
|
/>
|
|
27
30
|
);
|
|
@@ -2,7 +2,7 @@ import React, { Children, forwardRef, KeyboardEvent, KeyboardEventHandler, React
|
|
|
2
2
|
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
|
|
5
|
-
import { Avatar, Size, Theme } from '@lumx/react';
|
|
5
|
+
import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
|
|
6
6
|
import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
|
|
7
7
|
|
|
8
8
|
import isFunction from 'lodash/isFunction';
|
|
@@ -27,8 +27,10 @@ export interface CommentBlockProps extends GenericProps {
|
|
|
27
27
|
avatarProps: AvatarProps;
|
|
28
28
|
/** Comment block replies. */
|
|
29
29
|
children?: ReactNode;
|
|
30
|
-
/** Comment date
|
|
30
|
+
/** Comment date with the minimal timestamp informations (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/
|
|
31
31
|
date: string;
|
|
32
|
+
/** Comment date with the full timestamp informations (day, month, year, time) */
|
|
33
|
+
fullDate?: string;
|
|
32
34
|
/** Whether the component has actions to display or not. */
|
|
33
35
|
hasActions?: boolean;
|
|
34
36
|
/** Action toolbar header content. */
|
|
@@ -85,6 +87,7 @@ export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef(
|
|
|
85
87
|
children,
|
|
86
88
|
className,
|
|
87
89
|
date,
|
|
90
|
+
fullDate,
|
|
88
91
|
hasActions,
|
|
89
92
|
headerActions,
|
|
90
93
|
isOpen,
|
|
@@ -146,11 +149,18 @@ export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef(
|
|
|
146
149
|
>
|
|
147
150
|
{name}
|
|
148
151
|
</span>
|
|
149
|
-
{date && <span className={`${CLASSNAME}__date`}>{date}</span>}
|
|
150
152
|
{headerActions && <span className={`${CLASSNAME}__header-actions`}>{headerActions}</span>}
|
|
151
153
|
</div>
|
|
152
154
|
|
|
153
155
|
<div className={`${CLASSNAME}__text`}>{text}</div>
|
|
156
|
+
{date &&
|
|
157
|
+
(fullDate ? (
|
|
158
|
+
<Tooltip label={fullDate} placement="top">
|
|
159
|
+
<span className={`${CLASSNAME}__date`}>{date}</span>
|
|
160
|
+
</Tooltip>
|
|
161
|
+
) : (
|
|
162
|
+
<span className={`${CLASSNAME}__date`}>{date}</span>
|
|
163
|
+
))}
|
|
154
164
|
</div>
|
|
155
165
|
{hasActions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
|
|
156
166
|
</div>
|
|
@@ -36,11 +36,6 @@ exports[`<CommentBlock> Snapshots and structure should render story 'WithHeaderA
|
|
|
36
36
|
>
|
|
37
37
|
Emmitt O. Lum
|
|
38
38
|
</span>
|
|
39
|
-
<span
|
|
40
|
-
className="lumx-comment-block__date"
|
|
41
|
-
>
|
|
42
|
-
4 hours ago
|
|
43
|
-
</span>
|
|
44
39
|
<span
|
|
45
40
|
className="lumx-comment-block__header-actions"
|
|
46
41
|
>
|
|
@@ -58,6 +53,16 @@ exports[`<CommentBlock> Snapshots and structure should render story 'WithHeaderA
|
|
|
58
53
|
>
|
|
59
54
|
All the rumors have finally died down and many skeptics have tightened their lips, the iPod does support video format now on its fifth generation.
|
|
60
55
|
</div>
|
|
56
|
+
<Tooltip
|
|
57
|
+
label="Monday, March 30, 2021 at 4:06 PM"
|
|
58
|
+
placement="top"
|
|
59
|
+
>
|
|
60
|
+
<span
|
|
61
|
+
className="lumx-comment-block__date"
|
|
62
|
+
>
|
|
63
|
+
5 days
|
|
64
|
+
</span>
|
|
65
|
+
</Tooltip>
|
|
61
66
|
</div>
|
|
62
67
|
<div
|
|
63
68
|
className="lumx-comment-block__actions"
|
package/types.d.ts
CHANGED
|
@@ -688,8 +688,10 @@ export interface CommentBlockProps extends GenericProps {
|
|
|
688
688
|
avatarProps: AvatarProps;
|
|
689
689
|
/** Comment block replies. */
|
|
690
690
|
children?: ReactNode;
|
|
691
|
-
/** Comment date
|
|
691
|
+
/** Comment date with the minimal timestamp informations (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/
|
|
692
692
|
date: string;
|
|
693
|
+
/** Comment date with the full timestamp informations (day, month, year, time) */
|
|
694
|
+
fullDate?: string;
|
|
693
695
|
/** Whether the component has actions to display or not. */
|
|
694
696
|
hasActions?: boolean;
|
|
695
697
|
/** Action toolbar header content. */
|