refactor(Schema): add non-editable state and bring Schema into app

`Schema` is now apart of the `Structure` component! We have schema editing in app :)

app/components/Structure.tsx

@@ -123,6 +123,7 @@ const Structure: React.FunctionComponent<StructureProps> = ({ peername, name, st
  <Schema
  schema={structure ? structure.schema : undefined}
  onAccept={handleWriteSchema}
+ editable={!history}
  />
  </div>
  </div>

app/components/form/DynamicEditField.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import classNames from 'classnames'
 
 interface DynamicEditFieldProps {
- placeholder: string
+ placeholder?: string
  // validate function expects a value string and returns a boolean
  // called when user changes input value
  // true means the input is valid, false means it's invalid
@@ -14,8 +14,10 @@ interface DynamicEditFieldProps {
  maxLength?: number
  expanded?: boolean
  name: string
- row: number
+ row?: number
  large?: boolean
+ // editable defaults to true
+ editable?: boolean
 }
 
 const DynamicEditField: React.FunctionComponent<DynamicEditFieldProps> = ({
@@ -29,7 +31,8 @@ const DynamicEditField: React.FunctionComponent<DynamicEditFieldProps> = ({
  maxLength,
  expanded = false,
  row = 0,
- large = false
+ large = false,
+ editable = true
 }) => {
  const [ newValue, setNewValue ] = React.useState(value)
  const [ isValid, setIsValid ] = React.useState(true)
@@ -129,11 +132,11 @@ const DynamicEditField: React.FunctionComponent<DynamicEditFieldProps> = ({
  }
 
  return (
- <div style={{ width }} className={classNames('dynamic-edit-field', { 'invalid': !isValid, 'dynamic-edit-field-large': large, 'focused': focused })} >
+ <div style={{ width }} className={classNames('dynamic-edit-field', { 'invalid': !isValid, 'dynamic-edit-field-large': large, 'focused': focused, 'dynamic-edit-field-editable': editable })} >
  <div
  suppressContentEditableWarning={true}
  className={classNames({ 'expanded': expanded })}
- contentEditable={true}
+ contentEditable={editable}
  onInput={handleChange}
  ref={ref}
  id={`${name}-${row}`}

app/components/item/SchemaItem.tsx

@@ -6,12 +6,14 @@ import TypePicker from '../structure/TypePicker'
 import classNames from 'classnames'
 
 interface SchemaItemProps {
- onAccept: (field: string) => (value: string) => void
+ onAccept?: (field: string) => (value: string) => void
  title: string
  type: DataTypes | DataTypes[]
  description: string
  validation: string
  row: number
+ // editable defaults to true
+ editable?: boolean
 }
 
 const SchemaItemProps: React.FunctionComponent<SchemaItemProps> = ({
@@ -20,7 +22,8 @@ const SchemaItemProps: React.FunctionComponent<SchemaItemProps> = ({
  title,
  type,
  description,
- validation
+ validation,
+ editable = true
 }) => {
  const [expanded, setExpanded] = React.useState(false)
 
@@ -36,19 +39,21 @@ const SchemaItemProps: React.FunctionComponent<SchemaItemProps> = ({
  name='title'
  placeholder='title'
  value={title}
- onAccept={onAccept('title')}
+ onAccept={onAccept && editable ? onAccept('title') : undefined}
  allowEmpty={false}
  large
  width={150}
  expanded={expanded}
+ editable={editable}
  />
  </div>
  <div>
  <TypePicker
  name={row}
- onPickType={onAccept('type')}
+ onPickType={onAccept && editable ? onAccept('type') : undefined}
  type={type}
  expanded={expanded}
+ editable={editable}
  />
  </div>
  <div>
@@ -57,9 +62,10 @@ const SchemaItemProps: React.FunctionComponent<SchemaItemProps> = ({
  name='description'
  placeholder='description'
  value={description}
- onAccept={onAccept('description')}
+ onAccept={onAccept && editable ? onAccept('description') : undefined}
  allowEmpty expanded={expanded}
  width={200}
+ editable={editable}
  />
  </div>
  <div>
@@ -68,9 +74,10 @@ const SchemaItemProps: React.FunctionComponent<SchemaItemProps> = ({
  name='validation'
  placeholder='validation'
  value={validation}
- onAccept={onAccept('validation')}
+ onAccept={onAccept && editable ? onAccept('validation') : undefined}
  allowEmpty expanded={expanded}
  width={100}
+ editable={editable}
  />
  </div>
  </div>

app/components/overlay/Overlay.tsx

@@ -23,31 +23,35 @@ const Overlay: React.FunctionComponent<OverlayProps> = ({
 }) => {
  const overlayRef = React.useRef()
 
- React.useEffect(() => {
- const isInOverlay = (e: MouseEvent<HTMLDivElement, MouseEvent>) => {
- if (!onCancel || !overlayRef || !overlayRef.current) return
+ const isInOverlay = (e: MouseEvent<HTMLDivElement, MouseEvent>) => {
+ if (!onCancel || !overlayRef || !overlayRef.current) return
 
-  // figure out if the user clicking inside the overlay
-  const rect = overlayRef.current.getBoundingClientRect()
+ // figure out if the user clicking inside the overlay
+ const rect = overlayRef.current.getBoundingClientRect()
 
-  // http://stackoverflow.com/a/26984690/2114
-  const isIn =
-  rect.top <= e.clientY &&
-  e.clientY <= rect.top + rect.height &&
-  rect.left <= e.clientX &&
-  e.clientX <= rect.left + rect.width
+ // http://stackoverflow.com/a/26984690/2114
+ const isIn =
+ rect.top <= e.clientY &&
+ e.clientY <= rect.top + rect.height &&
+ rect.left <= e.clientX &&
+ e.clientX <= rect.left + rect.width
 
- if (!isIn) {
- e.stopPropagation()
- onCancel()
- }
+ if (!isIn) {
+ e.stopPropagation()
+ onCancel()
  }
+ }
 
-  window.addEventListener('click', isInOverlay)
- return () => (
+ React.useEffect(() => {
+ if (open) {
  window.addEventListener('click', isInOverlay)
+ } else {
+ window.removeEventListener('click', isInOverlay)
+ }
+ return () => (
+ window.removeEventListener('click', isInOverlay)
  )
- })
+ }, [open])
 
  return (
  <div

app/components/structure/ColumnType.tsx

@@ -6,7 +6,8 @@ import Icon from '../chrome/Icon'
 
 export interface ColumnTypeProps {
  type: DataTypes | DataTypes[]
- onClick: (e) => void
+ // to make the ColumnType not editable, do not pass in an onClick
+ onClick?: (e) => void
  active?: boolean
  expanded: boolean
 }

app/components/structure/Schema.tsx

@@ -4,12 +4,15 @@ import SchemaItem from '../item/SchemaItem'
 
 interface SchemaProps {
  schema: ISchema | undefined
- onAccept: (row: number) => (field: string) => any
+ onAccept?: (row: number) => (field: string) => any
+ // defaults to true
+ editable: boolean
 }
 
 const Schema: React.FunctionComponent<SchemaProps> = ({
  schema,
- onAccept
+ onAccept,
+ editable = true
 }) => {
  if (!schema) {
  return <div className='margin'>No schema specified</div>
@@ -33,11 +36,12 @@ const Schema: React.FunctionComponent<SchemaProps> = ({
  <div key={i}>
  <SchemaItem
  row={i}
- onAccept={onAccept(i)}
+ onAccept={onAccept ? onAccept(i) : undefined}
  title={item.title || ''}
  type={item.type || 'any'}
  description={item.description || ''}
  validation={item.validation || ''}
+ editable={editable}
  />
  </div>
  )

app/components/structure/TypePicker.tsx

@@ -8,8 +8,10 @@ import TabPicker from '../nav/TabPicker'
 interface TypePickerProps {
  name: string | number
  type: DataTypes | DataTypes[]
- onPickType: (type: string | string[]) => void
- expanded: boolean
+ onPickType?: (type: string | string[]) => void
+ expanded?: boolean
+ // editable defaults to true
+ editable?: boolean
 }
 
 export const typesAndDescriptions: Array<{ type: DataTypes, description: string }> = [
@@ -27,13 +29,14 @@ const TypePicker: React.FunctionComponent<TypePickerProps> = ({
  name,
  type = 'any',
  onPickType,
- expanded
+ expanded = false,
+ editable = true
 }) => {
  const [pickedType, setPickedType] = React.useState(type)
  const [isOverlayOpen, setOverlayOpen] = React.useState(false)
 
  const tabs = ['single', 'multi']
- const [activeTab, setActiveTab] = React.useState('single')
+ const [activeTab, setActiveTab] = React.useState(Array.isArray(type) ? 'multi' : 'single')
 
  const handleCancel = () => {
  setOverlayOpen(false)
@@ -42,7 +45,7 @@ const TypePicker: React.FunctionComponent<TypePickerProps> = ({
  let picked = e.target.getAttribute('data-value')
  if (activeTab === 'single') {
  setPickedType(picked)
- onPickType(picked)
+ if (onPickType) onPickType(picked)
  }
  if (activeTab === 'multi') {
  let pickedTypeList
@@ -56,17 +59,15 @@ const TypePicker: React.FunctionComponent<TypePickerProps> = ({
  })
  }
  setPickedType(pickedTypeList)
- onPickType(pickedTypeList)
+ if (onPickType) onPickType(pickedTypeList)
  }
  }
 
- const handleToggleOverlay = (e: MouseEvent<HTMLDivElement, MouseEvent>) => {
- e.stopPropagation()
+ const handleToggleOverlay = () => {
  setOverlayOpen(!isOverlayOpen)
  }
 
  const handleTabClick = (e: MouseEvent<HTMLDivElement, MouseEvent>) => {
- e.stopPropagation()
  const tab = e.target.getAttribute('data-value')
  setActiveTab(tab)
  }
@@ -95,7 +96,7 @@ const TypePicker: React.FunctionComponent<TypePickerProps> = ({
  <ColumnType
  type={pickedType}
  active={isOverlayOpen}
- onClick={handleToggleOverlay}
+ onClick={editable ? handleToggleOverlay : undefined}
  expanded={expanded}
  />
  <div className='type-picker-overlay'>

app/scss/0.4.0/form.scss

@@ -5,15 +5,18 @@
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
- cursor: text;
  line-height: 18px;
- 
+
  font-family: 'Avenir Next';
  font-size: 14px;
  font-weight: 300;
 
  resize: none;
 
+ &.dynamic-edit-field-editable {
+ cursor: text;
+ }
+
  &.dynamic-edit-field-large {
  font-size: 17px;
  font-weight: 600;

app/scss/0.4.0/structure.scss

@@ -58,6 +58,7 @@
 
 .schema-wrap {
  width: 100%;
+ max-width: 800px;
 
  .schema-header {
  display: flex;
@@ -73,12 +74,13 @@
  padding: 10px;
  border: solid 1px #E8E9ED;
  border-bottom: none;
- 
+
  div:first-child {
- margin-left: 40px;
+ margin-left: 80px;
  }
+
  div:last-child {
- margin-right: 20px;
+ margin-right: 30px;
  }
  }
 }

app/scss/_dataset.scss

@@ -9,14 +9,6 @@ $header-height: 30px;
 $header-font-size: .9rem;
 
 #dataset-container {
- .overlay {
- position: absolute;
- height: 100%;
- width: 100%;
- background-color: #000;
- opacity: 0.4;
- z-index: 110;
- }
 
  .header {
  height: 50px;