forked from ddrilling/asb_cloud_front
Добавлена иконка скважины для WellTreeSelector
This commit is contained in:
parent
8dfc6f0832
commit
0899b37e9e
69
src/components/icons/WellIcon.tsx
Normal file
69
src/components/icons/WellIcon.tsx
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
type WellIconColors = {
|
||||||
|
online?: string
|
||||||
|
active?: string
|
||||||
|
inactive?: string
|
||||||
|
unknown?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WellIconProps {
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
online?: boolean
|
||||||
|
state?: 'active' | 'inactive' | 'unknown'
|
||||||
|
colors?: WellIconColors
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultColors: WellIconColors = {
|
||||||
|
online: 'red',
|
||||||
|
active: 'green',
|
||||||
|
inactive: 'gainsboro',
|
||||||
|
unknown: 'gainsboro',
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultProps: WellIconProps = {
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
state: 'unknown',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WellIcon = React.memo(({ width, height, state, online, colors, ...other } : WellIconProps = defaultProps) => {
|
||||||
|
colors = {...defaultColors, ...colors}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
version={'1.1'}
|
||||||
|
viewBox={'12 .64 9.2 9.2'}
|
||||||
|
xmlns={'http://www.w3.org/2000/svg'}
|
||||||
|
xmlnsXlink={'http://www.w3.org/1999/xlink'}
|
||||||
|
|
||||||
|
fill={'none'}
|
||||||
|
stroke={'currentColor'}
|
||||||
|
strokeLinecap={'round'}
|
||||||
|
strokeLinejoin={'bevel'}
|
||||||
|
strokeWidth={.26}
|
||||||
|
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
color={colors[state ?? 'unknown']}
|
||||||
|
{...other}
|
||||||
|
>
|
||||||
|
<g>
|
||||||
|
<path d={'m12 7.9 2.6-6.6v-1.3h1.3v1.3l2.6 6.6'}/>
|
||||||
|
<path d={'m12 6.4h6.6v-0.53h-6.6z'} fill={'currentColor'}/>
|
||||||
|
<path d={'m14 0.79v0.53h2.9v-0.53z'} fill={'currentColor'}/>
|
||||||
|
<path d={'m12 7.9 5-4-2.4-2.6h1.3l-2.4 2.6 5 4'}/>
|
||||||
|
</g>
|
||||||
|
{online && ( // Полоски, показывающие наличие свежей телеметрии
|
||||||
|
<g stroke={colors.online}>
|
||||||
|
<path d={'m18 0.066a2 2 0 0 1 0.14 1.7 2 2 0 0 1-1.2 1.2'}/>
|
||||||
|
<path d={'m20 0.04a3 3 0 0 1-1.8 3.8'}/>
|
||||||
|
<path d={'m20 0.031a4 4 0 0 1-2.5 4.8'}/>
|
||||||
|
</g>
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default WellIcon
|
Loading…
Reference in New Issue
Block a user