DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(omiu): init o-tree

This commit is contained in:
dntzhang 2020-04-19 16:16:02 +08:00
parent f4b4c6db6c
commit 0055eee771
6 changed files with 360 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
components/o-tree/demos/js-demo/index.html
View File

@ -4,7 +4,7 @@
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Omiu Button</title>
<title>Omiu Tree</title>
</head>
<body>
@ -16,117 +16,46 @@
<script src="../../src/index.js"></script>
<script src="../../../o-icon/ac-unit-outlined.js"></script>
<script src="../../../o-icon/accessible-rounded.js"></script>
<style>
o-button {
margin-top: 10px;
}
</style>
<div>
<o-button>Default</o-button>
<o-button type="primary">Primary</o-button>
<o-button type="danger">Danger</o-button>
<o-button type="primary">
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
</o-button>
<o-button type="danger">Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
</o-button>
</div>
<div>
<o-button disabled>Default</o-button>
<o-button disabled type="primary">Primary</o-button>
<o-button disabled type="danger">Danger</o-button>
<o-button disabled type="primary">
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
</o-button>
<o-button disabled type="danger">Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
</o-button>
<o-tree data=" [{
label: '一级 1',
expanded: true,
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}]"></o-tree>
</div>
<div>
<o-button plain>Plain</o-button>
<o-button plain type="primary">Primary</o-button>
<o-button plain type="danger">Danger</o-button>
<o-button plain type="primary">
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined> Icon
</o-button>
<o-button plain type="danger">Icon <o-icon-accessible-rounded></o-icon-accessible-rounded>
</o-button>
<o-button plain type="primary">
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
</o-button>
<o-button plain type="danger">
<o-icon-accessible-rounded></o-icon-accessible-rounded>
</o-button>
<o-button plain type="danger" size="medium">
<o-icon-accessible-rounded></o-icon-accessible-rounded>
</o-button>
<o-button plain type="danger" size="small">
<o-icon-accessible-rounded></o-icon-accessible-rounded>
</o-button>
<o-button plain type="danger" size="mini">
<o-icon-accessible-rounded></o-icon-accessible-rounded>
</o-button>
</div>
<div>
<o-button plain loading>Plain</o-button>
<o-button plain loading type="primary">Primary</o-button>
<o-button plain loading type="danger">Danger</o-button>
<o-button plain loading type="primary">
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
</o-button>
<o-button plain loading type="danger">
<o-icon-accessible-rounded></o-icon-accessible-rounded>
</o-button>
</div>
<div>
<o-button>Default</o-button>
<o-button size="medium">Medium</o-button>
<o-button size="small">Small</o-button>
<o-button size="mini">Mini</o-button>
</div>
<div>
<o-button round>Default</o-button>
<o-button round size="medium">Medium</o-button>
<o-button round size="small">Small</o-button>
<o-button round size="mini">Mini</o-button>
</div>
<div>
<o-button circle>
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
</o-button>
<o-button type="primary" circle>
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
</o-button>
<o-button type="danger" circle>
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
</o-button>
<o-button type="primary" plain circle>
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
</o-button>
<o-button type="danger" plain circle>
<o-icon-ac-unit-outlined></o-icon-ac-unit-outlined>
</o-button>
</div>
</body>
</html>

39
components/o-tree/src/index.d.ts vendored
View File

@ -1,43 +1,16 @@
import { WeElement } from 'omi';
import '../theme.ts';
interface Props {
size?: 'medium' | 'small' | 'mini';
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
plain?: boolean;
round?: boolean;
circle?: boolean;
loading?: boolean;
disabled?: boolean;
icon?: string;
autofocus?: boolean;
nativeType?: 'button' | 'submit' | 'reset';
block?: boolean;
data?: object;
}
export default class Button extends WeElement<Props> {
export default class Tree extends WeElement<Props> {
static css: any;
static defaultProps: {
plain: boolean;
round: boolean;
circle: boolean;
loading: boolean;
disabled: boolean;
autofocus: boolean;
nativeType: string;
block: boolean;
};
static propTypes: {
size: StringConstructor;
type: StringConstructor;
plain: BooleanConstructor;
round: BooleanConstructor;
circle: BooleanConstructor;
loading: BooleanConstructor;
disabled: BooleanConstructor;
icon: StringConstructor;
autofocus: BooleanConstructor;
nativeType: StringConstructor;
block: BooleanConstructor;
data: ObjectConstructor;
};
onNodeClick: (evt: any, node: any) => void;
onNodeArrowClick: () => void;
renderNode(node: any, level: any): JSX.Element;
render(props: any): JSX.Element;
}
export {};

380
components/o-tree/src/index.js
View File

File diff suppressed because one or more lines are too long

2
components/o-tree/src/index.js.map
View File

File diff suppressed because one or more lines are too long

8
components/o-tree/src/index.scss
View File

@ -597,8 +597,8 @@
cursor: pointer;
color: #C0C4CC;
font-size: 12px;
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
@ -606,8 +606,8 @@
}
.o-tree-node__expand-icon.expanded {
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
.o-tree-node__expand-icon.is-leaf {

90
components/o-tree/src/index.tsx
View File

@ -4,66 +4,62 @@ import * as css from './index.scss'
import '../theme.ts'
interface Props {
size?: 'medium' | 'small' | 'mini',
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
plain?: boolean,
round?: boolean,
circle?: boolean,
loading?: boolean,
disabled?: boolean,
icon?: string,
autofocus?: boolean,
nativeType?: 'button' | 'submit' | 'reset',
block?: boolean
data?: object
}
@tag('o-button')
export default class Button extends WeElement<Props>{
@tag('o-tree')
export default class Tree extends WeElement<Props>{
static css = css
static defaultProps = {
plain: false,
round: false,
circle: false,
loading: false,
disabled: false,
autofocus: false,
nativeType: 'button',
block: false
}
static propTypes = {
size: String,
type: String,
plain: Boolean,
round: Boolean,
circle: Boolean,
loading: Boolean,
disabled: Boolean,
icon: String,
autofocus: Boolean,
nativeType: String,
block: Boolean
data: Object
}
onNodeClick = (evt, node) => {
evt.stopPropagation()
node.expanded = !node.expanded
this.forceUpdate()
}
onNodeArrowClick = () => {
}
renderNode(node, level) {
return <div role="treeitem" onClick={(evt) => { this.onNodeClick(evt, node) }}
{...extractClass({}, 'o-tree-node', {
'is-expanded': node.expanded,
})}
draggable="false">
<div class="o-tree-node__content" style={`padding-left: ${level * 18}px;`}>
{/* <span class="expanded o-tree-node__expand-icon o-icon-caret-right"></span> */}
{node.children && node.children.length > 0 && <svg onClick={_ => this.onNodeArrowClick(_, node)} viewBox="0 0 1024 1024" {...extractClass({}, 'o-tree-node__expand-icon', {
'expanded': node.expanded,
})} data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
</svg>}
<span class="o-tree-node__label">{node.label}</span></div>
{node.expanded && node.children && node.children.length > 0 && <div role="group" class="o-tree-node__children" style="" aria-expanded="true" data-old-padding-top="" data-old-padding-bottom="" data-old-overflow="">
{node.children.map(child => {
return this.renderNode(child, level + 1)
})}
</div>}
</div>
}
render(props) {
return <button disabled={props.disabled} {...extractClass(props, 'o-button', {
['o-button-' + props.type]: props.type,
['o-button-' + props.size]: props.size,
'is-plain': props.plain,
'is-round': props.round,
'is-circle': props.circle,
'is-disabled': props.disabled,
'is-block': props.block
})} type={props.nativeType} >
{props.loading && [<svg class="loading" viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg>, ' ']}
<slot></slot>
</button>
return (
<div role="tree" class="o-tree">
{props.data.map(node => {
return this.renderNode(node, 0)
})}
</div>
)
}
}