Skip to content

Instantly share code, notes, and snippets.

Avatar

Gray Zhang otakustay

View GitHub Profile
@otakustay
otakustay / useSelection.ts
Created Feb 22, 2020
React hook to control table selection
View useSelection.ts
import {useReducer, useCallback} from 'react';
import {union, without, difference, range} from 'lodash';
interface Action {
type: 'single' | 'multiple' | 'range';
payload: number;
}
export interface SelectionMethods {
selectIndex(index: number, e: ClickContext): void;
@otakustay
otakustay / index.tsx
Created Nov 7, 2019
usePerformanceTiming
View index.tsx
import {useRef, useLayoutEffect} from 'react';
interface PerformanceTiming {
firstRender: number;
firstLayout: number;
firstMeaningfulRender: number;
firstMeaningfulLayout: number;
}
const usePerformanceRecord = () => {
@otakustay
otakustay / index.ts
Created Oct 24, 2019
user attention detection
View index.ts
interface Options {
readonly maxIdleTime?: number;
}
type AttentionState = 'active' | 'inactive' | 'unknown';
interface AttentionChangeEvent {
readonly state: AttentionState;
readonly active: boolean;
readonly lastAction: number;
View unidiff.js
"use strict";
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
!function (e, n) {
"object" == (typeof exports === "undefined" ? "undefined" : _typeof(exports)) && "undefined" != typeof module ? n(exports) : "function" == typeof define && define.amd ? define(["exports"], n) : n(e.unidiff = {});
}(void 0, function (e) {
"use strict";
function n(e) {
@otakustay
otakustay / rollup.js
Created May 20, 2019
svg icon rollup
View rollup.js
const {rollup} = require('rollup');
const babel = require('rollup-plugin-babel');
const svgToReact = require('rollup-plugin-svg-to-jsx');
const autoExternal = require('rollup-plugin-auto-external');
const resolve = require('rollup-plugin-node-resolve');
const css = require('rollup-plugin-postcss');
const babelConfig = {
presets: [
[
@otakustay
otakustay / quick-start.md
Created Mar 25, 2019
reskript quick start
View quick-start.md

首先建立一个新的目录,并使用yarn init进行初始化:

mkdir hello-world
yarn init -y

然后安装reskript

@otakustay
otakustay / upgrade.js
Created Mar 15, 2019
Upgrade to reskript
View upgrade.js
const path = require('path');
const fs = require('fs');
const {execSync} = require('child_process');
const {sync: rimraf} = require('rimraf');
const {sync: glob} = require('glob');
const {mapValues} = require('lodash');
const topLevelModuleNames = glob('src/*/').map(path => path.slice(4, -1));
const replaceImportAlias = content => topLevelModuleNames.reduce(
@otakustay
otakustay / hoc.jsx
Last active Feb 13, 2019
Convert HOC to Hook
View hoc.jsx
// HOC版本
const withDelayHint = (loadingPropName, delay) => ComponentIn => class extends Component {
state = {
timer: null,
isDelayed: false
};
tryStartTimer = () => {
clearTimeout(this.state.timer);
@otakustay
otakustay / syntax-token.json
Last active Jul 13, 2018
Syntax highlight
View syntax-token.json
[
{
"type": "comment",
"text": "/***************************************************************************"
},
{
"type": "lineBreak"
},
{
"type": "comment",
@otakustay
otakustay / Diff.js
Created Mar 9, 2018
state management in react
View Diff.js
import {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {createSelector} from 'reselect';
import {parseDiff, addStubHunk, expandFromRawCode, Diff, Hunk} from 'react-diff-view';
import {push} from 'san-update/fp';
import {diffLines, formatLines} from 'unidiff';
import {property} from 'lodash/fp';
import 'react-diff-view/index.css';
import HunkHeader from './HunkHeader';
You can’t perform that action at this time.