With Flare, you can build responders to intercept DOM events. There are two types of ways of doing this:
- capturing target events
- capturing root events
Target events occur on a child in a sub-tree:
/** | |
* React v16.0.0-alpha.3 | |
* | |
* Copyright 2013-present, Facebook, Inc. | |
* All rights reserved. | |
* | |
* This source code is licensed under the BSD-style license found in the | |
* LICENSE file in the root directory of this source tree. An additional grant | |
* of patent rights can be found in the PATENTS file in the same directory. | |
* |
let start = 0; | |
let timerId = null; | |
let log = []; | |
let invalidatingEvent = false; | |
const validInputTypes = new Set([ | |
'insertText', | |
'insertCompositionText', | |
'insertFromComposition', | |
'insertLineBreak', |
// I'm suggesting we add a new "adopt X from <Y />" syntax to the JSX language | |
// it would de-sugar to render prop children, but look and read better than | |
// what we currently have. For example: | |
// 1. | |
// this sugar | |
function MyComponent(props) { | |
adopt foo from <Bar />; | |
return <div>{foo}</div>; | |
} |
import {useEffect} from 'react'; | |
const originalSetBaseAndExtent = Selection.prototype.setBaseAndExtent; | |
export default function useEventRecorder() { | |
useEffect(() => { | |
const records = []; | |
let isComposing = false; | |
const onSelectionChange = (event: Event) => { |
// Option C: | |
// this implementation has a small amount of overhead compared to (a) and (b) | |
const React = require('react'); | |
const counterState = React.createStateReducer({ | |
initialState: props => ({ | |
counter: 0, | |
divRef: React.createRef(), | |
}), | |
reducer: (action, state) => { |
// ----------------- | |
// This system replaces this existing Flare event system and its concept of Event Components. | |
// ----------------- | |
// Here's an example of how we might make a Pressable View: | |
// PressableView.js | |
import {usePressResponder} from "react-events/press"; | |
import {useFocusResponder} from "react-events/focus"; | |
import {useHoverResponder} from "react-events/hover"; |
// "counter.react" | |
import {format} from 'externalLib'; | |
state { | |
// acts like default state | |
counter = 0; | |
} | |
props { |
_getPropertyAssignmentStatement( | |
location: BabelNodeLVal, | |
value: Value, | |
mightHaveBeenDeleted: boolean, | |
deleteIfMightHaveBeenDeleted: boolean = false | |
): BabelNodeStatement { | |
if (mightHaveBeenDeleted) { | |
// We always need to serialize this value in order to keep the invariants happy. | |
let serializedValue = this.serializeValue(value); | |
let condition; |
const React = require("react"); | |
const Lifecycles = React.createLifecycleEvents({ | |
didMount({ setState }) { | |
setState({ | |
disabled: false, | |
}); | |
}, | |
didUpdate({ inputRef }) { | |
if (document.activeElement !== inputRef.value) { |