Merge pull request #640 from nhn/feat/column/event-blocks/2.0

feat: [v2] add column events layout

Author: 유동식

package-lock.json

@@ -42,6 +42,7 @@
     "@storybook/addon-links": "^5.3.13",
     "@storybook/addons": "^5.3.13",
     "@storybook/preact": "^5.3.13",
+    "@types/chance": "^1.1.0",
     "@types/classnames": "^2.2.9",
     "@types/jasmine": "^2.8.16",
     "@types/karma-fixture": "^0.2.5",
@@ -50,6 +51,7 @@
     "@typescript-eslint/eslint-plugin": "^2.3.0",
     "@typescript-eslint/parser": "^2.3.0",
     "babel-loader": "^8.0.6",
+    "chance": "^1.1.6",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.2.0",
     "eslint": "^6.4.0",
@@ -138,7 +140,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@toast-ui/date": "0.0.2",
+    "@toast-ui/date": "0.0.3",
     "classnames": "^2.2.6",
     "preact": "^10.3.2",
     "preact-markup": "^2.0.0",

package.json

@@ -1,3 +1,3 @@
 .event-background {
-  display: inline-block;
+  position: absolute;
 }

src/sass/events/background.scss

@@ -1 +1,2 @@
 @import './background.scss';
+@import './time.scss';

src/sass/events/index.scss

@@ -0,0 +1,26 @@
+.event-time {
+  position: absolute;
+  overflow: hidden;
+
+  cursor: pointer;
+
+  .travel-time,
+  .event-time-content {
+    overflow: hidden;
+    padding: 1px 0 0 3px;
+    font-size: 12px;
+  }
+}
+
+.resize-handler-x {
+  position: absolute;
+  right: 0;
+  bottom: 1px;
+  left: 0;
+  height: 5px;
+  text-align: center;
+  color: #fff;
+  cursor: row-resize;
+
+  background: url(./image/handler-x.png) no-repeat center center;
+}

src/sass/events/time.scss

@@ -19,10 +19,6 @@
     }
   }
 
-  .event-background {
-    position: absolute;
-  }
-
   .guide-creation {
     position: absolute;
     right: 10px;
@@ -42,4 +38,12 @@
       }
     }
   }
+
+  .events {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
 }

src/sass/image/handle-x.png src/sass/image/handler-x.png

@@ -0,0 +1,116 @@
+import { h } from 'preact';
+import { Template } from '@src/components/template';
+import { cls } from '@src/util/cssHelper';
+import ScheduleViewModel from '@src/model/scheduleViewModel';
+import { toPercent } from '@src/util/units';
+
+const classNames = {
+  time: cls('event-time'),
+  content: cls('event-time-content'),
+  travelTime: cls('travel-time'),
+  resizeHandleX: cls('resize-handler-x')
+};
+
+interface Props {
+  viewModel: ScheduleViewModel;
+}
+
+function getStyles(viewModel: ScheduleViewModel) {
+  const {
+    top,
+    left,
+    height,
+    width,
+    model,
+    goingDurationHeight,
+    modelDurationHeight,
+    comingDurationHeight,
+    croppedStart,
+    croppedEnd
+  } = viewModel;
+  // get theme values
+  const travelBorderColor = 'white';
+  const borderRadius = 2;
+  const paddingLeft = 2;
+  const defaultMarginBottom = 2;
+  const marginLeft = left > 0 ? paddingLeft : 0;
+
+  const { color, bgColor, borderColor } = model;
+  const containerStyle: Record<string, string | number> = {
+    width: width >= 0 ? `calc(${toPercent(width)} - ${marginLeft}px)` : '',
+    height: `calc(${toPercent(height)} - ${defaultMarginBottom}px)`,
+    top: toPercent(top),
+    left: toPercent(left),
+    borderRadius,
+    borderLeft: `3px solid ${borderColor}`,
+    marginLeft,
+    color,
+    backgroundColor: bgColor
+  };
+  const goingDurationStyle = {
+    height: toPercent(goingDurationHeight),
+    borderBottom: `1px dashed ${travelBorderColor}`
+  };
+  const modelDurationStyle = {
+    height: toPercent(modelDurationHeight)
+  };
+  const comingDurationStyle = {
+    height: toPercent(comingDurationHeight),
+    borderTop: `1px dashed ${travelBorderColor}`
+  };
+
+  if (croppedStart) {
+    containerStyle.borderTopLeftRadius = 0;
+    containerStyle.borderTopRightRadius = 0;
+  }
+
+  if (croppedEnd) {
+    containerStyle.borderBottomLeftRadius = 0;
+    containerStyle.borderBottomRightRadius = 0;
+  }
+
+  return {
+    containerStyle,
+    goingDurationStyle,
+    modelDurationStyle,
+    comingDurationStyle
+  };
+}
+
+export function TimeEvent(props: Props) {
+  const { viewModel } = props;
+  const {
+    model,
+    goingDurationHeight,
+    modelDurationHeight,
+    comingDurationHeight,
+    croppedEnd
+  } = viewModel;
+  const { isReadOnly } = model;
+  const { containerStyle, goingDurationStyle, modelDurationStyle, comingDurationStyle } = getStyles(
+    viewModel
+  );
+
+  return (
+    <div className={classNames.time} style={containerStyle}>
+      {goingDurationHeight ? (
+        <div className={classNames.travelTime} style={goingDurationStyle}>
+          <Template template="goingDuration" model={model} />
+        </div>
+      ) : null}
+      {modelDurationHeight ? (
+        <div className={classNames.content} style={modelDurationStyle}>
+          <Template template="time" model={model} />
+        </div>
+      ) : null}
+      {comingDurationHeight ? (
+        <div className={classNames.travelTime} style={comingDurationStyle}>
+          <Template template="comingDuration" model={model} />
+        </div>
+      ) : null}
+      {!croppedEnd && !isReadOnly ? <div className={classNames.resizeHandleX} /> : null}
+    </div>
+  );
+}
+TimeEvent.displayName = 'TimeEvent';
+TimeEvent.defaultProps = {};

src/sass/image/[email protected] src/sass/image/[email protected]

@@ -1,6 +1,7 @@
 import { h } from 'preact';
 import Markup from 'preact-markup';
 import isString from 'tui-code-snippet/type/isString';
+import browser from 'tui-code-snippet/browser/browser';
 import { identity } from '@src/util';
 import { TemplateName } from '@src/template/default';
 import ContextComponent from '@src/components/contextComponent';
@@ -21,10 +22,14 @@ export class Template extends ContextComponent<Props> {
     const templateFunc: Function = templates[template] || identity;
     const htmlOrVnode = templateFunc(model, h);
 
-    return isString(htmlOrVnode) ? (
-      <Markup wrap={false} markup={htmlOrVnode} type="html" />
-    ) : (
-      htmlOrVnode
-    );
+    if (isString(htmlOrVnode)) {
+      if (browser.msie && browser.version === 9) {
+        return <span dangerouslySetInnerHTML={{ __html: htmlOrVnode }} />;
+      }
+
+      return <Markup wrap={false} markup={htmlOrVnode} type="html" />;
+    }
+
+    return htmlOrVnode;
   }
 }