(refActiveItem.current = index === i ? node : refActiveItem.current)}\r\n className={classNames({ active: index === i })}\r\n onClick={() => handleLookupItemClick(legalName, referenceName)}\r\n >\r\n | \r\n {isStatusVisible(transactionStatus) && }\r\n | \r\n \r\n \r\n {renderHighlightOrPlaceholder(searchTerm, ticker)}\r\n \r\n | \r\n \r\n \r\n {renderHighlightOrPlaceholder(searchTerm, legalName)}\r\n \r\n | \r\n \r\n );\r\n };\r\n\r\n const renderLookupClass = (item: Tranche, i: number) => {\r\n const {\r\n name,\r\n dealLegalName,\r\n dealReferenceName,\r\n ticker144A,\r\n tickerRegS,\r\n tickerAccdInvCertif,\r\n cusip144A,\r\n cusipRegS,\r\n cusipAccdInvCertif,\r\n isin144A,\r\n isinRegS,\r\n isinAccdInvCertif\r\n } = item;\r\n\r\n const classesData =[\r\n { rule144a: ticker144A, regS: tickerRegS, accdInvCertif: tickerAccdInvCertif },\r\n { rule144a: cusip144A, regS: cusipRegS, accdInvCertif: cusipAccdInvCertif },\r\n { rule144a: isin144A, regS: isinRegS, accdInvCertif: isinAccdInvCertif },\r\n ];\r\n\r\n const rowIndex = groupedDealsLength + i;\r\n\r\n return (\r\n \r\n (refActiveItem.current =\r\n index === rowIndex ? node : refActiveItem.current)\r\n }\r\n className={classNames('classes-row', { active: index === rowIndex })}\r\n onClick={() => handleLookupItemClick(ticker144A || dealLegalName, dealReferenceName, [name])}\r\n >\r\n | \r\n {classesData.map(({ rule144a, regS, accdInvCertif }, classIndex) => (\r\n \r\n \r\n \r\n {renderHighlightOrPlaceholder(searchTerm, rule144a)}\r\n \r\n \r\n {renderHighlightOrPlaceholder(searchTerm, regS, \"classes-info-item\")}\r\n {` / `}\r\n {renderHighlightOrPlaceholder(searchTerm, accdInvCertif, \"classes-info-item\")}\r\n \r\n | \r\n ))}\r\n \r\n );\r\n };\r\n\r\n const renderShowMore = (\r\n items: Deal[] | Tranche[],\r\n hasMoreItems: boolean,\r\n showMore: () => void,\r\n colSpan: number\r\n ) => {\r\n if(items.length < displayAmount || (!hasMoreItems && items.length === displayAmount)) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n | \r\n {isSearching && }\r\n {hasMoreItems ? (\r\n \r\n ) : (\r\n You have reached the end of the results\r\n )}\r\n | \r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n {!singleSearch && (\r\n
i.label)}\r\n selectionIndex={markerPosition}\r\n onRemove={handleRemoveChip}\r\n />\r\n )}\r\n setInputFocus(true)}\r\n placeholder={getPlaceholder()}\r\n disabled={disabled}\r\n maxLength={maxLength}\r\n />\r\n {(!!searchTerm || !!searchTermItems.length) && (\r\n \r\n )}\r\n {searchTerm.length > constants.searchTermAcceptedLength && (\r\n \r\n {isSearching && !lookup.length &&
}\r\n {\r\n lookup.length\r\n ?\r\n <>\r\n
\r\n \r\n \r\n | \r\n Deals | \r\n | \r\n
\r\n \r\n \r\n <>\r\n {groupedDeals.map((item, i) =>\r\n renderLookupDeal(item, i)\r\n )}\r\n {renderShowMore(groupedDeals, !!(loadedDealsLeftAmount) || hasMoreDeals, showMoreDeals, 3)}\r\n \r\n \r\n
\r\n {!!groupedClassesLength && (\r\n
\r\n \r\n \r\n | \r\n Classes | \r\n | \r\n | \r\n
\r\n \r\n \r\n <>\r\n {groupedClasses.map((c, i) =>\r\n renderLookupClass(c, i)\r\n )}\r\n {renderShowMore(groupedClasses, !!(loadedClassesLeftAmount), showMoreClasses, 4)}\r\n \r\n \r\n
\r\n )}\r\n \r\n :
\r\n }\r\n
\r\n {title && }\r\n {children}\r\n
\r\n )\r\n}\r\n","import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nexport function FilterSwitch({ selected, disabled = false, caption, onClick }) {\r\n return (\r\n onClick && !disabled && onClick()}\r\n >\r\n {caption}\r\n \r\n )\r\n}\r\n","import React from 'react';\r\nimport { FilterSwitch } from './FilterSwitch';\r\n\r\nexport function FilterMultiPicker({ sourceItems = [], disabled = false, required = true, onChangeItemSelection }) {\r\n const handleItemSelectionChange = item => {\r\n if (!item.selected || !required || sourceItems.filter(i => i.selected).length > 0) {\r\n onChangeItemSelection && onChangeItemSelection(item);\r\n }\r\n };\r\n\r\n const items = sourceItems.map((o, i) =>\r\n handleItemSelectionChange(o)}\r\n />\r\n );\r\n\r\n return {items}
\r\n}\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport cn from 'classnames';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { searchSecuritiesActions } from '../../actions';\r\nimport { ClickOutside } from '../common/ClickOutside';\r\nimport { ChipList } from './ChipList';\r\nimport IconSVG from '../../styles/svg-icons';\r\nimport { useLocation } from 'react-router';\r\nimport { ActionBlocker } from '../access/ActionBlocker';\r\n\r\n\r\nexport function SecuritiesSearchInput(\r\n {\r\n singleSearch = false,\r\n disabled = false,\r\n placeholder = '',\r\n className = '',\r\n defaultSearchTerm = '',\r\n maxLength,\r\n compactView = false,\r\n requiredFeature,\r\n onSearch\r\n }) {\r\n const location = useLocation();\r\n const searchInputId = 'search-input-id';\r\n const refInput = useRef(null);\r\n const refScrollableContainer = useRef(null);\r\n const refActiveItem = useRef(null);\r\n const dispatch = useDispatch();\r\n const [index, setIndex] = useState(0);\r\n const [inputFocus, setInputFocus] = useState(false);\r\n const [expanded, setExpanded] = useState(!compactView);\r\n\r\n const searchTerm = useSelector(state => state.searchSecurities.searchTerm) || '';\r\n const searchTermItemsState = useSelector(state => state.searchSecurities.searchTermItems);\r\n const searchTermItems = searchTermItemsState || [];\r\n const markerPosition = useSelector(state => state.searchSecurities.markerPosition);\r\n const lookupItems = useSelector(state => state.searchSecurities.lookup);\r\n const lookup = lookupItems || [];\r\n\r\n useEffect(() => () => {\r\n dispatch(searchSecuritiesActions.reset());\r\n }, [location.pathname, dispatch])\r\n\r\n useEffect(() => {\r\n if (defaultSearchTerm) {\r\n dispatch(searchSecuritiesActions.addSearchItem(defaultSearchTerm));\r\n }\r\n }, [defaultSearchTerm, dispatch]);\r\n\r\n useEffect(() => {\r\n if (refScrollableContainer.current && refActiveItem.current && lookupItems && lookupItems.length) {\r\n const container = refScrollableContainer.current.getBoundingClientRect();\r\n const item = refActiveItem.current.getBoundingClientRect();\r\n if (item.top < container.top || item.bottom > container.bottom) {\r\n refActiveItem.current.scrollIntoView(false);\r\n }\r\n }\r\n }, [lookupItems, index]);\r\n\r\n useEffect(() => {\r\n if (refInput.current && !disabled && inputFocus) {\r\n refInput.current.focus();\r\n }\r\n }, [disabled, inputFocus]);\r\n\r\n useEffect(() => {\r\n if (compactView && !expanded && searchTermItemsState && searchTermItemsState.length) {\r\n setExpanded(true);\r\n }\r\n }, [compactView, expanded, searchTermItemsState]);\r\n\r\n const getPlaceholder = () => {\r\n if (searchTermItems.length) {\r\n return '';\r\n }\r\n return placeholder ? placeholder : 'Search by ISIN/CUSIP or ticker';\r\n };\r\n\r\n const handleSearchTermChange = e => {\r\n if (disabled) {\r\n return;\r\n }\r\n if (singleSearch && searchTermItems[0]) {\r\n handleClearAll();\r\n }\r\n setIndex(0);\r\n dispatch(searchSecuritiesActions.searchTermChange(e.target.value));\r\n };\r\n\r\n const handleClearAll = () => {\r\n setIndex(0);\r\n dispatch(searchSecuritiesActions.reset());\r\n refInput.current && refInput.current.focus();\r\n onSearch && onSearch();\r\n setInputFocus(true);\r\n };\r\n\r\n const handleLookupItemClick = lookupItem => {\r\n setIndex(0);\r\n refInput.current && refInput.current.focus();\r\n dispatch(searchSecuritiesActions.applyLookupItem(lookupItem));\r\n onSearch && onSearch();\r\n setInputFocus(true);\r\n };\r\n\r\n const handleRemoveChip = i => {\r\n dispatch(searchSecuritiesActions.removeSearchItem(i));\r\n refInput.current && refInput.current.focus();\r\n onSearch && onSearch();\r\n setInputFocus(true);\r\n };\r\n\r\n const handleClickOutside = e => {\r\n e.stopPropagation();\r\n if (lookup.length && refInput.current && e.target.id !== searchInputId) {\r\n setIndex(0);\r\n dispatch(searchSecuritiesActions.resetSearchLookup());\r\n dispatch(searchSecuritiesActions.searchTermChange(''));\r\n setInputFocus(false);\r\n }\r\n };\r\n\r\n const handleKeyDown = e => {\r\n if (e.keyCode === 8) { // backspace\r\n if (markerPosition > 0 && !searchTerm) {\r\n dispatch(searchSecuritiesActions.removeCurrentItem());\r\n onSearch && onSearch();\r\n } else if (e.currentTarget.selectionStart === 0 && !searchTerm) {\r\n handleRemoveChip(searchTermItems.length - 1);\r\n }\r\n } else if (!searchTerm && e.keyCode === 37 && e.currentTarget.selectionStart === 0) { // left arrow\r\n dispatch(searchSecuritiesActions.moveBack());\r\n } else if (!searchTerm && e.keyCode === 39 && markerPosition !== -1) { // right arrow\r\n e.preventDefault();\r\n dispatch(searchSecuritiesActions.moveForward());\r\n }\r\n if (lookup.length) {\r\n if (e.keyCode === 13) { // enter\r\n handleLookupItemClick(lookup[index]);\r\n } else if (e.keyCode === 38) { // move up\r\n e.preventDefault();\r\n if (index > 0) {\r\n setIndex(index - 1);\r\n }\r\n } else if (e.keyCode === 40 && index < lookup.length - 1) { // move down\r\n setIndex(index + 1);\r\n }\r\n }\r\n };\r\n\r\n const handleSearchClick = () => {\r\n setExpanded(!expanded);\r\n }\r\n\r\n const renderLookupItem = (item, i) =>\r\n refActiveItem.current = (index === i ? node : refActiveItem.current)}\r\n className={cn({ active: index === i })}\r\n onClick={() => handleLookupItemClick(item)}\r\n >\r\n {\r\n i === 0\r\n ?\r\n <>\r\n Custom search: | \r\n {item} | \r\n \r\n :\r\n <>\r\n {item.ticker} | \r\n {item.isinCusip} | \r\n \r\n }\r\n ;\r\n\r\n return (\r\n \r\n {blocked =>\r\n setInputFocus(false)}\r\n >\r\n \r\n \r\n
\r\n {\r\n expanded &&\r\n <>\r\n {\r\n !singleSearch &&\r\n \r\n }\r\n setInputFocus(true)}\r\n />\r\n {\r\n (!!searchTerm || !!searchTermItems.length) &&\r\n \r\n }\r\n {\r\n !!lookup.length && !!lookup[0].trim() && !!searchTerm &&\r\n \r\n \r\n
\r\n \r\n {lookup.map((item, i) => renderLookupItem(item, i))}\r\n \r\n
\r\n
\r\n
\r\n
\r\n ({\r\n selected: selectedValues.some((i) => i === s.value),\r\n value: s.value,\r\n text: s.text,\r\n disabled: s.disabled\r\n }))}\r\n placeholder={placeholder}\r\n onItemSelect={onSelect}\r\n showAddButton={false}\r\n onResetAll={onResetAll}\r\n onSelectAll={onSelectAll}\r\n generateSelectedText={generateSelectedText}\r\n resetButtonText={resetButtonText}\r\n />\r\n \r\n
\r\n
{this.state.message}
\r\n : null;\r\n\r\n checkValidity = () => {\r\n const { onCustomValidate, onError } = this.props;\r\n\r\n if (typeof onCustomValidate !== 'undefined') {\r\n const customValidationResult = onCustomValidate(this.target.value);\r\n if (typeof customValidationResult.message === 'undefined') {\r\n this.target.setCustomValidity(customValidationResult ? '' : 'false');\r\n } else {\r\n this.target.setCustomValidity(customValidationResult.message);\r\n }\r\n }\r\n\r\n const message = this.getMessage(this.target.validity);\r\n\r\n if (this.target.validity.valid) {\r\n this.target.classList.remove('is-invalid');\r\n } else {\r\n this.target.classList.add('is-invalid');\r\n if(onError && typeof onError === 'function' && this.target){\r\n onError(this.target)\r\n }\r\n }\r\n\r\n if (this.state.message !== message) {\r\n this.setState({ message });\r\n }\r\n\r\n this.setValidityTrackingState();\r\n };\r\n\r\n getMessage = validity => {\r\n if (validity.valid) {\r\n return null;\r\n }\r\n\r\n const {\r\n requiredMessage = errorMessages.empty,\r\n customMessage = this.target.validationMessage === 'false'\r\n ? errorMessages.invalidValue\r\n : this.target.validationMessage,\r\n defaultMessage = errorMessages.invalidValue\r\n } = this.props;\r\n\r\n if (validity.valueMissing) {\r\n return requiredMessage;\r\n } else if (validity.customError) {\r\n return customMessage;\r\n }\r\n\r\n return defaultMessage;\r\n };\r\n\r\n setValidityTrackingState = () => {\r\n const { message, invalidated } = this.state;\r\n\r\n if (message && !invalidated) {\r\n this.target.addEventListener('change', this.checkValidity);\r\n this.target.addEventListener('blur', this.checkValidity);\r\n this.setState({ invalidated: true });\r\n } else if (!message && invalidated) {\r\n this.target.removeEventListener('change', this.checkValidity);\r\n this.target.removeEventListener('blur', this.checkValidity);\r\n this.setState({ invalidated: false });\r\n }\r\n }\r\n}\r\n\r\nconst mapStateToProps = ({ forms }) => ({\r\n displayErrors: forms.displayErrors,\r\n triggerValidation: forms.triggerValidation\r\n});\r\n\r\nconst connectedValidationMessage = connect(mapStateToProps)(ValidationMessage);\r\nexport { connectedValidationMessage as ValidationMessage };\r\n","import React, { Component } from \"react\";\r\nimport { classnames } from \"../../styles/classnames\";\r\n\r\nclass PasswordStrengthValidator extends Component {\r\n state = {\r\n isValid: false\r\n }\r\n\r\n componentDidUpdate = () => {\r\n const { password, regexp, onValidate } = this.props;\r\n\r\n const isValid = new RegExp(regexp).test(password);\r\n\r\n if (this.state.isValid !== isValid) {\r\n this.setState({ isValid });\r\n\r\n onValidate(isValid);\r\n }\r\n }\r\n\r\n render = () => {\r\n const cssClass = classnames({\r\n 'is-validation-passed': this.state.isValid\r\n });\r\n\r\n return {this.props.message}
;\r\n };\r\n}\r\n\r\nexport default PasswordStrengthValidator;\r\n","import React, { useRef } from 'react';\r\nimport classNames from 'classnames';\r\nimport { useField, useFormikContext } from 'formik';\r\nimport { FormControlLoader } from '../common';\r\nimport { useFocusOnError } from '../../effects/useFocusOnError';\r\n\r\nexport function InputField({ label, className = '', markRequired, loading = false, ...props }) {\r\n const fieldRef = useRef(null);\r\n const formik = useFormikContext();\r\n useFocusOnError({ fieldRef, name: props.name });\r\n const [field, meta] = useField(props);\r\n return (\r\n <>\r\n {label && }\r\n \r\n
\r\n {\r\n meta.touched && meta.error && !!formik.submitCount &&\r\n
{meta.error}
\r\n }\r\n
\r\n \r\n
\r\n {\r\n meta.touched && meta.error &&\r\n
{meta.error}
\r\n }\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 \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 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 => );\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 );\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
\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 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 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 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 {!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 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 {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
\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