Skip to content

Instantly share code, notes, and snippets.

Avatar

Pochen Lin nightspirit

  • Skupos Inc.
  • United States
View GitHub Profile
@nightspirit
nightspirit / ngUpload.htm
Last active Aug 29, 2015
Angular directive for blueimp/jQuery-File-Upload
View ngUpload.htm
<div ng-controller="uploadCtrl as upload">
<!-- input file
input name can be changed to fit the server side
-->
<input type="file" name="myFile"
file-read
upload-data="upload.data",
preview="upload.preview",
validate="upload.validate.file"/>
@nightspirit
nightspirit / cookie.js
Last active Aug 29, 2015
Global cookie getter/setter
View cookie.js
@nightspirit
nightspirit / defer.js
Created Mar 20, 2015
Javascript Defer snippet
View defer.js
function Defer () {
var result = {};
result.promise = new Promise(function(resolve, reject) {
result.resolve = resolve;
result.reject = reject;
});
return result;
};
View observable.js
function Observable(init_value) {
var _value = init_value;
var subscriber = [];
function obs() {
if (arguments.length) {
_value = arguments[0];
obs.trigger();
return this;
} else {
@nightspirit
nightspirit / fetch-external-data.js
Last active Apr 11, 2018
React 16.3 Life cycle hooks example
View fetch-external-data.js
//before
componentWillMount() {
this._asyncRequest = asyncLoadData()
.then(externalData => {
this._asyncRequest = null
this.setState({externalData})
})
}
//after
@nightspirit
nightspirit / componentWillUpdate.js
Created Apr 11, 2018
React 16.3 lifecycle hook
View componentWillUpdate.js
// before
componentWillUpdate(nextProps, nextState) {
if (
this.state.someStatefulValue !==
nextState.someStatefulValue
) {
nextProps.onChange(nextState.someStatefulValue);
}
}
View getDerivedStateFromProps.js
// before
componentWillReceiveProps(nextProps) {
if (this.props.currentRow !== nextProps.currentRow) {
this.setState({
isScrollingDown: nextProps.currentRow > this.props.currentRow
})
}
}
// after
View componentDidUpdate.js
componentDidUpdate(prevProps, prevState) {
if (this.props.reqPending !== prevProps.reqPending && !this.props.reqPending) {
if(!this.props.error){
this.props.history.push('/next-page')
}
}
}
@nightspirit
nightspirit / context.js
Created Apr 15, 2018
react context example
View context.js
import React from 'react'
const ctx = React.createContext()
export const {Provider, Consumer} = ctx
export const withCounter = Component => props => <Consumer>{value => <Component {...props} counter={value} />}</Consumer>
export default ctx
@nightspirit
nightspirit / CounterIncBtn .js
Created Apr 15, 2018
react context example
View CounterIncBtn .js
import React from 'react'
import { withCounter } from './context'
const IncBtn = ({ counter }) => <button type='button' className='btn btn-primary btn-block' onClick={counter.inc}>+</button>
const CounterIncBtn = withCounter(IncBtn)
export default CounterIncBtn