27 lines
868 B
TypeScript
27 lines
868 B
TypeScript
import React from 'react';
|
|
|
|
interface Props {
|
|
filter: any;
|
|
isHorizontal?: boolean;
|
|
}
|
|
function FunnelStepText(props: Props) {
|
|
const { filter } = props;
|
|
const total = filter.value.length;
|
|
const additionalStyle = props.isHorizontal ? {
|
|
whiteSpace: 'nowrap', maxWidth: 210, textOverflow: 'ellipsis', overflow: 'hidden',
|
|
} : {};
|
|
return (
|
|
<div className="color-gray-medium" style={additionalStyle}>
|
|
<span className="color-gray-darkest">{filter.label}</span>
|
|
<span className="mx-1">{filter.operator}</span>
|
|
{filter.value.map((value: any, index: number) => (
|
|
<span key={index}>
|
|
<span key={index} className="font-medium color-gray-darkest">{value}</span>
|
|
{index < total - 1 && <span className="mx-1 color-gray-medium">or</span>}
|
|
</span>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FunnelStepText;
|