Created
September 20, 2020 14:38
-
-
Save ianchanning/134988a5d3aed9f87a3dfb464682d51b to your computer and use it in GitHub Desktop.
CocCommand showWorkspace output
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [Trace - 12:31:46] Sending request 'initialize - (0)'. | |
| Params: { | |
| "processId": 26375, | |
| "rootPath": "/home/channi16/imec/innovatrix", | |
| "rootUri": "file:///home/channi16/imec/innovatrix", | |
| "capabilities": { | |
| "workspace": { | |
| "applyEdit": true, | |
| "workspaceEdit": { | |
| "documentChanges": true, | |
| "resourceOperations": [ | |
| "create", | |
| "rename", | |
| "delete" | |
| ], | |
| "failureHandling": "textOnlyTransactional" | |
| }, | |
| "didChangeConfiguration": { | |
| "dynamicRegistration": true | |
| }, | |
| "didChangeWatchedFiles": { | |
| "dynamicRegistration": true | |
| }, | |
| "symbol": { | |
| "dynamicRegistration": true, | |
| "symbolKind": { | |
| "valueSet": [ | |
| 1, | |
| 2, | |
| 3, | |
| 4, | |
| 5, | |
| 6, | |
| 7, | |
| 8, | |
| 9, | |
| 10, | |
| 11, | |
| 12, | |
| 13, | |
| 14, | |
| 15, | |
| 16, | |
| 17, | |
| 18, | |
| 19, | |
| 20, | |
| 21, | |
| 22, | |
| 23, | |
| 24, | |
| 25, | |
| 26 | |
| ] | |
| }, | |
| "tagSupport": { | |
| "valueSet": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| "executeCommand": { | |
| "dynamicRegistration": true | |
| }, | |
| "configuration": true, | |
| "workspaceFolders": true | |
| }, | |
| "textDocument": { | |
| "publishDiagnostics": { | |
| "relatedInformation": true, | |
| "versionSupport": false, | |
| "tagSupport": { | |
| "valueSet": [ | |
| 1, | |
| 2 | |
| ] | |
| } | |
| }, | |
| "synchronization": { | |
| "dynamicRegistration": true, | |
| "willSave": true, | |
| "willSaveWaitUntil": true, | |
| "didSave": true | |
| }, | |
| "completion": { | |
| "dynamicRegistration": true, | |
| "contextSupport": true, | |
| "completionItem": { | |
| "snippetSupport": true, | |
| "commitCharactersSupport": true, | |
| "documentationFormat": [ | |
| "markdown", | |
| "plaintext" | |
| ], | |
| "deprecatedSupport": true, | |
| "preselectSupport": true | |
| }, | |
| "completionItemKind": { | |
| "valueSet": [ | |
| 1, | |
| 2, | |
| 3, | |
| 4, | |
| 5, | |
| 6, | |
| 7, | |
| 8, | |
| 9, | |
| 10, | |
| 11, | |
| 12, | |
| 13, | |
| 14, | |
| 15, | |
| 16, | |
| 17, | |
| 18, | |
| 19, | |
| 20, | |
| 21, | |
| 22, | |
| 23, | |
| 24, | |
| 25 | |
| ] | |
| } | |
| }, | |
| "hover": { | |
| "dynamicRegistration": true, | |
| "contentFormat": [ | |
| "markdown", | |
| "plaintext" | |
| ] | |
| }, | |
| "signatureHelp": { | |
| "dynamicRegistration": true, | |
| "signatureInformation": { | |
| "documentationFormat": [ | |
| "markdown", | |
| "plaintext" | |
| ], | |
| "parameterInformation": { | |
| "labelOffsetSupport": true | |
| } | |
| } | |
| }, | |
| "definition": { | |
| "dynamicRegistration": true | |
| }, | |
| "references": { | |
| "dynamicRegistration": true | |
| }, | |
| "documentHighlight": { | |
| "dynamicRegistration": true | |
| }, | |
| "documentSymbol": { | |
| "dynamicRegistration": true, | |
| "symbolKind": { | |
| "valueSet": [ | |
| 1, | |
| 2, | |
| 3, | |
| 4, | |
| 5, | |
| 6, | |
| 7, | |
| 8, | |
| 9, | |
| 10, | |
| 11, | |
| 12, | |
| 13, | |
| 14, | |
| 15, | |
| 16, | |
| 17, | |
| 18, | |
| 19, | |
| 20, | |
| 21, | |
| 22, | |
| 23, | |
| 24, | |
| 25, | |
| 26 | |
| ] | |
| }, | |
| "hierarchicalDocumentSymbolSupport": true, | |
| "tagSupport": { | |
| "valueSet": [ | |
| 1 | |
| ] | |
| } | |
| }, | |
| "codeAction": { | |
| "dynamicRegistration": true, | |
| "isPreferredSupport": true, | |
| "codeActionLiteralSupport": { | |
| "codeActionKind": { | |
| "valueSet": [ | |
| "", | |
| "quickfix", | |
| "refactor", | |
| "refactor.extract", | |
| "refactor.inline", | |
| "refactor.rewrite", | |
| "source", | |
| "source.organizeImports" | |
| ] | |
| } | |
| } | |
| }, | |
| "codeLens": { | |
| "dynamicRegistration": true | |
| }, | |
| "formatting": { | |
| "dynamicRegistration": true | |
| }, | |
| "rangeFormatting": { | |
| "dynamicRegistration": true | |
| }, | |
| "onTypeFormatting": { | |
| "dynamicRegistration": true | |
| }, | |
| "rename": { | |
| "dynamicRegistration": true, | |
| "prepareSupport": true | |
| }, | |
| "documentLink": { | |
| "dynamicRegistration": true, | |
| "tooltipSupport": true | |
| }, | |
| "typeDefinition": { | |
| "dynamicRegistration": true | |
| }, | |
| "implementation": { | |
| "dynamicRegistration": true | |
| }, | |
| "declaration": { | |
| "dynamicRegistration": true | |
| }, | |
| "colorProvider": { | |
| "dynamicRegistration": true | |
| }, | |
| "foldingRange": { | |
| "dynamicRegistration": true, | |
| "rangeLimit": 5000, | |
| "lineFoldingOnly": true | |
| }, | |
| "selectionRange": { | |
| "dynamicRegistration": true | |
| } | |
| }, | |
| "window": { | |
| "workDoneProgress": true | |
| } | |
| }, | |
| "trace": "verbose", | |
| "workspaceFolders": [ | |
| { | |
| "uri": "file:///home/channi16/imec/innovatrix", | |
| "name": "innovatrix" | |
| } | |
| ], | |
| "clientInfo": { | |
| "name": "coc.nvim", | |
| "version": "0.0.79" | |
| } | |
| } | |
| [Trace - 12:31:46] Received notification 'window/logMessage'. | |
| Params: { | |
| "type": 3, | |
| "message": "ESLint server running in node v12.18.4" | |
| } | |
| [Info - 12:31:46] ESLint server running in node v12.18.4 | |
| [Trace - 12:31:46] Received response 'initialize - (0)' in 63ms. | |
| Result: { | |
| "capabilities": { | |
| "textDocumentSync": { | |
| "openClose": true, | |
| "change": 1, | |
| "willSaveWaitUntil": true, | |
| "save": { | |
| "includeText": false | |
| } | |
| }, | |
| "codeActionProvider": true, | |
| "executeCommandProvider": { | |
| "commands": [ | |
| "eslint.applySingleFix", | |
| "eslint.applySameFixes", | |
| "eslint.applyAllFixes", | |
| "eslint.applyAutoFix", | |
| "eslint.applyDisableLine", | |
| "eslint.applyDisableFile", | |
| "eslint.openRuleDoc" | |
| ] | |
| } | |
| } | |
| } | |
| [Trace - 12:31:46] Sending notification 'initialized'. | |
| Params: {} | |
| [Trace - 12:31:46] Sending notification 'workspace/didChangeConfiguration'. | |
| Params: { | |
| "settings": { | |
| "eslint": { | |
| "enable": true, | |
| "quiet": false, | |
| "trace": { | |
| "server": "verbose" | |
| }, | |
| "execArgv": [], | |
| "filetypes": [ | |
| "javascript", | |
| "javascriptreact", | |
| "typescript", | |
| "typescriptreact" | |
| ], | |
| "packageManager": "npm", | |
| "run": "onType", | |
| "autoFix": true, | |
| "options": {}, | |
| "autoFixOnSave": false, | |
| "autoFixSkipRules": [], | |
| "codeAction": { | |
| "disableRuleComment": { | |
| "enable": true, | |
| "location": "separateLine" | |
| }, | |
| "showDocumentation": { | |
| "enable": true | |
| } | |
| } | |
| } | |
| } | |
| } | |
| [Trace - 12:31:46] Sending notification 'textDocument/didOpen'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "languageId": "javascriptreact", | |
| "version": 1, | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| } | |
| [Trace - 12:31:46] Received request 'client/registerCapability - (0)'. | |
| Params: { | |
| "registrations": [ | |
| { | |
| "id": "bae11222-b138-4014-980d-f201b30d703e", | |
| "method": "workspace/didChangeConfiguration", | |
| "registerOptions": {} | |
| } | |
| ] | |
| } | |
| [Trace - 12:31:46] Sending response 'client/registerCapability - (0)'. Processing request took 0ms | |
| No result returned. | |
| [Trace - 12:31:46] Received request 'workspace/configuration - (1)'. | |
| Params: { | |
| "items": [ | |
| { | |
| "scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "section": "" | |
| } | |
| ] | |
| } | |
| [Trace - 12:31:46] Sending response 'workspace/configuration - (1)'. Processing request took 1ms | |
| Result: [ | |
| { | |
| "packageManager": "npm", | |
| "quiet": false, | |
| "validate": true, | |
| "autoFix": true, | |
| "autoFixOnSave": false, | |
| "autoFixSkipRules": [], | |
| "options": {}, | |
| "run": "onType", | |
| "workspaceFolder": { | |
| "uri": "file:///home/channi16/imec/innovatrix", | |
| "name": "innovatrix" | |
| }, | |
| "codeAction": { | |
| "disableRuleComment": { | |
| "enable": true, | |
| "location": "separateLine" | |
| }, | |
| "showDocumentation": { | |
| "enable": true | |
| } | |
| } | |
| } | |
| ] | |
| [Trace - 12:31:47] 'npm config get prefix' value is: /usr | |
| [Trace - 12:31:47] Received notification 'window/logMessage'. | |
| Params: { | |
| "type": 3, | |
| "message": "ESLint library loaded from: /home/channi16/imec/innovatrix/images/front/node_modules/eslint/lib/api.js" | |
| } | |
| [Info - 12:31:47] ESLint library loaded from: /home/channi16/imec/innovatrix/images/front/node_modules/eslint/lib/api.js | |
| [Trace - 12:31:48] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 12:37:29] Sending notification 'textDocument/didOpen'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/styles.js", | |
| "languageId": "javascriptreact", | |
| "version": 1, | |
| "text": "import { css } from 'glamor';\n\nimport { DANGER, FOCUS, WHITE, PRIMARY, GREY_LIGHT_1, GREY_LIGHT_2 } from '../../../../../styles';\n\nexport const circleStyles = css({ fontSize: 8, height: 8, margin: 0, marginRight: 12, marginTop: 10 });\n\nexport const errorStyles = css({\n color: DANGER,\n fontSize: 12,\n fontStyle: 'italic',\n margin: 0,\n marginBottom: 12,\n});\n\nexport const crossStyles = css({\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n});\n\nexport const autoCompleteStyles = css({\n marginLeft: 30,\n height: 40,\n width: 'calc(100% - 40px)',\n '> div > input': {\n backgroundColor: WHITE,\n color: PRIMARY,\n height: 40,\n minWidth: 250,\n fontSize: 16,\n width: '100%',\n paddingLeft: 10,\n paddingBottom: 2,\n borderRadius: 3,\n border: `1px solid ${GREY_LIGHT_2}`,\n outline: 0,\n opacity: 1,\n overflow: 'hidden',\n '::placeholder': {\n color: PRIMARY,\n fontSize: 14,\n fontStyle: 'italic',\n opacity: 0.7,\n },\n ':hover': {\n backgroundColor: GREY_LIGHT_1,\n borderRadius: 2,\n transition: 'background-color 0.3s',\n },\n ':focus': {\n border: `1px solid ${FOCUS}`,\n backgroundColor: GREY_LIGHT_1,\n transition: 'background-color 0.3s',\n }\n },\n '.disabled > div > input': {\n //color: PRIMARY,\n //backgroundColor: WHITE,\n border: 0,\n cursor: 'default',\n ':hover': {\n backgroundColor: WHITE\n }\n }\n});\n" | |
| } | |
| } | |
| [Trace - 12:37:29] Received request 'workspace/configuration - (2)'. | |
| Params: { | |
| "items": [ | |
| { | |
| "scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/styles.js", | |
| "section": "" | |
| } | |
| ] | |
| } | |
| [Trace - 12:37:29] Sending response 'workspace/configuration - (2)'. Processing request took 0ms | |
| Result: [ | |
| { | |
| "packageManager": "npm", | |
| "quiet": false, | |
| "validate": true, | |
| "autoFix": true, | |
| "autoFixOnSave": false, | |
| "autoFixSkipRules": [], | |
| "options": {}, | |
| "run": "onType", | |
| "workspaceFolder": { | |
| "uri": "file:///home/channi16/imec/innovatrix", | |
| "name": "innovatrix" | |
| }, | |
| "codeAction": { | |
| "disableRuleComment": { | |
| "enable": true, | |
| "location": "separateLine" | |
| }, | |
| "showDocumentation": { | |
| "enable": true | |
| } | |
| } | |
| } | |
| ] | |
| [Trace - 12:37:29] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/styles.js", | |
| "diagnostics": [] | |
| } | |
| [Trace - 12:41:55] Sending notification 'textDocument/didOpen'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/FormModal.jsx", | |
| "languageId": "javascriptreact", | |
| "version": 1, | |
| "text": "import PropTypes from 'prop-types';\nimport React, { PureComponent, Fragment } from 'react';\nimport ReactModal from 'react-modal';\nimport MoreIcon from '@innovatrix/icons/MoreIcon';\nimport { Title, Paragraph } from '@innovatrix/common/text';\nimport Dropdown from '@innovatrix/common/dropdown';\nimport styled from '@emotion/styled';\nimport { GREY_LIGHT_3, WHITE } from '@innovatrix/styles';\n\nimport Cross from './Cross';\nimport './modalAnimation.scss';\nimport BreadCrumbs from './BreadCrumbs';\n\nconst stopPropagation = (e) => {\n e.stopPropagation();\n};\n\nconst Wrapper = styled.div`\n height: 100%;\n`;\n\nconst StyledDropdown = styled(Dropdown)`\n > div > button {\n padding: 10px 11px;\n }\n`;\n\nconst Header = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n padding: 24px 32px 12px;\n`;\n\nconst Heading = styled.div`\n align-items: center;\n display: flex;\n width: 90%;\n`;\n\nconst Subtitle = styled(Paragraph)`\n color: ${({ theme }) => theme.colors.grey2};\n margin-right: 8px;\n max-width: 160px;\n text-transform: uppercase;\n width: auto;\n`;\n\nconst ModalTitle = styled(Title)`\n margin-bottom: 0;\n`;\n\nconst CloseIcon = styled(Cross)`\n &:hover {\n cursor: pointer;\n > path {\n opacity: 0.6;\n transition: 0.3s;\n }\n }\n`;\n\nconst Body = styled.div`\n ${({ theme }) => theme.scrollbar.large};\n max-height: 60vh;\n overflow-y: auto;\n padding: 0 32px 24px;\n width: 100%;\n\n > .form-group {\n margin-bottom: 8px;\n }\n`;\n\nconst ErrorMessage = styled.div`\n align-items: center;\n background-color: ${({ theme }) => theme.colors.warning};\n border: 1px solid ${({ theme }) => theme.colors.warning};\n border-radius: 2px;\n color: ${({ theme }) => theme.colors.white};\n display: flex;\n height: 46px;\n justify-content: space-between;\n margin: 0 24px 18px 24px;\n padding: 6px 16px 6px 24px;\n`;\n\nconst modalStyles = (width) => ({\n overlay: {\n alignItems: 'center',\n backgroundColor: 'rgba(0, 0, 0, 0.65)',\n bottom: 0,\n display: 'flex',\n justifyContent: 'center',\n left: 0,\n position: 'fixed',\n right: 0,\n top: 0,\n zIndex: 100,\n },\n content: {\n backgroundColor: WHITE,\n border: `1px solid ${GREY_LIGHT_3}`,\n borderRadius: 3,\n bottom: 0,\n boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.5)',\n left: 0,\n maxHeight: '90vh',\n maxWidth: width,\n minWidth: 450,\n outline: 0,\n overflow: 'visible',\n padding: 0,\n position: 'relative',\n right: 0,\n top: 0,\n width: '100%',\n },\n});\n\nexport class FormModal extends PureComponent {\n\n static propTypes = {\n bodyStyles: PropTypes.any,\n breadCrumbs: PropTypes.arrayOf(PropTypes.string),\n // node for Body Content\n children: PropTypes.node,\n className: PropTypes.any,\n contentLabel: PropTypes.string,\n contentRef: PropTypes.func,\n // error\n error: PropTypes.string,\n // node for Footer Content\n footerContent: PropTypes.node,\n isOpen: PropTypes.bool,\n // Function for closing the modal\n moreDisabled: PropTypes.bool,\n moreOptions: PropTypes.array,\n onClose: PropTypes.func.isRequired,\n onSubmit: PropTypes.func,\n renderCustomHeader: PropTypes.func,\n styles: PropTypes.any,\n subTitle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),\n // Main title in Header\n title: PropTypes.string,\n //via \"width\" property we can change the width of the modal\n width: PropTypes.number,\n };\n\n static defaultProps = {\n children: null,\n footerContent: null,\n isOpen: true,\n contentLabel: '',\n subTitle: '',\n title: '',\n onSubmit: null,\n width: 700,\n };\n\n constructor(props) {\n super(props);\n this.onExplicitClose = this.onExplicitClose.bind(this);\n this.onImplicitClose = this.onImplicitClose.bind(this);\n this.toggleDropdownMenu = this.toggleDropdownMenu.bind(this);\n this.closeDropdownMenu = this.closeDropdownMenu.bind(this);\n }\n\n state = { isDropdownMenuOpen: false };\n\n componentDidMount() {\n this._isMounted = true;\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n }\n\n closeDropdownMenu() {\n if (this._isMounted) {\n // The modal can be closed before the dropdown is closed, so watch out!\n // The component should still be mounted to close the dropdown.\n this.setState({ isDropdownMenuOpen: false });\n }\n }\n\n toggleDropdownMenu() {\n this.setState({ isDropdownMenuOpen: !this.state.isDropdownMenuOpen });\n }\n\n onExplicitClose() {\n this.props.onClose(true);\n }\n\n onImplicitClose(e) {\n // Pressing escape is an explicit close.\n // Clicking outside the modal is an implicit close.\n const isExplicitClose = e.type === 'keydown';\n this.props.onClose(isExplicitClose);\n }\n\n render() {\n const {\n breadCrumbs, contentRef, contentLabel,\n isOpen, subTitle, title, onSubmit, width, className, renderCustomHeader,\n error, moreOptions, moreDisabled,\n } = this.props;\n\n const style = modalStyles(width);\n\n return (\n <ReactModal\n contentRef={contentRef}\n ariaHideApp={false}\n closeTimeoutMS={500}\n contentLabel={contentLabel}\n isOpen={isOpen}\n onRequestClose={this.onImplicitClose}\n style={style}\n >\n <Wrapper\n className={className}\n onClick={stopPropagation}\n >\n <form onSubmit={onSubmit}>\n <Header>\n <Heading>\n {subTitle ?\n <Subtitle small>{subTitle}</Subtitle>\n : breadCrumbs && <BreadCrumbs breadCrumbs={breadCrumbs} />}\n <ModalTitle title={title}>{title}</ModalTitle>\n </Heading>\n <Fragment>\n {renderCustomHeader && renderCustomHeader()}\n {moreOptions &&\n <StyledDropdown\n left\n options={moreOptions}\n disabled={moreDisabled}\n icon={<MoreIcon />}\n caret={false}\n />}\n </Fragment>\n <CloseIcon onClick={this.onExplicitClose} />\n </Header>\n {error && (\n <ErrorMessage>{error}</ErrorMessage>\n )}\n <Body className=\"body\">\n {this.props.children}\n </Body>\n {this.props.footerContent}\n </form>\n </Wrapper>\n </ReactModal>\n );\n }\n\n}\n\nexport const PlainModal = ({\n children, className, contentLabel, contentRef,\n isOpen, onSubmit, width\n}) => {\n const style = React.useMemo(() => modalStyles(width), [width]);\n\n const onImplicitClose = React.useCallback(() => {\n // This is just a stub for the moment\n }, []);\n\n return (\n <ReactModal\n contentRef={contentRef}\n className={className}\n ariaHideApp={false}\n closeTimeoutMS={500}\n contentLabel={contentLabel}\n isOpen={isOpen}\n onRequestClose={onImplicitClose}\n style={style}\n >\n <Wrapper onClick={stopPropagation}>\n <form onSubmit={onSubmit}>\n <Body className=\"body\">\n {children ? children : null}\n </Body>\n </form>\n </Wrapper>\n </ReactModal>\n );\n};\n\nPlainModal.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n contentLabel: PropTypes.string,\n contentRef: PropTypes.func,\n isOpen: PropTypes.bool,\n onSubmit: PropTypes.func.isRequired,\n width: PropTypes.number,\n};\n\nPlainModal.defaultProps = {\n className: '',\n isOpen: false,\n width: 700,\n};\n" | |
| } | |
| } | |
| [Trace - 12:41:55] Received request 'workspace/configuration - (3)'. | |
| Params: { | |
| "items": [ | |
| { | |
| "scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/FormModal.jsx", | |
| "section": "" | |
| } | |
| ] | |
| } | |
| [Trace - 12:41:55] Sending response 'workspace/configuration - (3)'. Processing request took 0ms | |
| Result: [ | |
| { | |
| "packageManager": "npm", | |
| "quiet": false, | |
| "validate": true, | |
| "autoFix": true, | |
| "autoFixOnSave": false, | |
| "autoFixSkipRules": [], | |
| "options": {}, | |
| "run": "onType", | |
| "workspaceFolder": { | |
| "uri": "file:///home/channi16/imec/innovatrix", | |
| "name": "innovatrix" | |
| }, | |
| "codeAction": { | |
| "disableRuleComment": { | |
| "enable": true, | |
| "location": "separateLine" | |
| }, | |
| "showDocumentation": { | |
| "enable": true | |
| } | |
| } | |
| } | |
| ] | |
| [Trace - 12:41:55] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/FormModal.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 12:42:03] Sending notification 'textDocument/didOpen'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/Cross.jsx", | |
| "languageId": "javascriptreact", | |
| "version": 1, | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Cross = ({ color = '#3c3c3b', onClick, className, styles = {} }) => (\n <svg className={className} onClick={onClick} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" {...styles}>\n <path fill={color} d=\"M24 2.4L14.4 12l9.6 9.6-2.4 2.4-9.6-9.6L2.4 24 0 21.6 9.6 12 0 2.4 2.4 0 12 9.6 21.6 0z\" opacity=\".495\" />\n </svg>\n);\n\nCross.propTypes = {\n className: PropTypes.string,\n color: PropTypes.string,\n onClick: PropTypes.func.isRequired,\n styles: PropTypes.object,\n};\n\nexport default Cross;\n" | |
| } | |
| } | |
| [Trace - 12:42:03] Received request 'workspace/configuration - (4)'. | |
| Params: { | |
| "items": [ | |
| { | |
| "scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/Cross.jsx", | |
| "section": "" | |
| } | |
| ] | |
| } | |
| [Trace - 12:42:03] Sending response 'workspace/configuration - (4)'. Processing request took 0ms | |
| Result: [ | |
| { | |
| "packageManager": "npm", | |
| "quiet": false, | |
| "validate": true, | |
| "autoFix": true, | |
| "autoFixOnSave": false, | |
| "autoFixSkipRules": [], | |
| "options": {}, | |
| "run": "onType", | |
| "workspaceFolder": { | |
| "uri": "file:///home/channi16/imec/innovatrix", | |
| "name": "innovatrix" | |
| }, | |
| "codeAction": { | |
| "disableRuleComment": { | |
| "enable": true, | |
| "location": "separateLine" | |
| }, | |
| "showDocumentation": { | |
| "enable": true | |
| } | |
| } | |
| } | |
| ] | |
| [Trace - 12:42:03] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/modals/Cross.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 12:42:28] Sending notification 'textDocument/didOpen'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/intakes/IntakeList.jsx", | |
| "languageId": "javascriptreact", | |
| "version": 1, | |
| "text": "import React from 'react';\nimport styled from '@emotion/styled';\nimport PropTypes from 'prop-types';\nimport { Title, Paragraph } from '@innovatrix/common/text';\nimport LargeListItem from '@innovatrix/common/lists/LargeListItem';\nimport moment from 'moment';\nimport { Button } from '@innovatrix/common/buttons';\nimport ArrowIcon from '@innovatrix/icons/ArrowIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport { TURQUOISE, GREY_1 } from '@innovatrix/styles';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport { useHistory } from 'react-router';\nimport {\n DRAFT_INTAKE,\n OPEN_INTAKE,\n SUBMITTED_INTAKE\n} from '@innovatrix/common/intakes/_constants';\n\nimport {\n Questions,\n NavigationBar,\n} from './Common';\n\nconst DataBottom = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: initial;\n margin-top: 16px;\n width: auto;\n\n @media (max-width: 900px) {\n justify-content: center;\n width: 100%;\n }\n`;\n\nconst CallsContainer = styled.div`\n margin-left: 32px;\n margin-right: 64px;\n margin-top: 95px;\n\n @media (max-width: 900px) {\n margin-top: 16px;\n }\n`;\n\nconst SectionContainer = styled.div`\n > div {\n margin-bottom: 32px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n`;\n\nconst NoCallsTitle = styled(Title)`\n font-style: italic;\n margin-left: 32px;\n margin-top: 95px;\n\n @media (max-width: 900px) {\n margin-top: 16px;\n }\n`;\n\nconst OlderCallsTitle = styled(Title)`\n margin-bottom: 16px;\n ${({ hasOpenCalls }) => (hasOpenCalls ? `\n margin-top: 32px;\n ` : '')}\n`;\n\nconst CallStatusContainer = styled.div`\n align-items: flex-end;\n display: flex;\n flex-direction: column;\n margin-right: 0;\n\n > * {\n margin-bottom: 8px;\n }\n`;\n\nconst Label = styled(Paragraph)`\n color: ${({ theme }) => theme.colors.grey2};\n`;\n\nconst ErrorLabel = styled(Paragraph)`\n color ${({ theme }) => theme.colors.warning};\n font-style: italic;\n`;\n\nconst IntakeList = ({ calls }) => {\n const now = moment().format('YYYY-MM-DD');\n const history = useHistory();\n\n const goToIntakeForm = (id) => {\n history.push(`/apply/${id}`);\n };\n\n const deadlineHasNotPassed = (call) => {\n return call.deadline && moment(call.deadline).isSameOrAfter(now);\n };\n\n return (\n <React.Fragment>\n <NavigationBar title=\"Select a call to apply\">\n <DataBottom>\n {/* Only show openCalls data when there effectively are open calls */}\n {calls.openCalls.length > 0 ? (\n <React.Fragment>\n {calls.openCalls.length === 1 ? (\n <React.Fragment>\n <Paragraph>{calls.openCalls[0].name} is now open.</Paragraph>\n <Paragraph>Subscribe before {moment(calls.openCalls[0].deadline).format('DD MMMM YYYY')}</Paragraph>\n </React.Fragment>\n ) : (\n <Paragraph>{calls.openCalls.map(c => c.name).join(', ')} are now open.</Paragraph>\n )}\n </React.Fragment>\n ) : null}\n </DataBottom>\n </NavigationBar>\n <Questions>\n <SectionContainer>\n {calls.openCalls.length === 0 ? (\n <NoCallsTitle size=\"h2\">No open calls for the moment</NoCallsTitle>\n ) : null}\n {calls.openCalls.length > 0 ? (\n <CallsContainer>\n {calls.openCalls.map(call => (\n <LargeListItem\n key={call.id}\n label={`Deadline ${moment(call.deadline).format('DD MMMM YYYY')}`}\n onClick={call.status === SUBMITTED_INTAKE ? () => goToIntakeForm(call.id) : null}\n readMode\n title={call.name}\n rightItemComponent={(\n <React.Fragment>\n {/* hide the button when the deadline has already passed */}\n {call.status === OPEN_INTAKE && deadlineHasNotPassed(call) ? (\n <Button\n flavor=\"primary\"\n icon={<ArrowIcon />}\n label=\"Apply\"\n onClick={() => goToIntakeForm(call.id)}\n />\n ) : null}\n {/* hide the button when the deadline has already passed */}\n {call.status === DRAFT_INTAKE && deadlineHasNotPassed(call) ? (\n <Button\n flavor=\"secondary\"\n icon={<ArrowIcon />}\n label=\"Continue\"\n onClick={() => goToIntakeForm(call.id)}\n />\n ) : null}\n {call.status === SUBMITTED_INTAKE ? (\n <CallStatusContainer>\n <CheckIcon color={TURQUOISE} height=\"32\" width=\"32\" />\n <Label>Applied {call.submittedOn ? moment(call.submittedOn).format('DD/MM/YYYY') : '-'}</Label>\n </CallStatusContainer>\n ) : null}\n </React.Fragment>\n )}\n />\n ))}\n {calls.closedCalls.length > 0 ? (\n <React.Fragment>\n <OlderCallsTitle size=\"h2\" hasOpenCalls={calls.openCalls.length > 0}>Older calls</OlderCallsTitle>\n {calls.closedCalls.map(call => (\n <LargeListItem\n key={call.id}\n label={`Deadline ${moment(call.deadline).format('DD MMMM YYYY')}`}\n readMode\n title={call.name}\n rightItemComponent={(\n <React.Fragment>\n {call.status === SUBMITTED_INTAKE ? (\n <CallStatusContainer>\n <CheckIcon color={TURQUOISE} height=\"32\" width=\"32\" />\n <Label>Applied {call.submittedOn ? moment(call.submittedOn).format('DD/MM/YYYY') : '-'}</Label>\n </CallStatusContainer>\n ) : null}\n {call.status === DRAFT_INTAKE ? (\n <CallStatusContainer>\n <CloseIcon color={GREY_1} height=\"24\" width=\"24\" />\n <ErrorLabel>Did not submit</ErrorLabel>\n </CallStatusContainer>\n ) : null}\n </React.Fragment>\n )}\n />\n ))}\n </React.Fragment>\n ) : null}\n </CallsContainer>\n ) : null}\n </SectionContainer>\n </Questions>\n </React.Fragment>\n );\n};\n\nIntakeList.propTypes = {\n calls: PropTypes.object.isRequired,\n};\n\nexport default IntakeList;\n" | |
| } | |
| } | |
| [Trace - 12:42:28] Received request 'workspace/configuration - (5)'. | |
| Params: { | |
| "items": [ | |
| { | |
| "scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/intakes/IntakeList.jsx", | |
| "section": "" | |
| } | |
| ] | |
| } | |
| [Trace - 12:42:28] Sending response 'workspace/configuration - (5)'. Processing request took 1ms | |
| Result: [ | |
| { | |
| "packageManager": "npm", | |
| "quiet": false, | |
| "validate": true, | |
| "autoFix": true, | |
| "autoFixOnSave": false, | |
| "autoFixSkipRules": [], | |
| "options": {}, | |
| "run": "onType", | |
| "workspaceFolder": { | |
| "uri": "file:///home/channi16/imec/innovatrix", | |
| "name": "innovatrix" | |
| }, | |
| "codeAction": { | |
| "disableRuleComment": { | |
| "enable": true, | |
| "location": "separateLine" | |
| }, | |
| "showDocumentation": { | |
| "enable": true | |
| } | |
| } | |
| } | |
| ] | |
| [Trace - 12:42:28] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/intakes/IntakeList.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 12:43:27] Sending notification 'textDocument/didOpen'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/public/intakes/register.jsx", | |
| "languageId": "javascriptreact", | |
| "version": 1, | |
| "text": "import React from 'react';\nimport styled from '@emotion/styled';\nimport { Title, Paragraph, Body } from '@innovatrix/common/text';\nimport { Button } from '@innovatrix/common/buttons';\nimport { Form, Formik } from 'formik';\nimport PropTypes from 'prop-types';\nimport { StringField, SelectField } from '@innovatrix/common/fields';\nimport AsteriskIcon from '@innovatrix/icons/AsterixIcon';\nimport { WARNING, GREY_2, TURQUOISE } from '@innovatrix/styles';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport { useHistory, Redirect } from 'react-router';\nimport * as yup from 'yup';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport graphql from '@innovatrix/common/graphql';\nimport { MessageBar } from '@innovatrix/components';\n\nimport innovatrixLogo from '../../../assets/innovatrix-logo2.png';\n\nimport { registerCampaignUser } from './_queries';\n\n// -- Registration form --------------- --- -- -\nconst FormWrapper = styled.div`\n background-color: ${({ theme }) => theme.colors.white};\n border-radius: 3px;\n border: 1px solid ${({ theme }) => theme.colors.greyLight3};\n width: 700px;\n`;\n\nconst Header = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n padding: 24px 32px 12px;\n`;\n\nconst Heading = styled.div`\n align-items: center;\n display: flex;\n width: 90%;\n`;\n\nconst ModalTitle = styled(Title)`\n margin-bottom: 0;\n`;\n\nconst SubTitle = styled(Paragraph)`\n color: ${({ theme }) => theme.colors.grey2};\n margin-right: 8px;\n max-width: 160px;\n text-transform: uppercase;\n width: auto;\n`;\n\nconst BodyContainer = styled.div`\n ${({ theme }) => theme.scrollbar.large};\n max-height: 500px;\n overflow-y: auto;\n padding: 0 32px 24px;\n width: 100%;\n\n > div {\n margin-bottom: 8px;\n }\n\n > div:last-of-type {\n margin-bottom: 0;\n }\n`;\n\nconst Footer = styled.div`\n border-top: 1px solid ${({ theme }) => theme.colors.greyLight3};\n display: flex;\n justify-content: space-between;\n padding: 16px 32px;\n width: 100%;\n`;\n\nconst InputWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n\n > div {\n flex-basis: 48%;\n }\n`;\n\nconst salutations = [{\n label: 'Mr',\n value: 'Mr',\n}, {\n label: 'Ms',\n value: 'Ms',\n}, {\n label: 'Mrs',\n value: 'Mrs'\n}];\n\nconst Label = styled(Paragraph)`\n color: ${({ theme, error }) => (error ? theme.colors.warning : theme.colors.grey2)};\n display: inline-block;\n font-size: 12px;\n position: relative;\n text-transform: uppercase;\n`;\n\nconst RequiredIcon = styled(AsteriskIcon)`\n position: absolute;\n right: -10px;\n top: 0;\n`;\n\nconst Cross = styled(CloseIcon)`\n &:hover {\n cursor: pointer;\n > path {\n opacity: 0.6;\n transition: 0.3s;\n }\n }\n`;\n\nconst InnovatrixLogo = styled.img`\n height: 50px;\n margin: 0 auto;\n position: absolute;\n top: 64px;\n`;\n\nconst RegisterForm = ({\n campaign, goToFirstStep, goToNextStep,\n registerError, registerUser,\n setRegisterError, step, validationSchema,\n}) => {\n const history = useHistory();\n\n const { name, id, callClosed } = campaign;\n\n // Call is closed, so let's redirect to the welcome screen instead of\n // showing the register form!\n if (callClosed) {\n return <Redirect to={`/public/apply/${name}`} />;\n }\n\n const goBack = () => {\n history.push(`/public/apply/${name}`);\n };\n\n const goToIntake = () => {\n history.push(`/apply/${id}`);\n };\n\n return (\n <React.Fragment>\n <InnovatrixLogo src={innovatrixLogo} alt=\"innovatrix logo\" />\n <Formik\n enableReinitialize\n onSubmit={(values, { resetForm, setTouched }) => {\n // This is the final interactive step of the register form\n // Here we will submit the data, and do some error handling\n if (step === 1) {\n // Create account\n registerUser({\n campaignId: id,\n user: {\n ...values,\n },\n callback: (err, data) => {\n if (err) {\n console.log(err);\n setRegisterError('UNKNOWN_ERROR');\n }\n else {\n if (data.id === 'USER_ALREADY_EXISTS') {\n // Show error, go to step 0\n setRegisterError(data.id);\n goToFirstStep();\n return;\n }\n if (data.id === 'UNKNOWN_ERROR') {\n // Only show the error\n setRegisterError(data.id);\n return;\n }\n\n // Everything checks out...\n // Clear any errors and\n // go to the final step (success view)\n resetForm();\n setRegisterError('');\n goToNextStep();\n }\n },\n });\n }\n // If we're on step 0, we just go to the next step\n else {\n setTouched({});\n goToNextStep();\n }\n }}\n initialValues={{\n confirmPassword: '',\n email: '',\n firstName: '',\n lastName: '',\n linkedIn: '',\n password: '',\n phone: '',\n role: '',\n salutation: '',\n }}\n validationSchema={validationSchema}\n >\n {({ handleSubmit, submitForm, errors }) => (\n <Form onSubmit={handleSubmit}>\n <FormWrapper>\n <Header>\n <Heading>\n <SubTitle>Sign up</SubTitle>\n <ModalTitle>Complete your profile</ModalTitle>\n </Heading>\n <Cross onClick={goBack} color={GREY_2} />\n </Header>\n <BodyContainer>\n <Body>\n Welcome to Innovatrix!<br />\n In order to sign up, we need some more information about you.\n </Body>\n {registerError === 'USER_ALREADY_EXISTS' ? (\n <MessageBar\n isOpen\n type=\"warning\"\n >\n This user already exists. Login instead or sign-up with another email.\n </MessageBar>\n ) : null}\n {registerError === 'UNKNOWN_ERROR' ? (\n <MessageBar\n isOpen\n type=\"warning\"\n >\n An error occurred while registering. Please refresh the page and try again.\n </MessageBar>\n ) : (\n <React.Fragment>\n {step === 0 ? (\n <React.Fragment>\n <StringField\n fieldId=\"email\"\n label=\"Email\"\n placeholder=\"Enter email\"\n type=\"email\"\n required\n />\n <StringField\n fieldId=\"password\"\n label=\"Password\"\n placeholder=\"Enter password\"\n type=\"password\"\n required\n />\n <StringField\n fieldId=\"confirmPassword\"\n label=\"Repeat password\"\n placeholder=\"Repeat password\"\n type=\"password\"\n required\n />\n </React.Fragment>\n ) : null}\n {step === 1 ? (\n <React.Fragment>\n <div>\n <Label error={errors.salutation}>\n Salutation\n <RequiredIcon color={WARNING} height=\"5\" width=\"5\" />\n </Label>\n <SelectField\n fieldId=\"salutation\"\n label=\"Salutation\"\n options={salutations}\n placeholder=\"Select\"\n required\n width=\"100px\"\n />\n </div>\n <InputWrapper>\n <StringField\n fieldId=\"firstName\"\n label=\"First Name\"\n placeholder=\"First Name\"\n required\n />\n <StringField\n fieldId=\"lastName\"\n label=\"Last Name\"\n placeholder=\"Last Name\"\n required\n />\n </InputWrapper>\n <StringField\n fieldId=\"phone\"\n label=\"Phone Nr\"\n placeholder=\"Phone Nr\"\n required\n />\n <StringField\n fieldId=\"role\"\n label=\"Role\"\n placeholder=\"Enter your role within the team\"\n />\n <StringField\n fieldId=\"linkedIn\"\n label=\"Link to LinkedIn Profile\"\n placeholder=\"https://www.linkedin.com/in/[linkedin username]\"\n />\n </React.Fragment>\n ) : null}\n </React.Fragment>\n )}\n </BodyContainer>\n {registerError === 'UNKNOWN_ERROR' ? null : (\n <Footer>\n <Button\n flavor=\"textButton\"\n label=\"Already have an account?\"\n onClick={goToIntake}\n />\n <Button\n flavor=\"primary\"\n label={step === 0 ? 'Next' : 'Submit'}\n onClick={submitForm}\n />\n </Footer>\n )}\n </FormWrapper>\n </Form>\n )}\n </Formik>\n </React.Fragment>\n );\n};\n\nRegisterForm.propTypes = {\n campaign: PropTypes.object.isRequired,\n goToFirstStep: PropTypes.func.isRequired,\n goToNextStep: PropTypes.func.isRequired,\n registerError: PropTypes.string.isRequired,\n registerUser: PropTypes.func.isRequired,\n setRegisterError: PropTypes.func.isRequired,\n step: PropTypes.number.isRequired,\n validationSchema: PropTypes.object.isRequired,\n};\n\n// ValidationSchemas for each step\nconst validationsSchemas = {\n 0: yup.object().shape({\n confirmPassword: yup.string().oneOf([yup.ref('password')], 'Passwords don\\'t match.').required('Password confirmation is required.'),\n email: yup.string().email().required('Please enter your email.'),\n password: yup.string().required('Password is required.').min(10, 'Password should at least be 10 characters long.'),\n }),\n 1: yup.object().shape({\n firstName: yup.string().required(),\n lastName: yup.string().required(),\n linkedIn: yup.string(),\n phone: yup.string().required(),\n role: yup.string(),\n salutation: yup.string().required(),\n })\n};\n\nconst SignUpSuccessWrapper = styled.div`\n background-color: ${({ theme }) => theme.colors.white};\n border-radius: 3px;\n padding: 32px 48px;\n position: relative;\n width: 500px;\n`;\n\nconst SignUpSuccessBody = styled(Body)`\n margin-bottom: 32px;\n`;\n\nconst SignUpSuccessTitle = styled(Title)`\n color: ${({ theme }) => theme.colors.primary};\n margin-bottom: 32px;\n padding-bottom: 8px;\n position: relative;\n\n &::after {\n background-color: ${({ theme }) => theme.colors.primary};\n bottom: 0;\n content: \"\";\n height: 3px;\n left: 0;\n position: absolute;\n width: 10%;\n }\n`;\n\nconst Check = styled(CheckIcon)`\n height: 150px;\n position: absolute;\n right: 0;\n top: -70px;\n width: 150px;\n`;\n\nconst SignUpSuccess = ({ campaign }) => {\n const history = useHistory();\n\n const goToIntake = () => {\n history.push(`/apply/${campaign.id}`);\n };\n\n return (\n <SignUpSuccessWrapper>\n <Check color={TURQUOISE} />\n <SignUpSuccessTitle size=\"h2\" weight=\"bold\">\n Welcome aboard!\n </SignUpSuccessTitle>\n <SignUpSuccessBody>\n Account successfully created.<br />\n Check your email and confirm your email address.\n </SignUpSuccessBody>\n <Button\n flavor=\"primary\"\n label=\"Login\"\n onClick={goToIntake}\n />\n </SignUpSuccessWrapper>\n );\n};\n\nSignUpSuccess.propTypes = {\n campaign: PropTypes.object.isRequired,\n};\n\nconst RegisterFormWrapper = ({ campaign, registerUser }) => {\n const [step, setStep] = React.useState(0);\n const [registerError, setRegisterError] = React.useState('');\n\n const goToNextStep = () => {\n setStep(s => s + 1);\n };\n\n const goToFirstStep = () => {\n setStep(0);\n };\n\n if (step === 2) {\n return <SignUpSuccess campaign={campaign} />;\n }\n\n return (\n <RegisterForm\n campaign={campaign}\n goToFirstStep={goToFirstStep}\n goToNextStep={goToNextStep}\n registerError={registerError}\n registerUser={registerUser}\n setRegisterError={setRegisterError}\n step={step}\n validationSchema={validationsSchemas[step]}\n />\n );\n};\n\nRegisterFormWrapper.propTypes = {\n campaign: PropTypes.object.isRequired,\n registerUser: PropTypes.func.isRequired,\n};\n\nexport default graphql({\n mutation: registerCampaignUser,\n name: 'registerUser',\n namespace: '_registerCampaignUser',\n type: 'Mutation',\n})(RegisterFormWrapper);\n" | |
| } | |
| } | |
| [Trace - 12:43:27] Received request 'workspace/configuration - (6)'. | |
| Params: { | |
| "items": [ | |
| { | |
| "scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/public/intakes/register.jsx", | |
| "section": "" | |
| } | |
| ] | |
| } | |
| [Trace - 12:43:27] Sending response 'workspace/configuration - (6)'. Processing request took 1ms | |
| Result: [ | |
| { | |
| "packageManager": "npm", | |
| "quiet": false, | |
| "validate": true, | |
| "autoFix": true, | |
| "autoFixOnSave": false, | |
| "autoFixSkipRules": [], | |
| "options": {}, | |
| "run": "onType", | |
| "workspaceFolder": { | |
| "uri": "file:///home/channi16/imec/innovatrix", | |
| "name": "innovatrix" | |
| }, | |
| "codeAction": { | |
| "disableRuleComment": { | |
| "enable": true, | |
| "location": "separateLine" | |
| }, | |
| "showDocumentation": { | |
| "enable": true | |
| } | |
| } | |
| } | |
| ] | |
| [Trace - 12:43:27] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/public/intakes/register.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 12:45:02] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 2 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:03] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 12:45:03] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 3 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\n\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:03] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "More than 2 blank lines not allowed. (no-multiple-empty-lines)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 97, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": "no-multiple-empty-lines" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:08] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 4 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nc\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:08] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Expected an assignment or function call and instead saw an expression. (no-unused-expressions)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 1 | |
| } | |
| }, | |
| "code": "no-unused-expressions" | |
| }, | |
| { | |
| "message": "'c' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 1 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 1 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 1 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:09] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 5 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst \n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:09] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected keyword 'const'\n\n 99 | const \n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:09] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 6 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst A\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:09] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const A\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:09] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 7 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst Ad\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:09] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const Ad\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:11] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 8 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst Advice\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:11] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const Advice\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:12] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 9 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceClo\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:12] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const AdviceClo\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:12] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 10 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceClos\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:12] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 11 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceClose\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:12] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const AdviceClos\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:12] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const AdviceClose\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:13] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 12 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseI\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:13] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseI\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:13] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 13 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIc\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:13] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseIc\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:14] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 14 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIco\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:14] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 15 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:14] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseIco\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:14] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseIcon\n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:14] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 16 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon \n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:14] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseIcon \n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:15] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 17 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = \n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:15] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 99 | const AdviceCloseIcon = \n 100 | \n> 101 | const smallToggleColors = {\n | ^\n 102 | active: PRIMARY,\n 103 | activeBorder: PRIMARY,\n 104 | activeThumb: PRIMARY,", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 0 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:15] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 18 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = s\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:15] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "'s' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 24 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 25 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 25 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 25 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:15] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 19 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styles\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:16] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "'styles' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 24 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 30 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 30 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 30 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:16] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 20 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:16] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 30 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 30 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:18] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 21 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled()\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:19] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 32 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 32 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:19] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 22 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(C)\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:19] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "'C' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 31 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 32 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 33 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 33 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:20] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 23 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(Clo)\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:20] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "'Clo' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 31 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 34 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 35 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 35 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:20] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 24 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:20] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 41 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 41 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:23] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 25 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)``\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:23] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 43 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 43 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:25] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 26 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n`\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:25] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 99, | |
| "character": 1 | |
| }, | |
| "end": { | |
| "line": 99, | |
| "character": 1 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:26] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 27 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:26] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:32] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 28 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:32] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:55] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 29 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 12:45:55] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| } | |
| ] | |
| } | |
| [Trace - 13:46:58] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 30 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:46:58] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "Trailing spaces not allowed. (no-trailing-spaces)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 184, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 184, | |
| "character": 0 | |
| } | |
| }, | |
| "code": "no-trailing-spaces" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:02] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 31 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n\n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:02] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'AdviceCloseIcon' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 98, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 98, | |
| "character": 21 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:02] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 32 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\nAdviceCloseIcon \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:02] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token, expected \",\"\n\n 185 | AdviceCloseIcon \n 186 | <CloseIcon\n> 187 | color={DANGER}\n | ^\n 188 | height={12}\n 189 | onClick={removeOption}\n 190 | styles={closeStyles}", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 186, | |
| "character": 14 | |
| }, | |
| "end": { | |
| "line": 186, | |
| "character": 14 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:03] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 33 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n AdviceCloseIcon \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:03] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token, expected \",\"\n\n 185 | AdviceCloseIcon \n 186 | <CloseIcon\n> 187 | color={DANGER}\n | ^\n 188 | height={12}\n 189 | onClick={removeOption}\n 190 | styles={closeStyles}", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 186, | |
| "character": 14 | |
| }, | |
| "end": { | |
| "line": 186, | |
| "character": 14 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:04] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 34 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n AdviceCloseIcon \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:04] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token, expected \",\"\n\n 185 | AdviceCloseIcon \n 186 | <CloseIcon\n> 187 | color={DANGER}\n | ^\n 188 | height={12}\n 189 | onClick={removeOption}\n 190 | styles={closeStyles}", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 186, | |
| "character": 14 | |
| }, | |
| "end": { | |
| "line": 186, | |
| "character": 14 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:04] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 35 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n AdviceCloseIcon \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:04] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token, expected \",\"\n\n 185 | AdviceCloseIcon \n 186 | <CloseIcon\n> 187 | color={DANGER}\n | ^\n 188 | height={12}\n 189 | onClick={removeOption}\n 190 | styles={closeStyles}", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 186, | |
| "character": 14 | |
| }, | |
| "end": { | |
| "line": 186, | |
| "character": 14 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:06] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 36 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon \n <CloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:06] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Parsing error: Unexpected token\n\n 184 | {isEditable && (\n 185 | <AdviceCloseIcon \n> 186 | <CloseIcon\n | ^\n 187 | color={DANGER}\n 188 | height={12}\n 189 | onClick={removeOption}", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 185, | |
| "character": 12 | |
| }, | |
| "end": { | |
| "line": 185, | |
| "character": 12 | |
| } | |
| }, | |
| "code": null | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:10] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 37 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon \n color={DANGER}\n height={12}\n onClick={removeOption}\n styles={closeStyles}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:10] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Trailing spaces not allowed. (no-trailing-spaces)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 184, | |
| "character": 28 | |
| }, | |
| "end": { | |
| "line": 184, | |
| "character": 28 | |
| } | |
| }, | |
| "code": "no-trailing-spaces" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:11] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 38 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon \n color={DANGER}\n height={12}\n onClick={removeOption}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:11] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'closeStyles' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 94, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 94, | |
| "character": 17 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "Trailing spaces not allowed. (no-trailing-spaces)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 184, | |
| "character": 28 | |
| }, | |
| "end": { | |
| "line": 184, | |
| "character": 28 | |
| } | |
| }, | |
| "code": "no-trailing-spaces" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:16] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 39 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\nconst closeStyles = css(crossStyles, {\n marginTop: 0,\n});\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:16] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'closeStyles' is assigned a value but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 94, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 94, | |
| "character": 17 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:24] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 40 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\nimport { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\n// const closeStyles = css(crossStyles, {\n// marginTop: 0,\n// });\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:24] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'css' is defined but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 3, | |
| "character": 9 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "character": 12 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "'crossStyles' is defined but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 19, | |
| "character": 9 | |
| }, | |
| "end": { | |
| "line": 19, | |
| "character": 20 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:37] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 41 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\n// import { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\n// const closeStyles = css(crossStyles, {\n// marginTop: 0,\n// });\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:37] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'css' is defined but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 3, | |
| "character": 9 | |
| }, | |
| "end": { | |
| "line": 3, | |
| "character": 12 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:41] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 42 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\n// import { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\n// import { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\n// const closeStyles = css(crossStyles, {\n// marginTop: 0,\n// });\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n withToolTip=\"Require reason?\"\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 13:47:41] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 13:47:44] Sending request 'textDocument/willSaveWaitUntil - (1)'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 42 | |
| }, | |
| "reason": 1 | |
| } | |
| [Trace - 13:47:44] Received response 'textDocument/willSaveWaitUntil - (1)' in 3ms. | |
| Result: [] | |
| [Trace - 13:47:44] Sending notification 'textDocument/didSave'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 42 | |
| } | |
| } | |
| [Trace - 16:11:22] Sending notification 'textDocument/didOpen'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "languageId": "javascriptreact", | |
| "version": 1, | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| } | |
| [Trace - 16:11:22] Received request 'workspace/configuration - (7)'. | |
| Params: { | |
| "items": [ | |
| { | |
| "scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "section": "" | |
| } | |
| ] | |
| } | |
| [Trace - 16:11:22] Sending response 'workspace/configuration - (7)'. Processing request took 1ms | |
| Result: [ | |
| { | |
| "packageManager": "npm", | |
| "quiet": false, | |
| "validate": true, | |
| "autoFix": true, | |
| "autoFixOnSave": false, | |
| "autoFixSkipRules": [], | |
| "options": {}, | |
| "run": "onType", | |
| "workspaceFolder": { | |
| "uri": "file:///home/channi16/imec/innovatrix", | |
| "name": "innovatrix" | |
| }, | |
| "codeAction": { | |
| "disableRuleComment": { | |
| "enable": true, | |
| "location": "separateLine" | |
| }, | |
| "showDocumentation": { | |
| "enable": true | |
| } | |
| } | |
| } | |
| ] | |
| [Trace - 16:11:22] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 16:13:47] Sending notification 'textDocument/didOpen'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/components/WithToolTip.jsx", | |
| "languageId": "javascriptreact", | |
| "version": 1, | |
| "text": "import React, { Fragment } from 'react';\nimport ReactToolTip from 'react-tooltip';\nimport PropTypes from 'prop-types';\nimport { uuid } from 'cargo-universal/utils/uuid';\n\nconst style = { display: 'inline-flex' };\n\n/**\n * Wrapper that renders on tooltip around the children's hover effect.\n *\n * @param {React.node} children - React children.\n * @param {number} [delay = 500] - Delay that starts ticking on first hover, after delay passes our tooltip shows.\n * @param {boolean} [html = false] - Whether or not to support html in the label.\n * @param {string} [placement = 'top'] - Where the tooltip needs to float.\n * @param {string} label - The tooltip's text.\n * @param {string} [id = uuid()] - The unique id to match on.\n * @param {any} [styles] - Optional glamor styles, these will be applied to the containing div.\n */\nconst ToolTip = ({\n className, children, delay = 500, html = false, label, placement = 'top', id, styles, ...props\n}) => {\n const idRef = React.useRef(id);\n if (!idRef.current) { idRef.current = uuid(); }\n return (\n <Fragment>\n <ReactToolTip html={html} id={id} />\n <div\n style={style}\n className={`Tooltip-Container${className ? ` ${className}` : ''}`}\n {...styles}\n {...props}\n data-delay-show={delay}\n data-for={id}\n data-place={placement}\n data-tip={label}\n >\n {children}\n </div>\n </Fragment>\n );\n};\n\n\nToolTip.propTypes = {\n children: PropTypes.node.isRequired,\n className: PropTypes.string,\n delay: PropTypes.number,\n html: PropTypes.bool,\n id: PropTypes.string,\n label: PropTypes.string,\n placement: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),\n styles: PropTypes.any,\n};\n\nexport default React.memo(ToolTip);\n" | |
| } | |
| } | |
| [Trace - 16:13:47] Received request 'workspace/configuration - (8)'. | |
| Params: { | |
| "items": [ | |
| { | |
| "scopeUri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/components/WithToolTip.jsx", | |
| "section": "" | |
| } | |
| ] | |
| } | |
| [Trace - 16:13:47] Sending response 'workspace/configuration - (8)'. Processing request took 1ms | |
| Result: [ | |
| { | |
| "packageManager": "npm", | |
| "quiet": false, | |
| "validate": true, | |
| "autoFix": true, | |
| "autoFixOnSave": false, | |
| "autoFixSkipRules": [], | |
| "options": {}, | |
| "run": "onType", | |
| "workspaceFolder": { | |
| "uri": "file:///home/channi16/imec/innovatrix", | |
| "name": "innovatrix" | |
| }, | |
| "codeAction": { | |
| "disableRuleComment": { | |
| "enable": true, | |
| "location": "separateLine" | |
| }, | |
| "showDocumentation": { | |
| "enable": true | |
| } | |
| } | |
| } | |
| ] | |
| [Trace - 16:13:48] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/pages/components/WithToolTip.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 16:16:32] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 43 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\n// import { css } from 'glamor';\nimport SelectField from '@innovatrix/common/fields/SelectField';\nimport StringField from '@innovatrix/common/fields/StringField';\nimport Toggle from '@innovatrix/common/fields/ToggleField';\nimport { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport MaybeIcon from '@innovatrix/icons/Unknown';\nimport CloseIcon from '@innovatrix/icons/CloseIcon';\nimport CheckIcon from '@innovatrix/icons/CheckIcon';\nimport ConditionsIcon from '@innovatrix/icons/ConditionsIcon';\nimport DragDropHandlerIcon from '@innovatrix/icons/DragDropHandlerIcon';\nimport { WHITE, GREY_2, DECISION_GO, DECISION_CONDITIONS, DECISION_NO_GO, DECISION_MAYBE, PRIMARY } from '@innovatrix/styles';\nimport { NOT_DRAGGABLE_OPTIONS, APPROVED, REJECTED, CONDITIONS, MAYBE } from '@innovatrix/constants';\nimport { moveOnHover } from '@innovatrix/components';\n\nimport { DANGER } from '../../../../../../styles';\n// import { crossStyles } from '../styles';\n\nconst AdviceOptionWrapper = styled.div`\n align-items: center;\n display: flex;\n height: auto;\n justify-content: space-around;\n margin-bottom: 6px;\n opacity: 1;\n transition: all 0.2s ease-in;\n\n &:last-child {\n margin-bottom: 8px;\n }\n\n &.editable {\n margin-bottom: 12px;\n\n &:last-child {\n margin-bottom: 12px;\n }\n }\n\n &.dragging {\n opacity: 0;\n }\n`;\n\nconst DragDropHandlerWrapper = styled.div`\n align-items: center;\n align-self: center;\n cursor: move;\n display: flex;\n justify-content: center;\n opacity: 0.5;\n transition: opacity 0.3s;\n\n &.dragging {\n opacity: 0;\n\n &:hover {\n opacity: 0;\n }\n }\n\n &:hover {\n opacity: 1;\n }\n`;\n\nconst StyledAdviceStringField = styled(StringField)`\n flex-grow: 2;\n padding-left: 12px;\n padding-right: 12px;\n\n > div > input {\n background-color: transparent;\n }\n`;\n\nconst AdviceToggle = styled(Toggle)`\n margin-bottom: 0;\n padding-right: 12px;\n flex: 0 0;\n`;\n\nconst AdviceSelectField = styled(SelectField)`\n > div {\n margin-bottom: 0;\n > button {\n min-width: ${({ disabled }) => (disabled ? '130px' : '145px')};\n }\n }\n`;\n\n// const closeStyles = css(crossStyles, {\n// marginTop: 0,\n// });\n\nconst AdviceCloseIcon = styled(CloseIcon)`\n cursor: 'pointer',\n marginRight: 12,\n marginTop: 10,\n opacity: '0.4',\n flex: '0 0 auto',\n ':hover': {\n opacity: '0.7',\n transition: 'all 0.3s ease-in',\n }\n marginTop: 0,\n`;\n\nconst smallToggleColors = {\n active: PRIMARY,\n activeBorder: PRIMARY,\n activeThumb: PRIMARY,\n inactiveThumb: WHITE,\n};\n\nconst iconMapping = {\n Approved: <CheckIcon color={DECISION_GO} />,\n Rejected: <CloseIcon color={DECISION_NO_GO} />,\n Maybe: <MaybeIcon color={DECISION_MAYBE} />,\n Conditions: <ConditionsIcon color={DECISION_CONDITIONS} />\n};\n\nconst options = [\n { label: APPROVED, icon: iconMapping[APPROVED], value: APPROVED },\n { label: CONDITIONS, icon: iconMapping[CONDITIONS], value: CONDITIONS },\n { label: REJECTED, icon: iconMapping[REJECTED], value: REJECTED },\n { label: MAYBE, icon: iconMapping[MAYBE], value: MAYBE },\n];\n\n// eslint-disable-next-line react/prefer-stateless-function\nclass AdviceOptionComponentWrapper extends React.Component {\n\n render() {\n return (\n <AdviceOption {...this.props} />\n );\n }\n\n}\n\nconst AdviceOption = ({\n actualOrder,\n answer,\n canDrag,\n change,\n chosenValues,\n connectDragPreview,\n connectDragSource,\n connectDropTarget,\n deleteField,\n fieldId,\n isDragging,\n isEditable,\n onEnter,\n}) => {\n React.useEffect(() => {\n connectDragPreview(getEmptyImage(), { captureDraggingState: true });\n }, [connectDragPreview]);\n\n React.useEffect(() => {\n if (!answer.value) {\n change(`${fieldId}.value`, availableOptions[0].value);\n }\n }, [answer.value, availableOptions, change, fieldId]);\n\n const availableOptions = React.useMemo(() =>\n options.filter(o => !chosenValues.includes(o.value) || answer.value === o.value)\n , [answer.value, chosenValues, options]); // eslint-disable-line\n\n const removeOption = React.useCallback(() => {\n deleteField(actualOrder);\n }, [actualOrder, deleteField]);\n\n return (\n connectDropTarget(\n <div>\n <AdviceOptionWrapper\n className={`${isDragging ? 'dragging ' : ' '}${isEditable ? 'editable ' : ''}`}\n onKeyDown={onEnter}\n >\n {isEditable && (\n <AdviceCloseIcon\n color={DANGER}\n height={12}\n onClick={removeOption}\n width={12}\n />\n )}\n {answer.value && (\n <AdviceSelectField\n disabled={!isEditable}\n options={availableOptions}\n fieldId={`${fieldId}.value`}\n icon={iconMapping[answer.value]}\n />\n )}\n <StyledAdviceStringField\n disabled={!isEditable}\n placeholder=\"Advice option\"\n fieldId={`${fieldId}.title`}\n />\n <AdviceToggle\n disabled={!isEditable}\n colors={smallToggleColors}\n small\n fieldId={`${fieldId}.requiresCondition`}\n />\n {isEditable && connectDragSource(\n <div>\n <DragDropHandlerWrapper className={`${(!canDrag || isDragging) ? 'dragging' : ''}`}>\n <DragDropHandlerIcon color={GREY_2} height={16} width={16} />\n </DragDropHandlerWrapper>\n </div>\n )}\n </AdviceOptionWrapper>\n </div>\n )\n );\n};\n\nAdviceOption.propTypes = {\n actualOrder: PropTypes.number,\n answer: PropTypes.object,\n canDrag: PropTypes.bool,\n change: PropTypes.func,\n chosenDropdownOptions: PropTypes.array,\n connectDragPreview: PropTypes.func,\n connectDragSource: PropTypes.func,\n connectDropTarget: PropTypes.func,\n deleteField: PropTypes.func,\n fieldId: PropTypes.string,\n isDragging: PropTypes.bool,\n isEditable: PropTypes.bool,\n moveAnswerOption: PropTypes.func,\n onEnter: PropTypes.func,\n};\n\nconst adviceOptionSource = {\n beginDrag(props) {\n const { actualOrder, answer: { order: originalOrder } } = props;\n return {\n ...props,\n id: `AdviceOption-${actualOrder}`,\n originalOrder,\n };\n },\n canDrag({ answer: { order: originalOrder, title }, isEditable }) {\n return (\n // It has to be editable to drag.\n isEditable &&\n // It needs an order to be dragged.\n typeof originalOrder === 'number' &&\n // It can't be an option with a specific order.\n !NOT_DRAGGABLE_OPTIONS.includes(title)\n );\n },\n isDragging({ answer, isEditable }, monitor) {\n // We can only drag editable answers.\n return isEditable && monitor.getItem().answer.order === answer.order;\n }\n};\n\nconst collect = (dndConnect, monitor) => ({\n canDrag: monitor.canDrag(),\n connectDragPreview: dndConnect.dragPreview(),\n connectDragSource: dndConnect.dragSource(),\n isDragging: monitor.isDragging(),\n});\n\nconst adviceOptionTarget = {\n canDrop(_, monitor) {\n const { answer: { order: originalOrder, title }, isEditable } = monitor.getItem();\n return isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title);\n },\n hover({ actualOrder, answer: { order: originalOrder, title }, isEditable, moveAnswerOption }, monitor, component) {\n if (isEditable && typeof originalOrder === 'number' && !NOT_DRAGGABLE_OPTIONS.includes(title)) {\n moveOnHover(actualOrder, moveAnswerOption, monitor, component);\n }\n },\n};\n\nexport default dropTarget('AdviceOption', adviceOptionTarget, connectTarget => ({\n connectDropTarget: connectTarget.dropTarget(),\n}))(dragSource('AdviceOption', adviceOptionSource, collect)(AdviceOptionComponentWrapper));\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:16:33] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 16:16:33] Sending request 'textDocument/willSaveWaitUntil - (2)'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 43 | |
| }, | |
| "reason": 1 | |
| } | |
| [Trace - 16:16:33] Received response 'textDocument/willSaveWaitUntil - (2)' in 4ms. | |
| Result: [] | |
| [Trace - 16:16:33] Sending notification 'textDocument/didSave'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/innovatrix/assessments/components/questions/overallAdvice/AdviceOption.jsx", | |
| "version": 43 | |
| } | |
| } | |
| [Trace - 16:24:47] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 2 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n \n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:47] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Block must not be padded by blank lines. (padded-blocks)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 90, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 90, | |
| "character": 6 | |
| } | |
| }, | |
| "code": "padded-blocks" | |
| }, | |
| { | |
| "message": "Trailing spaces not allowed. (no-trailing-spaces)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 0 | |
| } | |
| }, | |
| "code": "no-trailing-spaces" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:49] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 3 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n c\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:49] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Expected an assignment or function call and instead saw an expression. (no-unused-expressions)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 3 | |
| } | |
| }, | |
| "code": "no-unused-expressions" | |
| }, | |
| { | |
| "message": "'c' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 3 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 3 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 3 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:49] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 4 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n con\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:49] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Expected an assignment or function call and instead saw an expression. (no-unused-expressions)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 5 | |
| } | |
| }, | |
| "code": "no-unused-expressions" | |
| }, | |
| { | |
| "message": "'con' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 5 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 5 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 5 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:50] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 5 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n conso\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:50] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Expected an assignment or function call and instead saw an expression. (no-unused-expressions)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 7 | |
| } | |
| }, | |
| "code": "no-unused-expressions" | |
| }, | |
| { | |
| "message": "'conso' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 7 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 7 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 7 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:51] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 6 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:51] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Expected an assignment or function call and instead saw an expression. (no-unused-expressions)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 9 | |
| } | |
| }, | |
| "code": "no-unused-expressions" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 9 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 9 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:52] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 7 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console.l\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:52] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Expected an assignment or function call and instead saw an expression. (no-unused-expressions)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 11 | |
| } | |
| }, | |
| "code": "no-unused-expressions" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 11 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 11 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:52] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 8 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console.log\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:52] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Expected an assignment or function call and instead saw an expression. (no-unused-expressions)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 13 | |
| } | |
| }, | |
| "code": "no-unused-expressions" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 13 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 13 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:52] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 9 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console.log()\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:53] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 15 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 15 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:54] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 10 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console.log({})\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:54] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 17 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 17 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:54] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 11 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console.log({ c})\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:54] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'c' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 16 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 17 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "A space is required before '}'. (object-curly-spacing)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 17 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 17 | |
| } | |
| }, | |
| "code": "object-curly-spacing" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 19 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 19 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:55] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 12 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console.log({ checked})\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:55] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "A space is required before '}'. (object-curly-spacing)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 23 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 23 | |
| } | |
| }, | |
| "code": "object-curly-spacing" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 25 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 25 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:57] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 13 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console.log({ checked })\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:57] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 26 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 26 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:57] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 14 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:24:57] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 16:24:59] Sending request 'textDocument/willSaveWaitUntil - (3)'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 14 | |
| }, | |
| "reason": 1 | |
| } | |
| [Trace - 16:24:59] Received response 'textDocument/willSaveWaitUntil - (3)' in 5ms. | |
| Result: [] | |
| [Trace - 16:24:59] Sending notification 'textDocument/didSave'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 14 | |
| } | |
| } | |
| [Trace - 16:27:11] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 15 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console.log({ checked })\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:11] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 26 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 26 | |
| } | |
| }, | |
| "code": "semi" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:11] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 16 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value: checked,\n withToolTip,\n}) => {\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:11] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [] | |
| } | |
| [Trace - 16:27:18] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 17 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:19] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'value' is defined but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 88, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 88, | |
| "character": 7 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 16 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 23 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 93, | |
| "character": 22 | |
| }, | |
| "end": { | |
| "line": 93, | |
| "character": 29 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "React Hook React.useCallback has an unnecessary dependency: 'checked'. Either exclude it or remove the dependency array. Outer scope values like 'checked' aren't valid dependencies because mutating them doesn't re-render the component. (react-hooks/exhaustive-deps)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 5 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 33 | |
| } | |
| }, | |
| "code": "react-hooks/exhaustive-deps" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 100, | |
| "character": 25 | |
| }, | |
| "end": { | |
| "line": 100, | |
| "character": 32 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 145, | |
| "character": 19 | |
| }, | |
| "end": { | |
| "line": 145, | |
| "character": 26 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 156, | |
| "character": 19 | |
| }, | |
| "end": { | |
| "line": 156, | |
| "character": 26 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 165, | |
| "character": 33 | |
| }, | |
| "end": { | |
| "line": 165, | |
| "character": 40 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "React Hook React.useMemo has an unnecessary dependency: 'checked'. Either exclude it or remove the dependency array. Outer scope values like 'checked' aren't valid dependencies because mutating them doesn't re-render the component. (react-hooks/exhaustive-deps)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 172, | |
| "character": 4 | |
| }, | |
| "end": { | |
| "line": 185, | |
| "character": 5 | |
| } | |
| }, | |
| "code": "react-hooks/exhaustive-deps" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 174, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 174, | |
| "character": 13 | |
| } | |
| }, | |
| "code": "no-undef" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:21] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 18 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n \n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:21] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'value' is defined but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 88, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 88, | |
| "character": 7 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "Block must not be padded by blank lines. (padded-blocks)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 90, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 90, | |
| "character": 6 | |
| } | |
| }, | |
| "code": "padded-blocks" | |
| }, | |
| { | |
| "message": "Trailing spaces not allowed. (no-trailing-spaces)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 0 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 0 | |
| } | |
| }, | |
| "code": "no-trailing-spaces" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 92, | |
| "character": 16 | |
| }, | |
| "end": { | |
| "line": 92, | |
| "character": 23 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 94, | |
| "character": 22 | |
| }, | |
| "end": { | |
| "line": 94, | |
| "character": 29 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "React Hook React.useCallback has an unnecessary dependency: 'checked'. Either exclude it or remove the dependency array. Outer scope values like 'checked' aren't valid dependencies because mutating them doesn't re-render the component. (react-hooks/exhaustive-deps)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 101, | |
| "character": 5 | |
| }, | |
| "end": { | |
| "line": 101, | |
| "character": 33 | |
| } | |
| }, | |
| "code": "react-hooks/exhaustive-deps" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 101, | |
| "character": 25 | |
| }, | |
| "end": { | |
| "line": 101, | |
| "character": 32 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 146, | |
| "character": 19 | |
| }, | |
| "end": { | |
| "line": 146, | |
| "character": 26 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 157, | |
| "character": 19 | |
| }, | |
| "end": { | |
| "line": 157, | |
| "character": 26 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 166, | |
| "character": 33 | |
| }, | |
| "end": { | |
| "line": 166, | |
| "character": 40 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "React Hook React.useMemo has an unnecessary dependency: 'checked'. Either exclude it or remove the dependency array. Outer scope values like 'checked' aren't valid dependencies because mutating them doesn't re-render the component. (react-hooks/exhaustive-deps)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 173, | |
| "character": 4 | |
| }, | |
| "end": { | |
| "line": 186, | |
| "character": 5 | |
| } | |
| }, | |
| "code": "react-hooks/exhaustive-deps" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 175, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 175, | |
| "character": 13 | |
| } | |
| }, | |
| "code": "no-undef" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:21] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 19 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n c\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:21] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 20 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n co\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:21] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 21 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n con\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:21] Received notification 'textDocument/publishDiagnostics'. | |
| Params: { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "diagnostics": [ | |
| { | |
| "message": "'value' is defined but never used. (no-unused-vars)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 88, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 88, | |
| "character": 7 | |
| } | |
| }, | |
| "code": "no-unused-vars" | |
| }, | |
| { | |
| "message": "Expected an assignment or function call and instead saw an expression. (no-unused-expressions)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 3 | |
| } | |
| }, | |
| "code": "no-unused-expressions" | |
| }, | |
| { | |
| "message": "'c' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 2 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 3 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "Missing semicolon. (semi)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 91, | |
| "character": 3 | |
| }, | |
| "end": { | |
| "line": 91, | |
| "character": 3 | |
| } | |
| }, | |
| "code": "semi" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 92, | |
| "character": 16 | |
| }, | |
| "end": { | |
| "line": 92, | |
| "character": 23 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 94, | |
| "character": 22 | |
| }, | |
| "end": { | |
| "line": 94, | |
| "character": 29 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "React Hook React.useCallback has an unnecessary dependency: 'checked'. Either exclude it or remove the dependency array. Outer scope values like 'checked' aren't valid dependencies because mutating them doesn't re-render the component. (react-hooks/exhaustive-deps)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 101, | |
| "character": 5 | |
| }, | |
| "end": { | |
| "line": 101, | |
| "character": 33 | |
| } | |
| }, | |
| "code": "react-hooks/exhaustive-deps" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 101, | |
| "character": 25 | |
| }, | |
| "end": { | |
| "line": 101, | |
| "character": 32 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 146, | |
| "character": 19 | |
| }, | |
| "end": { | |
| "line": 146, | |
| "character": 26 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 157, | |
| "character": 19 | |
| }, | |
| "end": { | |
| "line": 157, | |
| "character": 26 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 166, | |
| "character": 33 | |
| }, | |
| "end": { | |
| "line": 166, | |
| "character": 40 | |
| } | |
| }, | |
| "code": "no-undef" | |
| }, | |
| { | |
| "message": "React Hook React.useMemo has an unnecessary dependency: 'checked'. Either exclude it or remove the dependency array. Outer scope values like 'checked' aren't valid dependencies because mutating them doesn't re-render the component. (react-hooks/exhaustive-deps)", | |
| "severity": 2, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 173, | |
| "character": 4 | |
| }, | |
| "end": { | |
| "line": 186, | |
| "character": 5 | |
| } | |
| }, | |
| "code": "react-hooks/exhaustive-deps" | |
| }, | |
| { | |
| "message": "'checked' is not defined. (no-undef)", | |
| "severity": 1, | |
| "source": "eslint", | |
| "range": { | |
| "start": { | |
| "line": 175, | |
| "character": 6 | |
| }, | |
| "end": { | |
| "line": 175, | |
| "character": 13 | |
| } | |
| }, | |
| "code": "no-undef" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:21] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 22 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n cons\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:22] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 23 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const \n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:22] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 24 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const c\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:23] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 25 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const check\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:24] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 26 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:25] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 27 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked \n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:27] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 28 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = \n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:30] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 29 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = v\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:30] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 30 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:31] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 31 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value \n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:32] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 32 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === \n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:32] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 33 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === n\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:33] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 34 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:34] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 35 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null ? \n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:45] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 36 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null ? f\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:46] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 37 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null ? fals\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:46] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 38 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null ? false \n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:47] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 39 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null ? false : \n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:48] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 40 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null ? false : c\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:48] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 41 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null ? false : ch\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:49] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 42 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null ? false : check\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:49] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 43 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null ? false : checked\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:27:50] Sending notification 'textDocument/didChange'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 44 | |
| }, | |
| "contentChanges": [ | |
| { | |
| "text": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport ToggleButton from 'react-toggle-button';\nimport styled from '@emotion/styled';\nimport formikField from '@innovatrix/components/fields/formikField';\nimport { WHITE, GREY_2, GREY_1, SECONDARY } from '@innovatrix/styles';\nimport WithToolTip from '@innovatrix/components/WithToolTip';\n\nimport { Paragraph } from '../text';\n\nimport { LabelGroup, FormGroup } from './_helpers';\n\nconst ToggleWrapper = styled.label`\n display: flex;\n margin-bottom: 0;\n\n > div {\n cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n\n > div:first-of-type {\n border: 1px solid\n ${({ checked, colors }) =>\n (checked\n ? colors.activeBorder || WHITE\n : colors.inactiveBorder || GREY_2)} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '10px' : '26px')} !important;\n width: ${({ small }) => (small ? '35px' : '59px')} !important;\n }\n\n > div:nth-of-type(2) {\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n\n > div {\n align-items: center;\n box-shadow: ${({ small }) =>\n (small ? '0 0 5px 0 rgba(0, 0, 0, 0.7)' : 'none')} !important;\n cursor: ${({ disabled }) =>\n (disabled ? 'default' : 'pointer')} !important;\n height: ${({ small }) => (small ? '17px' : '22px')} !important;\n justify-content: center;\n left: ${({ small, checked }) =>\n (small\n ? checked\n ? '25px'\n : '1px'\n : checked\n ? '33px'\n : '1px')} !important;\n margin-left: ${({ small }) => (small ? '-2px' : '2px')};\n transition: 0.3s ease-in left;\n width: ${({ small }) => (small ? '17px' : '22px')} !important;\n }\n }\n }\n`;\n\nconst ToolTipWrapper = styled.div`\n position: relative;\n`;\n\nconst ExtraLabel = styled(Paragraph)`\n display: flex;\n margin-bottom: 0;\n margin-left: 12px;\n opacity: ${({ checked }) => (checked ? 1 : 0.5)};\n`;\n\nconst TRANSPARENT = 'transparent';\n\nexport const Toggle = ({\n activeLabel,\n className,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n information,\n label,\n onChange,\n onClick,\n small,\n thumbIcon,\n value,\n withToolTip,\n}) => {\n const checked = value === null ? false : checked;\n console.log({ checked });\n const onToggle = React.useCallback(() => {\n const newValue = !checked;\n if (onChange) {\n onChange(newValue);\n }\n if (onClick) {\n onClick(newValue);\n }\n }, [onChange, onClick, checked]);\n\n // react-toggle-button styles\n const toggleButtonStyles = React.useMemo(\n () => ({\n activeLabelStyle: {\n color: small ? TRANSPARENT : colors.activeLabel || WHITE,\n height: 0,\n },\n colors: {\n activeThumb: {\n base: colors.activeThumb || WHITE,\n },\n inactiveThumb: {\n base: colors.inactiveThumb || SECONDARY,\n },\n active: {\n base: colors.active || WHITE,\n hover: colors.active || WHITE,\n },\n inactive: {\n base: colors.inactive || GREY_1,\n hover: colors.inactive || GREY_1,\n },\n },\n inactiveLabelStyle: {\n color: small ? TRANSPARENT : colors.inactiveLabel || GREY_1,\n height: 0,\n },\n }),\n [\n colors.active,\n colors.activeLabel,\n colors.activeThumb,\n colors.inactive,\n colors.inactiveLabel,\n colors.inactiveThumb,\n small,\n ]\n );\n\n const toggle = React.useMemo(\n () => {\n return (\n <ToggleWrapper\n checked={checked}\n colors={colors}\n disabled={disabled}\n fieldId={fieldId}\n small={small}\n >\n <ToggleButton\n activeLabel={small ? '' : activeLabel}\n inactiveLabel={small ? '' : inactiveLabel}\n onToggle={disabled ? undefined : onToggle}\n thumbIcon={thumbIcon}\n value={checked}\n {...toggleButtonStyles}\n />\n {extraLabel && (\n <ExtraLabel>\n Required\n </ExtraLabel>\n )}\n {extraLabelText && (\n <ExtraLabel checked={checked}>\n {extraLabelText}\n </ExtraLabel>\n )}\n </ToggleWrapper>\n );\n },\n [\n activeLabel,\n checked,\n colors,\n disabled,\n extraLabel,\n extraLabelText,\n fieldId,\n inactiveLabel,\n onToggle,\n small,\n thumbIcon,\n toggleButtonStyles,\n ]\n );\n\n if (withToolTip) {\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n <ToolTipWrapper>\n <WithToolTip data-effect=\"solid\" label={withToolTip}>\n {toggle}\n </WithToolTip>\n </ToolTipWrapper>\n </FormGroup>\n );\n }\n\n return (\n <FormGroup className={className}>\n {label && <LabelGroup label={label} information={information} />}\n {toggle}\n </FormGroup>\n );\n};\n\nToggle.propTypes = {\n activeLabel: PropTypes.any,\n className: PropTypes.string,\n colors: PropTypes.shape({\n active: PropTypes.string,\n activeBorder: PropTypes.string,\n activeLabel: PropTypes.string,\n activeThumb: PropTypes.string,\n inactive: PropTypes.string,\n inactiveBorder: PropTypes.string,\n inactiveLabel: PropTypes.string,\n inactiveThumb: PropTypes.string,\n }),\n disabled: PropTypes.bool,\n extraLabel: PropTypes.bool,\n extraLabelText: PropTypes.string,\n fieldId: PropTypes.string,\n inactiveLabel: PropTypes.any,\n information: PropTypes.string,\n label: PropTypes.string,\n onChange: PropTypes.func,\n onClick: PropTypes.func,\n small: PropTypes.bool,\n thumbIcon: PropTypes.any,\n value: PropTypes.bool,\n withToolTip: PropTypes.string,\n};\n\nToggle.defaultProps = {\n activeLabel: 'YES',\n className: '',\n colors: {},\n disabled: false,\n extraLabel: false,\n extraLabelText: '',\n fieldId: undefined,\n inactiveLabel: 'NO',\n information: null,\n label: null,\n onChange: undefined,\n onClick: undefined,\n small: false,\n thumbIcon: undefined,\n value: false,\n withToolTip: undefined,\n};\n\nexport default formikField(Toggle);\n" | |
| } | |
| ] | |
| } | |
| [Trace - 16:28:23] Sending request 'textDocument/willSaveWaitUntil - (4)'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 44 | |
| }, | |
| "reason": 1 | |
| } | |
| [Trace - 16:28:23] Received response 'textDocument/willSaveWaitUntil - (4)' in 3ms. | |
| Result: [] | |
| [Trace - 16:28:23] Sending notification 'textDocument/didSave'. | |
| Params: { | |
| "textDocument": { | |
| "uri": "file:///home/channi16/imec/innovatrix/images/front/source/modules/common/fields/ToggleField.jsx", | |
| "version": 44 | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment