Skip to content

Instantly share code, notes, and snippets.

Avatar

yucj YuCJ

View GitHub Profile
@YuCJ
YuCJ / compose-refs.jsx
Last active Aug 3, 2020
When a component takes refs passed by its parent, and it needs to retrive the DOM value by itself also, we have to compose the ref before passing the refs down.
View compose-refs.jsx
function updateElementInRef(element, ref) {
if (typeof ref === 'function') {
/*
The ref is a callback ref.
https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
*/
ref(element)
} else if (ref) {
/*
The ref is an object expected to be mutated with property `current`.
View handle-promise.js
function getList() {
const list = [1, 2, 0, 3, 4]
return Promise.resolve(list)
}
function task() {
return new Promise((resolve, reject) => {
getList()
.then((list) => {
let hasFailure = false
@YuCJ
YuCJ / pureSplice.js
Last active Jul 15, 2020
A pure version of Array.prototype.splice(). It will return a new array rather than mutate the array.
View pureSplice.js
/**
* A pure version of Array.prototype.splice
* It will return a new array rather than mutate the array
* See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
* @param {Array} array The target array
* @param {number} start Index at which to start changing the array
* @param {number} deleteCount An integer indicating the number of old array elements to remove
* @param {any} items The elements to add to the array, beginning at the start index
* @returns {Array}
*/
View collapse.js
import $ from 'jquery'
import Util from './util'
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0): collapse.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
View fullpage-slide-height-by-device.md
裝置解析度 實際可用高度
iPhone 6,7,8 375 x 667 559
iPhone 6,7,8 Plus 414 x 736 628
iPad 768 x 1024 928
iPad Pro 1024 x 1366 1270
View page-transition.md
Set 1 Set 2 Set 3
1 Enter from previous page animeEnter animeEnter animeEnterFromPrev
2 Enter from next page reversed animeExit animeEnter animeEnterFromNext
3 Exit to next page animeExit animeExit animeExitToNext
4 Exit to previous page reversed animeEnter animeExit animeExitToPrev
View fullpage-material-by-device.md
Device Width Height fg object-fit bg object-fit
Desktop 1440 810 cover cover
Tablet 1024 1024 cover cover
Mobile 768 1024 contain/cover cover
View slides-children-by-function.jsx
import map from 'lodash.map'
import React from 'react'
import Viewport from './fullpage-slides-viewport'
const backgroundData = [{/* slide 0 bg */}, {/* slide 2 bg */}, {/* slide 4 bg */}]
const textData = [{/* slide 0 text */}, {/* slide 3 text */}, {/* slide 4 text */}]
const _ = {
map,
}
View slides-children-by-slide.jsx
import map from 'lodash.map'
import React from 'react'
import Viewport from './fullpage-slides-viewport'
const slidesData = [{/* slide 0 */}, {/* slide 1 */}, {/* slide 2 */}]
const _ = {
map,
}
class App extends React.Component {
You can’t perform that action at this time.