示例#1
0
文件: layout.js 项目: lalalic/we-edit
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"}}}))
        },
示例#2
0
文件: index.js 项目: lalalic/we-edit
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>
示例#3
0
	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}}>