TypeScript mobx-state-tree.types类代码示例

import { types } from 'mobx-state-tree';

const QueryValueType = types.union(types.string, types.boolean, types.number);
const urlParameterize = queryObj => {
  const keys = Object.keys(queryObj);
  const newQuery = keys.reduce((acc: string, key: string, idx: number) => {
    const preChar = idx === 0 ? '?' : '&';
    return acc + preChar + key + '=' + queryObj[key];
  }, '');

  return newQuery;
};

export const ViewStore = types
  .model({
    path: types.string,
    query: types.map(QueryValueType),
  })
  .views(self => ({
    get currentUrl() {
      let path = self.path;

      if (self.query.size) {
        path += urlParameterize(self.query.toJS());
      }
      return path;
    },
  }))
  .actions(self => {
    function updateQuery(query: any) {
      self.query.clear();

import { types, getEnv, flow } from 'mobx-state-tree';
import { setStateFields } from './helpers';

export const AlertRule = types
  .model('AlertRule', {
    id: types.identifier(types.number),
    dashboardId: types.number,
    panelId: types.number,
    name: types.string,
    state: types.string,
    stateText: types.string,
    stateIcon: types.string,
    stateClass: types.string,
    stateAge: types.string,
    info: types.optional(types.string, ''),
    url: types.string,
  })
  .views(self => ({
    get isPaused() {
      return self.state === 'paused';
    },
  }))
  .actions(self => ({
    /**
     * will toggle alert rule paused state
     */
    togglePaused: flow(function* togglePaused() {
      const backendSrv = getEnv(self).backendSrv;
      const payload = { paused: !self.isPaused };
      const res = yield backendSrv.post(`/api/alerts/${self.id}/pause`, payload);
      setStateFields(self, res.state);

import { types, getEnv, flow } from 'mobx-state-tree';

export const TeamMemberModel = types.model('TeamMember', {
  userId: types.identifier(types.number),
  teamId: types.number,
  avatarUrl: types.string,
  email: types.string,
  login: types.string,
});

type TeamMemberType = typeof TeamMemberModel.Type;
export interface TeamMember extends TeamMemberType {}

export const TeamGroupModel = types.model('TeamGroup', {
  groupId: types.identifier(types.string),
  teamId: types.number,
});

type TeamGroupType = typeof TeamGroupModel.Type;
export interface TeamGroup extends TeamGroupType {}

export const TeamModel = types
  .model('Team', {
    id: types.identifier(types.number),
    name: types.string,
    avatarUrl: types.string,
    email: types.string,
    memberCount: types.number,
    search: types.optional(types.string, ''),
    members: types.optional(types.map(TeamMemberModel), {}),
    groups: types.optional(types.map(TeamGroupModel), {}),

import { types } from 'mobx-state-tree';
import { CinemaReference } from '../cinemas';
import store from '../index';
import { utcToZonedTime, toDate } from 'date-fns-tz';
import { addHours } from 'date-fns';

export const Showtime = types.model('Showtime', {
  id: types.identifier,
  playingAt: types.Date,
  cinema: types.maybe(CinemaReference),
  room: types.maybe(types.string),
  ticketUrl: types.maybe(types.string),
  flags: types.array(types.string),
})
.preProcessSnapshot((snapshot) => {
  const date = utcToZonedTime(snapshot.playingAt || 0, 'America/New_York');
  return {
    ...snapshot,
    playingAt: toDate(date, { timeZone: 'GMT' }),
  };
})
.views(self => ({
  get disabled() {
    const timeInIceland = utcToZonedTime(Date.now(), 'GMT');
    if (self.playingAt) {
      return self.playingAt.getTime() < timeInIceland.getTime();
    }
    return false;
  },
}));

import { types, IModelType, ISnapshottable } from "mobx-state-tree"
import { TestUserModel } from "./test-user-model"
import { IObservableArray } from "mobx"

// lol - https://github.com/Microsoft/TypeScript/issues/5938
export type __IModelType = IModelType<any, any>
export type __ISnapshottable = ISnapshottable<any>
export type __IObservableArray = IObservableArray<any>

export const TestCompanyModel = types
  .model()
  .props({
    name: "",
    employees: types.optional(types.array(TestUserModel), []),
    owner: types.maybe(TestUserModel),
  })
  .actions(self => ({
    setName(value: string) {
      self.name = value
    },
  }))

export const createTestCompany = () =>
  TestCompanyModel.create({
    name: "Steve",
    owner: { name: "me", age: 100 },
    employees: [{ name: "a", age: 1 }, { name: "b", age: 2 }],
  })

ďťżimport { types } from 'mobx-state-tree';

export const NavItem = types.model('NavItem', {
  id: types.identifier(types.string),
  text: types.string,
  url: types.optional(types.string, ''),
  subTitle: types.optional(types.string, ''),
  icon: types.optional(types.string, ''),
  img: types.optional(types.string, ''),
  active: types.optional(types.boolean, false),
  children: types.optional(types.array(types.late(() => NavItem)), []),
});

import { types } from 'mobx-state-tree';
import { Cast } from './Cast';

const CreditType = types.enumeration('CreditType', [
  'CAST',
  'CREW',
]);

export const Credit = types.model('Credit', {
  id: types.identifier,
  cast: types.maybeNull(Cast),
  role: types.maybe(types.string),
  type: types.maybe(CreditType),
});

export type ICredit = typeof Credit.Type;

import { types } from 'mobx-state-tree';
import { SearchStore } from './../SearchStore/SearchStore';
import { ServerStatsStore } from './../ServerStatsStore/ServerStatsStore';
import { NavStore } from './../NavStore/NavStore';
import { AlertListStore } from './../AlertListStore/AlertListStore';
import { ViewStore } from './../ViewStore/ViewStore';

export const RootStore = types.model({
  search: types.optional(SearchStore, {
    sections: [],
  }),
  serverStats: types.optional(ServerStatsStore, {
    stats: [],
  }),
  nav: types.optional(NavStore, {}),
  alertList: types.optional(AlertListStore, {
    rules: [],
  }),
  view: types.optional(ViewStore, {
    path: '',
    query: {},
  }),
});

type IRootStoreType = typeof RootStore.Type;
export interface IRootStore extends IRootStoreType {}

import { types, flow } from 'mobx-state-tree';
import { client } from '../services/graphql.service';
import { Genre } from './models/Genre';
import fetchGenreByIdQuery from '../queries/fetchGenreById.gql';
import fetchAllGenres from '../queries/fetchAllGenres.gql';

export const GenreReference = types.reference(Genre, {
  get(identifier: string) {
    return Genres.getOrLoadById(identifier) as typeof Genre.Type || [];
  },
  set(value: typeof Genre.Type) {
    return value.id;
  },
});

export const Genres = types.model('Genres', {
  genres: types.map(Genre),
})
.actions((self) => {

  const addGenre = (obj: any) => {
    const genre = { ...obj };
    if (self.genres.has(genre.id)) {
      return;
    }

    return self.genres.put(
      Genre.create(genre),
    );
  };

import { types } from 'mobx-state-tree'
import { merge, pick } from 'ramda'

import { service } from '../service'

export const Cell = types.model('Cell', {
  isOpen: false,
  isFlag: false,
  isBomb: false,
  value: 0
})

export const Game = types
  .model('Game', {
    width: 0,
    height: 0,

    bombCount: 0,
    cellsLeft: 0,

    isFinished: false,
    isWon: false,
    isLost: false,

    field: types.optional(
      // @ts-ignore
      types.array(types.optional(types.array(types.optional(Cell, {})), [])),
      []
    )
  })
  .actions(self => {