How to use core-decorators - 10 common examples

import React, { Component } from 'react';
import { UserProfile, UserRepos, Notes } from '../../components';
import { mixin } from 'core-decorators';
import ReactFireMixin from 'reactfire';
import Firebase from 'firebase';
import getGithubInfo from '../../util/helper';

@mixin(ReactFireMixin)
class Profile extends Component {
  state = {
    notes: ['1', '2', '3'],
    bio: {
      name: 'guoyongfeng'
    },
    repos: ['a', 'b', 'c']
  }
  componentDidMount(){
    // 为了读写数据，我们首先创建一个firebase数据库的引用
    this.ref = new Firebase('https://github-note-taker.firebaseio.com/');
    // 调用child来往引用地址后面追加请求，获取数据
    var childRef = this.ref.child(this.props.params.username);
    // 将获取的数据转换成数组并且赋给this.state.notes
    this.bindAsArray(childRef, 'notes');

this.jobId = params["jobId"];
            this.taskId = params["taskId"];
            this.poolId = params["poolId"];
            this.nodeId = params["nodeId"];
            this.outputKind = params["outputKind"];
            this.filename = params["filename"];

            this._loadFileProperties();
        }));
    }

    public ngOnDestroy() {
        this._paramsSubscribers.forEach(x => x.unsubscribe());
    }

    @autobind()
    public refresh() {
        return Observable.of({});
    }

    @autobind()
    public downloadFile() {
        const dialog = remote.dialog;
        const localPath = dialog.showSaveDialog({
            buttonLabel: "Download",
            // Set default filename of file to download
            defaultPath: FileUrlUtils.getFileName(this.url),
        });

        if (localPath) {
            return this._saveFile(localPath);
        }

constructor(private fileService: FileService) { }

    public ngOnChanges(inputs) {
        if (inputs.poolId || inputs.nodeId || inputs.folder || inputs.filter) {
            this._initProxyMap(inputs);
            this.refresh();
        }
    }

    public ngOnDestroy(): void {
        this.status.unsubscribe();
        this.error.unsubscribe();
    }

    @autobind()
    public refresh(): Observable {
        if (this.poolId && this.nodeId) {
            // filter is changed in two different situation (search field of node file list and file nav list)
            const filterProp = ((this.filter.properties && this.filter.properties.length > 0) ?
                                        this.filter.properties[0] : this.filter) as Property;
            const quickSearch = filterProp && filterProp.value;
            const loadPath = [this.folder, quickSearch].filter(x => Boolean(x)).join("/");
            if (this.treeDisplay) {
                return this.treeDisplay.initNodes(loadPath, true);
            }
        }
        return Observable.of(true);
    }

    public get baseUrl() {
        return ["/pools", this.poolId, "nodes", this.nodeId];

} from "./connect-field";

import Input from "@/components/Input";

export interface BooleanFieldProps extends EditorFieldProps {}

type Props = BooleanFieldProps & InjectedProps;
class BooleanField extends React.Component {
  render() {
    const { value } = this.props;
    return (
      <input value="{value}" type="checkbox">
    );
  }

  @autobind()
  private _onValueChange(e: React.ChangeEvent) {
    const value = e.target.checked;
    const { onCommit } = this.props;
    onCommit(value);
  }
}
export default connectEditorField()(BooleanField);

return (
       x}
        onChange={this._onValueChange}
        onSelect={this._onValueSelect}
        selectOnBlur
      />
    );
  }

  @autobind()
  private _onValueChange(e: React.ChangeEvent) {
    const value = e.target.value;
    this._setEditValue(value);
  }

  @autobind()
  private _onValueSelect(value: string) {
    this._setEditValue(value, () => {
      this._commitEdit();
    });
  }

  private _setEditValue(value: string, onSet?: () => void) {
    const validation = this._validate(value);
    const isValid = !validation;

return (
      <input value="{currentValue}" maxlength="{maxLength}" minlength="{minLength}" type="text">
    );
  }

  @autobind()
  private _onValueChange(e: React.ChangeEvent) {
    const value = e.target.value;
    this._setEditValue(value);
  }

  @autobind()
  private _onInputKeyPress(e: React.KeyboardEvent) {
    if (e.key === Keys.Enter) {
      this._commitEdit();
    }
  }

  @autobind()
  private _onInputBlur() {
    this._commitEdit();
  }

export interface CheckInputProps {
  value: boolean;
  onCommit(value: boolean): void;
}

type Props = CheckInputProps;
export default class CheckInput extends React.Component {
  render() {
    const { value } = this.props;
    return (
      <input checked="{value}" type="checkbox">
    );
  }

  @autobind()
  private _onValueChange(e: React.ChangeEvent) {
    const { onCommit } = this.props;
    const value = e.target.checked;
    onCommit(value);
  }
}

return (
      <input step="{step}" value="{currentValue}" max="{maxValue}" min="{minValue}" type="number">
    );
  }

  @autobind()
  private _onValueChange(e: React.ChangeEvent) {
    const { minValue, maxValue } = this.props;
    const editValue = e.target.value;
    const numberValue = parseFloat(editValue);
    let validationMessage: string | null = null;

    if (maxValue != null &amp;&amp; numberValue &gt; maxValue) {
      validationMessage = `Value must be less than ${maxValue}`;
    } else if (minValue != null &amp;&amp; numberValue &lt; minValue) {
      validationMessage = `Value must be greater than ${minValue}`;
    }

    e.target.setCustomValidity(validationMessage || "");

    this.setState({
      editValue,

import { mixin } from 'core-decorators';
import Article from 'models/article';
import PaginatedCollection from 'collections/paginated';

@mixin({
  url: 'articles',
  model: Article
})
export default class Articles extends PaginatedCollection {}

import Marionette from 'backbone.marionette';
import { mixin } from 'core-decorators';
import Session from 'services/session';
import DashboardItemView from 'views/dashboard/item';
import template from 'templates/dashboard/dashboard';

@mixin({
  template,
  className: 'jumbotron',
  childViewContainer: '.articles-list',
  childView: DashboardItemView,
  model: Session.currentUser()
})
export default class DashboardView extends Marionette.CompositeView {}