|
|
|
@ -3,59 +3,59 @@ import { initialState, reducer } from '../../reducers/assembly-items' |
|
|
|
|
import './styles/assembly-items.css' |
|
|
|
|
|
|
|
|
|
export const AssemblyItems = ({ registerEvent }) => { |
|
|
|
|
const [assemblyItems, dispatch] = useReducer(reducer, initialState) |
|
|
|
|
const [selectedItem, setSelectedItem] = useState(0) |
|
|
|
|
const refs = useRef({}) |
|
|
|
|
const asmItemsRef = useRef(null) |
|
|
|
|
|
|
|
|
|
useEffect(()=>{ |
|
|
|
|
registerEvent && registerEvent('codeManagerChanged', (code, address, index) => { |
|
|
|
|
dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index } }) |
|
|
|
|
}) |
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (selectedItem !== assemblyItems.index) { |
|
|
|
|
indexChanged(assemblyItems.index) |
|
|
|
|
} |
|
|
|
|
}, [assemblyItems.index]) |
|
|
|
|
|
|
|
|
|
const indexChanged = (index: number) => { |
|
|
|
|
if (index < 0) return |
|
|
|
|
let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null |
|
|
|
|
|
|
|
|
|
if (currentItem) { |
|
|
|
|
currentItem.removeAttribute('selected') |
|
|
|
|
currentItem.removeAttribute('style') |
|
|
|
|
if (currentItem.firstChild) { |
|
|
|
|
currentItem.firstChild.removeAttribute('style') |
|
|
|
|
} |
|
|
|
|
const codeView = asmItemsRef.current |
|
|
|
|
|
|
|
|
|
currentItem = codeView.children[index] |
|
|
|
|
currentItem.style.setProperty('border-color', 'var(--primary)') |
|
|
|
|
currentItem.style.setProperty('border-style', 'solid') |
|
|
|
|
currentItem.setAttribute('selected', 'selected') |
|
|
|
|
codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop) |
|
|
|
|
setSelectedItem(index) |
|
|
|
|
} |
|
|
|
|
const [assemblyItems, dispatch] = useReducer(reducer, initialState) |
|
|
|
|
const [selectedItem, setSelectedItem] = useState(0) |
|
|
|
|
const refs = useRef({}) |
|
|
|
|
const asmItemsRef = useRef(null) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
registerEvent && registerEvent('codeManagerChanged', (code, address, index) => { |
|
|
|
|
dispatch({ type: 'FETCH_OPCODES_SUCCESS', payload: { code, address, index } }) |
|
|
|
|
}) |
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (selectedItem !== assemblyItems.index) { |
|
|
|
|
indexChanged(assemblyItems.index) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="border rounded px-1 mt-1 bg-light"> |
|
|
|
|
<div className='dropdownpanel'> |
|
|
|
|
<div className='dropdowncontent'> |
|
|
|
|
<div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}> |
|
|
|
|
{ |
|
|
|
|
assemblyItems.display.map((item, i) => { |
|
|
|
|
return <div className="px-1" key={i} ref={ref => refs.current[i] = ref}><span>{item}</span></div> |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
}, [assemblyItems.index]) |
|
|
|
|
|
|
|
|
|
const indexChanged = (index: number) => { |
|
|
|
|
if (index < 0) return |
|
|
|
|
let currentItem = refs.current[selectedItem] ? refs.current[selectedItem] : null |
|
|
|
|
|
|
|
|
|
if (currentItem) { |
|
|
|
|
currentItem.removeAttribute('selected') |
|
|
|
|
currentItem.removeAttribute('style') |
|
|
|
|
if (currentItem.firstChild) { |
|
|
|
|
currentItem.firstChild.removeAttribute('style') |
|
|
|
|
} |
|
|
|
|
const codeView = asmItemsRef.current |
|
|
|
|
|
|
|
|
|
currentItem = codeView.children[index] |
|
|
|
|
currentItem.style.setProperty('border-color', 'var(--primary)') |
|
|
|
|
currentItem.style.setProperty('border-style', 'solid') |
|
|
|
|
currentItem.setAttribute('selected', 'selected') |
|
|
|
|
codeView.scrollTop = currentItem.offsetTop - parseInt(codeView.offsetTop) |
|
|
|
|
setSelectedItem(index) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="border rounded px-1 mt-1 bg-light"> |
|
|
|
|
<div className='dropdownpanel'> |
|
|
|
|
<div className='dropdowncontent'> |
|
|
|
|
<div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}> |
|
|
|
|
{ |
|
|
|
|
assemblyItems.display.map((item, i) => { |
|
|
|
|
return <div className="px-1" key={i} ref={ref => refs.current[i] = ref}><span>{item}</span></div> |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default AssemblyItems |