Macbook
105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
||
import {
|
||
INFLECTION_33_FILTER_OPTIONS,
|
||
inflection33FilterSummary,
|
||
inflection33SummaryText,
|
||
type Inflection33FilterLevel,
|
||
} from '../../utils/inflection33Strategy';
|
||
|
||
interface Props {
|
||
mode: 'buy' | 'sell';
|
||
period: number;
|
||
filterLevel: Inflection33FilterLevel;
|
||
onChange: (filterLevel: Inflection33FilterLevel) => void;
|
||
onClose: () => void;
|
||
popoverClassName?: string;
|
||
variant?: 'popover' | 'inline';
|
||
}
|
||
|
||
export default function Inflection33PairNodeSettings({
|
||
mode,
|
||
period,
|
||
filterLevel,
|
||
onChange,
|
||
onClose,
|
||
popoverClassName = 'se-flow-settings-pop',
|
||
variant = 'popover',
|
||
}: Props) {
|
||
const ref = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
if (variant === 'inline') return;
|
||
const onDoc = (e: MouseEvent) => {
|
||
if (ref.current && !ref.current.contains(e.target as Node)) onClose();
|
||
};
|
||
document.addEventListener('mousedown', onDoc);
|
||
return () => document.removeEventListener('mousedown', onDoc);
|
||
}, [onClose, variant]);
|
||
|
||
const body = (
|
||
<>
|
||
<label className="se-flow-settings-field se-flow-settings-field--readonly">
|
||
<span>변곡 기간</span>
|
||
<output className="se-flow-settings-readout">
|
||
EMA{period} · {period}봉 종가 채널
|
||
</output>
|
||
</label>
|
||
|
||
<label className="se-flow-settings-field">
|
||
<span>필터 강도</span>
|
||
<select
|
||
className="se-combo-num-select sp-cond-sel"
|
||
value={filterLevel}
|
||
onChange={e => onChange(e.target.value as Inflection33FilterLevel)}
|
||
>
|
||
{INFLECTION_33_FILTER_OPTIONS.map(o => (
|
||
<option key={o.value} value={o.value}>{o.label}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
|
||
<p className="se-flow-settings-hint">
|
||
{INFLECTION_33_FILTER_OPTIONS.find(o => o.value === filterLevel)?.desc}
|
||
</p>
|
||
<p className="se-flow-settings-hint se-flow-settings-hint--muted">
|
||
{inflection33FilterSummary(mode, filterLevel)}
|
||
</p>
|
||
<p className="se-flow-settings-hint se-flow-settings-hint--muted">
|
||
{inflection33SummaryText(mode, period, filterLevel)}
|
||
</p>
|
||
</>
|
||
);
|
||
|
||
if (variant === 'inline') {
|
||
return (
|
||
<div className="se-inflection33-inline-settings" onClick={e => e.stopPropagation()}>
|
||
{body}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
ref={ref}
|
||
className={popoverClassName}
|
||
role="dialog"
|
||
aria-label="33변곡 복합 필터 설정"
|
||
onClick={e => e.stopPropagation()}
|
||
>
|
||
<div className="se-flow-settings-head">
|
||
<span>필터 강도</span>
|
||
<button
|
||
type="button"
|
||
className="se-flow-settings-close"
|
||
aria-label="닫기"
|
||
title="닫기"
|
||
onClick={onClose}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
{body}
|
||
</div>
|
||
);
|
||
}
|