import {ToolbarGroup,ToolbarSeparator as ToolbarSeparator0,MenuItem} from "material-ui"
import CheckIconButton from "../components/check-icon-button"
import DropDownButton from "../components/drop-down-button"
import SizeIconButton from "../components/size-icon-button"
import IconAddRowAbove from "material-ui/svg-icons/editor/vertical-align-top"
import IconAddRowBelow from "material-ui/svg-icons/editor/vertical-align-bottom"
import IconRemove from "material-ui/svg-icons/navigation/close"
const ToolbarSeparator=props=><ToolbarSeparator0 style={{marginRight:2, marginLeft:2}} {...props}/>
export default compose(
setDisplayName("TableLayout"),
connect(state=>({selection:getSelectionStyle(state)})),
mapProps(({dispatch,children,selection})=>({
addRowAbove(){
const row=selection.props("row",false)
dispatch(ACTION.Selection.UPDATE({table:{row:{id:row.id,where:"before"}}}))
},
addRowBelow(){
const row=selection.props("row",false)
dispatch(ACTION.Selection.UPDATE({table:{row:{id:row.id, where:"after"}}}))
},
addColRight(){
const cell=selection.props("cell",false)
dispatch(ACTION.Selection.UPDATE({table:{col:{cell:cell.id,where:"after"}}}))
},
import React, {Component} from "react"
import PropTypes from "prop-types"
import {compose, getContext, mapProps,withProps} from "recompose"
import { Popover,Subheader, ToolbarGroup} from "material-ui"
import IconTable from "material-ui/svg-icons/editor/border-all"
import {ACTION, connect, getSelectionStyle} from "we-edit"
import SizeIconButton from "../components/size-icon-button"
export {default as Ribbon} from "./ribbon"
export const Create=connect(state=>({selection:getSelectionStyle(state)}))(class extends Component{
state={show:false}
render(){
const {selection, children}=this.props
const {show,anchor}=this.state
let setting=null
if(selection && show){
setting=(
<Popover
open={true}
anchorEl={anchor}
onRequestClose={e=>this.setState({show:false})}
>
<Setting onAction={e=>this.setState({show:false})}/>
</Popover>
)
}
return (
<ToolbarGroup>
render(){
var {content,canvas,wrap,...props}=this.props
content=React.cloneElement(content, {children:[
content.props.children,
this.renderLines(),
]})
return canvas ? React.cloneElement(canvas, {content,...props}) : content
}
}
const Lines=connect(state=>{
const selection=getSelectionStyle(state)
if(selection){
const page=selection.props("page")
if(page){
return {active:page.line}
}
}
return {}
})(
class extends Component{
render(){
const {active=0, activeColor, count, lineHeight, width, measure,
baseline=measure.defaultStyle.height-measure.defaultStyle.descent
}=this.props
return (
<Fragment>
<rect width={99999} height={lineHeight} className="activeLine"
style={{opacity:0.5, cursor:"text"}}
y={active*lineHeight} fill={activeColor}/>
<g style={{opacity:0.5}}>