@lumx/react 2.2.12 → 2.2.15
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/Checkbox2.js +3 -1
- package/esm/_internal/Checkbox2.js.map +1 -1
- package/esm/_internal/CommentBlock.js +12 -5
- package/esm/_internal/CommentBlock.js.map +1 -1
- package/esm/_internal/RadioGroup.js +3 -1
- package/esm/_internal/RadioGroup.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/checkbox/Checkbox.tsx +4 -0
- 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/src/components/radio-button/RadioButton.tsx +4 -0
- package/src/stories/generated/Toolbar/Demos.stories.tsx +1 -0
- package/types.d.ts +7 -1
|
@@ -41,6 +41,7 @@ var Checkbox = forwardRef(function (props, ref) {
|
|
|
41
41
|
disabled = props.disabled,
|
|
42
42
|
helper = props.helper,
|
|
43
43
|
id = props.id,
|
|
44
|
+
inputRef = props.inputRef,
|
|
44
45
|
_props$isChecked = props.isChecked,
|
|
45
46
|
isChecked = _props$isChecked === void 0 ? checked : _props$isChecked,
|
|
46
47
|
_props$isDisabled = props.isDisabled,
|
|
@@ -52,7 +53,7 @@ var Checkbox = forwardRef(function (props, ref) {
|
|
|
52
53
|
value = props.value,
|
|
53
54
|
_props$inputProps = props.inputProps,
|
|
54
55
|
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
55
|
-
forwardedProps = _objectWithoutProperties(props, ["checked", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"]);
|
|
56
|
+
forwardedProps = _objectWithoutProperties(props, ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"]);
|
|
56
57
|
|
|
57
58
|
var inputId = useMemo(function () {
|
|
58
59
|
return id || "".concat(CLASSNAME.toLowerCase(), "-").concat(uid());
|
|
@@ -77,6 +78,7 @@ var Checkbox = forwardRef(function (props, ref) {
|
|
|
77
78
|
}), React.createElement("div", {
|
|
78
79
|
className: "".concat(CLASSNAME, "__input-wrapper")
|
|
79
80
|
}, React.createElement("input", _extends({
|
|
81
|
+
ref: inputRef,
|
|
80
82
|
type: "checkbox",
|
|
81
83
|
id: inputId,
|
|
82
84
|
className: "".concat(CLASSNAME, "__input-native"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox2.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport { mdiCheck } from '@lumx/icons';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps {\n /** Helper text. */\n helper?: string;\n /** Native input id property. */\n id?: string;\n /** Whether it is checked or not. */\n isChecked?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label text. */\n label?: ReactNode;\n /** Native input name property. */\n name?: string;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Native input value property. */\n value?: string;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Checkbox';\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<CheckboxProps> = {\n theme: Theme.light,\n};\n\n/**\n * Checkbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n checked,\n className,\n disabled,\n helper,\n id,\n isChecked = checked,\n isDisabled = disabled,\n label,\n name,\n onChange,\n theme,\n value,\n inputProps = {},\n ...forwardedProps\n } = props;\n const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isChecked,\n isDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n type=\"checkbox\"\n id={inputId}\n className={`${CLASSNAME}__input-native`}\n tabIndex={isDisabled ? -1 : 0}\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n {...inputProps}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n\n <div className={`${CLASSNAME}__input-indicator`}>\n <Icon icon={mdiCheck} />\n </div>\n </div>\n </div>\n\n <div className={`${CLASSNAME}__content`}>\n {label && (\n <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>\n {label}\n </InputLabel>\n )}\n {helper && (\n <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n </div>\n );\n});\nCheckbox.displayName = COMPONENT_NAME;\nCheckbox.className = CLASSNAME;\nCheckbox.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Checkbox","forwardRef","props","ref","checked","className","disabled","helper","id","isChecked","isDisabled","label","name","onChange","value","inputProps","forwardedProps","inputId","useMemo","toLowerCase","uid","handleChange","event","classNames","handleBasicClasses","isUnchecked","prefix","mdiCheck","displayName","defaultProps"],"mappings":";;;;;;;;;AAUA;;;;
|
|
1
|
+
{"version":3,"file":"Checkbox2.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport { mdiCheck } from '@lumx/icons';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps {\n /** Helper text. */\n helper?: string;\n /** Native input id property. */\n id?: string;\n /** Native input ref. */\n inputRef?: React.Ref<HTMLInputElement>;\n /** Whether it is checked or not. */\n isChecked?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label text. */\n label?: ReactNode;\n /** Native input name property. */\n name?: string;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Native input value property. */\n value?: string;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Checkbox';\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<CheckboxProps> = {\n theme: Theme.light,\n};\n\n/**\n * Checkbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n checked,\n className,\n disabled,\n helper,\n id,\n inputRef,\n isChecked = checked,\n isDisabled = disabled,\n label,\n name,\n onChange,\n theme,\n value,\n inputProps = {},\n ...forwardedProps\n } = props;\n const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isChecked,\n isDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n ref={inputRef}\n type=\"checkbox\"\n id={inputId}\n className={`${CLASSNAME}__input-native`}\n tabIndex={isDisabled ? -1 : 0}\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n {...inputProps}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n\n <div className={`${CLASSNAME}__input-indicator`}>\n <Icon icon={mdiCheck} />\n </div>\n </div>\n </div>\n\n <div className={`${CLASSNAME}__content`}>\n {label && (\n <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>\n {label}\n </InputLabel>\n )}\n {helper && (\n <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n </div>\n );\n});\nCheckbox.displayName = COMPONENT_NAME;\nCheckbox.className = CLASSNAME;\nCheckbox.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Checkbox","forwardRef","props","ref","checked","className","disabled","helper","id","inputRef","isChecked","isDisabled","label","name","onChange","value","inputProps","forwardedProps","inputId","useMemo","toLowerCase","uid","handleChange","event","classNames","handleBasicClasses","isUnchecked","prefix","mdiCheck","displayName","defaultProps"],"mappings":";;;;;;;;;AAUA;;;;AA4BA;;;AAGA,IAAMA,cAAc,GAAG,UAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAqC,GAAG;AAC1CC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAD6B,CAA9C;AAIA;;;;;;;;IAOaC,QAA6C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAEhFC,OAFgF,GAiBhFF,KAjBgF,CAEhFE,OAFgF;AAAA,MAGhFC,SAHgF,GAiBhFH,KAjBgF,CAGhFG,SAHgF;AAAA,MAIhFC,QAJgF,GAiBhFJ,KAjBgF,CAIhFI,QAJgF;AAAA,MAKhFC,MALgF,GAiBhFL,KAjBgF,CAKhFK,MALgF;AAAA,MAMhFC,EANgF,GAiBhFN,KAjBgF,CAMhFM,EANgF;AAAA,MAOhFC,QAPgF,GAiBhFP,KAjBgF,CAOhFO,QAPgF;AAAA,yBAiBhFP,KAjBgF,CAQhFQ,SARgF;AAAA,MAQhFA,SARgF,iCAQpEN,OARoE;AAAA,0BAiBhFF,KAjBgF,CAShFS,UATgF;AAAA,MAShFA,UATgF,kCASnEL,QATmE;AAAA,MAUhFM,KAVgF,GAiBhFV,KAjBgF,CAUhFU,KAVgF;AAAA,MAWhFC,IAXgF,GAiBhFX,KAjBgF,CAWhFW,IAXgF;AAAA,MAYhFC,QAZgF,GAiBhFZ,KAjBgF,CAYhFY,QAZgF;AAAA,MAahFjB,KAbgF,GAiBhFK,KAjBgF,CAahFL,KAbgF;AAAA,MAchFkB,KAdgF,GAiBhFb,KAjBgF,CAchFa,KAdgF;AAAA,0BAiBhFb,KAjBgF,CAehFc,UAfgF;AAAA,MAehFA,UAfgF,kCAenE,EAfmE;AAAA,MAgB7EC,cAhB6E,4BAiBhFf,KAjBgF;;AAkBpF,MAAMgB,OAAO,GAAGC,OAAO,CAAC;AAAA,WAAMX,EAAE,cAAOd,SAAS,CAAC0B,WAAV,EAAP,cAAkCC,GAAG,EAArC,CAAR;AAAA,GAAD,EAAoD,CAACb,EAAD,CAApD,CAAvB;;AAEA,MAAMc,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAgD;AACjE,QAAIT,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAAC,CAACJ,SAAF,EAAaK,KAAb,EAAoBF,IAApB,EAA0BU,KAA1B,CAAR;AACH;AACJ,GAJD;;AAMA,SACI;AACI,IAAA,GAAG,EAAEpB;AADT,KAEQc,cAFR;AAGI,IAAA,SAAS,EAAEO,UAAU,CACjBnB,SADiB,EAEjBoB,kBAAkB,CAAC;AACff,MAAAA,SAAS,EAATA,SADe;AAEfC,MAAAA,UAAU,EAAVA,UAFe;AAGfe,MAAAA,WAAW,EAAE,CAAChB,SAHC;AAIfiB,MAAAA,MAAM,EAAEjC,SAJO;AAKfG,MAAAA,KAAK,EAALA;AALe,KAAD,CAFD;AAHzB,MAcI;AAAK,IAAA,SAAS,YAAKH,SAAL;AAAd,KACI;AACI,IAAA,GAAG,EAAEe,QADT;AAEI,IAAA,IAAI,EAAC,UAFT;AAGI,IAAA,EAAE,EAAES,OAHR;AAII,IAAA,SAAS,YAAKxB,SAAL,mBAJb;AAKI,IAAA,QAAQ,EAAEiB,UAAU,GAAG,CAAC,CAAJ,GAAQ,CALhC;AAMI,IAAA,IAAI,EAAEE,IANV;AAOI,IAAA,KAAK,EAAEE,KAPX;AAQI,IAAA,OAAO,EAAEL,SARb;AASI,IAAA,QAAQ,EAAEY;AATd,KAUQN,UAVR,EADJ,EAcI;AAAK,IAAA,SAAS,YAAKtB,SAAL;AAAd,KACI;AAAK,IAAA,SAAS,YAAKA,SAAL;AAAd,IADJ,EAGI;AAAK,IAAA,SAAS,YAAKA,SAAL;AAAd,KACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEkC;AAAZ,IADJ,CAHJ,CAdJ,CAdJ,EAqCI;AAAK,IAAA,SAAS,YAAKlC,SAAL;AAAd,KACKkB,KAAK,IACF,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAEM,OAArB;AAA8B,IAAA,SAAS,YAAKxB,SAAL,YAAvC;AAAgE,IAAA,KAAK,EAAEG;AAAvE,KACKe,KADL,CAFR,EAMKL,MAAM,IACH,oBAAC,WAAD;AAAa,IAAA,SAAS,YAAKb,SAAL,aAAtB;AAAgD,IAAA,KAAK,EAAEG;AAAvD,KACKU,MADL,CAPR,CArCJ,CADJ;AAoDH,CA9EsE;AA+EvEP,QAAQ,CAAC6B,WAAT,GAAuBpC,cAAvB;AACAO,QAAQ,CAACK,SAAT,GAAqBX,SAArB;AACAM,QAAQ,CAAC8B,YAAT,GAAwBlC,aAAxB;;;;"}
|
|
@@ -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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"}
|
|
@@ -40,6 +40,7 @@ var RadioButton = forwardRef(function (props, ref) {
|
|
|
40
40
|
disabled = props.disabled,
|
|
41
41
|
helper = props.helper,
|
|
42
42
|
id = props.id,
|
|
43
|
+
inputRef = props.inputRef,
|
|
43
44
|
_props$isChecked = props.isChecked,
|
|
44
45
|
isChecked = _props$isChecked === void 0 ? checked : _props$isChecked,
|
|
45
46
|
_props$isDisabled = props.isDisabled,
|
|
@@ -49,7 +50,7 @@ var RadioButton = forwardRef(function (props, ref) {
|
|
|
49
50
|
onChange = props.onChange,
|
|
50
51
|
theme = props.theme,
|
|
51
52
|
value = props.value,
|
|
52
|
-
forwardedProps = _objectWithoutProperties(props, ["checked", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value"]);
|
|
53
|
+
forwardedProps = _objectWithoutProperties(props, ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value"]);
|
|
53
54
|
|
|
54
55
|
var radioButtonId = useMemo(function () {
|
|
55
56
|
return id || "".concat(CLASSNAME.toLowerCase(), "-").concat(uid());
|
|
@@ -74,6 +75,7 @@ var RadioButton = forwardRef(function (props, ref) {
|
|
|
74
75
|
}), React.createElement("div", {
|
|
75
76
|
className: "".concat(CLASSNAME, "__input-wrapper")
|
|
76
77
|
}, React.createElement("input", {
|
|
78
|
+
ref: inputRef,
|
|
77
79
|
className: "".concat(CLASSNAME, "__input-native"),
|
|
78
80
|
disabled: isDisabled,
|
|
79
81
|
id: radioButtonId,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-button/RadioButton.tsx","../../../src/components/radio-button/RadioGroup.tsx"],"sourcesContent":["import React, { useMemo, forwardRef, ReactNode, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport { InputHelper, InputLabel, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface RadioButtonProps extends GenericProps {\n /** Helper text. */\n helper?: string;\n /** Native input id property. */\n id?: string;\n /** Whether it is checked or not. */\n isChecked?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label content. */\n label?: ReactNode;\n /** Native input name property. */\n name?: string;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Native input value property. */\n value?: string;\n /** On change callback. */\n onChange?(value?: string, name?: string, event?: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'RadioButton';\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<RadioButtonProps> = {\n theme: Theme.light,\n};\n\n/**\n * RadioButton component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n checked,\n className,\n disabled,\n helper,\n id,\n isChecked = checked,\n isDisabled = disabled,\n label,\n name,\n onChange,\n theme,\n value,\n ...forwardedProps\n } = props;\n const radioButtonId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(value, name, event);\n }\n };\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isChecked,\n isDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n className={`${CLASSNAME}__input-native`}\n disabled={isDisabled}\n id={radioButtonId}\n tabIndex={isDisabled ? -1 : 0}\n type=\"radio\"\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n <div className={`${CLASSNAME}__input-indicator`} />\n </div>\n </div>\n\n <div className={`${CLASSNAME}__content`}>\n {label && (\n <InputLabel htmlFor={radioButtonId} theme={theme} className={`${CLASSNAME}__label`}>\n {label}\n </InputLabel>\n )}\n {helper && (\n <InputHelper theme={theme} className={`${CLASSNAME}__helper`}>\n {helper}\n </InputHelper>\n )}\n </div>\n </div>\n );\n});\nRadioButton.displayName = COMPONENT_NAME;\nRadioButton.className = CLASSNAME;\nRadioButton.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface RadioGroupProps extends GenericProps {\n /** RadioButton elements */\n children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'RadioGroup';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * RadioGroup component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const RadioGroup: Comp<RadioGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n }),\n )}\n >\n {children}\n </div>\n );\n});\nRadioGroup.displayName = COMPONENT_NAME;\nRadioGroup.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","RadioButton","forwardRef","props","ref","checked","className","disabled","helper","id","isChecked","isDisabled","label","name","onChange","value","forwardedProps","radioButtonId","useMemo","toLowerCase","uid","handleChange","event","classNames","handleBasicClasses","isUnchecked","prefix","displayName","defaultProps","RadioGroup","children"],"mappings":";;;;;;;;AASA;;;;
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radio-button/RadioButton.tsx","../../../src/components/radio-button/RadioGroup.tsx"],"sourcesContent":["import React, { useMemo, forwardRef, ReactNode, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport { InputHelper, InputLabel, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface RadioButtonProps extends GenericProps {\n /** Helper text. */\n helper?: string;\n /** Native input id property. */\n id?: string;\n /** Native input ref. */\n inputRef?: React.Ref<HTMLInputElement>;\n /** Whether it is checked or not. */\n isChecked?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label content. */\n label?: ReactNode;\n /** Native input name property. */\n name?: string;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Native input value property. */\n value?: string;\n /** On change callback. */\n onChange?(value?: string, name?: string, event?: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'RadioButton';\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<RadioButtonProps> = {\n theme: Theme.light,\n};\n\n/**\n * RadioButton component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n checked,\n className,\n disabled,\n helper,\n id,\n inputRef,\n isChecked = checked,\n isDisabled = disabled,\n label,\n name,\n onChange,\n theme,\n value,\n ...forwardedProps\n } = props;\n const radioButtonId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(value, name, event);\n }\n };\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isChecked,\n isDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n ref={inputRef}\n className={`${CLASSNAME}__input-native`}\n disabled={isDisabled}\n id={radioButtonId}\n tabIndex={isDisabled ? -1 : 0}\n type=\"radio\"\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n <div className={`${CLASSNAME}__input-indicator`} />\n </div>\n </div>\n\n <div className={`${CLASSNAME}__content`}>\n {label && (\n <InputLabel htmlFor={radioButtonId} theme={theme} className={`${CLASSNAME}__label`}>\n {label}\n </InputLabel>\n )}\n {helper && (\n <InputHelper theme={theme} className={`${CLASSNAME}__helper`}>\n {helper}\n </InputHelper>\n )}\n </div>\n </div>\n );\n});\nRadioButton.displayName = COMPONENT_NAME;\nRadioButton.className = CLASSNAME;\nRadioButton.defaultProps = DEFAULT_PROPS;\n","import React, { forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface RadioGroupProps extends GenericProps {\n /** RadioButton elements */\n children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'RadioGroup';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * RadioGroup component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const RadioGroup: Comp<RadioGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n }),\n )}\n >\n {children}\n </div>\n );\n});\nRadioGroup.displayName = COMPONENT_NAME;\nRadioGroup.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","RadioButton","forwardRef","props","ref","checked","className","disabled","helper","id","inputRef","isChecked","isDisabled","label","name","onChange","value","forwardedProps","radioButtonId","useMemo","toLowerCase","uid","handleChange","event","classNames","handleBasicClasses","isUnchecked","prefix","displayName","defaultProps","RadioGroup","children"],"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.15",
|
|
11
|
+
"@lumx/icons": "^2.2.15",
|
|
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.15",
|
|
124
|
+
"gitHead": "985be86008a58fb87ebd36c5cee48b43268ebc10"
|
|
125
125
|
}
|
|
@@ -16,6 +16,8 @@ export interface CheckboxProps extends GenericProps {
|
|
|
16
16
|
helper?: string;
|
|
17
17
|
/** Native input id property. */
|
|
18
18
|
id?: string;
|
|
19
|
+
/** Native input ref. */
|
|
20
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
19
21
|
/** Whether it is checked or not. */
|
|
20
22
|
isChecked?: boolean;
|
|
21
23
|
/** Whether the component is disabled or not. */
|
|
@@ -65,6 +67,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
|
|
|
65
67
|
disabled,
|
|
66
68
|
helper,
|
|
67
69
|
id,
|
|
70
|
+
inputRef,
|
|
68
71
|
isChecked = checked,
|
|
69
72
|
isDisabled = disabled,
|
|
70
73
|
label,
|
|
@@ -100,6 +103,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
|
|
|
100
103
|
>
|
|
101
104
|
<div className={`${CLASSNAME}__input-wrapper`}>
|
|
102
105
|
<input
|
|
106
|
+
ref={inputRef}
|
|
103
107
|
type="checkbox"
|
|
104
108
|
id={inputId}
|
|
105
109
|
className={`${CLASSNAME}__input-native`}
|
|
@@ -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"
|
|
@@ -15,6 +15,8 @@ export interface RadioButtonProps extends GenericProps {
|
|
|
15
15
|
helper?: string;
|
|
16
16
|
/** Native input id property. */
|
|
17
17
|
id?: string;
|
|
18
|
+
/** Native input ref. */
|
|
19
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
18
20
|
/** Whether it is checked or not. */
|
|
19
21
|
isChecked?: boolean;
|
|
20
22
|
/** Whether the component is disabled or not. */
|
|
@@ -62,6 +64,7 @@ export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((p
|
|
|
62
64
|
disabled,
|
|
63
65
|
helper,
|
|
64
66
|
id,
|
|
67
|
+
inputRef,
|
|
65
68
|
isChecked = checked,
|
|
66
69
|
isDisabled = disabled,
|
|
67
70
|
label,
|
|
@@ -96,6 +99,7 @@ export const RadioButton: Comp<RadioButtonProps, HTMLDivElement> = forwardRef((p
|
|
|
96
99
|
>
|
|
97
100
|
<div className={`${CLASSNAME}__input-wrapper`}>
|
|
98
101
|
<input
|
|
102
|
+
ref={inputRef}
|
|
99
103
|
className={`${CLASSNAME}__input-native`}
|
|
100
104
|
disabled={isDisabled}
|
|
101
105
|
id={radioButtonId}
|
|
@@ -6,4 +6,5 @@ export default { title: 'LumX components/toolbar/Toolbar Demos' };
|
|
|
6
6
|
export { App as Back } from './back';
|
|
7
7
|
export { App as Default } from './default';
|
|
8
8
|
export { App as Dialog } from './dialog';
|
|
9
|
+
export { App as FileWidget } from './file-widget';
|
|
9
10
|
export { App as MediaPicker } from './media-picker';
|
package/types.d.ts
CHANGED
|
@@ -585,6 +585,8 @@ export interface CheckboxProps extends GenericProps {
|
|
|
585
585
|
helper?: string;
|
|
586
586
|
/** Native input id property. */
|
|
587
587
|
id?: string;
|
|
588
|
+
/** Native input ref. */
|
|
589
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
588
590
|
/** Whether it is checked or not. */
|
|
589
591
|
isChecked?: boolean;
|
|
590
592
|
/** Whether the component is disabled or not. */
|
|
@@ -688,8 +690,10 @@ export interface CommentBlockProps extends GenericProps {
|
|
|
688
690
|
avatarProps: AvatarProps;
|
|
689
691
|
/** Comment block replies. */
|
|
690
692
|
children?: ReactNode;
|
|
691
|
-
/** Comment date
|
|
693
|
+
/** Comment date with the minimal timestamp informations (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/
|
|
692
694
|
date: string;
|
|
695
|
+
/** Comment date with the full timestamp informations (day, month, year, time) */
|
|
696
|
+
fullDate?: string;
|
|
693
697
|
/** Whether the component has actions to display or not. */
|
|
694
698
|
hasActions?: boolean;
|
|
695
699
|
/** Action toolbar header content. */
|
|
@@ -1794,6 +1798,8 @@ export interface RadioButtonProps extends GenericProps {
|
|
|
1794
1798
|
helper?: string;
|
|
1795
1799
|
/** Native input id property. */
|
|
1796
1800
|
id?: string;
|
|
1801
|
+
/** Native input ref. */
|
|
1802
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
1797
1803
|
/** Whether it is checked or not. */
|
|
1798
1804
|
isChecked?: boolean;
|
|
1799
1805
|
/** Whether the component is disabled or not. */
|