\r\n // elements so we don't need to include this hack.\r\n text = text.split(ZERO_WIDTH_SPACE).join(SOFT_BREAK_PLACEHOLDER);\r\n this.processText(text);\r\n }\r\n }, {\r\n key: 'processText',\r\n value: function processText(text) {\r\n var block = this.blockStack.slice(-1)[0];\r\n var style = block.styleStack.slice(-1)[0];\r\n var entity = block.entityStack.slice(-1)[0];\r\n var charMetadata = _draftJs.CharacterMetadata.create({\r\n style: style,\r\n entity: entity\r\n });\r\n var seq = (0, _immutable.Repeat)(charMetadata, text.length);\r\n block.textFragments.push({\r\n text: text,\r\n characterMeta: seq\r\n });\r\n }\r\n }, {\r\n key: 'processNode',\r\n value: function processNode(node) {\r\n if (node.nodeType === _syntheticDom.NODE_TYPE_ELEMENT) {\r\n // $FlowIssue\r\n var _element = node;\r\n var _tagName = _element.nodeName.toLowerCase();\r\n if (_Constants.INLINE_ELEMENTS.hasOwnProperty(_tagName)) {\r\n this.processInlineElement(_element);\r\n } else {\r\n this.processBlockElement(_element);\r\n }\r\n } else if (node.nodeType === _syntheticDom.NODE_TYPE_TEXT) {\r\n this.processTextNode(node);\r\n }\r\n }\r\n }, {\r\n key: 'createEntity',\r\n value: function createEntity(type, data) {\r\n var mutability = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'MUTABLE';\r\n\r\n this.contentStateForEntities = this.contentStateForEntities.createEntity(type, mutability, data);\r\n return this.contentStateForEntities.getLastCreatedEntityKey();\r\n }\r\n }]);\r\n\r\n return ContentGenerator;\r\n}();\r\n\r\nfunction trimLeadingNewline(text, characterMeta) {\r\n if (text.charAt(0) === '\\n') {\r\n text = text.slice(1);\r\n characterMeta = characterMeta.slice(1);\r\n }\r\n return { text: text, characterMeta: characterMeta };\r\n}\r\n\r\nfunction trimLeadingSpace(text, characterMeta) {\r\n while (text.charAt(0) === ' ') {\r\n text = text.slice(1);\r\n characterMeta = characterMeta.slice(1);\r\n }\r\n return { text: text, characterMeta: characterMeta };\r\n}\r\n\r\nfunction trimTrailingSpace(text, characterMeta) {\r\n while (text.slice(-1) === ' ') {\r\n text = text.slice(0, -1);\r\n characterMeta = characterMeta.slice(0, -1);\r\n }\r\n return { text: text, characterMeta: characterMeta };\r\n}\r\n\r\nfunction collapseWhiteSpace(text, characterMeta) {\r\n text = text.replace(/[ \\t\\n]/g, ' ');\r\n\r\n var _trimLeadingSpace = trimLeadingSpace(text, characterMeta);\r\n\r\n text = _trimLeadingSpace.text;\r\n characterMeta = _trimLeadingSpace.characterMeta;\r\n\r\n var _trimTrailingSpace = trimTrailingSpace(text, characterMeta);\r\n\r\n text = _trimTrailingSpace.text;\r\n characterMeta = _trimTrailingSpace.characterMeta;\r\n\r\n var i = text.length;\r\n while (i--) {\r\n if (text.charAt(i) === ' ' && text.charAt(i - 1) === ' ') {\r\n text = text.slice(0, i) + text.slice(i + 1);\r\n characterMeta = characterMeta.slice(0, i).concat(characterMeta.slice(i + 1));\r\n }\r\n }\r\n // There could still be one space on either side of a softbreak.\r\n\r\n var _replaceTextWithMeta = (0, _replaceTextWithMeta4.default)({ text: text, characterMeta: characterMeta }, SOFT_BREAK_PLACEHOLDER + ' ', SOFT_BREAK_PLACEHOLDER);\r\n\r\n text = _replaceTextWithMeta.text;\r\n characterMeta = _replaceTextWithMeta.characterMeta;\r\n\r\n var _replaceTextWithMeta2 = (0, _replaceTextWithMeta4.default)({ text: text, characterMeta: characterMeta }, ' ' + SOFT_BREAK_PLACEHOLDER, SOFT_BREAK_PLACEHOLDER);\r\n\r\n text = _replaceTextWithMeta2.text;\r\n characterMeta = _replaceTextWithMeta2.characterMeta;\r\n\r\n return { text: text, characterMeta: characterMeta };\r\n}\r\n\r\nfunction canHaveDepth(blockType) {\r\n switch (blockType) {\r\n case _draftJsUtils.BLOCK_TYPE.UNORDERED_LIST_ITEM:\r\n case _draftJsUtils.BLOCK_TYPE.ORDERED_LIST_ITEM:\r\n {\r\n return true;\r\n }\r\n default:\r\n {\r\n return false;\r\n }\r\n }\r\n}\r\n\r\nfunction concatFragments(fragments) {\r\n var text = '';\r\n var characterMeta = (0, _immutable.Seq)();\r\n fragments.forEach(function (textFragment) {\r\n text = text + textFragment.text;\r\n characterMeta = characterMeta.concat(textFragment.characterMeta);\r\n });\r\n return { text: text, characterMeta: characterMeta };\r\n}\r\n\r\nfunction addStyleFromTagName(styleSet, tagName, elementStyles) {\r\n switch (tagName) {\r\n case 'b':\r\n case 'strong':\r\n {\r\n return styleSet.add(_draftJsUtils.INLINE_STYLE.BOLD);\r\n }\r\n case 'i':\r\n case 'em':\r\n {\r\n return styleSet.add(_draftJsUtils.INLINE_STYLE.ITALIC);\r\n }\r\n case 'u':\r\n case 'ins':\r\n {\r\n return styleSet.add(_draftJsUtils.INLINE_STYLE.UNDERLINE);\r\n }\r\n case 'code':\r\n {\r\n return styleSet.add(_draftJsUtils.INLINE_STYLE.CODE);\r\n }\r\n case 's':\r\n case 'del':\r\n {\r\n return styleSet.add(_draftJsUtils.INLINE_STYLE.STRIKETHROUGH);\r\n }\r\n default:\r\n {\r\n // Allow custom styles to be provided.\r\n if (elementStyles && elementStyles[tagName]) {\r\n return styleSet.add(elementStyles[tagName]);\r\n }\r\n\r\n return styleSet;\r\n }\r\n }\r\n}\r\n\r\nfunction hasSemanticMeaning(blockType) {\r\n return blockType !== _draftJsUtils.BLOCK_TYPE.UNSTYLED;\r\n}\r\n\r\nfunction stateFromElement(element, options) {\r\n return new ContentGenerator(options).process(element);\r\n}\r\n\r\nexports.default = stateFromElement;","/*\r\n\r\n From: https://www.npmjs.com/package/draft-js-import-element\r\n Version used: 1.2.1\r\n Last modified: 11.30.2017\r\n Things modified:\r\n - Removed \"use strict\" (only needed in npm package)\r\n*/\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nexports.default = replaceTextWithMeta;\r\nfunction replaceTextWithMeta(subject, searchText, replaceText) {\r\n var text = subject.text,\r\n characterMeta = subject.characterMeta;\r\n\r\n var searchTextLength = searchText.length;\r\n var replaceTextLength = replaceText.length;\r\n var resultTextParts = [];\r\n // Get empty set of same kind as characterMeta.\r\n var resultCharMeta = characterMeta.slice(0, 0);\r\n var lastEndIndex = 0;\r\n var index = text.indexOf(searchText);\r\n while (index !== -1) {\r\n resultTextParts.push(text.slice(lastEndIndex, index) + replaceText);\r\n resultCharMeta = resultCharMeta.concat(characterMeta.slice(lastEndIndex, index),\r\n // Use the metadata of the first char we are replacing.\r\n repeatSeq(characterMeta.slice(index, index + 1), replaceTextLength));\r\n lastEndIndex = index + searchTextLength;\r\n index = text.indexOf(searchText, lastEndIndex);\r\n }\r\n resultTextParts.push(text.slice(lastEndIndex));\r\n resultCharMeta = resultCharMeta.concat(characterMeta.slice(lastEndIndex));\r\n return { text: resultTextParts.join(''), characterMeta: resultCharMeta };\r\n}\r\n\r\nfunction repeatSeq(seq, count) {\r\n var result = seq.slice(0, 0);\r\n while (count-- > 0) {\r\n result = result.concat(seq);\r\n }\r\n return result;\r\n}","/* eslint-disable */\r\n/*\r\n\r\n From: https://www.npmjs.com/package/draft-js-import-element\r\n Version used: 1.2.1\r\n Last modified: 11.30.2017\r\n Things modified:\r\n - Removed \"use strict\" (only needed in npm package)\r\n - eslint disabling\r\n*/\r\n\r\nObject.defineProperty(exports, \"__esModule\", {\r\n value: true\r\n});\r\nvar INLINE_ELEMENTS = exports.INLINE_ELEMENTS = {\r\n a: 1,\r\n abbr: 1,\r\n area: 1,\r\n audio: 1,\r\n b: 1,\r\n bdi: 1,\r\n bdo: 1,\r\n br: 1,\r\n button: 1,\r\n canvas: 1,\r\n cite: 1,\r\n code: 1,\r\n command: 1,\r\n datalist: 1,\r\n del: 1,\r\n dfn: 1,\r\n em: 1,\r\n embed: 1,\r\n i: 1,\r\n iframe: 1,\r\n img: 1,\r\n input: 1,\r\n ins: 1,\r\n kbd: 1,\r\n keygen: 1,\r\n label: 1,\r\n map: 1,\r\n mark: 1,\r\n meter: 1,\r\n noscript: 1,\r\n object: 1,\r\n output: 1,\r\n progress: 1,\r\n q: 1,\r\n ruby: 1,\r\n s: 1,\r\n samp: 1,\r\n script: 1,\r\n select: 1,\r\n small: 1,\r\n span: 1,\r\n strong: 1,\r\n sub: 1,\r\n sup: 1,\r\n textarea: 1,\r\n time: 1,\r\n u: 1,\r\n var: 1,\r\n video: 1,\r\n wbr: 1,\r\n acronym: 1,\r\n applet: 1,\r\n basefont: 1,\r\n big: 1,\r\n font: 1,\r\n isindex: 1,\r\n strike: 1,\r\n style: 1,\r\n tt: 1\r\n};\r\n\r\n// These elements are special because they cannot contain text as a direct\r\n// child (some cannot contain childNodes at all).\r\nvar SPECIAL_ELEMENTS = exports.SPECIAL_ELEMENTS = {\r\n area: 1,\r\n base: 1,\r\n br: 1,\r\n col: 1,\r\n colgroup: 1,\r\n command: 1,\r\n dl: 1,\r\n embed: 1,\r\n head: 1,\r\n hgroup: 1,\r\n hr: 1,\r\n iframe: 1,\r\n img: 1,\r\n input: 1,\r\n keygen: 1,\r\n link: 1,\r\n meta: 1,\r\n ol: 1,\r\n optgroup: 1,\r\n option: 1,\r\n param: 1,\r\n script: 1,\r\n select: 1,\r\n source: 1,\r\n style: 1,\r\n table: 1,\r\n tbody: 1,\r\n textarea: 1,\r\n tfoot: 1,\r\n thead: 1,\r\n title: 1,\r\n tr: 1,\r\n track: 1,\r\n ul: 1,\r\n wbr: 1,\r\n basefont: 1,\r\n dialog: 1,\r\n dir: 1,\r\n isindex: 1\r\n};\r\n\r\n// These elements are special because they cannot contain childNodes.\r\n// TODO: This is not an exhaustive list.\r\nvar SELF_CLOSING_ELEMENTS = exports.SELF_CLOSING_ELEMENTS = { img: 1 };","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport './ProgressBar.scss';\r\n\r\nexport default class ProgressBar extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n stepNumber: this.props.defaultStepNumber\r\n };\r\n\r\n this.setStepNumber = this.setStepNumber.bind(this);\r\n this.icon = React.createRef();\r\n }\r\n\r\n setStepNumber = (stepNumber) => {\r\n if (typeof(stepNumber) === \"number\") {\r\n this.setState({ stepNumber });\r\n }\r\n } \r\n\r\n render() {\r\n // Makes it so step 1 = 0% and last step = 100%\r\n let functionalTotalSteps = this.props.totalSteps - 1;\r\n\r\n let icon = (this.props.icon) ? this.props.icon : this.props.defaultIcon;\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nProgressBar.defaultProps = {\r\n defaultStepNumber: 1\r\n};\r\n\r\nProgressBar.propTypes = {\r\n defaultIcon: PropTypes.shape({\r\n altText: PropTypes.string.isRequired,\r\n path: PropTypes.string.isRequired\r\n }).isRequired,\r\n defaultStepNumber: PropTypes.number,\r\n icon: PropTypes.shape({\r\n altText: PropTypes.string.isRequired,\r\n path: PropTypes.string.isRequired\r\n }),\r\n totalSteps: PropTypes.number.isRequired\r\n};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport './Grid-12.css';\r\nimport './Grid-10.css';\r\n\r\nconst Grid = (props) => {\r\n\r\n let numCol = (props.layout) ? props.layout : props.columns + \"col\";\r\n\r\n let columns = (props.layout === \"66-33\" || props.layout === \"33-66\") ? 2 : props.columns;\r\n\r\n let gridItemCount = 0;\r\n\r\n let gridItems = (React.Children.count(props.children)) ?\r\n React.Children.map(props.children, (child, index) => {\r\n if (child && child.type === GridItem) {\r\n gridItemCount = (gridItemCount === columns) ? 1 : (gridItemCount + 1);\r\n\r\n let wrappedChild = \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n 
this.icon = ref}\r\n />\r\n
\r\n {child}
;\r\n\r\n return wrappedChild;\r\n }\r\n }) :\r\n null;\r\n\r\n let gridClasses = classNames(\"clearfix\", \"ccf-grid\", {\r\n \"nested-grid\": props.isNestedGrid\r\n });\r\n\r\n return (\r\n \r\n {gridItems}\r\n
\r\n );\r\n}\r\n\r\nGrid.defaultProps = {\r\n columns: 1,\r\n isNestedGrid: false\r\n};\r\n\r\nGrid.propTypes = {\r\n columns: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),\r\n isNestedGrid: PropTypes.bool,\r\n layout: PropTypes.oneOf(['66-33', '33-66'])\r\n}\r\n\r\n\r\n\r\nconst GridItem = (props) => {\r\n let ElementType = props.useDiv ? \"div\" : \"span\";\r\n return (\r\n this.moveItem(direction)}>\r\n 
\r\n
\r\n )\r\n }\r\n else {\r\n let arrowSvg = (direction === \"up\") ? iconArrowUp : iconArrowDown;\r\n\r\n return (\r\n \r\n 
\r\n
\r\n )\r\n }\r\n }\r\n \r\n // Creates remove button if hasRemoveButton is true\r\n buildRemoveButton = () => {\r\n let removeButton = (this.props.hasRemoveButton) ?\r\n this.removeItem()}\r\n >\r\n 
\r\n
:\r\n null;\r\n\r\n return removeButton;\r\n }\r\n \r\n // Gets the values of the arrangeable list input\r\n getValue = () => {\r\n let objectsWithOrder = \r\n this.state.items\r\n .map((item, index) => { return { id: item.id, internalLink: item.internalLink, text: item.text, order: index + 1 } });\r\n\r\n return objectsWithOrder;\r\n }\r\n\r\n UNSAFE_componentWillMount() {\r\n this.setItems(this.props.options);\r\n }\r\n\r\n UNSAFE_componentWillReceiveProps(newProps) {\r\n if ( 'options' in newProps && \r\n newProps.options !== undefined && \r\n newProps.options.length !== this.state.items.length\r\n ) {\r\n this.setItems(newProps.options);\r\n }\r\n }\r\n \r\n render() {\r\n if (!this.props.isEditable && this.state.selectedItemId) {\r\n this.selectItem(null);\r\n }\r\n \r\n let label = (this.props.label) ?\r\n :\r\n null;\r\n \r\n let verticalSpacingClass = this.props.verticalSpacing === \"compact\" ? \"field--compact\" : \"field\";\r\n \r\n let arrows = (this.props.isEditable && this.state.items.length) ?\r\n \r\n {this.buildArrow(\"up\")}\r\n {this.buildArrow(\"down\")}\r\n {(this.state.selectedItemId) ? this.buildRemoveButton() : null}\r\n
: \r\n null;\r\n \r\n let inputDisplay = (this.props.isEditable) ?\r\n \r\n \r\n
\r\n {arrows}\r\n :\r\n \r\n - \r\n {(this.state.items.length) ? this.state.items.map((item) =>
- this.selectItem(item.id)} \r\n className={(this.state.selectedItemId === item.id) ? \"arrangeable-list-input__item--selected\" : \"\"}>\r\n {item.text}\r\n ) : \r\n There is no content to display.}\r\n
- \r\n {this.state.items.map((item) => {\r\n let itemText = (item.internalLink) ? \r\n \r\n {item.text}\r\n : \r\n item.text;\r\n \r\n return
- {itemText} \r\n })}\r\n
{ if (!(navigator.userAgent.indexOf(\"MSIE \") > -1 || navigator.userAgent.indexOf(\"Trident/\") > -1)) { this.selectItem(null) }}}>\r\n {label}\r\n {inputDisplay}\r\n
);\r\n }\r\n}\r\n\r\nArrangeableListInput.defaultProps = {\r\n hasRemoveButton: false,\r\n isEditable: true\r\n};\r\n\r\nArrangeableListInput.propTypes = {\r\n className: PropTypes.string,\r\n hasRemoveButton: PropTypes.bool,\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n onRemove: PropTypes.func,\r\n options: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.oneOfType([\r\n PropTypes.string,\r\n PropTypes.number]).isRequired,\r\n internalLink: PropTypes.string,\r\n order: PropTypes.number,\r\n text: PropTypes.string.isRequired\r\n })),\r\n verticalSpacing: PropTypes.string\r\n}","export default class InputError extends Error {\r\n constructor(message, value, ...params) {\r\n // Pass remaining arguments (including vendor specific ones) to parent constructor\r\n super(message, value, ...params);\r\n\r\n // Custom debugging information\r\n this.message = message;\r\n this.value = value;\r\n }\r\n}","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport InputError from '../../../errors/InputError';\r\nimport './TextInput.css';\r\n\r\nexport default class TextInput extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n value: (this.props.existingContent !== undefined && this.props.existingContent !== null) ? this.props.existingContent : \"\"\r\n };\r\n this.newValue = null;\r\n this.newSelectionStart = null;\r\n }\r\n\r\n UNSAFE_componentWillReceiveProps(newProps) {\r\n if ('existingContent' in newProps && newProps.existingContent !== undefined && newProps.existingContent !== this.state.value) {\r\n this.setState({ value: newProps.existingContent });\r\n }\r\n\r\n if (this.props.selectedOption !== null) {\r\n const selectedOption = newProps.selectedOption;\r\n\r\n if (selectedOption !== this.props.selectedOption) {\r\n if (selectedOption !== '')\r\n this.setState({ value: selectedOption })\r\n }\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n let input = document.getElementById(this.props.id);\r\n let needToValidate = false;\r\n\r\n if (this.newValue !== null) {\r\n input.value = this.newValue;\r\n this.newValue = null;\r\n needToValidate = true;\r\n }\r\n if (this.newSelectionStart !== null) {\r\n input.selectionStart = this.newSelectionStart;\r\n input.selectionEnd = this.newSelectionStart;\r\n this.newSelectionStart = null;\r\n needToValidate = true;\r\n }\r\n if (this.props.validateOnChange && needToValidate) {\r\n this.validate(input, false);\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n let target = document.getElementById(this.props.id);\r\n if (target && target.value) { // Is a string with length > 0\r\n this.validate(target, true);\r\n }\r\n }\r\n\r\n focusAtSetCaret(caretPos) {\r\n let elem = this[`${this.props.id}__text-input`];\r\n if (elem != null) {\r\n elem.focus();\r\n if (elem.createTextRange) {\r\n let range = elem.createTextRange();\r\n range.move('character', caretPos);\r\n range.select();\r\n }\r\n else if (elem.setSelectionRange) {\r\n elem.setSelectionRange(caretPos, caretPos);\r\n }\r\n }\r\n }\r\n\r\n hasFocus() {\r\n return this[`${this.props.id}__text-input`] === document.activeElement;\r\n }\r\n\r\n selectionStart() {\r\n return this[`${this.props.id}__text-input`].selectionStart;\r\n }\r\n\r\n getValue = () => {\r\n let value = this.state.value;\r\n\r\n if (this.props.trim) {\r\n value = value.trim();\r\n this.setState({ value });\r\n }\r\n\r\n if (this.props.required && value === \"\") {\r\n throw new InputError(this.props.label + \" is Required\", value);\r\n }\r\n\r\n // only validate the regex if the field is populated\r\n if (this.props.patternMatch && value !== \"\") {\r\n if (!value.match(this.props.patternMatch)) {\r\n let patternError = (this.props.patternMatchError) ?\r\n this.props.patternMatchError :\r\n this.props.label + \" is Invalid\";\r\n\r\n throw new InputError(patternError, value);\r\n }\r\n }\r\n\r\n return value;\r\n }\r\n\r\n validate = (target, inv) => {\r\n let newErrorMessage = null;\r\n if (this.props.patternMatch) {\r\n if (target.value && !target.value.match(this.props.patternMatch)) {\r\n newErrorMessage = (this.props.patternMatchError) ?\r\n this.props.patternMatchError :\r\n this.props.label + \" is not the correct format.\";\r\n }\r\n }\r\n if (this.props.required) {\r\n if (!target.value) {\r\n newErrorMessage = (this.props.requiredError) ?\r\n this.props.requiredError :\r\n this.props.label + \" is a required field.\";\r\n }\r\n }\r\n if (newErrorMessage && inv) {\r\n this.setState({ className: this.props.validationErrorClass });\r\n }\r\n if (!newErrorMessage || inv) {\r\n this.setState({\r\n validationError: newErrorMessage,\r\n contentWrapperClass: newErrorMessage ? this.props.validationErrorClass : ''\r\n });\r\n }\r\n }\r\n\r\n handleChange = (e) => {\r\n e.persist();\r\n\r\n let callOnChange = () => {\r\n if (this.props.onChange) {\r\n let newValues = this.props.onChange(e);\r\n if (typeof newValues === \"object\") {\r\n if (newValues[\"value\"] !== undefined) {\r\n this.newValue = newValues.value;\r\n }\r\n if (newValues[\"selectionStart\"] !== undefined) {\r\n this.newSelectionStart = newValues.selectionStart;\r\n }\r\n }\r\n }\r\n if (this.props.validateOnChange) {\r\n this.validate(e.target, false);\r\n }\r\n }\r\n\r\n this.setState((state, props) => {\r\n if (props.maxLength) {\r\n if (typeof e.target.value === 'number') {\r\n return {\r\n value: parseInt(e.target.value.toString().slice(0, props.maxLength), 10)\r\n }\r\n }\r\n else {\r\n return {\r\n value: e.target.value.slice(0, props.maxLength)\r\n }\r\n }\r\n }\r\n else {\r\n return { value: e.target.value }\r\n }\r\n }, callOnChange);\r\n }\r\n\r\n handleBlur = (e) => {\r\n if (this.props.onBlur) {\r\n this.props.onBlur(e);\r\n }\r\n if (this.props.validateOnBlur) {\r\n this.validate(e.target, true);\r\n }\r\n }\r\n\r\n handleKeyUp = (e) => {\r\n if (this.props.onKeyUp) {\r\n this.props.onKeyUp(e);\r\n }\r\n }\r\n\r\n render() {\r\n\r\n let label = (this.props.label) ?\r\n :\r\n null;\r\n\r\n let inputHelperText = this.props.helperText;\r\n let inputInfoText = this.props.infoText;\r\n\r\n let helperText = inputHelperText ?\r\n \r\n {inputHelperText}\r\n :\r\n null;\r\n\r\n let infoText = inputInfoText ?\r\n \r\n {inputInfoText}\r\n :\r\n null;\r\n\r\n let errorText = this.props.errorMessage;\r\n if (!errorText && this.state.validationError) {\r\n errorText = this.state.validationError;\r\n }\r\n let errorMessage = errorText ?\r\n \r\n {errorText}\r\n :\r\n null;\r\n\r\n let existingContent = (this.props.type !== \"password\" || !this.props.existingContent) ?\r\n this.props.existingContent :\r\n this.props.existingContent.replace(/.*/, '**********');\r\n\r\n let requiredFieldIndicator = (this.props.required) ?\r\n :\r\n null;\r\n\r\n let verticalSpacingClass = this.props.verticalSpacing === \"compact\" ? \"field--compact\" : \"field\";\r\n\r\n let contentWrapperClass = this.props.contentWrapperClass;\r\n if (this.state.contentWrapperClass) {\r\n contentWrapperClass += \" \" + this.state.contentWrapperClass;\r\n }\r\n\r\n let numberMax = this.props.numberMax;\r\n if ((numberMax === undefined || numberMax === null) && this.props.type === 'date') {\r\n numberMax = '9999-12-31';\r\n }\r\n\r\n let inputDisplay = (this.props.isEditable) ?\r\n \r\n {infoText}\r\n \r\n {label}\r\n {requiredFieldIndicator}\r\n
\r\n \r\n {existingContent}\r\n
\r\n ;\r\n\r\n return (\r\n \r\n {inputDisplay}\r\n
\r\n );\r\n }\r\n}\r\n\r\nTextInput.defaultProps = {\r\n autoComplete: true,\r\n isEditable: true,\r\n trim: false,\r\n type: \"text\"\r\n};\r\n\r\nTextInput.propTypes = {\r\n autoComplete: PropTypes.bool,\r\n className: PropTypes.string,\r\n contentWrapperClass: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n existingContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\r\n id: PropTypes.string.isRequired,\r\n infoText: PropTypes.string,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n maxLength: PropTypes.string,\r\n minLength: PropTypes.string,\r\n numberMax: PropTypes.string,\r\n numberMin: PropTypes.string,\r\n numberStep: PropTypes.string,\r\n onChange: PropTypes.func,\r\n patternMatch: PropTypes.instanceOf(RegExp),\r\n patternMatchError: PropTypes.string,\r\n placeholderText: PropTypes.string,\r\n required: PropTypes.bool,\r\n requiredError: PropTypes.string,\r\n selectedOption: PropTypes.string,\r\n trim: PropTypes.bool,\r\n type: PropTypes.string,\r\n validateOnBlur: PropTypes.bool,\r\n validateOnChange: PropTypes.bool,\r\n validationErrorClass: PropTypes.string,\r\n verticalSpacing: PropTypes.string\r\n}\r\n","// Source: https://github.com/GA-MO/react-confirm-alert\r\nimport { confirmAlert } from 'react-confirm-alert';\r\nimport 'react-confirm-alert/src/react-confirm-alert.css';\r\nimport '../sass/content/react-confirm-alert-override.css';\r\n\r\nexport default function createConfirmAlert(confirmAlertObject) {\r\n confirmAlert(confirmAlertObject)\r\n};\r\n\r\n// ---------------\r\n// How to use it:\r\n// ---------------\r\n\r\n// -- The key/value options for the confirmAlertObject\r\n// confirmAlert({\r\n// title: 'Confirm to submit', // Title dialog\r\n// message: 'Are you sure you want to do this?', // Message dialog\r\n// childrenElement: () => Custom UI
, // Custom UI or Component\r\n// buttons: [\r\n// {\r\n// label: 'Cancel' // Text for button\r\n// onClick: props.onCancel() // Action for button\r\n// }\r\n// ]\r\n//})\r\n\r\n// -- Example case for a function component\r\n// const SomeComponent = (props) => {\r\n// let confirmAlertObject = {\r\n// title: 'Confirm Action',\r\n// message: 'Are you sure you want to do this?',\r\n// buttons: [\r\n// {\r\n// label: 'Cancel',\r\n// onClick: props.onCancel()\r\n// },\r\n// {\r\n// label: 'Confirm',\r\n// onClick: props.onClick()\r\n// }\r\n// ]\r\n// };\r\n// render() {\r\n// return (\r\n// \r\n// \r\n//
\r\n// );\r\n// }\r\n// }\r\n\r\n// -- Example case for a class component\r\n// class App extends React.Component {\r\n// state = {\r\n// showDialog: false,\r\n// }\r\n// render() {\r\n// return (\r\n// \r\n// {\r\n// this.state.showDialog &&\r\n// alert('Action after Confirm')}\r\n// onCancel={() => alert('Action after Cancel')}\r\n// />\r\n// }\r\n//
\r\n// );\r\n// }\r\n// }\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from 'react-router-dom';\r\nimport './ButtonInput.css';\r\nimport createConfirmAlert from '../../../../shared/functions/createConfirmAlert';\r\n\r\nexport default class ButtonInput extends Component {\r\n onClick = (confirmAlertObject) => {\r\n if (this.props.requireConfirmation && confirmAlertObject) {\r\n this.props.createConfirmAlert(confirmAlertObject);\r\n }\r\n else if (this.props.type === \"file-button\") {\r\n this.fileUploadInput.click();\r\n }\r\n else if (this.props.onClick) {\r\n this.props.onClick();\r\n }\r\n }\r\n\r\n render() {\r\n // iconButton logic\r\n let icon = null;\r\n\r\n if (this.props.icon) {\r\n let iconClass = `icon-${this.props.icon}`;\r\n icon = ;\r\n }\r\n\r\n const buttonWrapperClass = (this.props.type === \"icon-button\") ? \"button-input--icon\" : '';\r\n const verticalSpacingClass = this.props.verticalSpacing === \"compact\" ? \"compact\" : \"\";\r\n\r\n const type = (this.props.type !== \"submit\") ? \"button\" : this.props.type;\r\n\r\n // submit logic\r\n let value = (this.props.value) ?\r\n this.props.value :\r\n (this.props.type === \"submit\") ?\r\n \"Submit\" :\r\n \"\";\r\n\r\n let confirmAlertObject = {\r\n title: 'Confirm Action', // Title dialog\r\n message: 'Are you sure you want to do this?', // Message dialog\r\n buttons: [\r\n {\r\n label: 'Cancel',\r\n onClick: () => {}\r\n },\r\n {\r\n label: 'Confirm',\r\n onClick: () => this.props.onClick()\r\n }\r\n ]\r\n }\r\n\r\n const onFileChange = () => {\r\n let file = this.fileUploadInput.files[0];\r\n\r\n if (file) {\r\n if (this.props.onClick) {\r\n this.props.onClick(file);\r\n }\r\n }\r\n }\r\n\r\n // link logic\r\n let buttonContent = (this.props.internalLink) ?\r\n \r\n {errorMessage}\r\n {buttonContent}\r\n {fileInput}\r\n
\r\n );\r\n }\r\n\r\n}\r\n\r\nButtonInput.defaultProps = {\r\n createConfirmAlert: createConfirmAlert\r\n}\r\n\r\nButtonInput.propTypes = {\r\n className: PropTypes.string,\r\n createConfirmAlert: PropTypes.func,\r\n disabled: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n fileTypes: PropTypes.string,\r\n icon: PropTypes.string,\r\n id: PropTypes.string,\r\n internalLink: PropTypes.string,\r\n newWindow: PropTypes.bool,\r\n onClick: PropTypes.func,\r\n requireConfirmation: PropTypes.bool,\r\n type: PropTypes.string,\r\n value: PropTypes.string,\r\n verticalSpacing: PropTypes.string\r\n}\r\n","export const BREAKPOINT_SM = 600;\r\nexport const BREAKPOINT_MD = 900;\r\nexport const BREAKPOINT_LG = 1100;\r\nexport const BREAKPOINT_XL = 1400;","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextInput from '../text-input/TextInput';\r\nimport ButtonInput from '../button-input/ButtonInput';\r\nimport classNames from 'classnames';\r\nimport InputError from '../../../errors/InputError';\r\nimport compareObjectKeys from '../../../functions/compareObjectKeys';\r\nimport * as bp from '../../../../constants/breakpoints';\r\nimport './FilterInput.css';\r\n\r\nexport default class FilterInput extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.mobileBreakpoint = bp.BREAKPOINT_MD;\r\n\r\n this.state = {\r\n allOptions: [],\r\n inputValue: \"\",\r\n isMobile: (window.innerWidth >= bp.BREAKPOINT_MD) ? false : true,\r\n selectedOptions: [],\r\n optionDisplay: false\r\n };\r\n }\r\n\r\n // Takes the options provided, translates into a standard object format, and sets as the state variable passed\r\n setOptions = (newOptions, stateVariable) => {\r\n let options = newOptions.filter((option, filterIndex) => {\r\n if (option &&\r\n (typeof option !== \"object\" ||\r\n !(option.id === undefined &&\r\n option.text === undefined\r\n )\r\n )) {\r\n let foundIndex = (typeof option === \"object\") ?\r\n newOptions.findIndex(otherOption => otherOption.id === option.id) :\r\n newOptions.findIndex(otherOption => otherOption === option);\r\n\r\n return (foundIndex === filterIndex);\r\n }\r\n\r\n return false;\r\n })\r\n .map((option) => {\r\n const id = (typeof option === \"object\") ?\r\n option.id :\r\n option;\r\n\r\n const text = (typeof option === \"object\") ?\r\n option.text :\r\n option;\r\n\r\n const selected = (stateVariable !== \"selectedOptions\") ? false : undefined;\r\n\r\n return { id, text, selected };\r\n });\r\n\r\n let newState = {};\r\n newState[stateVariable] = options;\r\n\r\n if (stateVariable === \"selectedOptions\") {\r\n this.selectOptions(options);\r\n }\r\n\r\n this.setState(newState);\r\n\r\n return options;\r\n }\r\n\r\n // Sees if the option type passed into the FilterInput was a string, and makes the option a string if needed\r\n formatOption = (option) => {\r\n return (this.props.options && typeof this.props.options[0] === \"string\") ?\r\n option.id :\r\n option;\r\n }\r\n\r\n // Shows and hides the filter option dropdown box\r\n toggleOptionDisplay = (calledState) => {\r\n this.setState((prevState) => {\r\n let optionDisplay;\r\n\r\n // ensures that when the options are open clicks within the component don't close them\r\n if (calledState === \"click\" && prevState.optionDisplay) {\r\n optionDisplay = prevState.optionDisplay;\r\n }\r\n else if (calledState === \"blur\") {\r\n optionDisplay = false;\r\n }\r\n else if (calledState === \"focus\") {\r\n optionDisplay = true;\r\n }\r\n else {\r\n optionDisplay = !prevState.optionDisplay;\r\n }\r\n\r\n return { optionDisplay }\r\n });\r\n }\r\n\r\n // Creates the JSX for the option list to display when dropped down\r\n buildOptionList = () => {\r\n let optionListItems;\r\n\r\n optionListItems = this.state.allOptions\r\n .filter((option) => (!option.selected && option.text.toLowerCase().indexOf(this.state.inputValue.toLowerCase()) !== -1));\r\n\r\n if (!optionListItems.length) {\r\n optionListItems = - \r\n {optionListItems}\r\n
- \r\n {\r\n this.state.selectedOptions.map((option, index) => {\r\n return
- \r\n {option.text}\r\n this.unselectOptions([option])}>\r\n x\r\n \r\n ;\r\n })\r\n }\r\n
\r\n {inputDisplay}\r\n
\r\n );\r\n }\r\n}\r\n\r\nFilterInput.defaultProps = {\r\n alphabetize: false,\r\n existingContentArray: [],\r\n isEditable: true,\r\n showPills: true\r\n}\r\n\r\nFilterInput.propTypes = {\r\n alphabetize: PropTypes.bool,\r\n className: PropTypes.string,\r\n errorMessage: PropTypes.string,\r\n existingContentArray: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.string),\r\n PropTypes.arrayOf(PropTypes.object)\r\n ]),\r\n filterValueChange: PropTypes.func,\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n options: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.string),\r\n PropTypes.arrayOf(PropTypes.object)\r\n ]).isRequired,\r\n placeholderText: PropTypes.string,\r\n required: PropTypes.bool,\r\n selectLimit: PropTypes.number,\r\n showPills: PropTypes.bool,\r\n verticalSpacing: PropTypes.string\r\n}","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ArrangeableListInput from '../arrangeable-list-input/ArrangeableListInput';\r\nimport FilterInput from '../filter-input/FilterInput';\r\nimport './ArrangeableFilterInput.css';\r\n\r\nexport default class ArrangeableFilterInput extends Component { \r\n // Grabs the values from the inputs and updates the state with the new values\r\n getValue = () => {\r\n let orderedList = this[`${this.props.id}__af-list`].getValue();\r\n \r\n if (Array.isArray(orderedList) && orderedList.length) {\r\n orderedList = orderedList.map((item) => {\r\n return { id: item.id, internalLink: item.internalLink, text: item.text }\r\n });\r\n }\r\n \r\n return orderedList; \r\n }\r\n \r\n addItem = (filterValues) => {\r\n let newItems = [];\r\n \r\n let listValues = (this[`${this.props.id}__af-list`]) ? this[`${this.props.id}__af-list`].getValue() : [];\r\n \r\n filterValues.forEach((value) => {\r\n if (!listValues.find((content) => content.id === value.id)) {\r\n newItems.push({ id: value.id, internalLink: value.internalLink, text: value.text, order: listValues.length + newItems.length + 1 });\r\n }\r\n });\r\n\r\n if (newItems.length && this[`${this.props.id}__af-list`]) {\r\n newItems.forEach((newItem) => {\r\n this[`${this.props.id}__af-list`].addItem(newItem);\r\n });\r\n }\r\n }\r\n \r\n removeItem = (removedItem) => {\r\n this[`${this.props.id}__af-filter`].unselectOptions([removedItem]);\r\n }\r\n\r\n render () { \r\n const label = (this.props.label) ?\r\n :\r\n null;\r\n \r\n let filterInput = (this.props.isEditable) ?\r\n \";\r\n \r\n let bottomOfLabel = scaleXInfo.label.height + scaleXInfo.label.y;\r\n\r\n if (scaleXInfo.text.indexOf(breakText) === -1 && bottomOfLabel > plotInfo.height) {\r\n let chartData = zingChartExec(chart.id, 'getdata');\r\n \r\n chartData['graphset'][0]['scale-x']['label']['text'] = scaleXInfo.text + breakText;\r\n \r\n zingChartExec(chart.id, 'setdata', { data: chartData });\r\n }\r\n }\r\n // End of x-axis label cut off adjustment\r\n}\r\n\r\n\r\n// inserts breaks before cohort values in x axis labels\r\nexport function insertBreaks(labels) {\r\n let xBreakHappens = false;\r\n\r\n let xAxisLabels = labels.map((label) => {\r\n if (label.indexOf(\"N = \") >= 0) {\r\n xBreakHappens = true;\r\n }\r\n return label.replace(/(N = )/, '
$1').trim();\r\n });\r\n\r\n return { xAxisLabels, xBreakHappens };\r\n}\r\n\r\n// figures out which x axis label provided is the longest and returns it\r\nexport function determineXAxisLongestLength(labels) {\r\n return labels.reduce((highestLen, currentString) => {\r\n let currentStringLength = currentString.split(/(N = )/)[0].length;\r\n\r\n return (highestLen > currentStringLength) ?\r\n highestLen :\r\n currentStringLength;\r\n }, 0);\r\n}\r\n\r\n// determines how much width to give the x axis labels in mobile view\r\nexport function setXAxisMobileWidth(xAxisLongestLength) {\r\n return (xAxisLongestLength < 6) ?\r\n 40 :\r\n 20 * (Math.floor((xAxisLongestLength - 2) / 4) + 2);\r\n}\r\n\r\n// adds the object needed for the better arrow to the chart data\r\nexport function addBetterArrow(id, chartType, chartData, mobileBP, yAxisLabel, betterArrowDirection, arrowColor, fontColor) {\r\n let top, bottom;\r\n \r\n if (!HORIZONTAL_CHART_TYPES.includes(chartType)) {\r\n chartData[\"scale-y\"][\"label\"][\"padding-right\"] = 20;\r\n chartData[\"scale-y\"][\"label\"][\"padding-left\"] = 20;\r\n chartData[\"scale-y\"][\"label\"][\"padding-top\"] = undefined;\r\n\r\n top = {\r\n x: 8,\r\n y: \"27%\"\r\n };\r\n\r\n bottom = {\r\n x: 8,\r\n y: \"70%\"\r\n };\r\n }\r\n else {\r\n top = {\r\n x: \"70%\",\r\n y: 40\r\n };\r\n\r\n bottom = {\r\n x: \"27%\",\r\n y: 40\r\n };\r\n }\r\n\r\n chartData[\"arrows\"] = [{\r\n id: id + \"-better-arrow\",\r\n text: \"Better\",\r\n backgroundColor: arrowColor,\r\n borderColor: arrowColor,\r\n fontColor: fontColor,\r\n fontAngle: (!HORIZONTAL_CHART_TYPES.includes(chartType)) ? 270 : 0,\r\n fontSize: 10,\r\n mediaRules: [\r\n {\r\n maxWidth: mobileBP,\r\n fontSize: 8\r\n }\r\n ],\r\n from: (betterArrowDirection === \"down\") ? top : bottom,\r\n to: (betterArrowDirection === \"down\") ? bottom : top\r\n }];\r\n\r\n // Adds margin to the left if the yAxisLabel is missing\r\n if (!yAxisLabel) {\r\n chartData[\"scale-y\"][\"label\"][\"text\"] = \".\";\r\n chartData[\"scale-y\"][\"label\"][\"fontColor\"] = \"#fff\";\r\n chartData[\"scale-y\"][\"label\"][\"padding-top\"] = 0;\r\n chartData[\"scale-y\"][\"label\"][\"padding-bottom\"] = 0;\r\n }\r\n\r\n return chartData;\r\n}\r\n\r\n// adds an overall benchmark for charts using one\r\nexport function addOverallBenchmark(chartType, mappedChartType, chartData, showLegend, benchmarkName, benchmarkValue, benchmarkColor) {\r\n let benchmarkTooltipText = benchmarkName ?\r\n benchmarkName + \"
\" :\r\n \"\";\r\n\r\n chartData.plot = Object.assign(\r\n chartData.plot,\r\n {\r\n \"bar-width\": \"100%\",\r\n barsSpaceLeft: \"25%\",\r\n barsSpaceRight: \"25%\",\r\n \"bar-space\": 3\r\n }\r\n );\r\n\r\n let benchmarkObject = {\r\n \"type\": (HORIZONTAL_CHART_TYPES.includes(chartType)) ? VERTICAL_LINE_ZINGCHART_TYPE : LINE_ZINGCHART_TYPE,\r\n values: [benchmarkValue, benchmarkValue],\r\n text: benchmarkTooltipText,\r\n marker: {\r\n visible: false\r\n },\r\n \"scales\": (!STACKED_CHART_TYPES.includes(chartType)) ? \"scale-x-2,scale-y\" : \"scale-x-2,scale-y-2\",\r\n \"zIndex\": 5,\r\n \"line-color\": benchmarkColor,\r\n \"line-width\": 3,\r\n \"legend-item\": {\r\n flat: true,\r\n visible: benchmarkTooltipText\r\n },\r\n \"legend-marker\": {\r\n \"line-color\": benchmarkColor,\r\n \"line-width\": 2,\r\n \"type\": \"none\",\r\n \"show-line\":true\r\n }\r\n };\r\n\r\n chartData[\"series\"].push(benchmarkObject);\r\n\r\n return chartData;\r\n}\r\n\r\n// adds 0s onto the chart in cases where the value is 0 instead of not being provided\r\nexport function showZeroes(chartData, isStacked, mobileFontSize) {\r\n let value = (isStacked) ? \"%total\" : \"%v\";\r\n\r\n chartData[\"plot\"][\"value-box\"] = {\r\n \"text\": value,\r\n \"rules\": [\r\n {\r\n \"rule\": value + \" == 0\",\r\n \"placement\": \"top\",\r\n mediaRules: [\r\n {\r\n maxWidth: 450,\r\n \"font-size\": mobileFontSize\r\n }\r\n ]\r\n },\r\n {\r\n \"rule\": value + \" != 0\",\r\n \"visible\": \"false\"\r\n }\r\n ]\r\n };\r\n}\r\n\r\n// creates an object to be added to the series part of the chart json\r\nexport function buildSeriesObject(chartType, mappedChartType,\r\n seriesName, seriesValues, benchmarkName, benchmarkValues,\r\n color, benchmarkColor, fontFamily, hasOverallBenchmark) {\r\n // Initial series object\r\n let seriesObject = {\r\n type: mappedChartType,\r\n text: seriesName,\r\n values: seriesValues,\r\n \"legend-item\": {\r\n visible: seriesName\r\n }\r\n };\r\n\r\n if (mappedChartType === BULLET_ZINGCHART_TYPE || mappedChartType === HORIZONTAL_BULLET_ZINGCHART_TYPE) {\r\n let benchmarkTooltipText = benchmarkName ?\r\n benchmarkName + \"
\" :\r\n \"\";\r\n\r\n seriesObject = Object.assign(\r\n seriesObject,\r\n {\r\n \"background-color\": color,\r\n goal: (benchmarkValues && benchmarkValues.length && benchmarkValues.filter(value => value !== null).length) ? {\r\n height: 6,\r\n \"background-color\": benchmarkColor,\r\n \"tooltip\":{\r\n \"text\": benchmarkTooltipText + \"%g\",\r\n \"font-family\": fontFamily,\r\n \"background-color\": benchmarkColor\r\n }\r\n } : null,\r\n goals: (benchmarkValues && benchmarkValues.length && benchmarkValues.filter(value => value !== null).length) ? benchmarkValues : null\r\n }\r\n );\r\n\r\n if (hasOverallBenchmark) {\r\n seriesObject.type = (mappedChartType === HORIZONTAL_BULLET_ZINGCHART_TYPE) ? HORIZONTAL_BAR_ZINGCHART_TYPE : BAR_ZINGCHART_TYPE;\r\n }\r\n }\r\n // Adds series styles for line charts.\r\n else {\r\n seriesObject = Object.assign(\r\n seriesObject,\r\n {\r\n \"line-color\": color,\r\n \"line-width\": 2,\r\n marker: {\r\n \"background-color\": color\r\n }\r\n }\r\n );\r\n }\r\n return seriesObject;\r\n}\r\n\r\n// creates a series object for individual benchmarks in bullet charts that need legend items\r\nexport function buildBenchmarkLegendObject(chartType, mappedChartType, benchmarkName, benchmarkColor) {\r\n let benchmarkObject = null;\r\n\r\n // Adds benchmarks to legend for bullet charts\r\n if (mappedChartType === BULLET_ZINGCHART_TYPE || mappedChartType === HORIZONTAL_BULLET_ZINGCHART_TYPE) {\r\n // If there are benchmark titles on a bullet chart, they are added to the legend through series elements\r\n if (benchmarkName && benchmarkName.length) {\r\n benchmarkObject = {\r\n values: [],\r\n text: benchmarkName,\r\n \"legend-item\": {\r\n flat: true\r\n },\r\n \"legend-marker\": {\r\n \"line-color\": benchmarkColor,\r\n \"line-width\": 2,\r\n \"type\": \"none\",\r\n \"show-line\":true\r\n }\r\n };\r\n\r\n if (\r\n chartType === BULLET_CHART_TYPE || \r\n chartType === HORIZONTAL_BULLET_CHART_TYPE || \r\n chartType === HORIZONTAL_STACKED_BULLET_CHART_TYPE\r\n ) {\r\n benchmarkObject.scales = \"scale-x-2,scale-y\";\r\n }\r\n }\r\n }\r\n\r\n return benchmarkObject;\r\n}\r\n\r\n\r\nexport function setYArrowDetails(chartType, scaleYInfo, betterArrowDirection) {\r\n const arrowSpace = (!HORIZONTAL_CHART_TYPES.includes(chartType)) ? scaleYInfo.height * .15 : scaleYInfo.width * .15;\r\n let top, bottom;\r\n\r\n if (!HORIZONTAL_CHART_TYPES.includes(chartType)) {\r\n top = {\r\n x: 8,\r\n y: scaleYInfo.y + arrowSpace\r\n };\r\n bottom = {\r\n x: 8,\r\n y: scaleYInfo.y + scaleYInfo.height - arrowSpace\r\n };\r\n }\r\n else {\r\n top = {\r\n x: scaleYInfo.x + scaleYInfo.width - arrowSpace,\r\n y: scaleYInfo.y - 15\r\n };\r\n bottom = {\r\n x: scaleYInfo.x + arrowSpace,\r\n y: scaleYInfo.y - 15\r\n };\r\n }\r\n\r\n let from = (betterArrowDirection === \"down\") ? top : bottom;\r\n let to = (betterArrowDirection === \"down\") ? bottom : top;\r\n\r\n return { from, to };\r\n}\r\n\r\nexport function yMinMaxBuilder(props, seriesValues) {\r\n let yMax = props.yMax;\r\n\r\n // if chart is a stacked bullet chart without a set yMax value already\r\n if (STACKED_CHART_TYPES.includes(props.type) && (!yMax && yMax !== 0)) {\r\n // get the sum for each stack, or default to 1 if there's no series values\r\n let xAxisSums = (seriesValues.length) ?\r\n seriesValues[0].map((value, index) => {\r\n return seriesValues.reduce((sum, series) => sum + (series[index] ? parseFloat(series[index]) : 0), 0);\r\n }) :\r\n [1];\r\n\r\n // figure out which stack is the tallest and set that value as the yMax for the chart\r\n yMax = xAxisSums.reduce((largest, xAxisSum) => {\r\n return (xAxisSum > largest) ? xAxisSum : largest;\r\n }, 0);\r\n }\r\n\r\n let ySteps = \"\";\r\n\r\n const yDiff = (props.yMin && yMax) ?\r\n yMax - props.yMin :\r\n null;\r\n\r\n // Fix for the fact that having a difference less than 1 without steps breaks the chart\r\n if (yDiff && yDiff > 0 && yDiff < 1) {\r\n // Figures out how many digits after the decimal\r\n const yStepValue = (props.yMin.toString().length >= yMax.toString().length) ?\r\n props.yMin.toString().split('.')[1].length :\r\n yMax.toString().split('.')[1].length;\r\n\r\n ySteps = \":0.\" + \"0\".repeat(yStepValue - 1) + \"1\";\r\n }\r\n else {\r\n ySteps = (props.ySteps) ? \":\" + props.ySteps : \"\";\r\n }\r\n\r\n let yMinMax = ((props.yMin || typeof props.yMin === \"number\") && (props.yMax || typeof props.yMax === \"number\")) ?\r\n {\r\n \"values\": props.yMin + \":\" + yMax + ySteps\r\n } :\r\n {\r\n \"min-value\": ((props.yMin !== \"\") && (props.yMin !== yMax)) ? props.yMin : undefined,\r\n \"max-value\": ((props.yMax !== \"\") && (props.yMin !== yMax)) ? yMax : undefined,\r\n \"step\": (props.ySteps !== \"\") ? props.ySteps : undefined\r\n };\r\n\r\n return yMinMax;\r\n}\r\n\r\nexport function dataOrganizer(data) {\r\n let seriesNames = [],\r\n seriesBenchmarkNames = [],\r\n xAxisLabels = [],\r\n seriesValues = [],\r\n seriesBenchmarks = [];\r\n\r\n // Figures out how many series have to be created\r\n let numberOfSeries = data.reduce((maxLength, dataRow) => {\r\n // - 1 to remove x axis title, / 2 to remove benchmarks\r\n return (Math.ceil((dataRow.length - 1) / 2) > maxLength) ?\r\n Math.ceil((dataRow.length - 1) / 2):\r\n maxLength;\r\n }, 0);\r\n\r\n // Creates array of blank arrays\r\n seriesValues = new Array(numberOfSeries).fill(null).map(() => { return []; });\r\n seriesBenchmarks = new Array(numberOfSeries).fill(null).map(() => { return []; });\r\n\r\n data.forEach((dataRow, rowIndex) => {\r\n // First row, series + bookmark titles\r\n if (rowIndex === 0) {\r\n dataRow.forEach((dataCell, cellIndex) => {\r\n // First cell is ignored\r\n if (cellIndex !== 0) {\r\n // Even indexes are benchmark titles\r\n if (cellIndex % 2 === 0) {\r\n seriesBenchmarkNames.push(dataCell);\r\n }\r\n // Odd indexes are series titles\r\n else {\r\n let formattedDataCell = (dataCell !== \"\") ?\r\n dataCell + \"
\" :\r\n dataCell;\r\n\r\n seriesNames.push(formattedDataCell);\r\n }\r\n }\r\n });\r\n }\r\n // Second row onwards\r\n else {\r\n dataRow.forEach((dataCell, cellIndex) => {\r\n // First column goes into xAxisLabels\r\n if (cellIndex === 0) {\r\n xAxisLabels.push(dataCell);\r\n }\r\n // Odd columns are series values\r\n else if (cellIndex % 2 !== 0) {\r\n seriesValues[(cellIndex - 1) / 2].push((!isNaN(parseFloat(dataCell))) ? parseFloat(dataCell) : null);\r\n }\r\n // Even columns are benchmark values\r\n else {\r\n seriesBenchmarks[(cellIndex / 2) - 1].push((!isNaN(parseFloat(dataCell))) ? parseFloat(dataCell) : null);\r\n }\r\n });\r\n }\r\n });\r\n\r\n return {\r\n seriesNames: seriesNames,\r\n seriesBenchmarkNames: seriesBenchmarkNames,\r\n xAxisLabels: xAxisLabels,\r\n seriesValues: seriesValues,\r\n seriesBenchmarks: seriesBenchmarks\r\n };\r\n}\r\n\r\n// Takes the props passed in and makes a data object for zingcharts to store in state\r\nexport function dataBuilder (props) {\r\n let newChartData = {};\r\n\r\n // chartTypeMap maps from the way Cleveland Clinic people name charts to\r\n // the way ZingCharts names them.\r\n let chartTypeMap = {};\r\n chartTypeMap[BULLET_CHART_TYPE] = BULLET_ZINGCHART_TYPE;\r\n chartTypeMap[LINE_CHART_TYPE] = LINE_ZINGCHART_TYPE;\r\n chartTypeMap[KAPLAN_MEIER_CHART_TYPE] = LINE_ZINGCHART_TYPE;\r\n chartTypeMap[HORIZONTAL_BULLET_CHART_TYPE] = HORIZONTAL_BULLET_ZINGCHART_TYPE;\r\n chartTypeMap[HORIZONTAL_STACKED_BULLET_CHART_TYPE] = HORIZONTAL_BULLET_ZINGCHART_TYPE;\r\n chartTypeMap[STACKED_BULLET_CHART_TYPE] = BULLET_ZINGCHART_TYPE;\r\n\r\n // Data will stay blank if no type is provided\r\n if (props.type) {\r\n // Reused colors\r\n const black = \"#4b4b45\";\r\n const grey = \"#7b7d83\";\r\n const white = \"#fff\";\r\n const colorScheme = [ \"#0078bf\", \"#384d5f\", \"#00843d\", \"#8f4393\", \"#ffb400\", \"#ca3370\", \"#2dafe2\", \"#5a859e\", \"#15af57\", \"#c35acc\", \"#ad7110\", \"#a00e5e\" ];\r\n const benchmarkColorScheme = [ \"#006099\", \"#2d3e4c\", \"#006a31\", \"#723676\", \"#cc9000\", \"#a2295a\", \"#5ea2bd\", \"#486a7e\", \"#118c46\", \"#9c48a3\", \"#8a5a0d\", \"#800b4b\" ];\r\n const overallBenchmarkColor = \"#f08122\";\r\n\r\n // Reused values\r\n const fontFamily = \"Source Sans Pro, Lato, Helvetica, Arial\";\r\n const mobileBP = 350;\r\n const mobileFontSize = 8;\r\n const mobileLabelSize = 9;\r\n\r\n let seriesNames = [],\r\n seriesBenchmarkNames = [],\r\n xAxisLabels = [],\r\n seriesValues = [],\r\n seriesBenchmarks = [],\r\n xAxisLongestLength = 0;\r\n\r\n // Populates base data based on type provided\r\n newChartData = {\r\n gui: {\r\n behaviors: [\r\n {\r\n id: 'DownloadPDF',\r\n enabled: 'none'\r\n },\r\n {\r\n id: 'DownloadSVG',\r\n enabled: 'none'\r\n },\r\n {\r\n id: 'DownloadCSV',\r\n enabled: 'none'\r\n },\r\n {\r\n id: 'DownloadXLS',\r\n enabled: 'none'\r\n },\r\n {\r\n id: 'Print',\r\n enabled: 'none'\r\n },\r\n {\r\n id: 'ViewDataTable',\r\n enabled: 'none'\r\n },\r\n {\r\n id: 'ViewSource',\r\n enabled: 'none' // Don't enable outside of dev\r\n }\r\n ],\r\n \"context-menu\": {\r\n button: {\r\n visible: false\r\n }\r\n }\r\n },\r\n type: (HORIZONTAL_CHART_TYPES.includes(props.type)) ? HORIZONTAL_MIXED_ZINGCHART_TYPE : MIXED_ZINGCHART_TYPE,\r\n \"plotarea\": {\r\n \"margin-top\": \"10%\",\r\n \"margin-left\": \"dynamic\",\r\n \"margin-right\": \"dynamic\",\r\n \"margin-bottom\": \"dynamic\"\r\n },\r\n plot: {\r\n tooltip: {\r\n text: \"%t%v\",\r\n \"font-family\": fontFamily\r\n }\r\n },\r\n };\r\n\r\n if (props.data && props.data.length) {\r\n const organizedData = dataOrganizer(props.data);\r\n\r\n seriesNames = organizedData.seriesNames;\r\n seriesBenchmarkNames = organizedData.seriesBenchmarkNames;\r\n xAxisLabels = organizedData.xAxisLabels;\r\n xAxisLongestLength = determineXAxisLongestLength(xAxisLabels);\r\n seriesValues = organizedData.seriesValues;\r\n seriesBenchmarks = organizedData.seriesBenchmarks;\r\n }\r\n\r\n // Better arrow height and x axis mobile width adjustments based on presence of legend and width of x axis labels\r\n let xAxisMobileWidth = setXAxisMobileWidth(xAxisLongestLength);\r\n\r\n // X Axis Labels break insertion for cohorts\r\n let insertedBreaksObject = insertBreaks(xAxisLabels);\r\n xAxisLabels = insertedBreaksObject.xAxisLabels;\r\n let { xBreakHappens } = insertedBreaksObject;\r\n\r\n // Populates base data based on type provided\r\n newChartData = Object.assign({\r\n legend: {\r\n visible: (props.showLegend && (seriesNames.filter(value => value).length || seriesBenchmarkNames.filter(value => value).length)),\r\n \"toggle-action\": \"disabled\",\r\n \"adjust-layout\": true,\r\n \"border-color\": grey,\r\n \"border-width\": 1,\r\n \"padding-top\": 10,\r\n \"padding-left\": 3,\r\n \"padding-bottom\": 13,\r\n \"padding-right\": 3,\r\n mediaRules: [\r\n {\r\n maxWidth: mobileBP,\r\n width: \"99.5%\", //setting this to 100% breaks the chart\r\n layout: \"2x2\",\r\n \"max-items\": 4,\r\n overflow: \"page\",\r\n \"page-status\": {\r\n \"font-size\": 8,\r\n \"offset-y\": -5,\r\n height: 20\r\n },\r\n \"page-on\": {\r\n size: 13,\r\n \"offset-y\": -5\r\n },\r\n \"page-off\": {\r\n size: 13,\r\n \"offset-y\": -5\r\n }\r\n },\r\n {\r\n maxWidth: 450,\r\n \"border-color\": black\r\n }\r\n ],\r\n item: {\r\n \"font-family\": fontFamily,\r\n \"font-size\": 10,\r\n mediaRules: [\r\n {\r\n maxWidth: mobileBP,\r\n \"font-size\": mobileLabelSize\r\n }\r\n ]\r\n }\r\n },\r\n \"scale-x\": {\r\n itemsOverlap: true,\r\n maxItems: 9999,\r\n label: {\r\n text: props.xAxisLabel,\r\n color: black,\r\n \"wrap-text\": true,\r\n width: \"100%\",\r\n \"font-family\": fontFamily,\r\n mediaRules: [\r\n {\r\n maxWidth: mobileBP,\r\n \"font-size\": mobileLabelSize\r\n }\r\n ]\r\n },\r\n labels: xAxisLabels,\r\n \"line-color\": grey,\r\n mediaRules: [\r\n {\r\n maxWidth: 450,\r\n \"line-color\": black\r\n }\r\n ],\r\n item: {\r\n wrapText: true,\r\n width: (HORIZONTAL_CHART_TYPES.includes(props.type)) ? \"75px\" : '100%',\r\n \"font-family\": fontFamily,\r\n mediaRules: [\r\n {\r\n maxWidth: 450,\r\n \"font-size\": mobileFontSize,\r\n fontAngle: (HORIZONTAL_CHART_TYPES.includes(props.type)) ? 0 : 270,\r\n \"text-align\": \"right\",\r\n \"width\": (HORIZONTAL_CHART_TYPES.includes(props.type)) ? \"55px\" : xAxisMobileWidth,\r\n color: black\r\n }\r\n ]\r\n },\r\n tick: {\r\n mediaRules: [\r\n {\r\n maxWidth: 450,\r\n \"line-color\": black\r\n }\r\n ]\r\n }\r\n },\r\n \"scale-y\": {\r\n \"label\": {\r\n \"text\": props.yAxisLabel,\r\n color: black,\r\n \"wrap-text\": true,\r\n \"padding-left\": -12,\r\n \"padding-top\": (HORIZONTAL_CHART_TYPES.includes(props.type)) ? 0 : -5,\r\n width: \"100%\",\r\n \"font-family\": fontFamily,\r\n mediaRules: [\r\n {\r\n maxWidth: mobileBP,\r\n \"font-size\": mobileLabelSize\r\n }\r\n ]\r\n },\r\n \"line-color\": grey,\r\n mediaRules: [\r\n {\r\n maxWidth: 450,\r\n \"line-color\": black\r\n }\r\n ],\r\n item: {\r\n \"font-family\": fontFamily,\r\n mediaRules: [\r\n {\r\n maxWidth: 450,\r\n \"font-size\": mobileFontSize,\r\n color: black\r\n }\r\n ]\r\n },\r\n tick: {\r\n mediaRules: [\r\n {\r\n maxWidth: 450,\r\n \"line-color\": black\r\n }\r\n ]\r\n }\r\n },\r\n \"scaleX2\": { // Second scale for the benchmark legend elements to exist on\r\n visible: false\r\n },\r\n \"scaleY2\": { // Second scale for the benchmark legend elements to exist on\r\n visible: false\r\n },\r\n series: []\r\n },\r\n newChartData);\r\n\r\n // Shows legend across top of chart instead of on the side\r\n if(props.legendOnTop) {\r\n const legendOnTop = {\r\n width: \"94%\",\r\n layout: \"2x2\",\r\n \"max-items\": 4,\r\n overflow: \"page\",\r\n \"page-status\": {\r\n \"font-size\": 8\r\n }\r\n };\r\n\r\n newChartData[\"legend\"] = Object.assign(legendOnTop, newChartData[\"legend\"]);\r\n }\r\n\r\n if (xBreakHappens) {\r\n newChartData[\"scale-x\"][\"label\"][\"padding-top\"] = 20;\r\n newChartData[\"scale-x\"][\"label\"][\"mediaRules\"][0][\"padding-top\"] = 0;\r\n }\r\n\r\n newChartData[\"scale-y\"] = Object.assign(newChartData[\"scale-y\"], yMinMaxBuilder(props, seriesValues));\r\n newChartData[\"scaleY2\"] = Object.assign(newChartData[\"scaleY2\"], yMinMaxBuilder(props, seriesValues));\r\n\r\n // Better Arrow logic\r\n if (props.betterArrowDirection) {\r\n newChartData = addBetterArrow(\r\n props.id,\r\n props.type,\r\n newChartData,\r\n mobileBP,\r\n props.yAxisLabel,\r\n props.betterArrowDirection,\r\n grey,\r\n white\r\n );\r\n }\r\n\r\n // Make a Kaplan-Meier chart different from a line chart.\r\n if (props.type === KAPLAN_MEIER_CHART_TYPE) {\r\n newChartData.plot = Object.assign(newChartData.plot,\r\n {\r\n aspect: \"stepped\",\r\n marker: {\r\n visible: false\r\n }\r\n });\r\n\r\n // Logic for removing ticks and making legend labels show\r\n newChartData[\"scale-x\"][\"tick\"] = { visible: false };\r\n newChartData[\"scale-x\"][\"items-overlap\"] = true;\r\n newChartData[\"scale-x\"][\"item\"][\"width\"] = null;\r\n newChartData[\"scale-x\"][\"item\"][\"wrapText\"] = false;\r\n }\r\n\r\n // Make a stacked bullet chart different from a plain bullet chart and reverse legend.\r\n if (STACKED_CHART_TYPES.includes(props.type)) {\r\n newChartData.plot = Object.assign(newChartData.plot,\r\n {\r\n stacked: true\r\n });\r\n\r\n newChartData[\"legend\"][\"reverseSeries\"] = true;\r\n }\r\n\r\n // Adds logic for showing 0s to bullet charts\r\n if (\r\n props.type === STACKED_BULLET_CHART_TYPE ||\r\n props.type === BULLET_CHART_TYPE ||\r\n props.type === HORIZONTAL_BULLET_CHART_TYPE ||\r\n props.type === HORIZONTAL_STACKED_BULLET_CHART_TYPE\r\n ) {\r\n showZeroes(newChartData,\r\n STACKED_CHART_TYPES.includes(props.type),\r\n mobileFontSize\r\n );\r\n }\r\n\r\n // Adds new series for each series name\r\n if (seriesNames.length) {\r\n if (STACKED_CHART_TYPES.includes(props.type) &&\r\n props.overallBenchmark) {\r\n // Overall benchmark logic for stacked bar charts\r\n newChartData = addOverallBenchmark(props.type,\r\n chartTypeMap[props.type],\r\n newChartData,\r\n props.showLegend,\r\n seriesBenchmarkNames[0],\r\n seriesBenchmarks[0][0],\r\n overallBenchmarkColor\r\n );\r\n }\r\n\r\n seriesNames.forEach((seriesName, index) => {\r\n let seriesObject = buildSeriesObject(\r\n props.type,\r\n chartTypeMap[props.type],\r\n seriesName,\r\n seriesValues[index],\r\n seriesBenchmarkNames[index],\r\n seriesBenchmarks[index],\r\n colorScheme[index % colorScheme.length],\r\n benchmarkColorScheme[index % benchmarkColorScheme.length],\r\n fontFamily,\r\n props.overallBenchmark\r\n );\r\n\r\n let benchmarkObject = (!props.overallBenchmark) ? buildBenchmarkLegendObject(\r\n props.type,\r\n chartTypeMap[props.type],\r\n seriesBenchmarkNames[index],\r\n benchmarkColorScheme[index % benchmarkColorScheme.length]\r\n ) : null;\r\n\r\n if (STACKED_CHART_TYPES.includes(props.type) && benchmarkObject) {\r\n newChartData[\"series\"].push(benchmarkObject);\r\n }\r\n newChartData[\"series\"].push(seriesObject);\r\n if (!STACKED_CHART_TYPES.includes(props.type) && benchmarkObject) {\r\n newChartData[\"series\"].push(benchmarkObject);\r\n }\r\n });\r\n }\r\n // Needs a series object to populate the chart at all\r\n else {\r\n newChartData[\"series\"].push({});\r\n }\r\n\r\n // Overall benchmark logic for non-stacked bullet charts\r\n if ((chartTypeMap[props.type] === LINE_ZINGCHART_TYPE ||\r\n (props.overallBenchmark &&\r\n (\r\n props.type === BULLET_CHART_TYPE ||\r\n props.type === HORIZONTAL_BULLET_CHART_TYPE\r\n )\r\n )) &&\r\n seriesBenchmarks.length &&\r\n seriesBenchmarks[0][0] !== null\r\n ) {\r\n newChartData = addOverallBenchmark(props.type,\r\n chartTypeMap[props.type],\r\n newChartData,\r\n props.showLegend,\r\n seriesBenchmarkNames[0],\r\n seriesBenchmarks[0][0],\r\n overallBenchmarkColor\r\n );\r\n }\r\n }\r\n\r\n return newChartData;\r\n}\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ZingChart from 'zingchart-react';\r\nimport zingchart from 'zingchart';\r\nimport * as chartFunctions from './chartFunctions';\r\n\r\nexport default class Chart extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n chartData: {},\r\n chartInputValues: {},\r\n height: this.props.height\r\n };\r\n\r\n }\r\n\r\n componentDidMount() {\r\n this.setChartData();\r\n zingchart.bind(this.props.id, 'complete', (chart) => {\r\n chartFunctions.postRenderAdjustments(chart, this.props, zingchart.exec);\r\n });\r\n }\r\n\r\n UNSAFE_componentWillReceiveProps(newProps) {\r\n let setStateObject = { type: newProps.type };\r\n \r\n if (newProps.height !== this.props.height) {\r\n setStateObject.height = newProps.height;\r\n }\r\n \r\n this.setState(setStateObject, this.setChartData);\r\n }\r\n\r\n setChartData = () => {\r\n this.setState({ chartData: chartFunctions.dataBuilder(this.props) });\r\n }\r\n\r\n render() {\r\n // Makes sure id and type are provided and that the type is not an image\r\n if (this.props.id && this.props.type && this.props.type !== \"image\") {\r\n return (\r\n \r\n
\r\n {legend}\r\n
\r\n )\r\n }\r\n else {\r\n return (\r\n \r\n {checkedContent}\r\n
\r\n \r\n {legend}\r\n {checkbox}\r\n
\r\n );\r\n }\r\n }\r\n}\r\n\r\nCheckboxInput.defaultProps = {\r\n checked: false,\r\n checkboxWrapperClassName: \"\",\r\n isEditable: true,\r\n required: false,\r\n requiredFieldIndicatorStyle: {style: \"star\", position: \"before\"}\r\n};\r\n\r\nCheckboxInput.propTypes = {\r\n className: PropTypes.string,\r\n checked: PropTypes.bool,\r\n checkboxWrapperClassName: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string.isRequired,\r\n legend: PropTypes.string,\r\n name: PropTypes.string,\r\n onChange: PropTypes.func,\r\n required: PropTypes.bool,\r\n requiredFieldIndicatorStyle: PropTypes.shape({\r\n style: PropTypes.string, // either \"star\", \"dot\" or \"none\"\r\n position: PropTypes.string // either \"before\" or \"after\"\r\n }),\r\n value: PropTypes.string,\r\n verticalSpacing: PropTypes.string\r\n}\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport InputError from '../../../errors/InputError';\r\n\r\nexport default class SelectBox extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n let existingContentObject = this.props.options.find((option) => option.value === this.props.existingContent);\r\n let firstOptionValue = undefined;\r\n if (this.props.options.length) {\r\n firstOptionValue = this.props.options.find(s => s.selected === true) ?\r\n this.props.options.find(s => s.selected === true).value :\r\n this.props.options[0].value;\r\n }\r\n\r\n this.state = {\r\n options: this.props.options,\r\n selectedValue: (existingContentObject) ? this.props.existingContent : firstOptionValue\r\n };\r\n }\r\n\r\n focus() {\r\n this[`${this.props.id}__select`].focus();\r\n }\r\n\r\n hasFocus() {\r\n return this[`${this.props.id}__select`] === document.activeElement;\r\n }\r\n\r\n UNSAFE_componentWillReceiveProps(newProps) {\r\n if (\r\n newProps.options.length !== this.state.options.length ||\r\n ('existingContent' in newProps &&\r\n newProps.existingContent !== undefined &&\r\n newProps.existingContent !== this.state.selectedValue)) {\r\n\r\n let existingContentObject = newProps.options.find((option) => option.value === newProps.existingContent);\r\n\r\n let firstOptionValue = (this.props.options.length) ?\r\n this.props.options[0].value :\r\n undefined;\r\n\r\n let selectedValue = (existingContentObject) ? newProps.existingContent : firstOptionValue;\r\n\r\n this.setState({ options: newProps.options, selectedValue });\r\n }\r\n }\r\n\r\n getValue = () => {\r\n if (this.props.required && !this.state.selectedValue) {\r\n throw new InputError(this.props.label + \" is Required\", this.state.selectedValue);\r\n }\r\n\r\n return this.state.selectedValue;\r\n }\r\n\r\n onChange = (e) => {\r\n this.setState({ selectedValue: e.target.value }, () => {\r\n if (this.props.onChange) {\r\n this.props.onChange(this.state.selectedValue);\r\n this.doValidation();\r\n }\r\n });\r\n }\r\n\r\n handleBlur = (e) => {\r\n if (this.props.onBlur) {\r\n this.props.onBlur(e);\r\n }\r\n this.doValidation();\r\n }\r\n\r\n doValidation = () => {\r\n let newErrorMessage = null;\r\n if (this.props.validateOnBlur) {\r\n if (this.props.required) {\r\n if (!this.state.selectedValue || this.state.selectedValue === this.props.options[0].name) {\r\n newErrorMessage = (this.props.requiredError) ?\r\n this.props.requiredError :\r\n this.props.label + \" is a required field.\";\r\n }\r\n }\r\n if (newErrorMessage) {\r\n this.setState({ className: this.props.validationErrorClass });\r\n }\r\n\r\n this.setState({\r\n validationError: newErrorMessage,\r\n contentWrapperClass: newErrorMessage ? this.props.validationErrorClass : ''\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n let label = (this.props.label) ?\r\n : null;\r\n\r\n let requiredFieldIndicator = (this.props.required) ?\r\n :\r\n null;\r\n\r\n let helperText = this.props.helperText ?\r\n \r\n {this.props.helperText}\r\n :\r\n null;\r\n\r\n let errorText = this.props.errorMessage;\r\n if (!errorText && this.state.validationError) {\r\n errorText = this.state.validationError;\r\n }\r\n let errorMessage = errorText ?\r\n \r\n {errorText}\r\n :\r\n null;\r\n\r\n const optionsList = this.props.options.map((option, index) =>\r\n \r\n );\r\n\r\n let selectedValueName = null;\r\n\r\n if (this.state.selectedValue) {\r\n let selectedValueObject = this.props.options.find((option) => option.value === this.state.selectedValue);\r\n if (!selectedValueObject) {\r\n selectedValueObject = this.props.options.find((option) => option.name === this.state.selectedValue);\r\n }\r\n selectedValueName = selectedValueObject.name;\r\n }\r\n\r\n let inputDisplay = null;\r\n\r\n let verticalSpacingClass = this.props.verticalSpacing === \"compact\" ? \"field--compact\" : \"field\";\r\n\r\n let contentWrapperClass = this.props.contentWrapperClass;\r\n if (this.state.contentWrapperClass) {\r\n contentWrapperClass = this.state.contentWrapperClass;\r\n }\r\n verticalSpacingClass += \" \" + contentWrapperClass;\r\n\r\n if (optionsList.length) {\r\n inputDisplay = (this.props.isEditable) ?\r\n \r\n { this[`${this.props.id}__select`] = instance; }}\r\n >\r\n {optionsList}\r\n \r\n {helperText}\r\n {errorMessage}\r\n
:\r\n \r\n {label}\r\n {requiredFieldIndicator}\r\n
\r\n \r\n {label}\r\n
;\r\n }\r\n\r\n return (\r\n \r\n {inputDisplay}\r\n \r\n );\r\n }\r\n}\r\n\r\nSelectBox.defaultProps = {\r\n isEditable: true\r\n};\r\n\r\nSelectBox.propTypes = {\r\n className: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n existingContent: PropTypes.string,\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n onChange: PropTypes.func,\r\n options: PropTypes.arrayOf(PropTypes.object).isRequired,\r\n required: PropTypes.bool,\r\n verticalSpacing: PropTypes.string\r\n}\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextInput from '../text-input/TextInput';\r\nimport CheckboxInput from '../checkbox-input/CheckboxInput';\r\nimport './ImageInput.css';\r\n\r\nexport default class ImageInput extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n existingContentObject: (this.props.existingContentObject) ? this.props.existingContentObject : {}\r\n };\r\n }\r\n \r\n componentWillReceiveProps(newProps) {\r\n // For case where user is going from edit-mode to read-only-mode (like onCancel)\r\n if ( \r\n newProps.existingContentObject !== this.props.existingContentObject && \r\n this.props.isEditable && \r\n !newProps.isEditable\r\n ) {\r\n this.setState({ existingContentObject: newProps.existingContentObject });\r\n }\r\n }\r\n \r\n // Grabs the values from the inputs and updates the state with the new values\r\n getValue = () => {\r\n if (this.props.isEditable) {\r\n let newImageObject = {}; \r\n\r\n newImageObject[\"imageURL\"] = this[`${this.props.id}__image-URL`].getValue();\r\n newImageObject[\"imageCaption\"] = this[`${this.props.id}__image-caption`].getValue();\r\n newImageObject[\"imageAlt\"] = this[`${this.props.id}__image-alt`].getValue();\r\n \r\n if (this.props.hasGraphicCheckbox) {\r\n newImageObject[\"imageIsGraphic\"] = this[`${this.props.id}__image-graphic`].getValue();\r\n }\r\n\r\n this.setState({ existingContentObject: newImageObject });\r\n\r\n return newImageObject;\r\n }\r\n \r\n return this.state.existingContentObject; \r\n }\r\n\r\n render () { \r\n const label = (this.props.label) ?\r\n :\r\n null;\r\n \r\n const graphicCheckbox = (this.props.hasGraphicCheckbox) ?\r\n \r\n {selectedValueName}\r\n
\r\n \r\n ![{this.state.existingContentObject[\"imageAlt\"]}\r\n]({this.state.existingContentObject[\"imageURL\"]}\r\n)
\r\n
:\r\n null;\r\n\r\n return (\r\n {this.state.existingContentObject[\"imageCaption\"]}
\r\n \r\n {label}\r\n {imageDisplay}\r\n {inputDisplay}\r\n
\r\n );\r\n }\r\n}\r\n \r\nImageInput.defaultProps = {\r\n hasGraphicCheckbox: false,\r\n isEditable: true,\r\n showInputsInReadOnly: false\r\n};\r\n\r\nImageInput.propTypes = {\r\n disabled: PropTypes.bool,\r\n existingContentObject: PropTypes.shape({\r\n imageAlt: PropTypes.string,\r\n imageCaption: PropTypes.string,\r\n imageIsGraphic: PropTypes.bool,\r\n imageURL: PropTypes.string\r\n }),\r\n hasGraphicCheckbox: PropTypes.bool,\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n showInputsInReadOnly: PropTypes.bool\r\n};","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport InputList from '../../input-list/InputList';\r\nimport './GridInputPrompts.css';\r\n\r\nconst AddTablePrompt = (props) => {\r\n let handleSubmit = (receivedValues) => {\r\n let rows = (receivedValues.values[props.formId + \"-add-table-rows\"]) ?\r\n receivedValues.values[props.formId + \"-add-table-rows\"] :\r\n null;\r\n \r\n let columns = (receivedValues.values[props.formId + \"-add-table-columns\"]) ?\r\n receivedValues.values[props.formId + \"-add-table-columns\"] :\r\n null;\r\n\r\n props.handleSubmit(rows, columns);\r\n }\r\n\r\n let inputListArray = [\r\n {\r\n label: 'Rows',\r\n type: 'number',\r\n id: props.formId + '-add-table-rows',\r\n required: true\r\n },\r\n {\r\n label: 'Columns',\r\n type: 'number',\r\n id: props.formId + '-add-table-columns',\r\n required: true\r\n },\r\n {\r\n type: 'button',\r\n value: 'Cancel',\r\n className: 'prompt__button--cancel',\r\n onClick: props.handleCancel\r\n },\r\n {\r\n type: 'submit',\r\n value: 'Add Table',\r\n className: 'button'\r\n }\r\n ];\r\n\r\n let promptContent = (props.isShowing) ?\r\n \r\n \r\n {options}\r\n
\r\n );\r\n}\r\n\r\nGridInputControls.propTypes = {\r\n options: PropTypes.arrayOf(PropTypes.shape({\r\n label: PropTypes.string.isRequired,\r\n onClick: PropTypes.func.isRequired\r\n }))\r\n}\r\n\r\nexport { GridInputControls };","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TextInput from '../text-input/TextInput';\r\nimport { AddTablePrompt } from './grid-input-prompts/GridInputPrompts';\r\nimport { GridInputControls } from './grid-input-controls/GridInputControls';\r\nimport createConfirmAlert from '../../../../shared/functions/createConfirmAlert';\r\nimport classNames from 'classnames';\r\nimport './GridInput.css';\r\n\r\nexport default class GridInput extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n addTablePromptShowing: false,\r\n columns: this.calcColumns(this.props.existingContentArray),\r\n inputValues: (this.props.existingContentArray) ? this.props.existingContentArray : [],\r\n rows: this.props.existingContentArray && this.props.existingContentArray.length\r\n };\r\n }\r\n \r\n componentWillReceiveProps(newProps) {\r\n // For case where user is going from edit-mode to read-only-mode (like onCancel)\r\n if ( \r\n newProps.existingContentArray !== this.props.existingContentArray || \r\n (this.props.isEditable && \r\n !newProps.isEditable)\r\n ) {\r\n \r\n // Closes all open panels when the editor is going into read-only mode\r\n let closePanels = (this.props.isEditable && !newProps.isEditable) && {\r\n addTablePromptShowing: false\r\n };\r\n \r\n this.setState({ \r\n columns: this.calcColumns(newProps.existingContentArray),\r\n inputValues: newProps.existingContentArray,\r\n rows: newProps.existingContentArray && newProps.existingContentArray.length,\r\n ...closePanels\r\n });\r\n }\r\n }\r\n \r\n // Takes number value and converts it into excel-column-format letters, so hitting AA once A-Z are used up, etc\r\n numberToLetter = (number) => {\r\n return (\r\n ((number >= 26) ? \r\n this.numberToLetter((number / 26 >> 0) - 1) : \r\n ''\r\n ) + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[number % 26]\r\n );\r\n }\r\n \r\n // Grabs the values from the text inputs of each cell to return, and updates the state of the component to match\r\n getValue = () => {\r\n let gridData = [];\r\n\r\n for (let i = 0; i < this.state.rows; ++i) {\r\n let gridDataRow = [];\r\n\r\n for (let j = 0; j < this.state.columns; ++j) {\r\n gridDataRow.push(\r\n this[this.props.id + \"-row\" + i + \"column\" + j].getValue()\r\n );\r\n }\r\n \r\n gridData.push(gridDataRow);\r\n }\r\n \r\n this.setState({ inputValues: gridData });\r\n \r\n return (gridData.length) ? gridData : null;\r\n }\r\n \r\n // Shows and hides the add table prompt\r\n toggleAddTablePrompt = () => {\r\n this.setState((prevState) => {\r\n \r\n let addTablePromptShowing = !prevState.addTablePromptShowing;\r\n \r\n return { addTablePromptShowing };\r\n });\r\n }\r\n \r\n // Takes the row and column numbers passed from the add table prompt and creates empty table data\r\n confirmAddTable = (rowCount, columnCount) => {\r\n this.toggleAddTablePrompt();\r\n \r\n const rows = parseInt(rowCount, 10);\r\n const columns = parseInt(columnCount, 10);\r\n \r\n let inputValues = [];\r\n for (let i = 0; i < rows; ++i) {\r\n inputValues.push(new Array(columns).fill(\"\"));\r\n }\r\n\r\n this.setState({ rows, columns, inputValues });\r\n }\r\n \r\n // Adds a new column to the table data\r\n addColumn = () => {\r\n let inputValues = this.getValue();\r\n \r\n this.setState((prevState) => {\r\n const columns = prevState.columns + 1;\r\n\r\n for (let i = 0; i < prevState.rows; ++i) {\r\n inputValues[i].push(\"\");\r\n }\r\n \r\n return { columns, inputValues };\r\n });\r\n }\r\n \r\n // Adds a new row to the table data\r\n addRow = () => {\r\n let inputValues = this.getValue();\r\n \r\n this.setState((prevState) => {\r\n const rows = prevState.rows + 1;\r\n\r\n inputValues.push(new Array(prevState.columns).fill(\"\"));\r\n \r\n return { rows, inputValues };\r\n });\r\n }\r\n \r\n // Creates a confirmation message for deleting a row or column, where proper delete function will be called if accepted\r\n confirmDelete = (index, rowOrColumn) => {\r\n let confirmFunction = (rowOrColumn === 'row') ?\r\n this.deleteRow :\r\n this.deleteColumn;\r\n \r\n let displayIndex = (rowOrColumn === 'column') ?\r\n this.numberToLetter(index) :\r\n index + 1;\r\n \r\n let confirmAlertObject = {\r\n title: 'Confirm Action',\r\n message: `Are you sure you want to delete ${rowOrColumn} ${displayIndex}?`,\r\n buttons: [\r\n {\r\n label: 'Cancel',\r\n onClick: () => {}\r\n },\r\n {\r\n label: 'Confirm',\r\n onClick: () => confirmFunction(index)\r\n }\r\n ]\r\n }\r\n \r\n createConfirmAlert(confirmAlertObject);\r\n }\r\n \r\n // Deletes the column with the specified 0-based index\r\n deleteColumn = (index) => {\r\n if (this.state.columns === 1) {\r\n this.deleteTable();\r\n }\r\n else {\r\n let inputValues = this.getValue();\r\n \r\n this.setState((prevState) => {\r\n const columns = prevState.columns - 1;\r\n \r\n inputValues.forEach((row) => row.splice(index, 1));\r\n\r\n return {columns, inputValues};\r\n });\r\n }\r\n }\r\n \r\n // Deletes the row with the specified 0-based index\r\n deleteRow = (index) => {\r\n let inputValues = this.getValue();\r\n \r\n this.setState((prevState) => {\r\n const rows = prevState.rows - 1;\r\n\r\n inputValues.splice(index, 1);\r\n \r\n return {rows, inputValues};\r\n });\r\n }\r\n \r\n // Removes the current table and default everything\r\n deleteTable = () => {\r\n this.setState({ \r\n rows: 0, \r\n columns: 0, \r\n inputValues: [], \r\n tempInputValues: null \r\n });\r\n }\r\n \r\n // Figures out what the column count should be based on the longest row of the data\r\n calcColumns = (data) => {\r\n return data && data.reduce((maxLength, current, index) => {\r\n if (current.length > maxLength){\r\n return current.length;\r\n }\r\n return maxLength;\r\n }, 0);\r\n }\r\n \r\n render() {\r\n const label = (this.props.label) ?\r\n :\r\n null;\r\n \r\n let controlButtonOptions = null;\r\n \r\n if (this.props.isEditable) {\r\n controlButtonOptions = (!this.state.inputValues || !this.state.inputValues.length) ? [\r\n {\r\n label: \"Add Table\",\r\n onClick: this.toggleAddTablePrompt\r\n }\r\n ] : \r\n [\r\n {\r\n label: \"Add Column\",\r\n onClick: this.addColumn\r\n },\r\n {\r\n label: \"Add Row\",\r\n onClick: this.addRow\r\n },\r\n {\r\n label: \"Delete Table\",\r\n onClick: this.deleteTable\r\n }\r\n ];\r\n }\r\n \r\n let toolbar = (this.props.isEditable) ?\r\n \r\n \r\n {label}\r\n {toolbar}\r\n {table}\r\n
\r\n );\r\n }\r\n}\r\n \r\nGridInput.defaultProps = {\r\n isEditable: true\r\n};\r\n \r\nGridInput.propTypes = {\r\n existingContentArray: PropTypes.arrayOf(PropTypes.array),\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n verticalSpacing: PropTypes.string\r\n};\r\n\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport InputError from '../../../errors/InputError';\r\nimport \"./TextArea.css\";\r\n\r\nexport default class TextArea extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n value: (this.props.existingContent) ? this.props.existingContent : \"\"\r\n };\r\n }\r\n\r\n UNSAFE_componentWillReceiveProps(newProps) {\r\n if ('existingContent' in newProps && newProps.existingContent !== undefined && newProps.existingContent !== this.state.value) {\r\n this.setState({ value: newProps.existingContent });\r\n }\r\n }\r\n\r\n getValue = () => {\r\n if (this.props.required && this.state.value === \"\") {\r\n throw new InputError(this.props.label + \" is Required\", this.state.value);\r\n }\r\n\r\n return this.state.value;\r\n }\r\n\r\n handleChange = (e) => {\r\n this.setState({ value: e.target.value });\r\n\r\n if (this.props.onChange) {\r\n this.props.onChange(e);\r\n }\r\n }\r\n\r\n handleBlur = (e) => {\r\n if (this.props.onBlur) {\r\n this.props.onBlur(e);\r\n }\r\n\r\n let newErrorMessage = null;\r\n if (this.props.validateOnBlur) {\r\n if (this.props.patternMatch) {\r\n if (e.target.value && !e.target.value.match(this.props.patternMatch)) {\r\n newErrorMessage = (this.props.patternMatchError) ?\r\n this.props.patternMatchError :\r\n this.props.label + \" is not the correct format.\";\r\n }\r\n }\r\n if (this.props.required) {\r\n if (!e.target.value) {\r\n newErrorMessage = (this.props.requiredError) ?\r\n this.props.requiredError :\r\n this.props.label + \" is a required field.\";\r\n }\r\n }\r\n if (newErrorMessage) {\r\n this.setState({ className: this.props.validationErrorClass });\r\n }\r\n this.setState({\r\n validationError: newErrorMessage,\r\n contentWrapperClass: newErrorMessage ? this.props.validationErrorClass : ''\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n let labelText = this.props.label;\r\n\r\n let label = (this.props.label) ?\r\n :\r\n null;\r\n\r\n let inputHelperText = this.props.helperText;\r\n\r\n let helperText = inputHelperText ?\r\n \r\n {inputHelperText}\r\n :\r\n null;\r\n\r\n let errorText = this.props.errorMessage;\r\n if (!errorText && this.state.validationError) {\r\n errorText = this.state.validationError;\r\n }\r\n let errorMessage = errorText ?\r\n \r\n {errorText}\r\n :\r\n null;\r\n\r\n let requiredFieldIndicator = (this.props.required) ?\r\n :\r\n null;\r\n\r\n let verticalSpacingClass = this.props.verticalSpacing === \"compact\" ? \"field--compact\" : \"field\";\r\n\r\n let readOnlyContent = (this.props.existingContent) ?\r\n this.props.existingContent.split(\"\\n\").map((paragraph, index) => {\r\n if (paragraph !== \"\") {\r\n return {paragraph}
;\r\n }\r\n return null;\r\n }) :\r\n null;\r\n\r\n let contentWrapperClass = this.props.contentWrapperClass;\r\n if (this.state.contentWrapperClass) {\r\n contentWrapperClass = this.state.contentWrapperClass;\r\n }\r\n\r\n\r\n let ElementType = (this.props.useDiv) ? \"div\" : \"span\";\r\n let textAreaDisplay = (this.props.isEditable) ?\r\n\r\n\r\n {label}\r\n {requiredFieldIndicator}\r\n
\r\n \r\n {readOnlyContent}\r\n
\r\n \r\n {textAreaDisplay}\r\n
\r\n );\r\n }\r\n}\r\n\r\nTextArea.defaultProps = {\r\n isEditable: true\r\n};\r\n\r\nTextArea.propTypes = {\r\n className: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n existingContent: PropTypes.string,\r\n helperText: PropTypes.string,\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n maxLength: PropTypes.string,\r\n minLength: PropTypes.string,\r\n name: PropTypes.string,\r\n onChange: PropTypes.func,\r\n placeholderText: PropTypes.string,\r\n required: PropTypes.bool,\r\n useDiv: PropTypes.bool,\r\n value: PropTypes.string,\r\n verticalSpacing: PropTypes.string\r\n}\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ButtonInput from '../button-input/ButtonInput';\r\nimport GridInput from '../grid-input/GridInput';\r\nimport TextArea from '../text-area/TextArea';\r\nimport Papa from 'papaparse';\r\n\r\nexport default class InputUpload extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n uploadedFileText: null\r\n };\r\n }\r\n \r\n componentWillReceiveProps(newProps) {\r\n // For case where user is going from edit-mode to read-only-mode (like onCancel)\r\n // Also for case where changes happen to the existingContent so the uploadedFileText shouldn't overrule that\r\n if (\r\n (this.props.isEditable && !newProps.isEditable) || \r\n (newProps.existingContent !== this.props.existingContent)) {\r\n // The input needs to default back to the existing content (aka the last save), so the uploaded text needs to be cleared out\r\n this.setState({ uploadedFileText: null });\r\n }\r\n }\r\n \r\n getValue = () => {\r\n return this[this.props.id].getValue();\r\n }\r\n \r\n uploadFile = (file) => {\r\n let reader = new FileReader();\r\n \r\n reader.onload = (e) => {\r\n this.setState((prevState) => {\r\n let uploadedFileText = e.target.result.trim();\r\n \r\n return { uploadedFileText }\r\n });\r\n };\r\n \r\n reader.readAsText(file);\r\n }\r\n \r\n render() { \r\n let buttonDisplay = (this.props.isEditable) &&\r\n \r\n {inputDisplay}\r\n {buttonDisplay}\r\n
\r\n );\r\n }\r\n}\r\n\r\nInputUpload.defaultProps = {\r\n hasGrid: false,\r\n isEditable: true\r\n};\r\n\r\nInputUpload.propTypes = {\r\n buttonLabel: PropTypes.string,\r\n existingContent: PropTypes.string,\r\n fileTypes: PropTypes.string,\r\n hasGrid: PropTypes.bool,\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n verticalSpacing: PropTypes.string\r\n}","import Papa from 'papaparse';\r\n\r\nexport function unparse(content) {\r\n if (content) {\r\n let processedContent = content.map((row) => {\r\n return row.map((cell) => {\r\n if (typeof cell === \"string\") {\r\n return cell.replace(new RegExp('\\r?\\n', 'g'), 'NEWLINEHERE');\r\n }\r\n else {\r\n return cell;\r\n }\r\n });\r\n })\r\n\r\n return Papa.unparse(processedContent);\r\n }\r\n\r\n return '';\r\n}\r\n\r\nexport function parse(content) {\r\n if (content) {\r\n let parsedContent = Papa.parse(content);\r\n\r\n if (parsedContent.errors.length) {\r\n return [];\r\n }\r\n\r\n let processedContent = parsedContent.data.map((row) => {\r\n return row.map((cell) => {\r\n if (typeof cell === \"string\") {\r\n return cell.replace(new RegExp('NEWLINEHERE','g'), '\\n');\r\n }\r\n else {\r\n return cell;\r\n }\r\n });\r\n })\r\n\r\n return processedContent;\r\n }\r\n\r\n return [];\r\n}","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Chart from '../chart/Chart';\r\nimport { \r\n BULLET_CHART_TYPE, \r\n HORIZONTAL_BULLET_CHART_TYPE, \r\n LINE_CHART_TYPE, \r\n KAPLAN_MEIER_CHART_TYPE, \r\n STACKED_BULLET_CHART_TYPE, \r\n HORIZONTAL_STACKED_BULLET_CHART_TYPE,\r\n HORIZONTAL_CHART_TYPES\r\n} from '../chart/chartFunctions';\r\nimport { Grid, GridItem } from '../grid/Grid';\r\nimport ButtonInput from '../button-input/ButtonInput';\r\nimport CheckboxInput from '../checkbox-input/CheckboxInput';\r\nimport SelectBox from '../select-box/SelectBox';\r\nimport TextInput from '../text-input/TextInput';\r\nimport ImageInput from '../image-input/ImageInput';\r\nimport InputUpload from '../input-upload/InputUpload';\r\nimport { unparse } from '../../../functions/parse-handling';\r\nimport './ChartInput.css';\r\n\r\nexport default class ChartInput extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n chartInputValues: (this.props.existingContentObject) ? this.props.existingContentObject : {},\r\n type: (this.props.existingContentObject) ? this.props.existingContentObject.type : undefined,\r\n savedChartInputValues: (this.props.existingContentObject) ? this.props.existingContentObject : {},\r\n savedType: (this.props.existingContentObject) ? this.props.existingContentObject.type : undefined,\r\n tempChartInputValues: {}\r\n };\r\n }\r\n\r\n UNSAFE_componentWillReceiveProps(newProps) {\r\n const newChartInputValues = (newProps.existingContentObject) ? newProps.existingContentObject : {};\r\n const newType = (newProps.existingContentObject) ? newProps.existingContentObject.type : undefined;\r\n\r\n // On toggle into edit mode\r\n if (!this.props.isEditable && newProps.isEditable) {\r\n this.setState({\r\n chartInputValues: newChartInputValues,\r\n type: newType,\r\n tempChartInputValues: {}\r\n });\r\n }\r\n // On toggle into read-only mode\r\n else if (this.props.isEditable && !newProps.isEditable) {\r\n this.setState({\r\n savedChartInputValues: newChartInputValues,\r\n savedType: newType\r\n });\r\n }\r\n }\r\n\r\n // Grabs all of the input values in an object\r\n getValue = () => {\r\n let valuesObject = {};\r\n this.addChartValuesToObject(valuesObject);\r\n valuesObject.type = this.state.type;\r\n\r\n for (let property in valuesObject) {\r\n if (valuesObject[property] === \"\") {\r\n delete valuesObject[property];\r\n }\r\n }\r\n\r\n this.setState({ chartInputValues: valuesObject });\r\n\r\n return valuesObject;\r\n }\r\n\r\n // Updates the type of the chart while preserving the current inputs in a temp object\r\n updateType = () => {\r\n this.setState((prevState) => {\r\n let type = this[this.props.id + '-type'].getValue();\r\n\r\n let tempChartInputValues = prevState.tempChartInputValues;\r\n let currentInputValues = {};\r\n this.addChartValuesToObject(currentInputValues);\r\n\r\n let tempHasKeys = false;\r\n\r\n Object.keys(currentInputValues).forEach((key) => {\r\n if (currentInputValues[key] !== undefined) {\r\n tempHasKeys = true;\r\n tempChartInputValues[key] = currentInputValues[key];\r\n }\r\n });\r\n\r\n if (tempHasKeys) {\r\n return { type, tempChartInputValues };\r\n }\r\n\r\n return { type };\r\n });\r\n }\r\n\r\n // Updates what displays on the chart\r\n updateChart = () => {\r\n this.setState((prevState) => {\r\n let type = this[this.props.id + '-type'].getValue();\r\n let chartInputValues = prevState.chartInputValues;\r\n this.addChartValuesToObject(chartInputValues);\r\n\r\n return { type, chartInputValues, tempChartInputValues: {} };\r\n });\r\n }\r\n\r\n // Puts the input values in an object\r\n addChartValuesToObject = (object) => {\r\n object.betterArrowDirection = (this[this.props.id + '-better-arrow-direction']) ? this[this.props.id + '-better-arrow-direction'].getValue() : undefined;\r\n object.data = (this[this.props.id + '-chart-data']) ? this[this.props.id + '-chart-data'].getValue() : undefined;\r\n let imageValues = (this[this.props.id + '-image']) ? this[this.props.id + '-image'].getValue() : undefined;\r\n object.showLegend = (this[this.props.id + '-show-legend']) ? this[this.props.id + '-show-legend'].getValue() : undefined;\r\n object.legendOnTop = (this[this.props.id + '-legend-on-top']) ? this[this.props.id + '-legend-on-top'].getValue() : undefined;\r\n object.overallBenchmark = (this[this.props.id + '-overall-benchmark']) ? this[this.props.id + '-overall-benchmark'].getValue() : undefined;\r\n object.xAxisLabel = (this[this.props.id + '-x-axis-label']) ? this[this.props.id + '-x-axis-label'].getValue() : undefined;\r\n object.yMax = (this[this.props.id + '-y-max'] &&\r\n this[this.props.id + '-y-max'].getValue() !== \"\") ?\r\n parseFloat(this[this.props.id + '-y-max'].getValue()) :\r\n undefined;\r\n object.yMin = (this[this.props.id + '-y-min'] &&\r\n this[this.props.id + '-y-min'].getValue() !== \"\") ?\r\n parseFloat(this[this.props.id + '-y-min'].getValue()) :\r\n undefined;\r\n object.ySteps = (this[this.props.id + '-y-steps'] &&\r\n this[this.props.id + '-y-steps'].getValue()) ?\r\n parseFloat(this[this.props.id + '-y-steps'].getValue()) :\r\n undefined;\r\n object.yAxisLabel = (this[this.props.id + '-y-axis-label']) ? this[this.props.id + '-y-axis-label'].getValue() : undefined;\r\n if (imageValues) {\r\n object.image = {\r\n url: imageValues.imageURL,\r\n caption: imageValues.imageCaption,\r\n altText: imageValues.imageAlt,\r\n isGraphic: imageValues.imageIsGraphic\r\n };\r\n }\r\n }\r\n\r\n render() {\r\n // Controls what values are filled into the inputs\r\n let chartInputValues = (Object.keys(this.state.tempChartInputValues).length === 0) ?\r\n this.state.chartInputValues :\r\n this.state.tempChartInputValues;\r\n\r\n let chartViewValues, chartViewType;\r\n\r\n // Controls what values are being showed on the chart\r\n if (this.props.isEditable) {\r\n chartViewValues = this.state.chartInputValues;\r\n chartViewType = this.state.type;\r\n }\r\n else {\r\n chartViewValues = this.state.savedChartInputValues;\r\n chartViewType = this.state.savedType;\r\n }\r\n\r\n const betterArrowOptions = [\r\n {\r\n name: \"None\",\r\n value: \"\"\r\n },\r\n {\r\n name: \"Up\",\r\n value: \"up\"\r\n },\r\n {\r\n name: \"Down\",\r\n value: \"down\"\r\n }\r\n ];\r\n\r\n let overallBenchmarkCheckbox = (this.state.type !== LINE_CHART_TYPE && this.state.type !== KAPLAN_MEIER_CHART_TYPE) ?\r\n \r\n { this[this.props.id + '-chart-data'] = instance; }}\r\n verticalSpacing={this.props.verticalSpacing}\r\n />\r\n \r\n \r\n { this[this.props.id + '-x-axis-label'] = instance; }}\r\n verticalSpacing={this.props.verticalSpacing}\r\n />\r\n \r\n \r\n { this[this.props.id + '-y-axis-label'] = instance; }}\r\n verticalSpacing={this.props.verticalSpacing}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n { this[this.props.id + '-show-legend'] = instance; }}\r\n verticalSpacing={this.props.verticalSpacing}\r\n />\r\n \r\n \r\n { this[this.props.id + '-legend-on-top'] = instance; }}\r\n verticalSpacing={this.props.verticalSpacing}\r\n />\r\n \r\n {overallBenchmarkCheckbox}\r\n \r\n { this[this.props.id + '-better-arrow-direction'] = instance; }} \r\n verticalSpacing={this.props.verticalSpacing}\r\n />\r\n
:\r\n null;\r\n\r\n const typeOptions = [\r\n {\r\n name: \"None\",\r\n value: \"\"\r\n },\r\n {\r\n name: \"Bar\",\r\n value: BULLET_CHART_TYPE\r\n },\r\n {\r\n name: \"Horizontal Bar\",\r\n value: HORIZONTAL_BULLET_CHART_TYPE\r\n },\r\n {\r\n name: \"Stacked Bar\",\r\n value: STACKED_BULLET_CHART_TYPE\r\n },\r\n {\r\n name: \"Horizontal Stacked Bar\",\r\n value: HORIZONTAL_STACKED_BULLET_CHART_TYPE\r\n },\r\n {\r\n name: \"Line\",\r\n value: LINE_CHART_TYPE\r\n },\r\n {\r\n name: \"Kaplan-Meier\",\r\n value: KAPLAN_MEIER_CHART_TYPE\r\n },\r\n {\r\n name: \"Image\",\r\n value: \"image\"\r\n }\r\n ];\r\n\r\n const label = (this.props.label) ?\r\n :\r\n null;\r\n \r\n let chartHeight = 520;\r\n \r\n if (HORIZONTAL_CHART_TYPES.includes(chartViewType)) {\r\n let dataLength = (chartViewValues.data && chartViewValues.data.length) ? chartViewValues.data.length : 1;\r\n \r\n let calcHeight = ((dataLength - 1) * 125) + 20;\r\n \r\n if (calcHeight > chartHeight) {\r\n chartHeight = calcHeight;\r\n }\r\n }\r\n\r\n let chartDisplay = null;\r\n\r\n if (chartViewType) {\r\n if (this.props.showChart) {\r\n chartDisplay = \r\n { this[this.props.id + '-type'] = instance; }}\r\n verticalSpacing={this.props.verticalSpacing}\r\n />\r\n {chartDisplay}\r\n
:\r\n \r\n {label}\r\n {chartDisplay}\r\n
;\r\n\r\n if (chartViewType === \"image\") {\r\n chartInputDisplay = (this.props.isEditable) ?\r\n \r\n { this[this.props.id + '-type'] = instance; }}\r\n verticalSpacing={this.props.verticalSpacing}\r\n />\r\n { this[this.props.id + '-image'] = instance; }}\r\n verticalSpacing={this.props.verticalSpacing}\r\n />\r\n
:\r\n \r\n {label}\r\n
;\r\n }\r\n\r\n return chartInputDisplay;\r\n }\r\n}\r\n\r\nChartInput.defaultProps = {\r\n showChart: true\r\n};\r\n\r\nChartInput.propTypes = {\r\n existingContentObject: PropTypes.shape({\r\n type: PropTypes.oneOf([\r\n 'bullet',\r\n 'horizontal-bullet',\r\n 'image',\r\n 'kaplan-meier',\r\n 'line',\r\n 'stacked-bullet',\r\n 'horizontal-stacked-bullet',\r\n ''\r\n ]),\r\n betterArrowDirection: PropTypes.oneOf([\"up\", \"down\", null]),\r\n data: PropTypes.arrayOf(\r\n PropTypes.arrayOf(\r\n PropTypes.oneOfType([\r\n PropTypes.number,\r\n PropTypes.string\r\n ])\r\n )\r\n ),\r\n legendOnTop: PropTypes.bool,\r\n showLegend: PropTypes.bool,\r\n xAxisLabel: PropTypes.string,\r\n yAxisLabel: PropTypes.string,\r\n yMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n yMin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n ySteps: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\r\n }),\r\n id: PropTypes.string,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n showChart: PropTypes.bool, //only exists so tests don't break\r\n verticalSpacing: PropTypes.string\r\n};\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport './CheckboxInputList.css';\r\nimport CheckboxInput from '../checkbox-input/CheckboxInput';\r\nimport InputLabel from '../input-label/InputLabel';\r\nimport InputError from '../../../errors/InputError';\r\n\r\nexport default class CheckboxInputList extends Component {\r\n getValue = () => {\r\n let values = [];\r\n let errors = [];\r\n\r\n this.props.checkboxProps.forEach((cbProp) => {\r\n try {\r\n let isChecked = this[cbProp.id].getValue();\r\n if (isChecked) {\r\n values.push(cbProp.id);\r\n }\r\n }\r\n catch (error) {\r\n errors.push(error.message);\r\n }\r\n });\r\n\r\n if (!values.length) {\r\n errors.unshift(this.props.legend + \" is Required\")\r\n }\r\n\r\n if (errors.length) {\r\n throw new InputError(errors.join(\", \"), values);\r\n }\r\n else {\r\n return values;\r\n }\r\n }\r\n\r\n render() {\r\n let verticalSpacingClass = this.props.verticalSpacing === \"compact\" ? \"field--compact\" : \"field\";\r\n\r\n let errorMessage = (this.props.errorMessage) ?\r\n {this.props.errorMessage} :\r\n null;\r\n\r\n const checkboxes = this.props.checkboxProps.map((cbProp, index) => {\r\n let isCbChecked = ((\r\n this.props.selectedIds &&\r\n this.props.selectedIds.indexOf(cbProp.id) !== -1\r\n ) ||\r\n cbProp.checked\r\n );\r\n\r\n return (\r\n \r\n {checkedCsv}\r\n
\r\n ;\r\n\r\n return (\r\n \r\n {checkboxListContent}\r\n
\r\n );\r\n }\r\n}\r\n\r\nCheckboxInputList.defaultProps = {\r\n isEditable: true,\r\n requiredFieldIndicatorStyle: {style: \"star\", position: \"before\"}\r\n};\r\n\r\nCheckboxInputList.propTypes = {\r\n className: PropTypes.string,\r\n checkboxProps: PropTypes.arrayOf(PropTypes.shape({\r\n checked: PropTypes.bool,\r\n id: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n value: PropTypes.string.isRequired\r\n })).isRequired,\r\n disabled: PropTypes.bool,\r\n errorMessage: PropTypes.string,\r\n groupName: PropTypes.string.isRequired,\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n legend: PropTypes.string,\r\n onChange: PropTypes.func,\r\n required: PropTypes.bool,\r\n requiredFieldIndicatorStyle: PropTypes.shape({\r\n style: PropTypes.string, // either \"star\", \"dot\" or \"none\"\r\n position: PropTypes.string // either \"before\" or \"after\"\r\n }),\r\n selectedIds: PropTypes.arrayOf(PropTypes.string),\r\n verticalSpacing: PropTypes.string\r\n}\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ButtonInput from '../button-input/ButtonInput';\r\nimport SelectBox from '../select-box/SelectBox';\r\nimport TextInput from '../text-input/TextInput';\r\nimport { Grid, GridItem } from '../grid/Grid';\r\nimport './DateRangeFilterInput.css';\r\n\r\nexport default class DateRangeFilterInput extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n existingContentObject: (this.props.existingContentObject) ? this.props.existingContentObject : {}\r\n };\r\n }\r\n\r\n componentWillReceiveProps(newProps) {\r\n // For case where user is going from edit-mode to read-only-mode (like onCancel)\r\n if (newProps.existingContentObject !== this.props.existingContentObject &&\r\n this.props.isEditable && !newProps.isEditable) {\r\n this.setState({ existingContentObject: newProps.existingContentObject });\r\n }\r\n }\r\n\r\n // Grabs the values from the inputs and updates the state with the new values\r\n getValue = () => {\r\n let newDateRangeObject = {};\r\n\r\n newDateRangeObject[\"dateField\"] = this[`${this.props.id}__date-field`].getValue();\r\n newDateRangeObject[\"dateFrom\"] = this[`${this.props.id}__date-from`].getValue();\r\n newDateRangeObject[\"dateTo\"] = this[`${this.props.id}__date-to`].getValue();\r\n\r\n this.setState({ existingContentObject: newDateRangeObject });\r\n\r\n return newDateRangeObject;\r\n }\r\n\r\n render () {\r\n const label = (this.props.label) ?\r\n :\r\n null;\r\n\r\n // Shows inputs when in edit mode, and read only versions of inputs if showInputsInReadOnly is true\r\n let inputDisplay = (this.props.isEditable || this.props.showInputsInReadOnly) ?\r\n \r\n {this.state.existingContentObject[\"caption\"]}
:\r\n null;\r\n\r\n let preview = ( this.state.existingContentObject.type === 'video' ||\r\n this.state.existingContentObject.type === 'playlist' ) &&\r\n this.state.existingContentObject.videoId ?\r\n :\r\n null;\r\n\r\n return (\r\n \r\n {label}\r\n {preview}\r\n {caption}\r\n {inputDisplay}\r\n
\r\n );\r\n }\r\n}\r\n\r\nVideoInput.defaultProps = {\r\n isEditable: true,\r\n showInputsInReadOnly: false\r\n};\r\n\r\nVideoInput.propTypes = {\r\n disabled: PropTypes.bool,\r\n existingContentObject: PropTypes.shape({\r\n videoId: PropTypes.string,\r\n caption: PropTypes.string,\r\n type: PropTypes.string\r\n }),\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n showInputsInReadOnly: PropTypes.bool\r\n};\r\n","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport SelectBox from '../select-box/SelectBox';\r\nimport ImageInput from '../image-input/ImageInput';\r\nimport VideoInput from '../video-input/VideoInput';\r\nimport './FeaturedMediaInput.css';\r\n\r\nexport default class FeaturedMediaInput extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n mediaType: (this.props.existingContentObject) ? this.props.existingContentObject.mediaType : undefined\r\n };\r\n \r\n this.mediaTypeOptions = [\r\n {\r\n name: \"None\",\r\n value: \"\"\r\n },\r\n {\r\n name: \"Image\",\r\n value: \"image\"\r\n },\r\n {\r\n name: \"Video\",\r\n value: \"video\"\r\n }\r\n ];\r\n }\r\n\r\n // Grabs all of the input values in an object\r\n getValue = () => {\r\n let valuesObject = (this.state.mediaType) ? this[this.props.id + '-format-input'].getValue() : {};\r\n \r\n for (let propName in valuesObject) {\r\n if (valuesObject[propName] === \"\" || valuesObject[propName] === null) {\r\n delete valuesObject[propName];\r\n }\r\n }\r\n \r\n valuesObject.mediaType = this.state.mediaType;\r\n\r\n return valuesObject;\r\n }\r\n\r\n // Updates the type of the chart while preserving the current inputs in a temp object\r\n updateMediaType = (newType) => {\r\n this.setState({ mediaType : newType });\r\n }\r\n\r\n render () {\r\n let label = (this.props.label) ?\r\n :\r\n null;\r\n\r\n let errorMessage = (this.props.errorMessage) ?\r\n \r\n {this.props.errorMessage}\r\n :\r\n null;\r\n\r\n let verticalSpacingClass = this.props.verticalSpacing === \"compact\" ? \"field--compact\" : \"field\";\r\n \r\n let input = null;\r\n \r\n if (this.state.mediaType) {\r\n input = (this.state.mediaType === \"image\") ?\r\n \r\n {input}\r\n
\r\n ;\r\n\r\n return (\r\n \r\n {inputDisplay}\r\n
\r\n );\r\n }\r\n}\r\n\r\nFeaturedMediaInput.defaultProps = {\r\n isEditable: true\r\n};\r\n\r\nFeaturedMediaInput.propTypes = {\r\n className: PropTypes.string,\r\n errorMessage: PropTypes.string,\r\n existingContentObject: PropTypes.shape({\r\n mediaType: PropTypes.string,\r\n imageAlt: PropTypes.string,\r\n imageCaption: PropTypes.string,\r\n imageURL: PropTypes.string,\r\n videoId: PropTypes.string,\r\n caption: PropTypes.string,\r\n type: PropTypes.string\r\n }),\r\n id: PropTypes.string.isRequired,\r\n isEditable: PropTypes.bool,\r\n label: PropTypes.string,\r\n verticalSpacing: PropTypes.string\r\n}","import React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Link } from 'react-router-dom';\r\nimport TextInput from '../text-input/TextInput';\r\n\r\nexport default class LinkInput extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n // Set the state for the object containing linkText & linkURL values\r\n this.state = {\r\n existingContentObject: this.props.existingContentObject\r\n };\r\n }\r\n\r\n getValue = () => {\r\n\r\n if (this.props.isEditable) {\r\n\r\n // creates an object to hold the updated values\r\n let newLinkContentObject = {};\r\n\r\n // connects the LinkInput values to the new object\r\n newLinkContentObject[\"linkText\"] = this[`${this.props.id}__link-text`].getValue();\r\n newLinkContentObject[\"linkURL\"] = this[`${this.props.id}__link-URL`].getValue();\r\n\r\n // updates the object in state with the new values\r\n this.setState({ existingContentObject: newLinkContentObject })\r\n\r\n return newLinkContentObject;\r\n }\r\n\r\n return this.state.existingContentObject;\r\n\r\n }\r\n\r\n render() {\r\n\r\n const label = this.props.label ?\r\n :\r\n null;\r\n\r\n let requiredFieldIndicator = (this.props.required) ?\r\n :\r\n null;\r\n\r\n const errorMessage = this.props.errorMessage ?\r\n \r\n {this.props.errorMessage}\r\n :\r\n null;\r\n\r\n let link = (this.props.newWindow) ?\r\n