| 1 |
import React, { useCallback, useEffect, useState } from 'react'; |
| 2 |
import { validFieldProps, withLabel, GenericInput } from 'quickbuilder'; |
| 3 |
const PermalinkStracture = (props) => { |
| 4 |
const validProps = validFieldProps( |
| 5 |
props, |
| 6 |
['is_pro', 'visible', 'trigger', 'copyOnClick', 'disable', 'parentIndex', 'context', 'badge', 'popup', 'tags'] |
| 7 |
); |
| 8 |
const handleChange = useCallback( |
| 9 |
(event) => validProps.onChange(event, { popup: props?.popup, isPro: !!props.is_pro }), |
| 10 |
[validProps?.value] |
| 11 |
); |
| 12 |
|
| 13 |
if (props.tags) { |
| 14 |
let tags = Object.values(props.tags); |
| 15 |
|
| 16 |
if (!Boolean(props?.context?.is_pro_active) || !props?.context?.values?.multiple_kb) { |
| 17 |
tags = tags.filter(item => item.value !== '%knowledge_base%'); |
| 18 |
} |
| 19 |
|
| 20 |
let valueArray = props.value.length > 0 ? props.value.split('/') : []; |
| 21 |
|
| 22 |
const inputRef = React.useRef(null); |
| 23 |
const clicked = (tag, isActive) => { |
| 24 |
const input = inputRef.current; |
| 25 |
const start = input?.selectionStart ?? 0; |
| 26 |
|
| 27 |
if (isActive && valueArray.find(item => item === tag.value) != undefined) { |
| 28 |
valueArray = valueArray.filter(item => item !== tag.value); |
| 29 |
} |
| 30 |
|
| 31 |
let valueString = valueArray.join('/'); |
| 32 |
|
| 33 |
if (!isActive) { |
| 34 |
let nextPointer = valueString.indexOf('/', start); |
| 35 |
|
| 36 |
if (nextPointer !== -1) { |
| 37 |
let before = valueString.slice(0, nextPointer); |
| 38 |
let after = valueString.slice(nextPointer); |
| 39 |
valueString = `${before}${!before.endsWith('/')?'/':''}${tag.value}${after}`; |
| 40 |
} else { |
| 41 |
valueString = `${valueString}${!valueString.endsWith('/')?'/':''}${tag.value}`; |
| 42 |
} |
| 43 |
} |
| 44 |
|
| 45 |
handleChange({ |
| 46 |
target: { |
| 47 |
type: 'button', |
| 48 |
name: props.name, |
| 49 |
value: valueString |
| 50 |
} |
| 51 |
}); |
| 52 |
}; |
| 53 |
|
| 54 |
return <> |
| 55 |
{React.createElement("input", { ...validProps, onChange: handleChange, ref: inputRef, type: "text" })} |
| 56 |
<div className="wprf-tags-wrapper"> |
| 57 |
{ |
| 58 |
tags.map((tag, index) => { |
| 59 |
let isActive = valueArray.includes(tag.value); |
| 60 |
|
| 61 |
return ( |
| 62 |
<React.Fragment key={index}> |
| 63 |
<span |
| 64 |
className={`button button-secondary ${isActive ? 'active' : ''}`} |
| 65 |
title={tag.label} |
| 66 |
onClick={(e) => clicked(tag, isActive)} |
| 67 |
>{tag.value}</span> |
| 68 |
</React.Fragment> |
| 69 |
); |
| 70 |
}) |
| 71 |
} |
| 72 |
</div> |
| 73 |
</> |
| 74 |
} |
| 75 |
|
| 76 |
|
| 77 |
return React.createElement('input', { |
| 78 |
...validProps, onChange: handleChange |
| 79 |
}) |
| 80 |
} |
| 81 |
|
| 82 |
export const GenericPermalinkStracture = React.memo(PermalinkStracture); |
| 83 |
export default withLabel(React.memo(PermalinkStracture)); |
| 84 |
|
