Skip to content

Instantly share code, notes, and snippets.

View sunnibfgi's full-sized avatar
🎯
Focusing

Son Ki-Kyun sunnibfgi

🎯
Focusing
View GitHub Profile
import React, { useRef, useCallback, useState, forwardRef, useEffect } from 'react'
import styles from './index.module.scss'
const useLongPress = (delay = 400) => {
const rafId = useRef()
const startTime = useRef()
const cancelRaf = () => {
if (rafId.current) {
const useLongPress = (delay = 1000) => {
let rafId = useRef()
const startTime = useRef()
const cancelRaf = () => {
if (rafId.current) {
cancelAnimationFrame(rafId.current)
rafId.current = undefined
startTime.current = undefined
}
@sunnibfgi
sunnibfgi / skills.js
Created December 3, 2023 11:26
skills
import React, { useState, useEffect, useCallback, useRef, useMemo, useTransition } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { uniqArray, structDataSource } from './helpers'
import SkillsSearchResult from './skillsSeachResult'
import SkillsSearch from './skillsSearch'
import SkillsContent from './skillsContent'
import SkillsBottom from './skillsBottom'
export default function SkillsPicker({
@sunnibfgi
sunnibfgi / sticky.js
Created June 15, 2023 09:50
horizontal scrolling
import React, { useEffect, useRef } from 'react'
import styled from '@emotion/styled'
import {
IconChecked,
FeaturePhone1,
FeaturePhone2,
FeaturePhone3,
FeaturePhone4
} from 'client/helpers/images'
import Button from 'client/components/common/Button/Button'
@sunnibfgi
sunnibfgi / demo.js
Created February 25, 2023 02:18
react createPortal
function CreateFootBarPortal({ children, id }) {
let [el, setEl] = useState(null)
useEffect(() => {
let element = document.getElementById(id)
if (!element) {
element = document.createElement('div')
element.setAttribute('id', id)
document.body.appendChild(element)
}
@sunnibfgi
sunnibfgi / dragdrop.js
Last active February 9, 2023 00:50
a simple drag
const dragDropExample = function () {
let usingTouch = false;
let startX = 0;
let startY = 0;
let isMoving = false;
function pointX(e) {
return usingTouch ? e.touches[0].clientX : e.clientX
}
@sunnibfgi
sunnibfgi / settings.json
Last active December 29, 2022 06:52
vscode settings
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"comment",
"comment.block",
"comment.block.documentation",
"comment.line",
"constant",
@sunnibfgi
sunnibfgi / antd-form-list.jsx
Last active September 1, 2022 08:55
demo for antd form data manipulation
import React, { useState, useEffect, useRef } from 'react'
import { Form, InputNumber, Col, Button, Select } from 'antd'
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons'
const country = [{
label: 'Germany',
value: 'Germany'
}, {
label: 'Czechia',
value: 'Czechia'
function groupArray(list, part) {
let listRef = [...list]
return list.reduce((curr) => {
listRef.length && curr.push(listRef.splice(0, part))
return curr
}, [])
}
@sunnibfgi
sunnibfgi / group-array.js
Last active April 10, 2021 14:13
group array
function groupArray(data, part = 100) {
var result = []
var start = 0
var len = data.length
for(var i = 0, len; i <= len; i++) {
if(len - start < part) {
result.push(data.slice(start, len))
break
}
else {