antd#Affix JavaScript Examples
The following examples show how to use
antd#Affix.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
render() {
return (
<div className="height-700 d-flex align-items-center">
<Affix offsetTop={this.state.top}>
<Button
type="primary"
onClick={() => {
this.setState({
top: this.state.top + 10,
})
}}
>
Affix top
</Button>
</Affix>
<br />
<Affix offsetBottom={this.state.bottom}>
<Button
type="primary"
onClick={() => {
this.setState({
bottom: this.state.bottom + 10,
})
}}
>
Affix bottom
</Button>
</Affix>
</div>
)
}
Example #2
| Source File: index.jsx From mixbox with GNU General Public License v3.0 | 6 votes |
|
render() {
const { sideWidth, collapsed, collapsedWidth } = this.props;
return (
<Affix
{ ...this.props }
offsetBottom={0}
style={{
...this.props.style,
position: 'fixed',
left: collapsed ? collapsedWidth : sideWidth,
bottom: 0,
width: '100%',
height: '50px',
boxShadow: '0px -5px 5px rgba(0, 0, 0, 0.067)',
lineHeight: '50px',
zIndex: 1,
textAlign: 'left',
paddingLeft: 10,
backgroundColor: 'white',
}}
>
{this.props.children}
</Affix>
);
}
Example #3
| Source File: index.jsx From rolwinreevan_gatsby_blog with MIT License | 6 votes |
|
Sidebar = (props) => {
const [width] = useWindowSize();
const { children } = props;
const { pathname } = globalHistory.location;
let domContent = <DomContent />;
if (width > 997) {
domContent = (
<Affix offsetTop={0}>
<DomContent />
</Affix>
);
}
if (width < 768) {
domContent = <></>;
if (pathname === '/') {
domContent = <DomContent />;
}
}
return (
<>
<Layout>
<Content className={`${style.content} ${style.background}`}>
<Row>
<Col sm={24} md={9} lg={6} className={style.sidebarContent}>
{ domContent }
</Col>
<Col sm={24} md={15} lg={18}>
<Layout className={`${style.background} ${style.boxContent} borderRadiusSection`}>
{ children }
</Layout>
</Col>
</Row>
</Content>
</Layout>
</>
);
}
Example #4
| Source File: Navbar.js From remixr with MIT License | 6 votes |
|
Navbar = () => {
const [redirectPath, setRedirectPath] = useState(null);
return (
<Affix offsetTop={0}>
{redirectPath ? (
<Redirect to={redirectPath} />
) : (
<div className="navbar">
<a
style={{
fontFamily: "'Abril Fatface', cursive",
fontSize: '2.5em',
color: '#262626',
float: 'left',
border: 'none',
padding: 0,
}}
onClick={() => setRedirectPath('/')}
>
remixr
</a>
<NavButton />
</div>
)}
</Affix>
);
}
Example #5
| Source File: index.js From discern with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
render() {
const cardContent = '使用Icon标签声明组件，指定图标对应的 type 属性。'
const cardContent2 = `我们为每个图标赋予了语义化的命名，命名规则如下:
<ul class="card-ul">
<li>实心和描线图标保持同名，用 -o 来区分，比如 question-circle（实心） 和 question-circle-o（描线）；</li>
<li>命名顺序：[图标名]-[形状?]-[描线?]-[方向?]。</li>
</ul>`
return (
<div>
<CustomBreadcrumb arr={['基本','图标']}/>
<TypingCard title='如何使用' source={cardContent} id='howUse'/>
<TypingCard title='图标的命名规范' id='standard' source={cardContent2} height={206}/>
{
icons.map(item => {
return (
<Card title={item.title} bordered={false} className='card-item' key={item.title} id={item.anchor}>
{
item.list.map(icon => {
return (
<Card.Grid style={styles.gridItem} key={icon}>
<Icon type={icon} style={styles.icon}/><span>{icon}</span>
</Card.Grid>
)
})
}
</Card>
)
})
}
<BackTop visibilityHeight={200} style={{right: 50}}/>
<Affix style={styles.affixBox}>
<Anchor offsetTop={50} affix={false}>
<Anchor.Link href='#howUse' title='如何使用'/>
<Anchor.Link href='#standard' title='图标的命名规范'/>
<Anchor.Link href='#direction' title='方向性图标'/>
<Anchor.Link href='#suggestion' title='提示建议性图标'/>
<Anchor.Link href='#logo' title='网站通用图标'/>
<Anchor.Link href='#other' title='品牌和标识'/>
</Anchor>
</Affix>
</div>
)
}
Example #6
| Source File: Access.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const hotKeyMenu = (
<Menu>
<Menu.Item
onClick={() => this.sendCombinationKey(['65507', '65513', '65535'])}>Ctrl+Alt+Delete</Menu.Item>
<Menu.Item
onClick={() => this.sendCombinationKey(['65507', '65513', '65288'])}>Ctrl+Alt+Backspace</Menu.Item>
<Menu.Item
onClick={() => this.sendCombinationKey(['65515', '100'])}>Windows+D</Menu.Item>
<Menu.Item
onClick={() => this.sendCombinationKey(['65515', '101'])}>Windows+E</Menu.Item>
<Menu.Item
onClick={() => this.sendCombinationKey(['65515', '114'])}>Windows+R</Menu.Item>
<Menu.Item
onClick={() => this.sendCombinationKey(['65515', '120'])}>Windows+X</Menu.Item>
<Menu.Item
onClick={() => this.sendCombinationKey(['65515'])}>Windows</Menu.Item>
</Menu>
);
const cmdMenuItems = this.state.commands.map(item => {
return <Tooltip placement="left" title={item['content']} color='blue' key={'t-' + item['id']}>
<Menu.Item onClick={() => {
this.writeCommand(item['content'])
}} key={'i-' + item['id']}>{item['name']}</Menu.Item>
</Tooltip>;
});
const cmdMenu = (
<Menu>
{cmdMenuItems}
</Menu>
);
return (
<div>
<div className="container" style={{
overflow: this.state.containerOverflow,
width: this.state.containerWidth,
height: this.state.containerHeight,
margin: '0 auto'
}}>
<div id="display"/>
</div>
<Draggable>
<Affix style={{position: 'absolute', top: 50, right: 50}}>
<Button icon={<ExpandOutlined/>} disabled={this.state.clientState !== STATE_CONNECTED}
onClick={() => {
this.fullScreen();
}}/>
</Affix>
</Draggable>
{
this.state.session['copy'] === '1' || this.state.session['paste'] === '1' ?
<Draggable>
<Affix style={{position: 'absolute', top: 50, right: 100}}>
<Button icon={<CopyOutlined/>} disabled={this.state.clientState !== STATE_CONNECTED}
onClick={() => {
this.setState({
clipboardVisible: true
});
}}/>
</Affix>
</Draggable> : undefined
}
{
this.state.protocol === 'vnc' ?
<>
<Draggable>
<Affix style={{position: 'absolute', top: 100, right: 100}}>
<Dropdown overlay={hotKeyMenu} trigger={['click']} placement="bottomLeft">
<Button icon={<WindowsOutlined/>}
disabled={this.state.clientState !== STATE_CONNECTED}/>
</Dropdown>
</Affix>
</Draggable>
</> : undefined
}
{
this.state.protocol === 'rdp' && this.state.showFileSystem ?
<>
<Draggable>
<Affix style={{position: 'absolute', top: 100, right: 50}}>
<Button icon={<FolderOutlined/>}
disabled={this.state.clientState !== STATE_CONNECTED} onClick={() => {
this.setState({
fileSystemVisible: true,
});
}}/>
</Affix>
</Draggable>
</> : undefined
}
{
this.state.protocol === 'rdp' ?
<>
<Draggable>
<Affix style={{position: 'absolute', top: 100, right: 100}}>
<Dropdown overlay={hotKeyMenu} trigger={['click']} placement="bottomLeft">
<Button icon={<WindowsOutlined/>}
disabled={this.state.clientState !== STATE_CONNECTED}/>
</Dropdown>
</Affix>
</Draggable>
</> : undefined
}
{
this.state.protocol === 'ssh' ?
<>
<Draggable>
<Affix style={{position: 'absolute', top: 100, right: 50}}>
<Button icon={<FolderOutlined/>}
disabled={this.state.clientState !== STATE_CONNECTED} onClick={() => {
this.setState({
fileSystemVisible: true,
});
}}/>
</Affix>
</Draggable>
<Draggable>
<Affix style={{position: 'absolute', top: 100, right: 100}}>
<Dropdown overlay={cmdMenu} trigger={['click']} placement="bottomLeft">
<Button icon={<CodeOutlined/>}
disabled={this.state.clientState !== STATE_CONNECTED}/>
</Dropdown>
</Affix>
</Draggable>
<Draggable>
<Affix style={{
position: 'absolute',
top: 150,
right: 100,
zIndex: this.state.enterBtnIndex
}}>
<Button icon={<LineChartOutlined/>} onClick={() => {
this.setState({
statsVisible: true,
});
if (this.statsRef) {
this.statsRef.addInterval();
}
}}/>
</Affix>
</Draggable>
</> : undefined
}
<Drawer
title={'文件管理'}
placement="right"
width={window.innerWidth * 0.8}
closable={true}
onClose={() => {
this.focus();
this.setState({
fileSystemVisible: false
});
}}
visible={this.state.fileSystemVisible}
>
<FileSystem
storageId={this.state.sessionId}
storageType={'sessions'}
upload={this.state.session['upload'] === '1'}
download={this.state.session['download'] === '1'}
delete={this.state.session['delete'] === '1'}
rename={this.state.session['rename'] === '1'}
edit={this.state.session['edit'] === '1'}
minHeight={window.innerHeight - 103}/>
</Drawer>
<Drawer
title={'状态信息'}
placement="right"
width={window.innerWidth * 0.8}
closable={true}
onClose={() => {
this.setState({
statsVisible: false,
});
this.focus();
if (this.statsRef) {
this.statsRef.delInterval();
}
}}
visible={this.state.statsVisible}
>
<Stats sessionId={this.state.sessionId} onRef={this.onRef}/>
</Drawer>
{
this.state.clipboardVisible ?
<Modal
title="剪贴板"
maskClosable={false}
visible={this.state.clipboardVisible}
onOk={() => {
this.clipboardFormRef.current
.validateFields()
.then(values => {
let clipboardText = values['clipboard'];
this.sendClipboard({
'data': clipboardText,
'type': 'text/plain'
});
this.setState({
clipboardText: clipboardText,
clipboardVisible: false
});
})
.catch(info => {
});
}}
confirmLoading={this.state.confirmLoading}
onCancel={() => {
this.focus();
this.setState({
clipboardVisible: false
})
}}
>
<Form ref={this.clipboardFormRef} initialValues={{'clipboard': this.state.clipboardText}}>
<Form.Item name='clipboard' rules={[{required: false}]}>
<TextArea id='clipboard' rows={10}/>
</Form.Item>
</Form>
</Modal>
: undefined
}
</div>
);
}
Example #7
| Source File: Term.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const cmdMenuItems = this.state.commands.map(item => {
return <Tooltip placement="left" title={item['content']} color='blue' key={'t-' + item['id']}>
<Menu.Item onClick={() => {
this.writeCommand(item['content'])
}} key={'i-' + item['id']}>{item['name']}</Menu.Item>
</Tooltip>;
});
const cmdMenu = (
<Menu>
{cmdMenuItems}
</Menu>
);
return (
<div>
<div id='terminal' style={{
height: this.state.height,
width: this.state.width,
backgroundColor: '#1b1b1b'
}}/>
<Draggable>
<Affix style={{position: 'absolute', top: 50, right: 50, zIndex: this.state.enterBtnIndex}}>
<Button icon={<FolderOutlined/>} onClick={() => {
this.setState({
fileSystemVisible: true,
enterBtnIndex: 999, // xterm.js 输入框的zIndex是1000，在弹出文件管理页面后要隐藏此按钮
});
}}/>
</Affix>
</Draggable>
<Draggable>
<Affix style={{position: 'absolute', top: 50, right: 100, zIndex: this.state.enterBtnIndex}}>
<Dropdown overlay={cmdMenu} trigger={['click']} placement="bottomLeft">
<Button icon={<CodeOutlined/>}/>
</Dropdown>
</Affix>
</Draggable>
<Draggable>
<Affix style={{position: 'absolute', top: 100, right: 100, zIndex: this.state.enterBtnIndex}}>
<Button icon={<LineChartOutlined/>} onClick={() => {
this.setState({
statsVisible: true,
enterBtnIndex: 999, // xterm.js 输入框的zIndex是1000，在弹出文件管理页面后要隐藏此按钮
});
if (this.statsRef) {
this.statsRef.addInterval();
}
}}/>
</Affix>
</Draggable>
<Drawer
title={'会话详情'}
placement="right"
width={window.innerWidth * 0.8}
closable={true}
// maskClosable={false}
onClose={() => {
this.setState({
fileSystemVisible: false,
enterBtnIndex: 1001, // xterm.js 输入框的zIndex是1000，在隐藏文件管理页面后要显示此按钮
});
this.focus();
}}
visible={this.state.fileSystemVisible}
>
<FileSystem
storageId={this.state.sessionId}
storageType={'sessions'}
upload={this.state.session['upload'] === '1'}
download={this.state.session['download'] === '1'}
delete={this.state.session['delete'] === '1'}
rename={this.state.session['rename'] === '1'}
edit={this.state.session['edit'] === '1'}
minHeight={window.innerHeight - 103}/>
</Drawer>
<Drawer
title={'状态信息'}
placement="right"
width={window.innerWidth * 0.8}
closable={true}
onClose={() => {
this.setState({
statsVisible: false,
enterBtnIndex: 1001, // xterm.js 输入框的zIndex是1000，在隐藏文件管理页面后要显示此按钮
});
this.focus();
if (this.statsRef) {
this.statsRef.delInterval();
}
}}
visible={this.state.statsVisible}
>
<Stats sessionId={this.state.sessionId} onRef={this.onRef}/>
</Drawer>
</div>
);
}
Example #8
| Source File: InterfaceEditForm.js From YApi-X with MIT License | 4 votes |
|
render() {
const { getFieldDecorator } = this.props.form
const { custom_field, projectMsg } = this.props
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 18 },
}
const res_body_use_schema_editor =
checkIsJsonSchema(this.state.res_body) || ''
const req_body_other_use_schema_editor =
checkIsJsonSchema(this.state.req_body_other) || ''
const queryTpl = (data, index) => {
return (
<Row key={index} className='interface-edit-item-content'>
<Col
span='1'
easy_drag_sort_child='true'
className='interface-edit-item-content-col interface-edit-item-content-col-drag'>
<Icon type='bars' />
</Col>
<Col
span='4'
draggable='false'
className='interface-edit-item-content-col'>
{getFieldDecorator('req_query[' + index + '].name', {
initialValue: data.name,
})(<Input placeholder='参数名称' />)}
</Col>
<Col span='3' className='interface-edit-item-content-col'>
{getFieldDecorator('req_query[' + index + '].type', {
initialValue: data.type,
})(
<Select>
<Option value='string'>string</Option>
<Option value='number'>number</Option>
</Select>,
)}
</Col>
<Col span='3' className='interface-edit-item-content-col'>
{getFieldDecorator('req_query[' + index + '].required', {
initialValue: data.required,
})(
<Select>
<Option value='1'>必需</Option>
<Option value='0'>非必需</Option>
</Select>,
)}
</Col>
<Col span='6' className='interface-edit-item-content-col'>
{getFieldDecorator('req_query[' + index + '].example', {
initialValue: data.example,
})(<TextArea autosize={true} placeholder='参数示例' />)}
</Col>
<Col span='6' className='interface-edit-item-content-col'>
{getFieldDecorator('req_query[' + index + '].desc', {
initialValue: data.desc,
})(<TextArea autosize={true} placeholder='备注' />)}
</Col>
<Col span='1' className='interface-edit-item-content-col'>
<Icon
type='delete'
className='interface-edit-del-icon'
onClick={() => this.delParams(index, 'req_query')}
/>
</Col>
</Row>
)
}
const headerTpl = (data, index) => {
return (
<Row key={index} className='interface-edit-item-content'>
<Col
span='1'
easy_drag_sort_child='true'
className='interface-edit-item-content-col interface-edit-item-content-col-drag'>
<Icon type='bars' />
</Col>
<Col span='4' className='interface-edit-item-content-col'>
{getFieldDecorator('req_headers[' + index + '].name', {
initialValue: data.name,
})(
<AutoComplete
dataSource={HTTP_REQUEST_HEADER}
filterOption={(inputValue, option) =>
option.props.children
.toUpperCase()
.indexOf(inputValue.toUpperCase()) !== -1
}
placeholder='参数名称'
/>,
)}
</Col>
<Col span='5' className='interface-edit-item-content-col'>
{getFieldDecorator('req_headers[' + index + '].value', {
initialValue: data.value,
})(<Input placeholder='参数值' />)}
</Col>
<Col span='5' className='interface-edit-item-content-col'>
{getFieldDecorator('req_headers[' + index + '].example', {
initialValue: data.example,
})(<TextArea autosize={true} placeholder='参数示例' />)}
</Col>
<Col span='8' className='interface-edit-item-content-col'>
{getFieldDecorator('req_headers[' + index + '].desc', {
initialValue: data.desc,
})(<TextArea autosize={true} placeholder='备注' />)}
</Col>
<Col span='1' className='interface-edit-item-content-col'>
<Icon
type='delete'
className='interface-edit-del-icon'
onClick={() => this.delParams(index, 'req_headers')}
/>
</Col>
</Row>
)
}
const requestBodyTpl = (data, index) => {
return (
<Row key={index} className='interface-edit-item-content'>
<Col
span='1'
easy_drag_sort_child='true'
className='interface-edit-item-content-col interface-edit-item-content-col-drag'>
<Icon type='bars' />
</Col>
<Col span='4' className='interface-edit-item-content-col'>
{getFieldDecorator('req_body_form[' + index + '].name', {
initialValue: data.name,
})(<Input placeholder='name' />)}
</Col>
<Col span='3' className='interface-edit-item-content-col'>
{getFieldDecorator('req_body_form[' + index + '].type', {
initialValue: data.type,
})(
<Select>
<Option value='text'>text</Option>
<Option value='file'>file</Option>
</Select>,
)}
</Col>
<Col span='3' className='interface-edit-item-content-col'>
{getFieldDecorator('req_body_form[' + index + '].required', {
initialValue: data.required,
})(
<Select>
<Option value='1'>必需</Option>
<Option value='0'>非必需</Option>
</Select>,
)}
</Col>
<Col span='5' className='interface-edit-item-content-col'>
{getFieldDecorator('req_body_form[' + index + '].example', {
initialValue: data.example,
})(<TextArea autosize={true} placeholder='参数示例' />)}
</Col>
<Col span='7' className='interface-edit-item-content-col'>
{getFieldDecorator('req_body_form[' + index + '].desc', {
initialValue: data.desc,
})(<TextArea autosize={true} placeholder='备注' />)}
</Col>
<Col span='1' className='interface-edit-item-content-col'>
<Icon
type='delete'
className='interface-edit-del-icon'
onClick={() => this.delParams(index, 'req_body_form')}
/>
</Col>
</Row>
)
}
const paramsTpl = (data, index) => {
return (
<Row key={index} className='interface-edit-item-content'>
<Col span='3' className='interface-edit-item-content-col'>
{getFieldDecorator('req_params[' + index + '].name', {
initialValue: data.name,
})(<Input disabled placeholder='参数名称' />)}
</Col>
<Col span='3' className='interface-edit-item-content-col'>
{getFieldDecorator('req_params[' + index + '].type', {
initialValue: data.type,
})(
<Select>
<Option value='string'>string</Option>
<Option value='number'>number</Option>
</Select>,
)}
</Col>
<Col span='7' className='interface-edit-item-content-col'>
{getFieldDecorator('req_params[' + index + '].example', {
initialValue: data.example,
})(<TextArea autosize={true} placeholder='参数示例' />)}
</Col>
<Col span='11' className='interface-edit-item-content-col'>
{getFieldDecorator('req_params[' + index + '].desc', {
initialValue: data.desc,
})(<TextArea autosize={true} placeholder='备注' />)}
</Col>
</Row>
)
}
const paramsList = this.state.req_params.map((item, index) => {
return paramsTpl(item, index)
})
const QueryList = this.state.req_query.map((item, index) => {
return queryTpl(item, index)
})
const headerList = this.state.req_headers
? this.state.req_headers.map((item, index) => {
return headerTpl(item, index)
})
: []
const requestBodyList = this.state.req_body_form.map((item, index) => {
return requestBodyTpl(item, index)
})
const DEMOPATH = '/api/user/{id}'
return (
<div>
<Modal
title='批量添加参数'
width={680}
visible={this.state.visible}
onOk={this.handleBulkOk}
onCancel={this.handleBulkCancel}
okText='导入'>
<div>
<TextArea
placeholder='每行一个name:examples'
autosize={{ minRows: 6, maxRows: 10 }}
value={this.state.bulkValue}
onChange={this.handleBulkValueInput}
/>
</div>
</Modal>
<Modal
title='批量添加Header'
width={680}
visible={this.state.headerBulkAddVisible}
onOk={this.handleHeaderBulkAddConfirm}
onCancel={this.handleHeaderBulkAddCancel}
okText='导入'>
<div>
<div style={{ marginBottom: 8 }}>
每行一个，支持以冒号(:)、制表符(TAB)分割键值:
</div>
<TextArea
placeholder='请输入'
autosize={{ minRows: 6, maxRows: 10 }}
value={this.state.headerBulkValue}
onChange={this.handleHeaderBulkValueInput}
/>
</div>
</Modal>
<Form onSubmit={this.handleSubmit}>
<h2 className='interface-title' style={{ marginTop: 0 }}>
基本设置
</h2>
<div className='panel-sub'>
<FormItem
className='interface-edit-item'
{...formItemLayout}
label='接口名称'>
{getFieldDecorator('title', {
initialValue: this.state.title,
rules: nameLengthLimit('接口'),
})(<Input id='title' placeholder='接口名称' />)}
</FormItem>
<FormItem
className='interface-edit-item'
{...formItemLayout}
label='选择分类'>
{getFieldDecorator('catid', {
initialValue: this.state.catid + '',
rules: [{ required: true, message: '请选择一个分类' }],
})(
<Select placeholder='请选择一个分类'>
{this.props.cat.map(item => {
return (
<Option key={item._id} value={item._id + ''}>
{item.name}
</Option>
)
})}
</Select>,
)}
</FormItem>
<FormItem
className='interface-edit-item'
{...formItemLayout}
label={
<span>
接口路径
<Tooltip
title={
<div>
<p>
1. 支持动态路由,例如:
{DEMOPATH}
</p>
<p>
2. 支持 ?controller=xxx
的QueryRouter,非router的Query参数请定义到
Request设置->Query
</p>
</div>
}>
<Icon type='question-circle-o' style={{ width: '10px' }} />
</Tooltip>
</span>
}>
<InputGroup compact>
<Select
value={this.state.method}
onChange={this.onChangeMethod}
style={{ width: '15%' }}>
{HTTP_METHOD_KEYS.map(item => {
return (
<Option key={item} value={item}>
{item}
</Option>
)
})}
</Select>
<Tooltip
title='接口基本路径，可在 项目设置 里修改'
style={{
display: this.props.basepath == '' ? 'block' : 'none',
}}>
<Input
disabled
value={this.props.basepath}
readOnly
onChange={() => {}}
style={{ width: '25%' }}
/>
</Tooltip>
{getFieldDecorator('path', {
initialValue: this.state.path,
rules: [
{
required: true,
message: '请输入接口路径!',
},
],
})(
<Input
onChange={this.handlePath}
placeholder='/path'
style={{ width: '60%' }}
/>,
)}
</InputGroup>
<Row className='interface-edit-item'>
<Col span={24} offset={0}>
{paramsList}
</Col>
</Row>
</FormItem>
<FormItem
className='interface-edit-item'
{...formItemLayout}
label='Tag'>
{getFieldDecorator('tag', { initialValue: this.state.tag })(
<Select placeholder='请选择 tag ' mode='multiple'>
{projectMsg.tag.map(item => {
return (
<Option value={item.name} key={item._id}>
{item.name}
</Option>
)
})}
<Option
value='tag设置'
disabled
style={{ cursor: 'pointer', color: '#2395f1' }}>
<Button type='primary' onClick={this.props.onTagClick}>
Tag设置
</Button>
</Option>
</Select>,
)}
</FormItem>
<FormItem
className='interface-edit-item'
{...formItemLayout}
label='状态'>
{getFieldDecorator('status', { initialValue: this.state.status })(
<Select>
<Option value='done'>已完成</Option>
<Option value='undone'>未完成</Option>
</Select>,
)}
</FormItem>
{custom_field.enable && (
<FormItem
className='interface-edit-item'
{...formItemLayout}
label={custom_field.name}>
{getFieldDecorator('custom_field_value', {
initialValue: this.state.custom_field_value,
})(<Input placeholder='请输入' />)}
</FormItem>
)}
</div>
<h2 className='interface-title'>请求参数设置</h2>
<div className='container-radiogroup'>
<RadioGroup
value={this.state.req_radio_type}
size='large'
className='radioGroup'
onChange={this.changeRadioGroup}>
{HTTP_METHOD[this.state.method].request_body ? (
<RadioButton value='req-body'>Body</RadioButton>
) : null}
<RadioButton value='req-query'>Query</RadioButton>
<RadioButton value='req-headers'>Headers</RadioButton>
</RadioGroup>
</div>
<div className='panel-sub'>
<FormItem
className={
'interface-edit-item ' + this.state.hideTabs.req.query
}>
<Row type='flex' justify='space-around'>
<Col span={12}>
<Button
size='small'
type='primary'
onClick={() => this.addParams('req_query')}>
添加Query参数
</Button>
</Col>
<Col span={12}>
<div
className='bulk-import'
onClick={() => this.showBulk('req_query')}>
批量添加
</div>
</Col>
</Row>
</FormItem>
<Row
className={
'interface-edit-item ' + this.state.hideTabs.req.query
}>
<Col>
<EasyDragSort
data={() => this.props.form.getFieldValue('req_query')}
onChange={this.handleDragMove('req_query')}
onlyChild='easy_drag_sort_child'>
{QueryList}
</EasyDragSort>
</Col>
</Row>
<FormItem
className={
'interface-edit-item ' + this.state.hideTabs.req.headers
}>
<Row type='flex' justify='space-around'>
<Col span={12}>
<Button
size='small'
type='primary'
onClick={() => this.addParams('req_headers')}>
添加Header
</Button>
</Col>
<Col span={12}>
<div
className='bulk-import'
onClick={this.handleHeaderBulkAddClick}>
批量添加
</div>
</Col>
</Row>
</FormItem>
<Row
className={
'interface-edit-item ' + this.state.hideTabs.req.headers
}>
<Col>
<EasyDragSort
data={() => this.props.form.getFieldValue('req_headers')}
onChange={this.handleDragMove('req_headers')}
onlyChild='easy_drag_sort_child'>
{headerList}
</EasyDragSort>
</Col>
</Row>
{HTTP_METHOD[this.state.method].request_body ? (
<div>
<FormItem
className={
'interface-edit-item ' + this.state.hideTabs.req.body
}>
{getFieldDecorator('req_body_type', {
initialValue: this.state.req_body_type,
})(
<RadioGroup>
<Radio value='form'>form</Radio>
<Radio value='json'>json</Radio>
<Radio value='file'>file</Radio>
<Radio value='raw'>raw</Radio>
</RadioGroup>,
)}
</FormItem>
<Row
className={
'interface-edit-item ' +
(this.props.form.getFieldValue('req_body_type') === 'form'
? this.state.hideTabs.req.body
: 'hide')
}>
<Col style={{ minHeight: '50px' }}>
<Row type='flex' justify='space-around'>
<Col span='12' className='interface-edit-item'>
<Button
size='small'
type='primary'
onClick={() => this.addParams('req_body_form')}>
添加form参数
</Button>
</Col>
<Col span='12'>
<div
className='bulk-import'
onClick={() => this.showBulk('req_body_form')}>
批量添加
</div>
</Col>
</Row>
<EasyDragSort
data={() =>
this.props.form.getFieldValue('req_body_form')
}
onChange={this.handleDragMove('req_body_form')}
onlyChild='easy_drag_sort_child'>
{requestBodyList}
</EasyDragSort>
</Col>
</Row>
</div>
) : null}
<Row
className={
'interface-edit-item ' +
(this.props.form.getFieldValue('req_body_type') === 'json'
? this.state.hideTabs.req.body
: 'hide')
}>
<span>
JSON-SCHEMA:
{!projectMsg.is_json5 && (
<Tooltip title='项目 -> 设置 开启 json5'>
<Icon type='question-circle-o' />{' '}
</Tooltip>
)}
</span>
{getFieldDecorator('req_body_is_json_schema', {
valuePropName: 'checked',
initialValue:
this.state.req_body_is_json_schema || !projectMsg.is_json5,
})(
<Switch
checkedChildren='开'
unCheckedChildren='关'
disabled={!projectMsg.is_json5}
/>,
)}
<Col
style={{ marginTop: '5px' }}
className='interface-edit-json-info'>
{!this.props.form.getFieldValue('req_body_is_json_schema') ? (
<span>
基于 Json5, 参数描述信息用注释的方式实现{' '}
<Tooltip title={<pre>{Json5Example}</pre>}>
<Icon
type='question-circle-o'
style={{ color: '#086dbf' }}
/>
</Tooltip>
“全局编辑”或 “退出全屏” 请按 F9
</span>
) : (
<ReqBodySchema
onChange={text => {
this.setState({
req_body_other: text,
})
if (new Date().getTime() - this.startTime > 1000) {
EditFormContext.props.changeEditStatus(true)
}
}}
isMock={true}
data={req_body_other_use_schema_editor}
/>
)}
</Col>
<Col>
{!this.props.form.getFieldValue('req_body_is_json_schema') && (
<AceEditor
className='interface-editor'
data={this.state.req_body_other}
onChange={this.handleReqBody}
fullScreen={true}
/>
)}
</Col>
</Row>
{this.props.form.getFieldValue('req_body_type') === 'file' &&
this.state.hideTabs.req.body !== 'hide' ? (
<Row className='interface-edit-item'>
<Col className='interface-edit-item-other-body'>
{getFieldDecorator('req_body_other', {
initialValue: this.state.req_body_other,
})(<TextArea placeholder='' autosize={true} />)}
</Col>
</Row>
) : null}
{this.props.form.getFieldValue('req_body_type') === 'raw' &&
this.state.hideTabs.req.body !== 'hide' ? (
<Row>
<Col>
{getFieldDecorator('req_body_other', {
initialValue: this.state.req_body_other,
})(<TextArea placeholder='' autosize={{ minRows: 8 }} />)}
</Col>
</Row>
) : null}
</div>
{/* ----------- Response ------------- */}
<h2 className='interface-title'>
返回数据设置
{!projectMsg.is_json5 && (
<Tooltip title='项目 -> 设置 开启 json5'>
<Icon type='question-circle-o' className='tooltip' />{' '}
</Tooltip>
)}
{getFieldDecorator('res_body_is_json_schema', {
valuePropName: 'checked',
initialValue:
this.state.res_body_is_json_schema || !projectMsg.is_json5,
})(
<Switch
checkedChildren='json-schema'
unCheckedChildren='json'
disabled={!projectMsg.is_json5}
/>,
)}
</h2>
<div className='container-radiogroup'>
{getFieldDecorator('res_body_type', {
initialValue: this.state.res_body_type,
})(
<RadioGroup size='large' className='radioGroup'>
<RadioButton value='json'>JSON</RadioButton>
<RadioButton value='raw'>RAW</RadioButton>
</RadioGroup>,
)}
</div>
<div className='panel-sub'>
<Row
className='interface-edit-item'
style={{
display:
this.props.form.getFieldValue('res_body_type') === 'json'
? 'block'
: 'none',
}}>
<Col>
<Tabs
size='large'
defaultActiveKey='tpl'
onChange={this.handleJsonType}>
<TabPane tab='模板' key='tpl' />
<TabPane tab='预览' key='preview' />
</Tabs>
<div style={{ marginTop: '10px' }}>
{!this.props.form.getFieldValue('res_body_is_json_schema') ? (
<div style={{ padding: '10px 0', fontSize: '15px' }}>
<span>
基于 mockjs 和 json5,使用注释方式写参数说明{' '}
<Tooltip title={<pre>{Json5Example}</pre>}>
<Icon
type='question-circle-o'
style={{ color: '#086dbf' }}
/>
</Tooltip>{' '}
,具体使用方法请{' '}
<span
className='href'
onClick={() =>
window.open(
'https://hellosean1025.github.io/yapi/documents/mock.html',
'_blank',
)
}>
查看文档
</span>
</span>
，“全局编辑”或 “退出全屏” 请按{' '}
<span style={{ fontWeight: '500' }}>F9</span>
</div>
) : (
<div
style={{
display:
this.state.jsonType === 'tpl' ? 'block' : 'none',
}}>
<ResBodySchema
onChange={text => {
this.setState({
res_body: text,
})
if (new Date().getTime() - this.startTime > 1000) {
EditFormContext.props.changeEditStatus(true)
}
}}
isMock={true}
data={res_body_use_schema_editor}
/>
</div>
)}
{!this.props.form.getFieldValue('res_body_is_json_schema') &&
this.state.jsonType === 'tpl' && (
<AceEditor
className='interface-editor'
data={this.state.res_body}
onChange={this.handleResBody}
ref={editor => (this.resBodyEditor = editor)}
fullScreen={true}
/>
)}
<div
id='mock-preview'
style={{
backgroundColor: '#eee',
lineHeight: '20px',
minHeight: '300px',
display:
this.state.jsonType === 'preview' ? 'block' : 'none',
}}
/>
</div>
</Col>
</Row>
<Row
className='interface-edit-item'
style={{
display:
this.props.form.getFieldValue('res_body_type') === 'raw'
? 'block'
: 'none',
}}>
<Col>
{getFieldDecorator('res_body', {
initialValue: this.state.res_body,
})(<TextArea style={{ minHeight: '150px' }} placeholder='' />)}
</Col>
</Row>
</div>
{/* ----------- remark ------------- */}
<h2 className='interface-title'>备 注</h2>
<div className='panel-sub'>
<FormItem className={'interface-edit-item'}>
<div>
<div
id='desc'
style={{ lineHeight: '20px' }}
className='remark-editor'
/>
</div>
</FormItem>
</div>
{/* ----------- email ------------- */}
<h2 className='interface-title'>其 他</h2>
<div className='panel-sub'>
<FormItem
className={'interface-edit-item'}
{...formItemLayout}
label={
<span>
消息通知
<Tooltip title={'开启消息通知，可在 项目设置 里修改'}>
<Icon type='question-circle-o' style={{ width: '10px' }} />
</Tooltip>
</span>
}>
{getFieldDecorator('switch_notice', {
valuePropName: 'checked',
initialValue: this.props.noticed,
})(<Switch checkedChildren='开' unCheckedChildren='关' />)}
</FormItem>
<FormItem
className={'interface-edit-item'}
{...formItemLayout}
label={
<span>
开放接口
<Tooltip title={'用户可以在 数据导出 时选择只导出公开接口'}>
<Icon type='question-circle-o' style={{ width: '10px' }} />
</Tooltip>
</span>
}>
{getFieldDecorator('api_opened', {
valuePropName: 'checked',
initialValue: this.state.api_opened,
})(<Switch checkedChildren='开' unCheckedChildren='关' />)}
</FormItem>
</div>
<FormItem
className='interface-edit-item'
style={{ textAlign: 'center', marginTop: '16px' }}>
{/* <Button type="primary" htmlType="submit">保存1</Button> */}
<Affix offsetBottom={0}>
<Button
className='interface-edit-submit-button'
disabled={this.state.submitStatus}
size='large'
htmlType='submit'>
保存
</Button>
</Affix>
</FormItem>
</Form>
</div>
)
}
Example #9
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
DashboardCrypto = () => {
const [myOpenOrdersLoading, setMyOpenOrdersLoading] = useState(false)
const [myOpenOrdersLoaded, setMyOpenOrdersLoaded] = useState(false)
const [myOrderHistoryLoading, setMyOrderHistoryLoading] = useState(false)
const [myOrderHistoryLoaded, setMyOrderHistoryLoaded] = useState(false)
const [orderType, setOrderType] = useState('buy')
const [graphData, setGraphData] = useState(null)
useEffect(() => {
getData().then(data => {
setGraphData(data)
})
}, [])
const handleMyOpenOrders = e => {
e.preventDefault()
setMyOpenOrdersLoading(true)
setTimeout(() => {
setMyOpenOrdersLoading(false)
setMyOpenOrdersLoaded(true)
}, 1500)
}
const handleMyOrderHistory = e => {
e.preventDefault()
setMyOrderHistoryLoading(true)
setTimeout(() => {
setMyOrderHistoryLoading(false)
setMyOrderHistoryLoaded(true)
}, 1500)
}
const toggleOrderType = e => {
setOrderType(e.target.value)
}
const myOrderColumns = [
{
title: 'Order Date',
dataIndex: 'orderDate',
key: 'orderDate'
},
{
title: 'Open Date',
dataIndex: 'openDate',
key: 'openDate'
},
{
title: 'Type',
dataIndex: 'type',
key: 'type',
render: value => (
<span style={{ color: value === 'SELL' ? '#f75535' : '#00a45b' }}>{value}</span>
)
},
{
title: 'Bid/Ask',
dataIndex: 'bidAsk',
key: 'bidAsk'
},
{
title: 'Filled',
dataIndex: 'filled',
key: 'filled'
},
{
title: 'Units Total',
dataIndex: 'unitsTotal',
key: 'unitsTotal'
},
{
title: 'Actual Rate',
dataIndex: 'actualRate',
key: 'actualRate'
},
{
title: 'Est. Total',
dataIndex: 'estTotal',
key: 'estTotal'
}
]
const marketHistoryColumns = [
{
title: 'Date',
dataIndex: 'orderDate',
key: 'orderDate'
},
{
title: 'BUY/SELL',
dataIndex: 'type',
key: 'type',
render: value => (
<span style={{ color: value === 'SELL' ? '#f75535' : '#00a45b' }}>{value}</span>
)
},
{
title: 'Bid/Ask',
dataIndex: 'bidAsk',
key: 'bidAsk'
},
{
title: 'Units Total',
dataIndex: 'unitsTotal',
key: 'unitsTotal'
},
{
title: 'Total Cost',
dataIndex: 'totalCost',
key: 'totalCost'
}
]
const ordersSellColumns = [
{
title: 'SUM',
dataIndex: 'sum',
key: 'sum',
align: 'right'
},
{
title: 'Total',
dataIndex: 'total',
key: 'total',
align: 'right'
},
{
title: 'Size',
dataIndex: 'size',
key: 'size',
align: 'right'
},
{
title: 'BID',
dataIndex: 'bid',
key: 'bid',
width: 120,
align: 'right',
render: value => <span style={{ color: '#00a45b' }}>{value}</span>
},
{
title: '',
dataIndex: 'sell',
key: 'sell',
width: 60,
align: 'right',
render: () => (
<a href='#' className='utils__link--blue mr-2'>
<strong>SELL</strong>
</a>
)
}
]
const ordersBuyColumns = [
{
title: '',
dataIndex: 'sell',
key: 'sell',
width: 60,
render: () => (
<a href='#' className='utils__link--blue ml-2'>
<strong>BUY</strong>
</a>
)
},
{
title: 'ASK',
dataIndex: 'ask',
key: 'ask',
width: 120,
render: value => <span style={{ color: '#f75535' }}>{value}</span>
},
{
title: 'Size',
dataIndex: 'size',
key: 'size'
},
{
title: 'Total',
dataIndex: 'total',
key: 'total'
},
{
title: 'SUM',
dataIndex: 'sum',
key: 'sum'
}
]
return (
<div>
<Helmet title='Dashboard Crypto' />
<div className={styles.crypto}>
<div className={styles.listMobile}>
<div className='cui__utils__heading'>
<strong>Markets</strong>
</div>
<Select showSearch size='large' defaultValue='btc' style={{ width: '100%' }}>
<Select.Option value='btc'>
BTC (Bitcoin)
<Tag color='blue' className='ml-3'>
11.7%
</Tag>
</Select.Option>
<Select.Option value='xmr'>
XMR (Monero)
<Tag color='blue' className='ml-3'>
67.5%
</Tag>
</Select.Option>
<Select.Option value='gld'>
GLD (GoldCoin)
<Tag color='red' className='ml-3'>
-22.9%
</Tag>
</Select.Option>
<Select.Option value='neo'>
NEO (Neo)
<Tag color='red' className='ml-3'>
-12.3%
</Tag>
</Select.Option>
<Select.Option value='btg'>
BTG (Bitcoin Gold)
<Tag color='blue' className='ml-3'>
+4.3%
</Tag>
</Select.Option>
<Select.Option value='xrp'>
XRP (Ripple)
<Tag color='red' className='ml-3'>
-4.2%
</Tag>
</Select.Option>
<Select.Option value='zec'>
ZEC (ZCash)
<Tag color='red' className='ml-3'>
-1.7%
</Tag>
</Select.Option>
<Select.Option value='neo'>
ZCL (ZClassic)
<Tag color='red' className='ml-3'>
-2.8%
</Tag>
</Select.Option>
</Select>
</div>
<div className={styles.list}>
<Affix offsetTop={20}>
<div className='cui__utils__heading'>
<strong>Markets</strong>
</div>
<a href='#' className={styles.listItem}>
<span className={styles.listPercents}>
<span>11.7%</span>
0.00016985
</span>
<span className={styles.listCurrency}>
<span>BTC</span>
97.20
</span>
</a>
<a href='#' className={`${styles.listItem} ${styles.listItemNegative}`}>
<span className={styles.listPercents}>
<span>67.5%</span>
0.00016985
</span>
<span className={styles.listCurrency}>
<span>XMR</span>
8.26
</span>
</a>
<a href='#' className={`${styles.listItem} ${styles.listItemNegative}`}>
<span className={styles.listPercents}>
<span>-22.9%</span>
0.00016985
</span>
<span className={styles.listCurrency}>
<span>GLD</span>
5.20
</span>
</a>
<a href='#' className={styles.listItem}>
<span className={styles.listPercents}>
<span>-12.3%</span>
0.00016985
</span>
<span className={styles.listCurrency}>
<span>NEO</span>
3.20
</span>
</a>
<a href='#' className={styles.listItem}>
<span className={styles.listPercents}>
<span>+4.3%</span>
0.00036234
</span>
<span className={styles.listCurrency}>
<span>BTG</span>
5.64
</span>
</a>
<a href='#' className={`${styles.listItem} ${styles.listItemNegative}`}>
<span className={styles.listPercents}>
<span>-4.2%</span>
0.00035685
</span>
<span className={styles.listCurrency}>
<span>XRP</span>
6.36
</span>
</a>
<a href='#' className={styles.listItem}>
<span className={styles.listPercents}>
<span>-1.7%</span>
0.00000985
</span>
<span className={styles.listCurrency}>
<span>ZEC</span>
6.35
</span>
</a>
<a href='#' className={styles.listItem}>
<span className={styles.listPercents}>
<span>-2.8%</span>
0.00000152
</span>
<span className={styles.listCurrency}>
<span>ZCL</span>
1.03
</span>
</a>
</Affix>
</div>
<div className={styles.content}>
<div className='cui__utils__heading'>
<strong>Bittrex Live Market</strong>
</div>
<div className='card bg-white'>
<div className='card-body'>
<div style={{ height: 400 }}>
{graphData !== null && <TradeChart type='hybrid' data={graphData} />}
</div>
</div>
</div>
<div className='cui__utils__heading'>
<strong>Order Book</strong>
</div>
<div className='card'>
<div className='card-body'>
<div className={styles.order}>
<div className={styles.orderLeft}>
<div className={`${styles.table} kit__utils__table`}>
<Table
columns={ordersSellColumns}
dataSource={orderBookSell}
pagination={{ position: 'bottom' }}
size='small'
/>
</div>
</div>
<div className={styles.orderMiddle}>
<div className={styles.form}>
<Form layout='vertical'>
<Form.Item>
<Radio.Group
onChange={toggleOrderType}
value={orderType}
style={{ width: '100%' }}
>
<Radio.Button value='buy' style={{ width: '50%', textAlign: 'center' }}>
BUY
</Radio.Button>
<Radio.Button value='sell' style={{ width: '50%', textAlign: 'center' }}>
SELL
</Radio.Button>
</Radio.Group>
</Form.Item>
{orderType === 'buy' && (
<div>
<span className={styles.formLabel}>ORDER TYPE</span>
<Form.Item>
<Select defaultValue='limit'>
<Select.Option value='limit'>Limit (Default)</Select.Option>
<Select.Option value='conditional'>Conditional</Select.Option>
</Select>
</Form.Item>
<span className={styles.formLabel}>QUANTITY (BTC)</span>
<Form.Item>
<Input defaultValue='0.00000000' />
</Form.Item>
<span className={styles.formLabel}>BID PRICE</span>
<Form.Item>
<Input defaultValue='0.00645198' />
</Form.Item>
<span className={styles.formLabel}>TOTAL</span>
<Form.Item>
<Input defaultValue='0.00000000' />
</Form.Item>
<span className={styles.formLabel}>TIME IN FORCE</span>
<Form.Item>
<Select defaultValue='good'>
<Select.Option value='good'>
Good 'Til Cancelled (Default)
</Select.Option>
<Select.Option value='immediate'>Immediate or Cancel</Select.Option>
</Select>
</Form.Item>
<div className='btn btn-success' style={{ width: '100%' }}>
<strong>BUY BTC</strong>
</div>
<div className='my-3 text-center'>
<div>
<strong>Available Balance</strong>
</div>
<div>12.92520000 BTC</div>
<div>1450.00 USD</div>
<div>
<a href='#' className='utils__link--blue utils__link--underlined'>
<strong>Max Buy</strong>
</a>
</div>
</div>
</div>
)}
{orderType === 'sell' && (
<div>
<span className={styles.formLabel}>ORDER TYPE</span>
<Form.Item>
<Select defaultValue='limit'>
<Select.Option value='limit'>Limit (Default)</Select.Option>
<Select.Option value='conditional'>Conditional</Select.Option>
</Select>
</Form.Item>
<span className={styles.formLabel}>QUANTITY (BTC)</span>
<Form.Item>
<Input defaultValue='0.00000000' />
</Form.Item>
<span className={styles.formLabel}>ASK PRICE</span>
<Form.Item>
<Input defaultValue='0.00645198' />
</Form.Item>
<span className={styles.formLabel}>TOTAL</span>
<Form.Item>
<Input defaultValue='0.00000000' />
</Form.Item>
<span className={styles.formLabel}>TIME IN FORCE</span>
<Form.Item>
<Select defaultValue='good'>
<Select.Option value='good'>
Good 'Til Cancelled (Default)
</Select.Option>
<Select.Option value='immediate'>Immediate or Cancel</Select.Option>
</Select>
</Form.Item>
<div className='btn btn-danger' style={{ width: '100%' }}>
<strong>SELL BTC</strong>
</div>
<div className='my-3 text-center'>
<div>
<strong>Available Balance</strong>
</div>
<div>12.92520000 BTC</div>
<div>1450.00 USD</div>
<div>
<a href='#' className='utils__link--blue utils__link--underlined'>
<strong>Max SELL</strong>
</a>
</div>
</div>
</div>
)}
</Form>
</div>
</div>
<div className={styles.orderRight}>
<div className={`${styles.table} kit__utils__table`}>
<Table
columns={ordersBuyColumns}
dataSource={orderBookBuy}
pagination={{ position: 'bottom' }}
size='small'
/>
</div>
</div>
</div>
</div>
</div>
<div className='cui__utils__heading'>
<strong>Market History</strong>
</div>
<div className='card'>
<div className='card-body'>
<div className={`${styles.table} kit__utils__table`}>
<Table
columns={marketHistoryColumns}
dataSource={marketHistoryData}
pagination={{ position: 'bottom' }}
size='small'
/>
</div>
</div>
</div>
<div className='cui__utils__heading'>
<strong>My Open Orders</strong>
</div>
<div className='card'>
<div className='card-body'>
<div>
{!myOpenOrdersLoaded && (
<a href='#' onClick={handleMyOpenOrders}>
<Spin spinning={myOpenOrdersLoading}>
<Alert
className={styles.warning}
message='Click to view open order details'
type='info'
/>
</Spin>
</a>
)}
{myOpenOrdersLoaded && (
<div className={`${styles.table} kit__utils__table`}>
<Table
columns={myOrderColumns}
dataSource={myOpenOrdersData}
pagination={{ position: 'bottom' }}
size='small'
/>
</div>
)}
</div>
</div>
</div>
<div className='cui__utils__heading'>
<strong>My Order History</strong>
</div>
<div className='card'>
<div className='card-body'>
<div>
{!myOrderHistoryLoaded && (
<a href='#' onClick={handleMyOrderHistory}>
<Spin spinning={myOrderHistoryLoading}>
<Alert
className={styles.warning}
message='Click to view order history details'
type='info'
/>
</Spin>
</a>
)}
{myOrderHistoryLoaded && (
<div className={`${styles.table} kit__utils__table`}>
<Table
columns={myOrderColumns}
dataSource={myOpenOrdersData}
pagination={{ position: 'bottom' }}
size='small'
/>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #10
| Source File: index.js From discern with BSD 3-Clause "New" or "Revised" License | 4 votes |
|
render() {
const {size, bordered, loading, data2, loadingMore} = this.state
const loadMore = (
<div style={styles.loadMore}>
{/*不知道为什么这种写法有问题，会报错*/}
{/*{loadingMore ? <Spin/> : <Button onClick={() => this.getData2()}>加载更多</Button>}*/}
<Spin style={loadingMore?{}:{display:'none'}}/>
<Button style={!loadingMore?{}:{display:'none'}} onClick={() => this.getData2()}>加载更多</Button>
</div>
)
return (
<div>
<CustomBreadcrumb arr={['显示', '列表']}/>
<TypingCard id='howUse' source='最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。'/>
<Card bordered={false} title='基本用法' style={{marginBottom: 10}} id='basicUsage'>
<Radio.Group value={size}
onChange={e => this.setState({size: e.target.value})}
style={{marginBottom: '1em'}}>
<Radio.Button value='large'>Large</Radio.Button>
<Radio.Button value='default'>Default</Radio.Button>
<Radio.Button value='small'>Small</Radio.Button>
</Radio.Group>   
是否有边框 <Switch defaultChecked
onChange={checked => this.setState({bordered: checked})}/>
<List dataSource={data}
bordered={bordered}
size={size}
style={bordered ? styles.haveBorder : styles.noBorder}
renderItem={item => (<List.Item>{item}</List.Item>)}/>
</Card>
<Card bordered={false} title='加载更多' style={{marginBottom: 10}} id='remoteLoading'>
<List loading={loading}
dataSource={data2}
loadMore={loadMore}
style={styles.listStyle}
renderItem={item => (
<List.Item actions={[<a>edit</a>, <a>more</a>]}>
<List.Item.Meta
avatar={<Avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>}
title={<a>{item.name.last}</a>}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
)}
/>
</Card>
<Card bordered={false} title='竖排列表样式' style={{marginBottom: 15}} id='verticalStyle'>
<List dataSource={data3}
itemLayout='vertical'
pagination={{pageSize: 3}}
style={styles.listStyle}
renderItem={item=>{
return (
<List.Item
actions={[<IconText type="star-o" text="156" />, <IconText type="like-o" text="156" />, <IconText type="message" text="2" />]}
extra={<img width={272} alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />}>
<List.Item.Meta
avatar={<Avatar src={item.avatar} />}
title={<a>{item.title}</a>}
description={item.description}
/>
{item.content}
</List.Item>
)
}}
/>
</Card>
<BackTop visibilityHeight={200} style={{right: 50}}/>
<Affix style={styles.affixBox}>
<Anchor offsetTop={50} affix={false}>
<Anchor.Link href='#howUse' title='何时使用'/>
<Anchor.Link href='#basicUsage' title='基本用法'/>
<Anchor.Link href='#remoteLoading' title='加载更多'/>
<Anchor.Link href='#verticalStyle' title='竖排列表样式'/>
</Anchor>
</Affix>
</div>
)
}
Example #11
| Source File: index.js From discern with BSD 3-Clause "New" or "Revised" License | 4 votes |
|
render() {
const rowSelection = {
selections: true
}
let {sortedInfo, filteredInfo} = this.state
sortedInfo = sortedInfo || {}
filteredInfo = filteredInfo || {}
const columns3 = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{text: 'Joe', value: 'Joe'},
{text: 'Jim', value: 'Jim'},
],
filteredValue: filteredInfo.name || null,
onFilter: (value, record) => record.name.includes(value),
sorter: (a, b) => a.name.length - b.name.length,
sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{text: 'London', value: 'London'},
{text: 'New York', value: 'New York'},
],
filteredValue: filteredInfo.address || null,
onFilter: (value, record) => record.address.includes(value),
sorter: (a, b) => a.address.length - b.address.length,
sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
}]
const components = {
body: {
row: EditableFormRow,
cell: EditableCell,
},
};
const columns8 = this.columns8.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
record,
inputType: col.dataIndex === 'age' ? 'number' : 'text',
dataIndex: col.dataIndex,
title: col.title,
editing: this.isEditing(record),
}),
};
});
const cardContent = `<ul class="card-ul">
<li>当有大量结构化的数据需要展现时</li>
<li>标当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时</li>
</ul>`
return (
<div>
<CustomBreadcrumb arr={['显示', '表格']}/>
<TypingCard id='howUse' source={cardContent} height={178}/>
<Card bordered={false} title='基本用法' style={{marginBottom: 10}} id='basicUsage'>
<Table dataSource={data} columns={columns} style={styles.tableStyle}/>
</Card>
<Card bordered={false} title='可选择' style={{marginBottom: 10, minHeight: 762}} id='select'>
<Table rowSelection={rowSelection} dataSource={data2} columns={columns2} style={styles.tableStyle}/>
</Card>
<Card bordered={false} title='排序和筛选' style={{marginBottom: 10, minHeight: 400}} id='filterOrSort'>
<p>
<Button onClick={() => this.setSort('age')}>年龄排序</Button> 
<Button onClick={() => this.setSort('name')}>人名排序</Button> 
<Button onClick={this.clearFilters}>清空过滤规则</Button> 
<Button onClick={this.clearAll}>重置</Button>
</p>
<Table dataSource={data3} columns={columns3} style={styles.tableStyle} onChange={this.handleChange}/>
</Card>
<Card bordered={false} title='远程加载数据' style={{marginBottom: 10, minHeight: 762}} id='remoteLoading'>
<Table rowKey={record => record.login.uuid}
loading={this.state.loading}
dataSource={this.state.data4}
pagination={this.state.pagination}
onChange={this.handleTableChange}
columns={columns4} style={styles.tableStyle}/>u
</Card>
<Card bordered={false} title='可展开' style={{marginBottom: 10, minHeight: 440}} id='unfold'>
<Table dataSource={data5} columns={columns5} style={styles.tableStyle}
expandedRowRender={record => <p style={{margin: 0}}>{record.description}</p>}/>
</Card>
<Card bordered={false} title='固定头和列' style={{marginBottom: 10, minHeight: 440}} id='fixed'>
<Table dataSource={data6} columns={columns6} style={styles.tableStyle}
scroll={{x: 1500, y: 500}}/>
</Card>
<Card bordered={false} title='可编辑的表格' style={{marginBottom: 10, minHeight: 440}} id='editTable'>
<p>
<Button onClick={this.handleAdd}>添加行</Button>
</p>
<Table bordered dataSource={this.state.data7} columns={this.columns7} style={styles.tableStyle}/>
<Table style={styles.tableStyle} components={components} bordered dataSource={this.state.data8}
columns={columns8}/>
</Card>
<BackTop visibilityHeight={200} style={{right: 50}}/>
<Affix style={styles.affixBox}>
<Anchor offsetTop={50} affix={false}>
<Anchor.Link href='#howUse' title='何时使用'/>
<Anchor.Link href='#basicUsage' title='基本用法'/>
<Anchor.Link href='#select' title='可选择'/>
<Anchor.Link href='#filterOrSort' title='排序和筛选'/>
<Anchor.Link href='#remoteLoading' title='远程加载数据'/>
<Anchor.Link href='#unfold' title='可展开'/>
<Anchor.Link href='#fixed' title='固定头和列'/>
<Anchor.Link href='#editTable' title='可编辑的表格'/>
</Anchor>
</Affix>
</div>
)
}
Example #12
| Source File: Results.js From remixr with MIT License | 4 votes |
|
export default function Results(props) {
const [accessToken] = useState(Cookies.get('access_token'));
const [songs, setSongs] = useState([]);
const [playlist, setPlaylist] = useState(null);
const [loading, setLoading] = useState(true);
const [name, setName] = useState('remixr');
const [generatedPlaylistLink, setGeneratedPlaylistLink] = useState();
const [error, setError] = useState(false);
const initialFetchComplete = useRef(false);
// Parameters
const [count, setCount] = useState(25);
const [popularity, setPopularity] = useState({ min: 0, max: 100 });
const [danceability, setDanceability] = useState({ min: 0, max: 1 });
const [energy, setEnergy] = useState({ min: 0, max: 1 });
const [acousticness, setAcousticness] = useState({ min: 0, max: 1 });
const [valence, setValence] = useState({ min: 0, max: 1 });
const [tempo, setTempo] = useState({ min: 50, max: 200 });
const [seeds, setSeeds] = useState();
const [seedColors, setSeedColors] = useState({});
/**
* Save state to localstorage before redirecting to login page. Used for maintaining the same playlist items after being logged in
*/
const saveStateAndLogin = () => {
localStorage.setItem('songs', JSON.stringify(songs));
localStorage.setItem('playlist', JSON.stringify(playlist));
localStorage.setItem('name', JSON.stringify(name));
localStorage.setItem('count', JSON.stringify(count));
localStorage.setItem('popularity', JSON.stringify(popularity));
localStorage.setItem('danceability', JSON.stringify(danceability));
localStorage.setItem('energy', JSON.stringify(energy));
localStorage.setItem('acousticness', JSON.stringify(acousticness));
localStorage.setItem('valence', JSON.stringify(valence));
localStorage.setItem('tempo', JSON.stringify(tempo));
localStorage.setItem('seeds', JSON.stringify(seeds));
localStorage.setItem('seedColors', JSON.stringify(seedColors));
const URI = process.env.REACT_APP_API_URL;
window.location = `${URI}/login?redirectTo=results`;
};
/**
* Check if state is done updating from local storage
* @returns {boolean|boolean}
*/
const checkStateUpdatedFromStorage = () => {
return (
JSON.stringify(songs) === localStorage.getItem('songs') &&
JSON.stringify(playlist) === localStorage.getItem('playlist') &&
JSON.stringify(name) === localStorage.getItem('name') &&
JSON.stringify(count) === localStorage.getItem('count') &&
JSON.stringify(popularity) === localStorage.getItem('popularity') &&
JSON.stringify(danceability) === localStorage.getItem('danceability') &&
JSON.stringify(energy) === localStorage.getItem('energy') &&
JSON.stringify(acousticness) === localStorage.getItem('acousticness') &&
JSON.stringify(valence) === localStorage.getItem('valence') &&
JSON.stringify(tempo) === localStorage.getItem('tempo') &&
JSON.stringify(seeds) === localStorage.getItem('seeds') &&
JSON.stringify(seedColors) === localStorage.getItem('seedColors')
);
};
/**
* Restore results page state from localstorage
*/
const restoreState = () => {
setLoading(true);
initialFetchComplete.current = false;
setSongs(JSON.parse(localStorage.getItem('songs')));
setPlaylist(JSON.parse(localStorage.getItem('playlist')));
setName(JSON.parse(localStorage.getItem('name')));
setCount(JSON.parse(localStorage.getItem('count')));
setPopularity(JSON.parse(localStorage.getItem('popularity')));
setDanceability(JSON.parse(localStorage.getItem('danceability')));
setEnergy(JSON.parse(localStorage.getItem('energy')));
setAcousticness(JSON.parse(localStorage.getItem('acousticness')));
setValence(JSON.parse(localStorage.getItem('valence')));
setTempo(JSON.parse(localStorage.getItem('tempo')));
setSeeds(JSON.parse(localStorage.getItem('seeds')));
setSeedColors(JSON.parse(localStorage.getItem('seedColors')));
setLoading(false);
};
// Fetch initial songs and load
useEffect(() => {
ReactGA.pageview('/results');
ReactGA.set({ userId: Cookies.get('userID') });
if (checkStateStored()) {
restoreState();
} else if (props?.location?.state?.seed) {
initialFetchComplete.current = true;
setSeeds(props.location.state.seed);
setLoading(false);
} else {
// Immediately Invoked Function Expression
(async () => {
if (props?.location?.state?.playlist) {
setPlaylist(props.location.state.playlist);
}
if (props?.location?.state?.playlist?.id || playlist?.id) {
let id = playlist?.id || props?.location?.state?.playlist?.id;
const url = process.env.REACT_APP_API_URL + '/results/' + id;
try {
let response = await transport.get(url);
setSongs(response.data.songs);
const parameters = response.data.parameters;
setDanceability({
min: parameters.min_danceability,
max: parameters.max_danceability,
});
setAcousticness({
min: parameters.min_acousticness,
max: parameters.max_acousticness,
});
setPopularity({
min: parameters.min_popularity,
max: parameters.max_popularity,
});
setEnergy({
min: parameters.min_energy,
max: parameters.max_energy,
});
setValence({
min: parameters.min_valence,
max: parameters.max_valence,
});
setTempo({
min: parameters.min_tempo,
max: parameters.max_tempo,
});
let [artists, tracks] = await Promise.all([
getArtists(accessToken, parameters.seed_artists),
getTracks(accessToken, parameters.seed_tracks),
]);
setSeeds({
artists: artists,
tracks: tracks,
});
let playlistName = playlist?.name || props?.location?.state?.playlist?.name;
setName(`remixr:${playlistName}`);
initialFetchComplete.current = true;
setLoading(false);
} catch (e) {
console.log(e);
setError(true);
}
}
})();
}
}, []);
// Update generated songs if parameters are changed
useEffect(() => {
if (!loading && initialFetchComplete.current) {
// To prevent effect from refreshing songlist while restoring from localStorage
console.log('Running seeds effect');
setLoading(true);
setGeneratedPlaylistLink(null);
let parameters = {
popularity,
danceability,
energy,
acousticness,
valence,
tempo,
};
getRecommendations(accessToken, parameters, seeds, count)
.then((songs) => {
setSongs(songs);
setLoading(false);
})
.catch((error) => {
console.log(error);
setError(true);
});
} else if (checkStateStored() && checkStateUpdatedFromStorage()) {
// Runs once state is fully restored from local storage
initialFetchComplete.current = true;
localStorage.clear();
}
}, [count, popularity, danceability, energy, tempo, acousticness, valence, seeds]);
// Calculate colors for seeds
useEffect(() => {
// Using IIFE for async effect
seeds &&
seeds.artists &&
seeds.tracks &&
(async () => {
let items = [...seeds.artists, ...seeds.tracks];
let promiseArray = [...seeds.artists, ...seeds.tracks].map((item) =>
Vibrant.from(item.image)
.getPalette()
.then((palette) => palette.Vibrant._rgb.toString())
);
let colors = await Promise.all(promiseArray);
let colorStyles = {};
for (let i = 0; i < items.length; i++) {
colorStyles[items[i].id] = `rgba(${colors[i]},0.6)`;
}
setSeedColors(colorStyles);
})();
}, [seeds]);
// If invalid access
if (!(props?.location?.state?.playlist || props?.location?.state?.seed || checkStateStored() || songs)) {
return <Redirect to="/" />;
}
const savePlaylist = () => {
ReactGA.event({
category: 'Save playlist',
action: 'Click save button',
});
const url = process.env.REACT_APP_API_URL + '/save';
transport
.post(url, {
name,
tracks: songs.map((item) => item.uri),
})
.then(
(response) => {
console.log('Saved playlist');
console.log(response);
setGeneratedPlaylistLink(response.data.link);
},
(error) => {
console.log(error);
}
);
};
const removeSeed = (item, type) => {
ReactGA.event({
category: 'Seeds',
action: 'Remove seed',
label: 'Results',
});
if (seeds.artists.length + seeds.tracks.length <= 1) {
message.error('Cannot remove all seeds');
ReactGA.event({
category: 'Seeds',
action: 'Remove all seeds error',
label: 'Results',
});
} else {
setSeeds({
artists: type === 'artist' ? seeds.artists.filter((artist) => artist.id !== item.id) : seeds.artists,
tracks: type === 'track' ? seeds.tracks.filter((track) => track.id !== item.id) : seeds.tracks,
});
}
};
const addSeed = (item, type) => {
if (seeds.artists.length + seeds.tracks.length >= 5) {
message.error('Cannot add more than five seeds');
ReactGA.event({
category: 'Seeds',
action: 'Add extra seeds error',
label: 'Results',
});
} else {
setSeeds({
artists: type === 'artist' ? [...seeds.artists, item] : seeds.artists,
tracks: type === 'track' ? [...seeds.tracks, item] : seeds.tracks,
});
}
};
const seedTags = (
<Space className="tagsList" size={1}>
{seeds &&
seeds.artists &&
seeds.artists.map((artist) => (
<Tag
style={
seedColors &&
seedColors[artist.id] && {
backgroundColor: seedColors[artist.id],
}
}
className="seedTag"
key={artist.id}
closable
onClose={(e) => {
e.preventDefault();
removeSeed(artist, 'artist');
}}
>
<img src={artist.image} width={60} height={60} alt="" />
<div className="tagName">
<span>{artist.name}</span>
</div>
</Tag>
))}
{seeds &&
seeds.tracks &&
seeds.tracks.map((track) => (
<Tag
className="seedTag"
style={seedColors && seedColors[track.id] && { backgroundColor: seedColors[track.id] }}
key={track.id}
closable
onClose={(e) => {
e.preventDefault();
removeSeed(track, 'track');
}}
>
<img src={track.image} width={60} height={60} alt="" />
<div className="tagName">
<span>{track.name}</span>
</div>
</Tag>
))}
</Space>
);
const parametersMenu = (
<ParametersMenu
values={{
count,
energy,
popularity,
danceability,
tempo,
acousticness,
valence,
}}
handlers={{
setCount,
setEnergy,
setPopularity,
setDanceability,
setTempo,
setAcousticness,
setValence,
}}
/>
);
const access_token = Cookies.get('access_token');
const isLoggedIn = access_token !== undefined && access_token !== null && access_token !== '';
const savePlaylistMenu = (
<SavePlaylist
name={name}
setName={setName}
saveHandler={savePlaylist}
isLoggedIn={isLoggedIn}
saveStateAndLogin={saveStateAndLogin}
/>
);
const playlistSuccessPage = <PlaylistSuccessPage link={generatedPlaylistLink} />;
if (error) {
return <ErrorScreen />;
}
return (
<div>
<Navbar />
{playlist ? (
<Title style={{ textAlign: 'center' }} level={2}>
Generated from: {playlist.name}
</Title>
) : null}
<SearchSeeds addSeed={addSeed} />
{seedTags}
<Row>
{/* Mobile settings drawer */}
<Col xs={24} sm={24} md={24} lg={0} xl={0}>
{!loading && generatedPlaylistLink ? playlistSuccessPage : savePlaylistMenu}
<Collapse
bordered={false}
className="collapse-parameters rounded-component"
onClick={() => {
ReactGA.event({
category: 'Parameters',
action: 'Opened parameters on Mobile',
});
}}
>
<Panel header="Tune Playlist Settings" key="1">
{!loading && parametersMenu}
</Panel>
</Collapse>
</Col>
{/* Songs */}
<Col xs={24} sm={24} md={24} lg={16} xl={16}>
<SongList loading={loading} songs={songs} />
</Col>
{/* Web settings drawer */}
<Col xs={0} sm={0} md={0} lg={8} xl={8}>
<Affix offsetTop={70}>
{generatedPlaylistLink ? playlistSuccessPage : savePlaylistMenu}
{!loading && (
<div className="parameters rounded-component">
<Title style={{ textAlign: 'center' }} level={3}>
Tune playlist settings
</Title>
{parametersMenu}
</div>
)}
</Affix>
</Col>
</Row>
</div>
);
}
Example #13
| Source File: ComponentDoc.jsx From stack-labs-site with MIT License | 4 votes |
|
render() {
const {
doc,
location,
intl: { locale },
utils,
theme,
setIframeTheme,
demos,
} = this.props;
const { content, meta } = doc;
const demoValues = Object.keys(demos).map(key => demos[key]);
const { expandAll, visibleAll, showRiddleButton } = this.state;
const isSingleCol = meta.cols === 1;
const leftChildren = [];
const rightChildren = [];
let showedDemo = demoValues.some(demo => demo.meta.only)
? demoValues.filter(demo => demo.meta.only)
: demoValues.filter(demo => demo.preview);
if (!visibleAll) {
showedDemo = showedDemo.filter(item => !item.meta.debug);
}
showedDemo
.sort((a, b) => a.meta.order - b.meta.order)
.forEach((demoData, index) => {
const demoElem = (
<Demo
{...demoData}
key={demoData.meta.filename}
utils={utils}
expand={expandAll}
location={location}
theme={theme}
setIframeTheme={setIframeTheme}
/>
);
if (index % 2 === 0 || isSingleCol) {
leftChildren.push(demoElem);
} else {
rightChildren.push(demoElem);
}
});
const expandTriggerClass = classNames({
'code-box-expand-trigger': true,
'code-box-expand-trigger-active': expandAll,
});
const jumper = showedDemo.map(demo => {
const { title } = demo.meta;
const localizeTitle = title[locale] || title;
return (
<li key={demo.meta.id} title={localizeTitle}>
<a href={`#${demo.meta.id}`}>{localizeTitle}</a>
</li>
);
});
const { title, subtitle, filename } = meta;
const articleClassName = classNames({
'show-riddle-button': showRiddleButton,
});
const helmetTitle = `${subtitle || ''} ${title[locale] || title} - Micro 中国`;
const contentChild = getMetaDescription(getChildren(content));
return (
<article className={articleClassName}>
<Helmet encodeSpecialCharacters={false}>
{helmetTitle && <title>{helmetTitle}</title>}
{helmetTitle && <meta property="og:title" content={helmetTitle} />}
{contentChild && <meta name="description" content={contentChild} />}
</Helmet>
<Affix className="toc-affix" offsetTop={16}>
<ul id="demo-toc" className="toc">
{jumper}
{doc.api && (
<li key="API" title="API">
<a href="#API">API</a>
</li>
)}
</ul>
</Affix>
<section className="markdown">
<h1>
{title[locale] || title}
{!subtitle ? null : <span className="subtitle">{subtitle}</span>}
<EditButton
title={<FormattedMessage id="app.content.edit-page" />}
filename={filename}
/>
</h1>
{utils.toReactComponent(
['section', { className: 'markdown' }].concat(getChildren(content)),
)}
<h2>
<FormattedMessage id="app.component.examples" />
<span className="all-code-box-controls">
<Tooltip
title={
<FormattedMessage
id={`app.component.examples.${expandAll ? 'collapse' : 'expand'}`}
/>
}
>
{expandAll ? (
<CodeFilled className={expandTriggerClass} onClick={this.handleExpandToggle} />
) : (
<CodeOutlined className={expandTriggerClass} onClick={this.handleExpandToggle} />
)}
</Tooltip>
<Tooltip
title={
<FormattedMessage
id={`app.component.examples.${visibleAll ? 'hide' : 'visible'}`}
/>
}
>
{visibleAll ? (
<BugFilled className={expandTriggerClass} onClick={this.handleVisibleToggle} />
) : (
<BugOutlined className={expandTriggerClass} onClick={this.handleVisibleToggle} />
)}
</Tooltip>
</span>
</h2>
</section>
<Row gutter={16}>
<Col
span={isSingleCol ? 24 : 12}
className={isSingleCol ? 'code-boxes-col-1-1' : 'code-boxes-col-2-1'}
>
{leftChildren}
</Col>
{isSingleCol ? null : (
<Col className="code-boxes-col-2-1" span={12}>
{rightChildren}
</Col>
)}
</Row>
{utils.toReactComponent(
[
'section',
{
className: 'markdown api-container',
},
].concat(getChildren(doc.api || ['placeholder'])),
)}
</article>
);
}
Example #14
| Source File: MainContent.jsx From stack-labs-site with MIT License | 4 votes |
|
render() {
return (
<SiteContext.Consumer>
{({ isMobile }) => {
const { theme, setIframeTheme } = this.context;
const { openKeys } = this.state;
const {
localizedPageData,
demos,
intl: { formatMessage },
} = this.props;
const { meta } = localizedPageData;
const activeMenuItem = this.getActiveMenuItem();
const menuItems = this.getMenuItems();
const menuItemsForFooterNav = this.getMenuItems({
before: <LeftOutlined className="footer-nav-icon-before" />,
after: <RightOutlined className="footer-nav-icon-after" />,
});
const { prev, next } = this.getFooterNav(menuItemsForFooterNav, activeMenuItem);
const mainContainerClass = classNames('main-container', {
'main-container-component': !!demos,
});
const menuChild = (
<Menu
inlineIndent={30}
className="aside-container menu-site"
mode="inline"
openKeys={openKeys}
selectedKeys={[activeMenuItem]}
onOpenChange={this.handleMenuOpenChange}
>
{menuItems}
</Menu>
);
const componentPage = /^\/?components/.test(this.props.location.pathname);
return (
<div className="main-wrapper">
<Row>
{isMobile ? (
<MobileMenu key="Mobile-menu" wrapperClassName="drawer-wrapper">
{menuChild}
</MobileMenu>
) : (
<Col xxl={4} xl={5} lg={6} md={6} sm={24} xs={24} className="main-menu">
<Affix>
<section className="main-menu-inner">{menuChild}</section>
</Affix>
</Col>
)}
<Col xxl={20} xl={19} lg={18} md={18} sm={24} xs={24}>
<section className={mainContainerClass}>
{demos ? (
<ComponentDoc
{...this.props}
doc={localizedPageData}
demos={demos}
theme={theme}
setIframeTheme={setIframeTheme}
/>
) : (
<Article {...this.props} content={localizedPageData} />
)}
<ContributorsList
className="contributors-list"
fileName={meta.filename}
renderItem={(item, loading) =>
loading ? (
<Avatar style={{ opacity: 0.3 }} />
) : (
<Tooltip
title={`${formatMessage({ id: 'app.content.contributors' })}: ${
item.username
}`}
key={item.username}
>
<a
href={`https://github.com/${item.username}`}
target="_blank"
rel="noopener noreferrer"
>
<Avatar src={item.url}>{item.username}</Avatar>
</a>
</Tooltip>
)
}
repo="ant-design"
owner="ant-design"
/>
</section>
{componentPage && (
<div className="fixed-widgets">
<Dropdown overlay={this.getThemeSwitchMenu()} placement="topCenter">
<Avatar className="fixed-widgets-avatar" size={44} icon={<ThemeIcon />} />
</Dropdown>
</div>
)}
<PrevAndNext prev={prev} next={next} />
<Footer />
</Col>
</Row>
</div>
);
}}
</SiteContext.Consumer>
);
}
