React Snippets

ts/tsx js/jsx 代码提示

• ///:

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */

• mi:

import $1 from '$2';

• mis:

import styled from 'styled-components';

• minav:

import { NavigationActions } from 'react-navigation';

• mimed:

import { actionCreator, actions, ActionsObservable, BATCH_ACTIONS, epicCreator, flowable, IAction, mutate, replace } from 'mario-meditation';

• miuti:

import { $1 } from 'mario-utilities';

• miarch:

import { $1 } from 'mario-architecture-components';

• mirn:

import {
  Button,
  Image,
  ImageStyle,
  StyleSheet,
  Text,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';

• ps:

this.props.

• st:

this.state.

• sst:

this.setState({
  $1
});

• ssf:

this.setState((prevState: any, props: any) => ({
  $1
}));

• source:

source={$1}

• style:

style={$1}

• numberOfLines:

numberOfLines={$1}

• activeOpacity:

activeOpacity={$1}

• resizeMode:

resizeMode=$1

• cover:

'cover'

• contain:

'contain'

• stretch:

'stretch'

• repeat:

'repeat'

• center:

'center'

• onPress:

onPress={$1}

• onChangeText:

onChangeText={$1}

• onChange:

onChange={$1}

• value:

value={$1}

• multiline:

multiline={$1}

• actionCreator:

actionCreator($1)

• createAction:

createAction($1)($2)$3

• mreducer:

$1(state: any, payload: any) { return mutate(state, { $1: payload }); },

• arrow:

($1) => {
  $2
}

• setTimeout:

setTimeout(() => {
  $1
});

• promise:

new Promise((resolve, reject) => {
  $1
});

• fore:

$1.forEach((item: any, index: number) => {
  $2
});

• map:

$1.map((item: any) => $2);

• filter:

$1.filter((item: any) => $2);

• dob:

const { $2 } = $1;

• dar:

const [ $2 ] = $1;

• bnd:

@bind(({  }: any) => {
  $1
})

• constructor:

public constructor(props: Readonly<${1:IProps}>) {
  super(props);
 
  $1
}

• cwm:

public componentWillMount() {
  $1
}

• cdm:

public componentDidMount() {
  $1
}

• cwum:

public componentWillUnmount() {
  $1
}

• cwrp:

public componentWillReceiveProps(nextProps: Readonly<any>) {
  $1
}

• cwud:

public componentWillUpdate(nextProps: Readonly<any>, nextState: Readonly<any>) {
  $1
}

• scud:

public shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<any>) {
  $1
}

• cdud:

public componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>) {
  $1
}

• cdc:

public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
  $1
}

• ren:

public render() {
  return (
    $1
  );
}

• pt:

$1: PropTypes.$2,

• ptr:

$1: PropTypes.$2.isRequired,

• ssc:

const styles = StyleSheet.create<IStyle>({
  container: {
    $1
  },
 
});

• flex:

flex: $1,

• justifyContent:

justifyContent: '${1:center}',

• ai:

alignItems: '${1:center}',

• as:

alignSelf: '${1:center}',

• flex-start:

'flex-start'

• flex-end:

'flex-end'

• center:

'center'

• space-between:

'space-between'

• space-around:

'space-around'

• borderBottomWidth:

borderBottomWidth: $1,

• borderLeftWidth:

borderLeftWidth: $1,

• borderRightWidth:

borderRightWidth: $1,

• borderTopWidth:

borderTopWidth: $1,

• borderWidth:

borderWidth: $1,

• flexDirection:

flexDirection: $1,

• row:

'row'

• row-reverse:

'row-reverse'

• column:

'column'

• column-reverse:

'column-reverse'

• height:

height: $1,

• width:

width: $1,

• margin:

margin: $1,

• marginBottom:

marginBottom: $1,

• marginLeft:

marginLeft: $1,

• marginRight:

marginRight: $1,

• marginTop:

marginTop: $1,

• marginHorizontal:

marginHorizontal: $1,

• marginVertical:

marginVertical: $1,

• maxHeight:

maxHeight: $1,

• maxWidth:

maxWidth: $1,

• minHeight:

minHeight: $1,

• minWidth:

minWidth: $1,

• overflow:

overflow: $1,

• visible:

'visible'

• hidden:

'hidden'

• scroll:

'scroll'

• padding:

padding: $1,

• paddingBottom:

paddingBottom: $1,

• paddingHorizontal:

paddingHorizontal: $1,

• paddingLeft:

paddingLeft: $1,

• paddingRight:

paddingRight: $1,

• paddingTop:

paddingTop: $1,

• paddingVertical:

paddingVertical: $1,

• position:

position: $1,

• zIndex:

zIndex: $1,

• top:

top: $1,

• left:

left: $1,

• right:

right: $1,

• bottom:

bottom: $1,

• fontSize:

fontSize: $1,

• fontWeight:

fontWeight: '$1',

• bold:

'bold'

• backgroundColor:

backgroundColor: '$1',

• borderColor:

borderColor: '$1',

• borderTopColor:

borderTopColor: '$1',

• borderRightColor:

borderRightColor: '$1',

• borderBottomColor:

borderBottomColor: '$1',

• borderLeftColor:

borderLeftColor: '$1',

• borderRadius:

borderRadius: $1,

• borderTopLeftRadius:

borderTopLeftRadius: $1,

• borderTopRightRadius:

borderTopRightRadius: $1,

• borderBottomLeftRadius:

borderBottomLeftRadius: $1,

• borderBottomRightRadius:

borderBottomRightRadius: $1,

• borderStyle:

borderStyle: '$1',

• solid:

'solid'

• dotted:

'dotted'

• dashed:

'dashed'

• opacity:

opacity: $1

• newe:

$1Epic(action$: ActionsObservable, store: any, dependencies: any) {
  return epicCreator(action$)($2)((action: IAction) =>
    $3Task(action.payload.toJS())
      .map((response: any) => {
        $4
        return actionCreator(NETWORK_SUCCESS);
      })
      .catch((error: IError) => {
        return flowable(actionCreator(NETWORK_FAILURE));
      }),
  );
},

• rcv

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import React from 'react';
 
import { IViewModelProps } from '../view-model/index';
 
export default (props: Readonly<IViewModelProps>) => (
  <div style={styles.container}>
 
  </div>
);
 
const styles = {
  container: {
 
  },
 
};
 

• rncv

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import React from 'react';
import {
  Button,
  Image,
  ImageStyle,
  StyleSheet,
  Text,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';
 
import { IViewModelProps } from '../view-model/index';
 
export interface IStyle {
  container: ViewStyle;
 
}
 
export default (props: Readonly<IViewModelProps>) => (
  <View style={styles.container}>
 
  </View>
);
 
const styles = StyleSheet.create<IStyle>({
  container: {
 
  },
 
});
 

• rcc

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { mario, bind } from 'mario-meditation';
import { inject, ViewModel } from 'mario-architecture-components';
 
import { $1Selector } from '../selector/index';
import { $1ViewModel, IViewModelProps } from '../view-model/index';
import { $1View } from '../view/index';
 
mario.model(require('../models/index'));
 
export default bind($1Selector)(inject<IViewModelProps, ViewModel<IViewModelProps>>($1View, $1ViewModel));
 

• rcdc

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { mario, bind } from 'mario-meditation';
import { inject, ViewModel } from 'mario-architecture-components';
 
import { $1Selector } from '../selector/index';
import { $1ViewModel, IViewModelProps } from '../view-model/index';
import { $1View } from '../view/index';
 
export default dynamic({
  models: () => [ require('../models/index') ],
  component: () => Promise.resolve(bind($1Selector)(inject<IViewModelProps, ViewModel<IViewModelProps>>($1View, $1ViewModel))),
});
 

• rcm

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { actionCreator, actions, ActionsObservable, BATCH_ACTIONS, epicCreator, flowable, IAction, mutate } from 'mario-meditation';
import { log, toString } from 'mario-utilities';
 
import { NETWORK_FAILURE, NETWORK_SUCCESS } from 'dataflow/actions';
import { IError, IResponse } from 'task';
// import {  } from '../actions/index';
// import {  } from '../task/index';
 
export default {
  name: '$1',
  immutable: true,
  initialState: {
 
  },
  epics: {
 
  },
};
 

• rcvm

/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import { ViewModel } from 'mario-architecture-components';
import { actions, actionCreator, createAction, IAction } from 'mario-meditation';
 
import {  } from '../actions/index';
 
export interface IModel {
 
}
 
export interface IHandlers {
 
}
 
export interface IViewModelProps extends IModel, IHandlers {
  navigation: any;
  dispatch: (action: IAction) => any;
}
 
export default class extends ViewModel<IViewModelProps> {
 
  public model = () => ({
 
  })
 
  public handlers = () => ({
 
  })
 
}