Radosław Miernik
Open source? Embrace, understand, develop.
(I dlaczego nas to obchodzi.)
Head of Engineering w Vazco
Od 2016 z React'em na produkcji
To i wszystko inne jest na radekmie.dev
Szczęśliwy posiadacz 10 palców
Pinch
Pan
Tap
Double tap
Press
Drag and drop
(API)
onAuxClick
, onAuxClickCapture
, onClick
, onClickCapture
, onDoubleClick
, onDoubleClickCapture
, onDrag
, onDragCapture
, onDragEnd
, onDragEndCapture
, onDragEnter
, onDragEnterCapture
, onDragOver
, onDragOverCapture
, onDragStart
, onDragStartCapture
, onDrop
, onDropCapture
, onMouseDown
, onMouseDownCapture
, onMouseEnter
, onMouseLeave
, onMouseMove
, onMouseMoveCapture
, onMouseOut
, onMouseOutCapture
, onMouseUp
, onMouseUpCapture
, onPointerCancel
, onPointerCancelCapture
, onPointerDown
, onPointerDownCapture
, onPointerEnter
, onPointerLeave
, onPointerMove
, onPointerMoveCapture
, onPointerOut
, onPointerOutCapture
, onPointerUp
, onPointerUpCapture
, onScroll
, onScrollCapture
, onTouchCancel
, onTouchCancelCapture
, onTouchEnd
, onTouchEndCapture
, onTouchMove
, onTouchMoveCapture
, onTouchStart
, onTouchStartCapture
, onWheel
, onWheelCapture
export function Room({ room, tables }) {
return (
);
}
Nic niezwykłego
<svg viewBox={`0 0 ${room.width} ${room.height}`}>
<g>
</g>
</svg>
{room.visuals.map((visual, index) => (
<RoomVisual key={index} visual={visual} />
))}
{tables.map(table => (
<Table table={table} key={table._id} />
))}
export function RoomVisual({ visual }) {
}
Poważnie, nic niezwykłego
if (visual.type === 'circ') {
return <circle cx={...} cy={...} r={...} />;
}
if (visual.type === 'rect') {
return <rect height={...} width={...} />;
}
// ...
Akcje = funkcje
import { useState } from 'react';
export function RoomInteractive(props) {
}
Interakcje = zdarzenia
const state = useState(initialRoomState);
const actionsRef = useActions(state, props);
const svgRef = useInteractions(actionsRef, props);
return <Room ref={svgRef} {...} />;
function useActions(state, props) {
}
const actions = {
instances: useRef({}),
onClockClick(reservationId) {
// `props` i `state` są tutaj aktualne.
},
onClocksPress(selectedTableModule) {},
onSeatClick(tableId, seatIndex) {}
};
actionsRef.current = actions;
const actionsRef = useRef(actions);
return actionsRef;
Stała referencja do funkcji i instancji
function useInteractions(actionsRef, props) {
const svgRef = createRef();
return svgRef;
}
useEffect(() => {
}, [props.room._id]);
import svgPanZoom from 'svg-pan-zoom';
const { instances } = actionsRef.current;
instances.svgElement = svgRef.current;
instances.svgPanZoom = svgPanZoom(svgRef.current, {
customEventsHandler: {
init: () =>
destroy: () =>
},
});
return () => instances.svgPanZoom.destroy();
instances.hammer = initHammer(...),
instances.hammer.destroy(),
function initHammer() {
}
import Hammer from 'hammerjs';
const hammer = new Hammer(svgElement, {
recognizers: [
[Hammer.Pan, { direction: Hammer.DIRECTION_ALL }],
[Hammer.Pinch],
[Hammer.Press],
[Hammer.Tap, { event: 'doubletap', taps: 2 }],
[Hammer.Tap],
],
});
hammer.get('doubletap').recognizeWith('tap');
hammer.get('tap').requireFailure('doubletap');
hammer.on('press', event => /* ... */);
// ...
svg-pan-zoom
obsługuje poruszanie się i zoomHammer.js
rozróżnia zdarzenia i woła nasze funkcjeprops
?W miejscu obsługi zdarzeń nie wiemy, który komponent (np. stolik) dokładnie został kliknięty
<g data-table={table._id} data-type="table">
...
</g>
const table = event.target.closest('[data-type=table]');
if (!table) { return; }
const tableId = table.dataset.table;
React
!?Nie
obchodzi
mnie
🥰
to
By Radosław Miernik
ReactJS Wroclaw #27