{"version":3,"file":"VeilederStegComponent-BlIRIYKZ.js","sources":["../../../Features/Shared/Scripts/Store/StegVisning/Actions.ts","../../../Features/Shared/Scripts/Components/VeilederStegComponent.tsx"],"sourcesContent":["import { SET_COLLAPSED, StegVisning, SetCollapseAction } from './Types';\r\n\r\nexport function setCollapsed(stegVisning: StegVisning): SetCollapseAction {\r\n    return {\r\n        type: SET_COLLAPSED,\r\n        payload: stegVisning,\r\n    };\r\n}\r\n","import React from 'react';\r\nimport { AppState } from '../Store/Types';\r\nimport { connect } from 'react-redux';\r\nimport { StegVisning } from '../Store/StegVisning/Types';\r\nimport { setCollapsed } from '../Store/StegVisning/Actions';\r\n\r\nexport interface VeilederStegBaseProps {\r\n    sporsmalId: string;\r\n    tittel: JSX.Element | null;\r\n    forklaring: JSX.Element | null;\r\n    classModifier?: string;\r\n}\r\n\r\nexport interface VeilederStegDefaultProps {\r\n    neverCollapse?: boolean;\r\n    customBottomRow?: JSX.Element;\r\n}\r\n\r\ntype VeilederStegOwnProps = VeilederStegDefaultProps &\r\n    VeilederStegBaseProps & {\r\n        displayElement: JSX.Element | null;\r\n        inputArea: JSX.Element;\r\n        canCollapse: boolean;\r\n    };\r\n\r\ntype VeilederStegProps = VeilederStegOwnProps & MapStateToProps & MapDispatchToProps;\r\n\r\nclass VeilederStegComponent<T> extends React.PureComponent<VeilederStegProps> {\r\n    static defaultProps: VeilederStegDefaultProps = {\r\n        neverCollapse: false,\r\n        customBottomRow: undefined,\r\n    };\r\n\r\n    parentDivRef = React.createRef<HTMLDivElement>();\r\n    headerRowRef = React.createRef<HTMLButtonElement>();\r\n    inputParentDivRef = React.createRef<HTMLDivElement>();\r\n\r\n    constructor(props: VeilederStegProps) {\r\n        super(props);\r\n\r\n        this.handleClick = this.handleClick.bind(this);\r\n        this.handleOnKeyUp = this.handleOnKeyUp.bind(this);\r\n        this.handleDocumentOnFocus = this.handleDocumentOnFocus.bind(this);\r\n    }\r\n\r\n    private handleDocumentOnFocus = (ev: FocusEvent): void => {\r\n        const { canCollapse, stegState, stegVisningSetCollapsed, neverCollapse } = this.props;\r\n\r\n        const targetElement = ev.target as Element;\r\n        const parentDiv = this.parentDivRef.current;\r\n\r\n        if (\r\n            neverCollapse !== true &&\r\n            canCollapse &&\r\n            stegState.isCollapsed !== true &&\r\n            parentDiv !== null &&\r\n            !parentDiv.contains(targetElement) &&\r\n            parent !== ev.target\r\n        ) {\r\n            stegVisningSetCollapsed({ id: stegState.id, isCollapsed: true });\r\n        }\r\n    };\r\n\r\n    componentDidMount(): void {\r\n        if (this.props.neverCollapse !== true) {\r\n            document.addEventListener('focusin', this.handleDocumentOnFocus, false);\r\n        }\r\n    }\r\n\r\n    componentWillUnmount(): void {\r\n        if (this.props.neverCollapse !== true) {\r\n            document.removeEventListener('focusin', this.handleDocumentOnFocus, false);\r\n        }\r\n    }\r\n\r\n    handleClick = (e: React.SyntheticEvent): void => {\r\n        const { stegState, stegVisningSetCollapsed, canCollapse, neverCollapse } = this.props;\r\n        const canReCollapse = neverCollapse !== true && !stegState.isCollapsed && canCollapse;\r\n        if (canReCollapse) {\r\n            stegVisningSetCollapsed({ id: stegState.id, isCollapsed: true });\r\n        } else if (stegState.isCollapsed) {\r\n            stegVisningSetCollapsed({ id: stegState.id, isCollapsed: false });\r\n        }\r\n    };\r\n\r\n    handleOnKeyUp(e: React.KeyboardEvent<HTMLDivElement>): void {\r\n\r\n        if(e.key != \"Enter\")\r\n            return;\r\n\r\n        const { stegState, stegVisningSetCollapsed } = this.props;\r\n        if (stegState.isCollapsed && e.target !== this.headerRowRef.current) {\r\n            stegVisningSetCollapsed({ id: stegState.id, isCollapsed: false });\r\n        } else if (!stegState.isCollapsed) {\r\n            stegVisningSetCollapsed({ id: stegState.id, isCollapsed: true });\r\n        }\r\n    }\r\n\r\n    render(): JSX.Element {\r\n        const {\r\n            displayElement,\r\n            tittel,\r\n            sporsmalId,\r\n            forklaring,\r\n            inputArea,\r\n            classModifier,\r\n            canCollapse,\r\n            customBottomRow,\r\n            stegState,\r\n            neverCollapse,\r\n        } = this.props;\r\n\r\n        const isCollapsed = stegState.isCollapsed && canCollapse;\r\n        const canReCollapse = neverCollapse !== true && !stegState.isCollapsed && canCollapse;\r\n\r\n        return (\r\n            <div\r\n                ref={this.parentDivRef}\r\n                className={[\r\n                    'c-veileder__panel',\r\n                    isCollapsed ? 'c-veileder__panel--collapsed' : '',\r\n                    !isCollapsed && canReCollapse ? 'c-veileder__panel--uncollapsed' : '',\r\n                    classModifier ? classModifier : 'c-veileder__panel--color',\r\n                ].join(' ')}\r\n                id={sporsmalId}\r\n            >\r\n                <div\r\n                    className={['c-veileder__panel-row', 'c-veileder__panel-row--clickable'].join(' ')}\r\n                    onClick={this.handleClick}\r\n                    onKeyUp={this.handleOnKeyUp}\r\n                    role={(!canReCollapse && !isCollapsed ? undefined : \"button\")}\r\n                    tabIndex={(!canReCollapse && !isCollapsed ? undefined : 0)}\r\n                    aria-expanded={(!canReCollapse && !isCollapsed ? undefined : !isCollapsed)}\r\n                >\r\n                    <div className=\"c-veileder__content c-veileder__content--header\">\r\n                        <h3 className=\"c-veileder__tittel\">{tittel}</h3>\r\n                    </div>\r\n                    <div className=\"c-veileder__content c-veileder__content--header c-veileder__content--indented\">\r\n                        {!stegState.isCollapsed ? null : displayElement}\r\n                    </div>\r\n                </div>\r\n\r\n                <div className=\"c-veileder__panel-row\">\r\n                    <div className=\"c-veileder__content c-veileder__content--textarea\">{forklaring}</div>\r\n                    <div\r\n                        ref={this.inputParentDivRef}\r\n                        className=\"c-veileder__content c-veileder__content--inputarea c-veileder__content--indented\"\r\n                    >\r\n                        {inputArea}\r\n                    </div>\r\n                </div>\r\n                {customBottomRow ?? null}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n\r\ninterface MapStateToProps {\r\n    stegState: StegVisning;\r\n}\r\n\r\ninterface MapDispatchToProps {\r\n    stegVisningSetCollapsed: typeof setCollapsed;\r\n}\r\n\r\nexport default connect(\r\n    (state: AppState, ownProps: VeilederStegOwnProps): MapStateToProps => {\r\n        const stegState = state.stegVisning[ownProps.sporsmalId]\r\n            ? state.stegVisning[ownProps.sporsmalId]\r\n            : { id: ownProps.sporsmalId, isCollapsed: false };\r\n        return {\r\n            stegState,\r\n        };\r\n    },\r\n    {\r\n        stegVisningSetCollapsed: setCollapsed,\r\n    },\r\n)(VeilederStegComponent);\r\n"],"names":["jsxs","jsx"],"mappings":"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"}