import React, { useState } from "react"; import styled from "styled-components"; interface WrapperProps { height?: string; width?: string; } const Wrapper = styled.div` & { width: ${(props: any) => (props.width ? props.width : "230px")}; position: relative; height: ${(props: any) => (props.height ? props.height : "510px")}; display: block; margin: 40px auto; } & path { fill: white; } & path:hover { fill: silver; } & path.selected { fill: silver; } & path.noHover { fill: white; } `; export const SVG_PARTS: any = [ "head", "left_shoulder", "right_shoulder", "left_arm", "right_arm", "chest", "stomach", "left_leg_upper", "left_leg_lower", "right_leg_upper", "right_leg_lower", "left_hand", "right_hand", "left_foot", "right_foot", ]; export const PARTS_GROUPS: any = { head: { head: true }, trunk: { left_shoulder: true, right_shoulder: true, left_arm: true, right_arm: true, chest: true, stomach: true, }, legs: { left_leg_upper: true, left_leg_lower: true, right_leg_upper: true, right_leg_lower: true, }, hands: { right_hand: true, left_hand: true }, foots: { left_foot: true, right_foot: true }, }; export interface BodyComponentProps { onClick?: Function; onChange?: Function; height?: string; width?: string; partsInput?: any; mode?: "missing" | "pain"; } export const BodyComponent: React.FC = ({ onClick, onChange, height, width, partsInput, mode = {}, }) => { const [parts, setParts] = useState(partsInput || {}); const onClickSvg = ({ target }: any) => { const id = target.id || target.parentElement.id; const newParts = { ...parts }; if (newParts[id]?.clickable !== undefined && !newParts[id]?.clickable) return; if (newParts[id] === true || newParts[id] === false) { newParts[id] = !newParts[id]; } else if (newParts[id]) { newParts[id].selected = !newParts[id].selected; } else { newParts[id] = { selected: true }; } if (mode === "missing") { let ids: string[] = []; if(newParts[id].selected) // WHEN PART IS MISSING { switch(id){ // LEFT HAND case "left_shoulder": ids = ["left_arm", "left_hand"]; break; case "left_arm": ids = ["left_hand"]; break; // RIGHT HAND case "right_shoulder": ids = ["right_arm", "right_hand"]; break; case "right_arm": ids = ["right_hand"]; break; // LEFT LEG case "left_leg_upper": ids = ["left_leg_lower","left_foot"] break; case "left_leg_lower": ids = ["left_foot"] break; // RIGHT LEG case "right_leg_upper": ids = ["right_leg_lower","right_foot"] break; case "right_leg_lower": ids = ["right_foot"] break; } }else{ // WHEN PART IS NOT MISSING switch(id){ // LEFT HAND case "left_hand": ids = ["left_arm", "left_shoulder"]; break; case "left_arm": ids = ["left_shoulder"]; break; // RIGHT HAND case "right_hand": ids = ["right_arm", "right_shoulder"]; break; case "right_arm": ids = ["right_shoulder"]; break; // LEFT LEG case "left_foot": ids = ["left_leg_lower","left_leg_upper"] break; case "left_leg_lower": ids = ["left_leg_upper"] break; // RIGHT LEG case "right_foot": ids = ["right_leg_lower","right_leg_upper"] break; case "right_leg_lower": ids = ["right_leg_upper"] break; } } ids.forEach((organ) => { if (newParts[organ] === true || newParts[organ] === false) { newParts[organ] = newParts[id]; } else if (newParts[organ]) { newParts[organ].selected = newParts[id].selected; } else { newParts[organ] = { selected: true }; } }); } setParts(newParts); if (onChange) onChange(newParts); if (onClick) onClick(id); }; const bodyParts:any = { chest:(selected:boolean, clickable:boolean, key:number) => , stomach:(selected:boolean, clickable:boolean, key:number) => , left_shoulder:(selected:boolean, clickable:boolean, key:number) => , left_leg_lower:(selected:boolean, clickable:boolean, key:number) => , left_foot:(selected:boolean, clickable:boolean, key:number) => , left_leg_upper:(selected:boolean, clickable:boolean, key:number) => , left_arm:(selected:boolean, clickable:boolean, key:number) => , left_hand:(selected:boolean, clickable:boolean, key:number) => , head:(selected:boolean, clickable:boolean, key:number) => , right_shoulder:(selected:boolean, clickable:boolean, key:number) => , right_leg_lower:(selected:boolean, clickable:boolean, key:number) => , right_foot:(selected:boolean, clickable:boolean, key:number) => , right_leg_upper:(selected:boolean, clickable:boolean, key:number) => , right_arm:(selected:boolean, clickable:boolean, key:number) => , right_hand:(selected:boolean, clickable:boolean, key:number) => , } return ( ); };