) => {\r\n if (onClick && e.target.files?.length) {\r\n onClick(e.target.files[0]);\r\n e.target.value = \"\"\r\n }\r\n if (onFiles && e.target.files?.length) {\r\n onFiles(e.target.files);\r\n e.target.value = \"\"\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n fileInput?.current?.click()}\r\n disabled={isFileUploading || isDataProcessing}\r\n >\r\n select manually\r\n \r\n \r\n >\r\n );\r\n\r\n}\r\n","import React, { forwardRef } from 'react';\r\nimport classNames from 'classnames';\r\nimport IconSVG from '../../styles/svg-icons';\r\n\r\nexport const FilterChip = forwardRef(\r\n ({ text = '', selected = false, refParent, onRemove = () => false }, ref) => (\r\n \r\n
\r\n
{text}
\r\n
\r\n \r\n \r\n
\r\n
\r\n )\r\n);\r\n","import React from 'react';\r\nimport IconSVG from '../../styles/svg-icons';\r\n\r\nexport function FilterClear({ isShown = false, isDisabled = false, onClick }) {\r\n if (!isShown) {\r\n return null;\r\n }\r\n\r\n return (\r\n onClick && onClick()}\r\n disabled={isDisabled}\r\n >\r\n \r\n Reset\r\n \r\n )\r\n}\r\n","import React from 'react';\r\n\r\nexport function FilterPanel({ children }) {\r\n return (\r\n \r\n {children}\r\n
\r\n )\r\n}\r\n","import { gridActions } from '../../actions';\r\nimport { OnHoverTooltip } from '../common';\r\nimport IconSVG from '../../styles/svg-icons';\r\nimport { useAppDispatch } from '../../effects/useAppDispatch';\r\n\r\ninterface Props { index: number; }\r\n\r\nexport function AddRowButton({ index }: Props) {\r\n const dispatch = useAppDispatch();\r\n return (\r\n \r\n \r\n dispatch(gridActions.addRow(index + 1))}\r\n className=\"btn-link btn-action-add\"\r\n >\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import cn from 'classnames';\r\nimport { GridColumn, GridCurrentPosition, GridOrderBy } from '../../types/state/GridState';\r\nimport { gridActions } from '../../actions/grid.actions';\r\nimport IconSVG from \"../../styles/svg-icons\";\r\nimport { OnHoverTooltip } from '../common/OnHoverTooltip';\r\nimport { useAppDispatch } from '../../effects/useAppDispatch';\r\n\r\ninterface Props {\r\n column: GridColumn;\r\n position?: GridCurrentPosition;\r\n orderBy: GridOrderBy;\r\n markOptional?: boolean\r\n}\r\n\r\nexport function HeaderItem({ column, position, orderBy, markOptional }: Props) {\r\n const dispatch = useAppDispatch();\r\n\r\n const classNames = cn(column.className, {\r\n ['cell-' + column.name]: true,\r\n 'cell-sort': !column.disabledSort,\r\n [`sorted ${orderBy.direction}`]: orderBy?.columnName === column.name,\r\n highlight: position?.columnName === column.name,\r\n });\r\n\r\n const content = (\r\n \r\n \r\n {column.title}{column.renderTitle?.()}{markOptional && !column.required && ' (optional)'}\r\n \r\n {column.required && * }\r\n {!column.disabledSort && }\r\n {\r\n column.canRemove &&\r\n dispatch(gridActions.removeColumn(column.name))}>\r\n \r\n \r\n }\r\n
\r\n );\r\n\r\n return (\r\n dispatch(gridActions.orderBy(column.name))}\r\n className={classNames}\r\n >\r\n {\r\n column.headerError\r\n ? {content} \r\n : content\r\n }\r\n \r\n );\r\n\r\n}\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport cn from 'classnames';\r\nimport { AddRowButton } from './AddRowButton';\r\nimport { HeaderItem } from './HeaderItem';\r\n\r\nclass Header extends Component {\r\n shouldComponentUpdate = nextProps => {\r\n return this.props.orderBy !== nextProps.orderBy ||\r\n this.props.headers !== nextProps.headers ||\r\n this.props.position == null ||\r\n nextProps.position == null ||\r\n (this.props.position != null &&\r\n nextProps.position != null &&\r\n this.props.position.columnName !== nextProps.position.columnName)\r\n }\r\n\r\n render = () => {\r\n if (!this.props.headers) return null;\r\n\r\n const { addRowVisible = true } = this.props;\r\n\r\n return (\r\n \r\n \r\n \r\n {\r\n addRowVisible &&\r\n \r\n }\r\n \r\n \r\n {\r\n this.props.headers.map(h =>\r\n \r\n )\r\n }\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = ({ grid }) => ({\r\n headers: grid.headers,\r\n orderBy: grid.orderBy,\r\n position: grid.position\r\n});\r\n\r\nconst connectedHeader = connect(mapStateToProps)(Header);\r\nexport { connectedHeader as Header };\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { classnames } from '../../../styles/classnames';\r\nimport { gridActions as actions } from '../../../actions';\r\nimport { constants } from '../../../constants';\r\n\r\nclass Select extends Component {\r\n shouldComponentUpdate = nextProps =>\r\n !!this.props.hasFocus !== !!nextProps.hasFocus\r\n || !!this.props.editing !== !!nextProps.editing\r\n || this.props.value !== nextProps.value\r\n || this.props.source !== nextProps.source\r\n || this.props.error !== nextProps.error\r\n || this.props.readonly !== nextProps.readonly;\r\n\r\n render = () => {\r\n const { hasFocus, columnName, error, readonly } = this.props;\r\n\r\n const cssClasses = classnames({\r\n ['cell-' + columnName]: true,\r\n 'has-focus': hasFocus,\r\n readonly\r\n });\r\n\r\n return (\r\n \r\n \r\n {hasFocus && !readonly ? this.renderSelect() : this.renderValue()}\r\n {error && hasFocus &&
{error}
}\r\n
\r\n \r\n );\r\n }\r\n\r\n renderValue = () => {\r\n const { format, value, source = [] } = this.props;\r\n const item = source.find(s => s.key !== undefined ? String(s.key) === String(value) : s === value);\r\n const itemValue = item ? item.title ?? item : value;\r\n\r\n return (\r\n \r\n {typeof format === 'function' ? format(itemValue) : itemValue}\r\n \r\n );\r\n }\r\n\r\n renderSelect = () => {\r\n const { value, error, keepEmptyOption, source = [] } = this.props;\r\n\r\n const options = source.map(s => {s?.title ?? s} );\r\n\r\n if (\r\n (typeof value === 'undefined' || value === null || value === '' || error || keepEmptyOption)\r\n ) {\r\n options.unshift(\r\n \r\n {constants.emptyPlaceholder}\r\n ,\r\n );\r\n }\r\n\r\n return (\r\n \r\n {options}\r\n \r\n );\r\n }\r\n\r\n handleClick = () => {\r\n const { hasFocus, onClick, columnName } = this.props;\r\n if (!hasFocus) {\r\n onClick(columnName, false);\r\n }\r\n }\r\n\r\n handleChange = e => {\r\n const { dispatch, source, editing, onClick, onChange, columnName } = this.props;\r\n\r\n const targetValue = e.target.value === constants.emptyPlaceholder ? undefined : e.target.value;\r\n\r\n if (!editing) {\r\n onClick(columnName, true);\r\n }\r\n\r\n const value = source.find(s => (s?.key ?? s)?.toString() === targetValue)?.key ?? targetValue\r\n\r\n if (onChange) {\r\n onChange(value);\r\n } else {\r\n dispatch(actions.editing(value));\r\n }\r\n\r\n dispatch(actions.applyEdit());\r\n }\r\n\r\n handleSelectKeyDown = event => {\r\n // block page up, page down, bottom arrow keys\r\n if (event.keyCode === 33 || event.keyCode === 34 || event.keyCode === 40) {\r\n event.preventDefault();\r\n }\r\n }\r\n}\r\n\r\nconst connectedSelect = connect()(Select);\r\nexport { connectedSelect as Select };\r\n\r\n\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { gridColumns } from '../../../constants';\r\nimport { securitiesActions as actions, gridActions } from '../../../actions';\r\nimport { classnames } from '../../../styles/classnames';\r\nimport { formatUtils } from '../../../utils';\r\nimport { ChangePxTalk } from '../../common';\r\n\r\n\r\nclass PxTalk extends Component {\r\n shouldComponentUpdate = nextProps =>\r\n this.props.hasFocus !== nextProps.hasFocus\r\n || this.props.editing !== nextProps.editing\r\n || this.props.value !== nextProps.value\r\n\r\n render = () => {\r\n const { value, hasFocus, editing, dispatch } = this.props;\r\n\r\n const cssClasses = classnames({\r\n 'cell-pxTalk': true,\r\n 'has-focus': hasFocus\r\n });\r\n\r\n return (\r\n \r\n \r\n {formatUtils.formatPxTalk(value)} \r\n {hasFocus && }\r\n {hasFocus && !editing && }\r\n {\r\n editing &&\r\n dispatch(actions.savePxTalks())}\r\n />\r\n }\r\n
\r\n \r\n );\r\n }\r\n\r\n handleClick = () => {\r\n const { editing, hasFocus, onClick } = this.props;\r\n if (!editing) {\r\n onClick(gridColumns.pxTalks.name, hasFocus);\r\n }\r\n }\r\n\r\n handleEditCancel = () => {\r\n const { dispatch } = this.props;\r\n\r\n dispatch(gridActions.blockInput(false));\r\n dispatch(gridActions.cancelEdit());\r\n }\r\n}\r\n\r\nconst mapStateToProps = () => ({});\r\n\r\nconst connectedPxTalk = connect(mapStateToProps)(PxTalk);\r\nexport { connectedPxTalk as PxTalk }; \r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { gridColumns } from '../../../constants';\r\nimport { securitiesActions as actions, gridActions, changeColorActions } from '../../../actions';\r\nimport { classnames } from '../../../styles/classnames';\r\nimport { formatUtils } from '../../../utils';\r\nimport { ChangeColor } from '../../common';\r\n\r\n\r\nclass Color extends Component {\r\n shouldComponentUpdate = nextProps =>\r\n this.props.hasFocus !== nextProps.hasFocus\r\n || this.props.editing !== nextProps.editing\r\n || this.props.value !== nextProps.value\r\n\r\n render = () => {\r\n const { value, hasFocus, editing, dispatch } = this.props;\r\n const cssClasses = classnames({\r\n 'cell-color': true,\r\n 'has-focus': hasFocus\r\n });\r\n\r\n return (\r\n \r\n \r\n {formatUtils.formatColor(value)} \r\n {hasFocus && }\r\n {hasFocus && !editing && }\r\n {\r\n editing &&\r\n dispatch(actions.saveColor())}\r\n />\r\n }\r\n
\r\n \r\n );\r\n }\r\n\r\n handleClick = () => {\r\n const { editing, hasFocus, onClick } = this.props;\r\n if (!editing) {\r\n onClick(gridColumns.color.name, hasFocus);\r\n }\r\n }\r\n\r\n handleDelete = () => {\r\n const { dispatch } = this.props;\r\n\r\n dispatch(gridActions.clearCell());\r\n dispatch(gridActions.applyEdit());\r\n dispatch(changeColorActions.reset());\r\n dispatch(gridActions.blockInput(false));\r\n }\r\n\r\n handleEditCancel = () => {\r\n const { dispatch } = this.props;\r\n\r\n dispatch(gridActions.cancelEdit());\r\n dispatch(gridActions.blockInput(false));\r\n }\r\n}\r\n\r\nconst mapStateToProps = () => ({});\r\n\r\nconst connectedColor = connect(mapStateToProps)(Color);\r\nexport { connectedColor as Color }; \r\n","import { gridActions as actions } from '../../../actions';\r\n\r\nexport const cellEvents = {\r\n handleCopy,\r\n handlePaste,\r\n handleClick,\r\n handleChange,\r\n handleCloseHelp\r\n};\r\n\r\nfunction handleCopy(e) {\r\n const clipboardData = e.clipboardData || window.clipboardData;\r\n clipboardData.setData('text', this.props.value);\r\n\r\n e.preventDefault();\r\n}\r\n\r\nfunction handlePaste(e) {\r\n const { dispatch, column, readonly } = this.props;\r\n const clipboardData = e.clipboardData || window.clipboardData;\r\n const clipboard = clipboardData?.getData('text')?.replace(/^\\r?\\n+|\\r?\\n+$/g, '');\r\n const isReadonly = readonly || column?.readonly;\r\n\r\n if (!isReadonly &&\r\n clipboard &&\r\n clipboard.indexOf(\"\\t\") < 0 &&\r\n clipboard.indexOf(\"\\n\") < 0) {\r\n const parsedValue = actions.parseValue(clipboard, column);\r\n if (!column.pattern || column.pattern.test(parsedValue)) {\r\n dispatch(actions.edit());\r\n dispatch(actions.editing(parsedValue));\r\n }\r\n }\r\n\r\n e.preventDefault();\r\n}\r\n\r\nfunction handleClick(columnName) {\r\n const { editing, hasFocus, column, onClick } = this.props;\r\n const readonly = this.props.readonly || column?.readonly;\r\n\r\n if (!editing && (!hasFocus || (hasFocus && !readonly))) {\r\n onClick(columnName, hasFocus);\r\n }\r\n}\r\n\r\nfunction handleChange(e) {\r\n if (!this.props.column?.readonly && !this.props.readonly) {\r\n this.props.dispatch(actions.editing(e.target.value));\r\n }\r\n}\r\n\r\nfunction handleCloseHelp(e) {\r\n this.props.dispatch(actions.hideHelp());\r\n e.stopPropagation();\r\n}\r\n","import { gridActions } from '../../actions/grid.actions';\r\nimport IconSVG from '../../styles/svg-icons';\r\nimport { useAppDispatch } from '../../effects/useAppDispatch';\r\n\r\ninterface Props {\r\n title?: string;\r\n}\r\n\r\nexport function HelpPopover({ title }: Props) {\r\n const dispatch = useAppDispatch();\r\n\r\n return (\r\n \r\n
\r\n
\r\n \r\n {title || ''}\r\n
\r\n
dispatch(gridActions.hideHelp())}>\r\n \r\n \r\n
\r\n
\r\n
\r\n Enter manually. \r\n Upload a file. \r\n Copy and paste from Excel. \r\n \r\n
\r\n
\r\n );\r\n}\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport classNames from 'classnames';\r\nimport { cellEvents } from './cell.events';\r\nimport { HelpPopover } from '../HelpPopover';\r\nimport MaskedInput from 'react-text-mask';\r\n\r\nclass Text extends Component {\r\n shouldComponentUpdate = nextProps =>\r\n !!this.props.hasFocus !== !!nextProps.hasFocus\r\n || !!this.props.editing !== !!nextProps.editing\r\n || this.props.value !== nextProps.value\r\n || this.props.error !== nextProps.error\r\n || !!this.props.showHelp !== !!nextProps.showHelp\r\n || !!this.props.showPlaceholder !== !!nextProps.showPlaceholder\r\n || !!this.props.readonly !== !!nextProps.readonly;\r\n\r\n formatOrDefault = () => {\r\n const { column, value, draft } = this.props;\r\n\r\n if (!draft && typeof column.format === 'function') {\r\n return column.format(value);\r\n }\r\n\r\n return value;\r\n }\r\n\r\n render = () => {\r\n const { className, column, value, hasFocus, editing, error, showHelp, showPlaceholder, placeholder, readonly, helpPopoverTitle } = this.props;\r\n const cellClassName = classNames(column.className, className, {\r\n [`cell-${column.name}`]: true,\r\n 'has-focus': hasFocus,\r\n readonly: column.readonly || readonly\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst connectedText = connect()(Text);\r\nexport { connectedText as Text };\r\n\r\n\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { gridActions } from '../../../actions';\r\nimport { HelpPopover } from '../HelpPopover';\r\nimport { classnames } from '../../../styles/classnames';\r\nimport { cellEvents } from './cell.events';\r\n\r\n\r\nclass Lookup extends Component {\r\n state = {\r\n lookupSelectedIndex: 0\r\n };\r\n\r\n shouldComponentUpdate = nextProps =>\r\n !!this.props.hasFocus !== !!nextProps.hasFocus\r\n || this.props.editing\r\n || nextProps.editing\r\n || this.props.value !== nextProps.value\r\n || this.props.error !== nextProps.error\r\n || !!this.props.showHelp !== !!nextProps.showHelp\r\n || !!this.props.showPlaceholder !== !!nextProps.showPlaceholder\r\n || !!this.props.readonly !== !!nextProps.readonly\r\n || !!this.props.disableUppercase !== !!nextProps.disableUppercase;\r\n\r\n componentDidUpdate = (prevProps, prevState) => {\r\n const { editing, lookupDataItems, dispatch } = this.props;\r\n if (editing || prevProps.editing) {\r\n dispatch(gridActions.blockInput(editing && !!lookupDataItems.length));\r\n }\r\n\r\n if (this._activeLookupItem &&\r\n this._scrollableLookupContainer &&\r\n this.props.lookupDataItems &&\r\n this.props.lookupDataItems.length &&\r\n prevState.lookupSelectedIndex !== this.state.lookupSelectedIndex) {\r\n\r\n const container = this._scrollableLookupContainer.getBoundingClientRect();\r\n const item = this._activeLookupItem.getBoundingClientRect();\r\n\r\n if (item.top < container.top || item.bottom > container.bottom) {\r\n this._activeLookupItem.scrollIntoView(false);\r\n }\r\n }\r\n\r\n }\r\n\r\n handleFormKeyDown = e => {\r\n if (e.keyCode === 13 || e.which === 13) {\r\n e.preventDefault();\r\n return false;\r\n }\r\n }\r\n\r\n render = () => {\r\n const {\r\n value,\r\n columnName,\r\n hasFocus,\r\n editing,\r\n error,\r\n maxLength,\r\n lookupDataItems,\r\n showHelp,\r\n showPlaceholder,\r\n placeholder,\r\n helpPopoverTitle,\r\n readonly\r\n } = this.props;\r\n\r\n const cssClasses = classnames({\r\n [`cell-${columnName}`]: true,\r\n 'has-focus': hasFocus,\r\n readonly\r\n });\r\n\r\n return (\r\n \r\n \r\n {\r\n editing &&\r\n
\r\n }\r\n {editing && this.renderLookup(lookupDataItems)}\r\n {!editing &&
{value || (showPlaceholder && {placeholder} )} }\r\n {hasFocus && !editing &&
}\r\n {error && hasFocus &&
{error}
}\r\n {showHelp && helpPopoverTitle &&
}\r\n \r\n \r\n );\r\n }\r\n\r\n renderLookup = lookupData => {\r\n if (!lookupData.length) {\r\n return null;\r\n }\r\n\r\n const { onLookupItemSelected } = this.props;\r\n\r\n const items = lookupData.map((item, index) =>\r\n this._activeLookupItem = index === this.state.lookupSelectedIndex ? node : this._activeLookupItem}\r\n className={classnames({ 'lookup-data-item': true, active: index === this.state.lookupSelectedIndex })}\r\n onClick={onLookupItemSelected.bind(this, item)}\r\n >\r\n {item.text} {item.description && {item.description} }\r\n \r\n );\r\n\r\n return this._scrollableLookupContainer = node} className=\"cell-lookup\">{items} ;\r\n }\r\n\r\n handleClick = () => {\r\n const { editing, hasFocus, columnName, onClick, onLookupReset } = this.props;\r\n if (!editing) {\r\n this.setState({ lookupSelectedIndex: 0 });\r\n onLookupReset();\r\n onClick(columnName, hasFocus);\r\n }\r\n }\r\n\r\n handlePaste = e => {\r\n const { onSearchTermChange, dispatch } = this.props;\r\n const clipboardData = e.clipboardData || window.clipboardData;\r\n const clipboard = clipboardData.getData('text');\r\n\r\n if (clipboard && clipboard.indexOf('\\t') < 0) {\r\n this.setState({ lookupSelectedIndex: 0 });\r\n dispatch(gridActions.edit());\r\n dispatch(gridActions.editing(clipboard));\r\n onSearchTermChange(clipboard);\r\n }\r\n\r\n e.preventDefault();\r\n }\r\n\r\n handleChange = e => {\r\n const { onSearchTermChange, dispatch, disableUppercase } = this.props;\r\n const value = e.target.value;\r\n\r\n this.setState({ lookupSelectedIndex: 0 });\r\n\r\n const formattedValue = disableUppercase ? value : value.toUpperCase();\r\n\r\n dispatch(gridActions.editing(formattedValue));\r\n onSearchTermChange(value);\r\n }\r\n\r\n handleKeyDown = e => {\r\n const { lookupDataItems = [], onLookupItemSelected, onLookupReset } = this.props;\r\n if (lookupDataItems.length) {\r\n if (e.keyCode === 13) { // enter\r\n onLookupItemSelected(lookupDataItems[this.state.lookupSelectedIndex])\r\n } else if (e.keyCode === 38 && this.state.lookupSelectedIndex > 0) { // move up\r\n this.setState({ lookupSelectedIndex: this.state.lookupSelectedIndex - 1 });\r\n } else if (e.keyCode === 40 && this.state.lookupSelectedIndex < lookupDataItems.length - 1) { // move down\r\n this.setState({ lookupSelectedIndex: this.state.lookupSelectedIndex + 1 });\r\n } else if (e.keyCode === 27) { // esc\r\n this.setState({ lookupSelectedIndex: 0 });\r\n onLookupReset();\r\n }\r\n }\r\n }\r\n}\r\n\r\nconst connectedLookup = connect()(Lookup);\r\nexport { connectedLookup as Lookup };\r\n\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport classNames from 'classnames';\r\nimport TextareaAutosize from 'react-textarea-autosize';\r\nimport { cellEvents } from './cell.events';\r\n\r\nclass Textarea extends Component {\r\n shouldComponentUpdate = nextProps =>\r\n !!this.props.hasFocus !== !!nextProps.hasFocus\r\n || !!this.props.editing !== !!nextProps.editing\r\n || this.props.value !== nextProps.value\r\n || this.props.error !== nextProps.error;\r\n\r\n render = () => {\r\n const {\r\n column,\r\n value,\r\n hasFocus,\r\n editing,\r\n error,\r\n showPlaceholder,\r\n placeholder,\r\n readonly\r\n } = this.props;\r\n\r\n const className = classNames({\r\n [`cell-${column.name}`]: true,\r\n 'has-focus': hasFocus,\r\n readonly\r\n });\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst connectedTextarea = connect()(Textarea);\r\nexport { connectedTextarea as Textarea };\r\n","import classNames from 'classnames';\r\nimport moment from 'moment';\r\nimport { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { cellEvents } from './cell.events';\r\nimport { gridActions as actions } from '../../../actions';\r\nimport { constants } from '../../../constants';\r\nimport { CustomDatePicker } from '../../common/date-range-custon-view/CustomDatePicker';\r\nimport { Tooltip, TooltipPlacement, TooltipTriggerType } from '../../common/Tooltip';\r\n\r\nclass DateCell extends Component {\r\n shouldComponentUpdate = nextProps =>\r\n this.props.hasFocus !== nextProps.hasFocus ||\r\n this.props.editing !== nextProps.editing ||\r\n this.props.value !== nextProps.value ||\r\n this.props.error !== nextProps.error ||\r\n this.props.showPlaceholder !== nextProps.showPlaceholder ||\r\n this.props.readonly !== nextProps.readonly;\r\n\r\n formatOrDefault = () => {\r\n const { column, value, draft } = this.props;\r\n\r\n if (!draft && typeof column.format === 'function') {\r\n return column.format(value);\r\n }\r\n\r\n return value ? moment(value).format(constants.dateFormat) : '';\r\n };\r\n\r\n handleChange = newValue => {\r\n const { dispatch, editing, onClick, columnName, readonly } = this.props;\r\n\r\n if (!readonly) {\r\n if (!editing) {\r\n onClick(columnName, true);\r\n }\r\n\r\n dispatch(actions.editing(moment(newValue).startOf('day').utcOffset(0, true).format()));\r\n dispatch(actions.applyEdit());\r\n }\r\n };\r\n\r\n render = () => {\r\n const { className, column, value, hasFocus, editing, error, showPlaceholder, placeholder, readonly } =\r\n this.props;\r\n\r\n const cellClassName = classNames(className, {\r\n [`cell-${column.name}`]: true,\r\n 'has-focus': hasFocus,\r\n readonly,\r\n });\r\n\r\n return (\r\n \r\n \r\n {editing ? (\r\n
(\r\n \r\n )}\r\n >\r\n {this.formatOrDefault()}
\r\n \r\n ) : (\r\n
\r\n {this.formatOrDefault() || (showPlaceholder && {placeholder} )}\r\n \r\n )}\r\n {hasFocus && !editing &&
}\r\n {error && hasFocus && !readonly &&
{error}
}\r\n
\r\n \r\n );\r\n };\r\n}\r\n\r\nconst connectedText = connect()(DateCell);\r\nexport { connectedText as DateCell };\r\n","import React from 'react';\r\nimport cn from 'classnames';\r\nimport { Primitive } from \"../../../utils/differ/types\";\r\nimport { gridActions } from '../../../actions/grid.actions';\r\nimport { FormError } from '../../controls/FormError';\r\nimport { HelpPopover } from '../HelpPopover';\r\nimport { ILookup } from '../../../types/state/GridState';\r\nimport { isRequesting, isRequestSuccess } from '../../../utils';\r\nimport { requestCancelationController } from '../../../services/request-cancelation-controller';\r\nimport { RequestState } from '../../../constants/request-state';\r\nimport { Preloader } from '../../common';\r\nimport { useAppSelector } from '../../../effects/useAppSelector';\r\nimport { logger } from '../../../logging/logger';\r\nimport { useDebounce } from '../../../effects/useDebounce';\r\nimport { isRequestCancelationError } from '../../../actions';\r\nimport { useAppDispatch } from '../../../effects/useAppDispatch';\r\n\r\nconst searchTermMinLength = 3;\r\n\r\nexport interface LookupDataItem {\r\n value?: Primitive;\r\n text: string;\r\n description?: string;\r\n payload?: any;\r\n}\r\n\r\ninterface LookupProps {\r\n hasFocus?: boolean;\r\n editing?: boolean;\r\n value?: Primitive;\r\n error?: string;\r\n showHelp?: boolean;\r\n helpPopoverTitle?: string;\r\n showPlaceholder?: boolean;\r\n placeholder?: string;\r\n readonly?: boolean;\r\n maxLength?: number;\r\n disableUppercase?: boolean;\r\n columnName: string;\r\n lookupDataSource: ILookup;\r\n onClick: (columnsName: string, hasFocus: boolean) => void;\r\n}\r\n\r\nfunction LookupComponent({\r\n hasFocus,\r\n editing,\r\n value,\r\n error,\r\n showHelp,\r\n helpPopoverTitle,\r\n showPlaceholder,\r\n placeholder,\r\n readonly,\r\n maxLength,\r\n columnName,\r\n onClick,\r\n lookupDataSource,\r\n disableUppercase,\r\n}: LookupProps & ILookup) {\r\n const classNames = cn({\r\n [`cell-${columnName}`]: true,\r\n 'has-focus': hasFocus,\r\n readonly\r\n });\r\n const dispatch = useAppDispatch();\r\n\r\n const handleClick = () => {\r\n if (!editing) {\r\n onClick(columnName, Boolean(hasFocus));\r\n }\r\n }\r\n\r\n const handlePaste = (e: React.ClipboardEvent) => {\r\n const clipboardData = e.clipboardData || window.clipboardData;\r\n const clipboard = clipboardData?.getData('text')?.replace(/\\r\\n$/, '');\r\n\r\n if (clipboard && clipboard.indexOf('\\t') < 0) {\r\n dispatch(gridActions.edit());\r\n dispatch(gridActions.editing(clipboard));\r\n }\r\n\r\n e.preventDefault();\r\n }\r\n\r\n const handleCopy = (e: React.ClipboardEvent) => {\r\n const clipboardData = e.clipboardData || window.clipboardData;\r\n clipboardData.setData('text', (value ?? '').toString());\r\n\r\n e.preventDefault();\r\n }\r\n\r\n return (\r\n \r\n \r\n {\r\n Boolean(editing) &&\r\n \r\n }\r\n {\r\n !editing &&\r\n \r\n {value ? value.toString() : (Boolean(showPlaceholder) && Boolean(placeholder) && {placeholder} )}\r\n \r\n }\r\n {Boolean(hasFocus) && !editing && }\r\n {Boolean(hasFocus) && }\r\n {Boolean(showHelp) && Boolean(helpPopoverTitle) && }\r\n
\r\n \r\n );\r\n}\r\n\r\nexport const Lookup2 = React.memo(LookupComponent, (prev, next) => {\r\n return (\r\n Boolean(prev.hasFocus) === Boolean(next.hasFocus) &&\r\n Boolean(prev.editing) === Boolean(next.editing) &&\r\n Boolean(prev.showHelp) === Boolean(next.showHelp) &&\r\n Boolean(prev.showPlaceholder) === Boolean(next.showPlaceholder) &&\r\n Boolean(prev.readonly) === Boolean(next.readonly) &&\r\n prev.value === next.value &&\r\n (prev.error ?? '') === (next.error ?? '')\r\n );\r\n})\r\n\r\ninterface LookupEditProps {\r\n value?: Primitive;\r\n maxLength?: number;\r\n lookupDataSource: ILookup;\r\n disableUppercase?: boolean;\r\n}\r\n\r\nfunction LookupEdit({ value, lookupDataSource, maxLength, disableUppercase }: LookupEditProps) {\r\n const dispatch = useAppDispatch();\r\n\r\n const fetchState = useFetchLookupItems(\r\n (value ?? '').toString(),\r\n lookupDataSource.compareCallback,\r\n lookupDataSource.fetchCallback);\r\n const lookupItemsState = useAppSelector(lookupDataSource.selector ? lookupDataSource.selector : () => null) ?? [];\r\n const lookupDataItems = lookupDataSource.fetchCallback ? fetchState.lookupItems : lookupItemsState;\r\n const requestState = lookupDataSource.fetchCallback ? fetchState.requestState : RequestState.success;\r\n\r\n const [lookupSelectedIndex, setLookupSelectedIndex] = React.useState(0);\r\n const scrollableLookupContainerRef = React.useRef(null);\r\n const activeLookupItemRef = React.useRef(null);\r\n\r\n const debounceDisabled =\r\n lookupDataSource.fetchCallback == null ||\r\n isRequestSuccess(fetchState.requestState) ||\r\n isRequesting(fetchState.requestState);\r\n\r\n const isLookupVisible =\r\n (lookupDataItems.length > 0 || isRequesting(requestState)) &&\r\n (value ?? '').toString().length > 0\r\n\r\n React.useEffect(() => {\r\n dispatch(gridActions.blockInput(isLookupVisible));\r\n return () => {\r\n dispatch(gridActions.blockInput(false));\r\n }\r\n }, [isLookupVisible, dispatch]);\r\n\r\n React.useLayoutEffect(() => {\r\n if (\r\n activeLookupItemRef.current &&\r\n scrollableLookupContainerRef.current &&\r\n lookupDataItems?.length) {\r\n const container = scrollableLookupContainerRef.current.getBoundingClientRect();\r\n const item = activeLookupItemRef.current.getBoundingClientRect();\r\n\r\n if (item.top < container.top || item.bottom > container.bottom) {\r\n activeLookupItemRef.current.scrollIntoView(false);\r\n }\r\n }\r\n // eslint-disable-next-line\r\n }, [lookupSelectedIndex]);\r\n\r\n React.useEffect(() => {\r\n return () => {\r\n fetchState.resetCallback();\r\n }\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n const handleChange = (value: string) => {\r\n setLookupSelectedIndex(0);\r\n dispatch(gridActions.editing(value));\r\n }\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent) => {\r\n if (lookupDataItems.length) {\r\n if (e.keyCode === 13) { // enter\r\n lookupDataSource.onLookupItemSelected(lookupDataItems[lookupSelectedIndex])\r\n } else if (e.keyCode === 38 && lookupSelectedIndex > 0) { // move up\r\n setLookupSelectedIndex(lookupSelectedIndex - 1);\r\n } else if (e.keyCode === 40 && lookupSelectedIndex < lookupDataItems.length - 1) { // move down\r\n setLookupSelectedIndex(lookupSelectedIndex + 1);\r\n } else if (e.keyCode === 27) { // esc\r\n setLookupSelectedIndex(0);\r\n fetchState.resetCallback();\r\n dispatch(gridActions.cancelEdit());\r\n }\r\n }\r\n }\r\n\r\n const handleFormKeyDown = (e: React.KeyboardEvent) => {\r\n if (e.keyCode === 13 || e.which === 13) {\r\n e.preventDefault();\r\n return false;\r\n }\r\n }\r\n\r\n const renderLookup = () => {\r\n if (!isLookupVisible) return null;\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n lookupDataItems.map((item, index) =>\r\n activeLookupItemRef.current = index === lookupSelectedIndex ? node : activeLookupItemRef.current}\r\n className={cn('lookup-data-item', { active: index === lookupSelectedIndex })}\r\n onClick={() => lookupDataSource.onLookupItemSelected(item)}\r\n >\r\n {item.text} {Boolean(item.description) && {item.description} }\r\n \r\n )\r\n }\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {renderLookup()}\r\n >\r\n\r\n );\r\n}\r\n\r\ninterface LookupInputProps extends React.InputHTMLAttributes {\r\n onDebouncedChange?: (debouncedValue: string) => void;\r\n disableUppercase?: boolean;\r\n}\r\n\r\nfunction LookupInput({ value, onDebouncedChange, onChange, disableUppercase, ...rest }: LookupInputProps) {\r\n const [_value, setValue] = React.useState(value);\r\n const debouncedValue = useDebounce(_value, 500);\r\n\r\n React.useEffect(() => {\r\n onDebouncedChange?.((debouncedValue ?? '').toString());\r\n // eslint-disable-next-line\r\n }, [debouncedValue]);\r\n\r\n const handleChange = (e: React.ChangeEvent) => {\r\n setValue(e.target.value);\r\n onChange?.(e);\r\n }\r\n\r\n const stringValue = (_value ?? '').toString();\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction useFetchLookupItems(\r\n searchTerm: string,\r\n compareLookupItemClallback?: (searchTerm: string, item: LookupDataItem) => boolean,\r\n fetchLookupItemsCallback?: (searchTerm: string, requestCancelationSignal: AbortSignal) => LookupDataItem[]\r\n) {\r\n const [requestState, setRequestState] = React.useState(RequestState.none);\r\n const cachedItems = React.useRef([]);\r\n const [lookupItems, setLookupItems] = React.useState([]);\r\n\r\n const searchTermRef = React.useRef('');\r\n\r\n const resetCallback = () => requestCancelationController.abort(searchTermRef.current)\r\n\r\n React.useEffect(() => {\r\n const requestLookupItems = async () => {\r\n setRequestState(RequestState.request);\r\n cachedItems.current = [];\r\n\r\n searchTermRef.current = searchTerm;\r\n const abortSignal = requestCancelationController.signal(searchTerm);\r\n\r\n try {\r\n const items = await fetchLookupItemsCallback!(searchTerm, abortSignal);\r\n cachedItems.current = items;\r\n setRequestState(RequestState.success);\r\n setLookupItems(items);\r\n } catch (e) {\r\n if (!isRequestCancelationError(e)) {\r\n searchTermRef.current = '';\r\n cachedItems.current = [];\r\n setLookupItems([]);\r\n setRequestState(RequestState.failure);\r\n logger.exception(e, 'Failed to feetch grid lookup data items');\r\n }\r\n } finally {\r\n requestCancelationController.reset(searchTerm);\r\n }\r\n }\r\n\r\n const searchLookupItemsFromCache = () => {\r\n const searchTermLowerCase = searchTerm.toLowerCase().trim();\r\n const filtered = cachedItems.current.filter(i =>\r\n compareLookupItemClallback?.(searchTermLowerCase, i) ??\r\n i.text.toLowerCase().startsWith(searchTermLowerCase)\r\n );\r\n setLookupItems(filtered);\r\n }\r\n\r\n const abortRequest = () => {\r\n requestCancelationController.abort(searchTermRef.current);\r\n searchTermRef.current = '';\r\n setRequestState(RequestState.none);\r\n }\r\n\r\n if (isRequesting(requestState) && searchTerm !== searchTermRef.current) {\r\n abortRequest();\r\n }\r\n\r\n const canUseCache =\r\n searchTermRef.current !== '' &&\r\n searchTerm.toLowerCase().startsWith(searchTermRef.current.toLowerCase());\r\n\r\n if (canUseCache) {\r\n searchLookupItemsFromCache();\r\n } else if (fetchLookupItemsCallback && searchTerm.length >= searchTermMinLength) {\r\n requestLookupItems();\r\n }\r\n // eslint-disable-next-line\r\n }, [searchTerm, requestState]);\r\n\r\n return { requestState, lookupItems, resetCallback };\r\n}\r\n","import cn from 'classnames';\r\nimport { useSelector } from 'react-redux';\r\nimport { gridActions, notificationActions } from '../../../actions';\r\nimport { FileIcon, FormError, ProgressCircle } from '../../controls';\r\nimport { useUploadDocument } from '../../documents/useUploadDocument';\r\nimport { DocumentStoreType } from '../../../types/document/Document';\r\nimport { AppState } from '../../../types/state/AppState';\r\nimport { RequestState } from '../../../constants/request-state';\r\nimport { GridDataItem, GridItemUploadedFile, GridUploadStatus } from '../../../types/state/GridState';\r\nimport { errorMessages } from '../../../constants';\r\nimport { useAppDispatch } from '../../../effects/useAppDispatch';\r\n\r\ntype Props = {\r\n hasFocus?: boolean;\r\n editing?: boolean;\r\n value?: GridItemUploadedFile;\r\n error?: string;\r\n showHelp?: boolean;\r\n helpPopoverTitle?: string;\r\n showPlaceholder?: boolean;\r\n placeholder?: string;\r\n readonly?: boolean;\r\n maxSize: number;\r\n acceptedTypes: string[];\r\n columnName: string;\r\n documentStoreType: DocumentStoreType;\r\n onClick: (columnsName: string, hasFocus: boolean) => void;\r\n dataItem: GridDataItem;\r\n readonlyCallback?: (dataItem: GridDataItem) => boolean;\r\n};\r\n\r\nexport const FileUpload = ({\r\n columnName,\r\n documentStoreType,\r\n value,\r\n editing,\r\n error,\r\n hasFocus,\r\n maxSize,\r\n acceptedTypes,\r\n readonly,\r\n dataItem,\r\n readonlyCallback = () => false,\r\n onClick,\r\n}: Props) => {\r\n const dispatch = useAppDispatch();\r\n const { requestStateSaveDocument, onUploadDocument, progress } = useUploadDocument(documentStoreType);\r\n const position = useSelector((state: AppState) => state.grid.position);\r\n\r\n const classNames = cn({\r\n [`cell-${columnName}`]: true,\r\n 'has-focus': hasFocus,\r\n readonly,\r\n });\r\n\r\n const handleClick = (e: React.MouseEvent) => {\r\n if (!editing) {\r\n onClick(columnName, Boolean(hasFocus));\r\n }\r\n };\r\n\r\n async function uploadFile(file: File) {\r\n dispatch(gridActions.setUploadState(GridUploadStatus.UploadingSingle));\r\n dispatch(gridActions.addFileToDataItem({ name: file.name }, position));\r\n\r\n const newDocument = await onUploadDocument(file);\r\n\r\n dispatch(gridActions.setUploadState(GridUploadStatus.None));\r\n dispatch(gridActions.addFileToDataItem({ ...newDocument }, position));\r\n dispatch(gridActions.blockInput(false));\r\n }\r\n\r\n const deleteFile = (e: React.MouseEvent) => {\r\n e.stopPropagation();\r\n dispatch(gridActions.addFileToDataItem(null, position));\r\n };\r\n\r\n const handleLoadFile = (e: React.ChangeEvent) => {\r\n const file = e.target.files![0];\r\n\r\n if (!file) {\r\n return;\r\n }\r\n\r\n const splitFile = file.name.split('.');\r\n const fileExtension = splitFile[splitFile.length - 1];\r\n\r\n if (file.size > maxSize * 1024 * 1024) {\r\n dispatch(\r\n notificationActions.notificationAddErrorMessage(\r\n `The file you are trying to upload is more than ${maxSize}mb. Please choose another one.`,\r\n 'The file is too big',\r\n ),\r\n );\r\n\r\n return;\r\n }\r\n\r\n if (!acceptedTypes.some(ext => ext.toLowerCase() === fileExtension.toLowerCase())) {\r\n dispatch(\r\n notificationActions.notificationAddErrorMessage(\r\n errorMessages.documentInvalidFileTypeText(\r\n fileExtension,\r\n acceptedTypes.map(ext => `.${ext}`).join(','),\r\n ),\r\n errorMessages.documentInvalidFileTypeTitle,\r\n ),\r\n );\r\n\r\n return;\r\n }\r\n\r\n uploadFile(file);\r\n };\r\n\r\n const renderFileInput = () =>\r\n !readonlyCallback(dataItem) && (\r\n \r\n \r\n Add File \r\n \r\n \r\n );\r\n\r\n const renderFileControls = (fileName: string) => (\r\n \r\n \r\n {fileName} \r\n {requestStateSaveDocument === RequestState.request ? (\r\n \r\n ) : (\r\n hasFocus && (\r\n \r\n \r\n \r\n )\r\n )}\r\n \r\n );\r\n\r\n return (\r\n \r\n \r\n {!value?.name ? renderFileInput() : renderFileControls(value.name)}\r\n {Boolean(hasFocus) && }\r\n
\r\n \r\n );\r\n};\r\n","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport cn from 'classnames';\r\nimport { contactsSaveActions, gridActions } from '../../actions';\r\nimport { Color, DateCell, Lookup, PxTalk, Select, Text, Textarea } from './Cells';\r\nimport { Lookup2 } from './Cells/Lookup2';\r\nimport { gridColumns as columns } from '../../constants';\r\nimport { AddRowButton } from './AddRowButton';\r\nimport { OnHoverTooltip } from '../common';\r\nimport IconSVG from '../../styles/svg-icons';\r\nimport { FileUpload } from './Cells/FileUpload';\r\nimport { DocumentStoreType } from '../../types/document/Document';\r\n\r\nclass Row extends Component {\r\n shouldComponentUpdate = nextProps =>\r\n this.props.index !== nextProps.index ||\r\n !!this.props.isFirstDraft !== !!nextProps.isFirstDraft ||\r\n (this.props.position && this.props.position.index === this.props.index) ||\r\n (nextProps.position && nextProps.position.index === nextProps.index) ||\r\n this.props.dataItem !== nextProps.dataItem ||\r\n this.props.selection.some(s => s === this.props.index) ||\r\n Boolean(this.showHelp) !== Boolean(nextProps.showHelp) ||\r\n this.props.headers?.length !== nextProps.headers?.length ||\r\n nextProps.selection.some(s => s === nextProps.index);\r\n\r\n render = () => {\r\n const {\r\n dataItem,\r\n position,\r\n index,\r\n selection,\r\n showHelp,\r\n headers,\r\n addRowVisible = true,\r\n moveRowVisible = true,\r\n deleteRowVisible = true,\r\n readonlyTooltip,\r\n deleteDisabled,\r\n dispatch\r\n } = this.props;\r\n\r\n let rowError = false;\r\n\r\n const cells = headers.map((c, columnIndex) => {\r\n const hasFocus =\r\n position &&\r\n position.index === index &&\r\n position.columnName === c.name;\r\n\r\n const editing = hasFocus && position.editing;\r\n\r\n let value = dataItem[c.name];\r\n let error = dataItem.errors && dataItem.errors.find(e => e.columnName === c.name);\r\n\r\n if (editing) {\r\n value = position.editingValue;\r\n error = { message: position.editingError };\r\n }\r\n\r\n const cellError = error && error.message;\r\n if (cellError) {\r\n rowError = true;\r\n }\r\n\r\n const helpVisible = showHelp && columnIndex === 0 && index === 0 && dataItem.draft;\r\n\r\n return this.createCell(\r\n c,\r\n hasFocus,\r\n editing,\r\n value,\r\n cellError,\r\n helpVisible,\r\n helpVisible,\r\n c.readonly || dataItem.readonly,\r\n dataItem\r\n );\r\n });\r\n\r\n const selected = cn({\r\n selected: selection.some(s => s === index),\r\n readonly: dataItem.readonly\r\n });\r\n\r\n const highlight = cn('cell-item', {\r\n highlight: position && position.index === index\r\n });\r\n\r\n const newLabel = (dataItem.isNew && new );\r\n const errorLabel = (rowError && );\r\n const updateLabel = (dataItem.isUpdate && upd );\r\n const flag = (dataItem.isFlagged && );\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {deleteRowVisible &&\r\n
\r\n \r\n \r\n }\r\n {errorLabel || flag || newLabel || updateLabel}\r\n {\r\n moveRowVisible &&\r\n
\r\n
\r\n dispatch(gridActions.moveRowUp(index))}\r\n className=\"btn-link btn-action-up\"\r\n >\r\n \r\n \r\n
\r\n
\r\n dispatch(gridActions.moveRowDown(index))}\r\n className=\"btn-link btn-action-down\"\r\n >\r\n \r\n \r\n
\r\n
\r\n }\r\n {\r\n addRowVisible &&\r\n
\r\n
\r\n \r\n dispatch(gridActions.addRow(index))}\r\n className=\"btn-link btn-action-add\"\r\n >\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n }\r\n
\r\n \r\n \r\n \r\n {index + 1}\r\n
\r\n \r\n {cells}\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n createCell = (\r\n column,\r\n hasFocus,\r\n editing,\r\n value,\r\n error,\r\n showHelp,\r\n showPlaceholder,\r\n readonly,\r\n dataItem\r\n ) => {\r\n switch (column.name) {\r\n case columns.pxTalks.name:\r\n return (\r\n \r\n )\r\n case columns.color.name:\r\n return (\r\n \r\n )\r\n case columns.company.name:\r\n return (\r\n ({\r\n company,\r\n text: company.name\r\n }))}\r\n onClick={this.handleCellClick}\r\n onLookupItemSelected={this.handleComapnyLookupItemSelected}\r\n onSearchTermChange={this.handleCompanyLookupSearchTermChange}\r\n onLookupReset={this.handleCompanyLookupReset}\r\n helpPopoverTitle={this.props.helpPopoverTitle}\r\n disableUppercase={column.disableUppercase}\r\n />\r\n )\r\n default:\r\n return this.createCellByType(\r\n column,\r\n value,\r\n hasFocus,\r\n editing,\r\n error,\r\n showHelp,\r\n showPlaceholder,\r\n readonly,\r\n dataItem\r\n );\r\n }\r\n }\r\n\r\n createCellByType = (\r\n column,\r\n value,\r\n hasFocus,\r\n editing,\r\n error,\r\n showHelp,\r\n showPlaceholder,\r\n readonly,\r\n dataItem\r\n ) => {\r\n const key = column.name + column.title;\r\n\r\n switch (column.type) {\r\n case 'longText':\r\n return (\r\n \r\n );\r\n case 'select':\r\n return (\r\n \r\n );\r\n case 'lookup':\r\n return (\r\n \r\n );\r\n case 'file':\r\n return (\r\n \r\n );\r\n case 'date':\r\n return (\r\n \r\n );\r\n default:\r\n return (\r\n \r\n );\r\n }\r\n }\r\n\r\n handleComapnyLookupItemSelected = (companyLookupItem) =>\r\n this.props.dispatch(contactsSaveActions.selectCompany(companyLookupItem.company));\r\n\r\n handleCompanyLookupSearchTermChange = searchTerm =>\r\n this.props.dispatch(contactsSaveActions.filterCompanies(searchTerm));\r\n\r\n handleCompanyLookupReset = () =>\r\n this.props.dispatch(contactsSaveActions.resetCompaniesLookup());\r\n\r\n handleRowDelete = dataItem => {\r\n const { index, onRowDeleted, dispatch } = this.props;\r\n\r\n dispatch(gridActions.deleteRow(index));\r\n\r\n if (onRowDeleted && !dataItem.draft) {\r\n onRowDeleted(dataItem);\r\n }\r\n }\r\n\r\n handleCellClick = (columnName, hasFocus) => {\r\n if (hasFocus) {\r\n this.props.dispatch(gridActions.edit());\r\n } else {\r\n this.props.dispatch(gridActions.setFocus(this.props.index, columnName))\r\n }\r\n }\r\n\r\n handleSelectRow = e =>\r\n this.props.dispatch(gridActions.selectRow(this.props.index, e.ctrlKey, e.shiftKey));\r\n}\r\n\r\nconst mapStateToProps = ({ grid, securities, contactsSave }) => ({\r\n companiesLookup: contactsSave.companiesLookup,\r\n selection: grid.selection,\r\n position: grid.position,\r\n showHelp: grid.showHelp,\r\n headers: grid.headers,\r\n});\r\n\r\nconst connectedRow = connect(mapStateToProps)(Row);\r\nexport { connectedRow as Row };\r\n","import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport cn from 'classnames';\r\nimport { Header } from './Header';\r\nimport { Row } from './Row';\r\nimport { gridActions as actions } from '../../actions';\r\nimport { constants } from '../../constants';\r\nimport { Preloader } from '../common';\r\nimport IconSVG from '../../styles/svg-icons';\r\nimport { SelectFile } from './SelectFile';\r\nimport { DragFileZone } from '../common/DragFileZone';\r\nimport { AppState } from '../../types/state/AppState';\r\nimport { GridDataItem, GridUploadStatus } from '../../types/state/GridState';\r\nimport { useAppDispatch } from '../../effects/useAppDispatch';\r\n\r\ninterface Props {\r\n dataUploadDisabled?: boolean;\r\n onDataItemsPaste?: (clipboardText: string) => void;\r\n onDataItemsUpload?: (file: File) => void;\r\n deleteDisabled?: boolean;\r\n markOptionalFields?: boolean;\r\n onRowDeleted?: () => void;\r\n readonlyTooltip?: string;\r\n helpPopoverTitle?: string;\r\n renderFooter?: (dataItem: GridDataItem) => React.ReactNode;\r\n addRowVisible?: boolean;\r\n moveRowVisible?: boolean;\r\n deleteRowVisible?: boolean;\r\n onFileSelected?: (file: File) => void;\r\n dataItems?: GridDataItem[];\r\n}\r\n\r\nexport const Grid = (\r\n {\r\n dataUploadDisabled = false,\r\n onDataItemsPaste,\r\n onDataItemsUpload,\r\n deleteDisabled = false,\r\n markOptionalFields = false,\r\n onRowDeleted = () => false,\r\n readonlyTooltip,\r\n helpPopoverTitle = '',\r\n renderFooter,\r\n addRowVisible = true,\r\n moveRowVisible = true,\r\n deleteRowVisible = true,\r\n onFileSelected = () => false,\r\n ...rest\r\n }: Props) => {\r\n const dispatch = useAppDispatch();\r\n\r\n const gridRef = useRef(null);\r\n const [dragEnter, setDragEnter] = useState(false);\r\n\r\n const blockInput = useSelector((state: AppState) => state.grid.inputBlocked)\r\n const storeDataItems = useSelector((state: AppState) => state.grid.dataItems)\r\n const dataItems = rest.dataItems || storeDataItems || []\r\n const upload = useSelector((state: AppState) => state.grid.upload || {})\r\n const isDataProcessing = useSelector((state: AppState) => state.grid.isDataProcessing)\r\n const rowsLimit = useSelector((state: AppState) => state.grid.rowsLimit)\r\n\r\n const isNestedTarget = (target: EventTarget | null ) => gridRef.current && target && gridRef.current.contains(target as Node);\r\n const isDatePickerTarget = (target: EventTarget | null) => {\r\n if (!target) {\r\n return false;\r\n }\r\n\r\n const tooltip = document.querySelector('.grid-date-cell-tooltip');\r\n\r\n return tooltip && tooltip.contains(target as Node);\r\n }\r\n\r\n const handleOnPaste = useCallback((e: ClipboardEvent) => {\r\n if (blockInput || !isNestedTarget(e && e.target)) {\r\n return;\r\n }\r\n //@ts-ignore\r\n const clipboardData = e.clipboardData || window.clipboardData;\r\n const clipboardText = clipboardData.getData('text')?.replace(/\\r\\n$/, '');\r\n\r\n if (clipboardText.indexOf(\"\\t\") > -1 || clipboardText.indexOf(\"\\n\") > -1) {\r\n dispatch(actions.cancelEdit());\r\n onDataItemsPaste && onDataItemsPaste(clipboardText);\r\n }// eslint-disable-next-line\r\n }, [blockInput, dispatch])\r\n\r\n const handleKeyDown = useCallback(async (e: KeyboardEvent) => {\r\n if (blockInput || !isNestedTarget(e.target)) return;\r\n\r\n dispatch(actions.processKeyCode(e.keyCode, e.ctrlKey, e.metaKey, e.shiftKey, deleteDisabled));\r\n\r\n if (e.keyCode === 9) e.preventDefault();\r\n }, [blockInput, dispatch, deleteDisabled])\r\n\r\n const handleClickOutside = useCallback((e: MouseEvent) => {\r\n if (!isNestedTarget(e.target) && !(isDatePickerTarget(e.target))) {\r\n dispatch(actions.applyOrCancelEdit());\r\n }\r\n }, [dispatch])\r\n\r\n useEffect(() => {\r\n if (!dataUploadDisabled) {\r\n document.addEventListener('paste', handleOnPaste);\r\n }\r\n document.addEventListener('keydown', handleKeyDown);\r\n document.addEventListener('mousedown', handleClickOutside);\r\n\r\n return () => {\r\n document.removeEventListener('paste', handleOnPaste);\r\n document.removeEventListener('keydown', handleKeyDown);\r\n document.removeEventListener('mousedown', handleClickOutside);\r\n }\r\n }, [dataUploadDisabled, handleOnPaste, handleKeyDown, handleClickOutside]);\r\n\r\n const handleOnFile = (file: File) => {\r\n setDragEnter(false);\r\n if (!blockInput && file && onDataItemsUpload) onDataItemsUpload(file);\r\n }\r\n\r\n const rows = useMemo(() => dataItems.map((item: GridDataItem[], index: number) =>\r\n
), [dataItems, readonlyTooltip, helpPopoverTitle, deleteDisabled, addRowVisible, moveRowVisible]);\r\n\r\n if (!dataItems) {\r\n return null;\r\n }\r\n\r\n const highlightClasses = cn({\r\n 'block-prompt-upload': true,\r\n 'highlight': upload.status === GridUploadStatus.Uploading\r\n });\r\n\r\n const renderUploadingMessage = () => {\r\n if (dragEnter) return 'Your records will now be added to this table'\r\n if (upload.status === GridUploadStatus.None) {\r\n return <>Drag & Drop file here or >\r\n }\r\n if (upload.status === GridUploadStatus.Uploading) {\r\n return (\r\n \r\n \r\n Uploading \"{upload.filename}\"\r\n \r\n \r\n )\r\n }\r\n }\r\n\r\n\r\n return (\r\n setDragEnter(true)}\r\n onDragLeave={dataUploadDisabled ? undefined : () => setDragEnter(false)}\r\n onFile={dataUploadDisabled ? undefined : handleOnFile}\r\n >\r\n \r\n
\r\n \r\n {rows} \r\n {typeof renderFooter === 'function' && {renderFooter(dataItems)} }\r\n
\r\n
\r\n {\r\n !dataUploadDisabled &&\r\n <>\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n {renderUploadingMessage()}\r\n
\r\n {\r\n upload.status === GridUploadStatus.None && !dragEnter &&\r\n
\r\n Format: xlsx, csv (max 10MB or {rowsLimit || constants.gridRowsLimit} records)\r\n \r\n }\r\n
\r\n
\r\n
\r\n >\r\n }\r\n \r\n );\r\n}\r\n"],"names":["FilterButton","_ref","_ref$className","className","_ref$caption","caption","children","_ref$show","show","_ref$disabled","disabled","onClick","buttonCaption","_jsx","FeatureButton","defaultProps","displayAmount","renderHighlightOrPlaceholder","searchTerm","value","arguments","length","undefined","Highlighter","searchWords","textToHighlight","constants","emptyPlaceholder","TransactionsSearchInput","_ref$singleSearch","singleSearch","_ref$placeholder","placeholder","onSearch","maxLength","pipelineType","useContext","PipelineContext","actions","createSearchTransactionActions","pipelineActions","createAmrPipelineActions","refInput","useRef","refScrollableContainer","refActiveItem","dispatch","useAppDispatch","_useSelector","useSelector","issuanceMonitorSearchTransactionsSelector","_useSelector$searchTe","_useSelector$searchTe2","searchTermItems","_useSelector$markerPo","markerPosition","_useSelector$lookup","lookup","isSearching","classesLookup","hasMoreDeals","hasMoreClasses","_useState","useState","_useState2","_slicedToArray","index","setIndex","_useState3","_useState4","inputFocus","setInputFocus","_useState5","_useState6","classOffset","setClassOffset","_useState7","_useState8","dealOffset","setDealOffset","deals","filter","d","isDeal","groupedDeals","slice","classes","reduce","acc","dealItem","classesWithIndicators","classesAccum","c","withSearchedClassIndicator","concat","_toConsumableArray","_objectSpread","dealLegalName","legalName","dealReferenceName","referenceName","groupedClasses","groupedDealsLength","groupedClassesLength","loadedDealsLeftAmount","loadedClassesLeftAmount","searchItemsLength","useEffect","current","container","getBoundingClientRect","item","top","bottom","scrollIntoView","setExpanded","handleClearAll","reset","focus","handleLookupItemClick","label","classNames","applyLookupItem","handleRemoveChip","i","removeSearchItem","renderShowMore","items","hasMoreItems","showMore","colSpan","_jsxs","Preloader","inProgress","small","IconSVG","name","width","height","ClickOutside","e","stopPropagation","resetSearchLookup","ChipList","list","map","selectionIndex","onRemove","ref","type","onChange","searchTermChange","target","onKeyDown","keyCode","removeCurrentItem","currentTarget","selectionStart","preventDefault","moveForward","moveBack","selectedIndex","idDealGroup","classItem","ticker144A","classList","onFocus","searchTermAcceptedLength","_Fragment","status","ticker","transactionStatus","node","active","TransactionStatus","Active","Priced","OnHold","StatusLabel","transactionStatusTitles","renderLookupDeal","loadDealsLookup","prevVal","tickerRegS","tickerAccdInvCertif","cusip144A","cusipRegS","cusipAccdInvCertif","isin144A","isinRegS","isinAccdInvCertif","classesData","rule144a","regS","accdInvCertif","rowIndex","_ref2","classIndex","renderLookupClass","loadClassesLookup","EmptyPlaceholder","textView","useManagersFilterData","filterType","filterKey","useDispatch","filterActions","createFilterActions","_useCollateralManager","useCollateralManagers","managersRequestState","requestState","managers","isRequestSuccess","isRequestFailed","managersOptions","sort","a","b","localeCompare","cm","text","selected","visible","storeFilterData","success","filterName","data","DeleteAllButton","hasDataItems","s","grid","dataItems","some","draft","gridActions","clear","MultiSelectField","onSelect","selectedValues","_ref$markRequired","markRequired","errorMessage","onResetAll","onSelectAll","horizontalOrientation","generateSelectedText","_ref$resetButtonText","resetButtonText","MultiSelect","showResetButton","showSelectAllButton","cn","required","sourceItems","onItemSelect","showAddButton","FormError","message","resetOption","SelectSearchField","options","withResetOption","props","_objectWithoutProperties","_excluded","_useField","useField","_useField2","field","meta","formik","useFormikContext","optionList","SelectSearch","touched","error","setFieldValue","useTrusteeFilterData","_useTrustee","useTrustee","trusteeRequestState","trusteeOptions","t","CurrencyInputField","loading","defaultValue","isValueChanged","setValue","FormFieldLabel","MaskedInput","String","onBlur","mask","createNumberMask","prefix","suffix","allowDecimal","includeThousandsSeparator","newValue","moneyUtils","parse","FormControlLoader","BwicFilters","isFilterCollapsed","setFiltersCollapseStatus","visibleFilters","lastAppliedFilter","filterModified","selectedFilterReferenceName","_props$withAlerts","withAlerts","renderFilterAlertsPopup","filterAlertPopupTooltips","onFilterCreate","onFilterUpdate","applyDisabled","isLoading","key","f","FilterType","Range","fromRange","from","toRange","to","numericUtils","isNumber","Number","filterUtils","isFilterChanged","isApplyDisabled","bwicFilterType","canUseSavedFilters","saveFilterBlockerFeature","user","hasFeatures","_usePageConfig","usePageConfig","pageConfigType","config","saveAlerts","savedFilters","appliedRef","serializedFilter","getSerializedFilter","filterMatch","find","isEqual","selectFilterFromConfig","useSavedFilterAutoSelect","saveFilterVisible","filters","filterAlertPopupDescription","textLabels","savedFiltersBwicMonitor","Filters","filtersCollapseStatus","alertOptions","defaultAlertOption","alertOptionInfo","renderCustomAlertOptions","onFilterSave","form","newFilter","uuid","default","makeDefault","alertOption","receiveEmailNotification","addFilter","existingFilter","updatedFilter","updateFilter","FiltersManagement","onMakeDefault","defaultFlagChange","onResetDefault","onSaveFilterAlert","isDefault","updatedFilters","onDeleteFilter","deleteFilter","filterChanged","onApply","blockerFeature","_ref$required","_ref$list","refList","refChildren","refListLength","offset","offsetWidth","scrollLeft","clientWidth","scrollWidth","renderedList","_loop","push","FilterChip","renderChips","DeleteRowsWithErrorButton","onDelete","hasErrors","useAppSelector","_s$grid$headers","headers","h","headerError","_i$errors","errors","isFileUploading","upload","GridUploadStatus","Uploading","isDataProcessing","deleteDataItemsWithErrors","onReset","_ref$allowCollapsing","allowCollapsing","_ref$hiddenFilters","hiddenFilters","onVisibilityChange","_ref$withBlockedSearc","withBlockedSearchAndFilter","_ref$isUpdating","isUpdating","filterConfigShowEmailNotification","saveFilterBlockerText","advancedFiltersBlockerFeature","advancedFiltersBlockerText","_ref$saveFilterVisibl","filterContainer","filtersRef","isHideFilterButtonVisible","setIsHideFilterButtonVisible","showFiltersPopup","setShowFiltersPopup","lastAddedFilter","setLastAddedFilter","previousCollapsedState","usePrevious","additionalFilters","moreFilters","arrayUtils","distinct","countOfHiddenFilters","useFilterNextLineHide","shouldShowHideButton","handleFilterVisibilityChange","selectedFilter","checked","groupKey","values","x","forEach","handleApplyFilter","handleClearFilter","handleSaveFilter","mode","FilterSaveMode","Create","Update","renderFilter","_decimals","defaultExpanded","isApplied","Filter","el","Select","FilterSelect","title","withSearch","onClearAll","filterSelectClearAll","filterSelectSelectAll","onChangeItemSelection","v","filterSelectChange","handleFilterSelectOptionsChange","FilterRange","filterRangeClearSelectedOptions","onChangeRange","changeRangeFilter","integerLimit","decimalLimit","decimals","Date","ActionBlocker","feature","requiredFeature","blocked","FilterDateRange","acceptableOptions","filterDateClearSelectedOptions","onSelectedDateChange","option","filterDateSelectOption","onCustomDateChange","filterDateSelectCustomRange","customDateRange","selectedFilterOption","selectedOption","disabledDays","DateWithYearsRange","onYearsRangeChange","filterDateSelectYearsRange","customYearsRange","DateWithYearsAndTimeRange","FilterDateTimeRange","filterDateTimeOptionSelected","filterDateTimeSelectCustomRange","YearsDate","FilterYearsDateRange","Radio","FilterRadio","filterRadioClearOption","filterRadioChange","BooleanRadio","FilterBoolean","renderFilters","_group$2","group","_group$","FilterColor","renderCombined","collapsed","tooltipContent","closeOnSelect","formatTitle","withExpandToggle","FilterClear","isShown","isDisabled","FiltersManagementPopup","showEmailNotificationsOptions","selectedReferenceName","onSave","onClose","FilterSection","_ref$title","FilterSwitch","FilterMultiPicker","_ref$sourceItems","o","jsxTitle","SecuritiesSearchInput","_ref$defaultSearchTer","defaultSearchTerm","_ref$compactView","compactView","location","useLocation","searchInputId","expanded","state","searchSecurities","searchTermItemsState","lookupItems","searchSecuritiesActions","pathname","addSearchItem","handleSearchTermChange","lookupItem","handleClickOutside","id","handleKeyDown","handleSearchClick","trim","isinCusip","renderLookupItem","Form","_React$Component","_this","_classCallCheck","_len","args","Array","_key","_callSuper","componentDidMount","handleSubmit","event","_this$props","onSubmit","onCustomValidate","isValid","checkValidity","activateValidation","render","noValidate","_inherits","_createClass","React","connectedForm","connect","ValidationMessage","_Component","invalidated","shouldComponentUpdate","nextProps","displayErrors","document","querySelector","for","componentDidUpdate","componentWillUnmount","removeEventListener","onError","customValidationResult","setCustomValidity","getMessage","validity","valid","remove","add","setState","setValidityTrackingState","_this$props2","_this$props2$required","requiredMessage","errorMessages","empty","_this$props2$customMe","customMessage","validationMessage","invalidValue","_this$props2$defaultM","defaultMessage","valueMissing","customError","_this$state","addEventListener","Component","connectedValidationMessage","forms","triggerValidation","PasswordStrengthValidator","password","regexp","onValidate","RegExp","test","cssClass","classnames","InputField","_ref$loading","fieldRef","useFocusOnError","submitCount","autoComplete","TextAreaField","Object","assign","_objectDestructuringEmpty","DeleteFlaggedItemsButton","isFlagged","deleteFlaggedDataItems","SelectFile","onFiles","acceptedExtensions","uploadStatus","uploading","fileInput","isMultiple","_fileInput$current","click","multiple","accept","acceptedTemplateExtensions","style","display","_e$target$files","_e$target$files2","files","forwardRef","_ref$text","_ref$selected","_ref$onRemove","refParent","_ref$isShown","_ref$isDisabled","FilterPanel","AddRowButton","OnHoverTooltip","overlay","addRow","HeaderItem","_column$renderTitle","column","position","orderBy","markOptional","_defineProperty","disabledSort","direction","columnName","content","canRemove","renderTitle","call","removeColumn","scope","Header","_this$props$addRowVis","addRowVisible","markOptionalFields","connectedHeader","hasFocus","editing","source","readonly","cssClasses","handleClick","renderSelect","renderValue","_item$title","format","_this$props2$source","itemValue","_this$props3","keepEmptyOption","_this$props3$source","_s$key","_s$key2","_s$title","unshift","autoFocus","handleChange","handleSelectKeyDown","_this$props4","_source$find$key","_source$find","_this$props5","targetValue","_s$key3","toString","applyEdit","connectedSelect","PxTalk","formatUtils","formatPxTalk","ChangePxTalk","saveButtonText","onCancel","handleEditCancel","savePxTalks","gridColumns","pxTalks","blockInput","cancelEdit","connectedPxTalk","Color","formatColor","ChangeColor","handleDelete","saveColor","color","clearCell","changeColorActions","connectedColor","cellEvents","handleCopy","clipboardData","window","setData","this","handlePaste","_clipboardData$getDat","clipboard","getData","replace","indexOf","parsedValue","parseValue","pattern","edit","_this$props$column","handleCloseHelp","hideHelp","HelpPopover","Text","showHelp","showPlaceholder","formatOrDefault","helpPopoverTitle","cellClassName","bind","onCopy","onPaste","guide","select","connectedText","Lookup","lookupSelectedIndex","disableUppercase","prevProps","prevState","lookupDataItems","_activeLookupItem","_scrollableLookupContainer","handleFormKeyDown","which","handleBlur","renderLookup","lookupData","onLookupItemSelected","description","onLookupReset","onSearchTermChange","formattedValue","toUpperCase","_this$props6","_this$props6$lookupDa","connectedLookup","Textarea","TextareaAutosize","minRows","maxRows","connectedTextarea","DateCell","moment","dateFormat","startOf","utcOffset","Tooltip","overlayClassName","placement","TooltipPlacement","BottomLeft","trigger","TooltipTriggerType","Click","hideOnAnyAction","CustomDatePicker","date","toDate","onDayClick","LookupComponent","lookupDataSource","Boolean","LookupEdit","Lookup2","prev","next","_prev$error","_next$error","_useAppSelector","fetchState","compareLookupItemClallback","fetchLookupItemsCallback","_React$useState5","RequestState","none","_React$useState6","setRequestState","cachedItems","_React$useState7","_React$useState8","setLookupItems","searchTermRef","resetCallback","requestCancelationController","abort","requestLookupItems","_ref4","_asyncToGenerator","_regeneratorRuntime","mark","_callee","abortSignal","wrap","_context","request","signal","sent","t0","isRequestCancelationError","failure","logger","exception","finish","stop","apply","searchLookupItemsFromCache","searchTermLowerCase","toLowerCase","filtered","_compareLookupItemCla","startsWith","abortRequest","isRequesting","useFetchLookupItems","compareCallback","fetchCallback","lookupItemsState","selector","_React$useState","_React$useState2","setLookupSelectedIndex","scrollableLookupContainerRef","activeLookupItemRef","debounceDisabled","isLookupVisible","LookupInput","onDebouncedChange","_ref3","rest","_React$useState3","_React$useState4","_value","debouncedValue","useDebounce","stringValue","FileUpload","documentStoreType","maxSize","acceptedTypes","dataItem","_ref$readonlyCallback","readonlyCallback","_useUploadDocument","useUploadDocument","requestStateSaveDocument","onUploadDocument","progress","_uploadFile","file","newDocument","setUploadState","UploadingSingle","addFileToDataItem","None","fileName","deleteFile","handleLoadFile","splitFile","split","fileExtension","size","notificationActions","notificationAddErrorMessage","ext","_x","uploadFile","documentInvalidFileTypeText","join","documentInvalidFileTypeTitle","FileIcon","filename","ProgressCircle","isNew","Row","_this$props$headers","_nextProps$headers","isFirstDraft","selection","_this$props$moveRowVi","moveRowVisible","_this$props$deleteRow","deleteRowVisible","readonlyTooltip","deleteDisabled","rowError","cells","columnIndex","editingValue","editingError","cellError","helpVisible","createCell","highlight","newLabel","errorLabel","updateLabel","isUpdate","flag","handleRowDelete","moveRowUp","moveRowDown","handleSelectRow","columns","handleCellClick","company","companiesLookup","companies","handleComapnyLookupItemSelected","handleCompanyLookupSearchTermChange","handleCompanyLookupReset","createCellByType","selectSourceItemsCallback","DocumentStoreType","Disclosure","companyLookupItem","contactsSaveActions","selectCompany","filterCompanies","resetCompaniesLookup","onRowDeleted","deleteRow","setFocus","selectRow","ctrlKey","shiftKey","connectedRow","securities","contactsSave","Grid","_ref$dataUploadDisabl","dataUploadDisabled","onDataItemsPaste","onDataItemsUpload","_ref$deleteDisabled","_ref$markOptionalFiel","_ref$onRowDeleted","_ref$helpPopoverTitle","renderFooter","_ref$addRowVisible","_ref$moveRowVisible","_ref$deleteRowVisible","_ref$onFileSelected","onFileSelected","gridRef","dragEnter","setDragEnter","inputBlocked","storeDataItems","rowsLimit","isNestedTarget","contains","handleOnPaste","useCallback","clipboardText","abrupt","processKeyCode","metaKey","tooltip","isDatePickerTarget","applyOrCancelEdit","rows","useMemo","highlightClasses","DragFileZone","onDragEnter","onDragLeave","onFile","tabIndex","gridRowsLimit"],"sourceRoot":""}