@coorpacademy/components 11.39.3 → 11.39.4-alpha.2
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/chip/index.d.ts.map +1 -1
- package/es/atom/chip/index.js +3 -0
- package/es/atom/chip/index.js.map +1 -1
- package/es/atom/input-text/index.d.ts +1 -0
- package/es/atom/input-text/index.d.ts.map +1 -1
- package/es/atom/input-text/index.js +4 -1
- package/es/atom/input-text/index.js.map +1 -1
- package/es/atom/input-text/style.css +28 -1
- package/es/atom/input-text-with-title/index.d.ts +1 -0
- package/es/atom/input-textarea/index.d.ts +1 -0
- package/es/atom/input-textarea/index.d.ts.map +1 -1
- package/es/atom/input-textarea/index.js +4 -1
- package/es/atom/input-textarea/index.js.map +1 -1
- package/es/atom/input-textarea/style.css +37 -0
- package/es/atom/select/index.d.ts +1 -0
- package/es/atom/select/index.d.ts.map +1 -1
- package/es/atom/select/index.js +26 -11
- package/es/atom/select/index.js.map +1 -1
- package/es/atom/select/style.css +61 -0
- package/es/atom/status-item/index.d.ts.map +1 -1
- package/es/atom/status-item/index.js +15 -15
- package/es/atom/status-item/index.js.map +1 -1
- package/es/molecule/base-modal/index.d.ts.map +1 -1
- package/es/molecule/base-modal/index.js +14 -0
- package/es/molecule/base-modal/index.js.map +1 -1
- package/es/molecule/bullet-point-menu-button/index.d.ts.map +1 -1
- package/es/molecule/bullet-point-menu-button/index.js +42 -2
- package/es/molecule/bullet-point-menu-button/index.js.map +1 -1
- package/es/molecule/card/favorite.d.ts.map +1 -1
- package/es/molecule/card/favorite.js +13 -0
- package/es/molecule/card/favorite.js.map +1 -1
- package/es/molecule/course-sections/index.d.ts +1 -0
- package/es/molecule/drag-and-drop/index.d.ts +1 -0
- package/es/molecule/drag-and-drop/upload-report.d.ts +1 -0
- package/es/molecule/filters/index.d.ts +1 -0
- package/es/molecule/filters/index.d.ts.map +1 -1
- package/es/molecule/icon-preview/style.css +3 -0
- package/es/molecule/skill-picker-modal/index.js +1 -1
- package/es/molecule/skill-picker-modal/index.js.map +1 -1
- package/es/molecule/title-and-checkbox-wrapper/index.d.ts +1 -0
- package/es/molecule/translation-modal/index.d.ts +4 -0
- package/es/molecule/translation-modal/index.d.ts.map +1 -1
- package/es/molecule/translation-modal/index.js +11 -6
- package/es/molecule/translation-modal/index.js.map +1 -1
- package/es/organism/content-translation/index.d.ts +2 -0
- package/es/organism/icon-editor/index.d.ts +1 -0
- package/es/organism/icon-editor/index.d.ts.map +1 -1
- package/es/organism/icon-editor/types.d.ts +1 -0
- package/es/organism/icon-editor/types.d.ts.map +1 -1
- package/es/organism/rewards-form/index.d.ts +1 -0
- package/es/organism/select-opponents/index.d.ts +1 -0
- package/es/organism/select-opponents/index.d.ts.map +1 -1
- package/es/organism/select-opponents/types.d.ts +1 -0
- package/es/organism/select-opponents/types.d.ts.map +1 -1
- package/es/organism/skill-edition/index.d.ts +22 -0
- package/es/organism/skill-edition/index.d.ts.map +1 -1
- package/es/organism/skill-edition/index.js +61 -36
- package/es/organism/skill-edition/index.js.map +1 -1
- package/es/organism/skill-edition/style.css +1 -1
- package/es/organism/skill-edition/types.d.ts +27 -1
- package/es/organism/skill-edition/types.d.ts.map +1 -1
- package/es/organism/skill-edition/types.js +24 -5
- package/es/organism/skill-edition/types.js.map +1 -1
- package/es/organism/title-and-input/index.d.ts +5 -0
- package/es/organism/title-and-input/index.d.ts.map +1 -1
- package/es/organism/title-and-input/types.d.ts +5 -0
- package/es/organism/title-and-input/types.d.ts.map +1 -1
- package/es/organism/wizard-contents/index.d.ts +4 -0
- package/es/template/back-office/brand-update/index.d.ts +22 -0
- package/es/template/back-office/brand-update/index.d.ts.map +1 -1
- package/es/template/back-office/brand-update/index.js +6 -3
- package/es/template/back-office/brand-update/index.js.map +1 -1
- package/es/template/certifications/index.d.ts +1 -0
- package/es/template/common/search-page/index.d.ts +1 -0
- package/es/template/playlist-detail/index.d.ts +1 -0
- package/es/util/render-with-context.d.ts.map +1 -1
- package/es/util/render-with-context.js +3 -2
- package/es/util/render-with-context.js.map +1 -1
- package/lib/atom/chip/index.d.ts.map +1 -1
- package/lib/atom/chip/index.js +3 -0
- package/lib/atom/chip/index.js.map +1 -1
- package/lib/atom/input-text/index.d.ts +1 -0
- package/lib/atom/input-text/index.d.ts.map +1 -1
- package/lib/atom/input-text/index.js +4 -1
- package/lib/atom/input-text/index.js.map +1 -1
- package/lib/atom/input-text/style.css +28 -1
- package/lib/atom/input-text-with-title/index.d.ts +1 -0
- package/lib/atom/input-textarea/index.d.ts +1 -0
- package/lib/atom/input-textarea/index.d.ts.map +1 -1
- package/lib/atom/input-textarea/index.js +4 -1
- package/lib/atom/input-textarea/index.js.map +1 -1
- package/lib/atom/input-textarea/style.css +37 -0
- package/lib/atom/select/index.d.ts +1 -0
- package/lib/atom/select/index.d.ts.map +1 -1
- package/lib/atom/select/index.js +26 -11
- package/lib/atom/select/index.js.map +1 -1
- package/lib/atom/select/style.css +61 -0
- package/lib/atom/status-item/index.d.ts.map +1 -1
- package/lib/atom/status-item/index.js +15 -17
- package/lib/atom/status-item/index.js.map +1 -1
- package/lib/molecule/base-modal/index.d.ts.map +1 -1
- package/lib/molecule/base-modal/index.js +14 -0
- package/lib/molecule/base-modal/index.js.map +1 -1
- package/lib/molecule/bullet-point-menu-button/index.d.ts.map +1 -1
- package/lib/molecule/bullet-point-menu-button/index.js +41 -2
- package/lib/molecule/bullet-point-menu-button/index.js.map +1 -1
- package/lib/molecule/card/favorite.d.ts.map +1 -1
- package/lib/molecule/card/favorite.js +13 -0
- package/lib/molecule/card/favorite.js.map +1 -1
- package/lib/molecule/course-sections/index.d.ts +1 -0
- package/lib/molecule/drag-and-drop/index.d.ts +1 -0
- package/lib/molecule/drag-and-drop/upload-report.d.ts +1 -0
- package/lib/molecule/filters/index.d.ts +1 -0
- package/lib/molecule/filters/index.d.ts.map +1 -1
- package/lib/molecule/icon-preview/style.css +3 -0
- package/lib/molecule/skill-picker-modal/index.js +1 -1
- package/lib/molecule/skill-picker-modal/index.js.map +1 -1
- package/lib/molecule/title-and-checkbox-wrapper/index.d.ts +1 -0
- package/lib/molecule/translation-modal/index.d.ts +4 -0
- package/lib/molecule/translation-modal/index.d.ts.map +1 -1
- package/lib/molecule/translation-modal/index.js +11 -6
- package/lib/molecule/translation-modal/index.js.map +1 -1
- package/lib/organism/content-translation/index.d.ts +2 -0
- package/lib/organism/icon-editor/index.d.ts +1 -0
- package/lib/organism/icon-editor/index.d.ts.map +1 -1
- package/lib/organism/icon-editor/types.d.ts +1 -0
- package/lib/organism/icon-editor/types.d.ts.map +1 -1
- package/lib/organism/rewards-form/index.d.ts +1 -0
- package/lib/organism/select-opponents/index.d.ts +1 -0
- package/lib/organism/select-opponents/index.d.ts.map +1 -1
- package/lib/organism/select-opponents/types.d.ts +1 -0
- package/lib/organism/select-opponents/types.d.ts.map +1 -1
- package/lib/organism/skill-edition/index.d.ts +22 -0
- package/lib/organism/skill-edition/index.d.ts.map +1 -1
- package/lib/organism/skill-edition/index.js +61 -36
- package/lib/organism/skill-edition/index.js.map +1 -1
- package/lib/organism/skill-edition/style.css +1 -1
- package/lib/organism/skill-edition/types.d.ts +27 -1
- package/lib/organism/skill-edition/types.d.ts.map +1 -1
- package/lib/organism/skill-edition/types.js +24 -5
- package/lib/organism/skill-edition/types.js.map +1 -1
- package/lib/organism/title-and-input/index.d.ts +5 -0
- package/lib/organism/title-and-input/index.d.ts.map +1 -1
- package/lib/organism/title-and-input/types.d.ts +5 -0
- package/lib/organism/title-and-input/types.d.ts.map +1 -1
- package/lib/organism/wizard-contents/index.d.ts +4 -0
- package/lib/template/back-office/brand-update/index.d.ts +22 -0
- package/lib/template/back-office/brand-update/index.d.ts.map +1 -1
- package/lib/template/back-office/brand-update/index.js +6 -3
- package/lib/template/back-office/brand-update/index.js.map +1 -1
- package/lib/template/certifications/index.d.ts +1 -0
- package/lib/template/common/search-page/index.d.ts +1 -0
- package/lib/template/playlist-detail/index.d.ts +1 -0
- package/lib/util/render-with-context.d.ts.map +1 -1
- package/lib/util/render-with-context.js +3 -2
- package/lib/util/render-with-context.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAmBO,qGAG0E;;AAGjF,6DAiEC"}
|
package/es/atom/chip/index.js
CHANGED
|
@@ -4,9 +4,12 @@ import classnames from 'classnames';
|
|
|
4
4
|
import get from 'lodash/fp/get';
|
|
5
5
|
import { convert } from 'css-color-function';
|
|
6
6
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
7
|
+
import { fas } from '@fortawesome/pro-solid-svg-icons';
|
|
8
|
+
import { library } from '@fortawesome/fontawesome-svg-core';
|
|
7
9
|
import Provider from '../provider';
|
|
8
10
|
import { COLORS } from '../../variables/colors';
|
|
9
11
|
import style from './style.css';
|
|
12
|
+
library.add(fas);
|
|
10
13
|
const LUMINOSITY_DELTA = 0.08;
|
|
11
14
|
const {
|
|
12
15
|
cm_primary_blue: DEFAULT_BACKGROUND_COLOR
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","get","convert","FontAwesomeIcon","Provider","COLORS","style","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Chip","props","context","text","subText","selected","customIcon","onClick","leftIcon","backgroundColor","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","color","white","cm_grey_400","createElement","className","container","unselected","onMouseEnter","onMouseLeave","left","icon","fontSize","title","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","func"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport get from 'lodash/fp/get';\nimport {convert} from 'css-color-function';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n selectedBgColor,\n luminosityDelta = LUMINOSITY_DELTA\n) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`);\n// note: luminosity decrease is relative to the selected color\n\nconst Chip = (props, context) => {\n const {\n text,\n subText,\n selected = false,\n customIcon,\n onClick,\n leftIcon,\n backgroundColor = DEFAULT_BACKGROUND_COLOR\n } = props;\n const {skin} = context;\n const skinColor = get('common.primary', skin);\n const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;\n const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n const [isHovered, setIsHovered] = useState(false);\n\n const handleClick = useMemo(() => onClick, [onClick]);\n\n const handleMouseEnter = useCallback(() => {\n setIsHovered(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHovered(false);\n }, []);\n\n const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n const color = selected ? COLORS.white : COLORS.cm_grey_400;\n\n return (\n <div\n className={classnames(style.container, !selected && style.unselected)}\n style={{\n ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n ...(selected && hoverStyle)\n }}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n aria-label={text}\n data-name={`chip-${text}`}\n >\n <div className={style.left}>\n {leftIcon ? <FontAwesomeIcon style={{color}} icon={leftIcon} fontSize={ICON_SIZE} /> : null}\n <div title={text}>\n <span className={style.text} style={{color}}>\n {text}\n </span>\n {subText ? (\n <span className={style.subText} style={{color}}>\n {subText}\n </span>\n ) : null}\n </div>\n </div>\n <FontAwesomeIcon\n style={{color}}\n icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n fontSize={ICON_SIZE}\n />\n </div>\n );\n};\n\nChip.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n text: PropTypes.string,\n subText: PropTypes.string,\n selected: PropTypes.bool,\n customIcon: PropTypes.string,\n backgroundColor: PropTypes.string,\n onClick: PropTypes.func,\n leftIcon: PropTypes.string\n};\n\nexport default Chip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAGC,OAAO,EAAEC,QAAQ,EAAEC,WAAW,QAAO,OAAO;AAC3D,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,GAAG,MAAM,eAAe;AAC/B,SAAQC,OAAO,QAAO,oBAAoB;AAC1C,SAAQC,eAAe,QAAO,gCAAgC;AAC9D,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAAQC,MAAM,QAAO,wBAAwB;AAC7C,OAAOC,KAAK,MAAM,aAAa;AAE/
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","get","convert","FontAwesomeIcon","fas","library","Provider","COLORS","style","add","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Chip","props","context","text","subText","selected","customIcon","onClick","leftIcon","backgroundColor","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","color","white","cm_grey_400","createElement","className","container","unselected","onMouseEnter","onMouseLeave","left","icon","fontSize","title","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","func"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport get from 'lodash/fp/get';\nimport {convert} from 'css-color-function';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n selectedBgColor,\n luminosityDelta = LUMINOSITY_DELTA\n) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`);\n// note: luminosity decrease is relative to the selected color\n\nconst Chip = (props, context) => {\n const {\n text,\n subText,\n selected = false,\n customIcon,\n onClick,\n leftIcon,\n backgroundColor = DEFAULT_BACKGROUND_COLOR\n } = props;\n const {skin} = context;\n const skinColor = get('common.primary', skin);\n const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;\n const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n const [isHovered, setIsHovered] = useState(false);\n\n const handleClick = useMemo(() => onClick, [onClick]);\n\n const handleMouseEnter = useCallback(() => {\n setIsHovered(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHovered(false);\n }, []);\n\n const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n const color = selected ? COLORS.white : COLORS.cm_grey_400;\n\n return (\n <div\n className={classnames(style.container, !selected && style.unselected)}\n style={{\n ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n ...(selected && hoverStyle)\n }}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n aria-label={text}\n data-name={`chip-${text}`}\n >\n <div className={style.left}>\n {leftIcon ? <FontAwesomeIcon style={{color}} icon={leftIcon} fontSize={ICON_SIZE} /> : null}\n <div title={text}>\n <span className={style.text} style={{color}}>\n {text}\n </span>\n {subText ? (\n <span className={style.subText} style={{color}}>\n {subText}\n </span>\n ) : null}\n </div>\n </div>\n <FontAwesomeIcon\n style={{color}}\n icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n fontSize={ICON_SIZE}\n />\n </div>\n );\n};\n\nChip.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n text: PropTypes.string,\n subText: PropTypes.string,\n selected: PropTypes.bool,\n customIcon: PropTypes.string,\n backgroundColor: PropTypes.string,\n onClick: PropTypes.func,\n leftIcon: PropTypes.string\n};\n\nexport default Chip;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,6 +8,7 @@ declare namespace InputText {
|
|
|
8
8
|
defaultValue: PropTypes.Requireable<string>;
|
|
9
9
|
theme: PropTypes.Requireable<string>;
|
|
10
10
|
disabled: PropTypes.Requireable<boolean>;
|
|
11
|
+
readOnly: PropTypes.Requireable<boolean>;
|
|
11
12
|
value: PropTypes.Requireable<string>;
|
|
12
13
|
hint: PropTypes.Requireable<string>;
|
|
13
14
|
error: PropTypes.Requireable<string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-text/index.js"],"names":[],"mappings":";AAkBA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-text/index.js"],"names":[],"mappings":";AAkBA,oDA+FC"}
|
|
@@ -28,6 +28,7 @@ const InputText = props => {
|
|
|
28
28
|
theme = 'default',
|
|
29
29
|
description,
|
|
30
30
|
disabled,
|
|
31
|
+
readOnly = false,
|
|
31
32
|
modified = false,
|
|
32
33
|
title: propsTitle,
|
|
33
34
|
'data-name': dataName = 'input-text',
|
|
@@ -63,7 +64,7 @@ const InputText = props => {
|
|
|
63
64
|
className: style.leftIcon
|
|
64
65
|
}) : null;
|
|
65
66
|
return /*#__PURE__*/React.createElement("div", {
|
|
66
|
-
className: classnames(mainClass, className, disabled && style.disabled, _isNil(propsTitle) && style.isNoTitle)
|
|
67
|
+
className: classnames(mainClass, className, disabled && style.disabled, readOnly && style.readOnly, _isNil(propsTitle) && style.isNoTitle)
|
|
67
68
|
}, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("span", {
|
|
68
69
|
className: classnames(style.title, _isEmpty(value) && style.noValue)
|
|
69
70
|
}, propsTitle, toolTipView), /*#__PURE__*/React.createElement("input", {
|
|
@@ -77,6 +78,7 @@ const InputText = props => {
|
|
|
77
78
|
value: value,
|
|
78
79
|
onInput: handleChange,
|
|
79
80
|
disabled: disabled,
|
|
81
|
+
readOnly: readOnly,
|
|
80
82
|
onChange: _noop,
|
|
81
83
|
"data-name": dataName,
|
|
82
84
|
"aria-label": ariaLabel
|
|
@@ -94,6 +96,7 @@ InputText.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
94
96
|
defaultValue: PropTypes.string,
|
|
95
97
|
theme: PropTypes.oneOf(_keys(themeStyle)),
|
|
96
98
|
disabled: PropTypes.bool,
|
|
99
|
+
readOnly: PropTypes.bool,
|
|
97
100
|
value: PropTypes.string,
|
|
98
101
|
hint: PropTypes.string,
|
|
99
102
|
error: PropTypes.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","classnames","getClassState","style","themeStyle","setup","coorpmanager","cockpit","default","defaultStyle","InputText","props","autoFocus","placeholder","value","type","hint","defaultValue","onChange","_noop","error","valid","theme","description","disabled","modified","title","propsTitle","dataName","ariaLabel","inputColor","isCMTheme","handleChange","e","target","mainClass","className","descriptionView","createElement","toolTipView","infoIconWrapper","infoIcon","descriptionLabel","hintView","dangerouslySetInnerHTML","__html","errorIconView","leftIcon","validIconView","_isNil","isNoTitle","_isEmpty","noValue","name","input","autoComplete","onInput","preview","backgroundColor","propTypes","process","env","NODE_ENV","bool","string","oneOf","_keys","func"],"sources":["../../../src/atom/input-text/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, isNil, keys, isEmpty} from 'lodash/fp';\nimport {\n NovaSolidStatusCheckCircle2 as CheckIcon,\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n coorpmanager: style.coorpmanager,\n cockpit: style.cockpit,\n default: style.defaultStyle\n};\nconst InputText = props => {\n const {\n autoFocus = false,\n placeholder = '',\n value,\n type = 'text',\n hint,\n defaultValue,\n onChange = noop,\n error,\n valid,\n theme = 'default',\n description,\n disabled,\n modified = false,\n title: propsTitle,\n 'data-name': dataName = 'input-text',\n 'aria-label': ariaLabel = 'Input Text',\n inputColor = false\n } = props;\n\n const isCMTheme = theme === 'coorpmanager';\n const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n const mainClass = themeStyle[theme];\n const className = getClassState(style.defaultStyle, style.modified, style.error, modified, error);\n const descriptionView =\n description && theme !== 'coorpmanager' ? (\n <div className={style.description}>{description}</div>\n ) : null;\n const toolTipView =\n description && theme === 'coorpmanager' ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null;\n const hintView =\n theme === 'coorpmanager' ? (\n <div\n className={style.hint}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: error || hint}}\n />\n ) : null;\n const errorIconView = isCMTheme && error ? <ErrorIcon className={style.leftIcon} /> : null;\n const validIconView = isCMTheme && valid ? <CheckIcon className={style.leftIcon} /> : null;\n\n return (\n <div\n className={classnames(\n mainClass,\n className,\n disabled && style.disabled,\n isNil(propsTitle) && style.isNoTitle\n )}\n >\n <label>\n <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n {propsTitle}\n {toolTipView}\n </span>\n\n <input\n autoFocus={autoFocus}\n type={type}\n name={propsTitle}\n className={style.input}\n placeholder={placeholder}\n defaultValue={defaultValue}\n autoComplete={'off'}\n value={value}\n onInput={handleChange}\n disabled={disabled}\n onChange={noop}\n data-name={dataName}\n aria-label={ariaLabel}\n />\n {inputColor && !error && value ? (\n <span\n className={style.preview}\n style={{\n backgroundColor: value\n }}\n />\n ) : null}\n {errorIconView}\n {validIconView}\n {hintView}\n </label>\n {descriptionView}\n </div>\n );\n};\n\nInputText.propTypes = {\n autoFocus: PropTypes.bool,\n title: PropTypes.string,\n placeholder: PropTypes.string,\n defaultValue: PropTypes.string,\n theme: PropTypes.oneOf(keys(themeStyle)),\n disabled: PropTypes.bool,\n value: PropTypes.string,\n hint: PropTypes.string,\n error: PropTypes.string,\n onChange: PropTypes.func,\n description: PropTypes.string,\n modified: PropTypes.bool,\n type: PropTypes.string,\n valid: PropTypes.bool,\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n inputColor: PropTypes.bool\n};\nexport default InputText;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAGC,OAAO,QAAO,OAAO;AACpC,OAAOC,SAAS,MAAM,YAAY;AAElC,SACEC,2BAA2B,IAAIC,SAAS,EACxCC,oBAAoB,IAAIC,SAAS,EACjCC,0CAA0C,IAAIC,QAAQ,QACjD,0BAA0B;AACjC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,UAAU,GAAG;EACjBC,KAAK,EAAEF,KAAK,CAACE,KAAK;EAClBC,YAAY,EAAEH,KAAK,CAACG,YAAY;EAChCC,OAAO,EAAEJ,KAAK,CAACI,OAAO;EACtBC,OAAO,EAAEL,KAAK,CAACM;AACjB,CAAC;AACD,MAAMC,SAAS,GAAGC,KAAK,IAAI;EACzB,MAAM;IACJC,SAAS,GAAG,KAAK;IACjBC,WAAW,GAAG,EAAE;IAChBC,KAAK;IACLC,IAAI,GAAG,MAAM;IACbC,IAAI;IACJC,YAAY;IACZC,QAAQ,GAAAC,KAAO;IACfC,KAAK;IACLC,KAAK;IACLC,KAAK,GAAG,SAAS;IACjBC,WAAW;IACXC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,KAAK,EAAEC,UAAU;IACjB,WAAW,EAAEC,QAAQ,GAAG,YAAY;IACpC,YAAY,EAAEC,SAAS,GAAG,YAAY;IACtCC,UAAU,GAAG;EACf,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","classnames","getClassState","style","themeStyle","setup","coorpmanager","cockpit","default","defaultStyle","InputText","props","autoFocus","placeholder","value","type","hint","defaultValue","onChange","_noop","error","valid","theme","description","disabled","readOnly","modified","title","propsTitle","dataName","ariaLabel","inputColor","isCMTheme","handleChange","e","target","mainClass","className","descriptionView","createElement","toolTipView","infoIconWrapper","infoIcon","descriptionLabel","hintView","dangerouslySetInnerHTML","__html","errorIconView","leftIcon","validIconView","_isNil","isNoTitle","_isEmpty","noValue","name","input","autoComplete","onInput","preview","backgroundColor","propTypes","process","env","NODE_ENV","bool","string","oneOf","_keys","func"],"sources":["../../../src/atom/input-text/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, isNil, keys, isEmpty} from 'lodash/fp';\nimport {\n NovaSolidStatusCheckCircle2 as CheckIcon,\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n coorpmanager: style.coorpmanager,\n cockpit: style.cockpit,\n default: style.defaultStyle\n};\nconst InputText = props => {\n const {\n autoFocus = false,\n placeholder = '',\n value,\n type = 'text',\n hint,\n defaultValue,\n onChange = noop,\n error,\n valid,\n theme = 'default',\n description,\n disabled,\n readOnly = false,\n modified = false,\n title: propsTitle,\n 'data-name': dataName = 'input-text',\n 'aria-label': ariaLabel = 'Input Text',\n inputColor = false\n } = props;\n\n const isCMTheme = theme === 'coorpmanager';\n const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n const mainClass = themeStyle[theme];\n const className = getClassState(style.defaultStyle, style.modified, style.error, modified, error);\n const descriptionView =\n description && theme !== 'coorpmanager' ? (\n <div className={style.description}>{description}</div>\n ) : null;\n const toolTipView =\n description && theme === 'coorpmanager' ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null;\n const hintView =\n theme === 'coorpmanager' ? (\n <div\n className={style.hint}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: error || hint}}\n />\n ) : null;\n const errorIconView = isCMTheme && error ? <ErrorIcon className={style.leftIcon} /> : null;\n const validIconView = isCMTheme && valid ? <CheckIcon className={style.leftIcon} /> : null;\n\n return (\n <div\n className={classnames(\n mainClass,\n className,\n disabled && style.disabled,\n readOnly && style.readOnly,\n isNil(propsTitle) && style.isNoTitle\n )}\n >\n <label>\n <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n {propsTitle}\n {toolTipView}\n </span>\n\n <input\n autoFocus={autoFocus}\n type={type}\n name={propsTitle}\n className={style.input}\n placeholder={placeholder}\n defaultValue={defaultValue}\n autoComplete={'off'}\n value={value}\n onInput={handleChange}\n disabled={disabled}\n readOnly={readOnly}\n onChange={noop}\n data-name={dataName}\n aria-label={ariaLabel}\n />\n {inputColor && !error && value ? (\n <span\n className={style.preview}\n style={{\n backgroundColor: value\n }}\n />\n ) : null}\n {errorIconView}\n {validIconView}\n {hintView}\n </label>\n {descriptionView}\n </div>\n );\n};\n\nInputText.propTypes = {\n autoFocus: PropTypes.bool,\n title: PropTypes.string,\n placeholder: PropTypes.string,\n defaultValue: PropTypes.string,\n theme: PropTypes.oneOf(keys(themeStyle)),\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n value: PropTypes.string,\n hint: PropTypes.string,\n error: PropTypes.string,\n onChange: PropTypes.func,\n description: PropTypes.string,\n modified: PropTypes.bool,\n type: PropTypes.string,\n valid: PropTypes.bool,\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n inputColor: PropTypes.bool\n};\nexport default InputText;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAGC,OAAO,QAAO,OAAO;AACpC,OAAOC,SAAS,MAAM,YAAY;AAElC,SACEC,2BAA2B,IAAIC,SAAS,EACxCC,oBAAoB,IAAIC,SAAS,EACjCC,0CAA0C,IAAIC,QAAQ,QACjD,0BAA0B;AACjC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,UAAU,GAAG;EACjBC,KAAK,EAAEF,KAAK,CAACE,KAAK;EAClBC,YAAY,EAAEH,KAAK,CAACG,YAAY;EAChCC,OAAO,EAAEJ,KAAK,CAACI,OAAO;EACtBC,OAAO,EAAEL,KAAK,CAACM;AACjB,CAAC;AACD,MAAMC,SAAS,GAAGC,KAAK,IAAI;EACzB,MAAM;IACJC,SAAS,GAAG,KAAK;IACjBC,WAAW,GAAG,EAAE;IAChBC,KAAK;IACLC,IAAI,GAAG,MAAM;IACbC,IAAI;IACJC,YAAY;IACZC,QAAQ,GAAAC,KAAO;IACfC,KAAK;IACLC,KAAK;IACLC,KAAK,GAAG,SAAS;IACjBC,WAAW;IACXC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,QAAQ,GAAG,KAAK;IAChBC,KAAK,EAAEC,UAAU;IACjB,WAAW,EAAEC,QAAQ,GAAG,YAAY;IACpC,YAAY,EAAEC,SAAS,GAAG,YAAY;IACtCC,UAAU,GAAG;EACf,CAAC,GAAGpB,KAAK;EAET,MAAMqB,SAAS,GAAGV,KAAK,KAAK,cAAc;EAC1C,MAAMW,YAAY,GAAGxC,OAAO,CAAC,MAAMyC,CAAC,IAAIhB,QAAQ,CAACgB,CAAC,CAACC,MAAM,CAACrB,KAAK,CAAC,EAAE,CAACI,QAAQ,CAAC,CAAC;EAC7E,MAAMkB,SAAS,GAAGhC,UAAU,CAACkB,KAAK,CAAC;EACnC,MAAMe,SAAS,GAAGnC,aAAa,CAACC,KAAK,CAACM,YAAY,EAAEN,KAAK,CAACuB,QAAQ,EAAEvB,KAAK,CAACiB,KAAK,EAAEM,QAAQ,EAAEN,KAAK,CAAC;EACjG,MAAMkB,eAAe,GACnBf,WAAW,IAAID,KAAK,KAAK,cAAc,gBACrC9B,KAAA,CAAA+C,aAAA;IAAKF,SAAS,EAAElC,KAAK,CAACoB;EAAY,GAAEA,WAAiB,CAAC,GACpD,IAAI;EACV,MAAMiB,WAAW,GACfjB,WAAW,IAAID,KAAK,KAAK,cAAc,gBACrC9B,KAAA,CAAA+C,aAAA;IAAKF,SAAS,EAAElC,KAAK,CAACsC;EAAgB,gBACpCjD,KAAA,CAAA+C,aAAA,CAACvC,QAAQ;IAACqC,SAAS,EAAElC,KAAK,CAACuC;EAAS,CAAE,CAAC,eACvClD,KAAA,CAAA+C,aAAA;IAAKF,SAAS,EAAElC,KAAK,CAACwC;EAAiB,GAAEpB,WAAiB,CACvD,CAAC,GACJ,IAAI;EACV,MAAMqB,QAAQ,GACZtB,KAAK,KAAK,cAAc,gBACtB9B,KAAA,CAAA+C,aAAA;IACEF,SAAS,EAAElC,KAAK,CAACa;IACjB;IAAA;IACA6B,uBAAuB,EAAE;MAACC,MAAM,EAAE1B,KAAK,IAAIJ;IAAI;EAAE,CAClD,CAAC,GACA,IAAI;EACV,MAAM+B,aAAa,GAAGf,SAAS,IAAIZ,KAAK,gBAAG5B,KAAA,CAAA+C,aAAA,CAACzC,SAAS;IAACuC,SAAS,EAAElC,KAAK,CAAC6C;EAAS,CAAE,CAAC,GAAG,IAAI;EAC1F,MAAMC,aAAa,GAAGjB,SAAS,IAAIX,KAAK,gBAAG7B,KAAA,CAAA+C,aAAA,CAAC3C,SAAS;IAACyC,SAAS,EAAElC,KAAK,CAAC6C;EAAS,CAAE,CAAC,GAAG,IAAI;EAE1F,oBACExD,KAAA,CAAA+C,aAAA;IACEF,SAAS,EAAEpC,UAAU,CACnBmC,SAAS,EACTC,SAAS,EACTb,QAAQ,IAAIrB,KAAK,CAACqB,QAAQ,EAC1BC,QAAQ,IAAItB,KAAK,CAACsB,QAAQ,EAC1ByB,MAAA,CAAMtB,UAAU,CAAC,IAAIzB,KAAK,CAACgD,SAC7B;EAAE,gBAEF3D,KAAA,CAAA+C,aAAA,6BACE/C,KAAA,CAAA+C,aAAA;IAAMF,SAAS,EAAEpC,UAAU,CAACE,KAAK,CAACwB,KAAK,EAAEyB,QAAA,CAAQtC,KAAK,CAAC,IAAIX,KAAK,CAACkD,OAAO;EAAE,GACvEzB,UAAU,EACVY,WACG,CAAC,eAEPhD,KAAA,CAAA+C,aAAA;IACE3B,SAAS,EAAEA,SAAU;IACrBG,IAAI,EAAEA,IAAK;IACXuC,IAAI,EAAE1B,UAAW;IACjBS,SAAS,EAAElC,KAAK,CAACoD,KAAM;IACvB1C,WAAW,EAAEA,WAAY;IACzBI,YAAY,EAAEA,YAAa;IAC3BuC,YAAY,EAAE,KAAM;IACpB1C,KAAK,EAAEA,KAAM;IACb2C,OAAO,EAAExB,YAAa;IACtBT,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBP,QAAQ,EAAAC,KAAO;IACf,aAAWU,QAAS;IACpB,cAAYC;EAAU,CACvB,CAAC,EACDC,UAAU,IAAI,CAACX,KAAK,IAAIN,KAAK,gBAC5BtB,KAAA,CAAA+C,aAAA;IACEF,SAAS,EAAElC,KAAK,CAACuD,OAAQ;IACzBvD,KAAK,EAAE;MACLwD,eAAe,EAAE7C;IACnB;EAAE,CACH,CAAC,GACA,IAAI,EACPiC,aAAa,EACbE,aAAa,EACbL,QACI,CAAC,EACPN,eACE,CAAC;AAEV,CAAC;AAED5B,SAAS,CAACkD,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACpBnD,SAAS,EAAElB,SAAS,CAACsE,IAAI;EACzBrC,KAAK,EAAEjC,SAAS,CAACuE,MAAM;EACvBpD,WAAW,EAAEnB,SAAS,CAACuE,MAAM;EAC7BhD,YAAY,EAAEvB,SAAS,CAACuE,MAAM;EAC9B3C,KAAK,EAAE5B,SAAS,CAACwE,KAAK,CAACC,KAAA,CAAK/D,UAAU,CAAC,CAAC;EACxCoB,QAAQ,EAAE9B,SAAS,CAACsE,IAAI;EACxBvC,QAAQ,EAAE/B,SAAS,CAACsE,IAAI;EACxBlD,KAAK,EAAEpB,SAAS,CAACuE,MAAM;EACvBjD,IAAI,EAAEtB,SAAS,CAACuE,MAAM;EACtB7C,KAAK,EAAE1B,SAAS,CAACuE,MAAM;EACvB/C,QAAQ,EAAExB,SAAS,CAAC0E,IAAI;EACxB7C,WAAW,EAAE7B,SAAS,CAACuE,MAAM;EAC7BvC,QAAQ,EAAEhC,SAAS,CAACsE,IAAI;EACxBjD,IAAI,EAAErB,SAAS,CAACuE,MAAM;EACtB5C,KAAK,EAAE3B,SAAS,CAACsE,IAAI;EACrB,YAAY,EAAEtE,SAAS,CAACuE,MAAM;EAC9B,WAAW,EAAEvE,SAAS,CAACuE,MAAM;EAC7BlC,UAAU,EAAErC,SAAS,CAACsE;AACxB,CAAC;AACD,eAAetD,SAAS","ignoreList":[]}
|
|
@@ -410,4 +410,31 @@
|
|
|
410
410
|
position: absolute;
|
|
411
411
|
top: 23%;
|
|
412
412
|
box-shadow: 0 0 1px grey;
|
|
413
|
-
}
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.readOnly input {
|
|
416
|
+
caret-color: transparent;
|
|
417
|
+
cursor: default;
|
|
418
|
+
user-select: none;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.readOnly.coorpmanager input {
|
|
422
|
+
caret-color: transparent;
|
|
423
|
+
cursor: default;
|
|
424
|
+
user-select: none;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.readOnly.coorpmanager:focus-within input::placeholder {
|
|
428
|
+
color: transparent !important;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.readOnly.coorpmanager:focus-within .title.noValue {
|
|
432
|
+
font-size: 14px !important;
|
|
433
|
+
font-weight: 500 !important;
|
|
434
|
+
color: cm_grey_700 !important;
|
|
435
|
+
top: 14px !important;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.readOnly.coorpmanager input:hover {
|
|
439
|
+
background-color: cm_grey_100 !important;
|
|
440
|
+
}
|
|
@@ -10,6 +10,7 @@ declare namespace InputTextWithTitle {
|
|
|
10
10
|
placeholder: PropTypes.Requireable<string>;
|
|
11
11
|
defaultValue: PropTypes.Requireable<string>;
|
|
12
12
|
disabled: PropTypes.Requireable<boolean>;
|
|
13
|
+
readOnly: PropTypes.Requireable<boolean>;
|
|
13
14
|
value: PropTypes.Requireable<string>;
|
|
14
15
|
hint: PropTypes.Requireable<string>;
|
|
15
16
|
error: PropTypes.Requireable<string>;
|
|
@@ -7,6 +7,7 @@ declare namespace InputTextarea {
|
|
|
7
7
|
const name: PropTypes.Requireable<string>;
|
|
8
8
|
const theme: PropTypes.Requireable<string>;
|
|
9
9
|
const disabled: PropTypes.Requireable<boolean>;
|
|
10
|
+
const readOnly: PropTypes.Requireable<boolean>;
|
|
10
11
|
const value: PropTypes.Requireable<string>;
|
|
11
12
|
const hint: PropTypes.Requireable<string>;
|
|
12
13
|
const error: PropTypes.Requireable<string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-textarea/index.js"],"names":[],"mappings":";AAkBA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-textarea/index.js"],"names":[],"mappings":";AAkBA,wDAyEC"}
|
|
@@ -26,6 +26,7 @@ const InputTextarea = props => {
|
|
|
26
26
|
valid,
|
|
27
27
|
description,
|
|
28
28
|
disabled,
|
|
29
|
+
readOnly = false,
|
|
29
30
|
modified = false
|
|
30
31
|
} = props;
|
|
31
32
|
const mainClass = themeStyle[theme];
|
|
@@ -56,7 +57,7 @@ const InputTextarea = props => {
|
|
|
56
57
|
className: style.leftIcon
|
|
57
58
|
}) : null;
|
|
58
59
|
return /*#__PURE__*/React.createElement("div", {
|
|
59
|
-
className: classnames(mainClass, className, disabled && style.disabled)
|
|
60
|
+
className: classnames(mainClass, className, disabled && style.disabled, readOnly && style.readonly)
|
|
60
61
|
}, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("span", {
|
|
61
62
|
className: classnames(style.title, _isEmpty(value) && style.noValue)
|
|
62
63
|
}, propsTitle, toolTipView), /*#__PURE__*/React.createElement("textarea", {
|
|
@@ -65,6 +66,7 @@ const InputTextarea = props => {
|
|
|
65
66
|
placeholder: placeholder,
|
|
66
67
|
onChange: handleChange,
|
|
67
68
|
disabled: disabled,
|
|
69
|
+
readOnly: readOnly,
|
|
68
70
|
"data-testid": name
|
|
69
71
|
}), errorIconView, validIconView, hintView), descriptionView);
|
|
70
72
|
};
|
|
@@ -74,6 +76,7 @@ InputTextarea.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
74
76
|
name: PropTypes.string,
|
|
75
77
|
theme: PropTypes.oneOf(_keys(themeStyle)),
|
|
76
78
|
disabled: PropTypes.bool,
|
|
79
|
+
readOnly: PropTypes.bool,
|
|
77
80
|
value: PropTypes.string,
|
|
78
81
|
hint: PropTypes.string,
|
|
79
82
|
error: PropTypes.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","getClassState","style","themeStyle","setup","coorpmanager","cockpit","default","defaultStyle","InputTextarea","props","title","propsTitle","name","placeholder","value","hint","theme","onChange","_noop","error","valid","description","disabled","modified","mainClass","className","handleChange","e","target","descriptionView","createElement","toolTipView","infoIconWrapper","infoIcon","descriptionLabel","hintView","dangerouslySetInnerHTML","__html","errorIconView","leftIcon","validIconView","_isEmpty","noValue","propTypes","process","env","NODE_ENV","string","oneOf","_keys","bool","func"],"sources":["../../../src/atom/input-textarea/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, keys, isEmpty} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {\n NovaSolidStatusCheckCircle2 as CheckIcon,\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n coorpmanager: style.coorpmanager,\n cockpit: style.cockpit,\n default: style.defaultStyle\n};\nconst InputTextarea = props => {\n const {\n title: propsTitle,\n name,\n placeholder,\n value,\n hint,\n theme = 'default',\n onChange = noop,\n error,\n valid,\n description,\n disabled,\n modified = false\n } = props;\n\n const mainClass = themeStyle[theme];\n const className = getClassState(style.defaultStyle, style.modified, style.error, modified, error);\n const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n\n const descriptionView =\n description && theme !== 'coorpmanager' ? (\n <div className={style.description}>{description}</div>\n ) : null;\n const toolTipView =\n description && theme === 'coorpmanager' ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null;\n const hintView =\n theme === 'coorpmanager' ? (\n <div\n className={style.hint}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: error || hint}}\n />\n ) : null;\n const errorIconView = error ? <ErrorIcon className={style.leftIcon} /> : null;\n const validIconView = valid ? <CheckIcon className={style.leftIcon} /> : null;\n\n return (\n <div
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","getClassState","style","themeStyle","setup","coorpmanager","cockpit","default","defaultStyle","InputTextarea","props","title","propsTitle","name","placeholder","value","hint","theme","onChange","_noop","error","valid","description","disabled","readOnly","modified","mainClass","className","handleChange","e","target","descriptionView","createElement","toolTipView","infoIconWrapper","infoIcon","descriptionLabel","hintView","dangerouslySetInnerHTML","__html","errorIconView","leftIcon","validIconView","readonly","_isEmpty","noValue","propTypes","process","env","NODE_ENV","string","oneOf","_keys","bool","func"],"sources":["../../../src/atom/input-textarea/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, keys, isEmpty} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {\n NovaSolidStatusCheckCircle2 as CheckIcon,\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n coorpmanager: style.coorpmanager,\n cockpit: style.cockpit,\n default: style.defaultStyle\n};\nconst InputTextarea = props => {\n const {\n title: propsTitle,\n name,\n placeholder,\n value,\n hint,\n theme = 'default',\n onChange = noop,\n error,\n valid,\n description,\n disabled,\n readOnly = false,\n modified = false\n } = props;\n\n const mainClass = themeStyle[theme];\n const className = getClassState(style.defaultStyle, style.modified, style.error, modified, error);\n const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n\n const descriptionView =\n description && theme !== 'coorpmanager' ? (\n <div className={style.description}>{description}</div>\n ) : null;\n const toolTipView =\n description && theme === 'coorpmanager' ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null;\n const hintView =\n theme === 'coorpmanager' ? (\n <div\n className={style.hint}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: error || hint}}\n />\n ) : null;\n const errorIconView = error ? <ErrorIcon className={style.leftIcon} /> : null;\n const validIconView = valid ? <CheckIcon className={style.leftIcon} /> : null;\n\n return (\n <div\n className={classnames(\n mainClass,\n className,\n disabled && style.disabled,\n readOnly && style.readonly\n )}\n >\n <label>\n <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n {propsTitle}\n {toolTipView}\n </span>\n <textarea\n name={name}\n value={value}\n placeholder={placeholder}\n onChange={handleChange}\n disabled={disabled}\n readOnly={readOnly}\n data-testid={name}\n />\n {errorIconView}\n {validIconView}\n {hintView}\n </label>\n {descriptionView}\n </div>\n );\n};\n\nInputTextarea.propTypes = {\n placeholder: PropTypes.string,\n title: PropTypes.string,\n name: PropTypes.string,\n theme: PropTypes.oneOf(keys(themeStyle)),\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n value: PropTypes.string,\n hint: PropTypes.string,\n error: PropTypes.string,\n onChange: PropTypes.func,\n description: PropTypes.string,\n modified: PropTypes.bool,\n valid: PropTypes.bool\n};\nexport default InputTextarea;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -25,6 +25,10 @@
|
|
|
25
25
|
composes: defaultStyle;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
+
.readonly {
|
|
29
|
+
composes: defaultStyle;
|
|
30
|
+
}
|
|
31
|
+
|
|
28
32
|
.defaultStyle label {
|
|
29
33
|
display: flex;
|
|
30
34
|
align-items: center;
|
|
@@ -56,6 +60,15 @@
|
|
|
56
60
|
resize: none;
|
|
57
61
|
}
|
|
58
62
|
|
|
63
|
+
.readonly textarea {
|
|
64
|
+
user-select: none;
|
|
65
|
+
-webkit-user-select: none;
|
|
66
|
+
-moz-user-select: none;
|
|
67
|
+
-ms-user-select: none;
|
|
68
|
+
cursor: default;
|
|
69
|
+
caret-color: transparent;
|
|
70
|
+
}
|
|
71
|
+
|
|
59
72
|
.error textarea {
|
|
60
73
|
border-color: negative;
|
|
61
74
|
}
|
|
@@ -353,6 +366,30 @@
|
|
|
353
366
|
opacity: 0.5;
|
|
354
367
|
}
|
|
355
368
|
|
|
369
|
+
.coorpmanager.readonly textarea {
|
|
370
|
+
user-select: none;
|
|
371
|
+
-webkit-user-select: none;
|
|
372
|
+
-moz-user-select: none;
|
|
373
|
+
-ms-user-select: none;
|
|
374
|
+
cursor: default;
|
|
375
|
+
caret-color: transparent;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.coorpmanager.readonly:focus-within textarea::placeholder {
|
|
379
|
+
color: transparent !important;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.coorpmanager.readonly:focus-within .title.noValue {
|
|
383
|
+
font-size: 14px !important;
|
|
384
|
+
font-weight: 500 !important;
|
|
385
|
+
color: cm_grey_700 !important;
|
|
386
|
+
top: auto !important;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.coorpmanager.readonly label:hover:before {
|
|
390
|
+
background-color: cm_grey_100 !important;
|
|
391
|
+
}
|
|
392
|
+
|
|
356
393
|
.coorpmanager .infoIconWrapper {
|
|
357
394
|
overflow: visible;
|
|
358
395
|
height: 12px;
|
|
@@ -46,6 +46,7 @@ declare namespace Select {
|
|
|
46
46
|
className: PropTypes.Requireable<string>;
|
|
47
47
|
borderClassName: PropTypes.Requireable<string>;
|
|
48
48
|
disabled: PropTypes.Requireable<boolean>;
|
|
49
|
+
readOnly: PropTypes.Requireable<boolean>;
|
|
49
50
|
multiple: PropTypes.Requireable<boolean>;
|
|
50
51
|
description: PropTypes.Requireable<string>;
|
|
51
52
|
required: PropTypes.Requireable<boolean>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwDA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwDA,qEAmNC"}
|
package/es/atom/select/index.js
CHANGED
|
@@ -61,6 +61,7 @@ const Select = (props, legacyContext) => {
|
|
|
61
61
|
onChange,
|
|
62
62
|
multiple = false,
|
|
63
63
|
disabled,
|
|
64
|
+
readOnly,
|
|
64
65
|
required,
|
|
65
66
|
description,
|
|
66
67
|
theme,
|
|
@@ -73,8 +74,17 @@ const Select = (props, legacyContext) => {
|
|
|
73
74
|
const skin = GetSkinFromContext(legacyContext);
|
|
74
75
|
const title = useMemo(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
|
|
75
76
|
const [isArrowUp, setIsArrowUp] = useState(false);
|
|
76
|
-
const
|
|
77
|
-
const
|
|
77
|
+
const isNonInteractive = disabled || readOnly;
|
|
78
|
+
const handleSelectOnFocus = useCallback(() => {
|
|
79
|
+
if (!isNonInteractive) {
|
|
80
|
+
setIsArrowUp(true);
|
|
81
|
+
}
|
|
82
|
+
}, [isNonInteractive]);
|
|
83
|
+
const handleSelectOnBlur = useCallback(() => {
|
|
84
|
+
if (!isNonInteractive) {
|
|
85
|
+
setIsArrowUp(false);
|
|
86
|
+
}
|
|
87
|
+
}, [isNonInteractive]);
|
|
78
88
|
const selectOption = (option, index) => {
|
|
79
89
|
return /*#__PURE__*/React.createElement("option", {
|
|
80
90
|
key: index,
|
|
@@ -106,19 +116,23 @@ const Select = (props, legacyContext) => {
|
|
|
106
116
|
selected: true
|
|
107
117
|
}, options)), [options, theme]);
|
|
108
118
|
const handleChange = useMemo(() => multiple ? e => {
|
|
109
|
-
|
|
110
|
-
|
|
119
|
+
if (!isNonInteractive && onChange) {
|
|
120
|
+
setIsArrowUp(false);
|
|
121
|
+
onChange(map(get('value'), e.target.selectedOptions));
|
|
122
|
+
}
|
|
111
123
|
} : e => {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
124
|
+
if (!isNonInteractive && onChange) {
|
|
125
|
+
setIsArrowUp(false);
|
|
126
|
+
onChange(e.target.value);
|
|
127
|
+
}
|
|
128
|
+
}, [onChange, multiple, isNonInteractive]);
|
|
115
129
|
const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);
|
|
116
130
|
const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);
|
|
117
131
|
const isThemeOneOfQuestionTemplateOrPlayer = useMemo(() => includes(theme, ['question', 'template', 'player']), [theme]);
|
|
118
132
|
const shouldUseSkinFontColor = useMemo(() => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer, [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]);
|
|
119
133
|
const arrowColor = selected ? color : undefined;
|
|
120
134
|
const behaviorClassName = useMemo(() => getClassState(style.defaultStyle, style.modified, style.error, modified, error), [error, modified]);
|
|
121
|
-
const composedClassName = useMemo(() => classnames(theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName, selected ? style.selected : style.unselected, className), [behaviorClassName, className, selected, theme]);
|
|
135
|
+
const composedClassName = useMemo(() => classnames(theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName, selected ? style.selected : style.unselected, disabled ? style.disabled : null, readOnly ? style.readOnly : null, className), [behaviorClassName, className, selected, theme, disabled, readOnly]);
|
|
122
136
|
const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);
|
|
123
137
|
const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);
|
|
124
138
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -162,13 +176,13 @@ const Select = (props, legacyContext) => {
|
|
|
162
176
|
value: selected,
|
|
163
177
|
multiple: multiple,
|
|
164
178
|
disabled: disabled,
|
|
165
|
-
onClick: handleSelectOnFocus,
|
|
166
|
-
onBlur: handleSelectOnBlur
|
|
179
|
+
onClick: isNonInteractive ? undefined : handleSelectOnFocus,
|
|
180
|
+
onBlur: isNonInteractive ? undefined : handleSelectOnBlur
|
|
167
181
|
// onBlur does not handle completely an out of bounds click
|
|
168
182
|
// ex: select is Opened and a click is done outside, cancelling the select
|
|
169
183
|
// that doesn't count as a Blur, so an onMouseLeave is needed
|
|
170
184
|
,
|
|
171
|
-
onMouseLeave: handleSelectOnBlur,
|
|
185
|
+
onMouseLeave: isNonInteractive ? undefined : handleSelectOnBlur,
|
|
172
186
|
"data-testid": "native-select"
|
|
173
187
|
}), optionList)), /*#__PURE__*/React.createElement("div", {
|
|
174
188
|
className: style.description
|
|
@@ -193,6 +207,7 @@ Select.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
193
207
|
className: PropTypes.string,
|
|
194
208
|
borderClassName: PropTypes.string,
|
|
195
209
|
disabled: PropTypes.bool,
|
|
210
|
+
readOnly: PropTypes.bool,
|
|
196
211
|
multiple: PropTypes.bool,
|
|
197
212
|
description: PropTypes.string,
|
|
198
213
|
required: PropTypes.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","classnames","concat","filter","find","flatMapDeep","get","getOr","includes","isEmpty","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","NovaCompositionNavigationArrowTop","ArrowUp","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","skillDetail","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","color","className","createElement","_extends","Select","legacyContext","name","options","optgroups","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabelledBy","skin","setIsArrowUp","handleSelectOnFocus","handleSelectOnBlur","selectOption","option","index","key","value","optionList","optgroup","label","i","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","shouldUseSkinFontColor","undefined","behaviorClassName","defaultStyle","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","onClick","onBlur","onMouseLeave","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","SelectOptionGroupPropTypes","arrayOf","shape","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","func","oneOf"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport concat from 'lodash/fp/concat';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport flatMapDeep from 'lodash/fp/flatMapDeep';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {\n NovaCompositionNavigationArrowDown as ArrowDown,\n NovaCompositionNavigationArrowTop as ArrowUp\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n filter: style.filter,\n invalid: style.invalid,\n header: style.header,\n mooc: style.mooc,\n question: style.question,\n sort: style.sort,\n thematiques: style.thematiques,\n player: style.player,\n template: style.template,\n skillDetail: style.skillDetail,\n coorpmanager: null\n};\n\nconst ArrowView = ({shouldRender, isArrowUp, ariaLabel, arrowClass, arrowColor}) => {\n const props = useMemo(\n () => ({\n ...(arrowColor &\n {\n color: arrowColor\n }),\n className: arrowClass\n }),\n [arrowClass, arrowColor]\n );\n if (shouldRender) {\n return isArrowUp ? (\n <ArrowUp {...props} data-testid=\"select-arrow-up-icon\" />\n ) : (\n <ArrowDown {...props} data-testid=\"select-arrow-down-icon\" />\n );\n } else return null;\n};\n\nconst Select = (props, legacyContext) => {\n const {\n name,\n options = [],\n optgroups = [],\n className,\n borderClassName,\n onChange,\n multiple = false,\n disabled,\n required,\n description,\n theme,\n modified = false,\n error = false,\n title: propTitle,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy\n } = props;\n\n const skin = GetSkinFromContext(legacyContext);\n const title = useMemo(\n () => (propTitle ? `${propTitle}${required ? '*' : ''}` : null),\n [propTitle, required]\n );\n\n const [isArrowUp, setIsArrowUp] = useState(false);\n\n const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);\n const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);\n\n const selectOption = (option, index) => {\n return (\n <option key={index} value={option.value} className={style.selectOption}>\n {option.name}\n </option>\n );\n };\n\n const optionList = !isEmpty(options)\n ? options.map((option, index) => selectOption(option, index))\n : optgroups.map((optgroup, index) => {\n return (\n <optgroup key={index} label={optgroup.label}>\n {optgroup.options && optgroup.options.map((option, i) => selectOption(option, i))}\n </optgroup>\n );\n });\n\n const titleView = title ? <span className={style.title}>{title}</span> : null;\n\n const selected = useMemo(\n () =>\n multiple\n ? map(get('value'), filter({selected: true}, options))\n : get('value', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n [multiple, options, optgroups]\n );\n const selectedLabel = useMemo(\n () =>\n multiple\n ? map(get('name'), filter({selected: true}, options))\n : get('name', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n [multiple, options, optgroups]\n );\n\n const isSelectedInValidOption = useMemo(\n () =>\n theme === 'player' &&\n getOr(false, 'name', find({validOption: false, selected: true}, options)),\n [options, theme]\n );\n\n const handleChange = useMemo(\n () =>\n multiple\n ? e => {\n setIsArrowUp(false);\n onChange(map(get('value'), e.target.selectedOptions));\n }\n : e => {\n setIsArrowUp(false);\n onChange(e.target.value);\n },\n [onChange, multiple]\n );\n\n const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n const isThemeOneOfQuestionTemplateOrPlayer = useMemo(\n () => includes(theme, ['question', 'template', 'player']),\n [theme]\n );\n const shouldUseSkinFontColor = useMemo(\n () => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer,\n [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]\n );\n const arrowColor = selected ? color : undefined;\n\n const behaviorClassName = useMemo(\n () => getClassState(style.defaultStyle, style.modified, style.error, modified, error),\n [error, modified]\n );\n const composedClassName = useMemo(\n () =>\n classnames(\n theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName,\n selected ? style.selected : style.unselected,\n className\n ),\n [behaviorClassName, className, selected, theme]\n );\n\n const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n return (\n <div\n className={classnames(\n composedClassName,\n theme === 'coorpmanager' ? style.coorpmanager : null\n )}\n >\n <label\n data-testid=\"select-wrapper\"\n data-name=\"select-wrapper\"\n title={title}\n style={{\n ...(shouldUseSkinFontColor && {\n color\n })\n }}\n className={style.selectWrapper}\n >\n {titleView}\n <span\n data-testid=\"select-span\"\n data-name=\"select-span\"\n className={classnames(\n style.selectSpan,\n includes(theme, [\n 'player',\n 'invalid',\n 'question',\n 'thematiques',\n 'template',\n 'skillDetail'\n ])\n ? style.noLabelCommon\n : null,\n borderClassName,\n isLongLabel ? style.longLabel : null\n )}\n style={{\n ...(shouldUseSkinFontColor && {\n color\n })\n }}\n >\n {selectedLabel}\n </span>\n <ArrowView\n shouldRender={!multiple}\n isArrowUp={isArrowUp}\n ariaLabel={ariaLabel}\n arrowClass={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n arrowColor={isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black}\n />\n <select\n {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n {...(ariaLabel && !ariaLabelledBy ? {'aria-label': ariaLabel} : {})}\n {...(ariaLabel ? {title: ariaLabel} : {})}\n data-name=\"native-select\"\n className={style.selectBox}\n name={name}\n onChange={handleChange}\n value={selected}\n multiple={multiple}\n disabled={disabled}\n onClick={handleSelectOnFocus}\n onBlur={handleSelectOnBlur}\n // onBlur does not handle completely an out of bounds click\n // ex: select is Opened and a click is done outside, cancelling the select\n // that doesn't count as a Blur, so an onMouseLeave is needed\n onMouseLeave={handleSelectOnBlur}\n data-testid=\"native-select\"\n >\n {optionList}\n </select>\n </label>\n <div className={style.description}>{description}</div>\n </div>\n );\n};\n\nexport const SelectOptionPropTypes = {\n name: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n selected: PropTypes.bool,\n validOption: PropTypes.bool\n};\n\nexport const SelectOptionGroupPropTypes = {\n label: PropTypes.string.isRequired,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n};\n\nSelect.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n className: PropTypes.string,\n borderClassName: PropTypes.string,\n disabled: PropTypes.bool,\n multiple: PropTypes.bool,\n description: PropTypes.string,\n required: PropTypes.bool,\n onChange: PropTypes.func,\n theme: PropTypes.oneOf(keys(themeStyle)),\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),\n modified: PropTypes.bool,\n error: PropTypes.bool,\n 'aria-label': PropTypes.string,\n 'aria-labelledby': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","classnames","concat","filter","find","flatMapDeep","get","getOr","includes","isEmpty","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","NovaCompositionNavigationArrowTop","ArrowUp","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","skillDetail","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","color","className","createElement","_extends","Select","legacyContext","name","options","optgroups","borderClassName","onChange","multiple","disabled","readOnly","required","description","theme","modified","error","title","propTitle","ariaLabelledBy","skin","setIsArrowUp","isNonInteractive","handleSelectOnFocus","handleSelectOnBlur","selectOption","option","index","key","value","optionList","optgroup","label","i","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","shouldUseSkinFontColor","undefined","behaviorClassName","defaultStyle","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","onClick","onBlur","onMouseLeave","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","SelectOptionGroupPropTypes","arrayOf","shape","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","func","oneOf"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport concat from 'lodash/fp/concat';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport flatMapDeep from 'lodash/fp/flatMapDeep';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {\n NovaCompositionNavigationArrowDown as ArrowDown,\n NovaCompositionNavigationArrowTop as ArrowUp\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n filter: style.filter,\n invalid: style.invalid,\n header: style.header,\n mooc: style.mooc,\n question: style.question,\n sort: style.sort,\n thematiques: style.thematiques,\n player: style.player,\n template: style.template,\n skillDetail: style.skillDetail,\n coorpmanager: null\n};\n\nconst ArrowView = ({shouldRender, isArrowUp, ariaLabel, arrowClass, arrowColor}) => {\n const props = useMemo(\n () => ({\n ...(arrowColor &\n {\n color: arrowColor\n }),\n className: arrowClass\n }),\n [arrowClass, arrowColor]\n );\n if (shouldRender) {\n return isArrowUp ? (\n <ArrowUp {...props} data-testid=\"select-arrow-up-icon\" />\n ) : (\n <ArrowDown {...props} data-testid=\"select-arrow-down-icon\" />\n );\n } else return null;\n};\n\nconst Select = (props, legacyContext) => {\n const {\n name,\n options = [],\n optgroups = [],\n className,\n borderClassName,\n onChange,\n multiple = false,\n disabled,\n readOnly,\n required,\n description,\n theme,\n modified = false,\n error = false,\n title: propTitle,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy\n } = props;\n\n const skin = GetSkinFromContext(legacyContext);\n const title = useMemo(\n () => (propTitle ? `${propTitle}${required ? '*' : ''}` : null),\n [propTitle, required]\n );\n\n const [isArrowUp, setIsArrowUp] = useState(false);\n\n const isNonInteractive = disabled || readOnly;\n\n const handleSelectOnFocus = useCallback(() => {\n if (!isNonInteractive) {\n setIsArrowUp(true);\n }\n }, [isNonInteractive]);\n const handleSelectOnBlur = useCallback(() => {\n if (!isNonInteractive) {\n setIsArrowUp(false);\n }\n }, [isNonInteractive]);\n\n const selectOption = (option, index) => {\n return (\n <option key={index} value={option.value} className={style.selectOption}>\n {option.name}\n </option>\n );\n };\n\n const optionList = !isEmpty(options)\n ? options.map((option, index) => selectOption(option, index))\n : optgroups.map((optgroup, index) => {\n return (\n <optgroup key={index} label={optgroup.label}>\n {optgroup.options && optgroup.options.map((option, i) => selectOption(option, i))}\n </optgroup>\n );\n });\n\n const titleView = title ? <span className={style.title}>{title}</span> : null;\n\n const selected = useMemo(\n () =>\n multiple\n ? map(get('value'), filter({selected: true}, options))\n : get('value', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n [multiple, options, optgroups]\n );\n const selectedLabel = useMemo(\n () =>\n multiple\n ? map(get('name'), filter({selected: true}, options))\n : get('name', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n [multiple, options, optgroups]\n );\n\n const isSelectedInValidOption = useMemo(\n () =>\n theme === 'player' &&\n getOr(false, 'name', find({validOption: false, selected: true}, options)),\n [options, theme]\n );\n\n const handleChange = useMemo(\n () =>\n multiple\n ? e => {\n if (!isNonInteractive && onChange) {\n setIsArrowUp(false);\n onChange(map(get('value'), e.target.selectedOptions));\n }\n }\n : e => {\n if (!isNonInteractive && onChange) {\n setIsArrowUp(false);\n onChange(e.target.value);\n }\n },\n [onChange, multiple, isNonInteractive]\n );\n\n const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n const isThemeOneOfQuestionTemplateOrPlayer = useMemo(\n () => includes(theme, ['question', 'template', 'player']),\n [theme]\n );\n const shouldUseSkinFontColor = useMemo(\n () => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer,\n [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]\n );\n const arrowColor = selected ? color : undefined;\n\n const behaviorClassName = useMemo(\n () => getClassState(style.defaultStyle, style.modified, style.error, modified, error),\n [error, modified]\n );\n const composedClassName = useMemo(\n () =>\n classnames(\n theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName,\n selected ? style.selected : style.unselected,\n disabled ? style.disabled : null,\n readOnly ? style.readOnly : null,\n className\n ),\n [behaviorClassName, className, selected, theme, disabled, readOnly]\n );\n\n const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n return (\n <div\n className={classnames(\n composedClassName,\n theme === 'coorpmanager' ? style.coorpmanager : null\n )}\n >\n <label\n data-testid=\"select-wrapper\"\n data-name=\"select-wrapper\"\n title={title}\n style={{\n ...(shouldUseSkinFontColor && {\n color\n })\n }}\n className={style.selectWrapper}\n >\n {titleView}\n <span\n data-testid=\"select-span\"\n data-name=\"select-span\"\n className={classnames(\n style.selectSpan,\n includes(theme, [\n 'player',\n 'invalid',\n 'question',\n 'thematiques',\n 'template',\n 'skillDetail'\n ])\n ? style.noLabelCommon\n : null,\n borderClassName,\n isLongLabel ? style.longLabel : null\n )}\n style={{\n ...(shouldUseSkinFontColor && {\n color\n })\n }}\n >\n {selectedLabel}\n </span>\n <ArrowView\n shouldRender={!multiple}\n isArrowUp={isArrowUp}\n ariaLabel={ariaLabel}\n arrowClass={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n arrowColor={isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black}\n />\n <select\n {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n {...(ariaLabel && !ariaLabelledBy ? {'aria-label': ariaLabel} : {})}\n {...(ariaLabel ? {title: ariaLabel} : {})}\n data-name=\"native-select\"\n className={style.selectBox}\n name={name}\n onChange={handleChange}\n value={selected}\n multiple={multiple}\n disabled={disabled}\n onClick={isNonInteractive ? undefined : handleSelectOnFocus}\n onBlur={isNonInteractive ? undefined : handleSelectOnBlur}\n // onBlur does not handle completely an out of bounds click\n // ex: select is Opened and a click is done outside, cancelling the select\n // that doesn't count as a Blur, so an onMouseLeave is needed\n onMouseLeave={isNonInteractive ? undefined : handleSelectOnBlur}\n data-testid=\"native-select\"\n >\n {optionList}\n </select>\n </label>\n <div className={style.description}>{description}</div>\n </div>\n );\n};\n\nexport const SelectOptionPropTypes = {\n name: PropTypes.string.isRequired,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n selected: PropTypes.bool,\n validOption: PropTypes.bool\n};\n\nexport const SelectOptionGroupPropTypes = {\n label: PropTypes.string.isRequired,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n};\n\nSelect.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n className: PropTypes.string,\n borderClassName: PropTypes.string,\n disabled: PropTypes.bool,\n readOnly: PropTypes.bool,\n multiple: PropTypes.bool,\n description: PropTypes.string,\n required: PropTypes.bool,\n onChange: PropTypes.func,\n theme: PropTypes.oneOf(keys(themeStyle)),\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),\n modified: PropTypes.bool,\n error: PropTypes.bool,\n 'aria-label': PropTypes.string,\n 'aria-labelledby': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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","ignoreList":[]}
|
package/es/atom/select/style.css
CHANGED
|
@@ -665,3 +665,64 @@ div.player:hover span.selectSpan {
|
|
|
665
665
|
.skillDetail.no-label .selectBox {
|
|
666
666
|
max-width: 100%;
|
|
667
667
|
}
|
|
668
|
+
|
|
669
|
+
/*
|
|
670
|
+
Disabled state
|
|
671
|
+
*/
|
|
672
|
+
|
|
673
|
+
.disabled {
|
|
674
|
+
opacity: 0.6;
|
|
675
|
+
cursor: not-allowed;
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
.disabled .selectWrapper {
|
|
679
|
+
cursor: not-allowed;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.disabled .selectBox {
|
|
683
|
+
cursor: not-allowed !important;
|
|
684
|
+
background-color: xtraLightGrey;
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
.disabled .arrow,
|
|
688
|
+
.disabled .selectedArrow {
|
|
689
|
+
cursor: not-allowed;
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
.disabled:hover .arrow,
|
|
693
|
+
.disabled:hover .selectedArrow {
|
|
694
|
+
color: inherit;
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
/*
|
|
698
|
+
ReadOnly state - keeps visual appearance but prevents interaction
|
|
699
|
+
*/
|
|
700
|
+
|
|
701
|
+
.readOnly .selectBox {
|
|
702
|
+
cursor: default;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
.readOnly .selectWrapper {
|
|
706
|
+
cursor: default;
|
|
707
|
+
position: relative;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.readOnly .selectWrapper::after {
|
|
711
|
+
content: '';
|
|
712
|
+
position: absolute;
|
|
713
|
+
top: 0;
|
|
714
|
+
left: 0;
|
|
715
|
+
right: 0;
|
|
716
|
+
bottom: 0;
|
|
717
|
+
z-index: 10;
|
|
718
|
+
cursor: default;
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
.readOnly .selectWrapper * {
|
|
722
|
+
cursor: default;
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
.readOnly .arrow,
|
|
726
|
+
.readOnly .selectedArrow {
|
|
727
|
+
cursor: default;
|
|
728
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/index.tsx"],"names":[],"mappings":";AASA,OAAkB,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/status-item/index.tsx"],"names":[],"mappings":";AASA,OAAkB,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAoFnD,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;CAsBzC,CAAC;AAMF,eAAe,UAAU,CAAC"}
|