@ant-design/icons#DownloadOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#DownloadOutlined.
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: router.js From credit with Apache License 2.0 | 6 votes |
|
userRoutes = [
{
path: "/admin/userdashboard",
component: UserDashboard,
isShow: true,
title: "个人信息",
icon: AreaChartOutlined
},
{
path: "/admin/dataUpload",
component: dataUpload,
isShow: true,
title: "信息录入",
icon: CloudUploadOutlined
},
{
path: "/admin/creditgrant",
component: creditGrant,
isShow: true,
title: "信用数据授权",
icon: AuditOutlined
},
{
path: "/admin/certificateDownload",
component: certificateDownload,
isShow: true,
title: "证书下载",
icon: DownloadOutlined
},
{
path: "/admin/bingli",
component: bingli,
isShow: true,
title: "病例",
icon: DownloadOutlined
}
]
Example #2
| Source File: legacy-group.jsx From virtuoso-design-system with MIT License | 6 votes |
|
function getGroup(props) {
return (
<div>
<Button.Group {...props}>
<Button type="primary">Button 1</Button>
<Button type="primary">Button 2</Button>
<Tooltip title="Tooltip">
<Button type="primary" icon={<DownloadOutlined />} disabled />
</Tooltip>
<Tooltip title="Tooltip">
<Button type="primary" icon={<DownloadOutlined />} />
</Tooltip>
</Button.Group>
</div>
);
}
Example #3
| Source File: size.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
const { size } = this.state;
return (
<>
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Button type="primary" size={size}>
Primary
</Button>
<Button size={size}>Default</Button>
<Button type="dashed" size={size}>
Dashed
</Button>
<br />
<Button type="link" size={size}>
Link
</Button>
<br />
<Button type="primary" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />} size={size}>
Download
</Button>
</>
);
}
Example #4
| Source File: index.js From react_management_template with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<Row>
<Card title="基础按钮" className="base_button" >
<Button type="primary">按钮</Button>
<Button>按钮</Button>
<Button type="dashed">按钮</Button>
<Button type="danger">按钮</Button>
<Button disabled>按钮</Button>
</Card>
<Card title="图形按钮" className="base_button" >
<Button icon={<PlusOutlined />}>创建</Button>
<Button icon={<EditOutlined />}>编辑</Button>
<Button icon={<DeleteOutlined />}type="dashed">删除</Button>
<Button icon={<SearchOutlined />} type="primary">搜索</Button>
<Button icon={<DownloadOutlined />} type="primary">下载</Button>
</Card>
<Card title="Loading按钮" className="base_button" >
<Button type="primary" loading={this.state.loading}>确定</Button>
<Button type="primary" shape="circle" loading={this.state.loading}></Button>
<Button loading={this.state.loading}>点击加载</Button>
<Button shape="circle" loading={this.state.loading}></Button>
<Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
</Card>
<Card title="按钮组" className="base_button" >
<Button.Group>
<Button type="primary" icon={<LeftOutlined/>}>返回</Button>
<Button type="primary" icon={<RightOutlined/>}>前进</Button>
</Button.Group>
</Card>
<Card title="按钮尺寸" className="base_button" >
<Radio.Group value={this.state.size} onChange={this.handleChange}>
<Radio value="small">小</Radio>
<Radio value="default">中</Radio>
<Radio value="large">大</Radio>
</Radio.Group>
<Button size={this.state.size} type="primary">按钮</Button>
<Button size={this.state.size} >按钮</Button>
<Button size={this.state.size} type="dashed">按钮</Button>
<Button size={this.state.size} type="danger">按钮</Button>
<Button size={this.state.size} disabled>按钮</Button>
</Card>
</Row>
</div>
);
}
Example #5
| Source File: Backup.js From network-rc with Apache License 2.0 | 5 votes |
|
export default function Backup({
serverConfig,
resetServerConfig,
saveServerConfig,
updateVersion,
updateStaus,
}) {
const save = () => {
var blob = new Blob([JSON.stringify(serverConfig)], {
type: "text/plain;charset=utf-8",
});
saveAs(
blob,
`network-rc-config-backgup-${dayjs().format("YYYYMMDDTHHmmss")}.json`
);
};
const load = (file) => {
var reader = new FileReader();
reader.onload = function (e) {
if (reader.result) {
saveServerConfig(JSON.parse(reader.result));
}
};
reader.onerror = function (e) {
console.error(e);
message.error("读取备份错误");
};
reader.readAsText(file);
return false;
};
return (
<Form {...layout}>
<Form.Item>
<Space>
<Button icon={<DownloadOutlined />} type="primary" onClick={save}>
备份当前设置
</Button>
<Upload accept=".json" beforeUpload={load} showUploadList={false}>
<Button icon={<UploadOutlined />}>恢复已保存的设置</Button>
</Upload>
<Button icon={<ReloadOutlined />} danger onClick={resetServerConfig}>
恢复默认设置（所有设置）
</Button>
</Space>
</Form.Item>
<Form.Item >
<Button
onClick={(e) => {
e.preventDefault();
updateVersion();
}}
loading={updateStaus ? true : false}
>
{updateStaus || "更新版本"}
</Button>
</Form.Item>
</Form>
);
}
Example #6
| Source File: build_history_home.js From art-dashboard-ui with Apache License 2.0 | 5 votes |
|
render() {
if(this.state.query_redirect_string !== undefined){
return <Redirect to={"/build/history/?" + this.state.query_redirect_string}/>;
}
else{
return (
<div style={{padding: "30px"}}>
{!this.state.data_loaded && this.display_loading()}
<Attribute_transfer_filter_fields_modal
visible={this.state.filter_attribute_selection_modal_visible}
handler={this.filter_button_toggle_modal_visibility}
handler_to_update_build_table_data={this.redirect_to_updated_query_params}/>
<Button/>
<Row className={"right"}>
<Search_filters_popover handleFilterBuildParamsButton={this.filter_button_toggle_modal_visibility} data={this.state.build_filter_where_cond}/>
<Button/>
</Row>
<Build_history_table data={this.state.data} simple_filter_callback={this.redirect_to_updated_query_params}/>
<Row className={"right"} >
<CSVLink data={this.state.data} filename={(Date.now()).toString()+ ".csv"} target="_blank">
<Button
size={"large"}
type="primary"
shape="circle"
style={{
position: "fixed",
right: "50px",
bottom: "50px",
boxShadow: "0 6px 14px 0 #666",
}}
icon={<DownloadOutlined/>}>
</Button>
<Button/>
</CSVLink>
</Row>
</div>
);
}
}
Example #7
| Source File: admin.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
<Tabs activeKey={this.state.key} onTabClick={async (key) => {
await this.props.history.push("/Admin/" + key)
if (this.props.location.pathname === "/Admin/" + key) this.setState({ key: key })
}} style={{ overflowY: "auto", overflowX: "auto" }}>
<TabPane
tab={<span> Home </span>}
key=""
>
<h1>Welcome to Sieberrsec CTF Platform's admin panel.</h1>
<h1>Click on any of the tabs above to manage different parts of the portal.</h1>
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<Button type='primary' onClick={this.downloadBackup} loading={this.state.backupLoading}><DownloadOutlined /> Download Backup</Button>
<p>Download all the data stored in the platform's database. Data can be uploaded onto a different platform/a later date to restore all the data</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<div style={{width: "50%"}}>
<Dragger
fileList={this.state.fileList}
disabled={this.state.loadingUpload}
accept=".json"
maxCount={1}
onChange={(file) => {
if (file.fileList.length > 0) this.setState({ noFile: false })
else this.setState({ noFile: true })
this.setState({ fileList: file.fileList })
}}
beforeUpload={(file) => {
return false
}}>
<h4>Drag and drop backup .json file to upload.</h4><br/>
<p>Then, click the Upload button</p>
</Dragger>
<Button type="primary" icon={<UploadOutlined />} style={{ marginTop: "3ch" }} disabled={this.state.noFile} loading={this.state.loadingUpload} onClick={() => {
confirm({
confirmLoading: this.state.loadingUpload,
title: 'Are you sure you want to restore all platform data to this JSON file? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.uploadBackup(close) },
onCancel: () => { },
});
this.uploadBackup
}}>Upload Backup</Button>
</div>
<p>Restore and upload data stored in a backup json file. <span style={{ color: "#d32029" }}><b>Warning: This <u>WILL OVERRIDE ALL EXISTING DATA</u> stored in this platform</b> (including the current account used to upload the backup). Please re-login after restoration is completed.</span></p>
</Card>
</div>
</TabPane>
<TabPane
tab={<span><NotificationOutlined />Announcements</span>}
key="Announcements"
>
<AdminManageAnnouncements />
</TabPane>
<TabPane
tab={<span><UserOutlined />Users</span>}
key="Users"
>
<AdminUsers></AdminUsers>
</TabPane>
<TabPane
tab={<span><AppstoreOutlined />Challenges</span>}
key="Challenges"
>
<AdminChallenges history={this.props.history} location={this.props.location}></AdminChallenges>
</TabPane>
<TabPane
tab={<span><BarsOutlined />Transactions</span>}
key="Submissions"
>
<AdminSubmissions></AdminSubmissions>
</TabPane>
<TabPane
tab={<span><MailOutlined />Email Settings</span>}
key="Emails"
>
<AdminEmails></AdminEmails>
</TabPane>
</Tabs>
</Layout>
);
}
Example #8
| Source File: adminChallenges.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Modal title={<span><UploadOutlined/> Upload Challenges</span>} visible={this.state.uploadModalVisible} footer={null} onCancel={() => {this.setState({uploadModalVisible: false})}}>
<UploadChallengesForm handleRefresh={this.handleRefresh.bind(this)} closeUploadChallenges={() => {this.setState({uploadModalVisible: false})}}/>
</Modal>
<div style={{ display: (!this.state.challengeCreate && !this.state.editChallenge) ? "initial" : "none" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex", alignItems: "center", height: "2ch" }}>
<Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<FlagOutlined />} onClick={() => { this.setState({ challengeCreate: true }, this.props.history.push("/Admin/Challenges/Create")) }}>Create New Challenge</Button>
<Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<UploadOutlined />} onClick={() => { this.setState({uploadModalVisible: true}) }}>Upload Challenges</Button>
{this.state.loading && (
<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Ellipsis color="#177ddc" size={60} />
<h1>Loading Challenges</h1>
</div>
)}
</div>
<Button loading={this.state.loading} type="primary" shape="circle" size="large" style={{ marginBottom: "2vh", maxWidth: "25ch" }} icon={<RedoOutlined />} onClick={async () => { await this.handleRefresh(); message.success("Challenge list refreshed.") }} />
</div>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<div style={{ display: "flex", alignItems: "center" }}>
<Button disabled={this.state.disableEditButtons} type="default" style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<EyeOutlined style={{ color: "#49aa19" }} />} onClick={() => { this.editChallengeVisibility(true, this.state.selectedTableKeys, this.state.selectedRows) }}>Show</Button>
<Button disabled={this.state.disableEditButtons} type="default" style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#6e6e6e" }} icon={<EyeInvisibleOutlined style={{ color: "#d32029" }} />} onClick={() => { this.editChallengeVisibility(false, this.state.selectedTableKeys, this.state.selectedRows) }}>Hide</Button>
<Button disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#a61d24" }} icon={<DeleteOutlined />} onClick={() => {
confirm({
confirmLoading: this.state.disableEditButtons,
title: 'Are you sure you want to delete the challenge(s) (' + this.state.selectedTableKeys.join(", ") + ')? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.deleteChallenge(close.bind(this), this.state.selectedTableKeys, this.state.selectedRows) },
onCancel: () => { },
});
}}>Delete Challenges</Button>
</div>
<div>
<Button disabled={this.state.disableEditButtons} type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<DownloadOutlined />} onClick={() => { this.downloadChallenges(this.state.selectedRows) }}>Download</Button>
</div>
</div>
<Table rowSelection={{ selectedRowKeys: this.state.selectedTableKeys, onChange: this.handleTableSelect.bind(this) }} style={{ overflow: "auto" }} dataSource={this.state.dataSource} locale={{
emptyText: (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
<FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
<h1 style={{ fontSize: "200%" }}>No Challenges Found/Created</h1>
</div>
)
}}>
<Column title="Name" dataIndex="name" key="name"
render={(text, row, index) => {
return <Link to={"/Challenges/" + row._id}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
autoFocus
placeholder="Search Challenge Name"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => record.name.toLowerCase().trim().includes(value.toLowerCase())}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
sorter={(a, b) => {
if (a.name < b.name) return -1
else return 1
}}
/>
<Column filters={this.state.allCat.map(value => { return { text: value.key, value: value.key } })} onFilter={(value, record) => value === record.category} title="Category" dataIndex="category" key="category" render={(text, row, index) => {
return <Link to={"/Challenges/" + row.category}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
}} />
<Column sorter={(a, b) => a.points - b.points} title="Points" dataIndex="points" key="points" />
<Column sorter={(a, b) => a.points - b.points} title="Initial Points" dataIndex="initial" key="initial" />
<Column sorter={(a, b) => a.points - b.points} title="Solves to Min." dataIndex="minSolves" key="minSolves" />
<Column sorter={(a, b) => a.points - b.points} title="Min. Points" dataIndex="minimum" key="minimum" />
<Column filters={[{ text: "Visible", value: "true" }, { text: "Hidden", value: "false" }]} onFilter={(value, record) => { return value === record.visibility.props.visibility }} title="Visbility" dataIndex="visibility" key="visibility" />
<Column title="Required Challenge" dataIndex="requires" key="requires"
render={(text, row, index) => {
return <Link to={"/Challenges/" + text}><a style={{ fontWeight: 700 }}>{this.state.IDNameMapping[text]}</a></Link>;
}}
filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
<div style={{ padding: 8 }}>
<Input
autoFocus
placeholder="Search Challenge Name"
value={selectedKeys[0]}
onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
onPressEnter={() => confirm()}
style={{ marginBottom: 8, display: 'block' }}
/>
<Space>
<Button
type="primary"
onClick={() => { confirm() }}
icon={<SearchOutlined />}
>
Search
</Button>
<Button onClick={() => clearFilters()}>
Reset
</Button>
</Space>
</div>
)}
onFilter={(value, record) => { if (record.requires) return this.state.IDNameMapping[record.requires].toLowerCase().includes(value) }}
filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}
sorter={(a, b) => {
if (!a.requires) return -1
if (!b.requires) return 1
if (this.state.IDNameMapping[a.requires] < this.state.IDNameMapping[b.requires]) return -1
else return 1
}}
/>
<Column
title=""
key="edit"
render={(text, record) => (
<Button icon={<EditOutlined />} onClick={() => { this.setState({ editChallenge: true, id: record._id }); this.props.history.push("/Admin/Challenges/Edit") }}> Edit</Button>
)}
/>
</Table>
<Divider />
<div style={{ display: "flex", alignItems: "center" }}>
<h1 style={{ fontSize: "150%" }}>Category Management </h1>{this.state.transferDisabled && (<Ellipsis color="#177ddc" size={50} />)}
</div>
<Card className="settings-card">
<h3>Category Meta Information Editor <EyeOutlined /></h3>
<p>Select a category to edit info such as Name, Cover Pictures etc.</p>
<Select style={{ width: "30ch" }} value={this.state.categorySelect} onChange={this.openCategoryEditor.bind(this)}>
{this.state.categoryOptions}
</Select>
{this.state.currentEditCategory && (
<div style={{ padding: "10px", marginTop: "20px", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "10px" }}>
<EditCategoryForm initialData={this.state.currentEditCategory} handleEditCategoryDone={this.handleEditCategoryDone.bind(this)} />
</div>
)}
</Card>
<Card className="settings-card">
<h3>Category Visibility <EyeOutlined /></h3>
<Transfer
dataSource={this.state.allCat}
titles={[<span style={{ color: "#49aa19" }}>Visible Categories <EyeOutlined /></span>, <span style={{ color: "#d32029" }} >Hidden Categories <EyeInvisibleOutlined /></span>]}
targetKeys={this.state.targetKeys}
selectedKeys={this.state.selectedKeys}
onChange={this.handleChange}
onSelectChange={this.handleSelectChange}
render={item => item.key}
pagination
disabled={this.state.transferDisabled}
/>
</Card>
<Divider />
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<h3>Disable Submissions: <AntdSwitch disabled={this.state.disableLoading} onClick={(value) => this.disableSetting("submissionDisabled", value)} checked={this.state.submissionDisabled} /></h3>
<p>Prevents users from submitting any new submissions for all challenges. Hints can still be bought</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Set Socket Limit: <InputNumber
value={this.state.maxSockets}
disabled={this.state.disableLoading}
onChange={(value) => this.setState({ maxSockets: value })}
onPressEnter={(e) => { this.changeSetting("maxSockets", this.state.maxSockets) }} /></h3>
<p>Sets the maximum number of socket connections allowed <b>per account</b> to connect to the live scoreboard. <br /> <b>Press "Enter" to save</b></p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<h3>Disable First Blood for No Category: <AntdSwitch disabled={this.state.disableLoading} onClick={(value) => this.disableSetting("disableNonCatFB", value)} checked={this.state.disableNonCatFB} /></h3>
<p>Prevents people with no categories from attaining first blood. Useful if you want to limit First Blood prizes to only eligible participants.</p>
</Card>
</div>
</div>
<Switch>
<Route exact path='/Admin/Challenges/Create' render={(props) => <AdminChallengeCreate {...props} challenges={this.state.dataSource} handleBack={this.handleBack.bind(this)} handleCreateBack={this.handleCreateBack.bind(this)} allCat={this.state.allCat} />} />
<Route exact path='/Admin/Challenges/Edit' render={(props) => <AdminChallengeEdit {...props} allCat={this.state.allCat} IDNameMapping={this.state.IDNameMapping} challenges={this.state.dataSource} id={this.state.id} handleEditBack={this.handleEditBack.bind(this)} handleEditChallBack={this.handleEditChallBack.bind(this)} />} />
</Switch>
</Layout>
);
}
Example #9
| Source File: App.jsx From Tai-Shang-NFT-Wallet with MIT License | 4 votes |
|
function App() {
const mainnetProvider = scaffoldEthProvider && scaffoldEthProvider._network ? scaffoldEthProvider : mainnetInfura;
console.log("mainnetProvider:", mainnetProvider);
const [injectedProvider, setInjectedProvider] = useState();
const [address, setAddress] = useState();
/* ? This hook will get the price of ETH from ? Uniswap: */
const price = useExchangeEthPrice(targetNetwork, mainnetProvider);
/* ? This hook will get the price of Gas from ⛽️ EtherGasStation */
const gasPrice = useGasPrice(targetNetwork, "fast");
// Use your injected provider from ? Metamask or if you don't have it then instantly generate a ? burner wallet.
const userProviderAndSigner = useUserProviderAndSigner(injectedProvider, localProvider);
const userSigner = userProviderAndSigner.signer;
const nftGet = new URLSearchParams(window.location.search)
const nftGetQuery = nftGet.get("id");
useEffect(() => {
async function getAddress() {
if (userSigner) {
const newAddress = await userSigner.getAddress();
setAddress(newAddress);
}
}
getAddress();
}, [userSigner]);
// You can warn the user if you would like them to be on a specific network
const localChainId = localProvider && localProvider._network && localProvider._network.chainId;
const selectedChainId =
userSigner && userSigner.provider && userSigner.provider._network && userSigner.provider._network.chainId;
// For more hooks, check out ?eth-hooks at: https://www.npmjs.com/package/eth-hooks
// The transactor wraps transactions and provides notificiations
const tx = Transactor(userSigner, gasPrice);
// Faucet Tx can be used to send funds from the faucet
const faucetTx = Transactor(localProvider, gasPrice);
// ? scaffold-eth is full of handy hooks like this one to get your balance:
const yourLocalBalance = useBalance(localProvider, address);
// Just plug in different ? providers to get your balance on different chains:
const yourMainnetBalance = useBalance(mainnetProvider, address);
// Load in your local ? contract and read a value from it:
const readContracts = useContractLoader(localProvider);
// If you want to make ? write transactions to your contracts, use the userSigner:
const writeContracts = useContractLoader(userSigner, { chainId: localChainId });
// EXTERNAL CONTRACT EXAMPLE:
//
// If you want to bring in the mainnet DAI contract it would look like:
const mainnetContracts = useContractLoader(mainnetProvider);
// If you want to call a function on a new block
useOnBlock(mainnetProvider, () => {
console.log(`⛓ A new mainnet block is here: ${mainnetProvider._lastBlockNumber}`);
});
// Then read your DAI balance like:
// const myMainnetDAIBalance = useContractReader(mainnetContracts, "DAI", "balanceOf", [
// "0x34aA3F359A9D614239015126635CE7732c18fDF3",
// ]);
// keep track of a variable from the contract in the local React state:
const balance = useContractReader(readContracts, "N", "balanceOf", [address]);
console.log("? read_contracts:", readContracts);
// ? Listen for broadcast events
const transferEvents = useEventListener(readContracts, "N", "Transfer", localProvider, 1);
console.log("? Transfer events:", transferEvents);
//
// ? This effect will update Ns by polling when your balance changes
//
const yourBalance = balance && balance.toNumber && balance.toNumber();
const [Ns, setNs] = useState();
useEffect(() => {
const updateNs = async () => {
const collectibleUpdate = [];
for (let tokenIndex = 0; tokenIndex < balance; tokenIndex++) {
try {
console.log("Getting token index", tokenIndex);
const tokenId = await readContracts.N.tokenOfOwnerByIndex(address, tokenIndex);
console.log("tokenId", tokenId);
const tokenURI = await readContracts.N.tokenURI(tokenId);
console.log("tokenURI", tokenURI);
// TODO: Optimize
let svg;
// const svg = get_svg(tokenURI);
// const svg = decodeTokenURI(tokenURI);
// const ipfsHash = tokenURI.replace("https://ipfs.io/ipfs/", "");
// console.log("ipfsHash", ipfsHash);
axios({
method: "post",
url: backend,
data: {
token_uri: tokenURI,
base_url: baseURL,
},
headers: {
"Content-Type": "application/json",
},
})
.then(response => {
console.log("svg fetched: ", response.data.result.image);
svg = window.atob(response.data.result.image.slice(26));
console.log("svg fetched: ", svg);
try {
// const jsonManifest = JSON.parse(jsonManifestBuffer.toString());
// console.log("jsonManifest", jsonManifest);
collectibleUpdate.push({ id: tokenId, uri: tokenURI, svg: svg, owner: address });
} catch (e) {
console.log("error in svg fetched:", e);
}
})
.catch(error => {
console.log("error in svg fetched:", error);
});
// const jsonManifestBuffer = await getFromIPFS(ipfsHash);
} catch (e) {
console.log(e);
}
}
setNs(collectibleUpdate);
};
updateNs();
}, [address, yourBalance]);
/*
const addressFromENS = useResolveName(mainnetProvider, "austingriffith.eth");
console.log("? Resolved austingriffith.eth as:",addressFromENS)
*/
//
// ? DEBUG ???
//
useEffect(() => {
if (
DEBUG &&
mainnetProvider &&
address &&
selectedChainId &&
yourLocalBalance &&
yourMainnetBalance &&
readContracts &&
writeContracts &&
mainnetContracts
) {
console.log("_____________________________________ ? scaffold-eth _____________________________________");
console.log("? mainnetProvider", mainnetProvider);
console.log("? localChainId", localChainId);
console.log("?? selected address:", address);
console.log("??♂️ selectedChainId:", selectedChainId);
console.log("? yourLocalBalance", yourLocalBalance ? ethers.utils.formatEther(yourLocalBalance) : "...");
console.log("? yourMainnetBalance", yourMainnetBalance ? ethers.utils.formatEther(yourMainnetBalance) : "...");
console.log("? readContracts", readContracts);
console.log("? DAI contract on mainnet:", mainnetContracts);
console.log("? writeContracts", writeContracts);
}
}, [
mainnetProvider,
address,
selectedChainId,
yourLocalBalance,
yourMainnetBalance,
readContracts,
writeContracts,
mainnetContracts,
]);
let networkDisplay = "";
if (NETWORKCHECK && localChainId && selectedChainId && localChainId !== selectedChainId) {
const networkSelected = NETWORK(selectedChainId);
const networkLocal = NETWORK(localChainId);
if (selectedChainId === 1337 && localChainId === 31337) {
networkDisplay = (
<div style={{ zIndex: 2, position: "absolute", right: 0, top: 60, padding: 16 }}>
<Alert
message="⚠️ Wrong Network ID"
description={
<div>
You have <b>chain id 1337</b> for localhost and you need to change it to <b>31337</b> to work with
HardHat.
<div>(MetaMask -> Settings -> Networks -> Chain ID -> 31337)</div>
</div>
}
type="error"
closable={false}
/>
</div>
);
} else {
networkDisplay = (
<div style={{ zIndex: 2, position: "absolute", right: 0, top: 60, padding: 16 }}>
<Alert
message="⚠️ Wrong Network"
description={
<div>
You have <b>{networkSelected && networkSelected.name}</b> selected and you need to be on{" "}
<Button
onClick={async () => {
const ethereum = window.ethereum;
const data = [
{
chainId: "0x" + targetNetwork.chainId.toString(16),
chainName: targetNetwork.name,
nativeCurrency: targetNetwork.nativeCurrency,
rpcUrls: [targetNetwork.rpcUrl],
blockExplorerUrls: [targetNetwork.blockExplorer],
},
];
console.log("data", data);
const tx = await ethereum.request({ method: "wallet_addEthereumChain", params: data }).catch();
if (tx) {
console.log(tx);
}
}}
>
<b>{networkLocal && networkLocal.name}</b>
</Button>
.
</div>
}
type="error"
closable={false}
/>
</div>
);
}
} else {
networkDisplay = (
<div style={{ zIndex: -1, position: "absolute", right: 154, top: 28, padding: 16, color: targetNetwork.color }}>
{targetNetwork.name}
</div>
);
}
const loadWeb3Modal = useCallback(async () => {
const provider = await web3Modal.connect();
setInjectedProvider(new ethers.providers.Web3Provider(provider));
provider.on("chainChanged", chainId => {
console.log(`chain changed to ${chainId}! updating providers`);
setInjectedProvider(new ethers.providers.Web3Provider(provider));
});
provider.on("accountsChanged", () => {
console.log(`account changed!`);
setInjectedProvider(new ethers.providers.Web3Provider(provider));
});
// Subscribe to session disconnection
provider.on("disconnect", (code, reason) => {
console.log(code, reason);
logoutOfWeb3Modal();
});
}, [setInjectedProvider]);
useEffect(() => {
if (web3Modal.cachedProvider) {
loadWeb3Modal();
}
}, [loadWeb3Modal]);
const [route, setRoute] = useState();
useEffect(() => {
setRoute(window.location.pathname);
}, [setRoute]);
let faucetHint = "";
const [faucetClicked, setFaucetClicked] = useState(false);
if (
!faucetClicked &&
localProvider &&
localProvider._network &&
localProvider._network.chainId == 31337 &&
yourLocalBalance &&
ethers.utils.formatEther(yourLocalBalance) <= 0
) {
faucetHint = (
<div style={{ padding: 16 }}>
<Button
type="primary"
onClick={() => {
faucetTx({
to: address,
value: ethers.utils.parseEther("0.01"),
});
setFaucetClicked(true);
}}
>
? Grab funds from the faucet ⛽️
</Button>
</div>
);
}
const [transferToAddresses, setTransferToAddresses] = useState({});
nProgress.done();
return (
<div className="App">
{/* ✏️ Edit the header and change the title to your project name */}
<Header />
{networkDisplay}
<BrowserRouter>
{nftGetQuery ? (
<SingleNFT nftGetQuery={nftGetQuery} readContracts={readContracts} address={address} />
) : (
<Menu style={{ textAlign: "center" }} selectedKeys={[route]} mode="horizontal">
<Menu.Item key="/">
<Link
// onClick={() => {
// setRoute("/");
// }}
to="/Tai-Shang-NFT-Wallet"
>
Ns
</Link>
</Menu.Item>
<Menu.Item key="/contract-interactor">
<Link
// onClick={() => {
// setRoute("/contract-interactor");
// }}
to="/Tai-Shang-NFT-Wallet/contract-interactor"
>
Contract Interactor
</Link>
</Menu.Item>
<Menu.Item key="/transfers">
<Link
// onClick={() => {
// setRoute("/transfers");
// }}
to="/Tai-Shang-NFT-Wallet/transfers"
>
Transfers
</Link>
</Menu.Item>
{/* <Menu.Item key="/ipfsup">
<Link
onClick={() => {
setRoute("/ipfsup");
}}
to="/ipfsup"
>
IPFS Upload
</Link>
</Menu.Item>
<Menu.Item key="/ipfsdown">
<Link
onClick={() => {
setRoute("/ipfsdown");
}}
to="/ipfsdown"
>
IPFS Download
</Link>
</Menu.Item>
<Menu.Item key="/debugcontracts">
<Link
onClick={() => {
setRoute("/debugcontracts");
}}
to="/debugcontracts"
>
Debug Contracts
</Link>
</Menu.Item> */}
</Menu>
)}
<Switch>
<Route exact path="/Tai-Shang-NFT-Wallet">
{/*
? this scaffolding is full of commonly used components
this <Contract/> component will automatically parse your ABI
and give you a form to interact with it locally
*/}
<div style={{ width: 640, margin: "auto", marginTop: 32, paddingBottom: 32 }}>
<List
bordered
dataSource={Ns}
renderItem={item => {
const id = item.id.toNumber();
return (
<List.Item key={id + "_" + item.uri + "_" + item.owner}>
<Card
title={
<div>
<span style={{ fontSize: 16, marginRight: 8 }}>#{id}</span> {item.name}
</div>
}
>
<div style={{ width: "300px", height: "300px" }} id={"nft_" + item.id}>
<div dangerouslySetInnerHTML={{ __html: item.svg }} />
{/* {item.svg} */}
{/* <img src={item.image} style={{ maxWidth: 150 }} /> */}
</div>
<div>{item.description}</div>
<a
download={item.id + ".svg"}
href={`data:text/plain;charset=utf-8,${encodeURIComponent(item.svg)}`}
// href={item.uri}
// IMPORTANT: DOWNLOAD BUTTON HERE
>
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
style={{ marginTop: "16px" }}
>
download .svg
</Button>
</a>
{/* <a download={item.id + ".json"} href={item.uri}>
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
style={{ marginTop: "16px" }}
>
download json
</Button>
</a> */}
</Card>
<div>
owner:{" "}
<Address
address={item.owner}
ensProvider={mainnetProvider}
blockExplorer={blockExplorer}
fontSize={16}
/>
<AddressInput
ensProvider={mainnetProvider}
placeholder="transfer to address"
value={transferToAddresses[id]}
onChange={newValue => {
const update = {};
update[id] = newValue;
setTransferToAddresses({ ...transferToAddresses, ...update });
}}
/>
<Button
onClick={() => {
console.log("writeContracts", writeContracts);
tx(writeContracts.N.transferFrom(address, transferToAddresses[id], id));
}}
>
Transfer
</Button>
</div>
</List.Item>
);
}}
/>
</div>
</Route>
{/* IMPORTANT PLACE */}
<Route exact path="/Tai-Shang-NFT-Wallet/contract-interactor">
{/*
? this scaffolding is full of commonly used components
this <Contract/> component will automatically parse your ABI
and give you a form to interact with it locally
*/}
<Contract
name="N"
signer={userSigner}
provider={localProvider}
address={address}
blockExplorer={blockExplorer}
/>
</Route>
<Route path="/Tai-Shang-NFT-Wallet/transfers">
<div style={{ width: 600, margin: "auto", marginTop: 32, paddingBottom: 32 }}>
<List
bordered
dataSource={transferEvents}
renderItem={item => {
return (
<List.Item key={item[0] + "_" + item[1] + "_" + item.blockNumber + "_" + item[2].toNumber()}>
<span style={{ fontSize: 16, marginRight: 8 }}>#{item[2].toNumber()}</span>
<Address address={item[0]} ensProvider={mainnetProvider} fontSize={16} /> =>
<Address address={item[1]} ensProvider={mainnetProvider} fontSize={16} />
</List.Item>
);
}}
/>
</div>
</Route>
{/* <Route path="/ipfsup">
<div style={{ paddingTop: 32, width: 740, margin: "auto", textAlign: "left" }}>
<ReactJson
style={{ padding: 8 }}
src={yourJSON}
theme="pop"
enableClipboard={false}
onEdit={(edit, a) => {
setYourJSON(edit.updated_src);
}}
onAdd={(add, a) => {
setYourJSON(add.updated_src);
}}
onDelete={(del, a) => {
setYourJSON(del.updated_src);
}}
/>
</div>
<Button
style={{ margin: 8 }}
loading={sending}
size="large"
shape="round"
type="primary"
onClick={async () => {
console.log("UPLOADING...", yourJSON);
setSending(true);
setIpfsHash();
const result = await ipfs.add(JSON.stringify(yourJSON)); // addToIPFS(JSON.stringify(yourJSON))
if (result && result.path) {
setIpfsHash(result.path);
}
setSending(false);
console.log("RESULT:", result);
}}
>
Upload to IPFS
</Button>
<div style={{ padding: 16, paddingBottom: 150 }}>{ipfsHash}</div>
</Route>
<Route path="/ipfsdown">
<div style={{ paddingTop: 32, width: 740, margin: "auto" }}>
<Input
value={ipfsDownHash}
placeHolder="IPFS hash (like QmadqNw8zkdrrwdtPFK1pLi8PPxmkQ4pDJXY8ozHtz6tZq)"
onChange={e => {
setIpfsDownHash(e.target.value);
}}
/>
</div>
<Button
style={{ margin: 8 }}
loading={sending}
size="large"
shape="round"
type="primary"
onClick={async () => {
console.log("DOWNLOADING...", ipfsDownHash);
setDownloading(true);
setIpfsContent();
const result = await getFromIPFS(ipfsDownHash); // addToIPFS(JSON.stringify(yourJSON))
if (result && result.toString) {
setIpfsContent(result.toString());
}
setDownloading(false);
}}
>
Download from IPFS
</Button>
<pre style={{ padding: 16, width: 500, margin: "auto", paddingBottom: 150 }}>{ipfsContent}</pre>
</Route>
<Route path="/debugcontracts">
<Contract
name="BeWater N"
signer={userSigner}
provider={localProvider}
address={address}
blockExplorer={blockExplorer}
/>
</Route> */}
</Switch>
</BrowserRouter>
<ThemeSwitch />
{/* ?? Your account is in the top right with a wallet at connect options */}
<div style={{ position: "fixed", textAlign: "right", right: 0, top: 0, padding: 10 }}>
<Account
address={address}
localProvider={localProvider}
userSigner={userSigner}
mainnetProvider={mainnetProvider}
price={price}
web3Modal={web3Modal}
loadWeb3Modal={loadWeb3Modal}
logoutOfWeb3Modal={logoutOfWeb3Modal}
blockExplorer={blockExplorer}
/>
{faucetHint}
</div>
</div>
);
}
Example #10
| Source File: Timeline.jsx From Tai-Shang-NFT-Wallet with MIT License | 4 votes |
|
// displays a timeline for scaffold-eth usage
export default function TimelineDisplay(props) {
return (
<Timeline mode="right">
<Timeline.Item dot="?">
<Text delete>
Clone and Install from the{" "}
<a target="_blank" rel="noopener noreferrer" href="https://github.com/austintgriffith/scaffold-eth">
github repo
</a>
</Text>
</Timeline.Item>
<Timeline.Item dot="⚛️">
<Text delete>
Start your frontend app with: <Text strong>yarn start</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="⛓">
<Text delete={props.chainIsUp}>
Start your local blockchain with: <Text strong>yarn run chain</Text> (and refresh)
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text delete={props.hasOwner}>
Compile and deploy your smart contract: <Text strong>yarn run deploy</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text delete={props.isNotSmoort}>
Fix error in <Text code>SmartContractWallet.sol</Text> then: <Text strong>yarn run deploy</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot={<SendOutlined style={{ fontSize: "16px" }} />} color={props.hasEther ? "green" : "blue"}>
<Text delete={props.hasEther}>
Send test ether to your{" "}
<Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address using
(bottom left) faucet
</Text>
</Timeline.Item>
<Timeline.Item
dot={<DownloadOutlined style={{ fontSize: "16px" }} />}
color={props.contractHasEther ? "green" : "blue"}
>
<Text delete={props.contractHasEther}>
Deposit some funds into your{" "}
<Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
smart contract wallet
</Text>
</Timeline.Item>
<Timeline.Item
dot={<EditOutlined style={{ fontSize: "16px" }} />}
color={props.amOwnerOfContract ? "green" : "blue"}
>
<Text delete={props.amOwnerOfContract}>
Set <b>owner</b> of your{" "}
<Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
smart contract wallet to your{" "}
<Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address
</Text>
</Timeline.Item>
<Timeline.Item dot="☢️">
<Text>
Yikes, anyone can take ownership of <Text code>SmartContractWallet.sol</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Test your contract with <Text code>buidler/test/myTest.js</Text> then:
<Text strong>yarn run test</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Build something awesome with ? <a href="https://github.com/austintgriffith/scaffold-eth">scaffold-eth</a> and{" "}
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/austingriffith">
@ me
</a>
!
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Read more about{" "}
<a target="_blank" rel="noopener noreferrer" href="https://ethereum.org/developers">
Ethereum
</a>
,{" "}
<a target="_blank" rel="noopener noreferrer" href="https://solidity.readthedocs.io/en/develop/contracts.html">
Solidity
</a>
, and{" "}
<a target="_blank" rel="noopener noreferrer" href="https://buidler.dev/tutorial">
Buidler
</a>
</Text>
</Timeline.Item>
</Timeline>
);
}
Example #11
| Source File: Timeline.jsx From moonshot with MIT License | 4 votes |
|
// displays a timeline for scaffold-eth usage
export default function TimelineDisplay(props) {
return (
<Timeline mode="right">
<Timeline.Item dot="?">
<Text delete>
Clone and Install from the{" "}
<a target="_blank" rel="noopener noreferrer" href="https://github.com/austintgriffith/scaffold-eth">
github repo
</a>
</Text>
</Timeline.Item>
<Timeline.Item dot="⚛️">
<Text delete>
Start your frontend app with: <Text strong>yarn start</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="⛓">
<Text delete={props.chainIsUp}>
Start your local blockchain with: <Text strong>yarn run chain</Text> (and refresh)
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text delete={props.hasOwner}>
Compile and deploy your smart contract: <Text strong>yarn run deploy</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text delete={props.isNotSmoort}>
Fix error in <Text code>SmartContractWallet.sol</Text> then: <Text strong>yarn run deploy</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot={<SendOutlined style={{ fontSize: "16px" }} />} color={props.hasEther ? "green" : "blue"}>
<Text delete={props.hasEther}>
Send test ether to your{" "}
<Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address using
(bottom left) faucet
</Text>
</Timeline.Item>
<Timeline.Item
dot={<DownloadOutlined style={{ fontSize: "16px" }} />}
color={props.contractHasEther ? "green" : "blue"}
>
<Text delete={props.contractHasEther}>
Deposit some funds into your{" "}
<Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
smart contract wallet
</Text>
</Timeline.Item>
<Timeline.Item
dot={<EditOutlined style={{ fontSize: "16px" }} />}
color={props.amOwnerOfContract ? "green" : "blue"}
>
<Text delete={props.amOwnerOfContract}>
Set <b>owner</b> of your{" "}
<Blockies seed={(props.contractAddress ? props.contractAddress : "").toLowerCase()} size={8} scale={2} />{" "}
smart contract wallet to your{" "}
<Blockies seed={(props.address ? props.address : "").toLowerCase()} size={8} scale={2} /> address
</Text>
</Timeline.Item>
<Timeline.Item dot="☢️">
<Text>
Yikes, anyone can take ownership of <Text code>SmartContractWallet.sol</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Test your contract with <Text code>buidler/test/myTest.js</Text> then:
<Text strong>yarn run test</Text>
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Build something awesome with ? <a href="https://github.com/austintgriffith/scaffold-eth">scaffold-eth</a> and{" "}
<a target="_blank" rel="noopener noreferrer" href="https://twitter.com/austingriffith">
@ me
</a>
!
</Text>
</Timeline.Item>
<Timeline.Item dot="?">
<Text>
Read more about{" "}
<a target="_blank" rel="noopener noreferrer" href="https://ethereum.org/developers">
Ethereum
</a>
,{" "}
<a target="_blank" rel="noopener noreferrer" href="https://solidity.readthedocs.io/en/develop/contracts.html">
Solidity
</a>
, and{" "}
<a target="_blank" rel="noopener noreferrer" href="https://buidler.dev/tutorial">
Buidler
</a>
</Text>
</Timeline.Item>
</Timeline>
);
}
Example #12
| Source File: DepositsTables.js From bonded-stablecoin-ui with MIT License | 4 votes |
|
DepositsTables = ({
timestamp,
my,
all,
growth_factor,
new_growth_factor,
minProtectionRatio,
setVisibleEditRecipient,
setWithdrawProtection,
setAddProtection,
setWithdrawInterest
}) => {
const [width] = useWindowSize();
const { t } = useTranslation();
const { activeWallet } = useSelector((state) => state.settings);
const {
deposit_state,
deposit_aa,
bonded_state,
symbol2,
symbol3,
reserve_asset_symbol,
params
} = useSelector((state) => state.active);
const actualParams = getParams(params, bonded_state);
const mySortedDeposits = my.sort((a, b) => b.ts - a.ts);
const allSortedDeposits = all.sort((a, b) => a.protection_ratio - b.protection_ratio);
const recipientSortedDeposits = all.filter((item) => item.interest_recipient === activeWallet && item.owner !== activeWallet).sort((a, b) => b.amount - a.amount).map((item) => ({ ...item, inRecipientTab: true }));
const columns = [
{
title: t("trade.tabs.deposits.opened", "Opened"),
dataIndex: "ts",
key: "ts",
render: (value) => {
return (
<Tooltip title={moment.unix(value).format("DD-MM-YYYY HH:mm")}>
{timestamp - value > 60 * 60 * 24
? moment.unix(value).format("DD-MM-YYYY")
: moment.unix(value).format("HH:mm")}
</Tooltip>
);
},
},
{
title: (
<Label
label={symbol2 || t("trade.tabs.deposits.interest_title", "Interest tokens")}
descr={t("trade.tabs.deposits.interest_title_desc", "Amount of interest tokens")}
/>
),
dataIndex: "amount",
key: "interest",
render: (value) => {
return (
<ShowDecimalsValue decimals={actualParams.decimals2} value={value} />
);
},
},
{
title: (
<Label
label={symbol3 || t("trade.tabs.deposits.stable_title", "Stable tokens")}
descr={t("trade.tabs.deposits.stable_title_desc", "Amount of stable tokens issued against the deposit")}
/>
),
dataIndex: "stable_amount",
key: "stable",
render: (value) => {
return (
<ShowDecimalsValue decimals={actualParams.decimals2} value={value} />
);
},
},
{
title: (
<Label
label={t("trade.tabs.deposits.protection", "Protection (ratio)")}
descr={t("trade.tabs.deposits.protection_desc", "Additional deposit in {{reserve}} that protects the deposit from being closed by others. The deposit with the least ratio of protection to deposit amount can be closed by anybody. There is no direct loss to you when your deposit is closed but you stop receiving interest from it.", {
reserve: actualParams.reserve_asset in config.reserves
? config.reserves[actualParams.reserve_asset].name
: reserve_asset_symbol || "reserve asset"
})}
/>
),
dataIndex: "protection",
key: "protection",
render: (value, records) => {
const ratio = Number(records.protection_ratio).toPrecision(3);
return (
<>
{value ? (
<>
<ShowDecimalsValue
decimals={actualParams.reserve_asset_decimals}
value={value}
/>{" "}
{actualParams.reserve_asset === "base"
? "GBYTE"
: config.reserves[actualParams.reserve_asset]
? config.reserves[actualParams.reserve_asset].name
: reserve_asset_symbol || ''}{" "}
({ratio})
</>
) : (
0
)}
{records.isMy && <Tooltip title={t("trade.tabs.deposits.add_protection", "Add protection")}>
<Button
type="link"
disabled={records.owner !== activeWallet || records.id.match(/^dummy\d+$/)}
onClick={() => setAddProtection(records)}
size="middle"
icon={<DownloadOutlined />}
/>
</Tooltip>}
{records.isMy && <Tooltip title={t("trade.tabs.deposits.withdraw_protection", "Withdraw protection")}>
<Button
disabled={
records.owner !== activeWallet ||
!records.protection ||
records.protection === 0
}
type="link"
size="middle"
onClick={() => setWithdrawProtection(records)}
icon={<ExportOutlined />}
/>
</Tooltip>}
</>
);
},
},
{
title: (
<Label label={t("trade.tabs.deposits.interest", "Interest")} descr={t("trade.tabs.deposits.interest_desc", "Interest available for withdrawal")} />
),
dataIndex: "amount",
key: "amount",
render: (value, records) => {
const new_stable_amount = Math.floor(records.amount * growth_factor);
const interest = new_stable_amount - records.stable_amount;
return (
<>
{records.closer ? (
<ShowDecimalsValue
decimals={actualParams.decimals2}
value={records.close_interest}
/>
) : (
<ShowDecimalsValue
decimals={actualParams.decimals2}
value={interest}
/>
)}
{(records.isMy || (activeWallet === records.interest_recipient && records.inRecipientTab)) && <Tooltip title={t("trade.tabs.deposits.withdraw_interest", "Withdraw interest")}>
<Button
type="link"
onClick={() => setWithdrawInterest({ ...records, interest })}
disabled={
interest <= 0 ||
(records.interest_recipient
? activeWallet !== records.interest_recipient
: activeWallet !== records.owner) ||
records.closer ||
records.id.match(/^dummy\d+$/)
}
icon={<ExportOutlined />}
/>
</Tooltip>}
</>
);
},
},
{
title: (
<Label
label={t("trade.tabs.deposits.interest_recipient", "Interest recipient")}
descr={t("trade.tabs.deposits.interest_recipient_desc", "Who receives interest (deposit owner by default)")}
/>
),
dataIndex: "interest_recipient",
render: (value, records) => {
const recipientName =
value && config.interestRecipients.find((a) => a.address === value);
return (
<>
{(!value && records.owner === activeWallet) || (value && value === activeWallet)
? t("trade.tabs.deposits.you", "you")
: (recipientName && (
<span style={{ fontSize: 12 }}>{recipientName.name}</span>
)) ||
(value || records.owner).slice(0, 9) + "..."}
{records.isMy && <Tooltip title={t("trade.tabs.deposits.edit_interest_recipient", "Edit interest recipient")}>
<Button
type="link"
size="small"
style={{ padding: 0 }}
disabled={records.owner !== activeWallet || records.id.match(/^dummy\d+$/)}
onClick={() =>
setVisibleEditRecipient({
id: records.id,
current: records.interest_recipient || records.owner,
})
}
icon={<EditOutlined />}
/>
</Tooltip>}
</>
);
},
},
{
id: "action",
render: (_, records) => {
const closeUrl = generateLink(
records.closer ? 1e4 : Math.ceil(records.amount * new_growth_factor),
{
id: records.id,
commit_force_close: records.closer ? 1 : undefined
},
activeWallet,
deposit_aa,
records.closer ? "base" : deposit_state.asset
);
const challengeLink = records.weakerId ? generateLink(
1e4,
{
id: records.id,
challenge_force_close: 1,
weaker_id: records.weakerId
},
activeWallet,
deposit_aa
) : null;
const aboveMin = {
is: !records.isMy && minProtectionRatio !== null && records.protection_ratio > minProtectionRatio,
info: t("trade.tabs.deposits.less_last", "This deposit's protection ratio is above the smallest")
};
const tooNew = {
is: records.ts + actualParams.min_deposit_term > timestamp || records.id.match(/^dummy\d+$/),
info: t("trade.tabs.deposits.too_new", "This deposit was opened less than {{hours}} hours ago and can't be closed yet", { hours: +Number(actualParams.min_deposit_term / 3600).toFixed(3) })
};
const inChallengingPeriod = {
is: (records.closer && records.force_close_ts && records.force_close_ts + actualParams.challenging_period > timestamp),
info: t("trade.tabs.deposits.challenging_period", "Commit will be available in {{hours}} hours when the challenging period expires", { hours: +Number((records.force_close_ts + actualParams.challenging_period - timestamp) / 3600).toFixed(3) })
};
const tooltip = aboveMin.is ? aboveMin.info : (tooNew.is ? tooNew.info : (inChallengingPeriod.is ? inChallengingPeriod.info : undefined));
return (
<Space size="large">
{!records.weakerId && <QRButton
config={{
tooltipMobile: tooltip,
tooltip
}}
type="link"
size="small"
style={{ padding: 0 }}
href={closeUrl}
onClick={() => {
ReactGA.event({
category: "Stablecoin",
action: "Close deposit",
});
}}
disabled={inChallengingPeriod.is || tooNew.is || (aboveMin.is && records.owner !== activeWallet)}
>
{!records.closer && (records.owner === activeWallet ? t("trade.tabs.deposits.close", "Close") : t("trade.tabs.deposits.force_close", "Force close"))}
{records.closer && t("trade.tabs.deposits.commit_force_close", "Commit force close")}
</QRButton>}
{records.weakerId ? <QRButton style={{ padding: 0 }} size="small" type="link" href={challengeLink}>{t("trade.tabs.deposits.challenge", "Challenge")}</QRButton> : null}
</Space>
);
},
},
];
const isSingle = all.length === 1;
return (
<Tabs defaultActiveKey="my-1">
<TabPane tab={t("trade.tabs.deposits.my_deposits", "My deposits")} key="my-1">
{width > 1279 ? (
<Table
dataSource={mySortedDeposits}
columns={columns}
onRow={(record) => {
return {
style: {
color: (minProtectionRatio !== null && record.protection_ratio <= minProtectionRatio && !isSingle) ? "#e74c3c" : "inherit",
},
};
}}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
pagination={{ pageSize: 20, hideOnSinglePage: true }}
/>
) : (
<List
pagination={{ pageSize: 10, hideOnSinglePage: true }}
grid={{ column: 1 }}
bordered={false}
dataSource={mySortedDeposits}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
renderItem={(item) => (
<DepositsItem
item={item}
width={width}
decimals={actualParams.decimals2}
reserve_asset_decimals={actualParams.reserve_asset_decimals}
reserve_asset_symbol={reserve_asset_symbol}
min_deposit_term={actualParams.min_deposit_term}
reserve_asset={actualParams.reserve_asset}
growth_factor={growth_factor}
activeWallet={activeWallet}
deposit_aa={deposit_aa}
timestamp={timestamp}
asset={deposit_state.asset}
setVisibleEditRecipient={setVisibleEditRecipient}
setAddProtection={setAddProtection}
setWithdrawProtection={setWithdrawProtection}
new_growth_factor={new_growth_factor}
challenging_period={actualParams.challenging_period}
symbol2={symbol2}
symbol3={symbol3}
minProtectionRatio={minProtectionRatio}
isSingle={isSingle}
/>
)}
/>
)}
</TabPane>
{activeWallet && <TabPane tab={t("trade.tabs.deposits.me_as_interest_recipient", "Me as interest recipient")} key="recipient-2">
<InterestRecipientDepositsInfo />
{width > 1279 ? (
<Table
dataSource={recipientSortedDeposits}
columns={columns.filter((column) => column.dataIndex !== "interest_recipient" && column.id !== "action")}
onRow={(record) => {
return {
style: {
color: (minProtectionRatio !== null && record.protection_ratio <= minProtectionRatio && !isSingle)
? "#e74c3c"
: "inherit",
},
};
}}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
pagination={{ pageSize: 20, hideOnSinglePage: true }}
/>
) : (
<List
pagination={{ pageSize: 10, hideOnSinglePage: true }}
grid={{ column: 1 }}
bordered={false}
dataSource={recipientSortedDeposits}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
renderItem={(item) => (
<DepositsItem
item={item}
width={width}
decimals={actualParams.decimals2}
reserve_asset_decimals={actualParams.reserve_asset_decimals}
reserve_asset_symbol={reserve_asset_symbol}
min_deposit_term={actualParams.min_deposit_term}
reserve_asset={actualParams.reserve_asset}
growth_factor={growth_factor}
activeWallet={activeWallet}
deposit_aa={deposit_aa}
timestamp={timestamp}
asset={deposit_state.asset}
setVisibleEditRecipient={setVisibleEditRecipient}
setAddProtection={setAddProtection}
setWithdrawProtection={setWithdrawProtection}
new_growth_factor={new_growth_factor}
challenging_period={actualParams.challenging_period}
inRecipientTab={true}
symbol2={symbol2}
symbol3={symbol3}
minProtectionRatio={minProtectionRatio}
isSingle={isSingle}
/>
)}
/>
)}
</TabPane>}
<TabPane tab={t("trade.tabs.deposits.all_deposits", "All deposits")} key="all-3">
<ForceCloseDepositsInfo
challengingPeriodInHours={+Number(actualParams.challenging_period / 3600).toFixed(2)}
depositAa={deposit_aa}
symbol2={symbol2}
symbol3={symbol3}
/>
{width > 1279 ? (
<Table
dataSource={allSortedDeposits}
columns={columns}
onRow={(record) => {
return {
style: {
color:
(minProtectionRatio !== null && record.protection_ratio <= minProtectionRatio && !isSingle)
? "#e74c3c"
: "inherit",
background: record.owner === activeWallet ? "#f5f5f5" : "#fff",
},
};
}}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
pagination={{ pageSize: 20, hideOnSinglePage: true }}
/>
) : (
<List
pagination={{ pageSize: 10, hideOnSinglePage: true }}
grid={{ column: 1 }}
bordered={false}
dataSource={allSortedDeposits}
locale={{
emptyText: <DepositLocaleForEmpty isActive={bonded_state.interest_rate} />,
}}
renderItem={(item) => (
<DepositsItem
item={item}
width={width}
decimals={actualParams.decimals2}
reserve_asset_decimals={actualParams.reserve_asset_decimals}
reserve_asset_symbol={reserve_asset_symbol}
min_deposit_term={actualParams.min_deposit_term}
reserve_asset={actualParams.reserve_asset}
growth_factor={growth_factor}
activeWallet={activeWallet}
deposit_aa={deposit_aa}
timestamp={timestamp}
asset={deposit_state.asset}
setVisibleEditRecipient={setVisibleEditRecipient}
setAddProtection={setAddProtection}
setWithdrawProtection={setWithdrawProtection}
new_growth_factor={new_growth_factor}
challenging_period={actualParams.challenging_period}
symbol2={symbol2}
symbol3={symbol3}
inAllTab={true}
minProtectionRatio={minProtectionRatio}
isSingle={isSingle}
/>
)}
/>
)}
</TabPane>
</Tabs>
)
}
Example #13
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { size } = this.state
return (
<div className="row" id="example-buttons">
<div className="col-lg-6">
<h5 className="mb-3">
<strong>Default</strong>
</h5>
<div className="mb-5">
<Button type="primary" className="mr-3 mb-3">
Primary
</Button>
<Button className="mr-3 mb-3">Default</Button>
<Button type="dashed" className="mr-3 mb-3">
Dashed
</Button>
<Button type="danger" className="mr-3 mb-3">
Danger
</Button>
<Button type="link" className="mr-3 mb-3">
Link
</Button>
</div>
<h5 className="mb-3">
<strong>Size</strong>
</h5>
<div className="mb-5">
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Button type="primary" size={size} className="mr-3 mb-3">
Primary
</Button>
<Button size={size} className="mr-3 mb-3">
Normal
</Button>
<Button type="dashed" size={size} className="mr-3 mb-3">
Dashed
</Button>
<Button type="danger" size={size} className="mr-3 mb-3">
Danger
</Button>
<Button type="link" size={size} className="mr-3 mb-3">
Link
</Button>
<br />
<Button type="primary" icon={<DownloadOutlined />} size={size} className="mr-3 mb-3" />
<Button
type="primary"
shape="circle"
icon={<DownloadOutlined />}
size={size}
className="mr-3 mb-3"
/>
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
size={size}
className="mr-3 mb-3"
/>
<Button
type="primary"
shape="round"
icon={<DownloadOutlined />}
size={size}
className="mr-3 mb-3"
>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />} size={size} className="mr-3 mb-3">
Download
</Button>
<br />
<Button.Group size={size} className="mr-3 mb-3">
<Button type="primary">
<LeftOutlined />
Backward
</Button>
<Button type="primary">
Forward
<RightOutlined />
</Button>
</Button.Group>
</div>
<h5 className="mb-3">
<strong>Disabled</strong>
</h5>
<div className="mb-5">
<Button type="primary" className="mr-3 mb-3">
Primary
</Button>
<Button type="primary" disabled className="mr-3 mb-3">
Primary(disabled)
</Button>
<br />
<Button className="mr-3 mb-3">Default</Button>
<Button disabled className="mr-3 mb-3">
Default(disabled)
</Button>
<br />
<Button type="dashed" className="mr-3 mb-3">
Dashed
</Button>
<Button type="dashed" disabled className="mr-3 mb-3">
Dashed(disabled)
</Button>
<br />
<Button type="link" className="mr-3 mb-3">
Link
</Button>
<Button type="link" disabled className="mr-3 mb-3">
Link(disabled)
</Button>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-3">
<strong>Default</strong>
</h5>
<div className="mb-5">
<Button type="primary" shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button type="primary" shape="circle" className="mr-3 mb-3">
A
</Button>
<Button type="primary" icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
<Button shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
<br />
<Button shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
<Button type="dashed" shape="circle" icon={<SearchOutlined />} className="mr-3 mb-3" />
<Button type="dashed" icon={<SearchOutlined />} className="mr-3 mb-3">
Search
</Button>
</div>
<h5 className="mb-3">
<strong>Loading</strong>
</h5>
<div className="mb-5">
<Button type="primary" loading className="mr-3 mb-3">
Loading
</Button>
<Button type="primary" size="small" loading className="mr-3 mb-3">
Loading
</Button>
<br />
<Button type="primary" loading className="mr-3 mb-3" />
<Button type="primary" shape="circle" loading className="mr-3 mb-3" />
<Button type="danger" shape="round" loading className="mr-3 mb-3" />
</div>
<h5 className="mb-3">
<strong>Block Buttons</strong>
</h5>
<div className="mb-5">
<Button type="primary" block className="mb-3">
Primary
</Button>
<Button block className="mb-3">
Default
</Button>
<Button type="dashed" block className="mb-3">
Dashed
</Button>
<Button type="danger" block className="mb-3">
Danger
</Button>
<Button type="link" block className="mb-3">
Link
</Button>
</div>
</div>
</div>
)
}
Example #14
| Source File: direction.jsx From virtuoso-design-system with MIT License | 4 votes |
|
// ==== End Badge ====
render() {
const { currentStep } = this.state;
return (
<div className="direction-components">
<Row>
<Col span={24}>
<Divider orientation="left">Cascader example</Divider>
<Cascader
suffixIcon={<SearchIcon />}
options={cascaderOptions}
onChange={this.onCascaderChange}
placeholder="یک مورد انتخاب کنید"
popupPlacement={this.props.popupPlacement}
/>
With search:
<Cascader
suffixIcon={<SmileOutlined />}
options={cascaderOptions}
onChange={this.onCascaderChange}
placeholder="Select an item"
popupPlacement={this.props.popupPlacement}
showSearch={this.cascaderFilter}
/>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Switch example</Divider>
<Switch defaultChecked />
<Switch loading defaultChecked />
<Switch size="small" loading />
</Col>
<Col span={12}>
<Divider orientation="left">Radio Group example</Divider>
<Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">تهران</Radio.Button>
<Radio.Button value="b" disabled>
اصفهان
</Radio.Button>
<Radio.Button value="c">فارس</Radio.Button>
<Radio.Button value="d">خوزستان</Radio.Button>
</Radio.Group>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Button example</Divider>
<div className="button-demo">
<Button type="primary" icon={<DownloadOutlined />} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} />
<Button type="primary" shape="round" icon={<DownloadOutlined />}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />}>
Download
</Button>
<br />
<Button.Group>
<Button type="primary">
<LeftOutlined />
Backward
</Button>
<Button type="primary">
Forward
<RightOutlined />
</Button>
</Button.Group>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Tree example</Divider>
<Tree
showLine
checkable
defaultExpandedKeys={['0-0-0', '0-0-1']}
defaultSelectedKeys={['0-0-0', '0-0-1']}
defaultCheckedKeys={['0-0-0', '0-0-1']}
>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0" disabled>
<TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
<TreeNode title="leaf" key="0-0-0-1" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
</TreeNode>
</TreeNode>
</Tree>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Input (Input Group) example</Divider>
<InputGroup size="large">
<Row gutter={8}>
<Col span={5}>
<Input defaultValue="0571" />
</Col>
<Col span={8}>
<Input defaultValue="26888888" />
</Col>
</Row>
</InputGroup>
<br />
<InputGroup compact>
<Input style={{ width: '20%' }} defaultValue="0571" />
<Input style={{ width: '30%' }} defaultValue="26888888" />
</InputGroup>
<br />
<InputGroup compact>
<Select defaultValue="Option1">
<Option value="Option1">Option1</Option>
<Option value="Option2">Option2</Option>
</Select>
<Input style={{ width: '50%' }} defaultValue="input content" />
<InputNumber />
</InputGroup>
<br />
<Search placeholder="input search text" enterButton="Search" size="large" />
<br />
<br />
<div style={{ marginBottom: 16 }}>
<Input
addonBefore={this.selectBefore}
addonAfter={this.selectAfter}
defaultValue="mysite"
/>
</div>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Select example</Divider>
<Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
<Option value="jack">Jack</Option>
<Option value="مورچه">مورچه</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} disabled>
<Option value="مورچه">مورچه</Option>
</Select>
<Select defaultValue="مورچه" style={{ width: 120 }} loading>
<Option value="مورچه">مورچه</Option>
</Select>
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
filterOption={(input, option) =>
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="jack">Jack</Option>
<Option value="سعید">سعید</Option>
<Option value="tom">Tom</Option>
</Select>
</Col>
<Col span={12}>
<Divider orientation="left">TreeSelect example</Divider>
<div>
<TreeSelect
showSearch
style={{ width: '100%' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="Please select"
allowClear
treeDefaultExpandAll
>
<TreeNode value="parent 1" title="parent 1" key="0-1">
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
<TreeNode value="leaf1" title="my leaf" key="random" />
<TreeNode value="leaf2" title="your leaf" key="random1" />
</TreeNode>
<TreeNode value="parent 1-1" title="parent 1-1" key="random2">
<TreeNode
value="sss"
title={<b style={{ color: '#08c' }}>sss</b>}
key="random3"
/>
</TreeNode>
</TreeNode>
</TreeSelect>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Modal example</Divider>
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="پنچره ساده"
visible={this.state.modalVisible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
<p>نگاشتههای خود را اینجا قراردهید</p>
</Modal>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Steps example</Divider>
<div>
<Steps progressDot current={currentStep}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
<br />
<Steps current={currentStep} onChange={this.onStepsChange}>
<Step title="Step 1" description="This is a description." />
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" description="This is a description." />
</Steps>
</div>
</Col>
</Row>
<br />
<Row>
<Col span={12}>
<Divider orientation="left">Rate example</Divider>
<div>
<Rate defaultValue={2.5} />
<br />
<strong>* Note:</strong> Half star not implemented in RTL direction, it will be
supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
implement rtl support.
</div>
</Col>
<Col span={12}>
<Divider orientation="left">Badge example</Divider>
<div>
<div>
<Badge count={this.state.badgeCount}>
<a href="#" className="head-example" />
</Badge>
<ButtonGroup>
<Button onClick={this.declineBadge}>
<MinusOutlined />
</Button>
<Button onClick={this.increaseBadge}>
<PlusOutlined />
</Button>
</ButtonGroup>
</div>
<div style={{ marginTop: 10 }}>
<Badge dot={this.state.showBadge}>
<a href="#" className="head-example" />
</Badge>
<Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
</div>
</div>
</Col>
</Row>
</Col>
</Row>
<br />
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Pagination example</Divider>
<Pagination showSizeChanger defaultCurrent={3} total={500} />
</Col>
</Row>
<br />
<Row>
<Col span={24}>
<Divider orientation="left">Grid System example</Divider>
<div className="grid-demo">
<div className="code-box-demo">
<p>
<strong>* Note:</strong> Every calculation in RTL grid system is from right side
(offset, push, etc.)
</p>
<Row>
<Col span={8}>col-8</Col>
<Col span={8} offset={8}>
col-8
</Col>
</Row>
<Row>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
<Col span={6} offset={6}>
col-6 col-offset-6
</Col>
</Row>
<Row>
<Col span={12} offset={6}>
col-12 col-offset-6
</Col>
</Row>
<Row>
<Col span={18} push={6}>
col-18 col-push-6
</Col>
<Col span={6} pull={18}>
col-6 col-pull-18
</Col>
</Row>
</div>
</div>
</Col>
</Row>
</div>
);
}
Example #15
| Source File: index.jsx From prometheusPro with MIT License | 4 votes |
|
Applications = props => {
const { list } = props;
const itemMenu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.alipay.com/">
1st menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.taobao.com/">
2nd menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.tmall.com/">
3d menu item
</a>
</Menu.Item>
</Menu>
);
const CardInfo = ({ activeUser, newUser }) => (
<div className={stylesApplications.cardInfo}>
<div>
<p>活跃用户</p>
<p>{activeUser}</p>
</div>
<div>
<p>新增用户</p>
<p>{newUser}</p>
</div>
</div>
);
return (
<List
rowKey="id"
className={stylesApplications.filterCardList}
grid={{
gutter: 24,
xxl: 3,
xl: 2,
lg: 2,
md: 2,
sm: 2,
xs: 1,
}}
dataSource={list}
renderItem={item => (
<List.Item key={item.id}>
<Card
hoverable
bodyStyle={{
paddingBottom: 20,
}}
actions={[
<Tooltip key="download" title="下载">
<DownloadOutlined />
</Tooltip>,
<Tooltip title="编辑" key="edit">
<EditOutlined />
</Tooltip>,
<Tooltip title="分享" key="share">
<ShareAltOutlined />
</Tooltip>,
<Dropdown overlay={itemMenu} key="ellipsis">
<EllipsisOutlined />
</Dropdown>,
]}
>
<Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
<div className={stylesApplications.cardItemContent}>
<CardInfo
activeUser={formatWan(item.activeUser)}
newUser={numeral(item.newUser).format('0,0')}
/>
</div>
</Card>
</List.Item>
)}
/>
);
}
Example #16
| Source File: index.jsx From prometheusPro with MIT License | 4 votes |
|
render() {
const {
listAndsearchAndapplications: { list },
loading,
form,
} = this.props;
const { getFieldDecorator } = form;
const CardInfo = ({ activeUser, newUser }) => (
<div className={styles.cardInfo}>
<div>
<p>活跃用户</p>
<p>{activeUser}</p>
</div>
<div>
<p>新增用户</p>
<p>{newUser}</p>
</div>
</div>
);
const formItemLayout = {
wrapperCol: {
xs: {
span: 24,
},
sm: {
span: 16,
},
},
};
const itemMenu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.alipay.com/">
1st menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.taobao.com/">
2nd menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="https://www.tmall.com/">
3d menu item
</a>
</Menu.Item>
</Menu>
);
return (
<div className={styles.filterCardList}>
<Card bordered={false}>
<Form layout="inline">
<StandardFormRow
title="所属类目"
block
style={{
paddingBottom: 11,
}}
>
<FormItem>
{getFieldDecorator('category')(
<TagSelect expandable>
<TagSelect.Option value="cat1">类目一</TagSelect.Option>
<TagSelect.Option value="cat2">类目二</TagSelect.Option>
<TagSelect.Option value="cat3">类目三</TagSelect.Option>
<TagSelect.Option value="cat4">类目四</TagSelect.Option>
<TagSelect.Option value="cat5">类目五</TagSelect.Option>
<TagSelect.Option value="cat6">类目六</TagSelect.Option>
<TagSelect.Option value="cat7">类目七</TagSelect.Option>
<TagSelect.Option value="cat8">类目八</TagSelect.Option>
<TagSelect.Option value="cat9">类目九</TagSelect.Option>
<TagSelect.Option value="cat10">类目十</TagSelect.Option>
<TagSelect.Option value="cat11">类目十一</TagSelect.Option>
<TagSelect.Option value="cat12">类目十二</TagSelect.Option>
</TagSelect>,
)}
</FormItem>
</StandardFormRow>
<StandardFormRow title="其它选项" grid last>
<Row gutter={16}>
<Col lg={8} md={10} sm={10} xs={24}>
<FormItem {...formItemLayout} label="作者">
{getFieldDecorator(
'author',
{},
)(
<Select
placeholder="不限"
style={{
maxWidth: 200,
width: '100%',
}}
>
<Option value="lisa">王昭君</Option>
</Select>,
)}
</FormItem>
</Col>
<Col lg={8} md={10} sm={10} xs={24}>
<FormItem {...formItemLayout} label="好评度">
{getFieldDecorator(
'rate',
{},
)(
<Select
placeholder="不限"
style={{
maxWidth: 200,
width: '100%',
}}
>
<Option value="good">优秀</Option>
<Option value="normal">普通</Option>
</Select>,
)}
</FormItem>
</Col>
</Row>
</StandardFormRow>
</Form>
</Card>
<br />
<List
rowKey="id"
grid={{
gutter: 24,
xl: 4,
lg: 3,
md: 3,
sm: 2,
xs: 1,
}}
loading={loading}
dataSource={list}
renderItem={item => (
<List.Item key={item.id}>
<Card
hoverable
bodyStyle={{
paddingBottom: 20,
}}
actions={[
<Tooltip key="download" title="下载">
<DownloadOutlined />
</Tooltip>,
<Tooltip key="edit" title="编辑">
<EditOutlined />
</Tooltip>,
<Tooltip title="分享" key="share">
<ShareAltOutlined />
</Tooltip>,
<Dropdown key="ellipsis" overlay={itemMenu}>
<EllipsisOutlined />
</Dropdown>,
]}
>
<Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
<div className={styles.cardItemContent}>
<CardInfo
activeUser={formatWan(item.activeUser)}
newUser={numeral(item.newUser).format('0,0')}
/>
</div>
</Card>
</List.Item>
)}
/>
</div>
);
}
