@ant-design/icons#ExpandOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#ExpandOutlined.
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: 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 #2
| Source File: build_history_table.js From art-dashboard-ui with Apache License 2.0 | 4 votes |
|
render() {
const columns = [
{
title: 'Brew Build',
dataIndex: "build_id",
key: "build_id",
render: (text, record) => (
<div>
<a href={process.env.REACT_APP_BREW_BUILD_LINK+record["build_id"]}
target="_blank" rel="noopener noreferrer">
{record["build_id"] !== null && record["build_id"]}
{record["build_id"] === null && "Not Available"}
</a>
</div>
)
},
{
title:()=>{
return (
<Row>
<Col span={24} className="left">
Build Status
</Col>
<Col span={24}>
<Run_status_filter search_callback={this.props.simple_filter_callback}/>
</Col>
</Row>
)
},
dataIndex: "fault_code",
key: "fault_code",
align: "center",
render: (text, record) =>{
if(record["fault_code"] === 0){
return(
<div>
<a href={process.env.REACT_APP_BREW_TASK_LINK+record["task_id"]}
target="_blank" rel="noopener noreferrer"><CheckOutlined style = {{color: "#52c41a"}}/></a>
</div>
)
}
else{
return(
<div>
<a href={process.env.REACT_APP_BREW_TASK_LINK+record["task_id"]}
target="_blank" rel="noopener noreferrer">
<Tooltip title={"Fault Code is " + record["fault_code"]}>
<CloseOutlined style = {{color: "#f55d42"}}/>
</Tooltip>
</a>
</div>
)
}
}
},
{
title:()=>{
return (
<Row>
<Col span={24} className="left">
Package
</Col>
<Col span={24}>
<Autocomplete_filter placeholder={"Package Name"} type={"nvr"} search_callback={this.props.simple_filter_callback}/>
</Col>
</Row>
)
},
dataIndex: "dg_name",
key: "dg_name"
},
{
title: "Version",
key: "label_version",
dataIndex: "label_version"
},
{
title: "CGIT Link",
dataIndex: "build_0_source",
key: "build_0_source",
render: (data, record) => {
const http_link = "http://pkgs.devel.redhat.com/cgit/" + record["dg_namespace"] + "/" + record["dg_name"] + "/tree/?id=" + record["dg_commit"];
return (
<a href={http_link} target="_blank" rel="noopener noreferrer">{"#"+record["dg_commit"]}</a>
)
}
},
{
title: "Source Commit",
align: "center",
dataIndex: "build_commit_url_github",
key: "build_commit_url_github",
render: (data, record) => {
if(record["build_commit_url_github"] !== null)
return(
<a href={record["build_commit_url_github"]} target="_blank" rel="noopener noreferrer">{"#" + record["build_commit_url_github"].slice(-8)}</a>
)
else
return(
<p>Not Available</p>
)
}
},
{
title: ()=>{
return (
<Row>
<Col span={24} className="left">
Build Time ISO
</Col>
<Col span={24}>
<Datepicker_filter placeholder={"Build Date"} search_callback={this.props.simple_filter_callback}/>
</Col>
</Row>
)
},
dataIndex: "iso_time",
key: "iso_time",
render: (data, record) => {
//let date = new Date(record["iso_time"])
return (
<p>{record["iso_time"].split("T")[0] + " " + record["iso_time"].split("T")[1].split(".")[0]}</p>
// <p>{date.getFullYear()+'-' + this.render_single_digit_to_double_datetime((date.getMonth()+1)) + '-'+this.render_single_digit_to_double_datetime(date.getDate()) + ' ' + this.render_single_digit_to_double_datetime(date.getHours()) + ':' + this.render_single_digit_to_double_datetime(date.getMinutes()) + ":" + this.render_single_digit_to_double_datetime(date.getSeconds())}</p>
)
}
},
{
title: 'More Details',
align: "center",
render: (text, record) => (
<div>
<a>
<ExpandOutlined onClick={() => this.showBuildDescriptionModal(record)}/>
</a>
<Modal
title= {"Build Details"}
visible= {this.state["visible_modal_"+record["build_id"]]}
onOk={() => this.handleOkBuildDescriptionModal(record)}
onCancel={() => this.handleOkBuildDescriptionModal(record)}
footer={null}
>
<p><a href={record["jenkins_build_url"]}>{"Jenkins Build Url"}</a></p>
<p>{"Jenkins Build Number: " + record["jenkins_build_number"]}</p>
<p>{"Jenkins Job Name: " + record["jenkins_job_name"]}</p>
<p>{"Build Name: " + record["build_name"]}</p>
<p>{"Build Version: " + record["build_version"]}</p>
</Modal>
</div>
)
}
]
return (
<div>
<Table dataSource={this.state.data} columns={columns}/>
</div>
);
}
Example #3
| Source File: incident_table.js From art-dashboard-ui with Apache License 2.0 | 4 votes |
|
render() {
const columns = [
{
title: "Incident ID",
key: "pk",
dataIndex: "pk"
},
{
title: "Start Time",
render: (data, record) => {
let start_time = null;
if (record["fields"]["incident_start"] === null){
start_time = "Not Available";
}else{
start_time = record["fields"]["incident_start"];
start_time = start_time.split("Z")[0];
start_time = start_time.split("T");
start_time = start_time[0] + " " + start_time[1].split(".")[0];
}
return (
<div>
<p>{start_time}</p>
</div>
)
}
},
{
title: "End Time",
render: (data, record) => {
let end_time = null;
if (record["fields"]["incident_end"] === null){
end_time = "Not Available";
}else{
end_time = record["fields"]["incident_end"];
end_time = end_time.split("Z")[0];
end_time = end_time.split("T");
end_time = end_time[0] + " " + end_time[1].split(".")[0];
}
return (
<div>
<p>{end_time}</p>
</div>
)
}
},
{
title: "Title",
render: (data, record) => {
return(
<div>
<Paragraph ellipsis={{rows: 2, expandable: false}}> {record["fields"]["title"]}</Paragraph>
</div>
)
}
},
{
title: "Update",
render: (data, record) => {
return(
<div>
<a>
<EditOutlined onClick={() => this.props.history.push("/incidents/?page=update&id="+record["pk"])}/>
</a>
<Update_incident_drawer visibility = {this.state["visible_update_"+record["pk"]]} data={record} modal_close_function={this.hide_incident_update_view} refresh_callback={this.props.refresh_callback}/>
</div>
)
}
},
{
title: "Detailed View",
render: (data, record) =>{
return(
<div>
<a>
<a>
{/*<ExpandOutlined onClick={() => this.show_incident_detailed_view(record)}/>*/}
<ExpandOutlined onClick={() => this.props.history.push("/incidents/?page=detailed&id="+record["pk"])}/>
</a>
</a>
<Detailed_view_modal visible= {this.state["visible_modal_"+record["pk"]]} data={record} modal_close_function={this.hide_incident_detailed_view} update_view_show_callback={this.show_update_view_callback_from_detailed_view}/>
</div>
)
}
},
{
title: "Delete",
render: (data, record) =>{
return(
<div>
<Popconfirm
title="Are you sure you want to delete this incident record?"
onConfirm={() => {
delete_incident(record["pk"]).then(data=>{
if(data["status"] === 0){
message.success({content: "Incident Deleted", duration: 2, style: {position: "fixed", left: "50%", top: "20%", color: "#316DC1"}})
this.props.refresh_callback();
}else{
message.error({content: "Failed to delete Incident", duration: 2, style: {position: "fixed", left: "50%", top: "20%", color: "#316DC1"}})
}
})
}}
onCancel={()=>{
}}
okText="Delete"
cancelText="Cancel"
okButtonProps={{"record": record}}
>
<a>
<DeleteOutlined/>
</a>
</Popconfirm>
</div>
)
}
}
]
return (
<div>
<Table columns={columns} dataSource={this.state.data}/>
</div>
);
}
