StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.0 KiB
121 lines
3.0 KiB
## Event Modifiers for JSX
|
|
|
|
This babel plugin adds some syntactic sugar to JSX.
|
|
|
|
### Usage:
|
|
|
|
```bash
|
|
npm i babel-plugin-jsx-event-modifiers -D
|
|
```
|
|
or
|
|
```bash
|
|
yarn add babel-plugin-jsx-event-modifiers -D
|
|
```
|
|
|
|
Then add `jsx-event-modifiers` to your `.babelrc` file under `plugins`
|
|
|
|
example .babelrc:
|
|
```json
|
|
{
|
|
"presets": ["es2015"],
|
|
"plugins": ["jsx-event-modifiers", "transform-vue-jsx"]
|
|
}
|
|
```
|
|
|
|
#### Event Modifiers
|
|
|
|
Example:
|
|
```js
|
|
export default {
|
|
render () {
|
|
return (
|
|
<input
|
|
onKeyup:up={this.methodForPressingUp}
|
|
onKeyup:down={this.methodForPressingDown}
|
|
onKeyup:bare-shift-enter={this.methodOnlyOnShiftEnter}
|
|
onKeyup:bare-alt-enter={this.methodOnlyOnAltEnter}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
```
|
|
will be transpiled into:
|
|
```js
|
|
export default {
|
|
render() {
|
|
return (
|
|
<input
|
|
{...{
|
|
on: {
|
|
keyup: [
|
|
$event => {
|
|
if (!('button' in $event) && this._k($event.keyCode, 'up', 38)) return null
|
|
|
|
this.methodForPressingUp($event)
|
|
},
|
|
$event => {
|
|
if (!('button' in $event) && this._k($event.keyCode, 'down', 40)) return null
|
|
|
|
this.methodForPressingDown($event)
|
|
},
|
|
$event => {
|
|
if (
|
|
($event.ctrlKey && $event.altKey && $event.metaKey) ||
|
|
!$event.shiftKey ||
|
|
(!('button' in $event) && this._k($event.keyCode, 'enter', 13))
|
|
)
|
|
return null
|
|
|
|
this.methodOnlyOnShiftEnter($event)
|
|
},
|
|
$event => {
|
|
if (
|
|
($event.ctrlKey && $event.shiftKey && $event.metaKey) ||
|
|
!$event.altKey ||
|
|
(!('button' in $event) && this._k($event.keyCode, 'enter', 13))
|
|
)
|
|
return null
|
|
|
|
this.methodOnlyOnAltEnter($event)
|
|
},
|
|
],
|
|
},
|
|
}}
|
|
/>
|
|
)
|
|
},
|
|
}
|
|
|
|
|
|
```
|
|
|
|
#### We try to keep API and behaviour as close to [Vue Event Modifiers](https://vuejs.org/v2/guide/events.html#Event-Modifiers) as we can. The only difference today is support for [bare](https://github.com/vuejs/vue/pull/5977) modifier and syntax.
|
|
|
|
##### Example:
|
|
|
|
Vue template:
|
|
```html
|
|
<input
|
|
@keyup.up="methodForPressingUp"
|
|
@keyup.down="methodForPressingDown"
|
|
@keyup.bare.shift.enter="methodOnlyOnShiftEnter"
|
|
@keyup.bare.alt.enter="methodOnlyOnAltEnter"
|
|
@keyup.120="onPressKey120('some', 'arguments')"
|
|
>
|
|
```
|
|
JSX:
|
|
```js
|
|
<input
|
|
onKeyup:up={this.methodForPressingUp}
|
|
onKeyup:down={this.methodForPressingDown}
|
|
onKeyup:bare-shift-enter={this.methodOnlyOnShiftEnter}
|
|
onKeyup:bare-alt-enter={this.methodOnlyOnAltEnter}
|
|
onKeyup:k120={() => this.onPressKey120('some', 'arguments')}
|
|
/>
|
|
```
|
|
|
|
##### Notable differences:
|
|
|
|
* Modifiers are prefixed by `:` and separated by `-` (in vue: prefixed by `.` and separated by `.`)
|
|
* Key codes are prefixed by `k`
|
|
* Call expression should be wrapped in arrow functions
|
|
|