export const ConditionsSettings: React.FunctionComponent = () => {
const [condition, setCondition] = useState(1)
const [activeConditionType, setActiveConditionType] = useState(1)
const dispatch = useDispatch()
const conditionsSettingsTypes = useSelector((state: RootState) => state.conditionsSettings.data)
const conditionsSettingsTypesValues = useSelector((state: RootState) => state.conditionsSettingsTypesValues.data)
const conditions = useSelector((state: RootState) => state.conditions.data)
const currentConditions = conditions.filter((item: Conditions) => item.id === activeConditionType)
const activeConditionTypeHandler = (key: any) => {
setActiveConditionType(key)
}
const conditionHandler: any = (key: number) => {
setCondition(key)
}
useEffect(() => {
dispatch(loadConditionsSettings())
}, [])
useEffect(() => {
dispatch(loadConditionsTypesValues(condition))
}, [condition])
useEffect(() => {
dispatch(loadConditions())
}, [])
return (
<>
<Tabs centered onChange={activeConditionTypeHandler}>
{conditionsSettingsTypes.map((item: ConditionsSettingsTabe) => (
<TabPane tab={item.description} key={item.id}>
{conditionsSettingsTypesValues.map((item: ConditionsSettingsTypesValues) => (
<Checkbox key={item.id}>{item.description}</Checkbox>
))}
</TabPane>
))}
</Tabs>
<Tabs onChange={activeConditionTypeHandler}>
{currentConditions.map((item: Conditions) => (
<TabPane tab={item.description} key={item.id} />
))}
</Tabs>
</>
)
}<h1>TABS</h1>
<div class="tabs-block-wrapper">
<div class="tabs">
<div class="tab-btn active" data-btn="1">1</div>
<div class="tab-btn" data-btn="2">2</div>
<div class="tab-btn" data-btn="3">3</div>
</div>
<div class="contents">
<div class="content active" data-content="1">Content 1</div>
<div class="content" data-content="2">Content 2</div>
<div class="content" data-content="3">
<div class="tabs">
<div class="tab-btn active" data-btn="4">4</div>
<div class="tab-btn" data-btn="5">5</div>
</div>
<div class="contents">
<div class="content active" data-content="4">Content 4</div>
<div class="content" data-content="5">Content 5</div>
</div>
</div>
</div>
</div>h1 {
width: 100%;
text-align: center;
}
.tabs-block-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
.tabs {
display: flex;
}
.tab-btn {
width: 100px;
height: 40px;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
border-radius: 5px;
}
.tab-btn.active {
background-color: blue;
color: #ffffff;
}
.contents {
max-width: 300px;
width: 100%;
height: 150px;
border: 1px solid black;
}
.content {
display: none;
}
.content.active {
display: block;
}const allTabs = document.querySelectorAll('.tabs');
const changeClass = (tabs, el) => {
for (let i = 0; i < tabs.children.length; i++) {
tabs.children[i].classList.remove('active');
}
el.classList.add('active');
};
for (const tabs of allTabs) {
const content = tabs.nextElementSibling.querySelectorAll(
':scope > .content'
);
tabs.addEventListener('click', (e) => {
const currTab = e.target.dataset.btn;
changeClass(tabs, e.target);
for (let i = 0; i < content.length; i++) {
content[i].classList.remove('active');
if (content[i].dataset.content === currTab) {
content[i].classList.add('active');
}
}
});
}
+ const wrapperBox = wrapper.getBoundingClientRect();
const items = wrapper.querySelectorAll('.block_line .item');
const points = [];
for (const item of items) {
const element = item.querySelector('.num');
const box = element.getBoundingClientRect();
points.push({
- x: box.left + box.width / 2 + scrollX,
- y: box.top + box.height / 2 + scrollY
+ x: box.left + box.width / 2 - wrapperBox.left,
+ y: box.top + box.height / 2 - wrapperBox.top
});
}points.push({
- x: box.left + box.width / 2,
+ x: box.left + box.width / 2 + scrollX,
- y: box.top + box.height / 2
+ y: box.top + box.height / 2 + scrollY
});