showing * for required columns

Author: sadakchap

src/components/DataBrowserHeader/DataBrowserHeader.react.js

@@ -54,7 +54,7 @@ const dataBrowserHeaderSource = {
 }))
 class DataBrowserHeader extends React.Component {
   render() {
-    let { connectDragSource, connectDropTarget, name, type, targetClass, order, style, isDragging, isOver } = this.props;
+    let { connectDragSource, connectDropTarget, name, type, targetClass, order, style, isDragging, isOver, required } = this.props;
     let classes = [styles.header, unselectable];
     if (order) {
       classes.push(styles[order]);
@@ -67,7 +67,7 @@ class DataBrowserHeader extends React.Component {
     }
     return connectDragSource(connectDropTarget(
       <div className={classes.join(' ')} style={style}>
-        <div className={styles.name}>{name}</div>
+        <div className={styles.name}>{name} {required && <span>*</span>}</div>
         <div className={styles.type}>{targetClass ? `${type} <${targetClass}>` : type}</div>
       </div>
     ));

src/components/DataBrowserHeader/DataBrowserHeader.scss

@@ -20,15 +20,21 @@
 }
 
 .name {
+  position: relative;
   color: white;
   font-size: 12px;
   height: 22px;
   line-height: 22px;
-  margin-right: 8px;
+  padding-right: 8px;
   float: left;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  & span {
+    position: absolute;
+    top: -6px;
+    right: 0;
+  }
 }
 
 .type {
@@ -38,6 +44,7 @@
   line-height: 22px;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-left: 8px;
 }
 
 .ascending {

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -27,7 +27,7 @@ export default class DataBrowserHeaderBar extends React.Component {
       </div>
     ];
 
-    headers.forEach(({ width, name, type, targetClass, order, visible, preventSort }, i) => {
+    headers.forEach(({ width, name, type, targetClass, order, visible, preventSort, required }, i) => {
       if (!visible) return;
       let wrapStyle = { width };
       if (i % 2) {
@@ -57,6 +57,7 @@ export default class DataBrowserHeaderBar extends React.Component {
             targetClass={targetClass}
             order={order}
             index={i}
+            required={required}
             moveDataBrowserHeader={this.props.handleDragDrop}/>
         </div>
       );