message: feat: basic add / remove ui
diff: @@ -7,39 +7,79 @@ import {
  import * as R from 'ramda'
  import * as React from 'react'
  -import { Icon, faPlus, styled } from '..'
  +import { Icon, faPlus, faTrashAlt, styled } from '..'
  -const AddButton = styled.button({
  - borderRadius: '50%',
  +const FloatingButton = styled.button({
  outline: 'none',
  - width: '35px',
  - height: '35px',
  + width: '100%',
  + height: '1em',
  + background: 'none',
  border: 'none',
  - margin: 'auto',
  - hover: {
  - backgroundColor: '#333333'
  + padding: 0,
  + margin: '0 auto',
  + borderRadius: 0,
  + opacity: 0.15,
  + '&:hover': {
  + cursor: 'pointer',
  + opacity: 1
  }
  })
  -const AddButtonContainer = styled.div({
  +const FloatingButtonContainer = styled.div({
  + position: 'absolute',
  + height: '0',
  textAlign: 'center'
  })
  +const TopFloatingButtonContainer = styled(FloatingButtonContainer)({
  + top: '0',
  + width: '20px',
  + left: '50%'
  +})
  +
  +const BottomFloatingButtonContainer = styled(FloatingButtonContainer)({
  + bottom: '10px',
  + width: '20px',
  + left: '50%'
  +})
  +
  +const RightFloatingButtonContainer = styled(FloatingButtonContainer)({
  + // top: '-10px',
  + top: 0,
  + right: 0,
  + width: '20px'
  +})
  +
  const Add: React.FunctionComponent<{
  onClick: () => void
  }> = props => (
  - <AddButtonContainer>
  - <AddButton onClick={props.onClick}>
  + <BottomFloatingButtonContainer>
  + <FloatingButton onClick={props.onClick}>
  <Icon icon={faPlus} />
  - </AddButton>
  - </AddButtonContainer>
  + </FloatingButton>
  + </BottomFloatingButtonContainer>
  +)
  +
  +const Remove: React.FunctionComponent<{
  + onClick: () => void
  +}> = props => (
  + <RightFloatingButtonContainer>
  + <FloatingButton onClick={props.onClick}>
  + <Icon icon={faTrashAlt} />
  + </FloatingButton>
  + </RightFloatingButtonContainer>
  )
  export const RowsPlugin = (props: PluginEditorProps<RowsState>) => {
  const { rows } = props.state
  return (
  - <div>
  + <React.Fragment>
  + <TopFloatingButtonContainer>
  + <FloatingButton onClick={() => addPlugin(0)}>
  + <Icon icon={faPlus} />
  + </FloatingButton>
  + </TopFloatingButtonContainer>
  {rows.map((row, index) => {
  return (
  <Document
  @@ -47,17 +87,17 @@ export const RowsPlugin = (props: PluginEditorProps<RowsState>) => {
  state={row}
  render={children => {
  return (
  - <React.Fragment>
  - <Add onClick={() => addPlugin(index)} />
  + <div style={{ position: 'relative' }}>
  + <Add onClick={() => addPlugin(index + 1)} />
  + <Remove onClick={() => removePlugin(index)} />
  {children}
  - </React.Fragment>
  + </div>
  )
  }}
  />
  )
  })}
  - <Add onClick={() => addPlugin(rows.length)} />
  - </div>
  + </React.Fragment>
  )
  function addPlugin(index: number) {
  @@ -65,6 +105,12 @@ export const RowsPlugin = (props: PluginEditorProps<RowsState>) => {
  rows: R.insert(index, createDocumentIdentifier(), props.state.rows)
  })
  }
  +
  + function removePlugin(index: number) {
  + props.onChange({
  + rows: R.remove(index, 1, props.state.rows)
  + })
  + }
  }
  export interface RowsState {
  