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