Post List

2016년 10월 26일 수요일

Walmart Electrode #03 Component Helpers

Components 에 대한 helpers 개발

1. 위치 : <your-awesome-component>/src/helpers/graph-styles.js
src 디렉토리 밑에 helpers 디렉토리를 신규 생성하고 graph-styles.js 파일을 생성 후 아래 내용을 코딩한다.



[binrang@binrang src]$ pwd
/home/binrang/br-electrode-component/br-elec-component/src
[binrang@binrang src]$ mkdir helpers
[binrang@binrang src]$ cd helpers/
[binrang@binrang helpers]$ vi graph-styles.js
const PARENT = {divisor: 2};
const CHILD = {divisor: 4, rotateBack: -1};
const SINGLE = {marginDivisor: 8};
const CONTAINER = {paddingDivisor: .13, marginDivisor: .13};
export default (type, size, rotateVal) => {
  const nodeSize = type === "child" ? (size / CHILD.divisor) : (size / PARENT.divisor);
  const parentOrSingle = {
    width: `${nodeSize}em`,
    height: `${nodeSize}em`,
    margin: `-${nodeSize / PARENT.divisor}em`,
    display: `block`,
    position: `absolute`,
    top: `50%`,
    left: `50%`,
    transform: `translate(0em)`
  };
  switch (type) {
  case "single": {
    const singleNode = {
      display: `inline-block`,
      position: `relative`,
      margin: `${nodeSize / SINGLE.marginDivisor}em`
    };
    ["width", "height"].map((prop) => singleNode[prop] = parentOrSingle[prop]);
    return singleNode;
  }
  case "child": {
    const childNode = {
      transform: `rotate(${rotateVal * 1}deg) translate(${nodeSize * PARENT.divisor}em) rotate(${rotateVal * CHILD.rotateBack}deg)`, // eslint-disable-line max-len
      backgroundSize: `100%`
    };
    return Object.assign(parentOrSingle, childNode);
  }
  case "container": {
    return {
      position: `relative`,
      width: `${size}em`,
      height: `${size}em`,
      padding: `${size * CONTAINER.paddingDivisor}em`,
      borderRadius: `50%`,
      display: `inline-block`,
      margin: `${size * CONTAINER.marginDivisor}em`
    };
  }
  default: {
    return parentOrSingle;
  }
  }
};

참조 URL : component_helpers.html