@ovine/craft
Version:
Ovine json editor.
58 lines (57 loc) • 2.18 kB
JavaScript
import React from 'react';
import styled from 'styled-components';
import { toggleSelector } from "../../selector";
import { Container, Vertical, Horizontal, Corner } from "./common";
export default (props) => {
const { schema } = props.info;
const { toolbar, body, aside } = schema || {};
const showSelector = (key, label, event) => {
const { type, tooltip } = event.currentTarget.dataset;
const selectorInfo = {
key,
type,
isShow: true,
label: `在${label}${tooltip}组件`,
};
toggleSelector(selectorInfo);
};
return (React.createElement(Container, null,
React.createElement(StyledPage, null,
React.createElement("div", { className: "part-aside" },
React.createElement(Corner, null, "\u4FA7\u8FB9\u680F"),
React.createElement(Vertical, { hasItem: !!aside, className: "center", showSelector: (e) => showSelector('aside', '侧边栏', e) })),
React.createElement("div", { className: "part-body" },
React.createElement("div", { className: "part-toolbar" },
React.createElement(Corner, { r: "0" }, "\u5DE5\u5177\u680F"),
React.createElement(Horizontal, { hasItem: !!toolbar, className: "center", showSelector: (e) => showSelector('toolbar', '工具栏', e) })),
React.createElement("div", { className: "part-content" },
React.createElement(Corner, null, "\u5185\u5BB9\u533A"),
React.createElement(Vertical, { hasItem: !!body, className: "center", showSelector: (e) => showSelector('body', '内容区', e) }))))));
};
const StyledPage = styled.div `
display: flex;
height: 100px;
.part {
&-aside {
flex: 0 0 auto;
position: relative;
width: 30%;
border-right: 1px solid #dedede;
}
&-body {
flex: 1;
display: flex;
flex-direction: column;
}
&-toolbar {
flex: 0 0 auto;
position: relative;
height: 30px;
border-bottom: 1px solid #dedede;
}
&-content {
flex: 1;
position: relative;
}
}
`;