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
| 'use client'
| import type { FC } from 'react'
| import React from 'react'
| import cn from '@/utils/classnames'
| import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
| type Props = {
| isFocus?: boolean
| onFocus?: () => void
| value: string
| children?: React.ReactNode
| wrapClassName?: string
| textClassName?: string
| readonly?: boolean
| }
|
| const SupportVarInput: FC<Props> = ({
| isFocus,
| onFocus,
| children,
| value,
| wrapClassName,
| textClassName,
| readonly,
| }) => {
| const withHightContent = (value || '')
| .replace(/</g, '<')
| .replace(/>/g, '>')
| .replace(/\{\{([^}]+)\}\}/g, varHighlightHTML({ name: '$1', className: '!mb-0' })) // `<span class="${highLightClassName}">{{$1}}</span>`
| .replace(/\n/g, '<br />')
|
| return (
| <div
| className={
| cn(wrapClassName, 'flex w-full h-full')
| } onClick={onFocus}
| >
| {(isFocus && !readonly && children)
| ? (
| children
| )
| : (
| <div
| className={cn(textClassName, 'w-0 grow h-full whitespace-nowrap truncate')}
| title={value}
| dangerouslySetInnerHTML={{
| __html: withHightContent,
| }}></div>
| )}
| </div>
| )
| }
| export default React.memo(SupportVarInput)
|
|
