@ant-design/icons#FileAddOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#FileAddOutlined.
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: fileInput.js From virtuoso-design-system with MIT License | 5 votes |
|
FileInput = React.memo(({ fileList }) => {
const fileInputRef = useRef(null);
const dropAreaRef = useRef(null);
const onFileChange = (e) => {
const files = e.target?.files;
fileList(files);
fileInputRef.current.value = null;
};
const preventCb = (e) => {
e.preventDefault();
e.stopPropagation();
};
const handleDragLeave = (e) => {
preventCb(e);
const dropArea = dropAreaRef.current;
dropArea.classList.remove(styles.focusedInputWrapper);
};
const handleDrop = (e) => {
handleDragLeave(e);
const dt = e.dataTransfer;
const { files } = dt;
fileList(files);
};
const handleDragEnter = (e) => {
preventCb(e);
const dropArea = dropAreaRef.current;
dropArea.classList.add(styles.focusedInputWrapper);
};
const handleDragOver = (e) => {
handleDragEnter(e);
e.dataTransfer.dropEffect = 'copy';
};
return (
<div className={styles.inputWrapper}>
<input
name="files"
type="file"
multiple
className={styles.input}
ref={fileInputRef}
id="files"
aria-label="file-input"
onChange={onFileChange}
/>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/label-has-for */}
<label htmlFor="files" className={styles.labelWrap}>
<div
ref={dropAreaRef}
className={styles.label}
onDragLeave={handleDragLeave}
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
onDrop={handleDrop}
data-testid="drop-area"
>
<span className={styles.textWrapper}>
<FileAddOutlined className={styles.addFileIcon} />
Drop or <span className={styles.fakeLink}>add files</span> here
</span>
</div>
</label>
</div>
);
})
Example #2
| Source File: index.jsx From juno with Apache License 2.0 | 4 votes |
|
function Page(props) {
const { list, listLoading, loadList, showModalCreate, pagination } = props;
const { current = 0, pageSize = 10, query } = props.location.query;
useEffect(() => {
loadList({ current, pageSize, query });
}, []);
const TableColumns = [
{
title: 'ID',
key: 'id',
dataIndex: 'id',
},
{
title: '名称',
key: 'title',
dataIndex: 'title',
},
{
title: '子路径',
key: 'sub_path',
dataIndex: 'sub_path',
},
{
title: '是否重写',
key: 'is_rewrite',
dataIndex: 'is_rewrite',
},
{
title: '更新时间',
key: 'last_update',
dataIndex: 'last_update',
render: (val) => {
return moment(val).format('YYYY-MM-DD HH:mm:ss');
},
},
];
const handleTableChange = (pagination, filters, sorter) => {
loadList(pagination.current - 1, pagination.pageSize, query, filters.env, filters.zone_code);
props.dispatch(
routerRedux.push({
query: {
...props.location.query,
...filters,
page: pagination.page,
pageSize: pagination.pageSize,
},
}),
);
};
const onSearch = (value) => {
props.dispatch(
routerRedux.push({
query: {
...props.location.query,
query: value,
},
}),
);
loadList({ ...props.location.query, query: value });
};
return (
<>
<Card>
<Space direction={'vertical'} style={{ width: '100%' }}>
<Row justify={'space-between'}>
<Col>
<Button onClick={() => showModalCreate(true)}>
<FileAddOutlined />
新建
</Button>
</Col>
<Col>
<Input.Search defaultValue={query} onSearch={onSearch} placeholder={'搜索名称'} />
</Col>
</Row>
<Table
loading={listLoading}
rowKey={'id'}
columns={[
...TableColumns,
{
title: '操作',
render: (row) => {
return (
<Button.Group>
<Button
onClick={() => {
props.showModalEdit({
visible: true,
...row,
});
}}
>
编辑
</Button>
</Button.Group>
);
},
},
]}
dataSource={list}
pagination={{
...pagination,
current: pagination.current + 1,
}}
onChange={handleTableChange}
/>
</Space>
</Card>
<ModalCreate onOk={() => loadList()} />
<ModalEdit onOk={() => loadList()} />
</>
);
}
Example #3
| Source File: index.jsx From juno with Apache License 2.0 | 4 votes |
|
function Page(props) {
const { list, listLoading, loadList, showModalCreate, pagination } = props;
const { current = 0, pageSize = 10, query } = props.location.query;
useEffect(() => {
loadList({ current, pageSize, query });
}, []);
const TableColumns = [
{
title: 'ID',
key: 'id',
dataIndex: 'id',
},
{
title: '名称',
key: 'title',
dataIndex: 'title',
},
{
title: '类型',
key: 'panel_type',
dataIndex: 'panel_type',
},
{
title: '标识key',
key: 'key',
dataIndex: 'key',
},
{
title: '更新时间',
key: 'last_update',
dataIndex: 'last_update',
render: (val) => {
return moment(val).format('YYYY-MM-DD HH:mm:ss');
},
},
];
const handleTableChange = (pagination, filters, sorter) => {
loadList({ current: pagination.current - 1, pageSize: pagination.pageSize, query });
props.dispatch(
routerRedux.push({
query: {
...props.location.query,
...filters,
page: pagination.page,
pageSize: pagination.pageSize,
},
}),
);
};
const onSearch = (value) => {
props.dispatch(
routerRedux.push({
query: {
...props.location.query,
query: value,
},
}),
);
loadList({ ...props.location.query, query: value });
};
return (
<>
<Card>
<Space direction={'vertical'} style={{ width: '100%' }}>
<Row justify={'space-between'}>
<Col>
<Button onClick={() => showModalCreate(true)}>
<FileAddOutlined />
新建
</Button>
</Col>
<Col>
<Input.Search defaultValue={query} onSearch={onSearch} placeholder={'搜索名称'} />
</Col>
</Row>
<Table
loading={listLoading}
rowKey={'id'}
columns={[
...TableColumns,
{
title: '操作',
render: (row) => {
return (
<Button.Group>
<Button
onClick={() => {
props.showModalEdit({
visible: true,
...row,
});
}}
>
编辑
</Button>
</Button.Group>
);
},
},
]}
dataSource={list}
pagination={{
...pagination,
current: pagination.current + 1,
}}
onChange={handleTableChange}
/>
</Space>
</Card>
<ModalCreate onOk={() => loadList()} />
<ModalEdit onOk={() => loadList()} />
</>
);
}
Example #4
| Source File: index.jsx From juno with Apache License 2.0 | 4 votes |
|
function ResourcePage(props) {
const {
zoneEnv,
list,
loadZoneEnvTree,
listLoading,
loadList,
showModalCreateResource,
pagination,
} = props;
const { page = 0, pageSize = 10, env = null, zone = null, query = '' } = props.location.query;
useEffect(() => {
loadZoneEnvTree();
loadList(0, 10, query);
}, []);
const ResourceTableColumns = [
{
title: 'ID',
key: 'id',
dataIndex: 'id',
},
{
title: 'Env',
key: 'env',
dataIndex: 'env',
filters: Object.keys(zoneEnv).map((env) => {
return {
text: env,
value: env,
};
}),
},
{
title: 'Zone',
key: 'zone_code',
dataIndex: 'zone_code',
filters: (function () {
let zoneMap = {};
Object.keys(zoneEnv).map((env) => {
zoneEnv[env].map((zone) => {
zoneMap[zone.zone_code] = zone;
});
});
return Object.keys(zoneMap).map((zone) => {
return {
text: zone,
value: zone,
};
});
})(),
},
{
title: 'Name',
key: 'name',
dataIndex: 'name',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: (val) => {
return (
val &&
val.map((t) => {
return <Tag color={'blue'}>{t}</Tag>;
})
);
},
},
{
title: 'Description',
key: 'description',
dataIndex: 'description',
},
{
title: 'Latest Version',
key: 'latest_version',
dataIndex: 'latest_version',
render: (val) => {
return <Tag>{val}</Tag>;
},
},
{
title: 'Last Update',
key: 'last_update',
dataIndex: 'last_update',
render: (val) => {
return moment(val).format('YYYY-MM-DD HH:mm:ss');
},
},
];
const handleTableChange = (pagination, filters, sorter) => {
loadList(pagination.current - 1, pagination.pageSize, query, filters.env, filters.zone_code);
props.dispatch(
routerRedux.push({
query: {
...props.location.query,
...filters,
page: pagination.page,
pageSize: pagination.pageSize,
},
}),
);
};
const onSearch = (value) => {
props.dispatch(
routerRedux.push({
query: {
...props.location.query,
query: value,
},
}),
);
loadList(page, pageSize, value, env, zone);
};
return (
<PageHeaderWrapper>
<Card>
<Space direction={'vertical'} style={{ width: '100%' }}>
<Row justify={'space-between'}>
<Col>
<Button onClick={() => showModalCreateResource(true)}>
<FileAddOutlined />
新建
</Button>
</Col>
<Col>
<Input.Search defaultValue={query} onSearch={onSearch} placeholder={'搜索资源名称'} />
</Col>
</Row>
<Table
loading={listLoading}
rowKey={'id'}
columns={[
...ResourceTableColumns,
{
title: '操作',
render: (row) => {
return (
<Button.Group>
<Button
onClick={() => {
console.log(row);
props.showModalEdit({
visible: true,
...row,
});
}}
>
更新
</Button>
</Button.Group>
);
},
},
]}
dataSource={list}
pagination={{
...pagination,
current: pagination.current + 1,
}}
onChange={handleTableChange}
/>
</Space>
</Card>
<ModalCreateResource onOk={() => loadList()} />
<ModalEditResource onOk={() => loadList()} />
</PageHeaderWrapper>
);
}
Example #5
| Source File: index.jsx From juno with Apache License 2.0 | 4 votes |
|
renderForm(editor, addrOptions, metadata, response) {
const { request_loading } = this.props;
return (
<Form ref={this.form} className={styles.layoutContent}>
<div className={styles.caseNameLine}>
<Form.Item
rules={[{ required: true }]}
name={'case_name'}
initialValue={editor.form.case_name}
>
<Input placeholder="请输入用例名称" addonBefore={'Name'} />
</Form.Item>
<Popover content="Ctrl-S">
<Button icon={<FileAddOutlined />} onClick={this.onSave}>
Save
</Button>
</Popover>
</div>
<div className={styles.caseAddrLine}>
<Form.Item name={'address'}>
<AutoComplete optionLabelProp="value" dataSource={addrOptions}>
<Input addonBefore={'Address'} placeholder="请输入地址" />
</AutoComplete>
</Form.Item>
<Button
icon={<RocketOutlined />}
type="primary"
loading={request_loading}
onClick={this.onSendRequest}
>
Send
</Button>
</div>
<div className={styles.basicInfoLine}>
<Descriptions bordered size="small">
<Descriptions.Item label="App">{editor.info.app_name}</Descriptions.Item>
<Descriptions.Item label="Service">{editor.info.service_name}</Descriptions.Item>
<Descriptions.Item label="Method">{editor.info.method_name}</Descriptions.Item>
</Descriptions>
</div>
<div className={styles.inputOutputLayout}>
<div className={styles.inputContainer}>
<Tabs
className={styles.inputTabs}
tabBarStyle={{ height: '100%' }}
defaultActiveKey={'payload'}
onChange={(tab) => {
let dimension = { width: '100%', height: 'auto' };
setTimeout(() => {
switch (tab) {
case 'payload':
this.payloadEditor?.layout();
break;
case 'script':
this.scriptEditor?.layout();
break;
}
});
}}
renderTabBar={(props, DefaultTab) => {
return (
<DefaultTab
{...props}
style={{
padding: '0 10px',
margin: '0',
backgroundColor: 'rgb(250,250,250)',
}}
/>
);
}}
>
<Tabs.TabPane tab={'Payload'} key={'payload'}>
<div className={styles.grpcPayload}>
<MonacoEditor
width={'100%'}
height={'663px'}
value={editor.form.input}
onChange={(val) => {
this.onGrpcInputChange(val);
}}
language={'json'}
theme={'vs'}
options={{
automaticLayout: true,
}}
editorDidMount={(editor) => {
this.payloadEditor = editor;
}}
/>
</div>
</Tabs.TabPane>
<Tabs.TabPane tab={'Metadata'} key={'metadata'}>
<div className={styles.metadataInputLine}>
<KeyValueEditor data={metadata} onChange={this.onMetadataChange} />
</div>
</Tabs.TabPane>
<Tabs.TabPane tab={'Test Script'} key={'script'}>
<MonacoEditor
width={'100%'}
height={'663px'}
value={editor.form.script || DefaultScript}
language={'javascript'}
theme={'vs'}
onChange={(val) => {
this.onTestScriptChange(val);
}}
editorDidMount={(editor) => {
this.scriptEditor = editor;
}}
/>
</Tabs.TabPane>
</Tabs>
</div>
<div className={styles.outputContainer}>
<Tabs
className={styles.outputTabs}
tabBarStyle={{ height: '100%' }}
defaultActiveKey={'response'}
renderTabBar={(props, DefaultTab) => {
return (
<DefaultTab
{...props}
style={{
padding: '0 10px',
margin: '0',
backgroundColor: 'rgb(250,250,250)',
}}
/>
);
}}
>
<Tabs.TabPane tab={'Response'} key={'response'}>
<div className={styles.responseContainer}>
{response === null ? (
<div style={{ textAlign: 'center', padding: '40px', color: '#c3c3c3' }}>
<RocketOutlined style={{ fontSize: '48px' }} />
<p style={{ marginTop: '20px' }}>发起请求获取响应</p>
</div>
) : (
<Spin spinning={request_loading}>
<div
className={
styles.responseStatusBar +
(response.status === 'success' ? '' : ' ' + styles.responseStatusBarFail)
}
>
<span className={styles.statusBlock}>
<span>Test: </span>
<span>
{response.test_passed ? (
<span className={styles.statusSuccess}>passed</span>
) : (
<span className={styles.statusFail}>failed</span>
)}
</span>
</span>
<span className={styles.statusBlock}>
<span>Status: </span>
<span>
{response.status === 'success' ? (
<span className={styles.statusSuccess}>success</span>
) : (
<span className={styles.statusFail}>fail</span>
)}
</span>
</span>
<span className={styles.statusBlock}>
<span>Time: </span>
<span className={styles.statusSuccess}>{response.time_cost}ms</span>
</span>
</div>
{response.status === 'success' ? (
// 成功
<div className={styles.responseSuccess}>
<MonacoEditor
width={'100%'}
height={'621px'}
value={response.output}
language={'json'}
theme={'vs'}
options={{
readOnly: true,
automaticLayout: true,
}}
/>
</div>
) : (
// 失败
<div className={styles.responseFail}>
<Tag color="red">error</Tag>
{response.error}
</div>
)}
</Spin>
)}
</div>
</Tabs.TabPane>
<Tabs.TabPane tab={'Logs'} key={'logs'}>
{response?.logs && Object.keys(response?.logs).length ? (
<Descriptions size={'small'} bordered style={{ margin: '10px' }}>
{Object.keys(response?.logs || {}).map((key, idx) => {
return (
<Descriptions.Item label={key} key={idx} span={24}>
{response.logs[key]}
</Descriptions.Item>
);
})}
</Descriptions>
) : (
<Empty style={{ margin: '10px' }} />
)}
</Tabs.TabPane>
</Tabs>
</div>
</div>
</Form>
);
}
Example #6
| Source File: CollectionsTab.jsx From juno with Apache License 2.0 | 4 votes |
|
render() {
const {
modalNewRequestVisible,
modalNewRequestFolderID,
rightMenuVisible,
rightMenuPosition,
rightMenuItems,
rightMenuState,
} = this.state;
const { collectionsLoading, collections } = this.props;
const { folderTree } = this.props.model;
return (
<div className={styles.CollectionsTab}>
<div className={styles.optionBar}>
<Button
onClick={() => {
this.showModalCreateCollection(true);
}}
type={'link'}
icon={<FolderAddOutlined />}
size={'small'}
title={'New Folder'}
/>
<Button
onClick={() => {
this.showModalCreateTestCase(true);
}}
type={'link'}
icon={<FileAddOutlined />}
size={'small'}
title={'New File'}
/>
</div>
<Spin spinning={collectionsLoading}>
{collections && collections.length ? (
<ReactScrollBar style={{ height: '710px' }}>
<Tree.DirectoryTree
onSelect={this.onSelectTreeItem}
onRightClick={this.onTreeRightClick}
>
{(collections || []).map((item) => {
return (
<Tree.TreeNode
key={`collection-${item.id}`}
collectionID={item.id}
title={item.name}
>
{(item.test_cases || []).map((testCase) => {
return (
<Tree.TreeNode
key={`testcase-${testCase.id}`}
collectionID={item.id}
title={testCase.name}
isLeaf
/>
);
})}
</Tree.TreeNode>
);
})}
</Tree.DirectoryTree>
</ReactScrollBar>
) : (
<Empty />
)}
</Spin>
<NewCollectionModal />
<NewTestCaseModal
visible={modalNewRequestVisible}
folderTree={folderTree}
folderID={modalNewRequestFolderID}
onCancel={() => {
this.setState({
modalNewRequestVisible: false,
});
}}
/>
<RightMenu
visible={rightMenuVisible}
position={rightMenuPosition}
menu={rightMenuItems}
onClick={this.onMenuClick}
state={rightMenuState}
onCancel={() => {
this.setState({
rightMenuVisible: false,
});
}}
/>
</div>
);
}
