thomasJang

  handleRowResizerMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const { activePanel } = this.props.appStore.uiStore.queryPanelStore;
    const containerTop = this.containerRef.current.getBoundingClientRect().top;
    mouseEventSubscribe(
      (mpos: IMousePosition) => {
        const resizerTop = mpos.clientY - containerTop;
        activePanel.setFlexGlow((resizerTop * 2) / this.containerHeight);
      },
      () => {
        // onSubscribeEnd

thomasJang

function sortPanel(fromIndex: number, toIndex: number) {
  const movePanel = self.panelsRefs[fromIndex];
  self.panelsRefs.splice(fromIndex, 1); 
  self.panelsRefs.splice(toIndex, 0, movePanel);
  open(movePanel);
}

thomasJang

handleDragEnd = (tabIndex: number, e: React.DragEvent) => {
  const { sortPanel } = this.props.appStore.uiStore.queryPanelStore;

  if (
    this.dragTabIndex !== undefined &&
    this.dragOverTabIndex !== undefined &&
    this.dragTabIndex !== this.dragOverTabIndex
  ) {
    sortPanel(this.dragTabIndex, this.dragOverTabIndex);
  }

thomasJang

.ant-modal {
  top: 24px;
  .effect() {
    animation-duration: 0.3s;
    animation-fill-mode: both;
  }

  &.slidedown-enter,
  &.slidedown-appear {
    opacity: 0;

thomasJang

export interface IMousePosition {
  pageX: number;
  pageY: number;
  clientX: number;
  clientY: number;
}
export type MouseEventSubscribeCallbackFn = (mpos: IMousePosition) => void;

const mouseEventSubscribe = (
  callBack: MouseEventSubscribeCallbackFn,

thomasJang

<ReactMultiEmail
  placeholder="Input your email"
  emails={emails}
  onChange={(_emails: string[]) => {
    this.setState({ emails: _emails });
  }}
  getLabel={(
    email: string,
    index: number,
    removeEmail: (index: number) => void,

thomasJang

export interface ISMixinFlex {
  direction?: 'row' | 'column';
  justifyContent?:
    | 'normal'
    | 'space-between'
    | 'space-around'
    | 'space-evenly'
    | 'stretch'
    | 'start'
    | 'end'

thomasJang

  "scripts": {
    "start": "npm-run-all -p build-watch:less-var build-watch:react",
    "tslint-check": "tslint-config-prettier-check ./tslint.json",
    "build-watch:react": "react-app-rewired start --scripts-version react-scripts-ts",
    "build-watch:less-var": "ts-node -P ./tsconfig.dev.json ./script/generate-less-var.ts"
  }

thomasJang

const path = require('path');
const fs = require('fs-extra');
const chalk = require('chalk');
const srcPath = '../src/styles/theme.ts';
const srcResoloved = path.resolve(__dirname, srcPath);
const target = path.resolve(__dirname, '../src/styles/less/theme-vars.less');
const buildLessVar = () => {
  delete require.cache[srcResoloved];
  const theme = require(srcPath);
  fs.writeFileSync(

thomasJang

import * as React from 'react';
import { styled } from 'styledComponents';

const Component = styled.div`
  width: 100%;
  font-size: 0.8em;
  color: ${p => p.theme.normal_color};

  [data-container] {
    height: 60px;