@ant-design/icons#FileTextOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#FileTextOutlined.
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.jsx From erp-crm with MIT License | 5 votes |
|
export default function Navigation() {
const { state: stateApp, appContextAction } = useAppContext();
const { isNavMenuClose } = stateApp;
const { navMenu } = appContextAction;
const [showLogoApp, setLogoApp] = useState(isNavMenuClose);
useEffect(() => {
if (isNavMenuClose) {
setLogoApp(isNavMenuClose);
}
const timer = setTimeout(() => {
if (!isNavMenuClose) {
setLogoApp(isNavMenuClose);
}
}, 200);
return () => clearTimeout(timer);
}, [isNavMenuClose]);
const onCollapse = () => {
navMenu.collapse();
};
return (
<>
<Sider collapsible collapsed={isNavMenuClose} onCollapse={onCollapse} className="navigation">
<div className="logo">
<img
src={logoIcon}
alt="Logo"
// style={{ margin: "0 auto 40px", display: "block" }}
/>
{!showLogoApp && (
<img src={logoText} alt="Logo" style={{ marginTop: '3px', marginLeft: '10px' }} />
)}
</div>
<Menu mode="inline">
<Menu.Item key={'Dashboard'} icon={<DashboardOutlined />}>
<Link to={'/'} />
Dashboard
</Menu.Item>
<Menu.Item key={'Customer'} icon={<CustomerServiceOutlined />}>
<Link to={'/customer'} />
Customer
</Menu.Item>
<Menu.Item key={'Invoice'} icon={<FileTextOutlined />}>
<Link to={'/invoice'} />
Invoice
</Menu.Item>
<Menu.Item key={'Quote'} icon={<FileSyncOutlined />}>
<Link to={'/quote'} />
Quote
</Menu.Item>
<Menu.Item key={'PaymentInvoice'} icon={<CreditCardOutlined />}>
<Link to={'/payment/invoice'} />
Payment Invoice
</Menu.Item>
<Menu.Item key={'Employee'} icon={<UserOutlined />}>
<Link to={'/employee'} />
Employee
</Menu.Item>
<Menu.Item key={'Admin'} icon={<TeamOutlined />}>
<Link to={'/admin'} />
Admin
</Menu.Item>
<SubMenu key={'Settings'} icon={<SettingOutlined />} title={'Settings'}>
<Menu.Item key={'PaymentMode'}>
<Link to={'/payment/mode'} />
Payment Mode
</Menu.Item>
<Menu.Item key={'Role'}>
<Link to={'/role'} />
Role
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
</>
);
}
Example #2
| Source File: index.jsx From starter-antd-admin-crud-auth-mern with MIT License | 5 votes |
|
function Navigation() {
const [collapsed, setCollapsed] = useState(false);
const onCollapse = () => {
setCollapsed(!collapsed);
};
return (
<>
<Sider
collapsible
collapsed={collapsed}
onCollapse={onCollapse}
style={{
zIndex: 1000,
}}
>
<div className="logo" />
<Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
<Menu.Item key="1" icon={<DashboardOutlined />}>
<Link to="/" />
Home Page
</Menu.Item>
<Menu.Item key="2" icon={<CustomerServiceOutlined />}>
<Link to="/customer">Customer</Link>
</Menu.Item>
<Menu.Item key="24" icon={<UserOutlined />}>
<Link to="/selectcustomer">Custom Select Customer</Link>
</Menu.Item>
<Menu.Item key="21" icon={<FileTextOutlined />}>
<Link to="/lead" />
Lead
</Menu.Item>
<Menu.Item key="3" icon={<FileSyncOutlined />}>
<Link to="/product" />
Product
</Menu.Item>
<Menu.Item key="31" icon={<TeamOutlined />}>
<Link to="/admin" />
Admins Management
</Menu.Item>
<Menu.Item key="32" icon={<SettingOutlined />}>
<Link to="/settings" />
Settings
</Menu.Item>
</Menu>
</Sider>
</>
);
}
Example #3
| Source File: FileSystem.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const columns = [
{
title: '名称',
dataIndex: 'name',
key: 'name',
render: (value, item) => {
let icon;
if (item['isDir']) {
icon = <FolderTwoTone/>;
} else {
if (item['isLink']) {
icon = <LinkOutlined/>;
} else {
const fileExtension = item['name'].split('.').pop().toLowerCase();
switch (fileExtension) {
case "doc":
case "docx":
icon = <FileWordOutlined/>;
break;
case "xls":
case "xlsx":
icon = <FileExcelOutlined/>;
break;
case "bmp":
case "jpg":
case "jpeg":
case "png":
case "tif":
case "gif":
case "pcx":
case "tga":
case "exif":
case "svg":
case "psd":
case "ai":
case "webp":
icon = <FileImageOutlined/>;
break;
case "md":
icon = <FileMarkdownOutlined/>;
break;
case "pdf":
icon = <FilePdfOutlined/>;
break;
case "txt":
icon = <FileTextOutlined/>;
break;
case "zip":
case "gz":
case "tar":
case "tgz":
icon = <FileZipOutlined/>;
break;
default:
icon = <FileOutlined/>;
break;
}
}
}
return <span className={'dode'}>{icon} {item['name']}</span>;
},
sorter: (a, b) => {
if (a['key'] === '..') {
return 0;
}
if (b['key'] === '..') {
return 0;
}
return a.name.localeCompare(b.name);
},
sortDirections: ['descend', 'ascend'],
},
{
title: '大小',
dataIndex: 'size',
key: 'size',
render: (value, item) => {
if (!item['isDir'] && !item['isLink']) {
return <span className={'dode'}>{renderSize(value)}</span>;
}
return <span className={'dode'}/>;
},
sorter: (a, b) => {
if (a['key'] === '..') {
return 0;
}
if (b['key'] === '..') {
return 0;
}
return a.size - b.size;
},
}, {
title: '修改日期',
dataIndex: 'modTime',
key: 'modTime',
sorter: (a, b) => {
if (a['key'] === '..') {
return 0;
}
if (b['key'] === '..') {
return 0;
}
return a.modTime.localeCompare(b.modTime);
},
sortDirections: ['descend', 'ascend'],
render: (value, item) => {
return <span className={'dode'}>{value}</span>;
},
}, {
title: '属性',
dataIndex: 'mode',
key: 'mode',
render: (value, item) => {
return <span className={'dode'}>{value}</span>;
},
}, {
title: '操作',
dataIndex: 'action',
key: 'action',
width: 210,
render: (value, item) => {
if (item['key'] === '..') {
return undefined;
}
let disableDownload = !this.state.download;
let disableEdit = !this.state.edit;
if (item['isDir'] || item['isLink']) {
disableDownload = true;
disableEdit = true
}
return (
<>
<Button type="link" size='small' disabled={disableEdit}
onClick={() => this.showEditor(item['name'], item['key'])}>
编辑
</Button>
<Button type="link" size='small' disabled={disableDownload} onClick={async () => {
download(`${server}/${this.state.storageType}/${this.state.storageId}/download?file=${window.encodeURIComponent(item['key'])}&X-Auth-Token=${getToken()}&t=${new Date().getTime()}`);
}}>
下载
</Button>
<Button type={'link'} size={'small'} disabled={!this.state.rename} onClick={() => {
this.setState({
renameVisible: true,
currentFileKey: item['key']
})
}}>重命名</Button>
<Popconfirm
title="您确认要删除此文件吗?"
onConfirm={async () => {
await this.delete(item['key']);
await this.refresh();
}}
okText="是"
cancelText="否"
>
<Button type={'link'} size={'small'} disabled={!this.state.delete} danger>删除</Button>
</Popconfirm>
</>
);
},
}
];
const {selectedRowKeys} = this.state;
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
this.setState({selectedRowKeys});
},
getCheckboxProps: (record) => ({
disabled: record['disabled'],
}),
};
let hasSelected = selectedRowKeys.length > 0;
if (hasSelected) {
if (!this.state.delete) {
hasSelected = false;
}
}
const title = (
<div className='fs-header'>
<div className='fs-header-left'>
<Input value={this.state.currentDirectoryInput} onChange={this.handleCurrentDirectoryInputChange}
onPressEnter={this.handleCurrentDirectoryInputPressEnter}/>
</div>
<div className='fs-header-right'>
<Space>
<div className='fs-header-right-item'>
<Tooltip title="创建文件夹">
<Button type="primary" size="small"
disabled={!this.state.upload}
icon={<FolderAddOutlined/>}
onClick={() => {
this.setState({
mkdirVisible: true
})
}} ghost/>
</Tooltip>
</div>
<div className='fs-header-right-item'>
<Tooltip title="上传文件">
<Button type="primary" size="small"
icon={<CloudUploadOutlined/>}
disabled={!this.state.upload}
onClick={() => {
window.document.getElementById('file-upload').click();
}} ghost/>
<input type="file" id="file-upload" style={{display: 'none'}}
onChange={this.handleUploadFile} multiple/>
</Tooltip>
</div>
<div className='fs-header-right-item'>
<Tooltip title="上传文件夹">
<Button type="primary" size="small"
icon={<UploadOutlined/>}
disabled={!this.state.upload}
onClick={() => {
window.document.getElementById('dir-upload').click();
}} ghost/>
<input type="file" id="dir-upload" style={{display: 'none'}}
onChange={this.handleUploadDir} webkitdirectory='' multiple/>
</Tooltip>
</div>
<div className='fs-header-right-item'>
<Tooltip title="刷新">
<Button type="primary" size="small"
icon={<ReloadOutlined/>}
onClick={this.refresh}
ghost/>
</Tooltip>
</div>
<div className='fs-header-right-item'>
<Tooltip title="批量删除">
<Button type="primary" size="small" ghost danger disabled={!hasSelected}
icon={<DeleteOutlined/>}
loading={this.state.delBtnLoading}
onClick={() => {
let rowKeys = this.state.selectedRowKeys;
const content = <div>
您确定要删除选中的<Text style={{color: '#1890FF'}}
strong>{rowKeys.length}</Text>条记录吗？
</div>;
confirm({
icon: <ExclamationCircleOutlined/>,
content: content,
onOk: async () => {
for (let i = 0; i < rowKeys.length; i++) {
if (rowKeys[i] === '..') {
continue;
}
await this.delete(rowKeys[i]);
}
this.refresh();
},
onCancel() {
},
});
}}>
</Button>
</Tooltip>
</div>
</Space>
</div>
</div>
);
return (
<div>
<Card title={title} bordered={true} size="small" style={{minHeight: this.state.minHeight}}>
<Table columns={columns}
rowSelection={rowSelection}
dataSource={this.state.files}
size={'small'}
pagination={false}
loading={this.state.loading}
onRow={record => {
return {
onDoubleClick: event => {
if (record['isDir'] || record['isLink']) {
if (record['path'] === '..') {
// 获取当前目录的上级目录
let currentDirectory = this.state.currentDirectory;
let parentDirectory = currentDirectory.substring(0, currentDirectory.lastIndexOf('/'));
this.loadFiles(parentDirectory);
} else {
this.loadFiles(record['path']);
}
} else {
}
},
};
}}
/>
</Card>
{
this.state.mkdirVisible ?
<Modal
title="创建文件夹"
visible={this.state.mkdirVisible}
okButtonProps={{form: 'mkdir-form', key: 'submit', htmlType: 'submit'}}
onOk={() => {
this.mkdirFormRef.current
.validateFields()
.then(async values => {
this.mkdirFormRef.current.resetFields();
let params = {
'dir': this.state.currentDirectory + '/' + values['dir']
}
let paramStr = qs.stringify(params);
this.setState({
confirmLoading: true
})
let result = await request.post(`/${this.state.storageType}/${this.state.storageId}/mkdir?${paramStr}`);
if (result.code === 1) {
message.success('创建成功');
this.loadFiles(this.state.currentDirectory);
} else {
message.error(result.message);
}
this.setState({
confirmLoading: false,
mkdirVisible: false
})
})
.catch(info => {
});
}}
confirmLoading={this.state.confirmLoading}
onCancel={() => {
this.setState({
mkdirVisible: false
})
}}
>
<Form ref={this.mkdirFormRef} id={'mkdir-form'}>
<Form.Item name='dir' rules={[{required: true, message: '请输入文件夹名称'}]}>
<Input autoComplete="off" placeholder="请输入文件夹名称"/>
</Form.Item>
</Form>
</Modal> : undefined
}
{
this.state.renameVisible ?
<Modal
title="重命名"
visible={this.state.renameVisible}
okButtonProps={{form: 'rename-form', key: 'submit', htmlType: 'submit'}}
onOk={() => {
this.renameFormRef.current
.validateFields()
.then(async values => {
this.renameFormRef.current.resetFields();
try {
let currentDirectory = this.state.currentDirectory;
if (!currentDirectory.endsWith("/")) {
currentDirectory += '/';
}
let params = {
'oldName': this.state.currentFileKey,
'newName': currentDirectory + values['newName'],
}
if (params['oldName'] === params['newName']) {
message.success('重命名成功');
return;
}
let paramStr = qs.stringify(params);
this.setState({
confirmLoading: true
})
let result = await request.post(`/${this.state.storageType}/${this.state.storageId}/rename?${paramStr}`);
if (result['code'] === 1) {
message.success('重命名成功');
this.refresh();
} else {
message.error(result.message);
}
} finally {
this.setState({
confirmLoading: false,
renameVisible: false
})
}
})
.catch(info => {
});
}}
confirmLoading={this.state.confirmLoading}
onCancel={() => {
this.setState({
renameVisible: false
})
}}
>
<Form id={'rename-form'}
ref={this.renameFormRef}
initialValues={{newName: getFileName(this.state.currentFileKey)}}>
<Form.Item name='newName' rules={[{required: true, message: '请输入新的名称'}]}>
<Input autoComplete="off" placeholder="新的名称"/>
</Form.Item>
</Form>
</Modal> : undefined
}
<Modal
title={"编辑 " + this.state.fileName}
className='modal-no-padding'
visible={this.state.editorVisible}
destroyOnClose={true}
width={window.innerWidth * 0.8}
centered={true}
okButtonProps={{form: 'rename-form', key: 'submit', htmlType: 'submit'}}
onOk={this.edit}
confirmLoading={this.state.confirmLoading}
onCancel={this.hideEditor}
>
<MonacoEditor
language="javascript"
height={window.innerHeight * 0.8}
theme="vs-dark"
value={this.state.fileContent}
options={{
selectOnLineNumbers: true
}}
editorDidMount={(editor, monaco) => {
console.log('editorDidMount', editor);
editor.focus();
}}
onChange={(newValue, e) => {
console.log('onChange', newValue, e);
this.setState(
{
fileContent: newValue
}
)
}}
/>
</Modal>
</div>
);
}
Example #4
| Source File: Payment.jsx From erp-crm with MIT License | 4 votes |
|
export default function Payment({ config }) {
const { entity, ENTITY_NAME } = config;
const { erpContextAction } = useErpContext();
const { current: currentItem } = useSelector(selectRecordPaymentItem);
const { readPanel, recordPanel } = erpContextAction;
const money = useMoney();
const [itemslist, setItemsList] = useState([]);
const [currentErp, setCurrentErp] = useState({
status: '',
client: {
company: '',
email: '',
phone: '',
address: '',
},
subTotal: 0,
taxTotal: 0,
taxRate: 0,
total: 0,
credit: 0,
number: 0,
year: 0,
});
useEffect(() => {
if (currentItem) {
const { items } = currentItem;
setItemsList(items);
setCurrentErp(currentItem);
}
}, [currentItem]);
useEffect(() => {
console.info('itemslist', itemslist);
}, [itemslist]);
return (
<>
<Row gutter={[12, 12]}>
<Col
className="gutter-row"
xs={{ span: 24 }}
sm={{ span: 24 }}
md={{ span: 24 }}
lg={{ span: 20, push: 2 }}
>
<PageHeader
onBack={() => readPanel.close()}
title={`Record Payment for ${ENTITY_NAME} # ${currentErp.number}/${
currentErp.year || ''
}`}
ghost={false}
tags={<Tag color="volcano">{currentErp.status}</Tag>}
// subTitle="This is cuurent erp page"
extra={[
<Button
key={`${uniqueId()}`}
onClick={() => recordPanel.close()}
icon={<CloseCircleOutlined />}
>
Cancel
</Button>,
<Button
key={`${uniqueId()}`}
onClick={() => readPanel.open()}
icon={<FileTextOutlined />}
>
Show Invoice
</Button>,
]}
style={{
padding: '20px 0px',
}}
></PageHeader>
<Divider dashed />
</Col>
</Row>
<Row gutter={[12, 12]}>
<Col
className="gutter-row"
xs={{ span: 24, order: 2 }}
sm={{ span: 24, order: 2 }}
md={{ span: 10, order: 2, push: 2 }}
lg={{ span: 10, order: 2, push: 4 }}
>
<div className="space50"></div>
<Descriptions title={`Client : ${currentErp.client.company}`} column={1}>
<Descriptions.Item label="E-mail">{currentErp.client.email}</Descriptions.Item>
<Descriptions.Item label="Phone">{currentErp.client.phone}</Descriptions.Item>
<Divider dashed />
<Descriptions.Item label="Payment Status">{currentErp.paymentStatus}</Descriptions.Item>
<Descriptions.Item label="SubTotal">
{money.amountFormatter({ amount: currentErp.subTotal })}
</Descriptions.Item>
<Descriptions.Item label="Total">
{money.amountFormatter({ amount: currentErp.total })}
</Descriptions.Item>
<Descriptions.Item label="Discount">
{money.amountFormatter({ amount: currentErp.discount })}
</Descriptions.Item>
<Descriptions.Item label="Balance">
{money.amountFormatter({ amount: currentErp.credit })}
</Descriptions.Item>
</Descriptions>
</Col>
<Col
className="gutter-row"
xs={{ span: 24, order: 1 }}
sm={{ span: 24, order: 1 }}
md={{ span: 12, order: 1 }}
lg={{ span: 10, order: 1, push: 2 }}
>
<RecordPayment config={config} />
</Col>
</Row>
</>
);
}
