Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 9x 9x 9x 9x 9x 6x 6x 6x 6x 9x 6x 9x 36x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import cx from 'classnames'
import { Icon, IconName } from '@wings-software/uicore'
import { StringKeys, useStrings } from 'framework/strings'
import { ExecutionLayoutState, useExecutionLayoutContext } from './ExecutionLayoutContext'
import css from './ExecutionLayoutToggle.module.scss'
export interface ExecutionLayoutToggleProps {
className?: string
}
const iconNameMap: Record<ExecutionLayoutState, IconName> = {
[ExecutionLayoutState.BOTTOM]: 'layout-bottom',
[ExecutionLayoutState.FLOATING]: 'layout-float',
[ExecutionLayoutState.RIGHT]: 'layout-right',
[ExecutionLayoutState.MINIMIZE]: 'minus'
}
const labelMap: Record<ExecutionLayoutState, StringKeys> = {
[ExecutionLayoutState.BOTTOM]: 'pipeline.execution.layouts.bottom',
[ExecutionLayoutState.FLOATING]: 'pipeline.execution.layouts.float',
[ExecutionLayoutState.RIGHT]: 'pipeline.execution.layouts.right',
[ExecutionLayoutState.MINIMIZE]: 'pipeline.execution.layouts.minimize'
}
const layouts: ExecutionLayoutState[] = [
ExecutionLayoutState.RIGHT,
ExecutionLayoutState.BOTTOM,
ExecutionLayoutState.FLOATING,
ExecutionLayoutState.MINIMIZE
]
const SCROLL_OFFSET = 45
export default function ExecutionLayoutToggle(props: ExecutionLayoutToggleProps): React.ReactElement {
const { layout, setLayout } = useExecutionLayoutContext()
const { getString } = useStrings()
const ref = React.useRef<HTMLDivElement | null>(null)
const isMounted = React.useRef(false)
function handleViewChange(e: React.ChangeEvent<HTMLInputElement>): void {
const newLayout = e.target.value
setLayout(newLayout as ExecutionLayoutState)
}
// this effect should not run on mount
React.useLayoutEffect(() => {
let timer: number | null = null
Iif (isMounted.current && layout === ExecutionLayoutState.BOTTOM) {
timer = window.setTimeout(() => {
if (ref.current) {
const rect = ref.current.getBoundingClientRect()
const isOutOfView = rect.top > window.innerHeight
const container = document.getElementById('pipeline-execution-container')
if (isOutOfView && container) {
container.scrollTo({ top: Math.abs(rect.bottom + SCROLL_OFFSET - window.innerHeight), behavior: 'smooth' })
}
}
}, 200)
}
return () => {
Iif (timer) {
window.clearTimeout(timer)
}
}
}, [layout])
React.useLayoutEffect(() => {
isMounted.current = true
}, [])
return (
<div ref={ref} className={cx(css.toggle, props.className)}>
{layouts.map(key => (
<label key={key} className={css.label} title={getString(labelMap[key])}>
<input type="radio" name="layout" value={key} onChange={handleViewChange} checked={layout === key} />
<Icon name={iconNameMap[key]} />
</label>
))}
</div>
)
}
|