Skip to content

Commit

Permalink
feat(Shell): add Shell (alibaba-fusion#1175)
Browse files Browse the repository at this point in the history 
feat(Shell): add Shell
  • Loading branch information
@youluna
youluna authored Sep 26, 2019
1 parent b44a05e commit dd03a64
Show file tree
Hide file tree
Showing 36 changed files with 3,874 additions and 24 deletions.
1 change: 1 addition & 0 deletions .fusion
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@
"range": "lib/range/scss/variable.scss",
"rating": "lib/rating/scss/variable.scss",
"search": "lib/search/scss/variable.scss",
"shell": "lib/shell/scss/variable.scss",
"slider": "lib/slider/scss/variable.scss",
"split-button": "lib/split-button/scss/variable.scss",
"step": "lib/step/scss/variable.scss",
Expand Down
205 changes: 205 additions & 0 deletions docs/shell/adaptor/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
import React from 'react';
import { Types } from '@alifd/adaptor-helper';
import { Shell, Icon } from '@alifd/next';

export default {
name: 'Shell',
shape: ['normal'],
editor: (shape) => {
return {
props: [{
name: 'level',
type: Types.enum,
default: 'light',
options: {
normal: ['light', 'dark', 'brand'],
}[shape],
},{
name: 'device',
label: 'Device',
type: Types.enum,
options: ['desktop', 'tablet', 'phone'],
default: 'desktop',
},{
name: 'branding',
label: 'Branding',
type: Types.bool,
default: true,
},{
name: 'actions',
label: 'Actions',
type: Types.bool,
default: true,
},{
name: 'navigation',
label: 'Navigation',
type: Types.enum,
options: ['ver', 'hoz', false],
default: 'ver',
},{
name: 'localNav',
label: 'LocalNav',
type: Types.bool,
default: true,
},{
name: 'appbar',
label: 'Appbar',
type: Types.bool,
default: true,
},{
name: 'footer',
label: 'Footer',
type: Types.bool,
default: true,
},{
name: 'tooldock',
label: 'Tooldock',
type: Types.bool,
default: true,
},{
name: 'ancillary',
label: 'Ancillary',
type: Types.bool,
default: true,
}]
};
},
adaptor: ({ level, device, branding, actions, localNav, appbar, footer, tooldock, ancillary, navigation, ...others }) => {
let logoStyle = {},
shellStyle = {};

switch(level) {
case 'light':
logoStyle = {width: 32, height: 32, background: '#000', opacity: '0.04'};
break;
case 'dark':
logoStyle = {width: 32, height: 32, background: '#FFF', opacity: '0.2'};
break;
case 'brand':
logoStyle = {width: 32, height: 32, background: '#000', opacity: '0.04'};
break;
default:
break;
}

switch(device) {
case 'phone':
shellStyle = {height: 500, width: 480, border: '1px solid #eee'};
break;
case 'tablet':
shellStyle = {height: 500, width: 768, border: '1px solid #eee'};
break;
case 'desktop':
shellStyle = {height: 500, width: 1000, border: '1px solid #eee'};
break;
default:
break;
}

return (
<Shell style={shellStyle} device={device} type={level}>
{
branding
? <Shell.Branding>
<div style={logoStyle}></div>
<span style={{marginLeft: 10}}>App Name</span>
</Shell.Branding>
: null
}

{
!navigation
? <Shell.Navigation direction={navigation}>
<Nav type="normal" embeddable direction={navigation} hozInLine>
<Nav.Item icon="account">Nav Item 1</Nav.Item>
<Nav.Item icon="calendar">Nav Item 2</Nav.Item>
<Nav.Item icon="atm">Nav Item 3</Nav.Item>
<Nav.Item icon="account">Nav Item 4</Nav.Item>
<Nav.Item icon="account">Nav Item 5</Nav.Item>
<Nav.Item icon="account">Nav Item 6</Nav.Item>
<Nav.Item icon="account">Nav Item 7</Nav.Item>
</Nav>
</Shell.Navigation>
: null
}
{
actions
? <Shell.Action>
<Search key="2" shape='simple' palceholder="Search" style={{width: '160px', marginRight: 20}}/>
<Icon type="ic_tongzhi" />
<img src="https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png" style={{width: 24, height: 24, borderRadius: '50%', verticalAlign: 'middle'}} alt="用户头像" />
<span style={{marginLeft: 10}}>Name</span>
</Shell.Action>
: null
}
{
localNav
? <Shell.LocalNavigation>
<Nav type="normal" embeddable>
<Nav.SubNav label="Local Nav1">
<Nav.Item>Local Nav1</Nav.Item>
</Nav.SubNav>
<Nav.SubNav label="Local Nav2">
<Nav.Item>Local Nav2</Nav.Item>
</Nav.SubNav>
<Nav.SubNav label="Local Nav3">
<Nav.Item>Local Nav3</Nav.Item>
</Nav.SubNav>
<Nav.Item>Local Nav4</Nav.Item>
<Nav.Item>Local Nav5</Nav.Item>
<Nav.Item>Local Nav6</Nav.Item>
<Nav.Item>Local Nav7</Nav.Item>
<Nav.Item>Local Nav8</Nav.Item>
<Nav.Item>Local Nav4</Nav.Item>
<Nav.Item>Local Nav5</Nav.Item>
<Nav.Item>Local Nav6</Nav.Item>
<Nav.Item>Local Nav7</Nav.Item>
<Nav.Item>Local Nav8</Nav.Item>
</Nav>
</Shell.LocalNavigation>
: null
}
{
appbar
? <Shell.AppBar>

</Shell.AppBar>
: null
}
<Shell.Content>
<div style={{minHeight: 1200, background: '#fff'}}></div>
</Shell.Content>

{
ancillary
? <Shell.Ancillary>
</Shell.Ancillary>
: null
}
{
tooldock
? <Shell.ToolDock>
<Shell.ToolDockItem>
<Icon type="calendar" />
</Shell.ToolDockItem>
<Shell.ToolDockItem>
<Icon type="atm" />
</Shell.ToolDockItem>
<Shell.ToolDockItem>
<Icon type="account" />
</Shell.ToolDockItem>
</Shell.ToolDock>
: null
}
{
footer
? <Shell.Footer>
<span>Alibaba Fusion</span>
<span>@ 2019 Alibaba Piecework 版权所有</span>
</Shell.Footer>
: null
}
</Shell>
);
}
};
76 changes: 76 additions & 0 deletions docs/shell/demo/basic.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
# 基本

- order: 0

基本的Shell

:::lang=en-us
# Type

- order: 0

Basic usage of shell

:::

---

````jsx
import { Search, Icon, Nav, Shell } from '@alifd/next';

const { SubNav, Item, Group, Divider } = Nav;

class App extends React.Component {
render() {
return (
<div>
<Shell className={"iframe-hack"} style={{border: '1px solid #eee'}}>
<Shell.Branding>
<div className="rectangular"></div>
<span style={{marginLeft: 10}}>App Name</span>
</Shell.Branding>
<Shell.Navigation direction="hoz">
<Search key="2" shape="simple" type="dark" palceholder="Search" style={{width: '200px'}}/>
</Shell.Navigation>
<Shell.Action>
<Icon type="ic_tongzhi" />
<img src="https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png" className="avatar" alt="用户头像" />
<span style={{marginLeft: 10}}>MyName</span>
</Shell.Action>

<Shell.Content>
<div style={{minHeight: 1200, background: '#fff'}}></div>
</Shell.Content>

<Shell.Footer>
<span>Alibaba Fusion</span>
<span>@ 2019 Alibaba Piecework 版权所有</span>
</Shell.Footer>
</Shell>
</div>
);
}
}

ReactDOM.render((
<App />
), mountNode);
````
````css
.avatar {
width: 24px;
height: 24px;
border-radius: 50%;
vertical-align: middle;
}
.rectangular {
width: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.04);
}

.iframe-hack {
width: 100%;
height: 500px;
}
````
Loading

0 comments on commit dd03a64

Please sign in to comment.