@coorpacademy/components 11.12.5-alpha.0 → 11.12.6
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/es/atom/battle-opponent/index.d.ts.map +1 -1
- package/es/atom/battle-opponent/index.js +4 -2
- package/es/atom/battle-opponent/index.js.map +1 -1
- package/es/atom/battle-opponent/style.css +12 -0
- package/es/atom/button/index.d.ts +14 -3
- package/es/atom/button/index.d.ts.map +1 -1
- package/es/atom/button/index.js +60 -27
- package/es/atom/button/index.js.map +1 -1
- package/es/atom/drag-and-drop/index.d.ts.map +1 -1
- package/es/atom/drag-and-drop/index.js +29 -17
- package/es/atom/drag-and-drop/index.js.map +1 -1
- package/es/atom/drag-and-drop/style.css +4 -3
- package/es/atom/image-upload/index.js +1 -1
- package/es/atom/image-upload/index.js.map +1 -1
- package/es/atom/tooltip/index.d.ts.map +1 -1
- package/es/atom/tooltip/index.js +2 -1
- package/es/atom/tooltip/index.js.map +1 -1
- package/es/molecule/brand-form-group/index.d.ts +14 -3
- package/es/molecule/brand-form-group/style.css +11 -7
- package/es/molecule/card/customer.js +1 -1
- package/es/molecule/card/customer.js.map +1 -1
- package/es/molecule/card/favorite.css +15 -35
- package/es/molecule/card/favorite.d.ts +1 -0
- package/es/molecule/card/favorite.d.ts.map +1 -1
- package/es/molecule/card/favorite.js +73 -18
- package/es/molecule/card/favorite.js.map +1 -1
- package/es/molecule/card/selectable.js +1 -1
- package/es/molecule/card/selectable.js.map +1 -1
- package/es/molecule/drag-and-drop-wrapper/style.css +1 -1
- package/es/organism/brand-form/index.d.ts +14 -3
- package/es/organism/wizard-contents/index.d.ts +14 -3
- package/es/template/back-office/brand-update/index.d.ts +28 -6
- package/es/template/common/search-page/index.d.ts +14 -3
- package/lib/atom/battle-opponent/index.d.ts.map +1 -1
- package/lib/atom/battle-opponent/index.js +4 -2
- package/lib/atom/battle-opponent/index.js.map +1 -1
- package/lib/atom/battle-opponent/style.css +12 -0
- package/lib/atom/button/index.d.ts +14 -3
- package/lib/atom/button/index.d.ts.map +1 -1
- package/lib/atom/button/index.js +65 -27
- package/lib/atom/button/index.js.map +1 -1
- package/lib/atom/drag-and-drop/index.d.ts.map +1 -1
- package/lib/atom/drag-and-drop/index.js +29 -17
- package/lib/atom/drag-and-drop/index.js.map +1 -1
- package/lib/atom/drag-and-drop/style.css +4 -3
- package/lib/atom/image-upload/index.js +1 -1
- package/lib/atom/image-upload/index.js.map +1 -1
- package/lib/atom/tooltip/index.d.ts.map +1 -1
- package/lib/atom/tooltip/index.js +2 -1
- package/lib/atom/tooltip/index.js.map +1 -1
- package/lib/molecule/brand-form-group/index.d.ts +14 -3
- package/lib/molecule/brand-form-group/style.css +11 -7
- package/lib/molecule/card/customer.js +1 -1
- package/lib/molecule/card/customer.js.map +1 -1
- package/lib/molecule/card/favorite.css +15 -35
- package/lib/molecule/card/favorite.d.ts +1 -0
- package/lib/molecule/card/favorite.d.ts.map +1 -1
- package/lib/molecule/card/favorite.js +75 -16
- package/lib/molecule/card/favorite.js.map +1 -1
- package/lib/molecule/card/selectable.js +1 -1
- package/lib/molecule/card/selectable.js.map +1 -1
- package/lib/molecule/drag-and-drop-wrapper/style.css +1 -1
- package/lib/organism/brand-form/index.d.ts +14 -3
- package/lib/organism/wizard-contents/index.d.ts +14 -3
- package/lib/template/back-office/brand-update/index.d.ts +28 -6
- package/lib/template/common/search-page/index.d.ts +14 -3
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;gHASf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;gHASf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;;CA2GhC,CAAC;AAQF,eAAe,cAAc,CAAC"}
|
|
@@ -83,13 +83,15 @@ const BattleOpponent = ({
|
|
|
83
83
|
className: style.informationIcon,
|
|
84
84
|
width: 20,
|
|
85
85
|
height: 20
|
|
86
|
-
})), /*#__PURE__*/React.createElement(
|
|
86
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
87
|
+
className: style.toolTipWrapper
|
|
88
|
+
}, /*#__PURE__*/React.createElement(ToolTip, {
|
|
87
89
|
fontSize: 12,
|
|
88
90
|
anchorId: battleOpponentInfoId,
|
|
89
91
|
toolTipIsVisible: toolTipIsVisible,
|
|
90
92
|
TooltipContent: TooltipContent,
|
|
91
93
|
closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text')
|
|
92
|
-
})) : /*#__PURE__*/React.createElement(ArrowRight, {
|
|
94
|
+
}))) : /*#__PURE__*/React.createElement(ArrowRight, {
|
|
93
95
|
className: style.rightArrow,
|
|
94
96
|
width: 16,
|
|
95
97
|
height: 16
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","useRef","classnames","v5","uuidV5","has","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionCoorpacademyInformationIcon","InformationIcon","ToolTip","toggleStateOnKeyPress","Provider","GetTranslateFromContext","propTypes","style","BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","ariaLabel","legacyContext","translate","wrapperClassnames","card","random","displayNameClassnames","name","alreadyEngaged","mouseLeaveTimer","setMouseLeaveTimer","undefined","toolTipIsVisible","setToolTipIsVisible","battleOpponentInfoId","URL","buttonRef","handleMouseOver","clearTimeout","current","focus","handleMouseLeave","setTimeout","blur","handleKeyPress","event","TooltipContent","_props","avatar","tooltipIconContainer","informationIcon","rightArrow","contextTypes","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState, useRef} from 'react';\nimport classnames from 'classnames';\nimport {v5 as uuidV5} from 'uuid';\nimport has from 'lodash/fp/has';\nimport {\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionCoorpacademyInformationIcon as InformationIcon\n} from '@coorpacademy/nova-icons';\nimport ToolTip, {toggleStateOnKeyPress} from '../tooltip';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport propTypes, {BattleOpponentProps} from './prop-types';\nimport style from './style.css';\n\nconst BattleOpponent = (\n {\n isAlreadyEngaged,\n isRandom,\n userAvatarSrc,\n onClick,\n displayName,\n tooltipText,\n 'aria-label': ariaLabel\n }: BattleOpponentProps,\n legacyContext: WebContextValues\n) => {\n const translate: Required<WebContextValues>['translate'] = GetTranslateFromContext(legacyContext);\n const wrapperClassnames = useMemo(\n () => classnames(style.card, style['opponent-card'], isRandom ? style.random : null),\n [isRandom]\n );\n\n const displayNameClassnames = useMemo(\n () => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null),\n [isAlreadyEngaged]\n );\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState<number | undefined>(undefined);\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n // to be replaced by useId when React17 is bumped to React18\n const [battleOpponentInfoId] = useState(\n isAlreadyEngaged ? uuidV5('engaged-battle-', uuidV5.URL) : undefined\n );\n\n const buttonRef = useRef(null);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n // @ts-expect-error (error: focus does not exists on type never)\n /* istanbul ignore next */ has(['current', 'focus'], buttonRef) && buttonRef.current.focus();\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(\n setTimeout(() => {\n setToolTipIsVisible(false);\n // @ts-expect-error (error: blur does not exists on type never)\n /* istanbul ignore next */ has(['current', 'blur'], buttonRef) && buttonRef.current.blur();\n }, 500) as unknown as number\n );\n }, []);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);\n },\n [toolTipIsVisible]\n );\n\n const TooltipContent = useCallback(\n _props => (\n <p\n {..._props}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n data-testid=\"battle-opponent-tooltip-content\"\n >\n {tooltipText}\n </p>\n ),\n [handleMouseLeave, handleMouseOver, tooltipText]\n );\n\n return (\n <li\n {...(!isAlreadyEngaged && {onClick})}\n className={wrapperClassnames}\n data-testid=\"battle-opponent-wrapper\"\n tabIndex={0}\n >\n <div className={style.avatar}>{isRandom ? null : <img src={userAvatarSrc} alt=\"\" />}</div>\n <p className={displayNameClassnames} tabIndex={0}>\n {displayName}\n </p>\n {isAlreadyEngaged ? (\n <>\n <button\n ref={buttonRef}\n tabIndex={0}\n type=\"button\"\n className={style.tooltipIconContainer}\n data-testid=\"battle-engaged-opponent-information-button\"\n onKeyDown={handleKeyPress}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n data-for={battleOpponentInfoId}\n data-tooltip-place=\"left\"\n data-tip={isAlreadyEngaged}\n aria-label={ariaLabel}\n >\n <InformationIcon className={style.informationIcon} width={20} height={20} />\n </button>\n <ToolTip\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","useRef","classnames","v5","uuidV5","has","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionCoorpacademyInformationIcon","InformationIcon","ToolTip","toggleStateOnKeyPress","Provider","GetTranslateFromContext","propTypes","style","BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","ariaLabel","legacyContext","translate","wrapperClassnames","card","random","displayNameClassnames","name","alreadyEngaged","mouseLeaveTimer","setMouseLeaveTimer","undefined","toolTipIsVisible","setToolTipIsVisible","battleOpponentInfoId","URL","buttonRef","handleMouseOver","clearTimeout","current","focus","handleMouseLeave","setTimeout","blur","handleKeyPress","event","TooltipContent","_props","avatar","tooltipIconContainer","informationIcon","toolTipWrapper","rightArrow","contextTypes","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState, useRef} from 'react';\nimport classnames from 'classnames';\nimport {v5 as uuidV5} from 'uuid';\nimport has from 'lodash/fp/has';\nimport {\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionCoorpacademyInformationIcon as InformationIcon\n} from '@coorpacademy/nova-icons';\nimport ToolTip, {toggleStateOnKeyPress} from '../tooltip';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport propTypes, {BattleOpponentProps} from './prop-types';\nimport style from './style.css';\n\nconst BattleOpponent = (\n {\n isAlreadyEngaged,\n isRandom,\n userAvatarSrc,\n onClick,\n displayName,\n tooltipText,\n 'aria-label': ariaLabel\n }: BattleOpponentProps,\n legacyContext: WebContextValues\n) => {\n const translate: Required<WebContextValues>['translate'] = GetTranslateFromContext(legacyContext);\n const wrapperClassnames = useMemo(\n () => classnames(style.card, style['opponent-card'], isRandom ? style.random : null),\n [isRandom]\n );\n\n const displayNameClassnames = useMemo(\n () => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null),\n [isAlreadyEngaged]\n );\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState<number | undefined>(undefined);\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n // to be replaced by useId when React17 is bumped to React18\n const [battleOpponentInfoId] = useState(\n isAlreadyEngaged ? uuidV5('engaged-battle-', uuidV5.URL) : undefined\n );\n\n const buttonRef = useRef(null);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n // @ts-expect-error (error: focus does not exists on type never)\n /* istanbul ignore next */ has(['current', 'focus'], buttonRef) && buttonRef.current.focus();\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(\n setTimeout(() => {\n setToolTipIsVisible(false);\n // @ts-expect-error (error: blur does not exists on type never)\n /* istanbul ignore next */ has(['current', 'blur'], buttonRef) && buttonRef.current.blur();\n }, 500) as unknown as number\n );\n }, []);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);\n },\n [toolTipIsVisible]\n );\n\n const TooltipContent = useCallback(\n _props => (\n <p\n {..._props}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n data-testid=\"battle-opponent-tooltip-content\"\n >\n {tooltipText}\n </p>\n ),\n [handleMouseLeave, handleMouseOver, tooltipText]\n );\n\n return (\n <li\n {...(!isAlreadyEngaged && {onClick})}\n className={wrapperClassnames}\n data-testid=\"battle-opponent-wrapper\"\n tabIndex={0}\n >\n <div className={style.avatar}>{isRandom ? null : <img src={userAvatarSrc} alt=\"\" />}</div>\n <p className={displayNameClassnames} tabIndex={0}>\n {displayName}\n </p>\n {isAlreadyEngaged ? (\n <>\n <button\n ref={buttonRef}\n tabIndex={0}\n type=\"button\"\n className={style.tooltipIconContainer}\n data-testid=\"battle-engaged-opponent-information-button\"\n onKeyDown={handleKeyPress}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n data-for={battleOpponentInfoId}\n data-tooltip-place=\"left\"\n data-tip={isAlreadyEngaged}\n aria-label={ariaLabel}\n >\n <InformationIcon className={style.informationIcon} width={20} height={20} />\n </button>\n <span className={style.toolTipWrapper}>\n <ToolTip\n fontSize={12}\n anchorId={battleOpponentInfoId}\n toolTipIsVisible={toolTipIsVisible}\n TooltipContent={TooltipContent}\n closeToolTipInformationTextAriaLabel={translate(\n 'Press the escape key to close the information text'\n )}\n />\n </span>\n </>\n ) : (\n <ArrowRight className={style.rightArrow} width={16} height={16} />\n )}\n </li>\n );\n};\n\nBattleOpponent.propTypes = propTypes;\n\nBattleOpponent.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nexport default BattleOpponent;\n"],"mappings":"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"}
|
|
@@ -112,6 +112,18 @@
|
|
|
112
112
|
align-items: center;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
+
.toolTipWrapper {
|
|
116
|
+
position: absolute;
|
|
117
|
+
width: 100%;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.card .tooltipIconContainer + .toolTipWrapper [class*="__react_component_tooltip"]:not([class*="toolTipReact"]) {
|
|
121
|
+
position: sticky;
|
|
122
|
+
top: unset !important;
|
|
123
|
+
left: unset !important;
|
|
124
|
+
max-width: 75%;
|
|
125
|
+
}
|
|
126
|
+
|
|
115
127
|
@media mobile {
|
|
116
128
|
.opponent-card {
|
|
117
129
|
width: 100%;
|
|
@@ -5,17 +5,28 @@ declare namespace Button {
|
|
|
5
5
|
color: any;
|
|
6
6
|
submitValue: PropTypes.Requireable<string>;
|
|
7
7
|
disabled: PropTypes.Requireable<boolean>;
|
|
8
|
-
isLinkDisabled: PropTypes.Requireable<boolean>;
|
|
9
8
|
href: PropTypes.Requireable<string>;
|
|
10
9
|
download: PropTypes.Requireable<boolean>;
|
|
11
10
|
target: PropTypes.Requireable<string>;
|
|
12
11
|
type: PropTypes.Requireable<string>;
|
|
13
|
-
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
14
12
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
15
13
|
className: PropTypes.Requireable<string>;
|
|
16
|
-
buttonContentClassName: PropTypes.Requireable<string>;
|
|
17
14
|
style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
|
|
18
15
|
'data-name': PropTypes.Requireable<string>;
|
|
16
|
+
'aria-label': PropTypes.Requireable<string>;
|
|
17
|
+
'data-testid': PropTypes.Requireable<string>;
|
|
18
|
+
useButtonTag: PropTypes.Requireable<boolean>;
|
|
19
|
+
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
20
|
+
onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
|
|
21
|
+
onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
|
|
22
|
+
onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
|
|
23
|
+
buttonRef: PropTypes.Requireable<PropTypes.InferProps<{}>>;
|
|
24
|
+
'data-for': PropTypes.Requireable<string>;
|
|
25
|
+
'data-tooltip-place': PropTypes.Requireable<string>;
|
|
26
|
+
'data-tip': PropTypes.Requireable<boolean>;
|
|
27
|
+
isLinkDisabled: PropTypes.Requireable<boolean>;
|
|
28
|
+
useWrapper: PropTypes.Requireable<boolean>;
|
|
29
|
+
buttonContentClassName: PropTypes.Requireable<string>;
|
|
19
30
|
};
|
|
20
31
|
}
|
|
21
32
|
import PropTypes from "prop-types";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button/index.js"],"names":[],"mappings":";AA0IA,iDAgCC"}
|
package/es/atom/button/index.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
|
-
import React from 'react';
|
|
3
|
+
import React, { useMemo } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import classnames from 'classnames';
|
|
6
|
+
import noop from 'lodash/fp/noop';
|
|
6
7
|
import { ColorPropType } from '../../util/proptypes';
|
|
7
8
|
import Link from '../link';
|
|
8
9
|
import cssStyle from './style.css';
|
|
@@ -16,12 +17,21 @@ const ButtonContent = props => {
|
|
|
16
17
|
href,
|
|
17
18
|
target,
|
|
18
19
|
onClick,
|
|
19
|
-
className
|
|
20
|
+
className,
|
|
20
21
|
children,
|
|
21
22
|
type,
|
|
22
23
|
style,
|
|
23
24
|
'data-name': dataName,
|
|
24
|
-
'aria-label': ariaLabel
|
|
25
|
+
'aria-label': ariaLabel,
|
|
26
|
+
'data-testid': dataTestid,
|
|
27
|
+
useButtonTag,
|
|
28
|
+
buttonRef,
|
|
29
|
+
'data-for': dataFor,
|
|
30
|
+
'data-tooltip-place': dataTooltipPlace,
|
|
31
|
+
'data-tip': dataTip,
|
|
32
|
+
onKeyDown = noop,
|
|
33
|
+
onMouseLeave = noop,
|
|
34
|
+
onMouseOver = noop
|
|
25
35
|
} = props;
|
|
26
36
|
const anchorClassName = disabled && `${className} ${cssStyle.disabledAnchor}` || className;
|
|
27
37
|
const anchorOnClick = disabled && null || onClick;
|
|
@@ -51,6 +61,26 @@ const ButtonContent = props => {
|
|
|
51
61
|
style: style
|
|
52
62
|
}, submitValue || children);
|
|
53
63
|
|
|
64
|
+
case 'button':
|
|
65
|
+
if (useButtonTag) return /*#__PURE__*/React.createElement("button", {
|
|
66
|
+
ref: buttonRef,
|
|
67
|
+
type: "button",
|
|
68
|
+
"data-for": dataFor,
|
|
69
|
+
"data-tooltip-place": dataTooltipPlace,
|
|
70
|
+
"data-tip": dataTip,
|
|
71
|
+
"data-name": dataName,
|
|
72
|
+
"data-testid": dataTestid,
|
|
73
|
+
"aria-label": ariaLabel.favorite,
|
|
74
|
+
className: className,
|
|
75
|
+
onClick: onClick,
|
|
76
|
+
style: style,
|
|
77
|
+
onKeyDown: onKeyDown,
|
|
78
|
+
onMouseLeave: onMouseLeave,
|
|
79
|
+
onMouseOver: onMouseOver,
|
|
80
|
+
tabIndex: 0
|
|
81
|
+
}, children);
|
|
82
|
+
// falls through in case type is button BUT no button tag is needed, for retro-compatibility
|
|
83
|
+
|
|
54
84
|
default:
|
|
55
85
|
return /*#__PURE__*/React.createElement("input", {
|
|
56
86
|
"data-name": dataName,
|
|
@@ -74,12 +104,23 @@ ButtonContent.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
74
104
|
download: PropTypes.bool,
|
|
75
105
|
target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
|
|
76
106
|
type: PropTypes.string,
|
|
77
|
-
onClick: PropTypes.func,
|
|
78
107
|
children: PropTypes.node,
|
|
79
108
|
className: PropTypes.string,
|
|
80
109
|
style: PropTypes.shape({}),
|
|
81
110
|
'data-name': PropTypes.string,
|
|
82
|
-
'aria-label': PropTypes.string
|
|
111
|
+
'aria-label': PropTypes.string,
|
|
112
|
+
'data-testid': PropTypes.string,
|
|
113
|
+
useButtonTag: PropTypes.bool,
|
|
114
|
+
// event handlers
|
|
115
|
+
onClick: PropTypes.func,
|
|
116
|
+
onKeyDown: PropTypes.func,
|
|
117
|
+
onMouseLeave: PropTypes.func,
|
|
118
|
+
onMouseOver: PropTypes.func,
|
|
119
|
+
// for ReactTooltip handling
|
|
120
|
+
buttonRef: PropTypes.shape({}),
|
|
121
|
+
'data-for': PropTypes.string,
|
|
122
|
+
'data-tooltip-place': PropTypes.string,
|
|
123
|
+
'data-tip': PropTypes.bool
|
|
83
124
|
} : {};
|
|
84
125
|
|
|
85
126
|
const Button = props => {
|
|
@@ -89,33 +130,25 @@ const Button = props => {
|
|
|
89
130
|
isLinkDisabled,
|
|
90
131
|
type = 'submit',
|
|
91
132
|
children,
|
|
92
|
-
|
|
133
|
+
useWrapper = true
|
|
93
134
|
} = props;
|
|
94
|
-
const
|
|
95
|
-
|
|
96
|
-
|
|
135
|
+
const buttonWrapperClassNames = useMemo(() => isLinkDisabled && classnames([cssStyle.disabledAnchor, className]) || classnames([cssStyle.button, className]), [className, isLinkDisabled]);
|
|
136
|
+
const contentClassName = useMemo(() => buttonContentClassName ? buttonContentClassName : cssStyle.buttonContent, [buttonContentClassName]);
|
|
137
|
+
return useWrapper ? /*#__PURE__*/React.createElement("div", {
|
|
138
|
+
className: buttonWrapperClassNames
|
|
97
139
|
}, /*#__PURE__*/React.createElement(ButtonContent, _extends({}, props, {
|
|
98
140
|
type: type,
|
|
99
|
-
className:
|
|
100
|
-
|
|
101
|
-
|
|
141
|
+
className: contentClassName
|
|
142
|
+
}), children)) : /*#__PURE__*/React.createElement(ButtonContent, _extends({}, props, {
|
|
143
|
+
type: type,
|
|
144
|
+
className: contentClassName
|
|
145
|
+
}), children);
|
|
102
146
|
};
|
|
103
147
|
|
|
104
|
-
Button.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
105
|
-
color: ColorPropType,
|
|
106
|
-
submitValue: PropTypes.string,
|
|
107
|
-
disabled: PropTypes.bool,
|
|
148
|
+
Button.propTypes = process.env.NODE_ENV !== "production" ? _extends({
|
|
108
149
|
isLinkDisabled: PropTypes.bool,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
type: PropTypes.string,
|
|
113
|
-
onClick: PropTypes.func,
|
|
114
|
-
children: PropTypes.node,
|
|
115
|
-
className: PropTypes.string,
|
|
116
|
-
buttonContentClassName: PropTypes.string,
|
|
117
|
-
style: PropTypes.shape({}),
|
|
118
|
-
'data-name': PropTypes.string
|
|
119
|
-
} : {};
|
|
150
|
+
useWrapper: PropTypes.bool,
|
|
151
|
+
buttonContentClassName: PropTypes.string
|
|
152
|
+
}, ButtonContent.propTypes) : {};
|
|
120
153
|
export default Button;
|
|
121
154
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","classnames","ColorPropType","Link","cssStyle","ButtonContent","props","color","submitValue","disabled","download","href","target","onClick","className","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","noop","ColorPropType","Link","cssStyle","ButtonContent","props","color","submitValue","disabled","download","href","target","onClick","className","children","type","style","dataName","ariaLabel","dataTestid","useButtonTag","buttonRef","dataFor","dataTooltipPlace","dataTip","onKeyDown","onMouseLeave","onMouseOver","anchorClassName","disabledAnchor","anchorOnClick","anchorHref","inputClassName","buttonDisabled","favorite","propTypes","string","bool","oneOf","node","shape","func","Button","buttonContentClassName","isLinkDisabled","useWrapper","buttonWrapperClassNames","button","contentClassName","buttonContent"],"sources":["../../../src/atom/button/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport noop from 'lodash/fp/noop';\nimport {ColorPropType} from '../../util/proptypes';\nimport Link from '../link';\nimport cssStyle from './style.css';\n\nconst ButtonContent = props => {\n const {\n color,\n submitValue,\n disabled,\n download,\n href,\n target,\n onClick,\n className,\n children,\n type,\n style,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestid,\n useButtonTag,\n buttonRef,\n 'data-for': dataFor,\n 'data-tooltip-place': dataTooltipPlace,\n 'data-tip': dataTip,\n onKeyDown = noop,\n onMouseLeave = noop,\n onMouseOver = noop\n } = props;\n const anchorClassName = (disabled && `${className} ${cssStyle.disabledAnchor}`) || className;\n const anchorOnClick = (disabled && null) || onClick;\n const anchorHref = (disabled && null) || href;\n const inputClassName = (disabled && `${className} ${cssStyle.buttonDisabled}`) || className;\n\n switch (type) {\n case 'link':\n return (\n <Link\n data-name={dataName}\n href={anchorHref}\n download={download}\n onClick={anchorOnClick}\n target={target}\n className={anchorClassName}\n style={style}\n aria-label={ariaLabel}\n >\n {submitValue || children || 'submit'}\n </Link>\n );\n\n case 'a':\n return (\n <a\n data-name={dataName}\n href={anchorHref}\n target={target}\n className={anchorClassName}\n onClick={anchorOnClick}\n style={style}\n >\n {submitValue || children}\n </a>\n );\n\n case 'button':\n if (useButtonTag)\n return (\n <button\n ref={buttonRef}\n type=\"button\"\n data-for={dataFor}\n data-tooltip-place={dataTooltipPlace}\n data-tip={dataTip}\n data-name={dataName}\n data-testid={dataTestid}\n aria-label={ariaLabel.favorite}\n className={className}\n onClick={onClick}\n style={style}\n onKeyDown={onKeyDown}\n onMouseLeave={onMouseLeave}\n onMouseOver={onMouseOver}\n tabIndex={0}\n >\n {children}\n </button>\n );\n // falls through in case type is button BUT no button tag is needed, for retro-compatibility\n default:\n return (\n <input\n data-name={dataName}\n type={type}\n value={submitValue}\n disabled={disabled}\n onClick={onClick}\n className={inputClassName}\n style={{\n color,\n ...style\n }}\n />\n );\n }\n};\n\nButtonContent.propTypes = {\n color: ColorPropType,\n submitValue: PropTypes.string,\n disabled: PropTypes.bool,\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n type: PropTypes.string,\n children: PropTypes.node,\n className: PropTypes.string,\n style: PropTypes.shape({}),\n 'data-name': PropTypes.string,\n 'aria-label': PropTypes.string,\n 'data-testid': PropTypes.string,\n useButtonTag: PropTypes.bool,\n // event handlers\n onClick: PropTypes.func,\n onKeyDown: PropTypes.func,\n onMouseLeave: PropTypes.func,\n onMouseOver: PropTypes.func,\n // for ReactTooltip handling\n buttonRef: PropTypes.shape({}),\n 'data-for': PropTypes.string,\n 'data-tooltip-place': PropTypes.string,\n 'data-tip': PropTypes.bool\n};\n\nconst Button = props => {\n const {\n className,\n buttonContentClassName,\n isLinkDisabled,\n type = 'submit',\n children,\n useWrapper = true\n } = props;\n const buttonWrapperClassNames = useMemo(\n () =>\n (isLinkDisabled && classnames([cssStyle.disabledAnchor, className])) ||\n classnames([cssStyle.button, className]),\n [className, isLinkDisabled]\n );\n\n const contentClassName = useMemo(\n () => (buttonContentClassName ? buttonContentClassName : cssStyle.buttonContent),\n [buttonContentClassName]\n );\n\n return useWrapper ? (\n <div className={buttonWrapperClassNames}>\n <ButtonContent {...props} type={type} className={contentClassName}>\n {children}\n </ButtonContent>\n </div>\n ) : (\n <ButtonContent {...props} type={type} className={contentClassName}>\n {children}\n </ButtonContent>\n );\n};\n\nButton.propTypes = {\n isLinkDisabled: PropTypes.bool,\n useWrapper: PropTypes.bool,\n buttonContentClassName: PropTypes.string,\n ...ButtonContent.propTypes\n};\n\nexport default Button;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AACA,SAAQC,aAAR,QAA4B,sBAA5B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,QAAP,MAAqB,aAArB;;AAEA,MAAMC,aAAa,GAAGC,KAAK,IAAI;EAC7B,MAAM;IACJC,KADI;IAEJC,WAFI;IAGJC,QAHI;IAIJC,QAJI;IAKJC,IALI;IAMJC,MANI;IAOJC,OAPI;IAQJC,SARI;IASJC,QATI;IAUJC,IAVI;IAWJC,KAXI;IAYJ,aAAaC,QAZT;IAaJ,cAAcC,SAbV;IAcJ,eAAeC,UAdX;IAeJC,YAfI;IAgBJC,SAhBI;IAiBJ,YAAYC,OAjBR;IAkBJ,sBAAsBC,gBAlBlB;IAmBJ,YAAYC,OAnBR;IAoBJC,SAAS,GAAGzB,IApBR;IAqBJ0B,YAAY,GAAG1B,IArBX;IAsBJ2B,WAAW,GAAG3B;EAtBV,IAuBFK,KAvBJ;EAwBA,MAAMuB,eAAe,GAAIpB,QAAQ,IAAK,GAAEK,SAAU,IAAGV,QAAQ,CAAC0B,cAAe,EAArD,IAA2DhB,SAAnF;EACA,MAAMiB,aAAa,GAAItB,QAAQ,IAAI,IAAb,IAAsBI,OAA5C;EACA,MAAMmB,UAAU,GAAIvB,QAAQ,IAAI,IAAb,IAAsBE,IAAzC;EACA,MAAMsB,cAAc,GAAIxB,QAAQ,IAAK,GAAEK,SAAU,IAAGV,QAAQ,CAAC8B,cAAe,EAArD,IAA2DpB,SAAlF;;EAEA,QAAQE,IAAR;IACE,KAAK,MAAL;MACE,oBACE,oBAAC,IAAD;QACE,aAAWE,QADb;QAEE,IAAI,EAAEc,UAFR;QAGE,QAAQ,EAAEtB,QAHZ;QAIE,OAAO,EAAEqB,aAJX;QAKE,MAAM,EAAEnB,MALV;QAME,SAAS,EAAEiB,eANb;QAOE,KAAK,EAAEZ,KAPT;QAQE,cAAYE;MARd,GAUGX,WAAW,IAAIO,QAAf,IAA2B,QAV9B,CADF;;IAeF,KAAK,GAAL;MACE,oBACE;QACE,aAAWG,QADb;QAEE,IAAI,EAAEc,UAFR;QAGE,MAAM,EAAEpB,MAHV;QAIE,SAAS,EAAEiB,eAJb;QAKE,OAAO,EAAEE,aALX;QAME,KAAK,EAAEd;MANT,GAQGT,WAAW,IAAIO,QARlB,CADF;;IAaF,KAAK,QAAL;MACE,IAAIM,YAAJ,EACE,oBACE;QACE,GAAG,EAAEC,SADP;QAEE,IAAI,EAAC,QAFP;QAGE,YAAUC,OAHZ;QAIE,sBAAoBC,gBAJtB;QAKE,YAAUC,OALZ;QAME,aAAWP,QANb;QAOE,eAAaE,UAPf;QAQE,cAAYD,SAAS,CAACgB,QARxB;QASE,SAAS,EAAErB,SATb;QAUE,OAAO,EAAED,OAVX;QAWE,KAAK,EAAEI,KAXT;QAYE,SAAS,EAAES,SAZb;QAaE,YAAY,EAAEC,YAbhB;QAcE,WAAW,EAAEC,WAdf;QAeE,QAAQ,EAAE;MAfZ,GAiBGb,QAjBH,CADF;IAqBJ;;IACA;MACE,oBACE;QACE,aAAWG,QADb;QAEE,IAAI,EAAEF,IAFR;QAGE,KAAK,EAAER,WAHT;QAIE,QAAQ,EAAEC,QAJZ;QAKE,OAAO,EAAEI,OALX;QAME,SAAS,EAAEoB,cANb;QAOE,KAAK;UACH1B;QADG,GAEAU,KAFA;MAPP,EADF;EAxDJ;AAuED,CArGD;;AAuGAZ,aAAa,CAAC+B,SAAd,2CAA0B;EACxB7B,KAAK,EAAEL,aADiB;EAExBM,WAAW,EAAET,SAAS,CAACsC,MAFC;EAGxB5B,QAAQ,EAAEV,SAAS,CAACuC,IAHI;EAIxB3B,IAAI,EAAEZ,SAAS,CAACsC,MAJQ;EAKxB3B,QAAQ,EAAEX,SAAS,CAACuC,IALI;EAMxB1B,MAAM,EAAEb,SAAS,CAACwC,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB,CANgB;EAOxBvB,IAAI,EAAEjB,SAAS,CAACsC,MAPQ;EAQxBtB,QAAQ,EAAEhB,SAAS,CAACyC,IARI;EASxB1B,SAAS,EAAEf,SAAS,CAACsC,MATG;EAUxBpB,KAAK,EAAElB,SAAS,CAAC0C,KAAV,CAAgB,EAAhB,CAViB;EAWxB,aAAa1C,SAAS,CAACsC,MAXC;EAYxB,cAActC,SAAS,CAACsC,MAZA;EAaxB,eAAetC,SAAS,CAACsC,MAbD;EAcxBhB,YAAY,EAAEtB,SAAS,CAACuC,IAdA;EAexB;EACAzB,OAAO,EAAEd,SAAS,CAAC2C,IAhBK;EAiBxBhB,SAAS,EAAE3B,SAAS,CAAC2C,IAjBG;EAkBxBf,YAAY,EAAE5B,SAAS,CAAC2C,IAlBA;EAmBxBd,WAAW,EAAE7B,SAAS,CAAC2C,IAnBC;EAoBxB;EACApB,SAAS,EAAEvB,SAAS,CAAC0C,KAAV,CAAgB,EAAhB,CArBa;EAsBxB,YAAY1C,SAAS,CAACsC,MAtBE;EAuBxB,sBAAsBtC,SAAS,CAACsC,MAvBR;EAwBxB,YAAYtC,SAAS,CAACuC;AAxBE,CAA1B;;AA2BA,MAAMK,MAAM,GAAGrC,KAAK,IAAI;EACtB,MAAM;IACJQ,SADI;IAEJ8B,sBAFI;IAGJC,cAHI;IAIJ7B,IAAI,GAAG,QAJH;IAKJD,QALI;IAMJ+B,UAAU,GAAG;EANT,IAOFxC,KAPJ;EAQA,MAAMyC,uBAAuB,GAAGjD,OAAO,CACrC,MACG+C,cAAc,IAAI7C,UAAU,CAAC,CAACI,QAAQ,CAAC0B,cAAV,EAA0BhB,SAA1B,CAAD,CAA7B,IACAd,UAAU,CAAC,CAACI,QAAQ,CAAC4C,MAAV,EAAkBlC,SAAlB,CAAD,CAHyB,EAIrC,CAACA,SAAD,EAAY+B,cAAZ,CAJqC,CAAvC;EAOA,MAAMI,gBAAgB,GAAGnD,OAAO,CAC9B,MAAO8C,sBAAsB,GAAGA,sBAAH,GAA4BxC,QAAQ,CAAC8C,aADpC,EAE9B,CAACN,sBAAD,CAF8B,CAAhC;EAKA,OAAOE,UAAU,gBACf;IAAK,SAAS,EAAEC;EAAhB,gBACE,oBAAC,aAAD,eAAmBzC,KAAnB;IAA0B,IAAI,EAAEU,IAAhC;IAAsC,SAAS,EAAEiC;EAAjD,IACGlC,QADH,CADF,CADe,gBAOf,oBAAC,aAAD,eAAmBT,KAAnB;IAA0B,IAAI,EAAEU,IAAhC;IAAsC,SAAS,EAAEiC;EAAjD,IACGlC,QADH,CAPF;AAWD,CAhCD;;AAkCA4B,MAAM,CAACP,SAAP;EACES,cAAc,EAAE9C,SAAS,CAACuC,IAD5B;EAEEQ,UAAU,EAAE/C,SAAS,CAACuC,IAFxB;EAGEM,sBAAsB,EAAE7C,SAAS,CAACsC;AAHpC,GAIKhC,aAAa,CAAC+B,SAJnB;AAOA,eAAeO,MAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/drag-and-drop/index.js"],"names":[],"mappings":";AAgBA;IACE;;;;;;;;;;;;;;;;;;;;MAoBE;IAEF,wBASC;IANC;;MAEC;IAMH,wBAIC;IAED,uBAIC;IAED,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/drag-and-drop/index.js"],"names":[],"mappings":";AAgBA;IACE;;;;;;;;;;;;;;;;;;;;MAoBE;IAEF,wBASC;IANC;;MAEC;IAMH,wBAIC;IAED,uBAIC;IAED,sBAkLC;CACF"}
|
|
@@ -156,28 +156,40 @@ class DragAndDrop extends React.Component {
|
|
|
156
156
|
const button = buildButton(dragging, error);
|
|
157
157
|
const previewContainer = getClassState(style.previewContainer, style.modifiedPreviewContainer, null, modified, error);
|
|
158
158
|
const inputWrapper = getClassState(style.inputWrapper, style.modifiedInputWrapper, style.errorInputWrapper, modified, error);
|
|
159
|
+
|
|
160
|
+
const buildContent = () => {
|
|
161
|
+
if (loading) {
|
|
162
|
+
return previewView;
|
|
163
|
+
} else if (!_isEmpty(previewContent)) {
|
|
164
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
165
|
+
className: classnames(previewContainer, disabled && style.disabled)
|
|
166
|
+
}, previewView);
|
|
167
|
+
} else {
|
|
168
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
169
|
+
className: classnames(dragging ? style.dragging : inputWrapper, disabled && style.disabled),
|
|
170
|
+
id: idBox,
|
|
171
|
+
"data-name": "drag-and-drop-box"
|
|
172
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
173
|
+
className: style.infosContainer
|
|
174
|
+
}, error ? /*#__PURE__*/React.createElement(FileUploadBlockedIcon, {
|
|
175
|
+
className: style.iconError
|
|
176
|
+
}) : /*#__PURE__*/React.createElement(FileUploadIcon, {
|
|
177
|
+
className: style.icon
|
|
178
|
+
}), description ? /*#__PURE__*/React.createElement("div", {
|
|
179
|
+
className: style.description
|
|
180
|
+
}, description) : null, error ? null : /*#__PURE__*/React.createElement("div", {
|
|
181
|
+
className: style.dragAndDropLabel
|
|
182
|
+
}, 'Drag & Drop here')), button, /*#__PURE__*/React.createElement("div", null, children(this.handleDragStart, this.handleDragStop)));
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
const content = buildContent();
|
|
159
187
|
return /*#__PURE__*/React.createElement("div", {
|
|
160
188
|
className: style.wrapper,
|
|
161
189
|
"data-name": "drag-and-drop-wrapper"
|
|
162
190
|
}, /*#__PURE__*/React.createElement("div", {
|
|
163
191
|
className: style.title
|
|
164
|
-
}, title),
|
|
165
|
-
className: classnames(previewContainer, disabled && style.disabled)
|
|
166
|
-
}, previewView) : /*#__PURE__*/React.createElement("div", {
|
|
167
|
-
className: classnames(dragging ? style.dragging : inputWrapper, disabled && style.disabled),
|
|
168
|
-
id: idBox,
|
|
169
|
-
"data-name": "drag-and-drop-box"
|
|
170
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
171
|
-
className: style.infosContainer
|
|
172
|
-
}, error ? /*#__PURE__*/React.createElement(FileUploadBlockedIcon, {
|
|
173
|
-
className: style.iconError
|
|
174
|
-
}) : /*#__PURE__*/React.createElement(FileUploadIcon, {
|
|
175
|
-
className: style.icon
|
|
176
|
-
}), description ? /*#__PURE__*/React.createElement("div", {
|
|
177
|
-
className: style.description
|
|
178
|
-
}, description) : null, error ? null : /*#__PURE__*/React.createElement("div", {
|
|
179
|
-
className: style.dragAndDropLabel
|
|
180
|
-
}, 'Drag & Drop here')), button, /*#__PURE__*/React.createElement("div", null, children(this.handleDragStart, this.handleDragStop))), error ? /*#__PURE__*/React.createElement("span", {
|
|
192
|
+
}, title), content, error ? /*#__PURE__*/React.createElement("span", {
|
|
181
193
|
className: classnames(style.errorMessage, disabled && style.disabled)
|
|
182
194
|
}, error) : resetContent);
|
|
183
195
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","NovaSolidStatusClose","Close","NovaSolidFilesBasicFileUpload2","FileUploadIcon","NovaSolidFilesBasicFileBlock2","FileUploadBlockedIcon","classnames","Loader","Button","getClassState","style","constantNull","DragAndDrop","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","error","buttonAriaLabel","errorButtonLabel","disabled","pdfButtonLabel","pdfButtonAriaLabel","previewView","type","preview","src","previewPdf","previewLabelPdf","href","target","download","position","loaderWrapper","loadingCancel","closeIcon","loader","loaderText","resetContent","resetUploadWrapper","resetSrcLabel","label","buildButton","defaultButtonProps","icon","button","previewContainer","modifiedPreviewContainer","inputWrapper","modifiedInputWrapper","errorInputWrapper","wrapper","infosContainer","iconError","dragAndDropLabel","errorMessage","propTypes","string","shape","bool","func"],"sources":["../../../src/atom/drag-and-drop/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {uniqueId, constant, isEmpty} from 'lodash/fp';\nimport {\n NovaSolidStatusClose as Close,\n NovaSolidFilesBasicFileUpload2 as FileUploadIcon,\n NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../loader';\nimport Button from '../button-link';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst constantNull = constant(null);\n\nclass DragAndDrop extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n uploadLabel: PropTypes.string,\n previewLabel: PropTypes.string,\n previewContent: PropTypes.shape({\n type: PropTypes.string,\n src: PropTypes.string,\n label: PropTypes.string\n }),\n loading: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n children: PropTypes.func,\n onReset: PropTypes.func,\n error: PropTypes.string,\n buttonAriaLabel: PropTypes.string,\n errorButtonLabel: PropTypes.string,\n pdfButtonLabel: PropTypes.string,\n pdfButtonAriaLabel: PropTypes.string\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragging: false\n };\n\n this.handleDragStart = this.handleDragStart.bind(this);\n this.handleDragStop = this.handleDragStop.bind(this);\n }\n\n handleDragStart() {\n this.setState({\n dragging: true\n });\n }\n\n handleDragStop() {\n this.setState({\n dragging: false\n });\n }\n\n render() {\n const idBox = uniqueId('drop-box-');\n const {\n children = constantNull,\n title,\n description,\n uploadLabel,\n previewLabel = '',\n previewContent,\n loading = false,\n modified = false,\n onReset = null,\n error = '',\n buttonAriaLabel = '',\n errorButtonLabel = '',\n disabled = false,\n pdfButtonLabel,\n pdfButtonAriaLabel\n } = this.props;\n const {dragging} = this.state;\n\n let previewView = null;\n\n if (previewContent && previewContent.type === 'image') {\n previewView = (\n <div className={style.preview}>\n <img src={previewContent.src} />\n </div>\n );\n } else if (previewContent && previewContent.type === 'video') {\n previewView = (\n <div className={style.preview}>\n <video controls src={previewContent.src} type=\"video/*\" />\n </div>\n );\n } else if (previewContent && previewContent.type === 'pdf') {\n previewView = (\n <div className={style.previewPdf}>\n <p className={style.previewLabelPdf}>{previewLabel}</p>\n <Button\n type=\"secondary\"\n link={{href: previewContent.src, target: '_blank', download: false}}\n label={pdfButtonLabel}\n aria-label={pdfButtonAriaLabel}\n data-name=\"default-button-pdf\"\n icon={{\n position: 'left',\n type: 'pdf'\n }}\n />\n </div>\n );\n } else if (loading) {\n previewView = (\n <div className={style.loaderWrapper}>\n <div className={style.loadingCancel}>\n <Close\n data-name=\"reset-content-icon\"\n height={12}\n width={12}\n className={style.closeIcon}\n onClick={onReset}\n />\n </div>\n <div className={style.loader}>\n <Loader theme=\"coorpmanager\" />\n </div>\n <span className={style.loaderText}>Uploading</span>\n </div>\n );\n } else {\n previewView = <span>{previewLabel}</span>;\n }\n\n const resetContent =\n previewContent && previewContent.src ? (\n <div className={classnames(style.resetUploadWrapper, disabled && style.disabled)}>\n <div className={style.resetSrcLabel}>\n {previewContent.label ? previewContent.label : previewContent.src}\n </div>\n {onReset ? (\n <Close\n data-name=\"reset-content-icon\"\n height={12}\n width={12}\n className={style.closeIcon}\n onClick={onReset}\n />\n ) : null}\n </div>\n ) : null;\n\n const buildButton = () => {\n const defaultButtonProps = {\n label: uploadLabel,\n 'aria-label': buttonAriaLabel,\n 'data-name': 'default-button',\n icon: {\n position: 'left',\n type: 'folders'\n }\n };\n if (dragging) {\n return null;\n } else if (error) {\n return <Button {...defaultButtonProps} label={errorButtonLabel} icon={{}} />;\n } else {\n return <Button {...defaultButtonProps} />;\n }\n };\n\n const button = buildButton(dragging, error);\n\n const previewContainer = getClassState(\n style.previewContainer,\n style.modifiedPreviewContainer,\n null,\n modified,\n error\n );\n const inputWrapper = getClassState(\n style.inputWrapper,\n style.modifiedInputWrapper,\n style.errorInputWrapper,\n modified,\n error\n );\n\n return (\n <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n <div className={style.title}>{title}</div>\n {!isEmpty(previewContent) || loading ? (\n <div className={classnames(previewContainer, disabled && style.disabled)}>\n {previewView}\n </div>\n ) : (\n <div\n className={classnames(\n dragging ? style.dragging : inputWrapper,\n disabled && style.disabled\n )}\n id={idBox}\n data-name=\"drag-and-drop-box\"\n >\n <div className={style.infosContainer}>\n {error ? (\n <FileUploadBlockedIcon className={style.iconError} />\n ) : (\n <FileUploadIcon className={style.icon} />\n )}\n {description ? <div className={style.description}>{description}</div> : null}\n {error ? null : <div className={style.dragAndDropLabel}>{'Drag & Drop here'}</div>}\n </div>\n {button}\n <div>{children(this.handleDragStart, this.handleDragStop)}</div>\n </div>\n )}\n {error ? (\n <span className={classnames(style.errorMessage, disabled && style.disabled)}>\n {error}\n </span>\n ) : (\n resetContent\n )}\n </div>\n );\n }\n}\n\nexport default DragAndDrop;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","NovaSolidStatusClose","Close","NovaSolidFilesBasicFileUpload2","FileUploadIcon","NovaSolidFilesBasicFileBlock2","FileUploadBlockedIcon","classnames","Loader","Button","getClassState","style","constantNull","DragAndDrop","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","error","buttonAriaLabel","errorButtonLabel","disabled","pdfButtonLabel","pdfButtonAriaLabel","previewView","type","preview","src","previewPdf","previewLabelPdf","href","target","download","position","loaderWrapper","loadingCancel","closeIcon","loader","loaderText","resetContent","resetUploadWrapper","resetSrcLabel","label","buildButton","defaultButtonProps","icon","button","previewContainer","modifiedPreviewContainer","inputWrapper","modifiedInputWrapper","errorInputWrapper","buildContent","infosContainer","iconError","dragAndDropLabel","content","wrapper","errorMessage","propTypes","string","shape","bool","func"],"sources":["../../../src/atom/drag-and-drop/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {uniqueId, constant, isEmpty} from 'lodash/fp';\nimport {\n NovaSolidStatusClose as Close,\n NovaSolidFilesBasicFileUpload2 as FileUploadIcon,\n NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../loader';\nimport Button from '../button-link';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst constantNull = constant(null);\n\nclass DragAndDrop extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n uploadLabel: PropTypes.string,\n previewLabel: PropTypes.string,\n previewContent: PropTypes.shape({\n type: PropTypes.string,\n src: PropTypes.string,\n label: PropTypes.string\n }),\n loading: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n children: PropTypes.func,\n onReset: PropTypes.func,\n error: PropTypes.string,\n buttonAriaLabel: PropTypes.string,\n errorButtonLabel: PropTypes.string,\n pdfButtonLabel: PropTypes.string,\n pdfButtonAriaLabel: PropTypes.string\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragging: false\n };\n\n this.handleDragStart = this.handleDragStart.bind(this);\n this.handleDragStop = this.handleDragStop.bind(this);\n }\n\n handleDragStart() {\n this.setState({\n dragging: true\n });\n }\n\n handleDragStop() {\n this.setState({\n dragging: false\n });\n }\n\n render() {\n const idBox = uniqueId('drop-box-');\n const {\n children = constantNull,\n title,\n description,\n uploadLabel,\n previewLabel = '',\n previewContent,\n loading = false,\n modified = false,\n onReset = null,\n error = '',\n buttonAriaLabel = '',\n errorButtonLabel = '',\n disabled = false,\n pdfButtonLabel,\n pdfButtonAriaLabel\n } = this.props;\n const {dragging} = this.state;\n\n let previewView = null;\n\n if (previewContent && previewContent.type === 'image') {\n previewView = (\n <div className={style.preview}>\n <img src={previewContent.src} />\n </div>\n );\n } else if (previewContent && previewContent.type === 'video') {\n previewView = (\n <div className={style.preview}>\n <video controls src={previewContent.src} type=\"video/*\" />\n </div>\n );\n } else if (previewContent && previewContent.type === 'pdf') {\n previewView = (\n <div className={style.previewPdf}>\n <p className={style.previewLabelPdf}>{previewLabel}</p>\n <Button\n type=\"secondary\"\n link={{href: previewContent.src, target: '_blank', download: false}}\n label={pdfButtonLabel}\n aria-label={pdfButtonAriaLabel}\n data-name=\"default-button-pdf\"\n icon={{\n position: 'left',\n type: 'pdf'\n }}\n />\n </div>\n );\n } else if (loading) {\n previewView = (\n <div className={style.loaderWrapper}>\n <div className={style.loadingCancel}>\n <Close\n data-name=\"reset-content-icon\"\n height={12}\n width={12}\n className={style.closeIcon}\n onClick={onReset}\n />\n </div>\n <div className={style.loader}>\n <Loader theme=\"coorpmanager\" />\n </div>\n <span className={style.loaderText}>Uploading</span>\n </div>\n );\n } else {\n previewView = <span>{previewLabel}</span>;\n }\n\n const resetContent =\n previewContent && previewContent.src ? (\n <div className={classnames(style.resetUploadWrapper, disabled && style.disabled)}>\n <div className={style.resetSrcLabel}>\n {previewContent.label ? previewContent.label : previewContent.src}\n </div>\n {onReset ? (\n <Close\n data-name=\"reset-content-icon\"\n height={12}\n width={12}\n className={style.closeIcon}\n onClick={onReset}\n />\n ) : null}\n </div>\n ) : null;\n\n const buildButton = () => {\n const defaultButtonProps = {\n label: uploadLabel,\n 'aria-label': buttonAriaLabel,\n 'data-name': 'default-button',\n icon: {\n position: 'left',\n type: 'folders'\n }\n };\n if (dragging) {\n return null;\n } else if (error) {\n return <Button {...defaultButtonProps} label={errorButtonLabel} icon={{}} />;\n } else {\n return <Button {...defaultButtonProps} />;\n }\n };\n\n const button = buildButton(dragging, error);\n\n const previewContainer = getClassState(\n style.previewContainer,\n style.modifiedPreviewContainer,\n null,\n modified,\n error\n );\n const inputWrapper = getClassState(\n style.inputWrapper,\n style.modifiedInputWrapper,\n style.errorInputWrapper,\n modified,\n error\n );\n\n const buildContent = () => {\n if (loading) {\n return previewView;\n } else if (!isEmpty(previewContent)) {\n return (\n <div className={classnames(previewContainer, disabled && style.disabled)}>\n {previewView}\n </div>\n );\n } else {\n return (\n <div\n className={classnames(\n dragging ? style.dragging : inputWrapper,\n disabled && style.disabled\n )}\n id={idBox}\n data-name=\"drag-and-drop-box\"\n >\n <div className={style.infosContainer}>\n {error ? (\n <FileUploadBlockedIcon className={style.iconError} />\n ) : (\n <FileUploadIcon className={style.icon} />\n )}\n {description ? <div className={style.description}>{description}</div> : null}\n {error ? null : <div className={style.dragAndDropLabel}>{'Drag & Drop here'}</div>}\n </div>\n {button}\n <div>{children(this.handleDragStart, this.handleDragStop)}</div>\n </div>\n );\n }\n };\n\n const content = buildContent();\n\n return (\n <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n <div className={style.title}>{title}</div>\n {content}\n {error ? (\n <span className={classnames(style.errorMessage, disabled && style.disabled)}>\n {error}\n </span>\n ) : (\n resetContent\n )}\n </div>\n );\n }\n}\n\nexport default DragAndDrop;\n"],"mappings":"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"}
|
|
@@ -116,6 +116,7 @@ video {
|
|
|
116
116
|
.inputWrapper {
|
|
117
117
|
background: cm_grey_50;
|
|
118
118
|
width: 100%;
|
|
119
|
+
height: 100%;
|
|
119
120
|
box-sizing: border-box;
|
|
120
121
|
border-radius: 7px;
|
|
121
122
|
position: relative;
|
|
@@ -243,6 +244,7 @@ video {
|
|
|
243
244
|
justify-content: center;
|
|
244
245
|
align-items: center;
|
|
245
246
|
border-radius: 7px;
|
|
247
|
+
background: cm_grey_50;
|
|
246
248
|
}
|
|
247
249
|
|
|
248
250
|
.loader {
|
|
@@ -259,9 +261,8 @@ video {
|
|
|
259
261
|
.loadingCancel {
|
|
260
262
|
display: none;
|
|
261
263
|
position: absolute;
|
|
262
|
-
top:
|
|
263
|
-
right:
|
|
264
|
-
padding: 6px;
|
|
264
|
+
top: 10px;
|
|
265
|
+
right: 10px;
|
|
265
266
|
}
|
|
266
267
|
|
|
267
268
|
.loaderWrapper:hover .loadingCancel {
|
|
@@ -41,7 +41,7 @@ const ImageUpload = ({
|
|
|
41
41
|
width: '40px',
|
|
42
42
|
color: 'red'
|
|
43
43
|
};
|
|
44
|
-
return /*#__PURE__*/React.createElement(
|
|
44
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragAndDrop, {
|
|
45
45
|
title: title,
|
|
46
46
|
description: description,
|
|
47
47
|
previewLabel: previewLabel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","DragAndDrop","ImagePropType","Link","style","ImageUpload","title","description","previewLabel","previewContent","uploadLabel","loading","modified","disabled","onChange","onReset","name","labelLink","labelButtonLink","hrefLink","imageTypes","error","buttonAriaLabel","errorButtonLabel","pdfButtonLabel","pdfButtonAriaLabel","handleReset","e","preventDefault","linkCustomStyle","width","color","onDragStart","onDragStop","input","templateLink","href","download","propTypes","string","func","arrayOf"],"sources":["../../../src/atom/image-upload/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {isNil} from 'lodash/fp';\nimport DragAndDrop from '../drag-and-drop';\nimport {ImagePropType} from '../../util/proptypes';\nimport Link from '../button-link';\nimport style from './style.css';\n\nconst ImageUpload = ({\n title,\n description,\n previewLabel,\n previewContent,\n uploadLabel,\n loading,\n modified,\n disabled = false,\n onChange,\n onReset = null,\n name,\n labelLink,\n labelButtonLink,\n hrefLink,\n // See ImagePropType for accepted values\n imageTypes = ['*'],\n error = '',\n buttonAriaLabel,\n errorButtonLabel,\n pdfButtonLabel,\n pdfButtonAriaLabel\n}) => {\n const handleReset = useCallback(\n e => {\n if (isNil(onReset)) return;\n e.preventDefault();\n return onReset(e);\n },\n [onReset]\n );\n\n const linkCustomStyle = {\n width: '40px',\n color: 'red'\n };\n\n return (\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","DragAndDrop","ImagePropType","Link","style","ImageUpload","title","description","previewLabel","previewContent","uploadLabel","loading","modified","disabled","onChange","onReset","name","labelLink","labelButtonLink","hrefLink","imageTypes","error","buttonAriaLabel","errorButtonLabel","pdfButtonLabel","pdfButtonAriaLabel","handleReset","e","preventDefault","linkCustomStyle","width","color","onDragStart","onDragStop","input","templateLink","href","download","propTypes","string","func","arrayOf"],"sources":["../../../src/atom/image-upload/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {isNil} from 'lodash/fp';\nimport DragAndDrop from '../drag-and-drop';\nimport {ImagePropType} from '../../util/proptypes';\nimport Link from '../button-link';\nimport style from './style.css';\n\nconst ImageUpload = ({\n title,\n description,\n previewLabel,\n previewContent,\n uploadLabel,\n loading,\n modified,\n disabled = false,\n onChange,\n onReset = null,\n name,\n labelLink,\n labelButtonLink,\n hrefLink,\n // See ImagePropType for accepted values\n imageTypes = ['*'],\n error = '',\n buttonAriaLabel,\n errorButtonLabel,\n pdfButtonLabel,\n pdfButtonAriaLabel\n}) => {\n const handleReset = useCallback(\n e => {\n if (isNil(onReset)) return;\n e.preventDefault();\n return onReset(e);\n },\n [onReset]\n );\n\n const linkCustomStyle = {\n width: '40px',\n color: 'red'\n };\n\n return (\n <>\n <DragAndDrop\n title={title}\n description={description}\n previewLabel={previewLabel}\n previewContent={previewContent}\n uploadLabel={uploadLabel}\n loading={loading}\n modified={modified}\n onReset={handleReset}\n error={error}\n disabled={disabled}\n buttonAriaLabel={buttonAriaLabel}\n errorButtonLabel={errorButtonLabel}\n pdfButtonLabel={pdfButtonLabel}\n pdfButtonAriaLabel={pdfButtonAriaLabel}\n >\n {(onDragStart, onDragStop) => (\n <input\n type=\"file\"\n name={name}\n accept={imageTypes}\n disabled={loading || disabled}\n className={style.input}\n onChange={onChange}\n onDragEnter={onDragStart}\n onDrop={onDragStop}\n onDragLeave={onDragStop}\n />\n )}\n </DragAndDrop>\n {labelLink && hrefLink ? (\n <div className={style.templateLink}>\n {labelLink}\n <Link\n type=\"text\"\n customStyle={linkCustomStyle}\n link={{href: hrefLink, download: true}}\n label={labelButtonLink}\n />\n </div>\n ) : null}\n </>\n );\n};\n\nImageUpload.propTypes = {\n ...DragAndDrop.propTypes,\n name: PropTypes.string,\n onChange: PropTypes.func,\n onReset: PropTypes.func,\n imageTypes: PropTypes.arrayOf(ImagePropType),\n error: PropTypes.string,\n buttonAriaLabel: PropTypes.string,\n errorButtonLabel: PropTypes.string,\n labelLink: PropTypes.string,\n hrefLink: PropTypes.string\n};\n\nexport default ImageUpload;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAoEO,iGASN;;AAED;;;;;;;;;;;gBA0FC"}
|
package/es/atom/tooltip/index.js
CHANGED
|
@@ -23,6 +23,7 @@ const ToolTipWrapper = ({
|
|
|
23
23
|
handleContentMouseOver,
|
|
24
24
|
iconSize
|
|
25
25
|
}) => {
|
|
26
|
+
const coorpToolTipClasses = classnames(style.toolTip, iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip);
|
|
26
27
|
if (!toolTipIsVisible) return null;
|
|
27
28
|
|
|
28
29
|
if (anchorId) {
|
|
@@ -36,7 +37,7 @@ const ToolTipWrapper = ({
|
|
|
36
37
|
}, content);
|
|
37
38
|
} else {
|
|
38
39
|
return /*#__PURE__*/React.createElement("div", {
|
|
39
|
-
className:
|
|
40
|
+
className: coorpToolTipClasses,
|
|
40
41
|
"data-testid": "tooltip",
|
|
41
42
|
"aria-label": closeToolTipInformationTextAriaLabel,
|
|
42
43
|
onMouseOver: handleContentMouseOver
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","keys","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","toolTipReact","toolTip","bigIconToolTip","smallIconToolTip","propTypes","bool","string","isRequired","node","func","oneOf","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport keys from 'lodash/fp/keys';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n 12: style.tooltipContentFontSize12,\n 14: style.tooltipContentFontSize14\n};\n\nconst IconSizes = {\n small: 12,\n big: 20\n};\n\nconst ToolTipWrapper = ({\n toolTipIsVisible,\n anchorId,\n closeToolTipInformationTextAriaLabel,\n content,\n handleContentMouseOver,\n iconSize\n}) => {\n if (!toolTipIsVisible) return null;\n if (anchorId) {\n return (\n <ReactTooltip\n id={anchorId}\n className={style.toolTipReact}\n data-event-off=\"click\"\n place=\"left\"\n effect=\"solid\"\n aria-label={closeToolTipInformationTextAriaLabel}\n >\n {content}\n </ReactTooltip>\n );\n } else {\n return (\n <div\n className={classnames(\n style.toolTip,\n iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip\n )}\n data-testid=\"tooltip\"\n aria-label={closeToolTipInformationTextAriaLabel}\n onMouseOver={handleContentMouseOver}\n >\n {content}\n </div>\n );\n }\n};\n\nToolTipWrapper.propTypes = {\n toolTipIsVisible: PropTypes.bool,\n anchorId: PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n content: PropTypes.node,\n handleContentMouseOver: PropTypes.func,\n iconSize: PropTypes.oneOf(keys(IconSizes))\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n if (event.key === 'Enter') {\n if (ref) ref.current.focus();\n event.stopPropagation();\n event.preventDefault();\n setState(!state);\n } else if (event.key === 'Tab' || event.key === 'Escape') {\n setState(false);\n }\n};\n\nconst ToolTip = ({\n anchorId,\n TooltipContent,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestId,\n closeToolTipInformationTextAriaLabel,\n toolTipIsVisible: _toolTipIsVisible,\n iconContainerClassName,\n delayHide = 250,\n fontSize = 14,\n iconSize = 'small'\n}) => {\n const isComponent = useMemo(\n () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n [TooltipContent]\n );\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n },\n [toolTipIsVisible]\n );\n\n const handleContentMouseOver = useCallback(() => {\n mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n }, [mouseLeaveTimer]);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n }, [delayHide]);\n\n const content = useMemo(() => {\n return isComponent ? (\n <TooltipContent />\n ) : (\n <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n );\n }, [TooltipContent, fontSize, isComponent]);\n\n return anchorId ? (\n <ToolTipWrapper\n toolTipIsVisible={_toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n fontSize={fontSize}\n />\n ) : (\n <div\n className={style.tooltipContainer}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n <button\n type=\"button\"\n className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n data-testid={dataTestId}\n onKeyDown={handleKeyPress}\n tabIndex={0}\n >\n <InformationIcon\n className={style.informationIcon}\n width={IconSizes[iconSize]}\n height={IconSizes[iconSize]}\n aria-label={ariaLabel}\n />\n </button>\n <ToolTipWrapper\n toolTipIsVisible={toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n handleContentMouseOver={handleContentMouseOver}\n fontSize={fontSize}\n iconSize={iconSize}\n />\n </div>\n );\n};\n\nToolTip.propTypes = {\n TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n 'data-testid': PropTypes.string,\n 'aria-label': PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n // ---------- Regular Tooltip exclusive --------------\n iconContainerClassName: PropTypes.string,\n delayHide: PropTypes.number,\n fontSize: PropTypes.oneOf([12, 14]),\n iconSize: PropTypes.oneOf(keys(IconSizes)),\n // ---------- React Tooltip exclusive --------------\n // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n // parents overflow hidden controls\n // data-for={anchorId} && data-tooltip-place=\"left\" are needed on the anchored component\n anchorId: PropTypes.string,\n toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","keys","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","coorpToolTipClasses","toolTip","bigIconToolTip","smallIconToolTip","toolTipReact","propTypes","bool","string","isRequired","node","func","oneOf","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport keys from 'lodash/fp/keys';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n 12: style.tooltipContentFontSize12,\n 14: style.tooltipContentFontSize14\n};\n\nconst IconSizes = {\n small: 12,\n big: 20\n};\n\nconst ToolTipWrapper = ({\n toolTipIsVisible,\n anchorId,\n closeToolTipInformationTextAriaLabel,\n content,\n handleContentMouseOver,\n iconSize\n}) => {\n const coorpToolTipClasses = classnames(\n style.toolTip,\n iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip\n );\n if (!toolTipIsVisible) return null;\n if (anchorId) {\n return (\n <ReactTooltip\n id={anchorId}\n className={style.toolTipReact}\n data-event-off=\"click\"\n place=\"left\"\n effect=\"solid\"\n aria-label={closeToolTipInformationTextAriaLabel}\n >\n {content}\n </ReactTooltip>\n );\n } else {\n return (\n <div\n className={coorpToolTipClasses}\n data-testid=\"tooltip\"\n aria-label={closeToolTipInformationTextAriaLabel}\n onMouseOver={handleContentMouseOver}\n >\n {content}\n </div>\n );\n }\n};\n\nToolTipWrapper.propTypes = {\n toolTipIsVisible: PropTypes.bool,\n anchorId: PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n content: PropTypes.node,\n handleContentMouseOver: PropTypes.func,\n iconSize: PropTypes.oneOf(keys(IconSizes))\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n if (event.key === 'Enter') {\n if (ref) ref.current.focus();\n event.stopPropagation();\n event.preventDefault();\n setState(!state);\n } else if (event.key === 'Tab' || event.key === 'Escape') {\n setState(false);\n }\n};\n\nconst ToolTip = ({\n anchorId,\n TooltipContent,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestId,\n closeToolTipInformationTextAriaLabel,\n toolTipIsVisible: _toolTipIsVisible,\n iconContainerClassName,\n delayHide = 250,\n fontSize = 14,\n iconSize = 'small'\n}) => {\n const isComponent = useMemo(\n () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n [TooltipContent]\n );\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n },\n [toolTipIsVisible]\n );\n\n const handleContentMouseOver = useCallback(() => {\n mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n }, [mouseLeaveTimer]);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n }, [delayHide]);\n\n const content = useMemo(() => {\n return isComponent ? (\n <TooltipContent />\n ) : (\n <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n );\n }, [TooltipContent, fontSize, isComponent]);\n\n return anchorId ? (\n <ToolTipWrapper\n toolTipIsVisible={_toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n fontSize={fontSize}\n />\n ) : (\n <div\n className={style.tooltipContainer}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n <button\n type=\"button\"\n className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n data-testid={dataTestId}\n onKeyDown={handleKeyPress}\n tabIndex={0}\n >\n <InformationIcon\n className={style.informationIcon}\n width={IconSizes[iconSize]}\n height={IconSizes[iconSize]}\n aria-label={ariaLabel}\n />\n </button>\n <ToolTipWrapper\n toolTipIsVisible={toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n handleContentMouseOver={handleContentMouseOver}\n fontSize={fontSize}\n iconSize={iconSize}\n />\n </div>\n );\n};\n\nToolTip.propTypes = {\n TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n 'data-testid': PropTypes.string,\n 'aria-label': PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n // ---------- Regular Tooltip exclusive --------------\n iconContainerClassName: PropTypes.string,\n delayHide: PropTypes.number,\n fontSize: PropTypes.oneOf([12, 14]),\n iconSize: PropTypes.oneOf(keys(IconSizes)),\n // ---------- React Tooltip exclusive --------------\n // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n // parents overflow hidden controls\n // data-for={anchorId} && data-tooltip-place=\"left\" are needed on the anchored component\n anchorId: PropTypes.string,\n toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
|