antd#Drawer JavaScript Examples
The following examples show how to use
antd#Drawer.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
render() {
return (
<div>
<h5 className="mb-3">
<strong>Basic</strong>
</h5>
<div className="mb-5">
<Button type="primary" onClick={this.showDrawer}>
Open
</Button>
</div>
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</div>
)
}
Example #2
| Source File: index.js From acy-dex-interface with MIT License | 6 votes |
|
SiderMenuWrapper = React.memo(props => {
const { isMobile, menuData, collapsed, onCollapse } = props;
const flatMenuKeys = getFlatMenuKeys(menuData);
return isMobile ? (
<Drawer
visible={!collapsed}
placement="left"
onClose={() => onCollapse(true)}
style={{
padding: 0,
height: '100vh',
}}
>
<SiderMenu {...props} flatMenuKeys={flatMenuKeys} collapsed={isMobile ? false : collapsed} />
</Drawer>
) : (
<SiderMenu {...props} flatMenuKeys={flatMenuKeys} />
);
})
Example #3
| Source File: index.js From camel-store-admin with Apache License 2.0 | 6 votes |
|
SiderMenuWrapper = props => {
const { isMobile, menuData, collapsed, onCollapse } = props;
return isMobile ? (
<Drawer
visible={!collapsed}
placement="left"
onClose={() => onCollapse(true)}
style={{
padding: 0,
height: '100vh',
}}
>
<SiderMenu
{...props}
flatMenuKeys={getFlatMenuKeys(menuData)}
collapsed={isMobile ? false : collapsed}
/>
</Drawer>
) : (
<SiderMenu {...props} flatMenuKeys={getFlatMenuKeys(menuData)} />
);
}
Example #4
| Source File: render-in-current.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
return (
<div className="site-drawer-render-in-current-wrapper">
Render in this
<div style={{ marginTop: 16 }}>
<Button type="primary" onClick={this.showDrawer}>
Open
</Button>
</div>
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
getContainer={false}
style={{ position: 'absolute' }}
>
<p>Some contents...</p>
</Drawer>
</div>
);
}
Example #5
| Source File: Edit.js From Peppermint with GNU General Public License v3.0 | 5 votes |
|
Edit = (props) => {
const [visible, setVisible] = useState(false);
const [isActive, setIsActive] = useState(props.n.active);
const [title, setTitle] = useState(props.n.title);
const [text, setText] = useState(props.n.text);
const onClose = async (e) => {
e.stopPropagation();
setVisible(false);
await postData();
};
const postData = async () => {
await fetch(`/api/v1/newsletter/update`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + localStorage.getItem("jwt"),
},
body: JSON.stringify({
id: props.n._id,
text,
title,
active: isActive,
}),
}).then((res) => res.json());
};
return (
<div>
<Button onClick={() => setVisible(true)}>
Edit
<Drawer
width={640}
placement="right"
onClose={onClose}
visible={visible}
>
<h4>Active : {props.n.active.toString()}</h4>
<h4>Created By : {props.n.createdBy.name}</h4>
<Divider />
<h4>
Title :{" "}
<Input
style={{ width: 300 }}
onChange={(e) => setTitle(e.target.value)}
/>
</h4>
<Divider />
<h5>Detail</h5>
<Input.TextArea
defaultValue={props.n.text}
rows={10}
onChange={(e) => setText(e.target.value)}
/>
<Divider />
<h5>Select the button below to change visability </h5>
<Radio.Group
buttonStyle="solid"
value={isActive}
onChange={(e) => setIsActive(e.target.value)}
style={{ textAlign: "center" }}
>
<Space>
<Radio.Button value={true}>Active</Radio.Button>
<Radio.Button value={false}>Hidden</Radio.Button>
</Space>
</Radio.Group>
</Drawer>
</Button>
</div>
);
}
Example #6
| Source File: SideBarDrawer.js From dexwebapp with Apache License 2.0 | 5 votes |
|
SideBarDrawer = ({ header, body, footer, onClose, visible }) => {
const theme = useContext(ThemeContext);
return (
<Drawer
width={241}
placement="right"
closable={false}
onClose={onClose}
visible={visible}
drawerStyle={{
fontSize: '0.85rem',
background: theme.sidePanelBackground,
}}
bodyStyle={{
padding: '0',
}}
headerStyle={{
height: 0,
}}
>
<Layout
onMouseLeave={onClose}
style={{
background: 'transparent',
height: '100vh',
}}
>
<div
style={{
background: theme.popupHeaderBackground,
textAlign: 'center',
width: '100%',
height: AppLayout.topNavBarHeight,
lineHeight: AppLayout.topNavBarHeight,
}}
>
{header}
</div>
<Content>{body}</Content>
</Layout>
</Drawer>
);
}
Example #7
| Source File: styles.js From bank-client with MIT License | 5 votes |
|
StyledDrawer = styled(Drawer)`
.ant-drawer-body {
padding: 0;
}
`
Example #8
| Source File: EventOptions.js From react-portal with MIT License | 5 votes |
|
EventOptions = props => {
const [isDrawerVisible, setIsDrawerVisible] = useState(false);
const [userData] = useState(getRole());
const handleEventAdd = () => {
setIsDrawerVisible(false);
props.onAddEvent();
};
const handleChange = val => {
props.onTypeChange(val);
};
return (
<div style={{ marginBottom: 12 }}>
{userData.role === "lead" ? (
<>
<Button onClick={() => setIsDrawerVisible(true)}>
Create Event
</Button>
<Divider type="vertical" />
</>
) : null}
<Select
style={{ minWidth: 180 }}
defaultValue="Upcoming Events"
onChange={handleChange}
>
<Option value="upcoming">Upcoming Events</Option>
<Option value="past">Past Events</Option>
<Option value="running">Running Events</Option>
</Select>
<Drawer
title="Create Event"
placement="right"
closable={true}
width="40%"
destroyOnClose={true}
onClose={() => setIsDrawerVisible(false)}
visible={isDrawerVisible}
>
<CreateEvent onAddEvent={handleEventAdd} />
</Drawer>
</div>
);
}
Example #9
| Source File: Card.js From ncovis-2020 with MIT License | 5 votes |
|
StyledDrawer = styled(Drawer)`
position: absolute;
`
Example #10
| Source File: UpdateOptions.js From react-portal with MIT License | 5 votes |
|
UpdateOptions = ({
profileDrawer,
setProfileDrawer,
userData,
handleUpdateUser,
handleUpdatePassword,
passwordDrawer,
setPasswordDrawer,
Refresh
}) => {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
if (window.innerWidth <= 568) {
setIsMobile(true);
}
}, []);
return (
<>
<div>
<Drawer
title="Update Profile"
placement="right"
closable={true}
width={isMobile ? "80%" : "40%"}
destroyOnClose={true}
onClose={() => setProfileDrawer(false)}
visible={profileDrawer}
>
<UpdateProfile
userData={userData}
onUpdateUser={handleUpdateUser}
Refresh={Refresh}
/>
</Drawer>
<Drawer
title="Change Password"
placement="right"
closable={true}
width={isMobile ? "80%" : "40%"}
destroyOnClose={true}
onClose={() => setPasswordDrawer(false)}
visible={passwordDrawer}
>
<UpdatePassword
userData={userData}
onUpdatePassword={handleUpdatePassword}
/>
</Drawer>
</div>
</>
);
}
Example #11
| Source File: SideBarDrawer.js From loopring-pay with Apache License 2.0 | 5 votes |
|
SideBarDrawer = ({ header, body, footer, onClose, visible }) => {
const theme = useContext(ThemeContext);
return (
<Drawer
width={241}
placement="right"
closable={false}
onClose={onClose}
visible={visible}
drawerStyle={{
fontSize: "0.85rem",
background: theme.sidePanelBackground,
}}
bodyStyle={{
padding: "0",
}}
headerStyle={{
height: 0,
}}
>
<Layout
onMouseLeave={onClose}
style={{
background: "transparent",
height: "100vh",
}}
>
<div
style={{
background: theme.popupHeaderBackground,
textAlign: "center",
width: "100%",
height: AppLayout.topNavBarHeight,
lineHeight: AppLayout.topNavBarHeight,
}}
>
{header}
</div>
<Content>{body}</Content>
</Layout>
</Drawer>
);
}
Example #12
| Source File: Manager.js From kite-admin with MIT License | 5 votes |
|
render() {
const { collapsed, isMobile } = this.state
const asideProps = {
collapsed,
onCollapseChange: this.onCollapseChange
}
const headerProps = {
collapsed,
onCollapseChange: this.onCollapseChange
}
return (
<Layout className="admin-manager">
{isMobile ? (
<Drawer
maskClosable
placement="left"
closable={false}
onClose={this.onCollapseChange.bind(this, !collapsed)}
visible={!collapsed}
width={200}
style={{
padding: 0,
height: '100vh'
}}
>
<Aside
{...{
...asideProps,
collapsed: false,
onCollapseChange: () => {}
}}
/>
</Drawer>
) : (
<Aside {...asideProps} />
)}
<Layout className="admin-wrapper">
<Header {...headerProps} />
<Content className="admin-content">
{this.props.children}
<Footer style={{ textAlign: 'center' }}>
<a href="https://github.com/maoxiaoquan/kite" target="_blank">
Kite
</a>
©2019
</Footer>
</Content>
</Layout>
</Layout>
)
}
Example #13
| Source File: UserOptions.js From react-portal with MIT License | 5 votes |
|
UserOptions = props => {
const [isDrawerVisible, setIsDrawerVisible] = useState(false);
const [userData] = useState(getRole());
const [isMobile, setIsMobile] = useState(false);
const handleUserAdd = () => {
setIsDrawerVisible(false);
props.onAddMember();
};
useEffect(() => {
if (window.innerWidth <= 568) {
setIsMobile(true);
}
}, []);
return (
<>
<div style={{ marginBottom: 12 }}>
<Row justify="space-between">
<Col span={12}>
{userData.role === "lead" ||
userData.role === "core" ? (
<Button onClick={() => setIsDrawerVisible(true)}>
Add Member
</Button>
) : null}
</Col>
</Row>
<Drawer
title="Add New Member"
placement="right"
closable={true}
width={isMobile ? "80%" : "40%"}
destroyOnClose={true}
onClose={() => setIsDrawerVisible(false)}
visible={isDrawerVisible}
>
<AddMember onAddMember={handleUserAdd} />
</Drawer>
</div>
</>
);
}
Example #14
| Source File: TopicConsumerGroup.js From kafka-map with Apache License 2.0 | 5 votes |
|
render() {
const columns = [{
title: 'Group ID',
dataIndex: 'groupId',
key: 'groupId',
render: (groupId, record) => {
return <Button type='link' onClick={() => {
this.setState({
consumerDetailVisible: true,
selectedRow: record
})
}}>{groupId}</Button>;
}
}, {
title: 'Lag',
dataIndex: 'lag',
key: 'lag',
render: (lag) => {
return lag;
}
}];
return (
<div>
<Table
rowKey='id'
dataSource={this.state.items}
columns={columns}
position={'both'}
size={'small'}
loading={this.state.loading}
pagination={{
showSizeChanger: true,
total: this.state.items.length,
showTotal: total => <FormattedMessage id="total-items" values={{total}}/>
}}
/>
<Drawer
title={'Topic：' + this.state.topic}
width={window.innerWidth * 0.8}
placement="right"
closable={true}
onClose={() => {
this.setState({
consumerDetailVisible: false
})
}}
visible={this.state.consumerDetailVisible}
>
{
this.state.consumerDetailVisible ?
<TopicConsumerGroupOffset
clusterId={this.state.clusterId}
topic={this.state.topic}
groupId={this.state.selectedRow['groupId']}
/> : undefined
}
</Drawer>
</div>
);
}
Example #15
| Source File: edit.js From ant-simple-pro with MIT License | 5 votes |
|
Edit = memo(function Edit({visible,content,callBack}) {
const [form] = Form.useForm();
useEffect(() => {
if(visible){
form.setFieldsValue(content);
}
}, [visible]);
const onFinish = (values) => {
callBack({visible:false,content:values});
};
const onClose = () => {
callBack({visible:false});
};
return (
<Drawer
title="编辑"
placement="right"
closable={false}
onClose={onClose}
visible={visible}
>
<Form form={form} labelAlign='left' onFinish={onFinish}>
<Form.Item label="标题" name="title" rules={[{ required: true, message: '请填写' }]}>
<Input size='middle' />
</Form.Item>
<Form.Item label="描述" name="describe">
<TextArea autoSize={{ minRows: 2 }} placeholder='请输入' />
</Form.Item>
<Form.Item >
<Button type="primary" htmlType="submit">
修改
</Button>
</Form.Item>
</Form>
</Drawer>
)
})
Example #16
| Source File: header.js From portfolyo-mern with MIT License | 5 votes |
|
function AppHeader() {
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return (
<div className="container-fluid">
<div className="header">
<div className="logo">
<b>Portfolyo</b>
</div>
<div className="mobileHidden">
<Anchor targetOffset="65">
<Link href="#hero" title="Home" />
<Link href="#about" title="About" />
<Link href="#creator" title="Creator" />
<Link href="#feature" title="Features" />
<Link href="#works" title="How it works" />
<Link href="#faq" title="FAQ" />
<Link href="#contact" title="Contact" />
</Anchor>
</div>
<div className="mobileVisible">
<Button type="primary" onClick={showDrawer}>
<i className="fas fa-bars"></i>
</Button>
<Drawer
placement="right"
closable={false}
onClose={onClose}
visible={visible}
>
<Anchor targetOffset="65">
<Link href="#hero" title="Home" />
<Link href="#about" title="About" />
<Link href="#feature" title="Features" />
<Link href="#creator" title="Creator" />
<Link href="#works" title="How it works" />
<Link href="#faq" title="FAQ" />
<Link href="#contact" title="Contact" />
</Anchor>
</Drawer>
</div>
</div>
</div>
);
}
Example #17
| Source File: NavBar.js From relay_08 with MIT License | 5 votes |
|
function NavBar() {
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return (
<nav className="menu" style={{ position: "fixed", zIndex: 5, width: "100%" }}>
<div className="menu__logo">
<a href="/">
<span>?</span>
</a>
</div>
<div className="menu__container">
<div className="menu_left">
<LeftMenu mode="horizontal" />
</div>
<Button className="menu__mobile-button" type="primary" onClick={showDrawer}>
<Icon type="align-right" />
</Button>
<Drawer
title="Basic Drawer"
placement="right"
className="menu_drawer"
closable={false}
onClose={onClose}
visible={visible}
>
<LeftMenu mode="inline" />
<RightMenu mode="inline" />
</Drawer>
</div>
</nav>
);
}
Example #18
| Source File: EditProfile.js From placement-portal with MIT License | 5 votes |
|
render(){
const {
onClose,
editVisible,
loading,
profileData,
isMobile
} = this.props
let contact_designation = []
let contact_email = []
let contact_number = []
for (var i = 0; i < profileData.contact_details.length; i++) {
contact_designation[i] = profileData.contact_details[i].designation
contact_email[i] = profileData.contact_details[i].email
contact_number[i] = profileData.contact_details[i].phone
}
const fileList = [
{
uid: '1',
name: "Logo.jpeg",
status: 'done',
url: profileData.logo_link,
thumbUrl: profileData.logo_link
}
]
const fieldsValues = {
...profileData,
contact_email,
contact_number,
contact_designation,
fileList
}
return(
<Drawer
visible={editVisible}
onClose={onClose}
placement='right'
width={isMobile ? '100vw' : '40vw'}
>
<Spin spinning = {loading} tip="Submitting profile ...">
<Row type= 'flex' justify='center'>
<Typography.Title>
Edit Profile
</Typography.Title>
</Row>
<Row type= 'flex' justify='center' style={{background: '#fff'}}>
<CompanyDetailsForm {...fieldsValues} handleSubmit={this.handleSubmit}/>
</Row>
</Spin>
</Drawer>
)
}
Example #19
| Source File: NavBar.js From relay_08 with MIT License | 5 votes |
|
function NavBar() {
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return (
<nav className="menu" style={{ position: "fixed", zIndex: 5, width: "100%" }}>
<div className="menu__logo">
<Link to="/">
<span>?</span>
</Link>
</div>
<div className="menu__container">
<div className="menu_left">
<LeftMenu mode="horizontal" />
</div>
<Button className="menu__mobile-button" type="primary" onClick={showDrawer}>
<Icon type="align-right" />
</Button>
<Drawer
title="Basic Drawer"
placement="right"
className="menu_drawer"
closable={false}
onClose={onClose}
visible={visible}
>
<LeftMenu mode="inline" />
<RightMenu mode="inline" />
</Drawer>
</div>
</nav>
);
}
Example #20
| Source File: EditJob.js From placement-portal with MIT License | 4 votes |
|
render(){
const {
loading,
onClose,
editVisible,
isMobile
} = this.props;
const {
current,
steps,
job_details,
selection_criteria,
salary_details,
logistics_details
} = this.state;
const {
handleBack,
handleNext,
handleSubmit,
handleJobDetails,
handleSalaryDetails,
handleLogisticsDetails,
handleSelectionCriteria
} = this;
const jobDetailsProps = {
...job_details,
handleNext,
submitValues: handleJobDetails
};
const selectionDetailsProps = {
...selection_criteria,
handleNext,
handleBack,
submitValues: handleSelectionCriteria
};
const salaryDetailsProps = {
...salary_details,
handleNext,
handleBack,
submitValues: handleSalaryDetails
};
const logistictsDetailsProps = {
...logistics_details,
handleBack,
handleSubmit,
submitValues: handleLogisticsDetails
};
return(
<Drawer
width={isMobile ? '100vw' : '40vw'}
placement="right"
onClose={onClose}
visible={editVisible}
>
<Spin spinning={loading} tip="Loading...">
<Layout>
<Row type='flex' justify='center'>
<Col span={24}>
<Content
style={{
background: "#fff"
}}
>
<Row type='flex' justify='center' style={{background: '#fff'}}>
<Row type= 'flex' justify='center'>
<Typography.Title>
Edit Job
</Typography.Title>
</Row>
<Steps current={current} style={{margin: 24}}>
{steps.map(item => (
<Steps.Step key={item.title} title={item.title}/>
))}
</Steps>
<Row type='flex' justify='center' style={{background: '#fff',margin: 24}}>
{current === 0 ?
<Col>
<JobDetailsForm {...jobDetailsProps}/>
</Col>
: null}
{current === 1 ?
<Col>
<SelectionDetailsForm {...selectionDetailsProps} />
</Col>
: null}
{current === 2 ?
<Col>
<SalaryDetailsForm {...salaryDetailsProps} />
</Col>
: null}
{current === 3 ?
<Col>
<LogisticsDetailsForm {...logistictsDetailsProps}/>
</Col>
: null}
</Row>
</Row>
</Content>
</Col>
</Row>
</Layout>
</Spin>
</Drawer>
)
}
Example #21
| Source File: Swap.jsx From nft-e2e-example with MIT License | 4 votes |
|
function Swap({ selectedProvider, tokenListURI }) {
const [tokenIn, setTokenIn] = useState(defaultToken);
const [tokenOut, setTokenOut] = useState(defaultTokenOut);
const [exact, setExact] = useState();
const [amountIn, setAmountIn] = useState();
const [amountInMax, setAmountInMax] = useState();
const [amountOut, setAmountOut] = useState();
const [amountOutMin, setAmountOutMin] = useState();
const [trades, setTrades] = useState();
const [routerAllowance, setRouterAllowance] = useState();
const [balanceIn, setBalanceIn] = useState();
const [balanceOut, setBalanceOut] = useState();
const [slippageTolerance, setSlippageTolerance] = useState(
new Percent(Math.round(defaultSlippage * 100).toString(), "10000"),
);
const [timeLimit, setTimeLimit] = useState(defaultTimeLimit);
const [swapping, setSwapping] = useState(false);
const [approving, setApproving] = useState(false);
const [settingsVisible, setSettingsVisible] = useState(false);
const [swapModalVisible, setSwapModalVisible] = useState(false);
const [tokenList, setTokenList] = useState([]);
const [tokens, setTokens] = useState();
const [invertPrice, setInvertPrice] = useState(false);
const blockNumber = useBlockNumber(selectedProvider, 3000);
const signer = selectedProvider.getSigner();
const routerContract = new ethers.Contract(ROUTER_ADDRESS, IUniswapV2Router02ABI, signer);
const _tokenListUri = tokenListURI || "https://gateway.ipfs.io/ipns/tokens.uniswap.org";
const debouncedAmountIn = useDebounce(amountIn, 500);
const debouncedAmountOut = useDebounce(amountOut, 500);
const activeChainId = process.env.REACT_APP_NETWORK === "kovan" ? ChainId.KOVAN : ChainId.MAINNET;
useEffect(() => {
const getTokenList = async () => {
console.log(_tokenListUri);
try {
const tokenList = await fetch(_tokenListUri);
const tokenListJson = await tokenList.json();
const filteredTokens = tokenListJson.tokens.filter(function (t) {
return t.chainId === activeChainId;
});
const ethToken = WETH[activeChainId];
ethToken.name = "Ethereum";
ethToken.symbol = "ETH";
ethToken.logoURI =
"https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png";
const _tokenList = [ethToken, ...filteredTokens];
setTokenList(_tokenList);
const _tokens = tokenListToObject(_tokenList);
setTokens(_tokens);
} catch (e) {
console.log(e);
}
};
getTokenList();
}, [tokenListURI]);
const getTrades = async () => {
if (tokenIn && tokenOut && (amountIn || amountOut)) {
const pairs = arr => arr.map((v, i) => arr.slice(i + 1).map(w => [v, w])).flat();
const baseTokens = tokenList
.filter(function (t) {
return ["DAI", "USDC", "USDT", "COMP", "ETH", "MKR", "LINK", tokenIn, tokenOut].includes(t.symbol);
})
.map(el => {
return new Token(el.chainId, el.address, el.decimals, el.symbol, el.name);
});
const listOfPairwiseTokens = pairs(baseTokens);
const getPairs = async list => {
const listOfPromises = list.map(item => Fetcher.fetchPairData(item[0], item[1], selectedProvider));
return Promise.all(listOfPromises.map(p => p.catch(() => undefined)));
};
const listOfPairs = await getPairs(listOfPairwiseTokens);
let bestTrade;
if (exact === "in") {
setAmountInMax();
bestTrade = Trade.bestTradeExactIn(
listOfPairs.filter(item => item),
new TokenAmount(tokens[tokenIn], parseUnits(amountIn.toString(), tokens[tokenIn].decimals)),
tokens[tokenOut],
{ maxNumResults: 3, maxHops: 1 },
);
if (bestTrade[0]) {
setAmountOut(bestTrade[0].outputAmount.toSignificant(6));
} else {
setAmountOut();
}
} else if (exact === "out") {
setAmountOutMin();
bestTrade = Trade.bestTradeExactOut(
listOfPairs.filter(item => item),
tokens[tokenIn],
new TokenAmount(tokens[tokenOut], parseUnits(amountOut.toString(), tokens[tokenOut].decimals)),
{ maxNumResults: 3, maxHops: 1 },
);
if (bestTrade[0]) {
setAmountIn(bestTrade[0].inputAmount.toSignificant(6));
} else {
setAmountIn();
}
}
setTrades(bestTrade);
console.log(bestTrade);
}
};
useEffect(() => {
getTrades();
}, [tokenIn, tokenOut, debouncedAmountIn, debouncedAmountOut, slippageTolerance, selectedProvider]);
useEffect(() => {
if (trades && trades[0]) {
if (exact === "in") {
setAmountOutMin(trades[0].minimumAmountOut(slippageTolerance));
} else if (exact === "out") {
setAmountInMax(trades[0].maximumAmountIn(slippageTolerance));
}
}
}, [slippageTolerance, amountIn, amountOut, trades]);
const getBalance = async (_token, _account, _contract) => {
let newBalance;
if (_token === "ETH") {
newBalance = await selectedProvider.getBalance(_account);
} else {
newBalance = await makeCall("balanceOf", _contract, [_account]);
}
return newBalance;
};
const getAccountInfo = async () => {
if (tokens) {
const accountList = await selectedProvider.listAccounts();
if (tokenIn) {
const tempContractIn = new ethers.Contract(tokens[tokenIn].address, erc20Abi, selectedProvider);
const newBalanceIn = await getBalance(tokenIn, accountList[0], tempContractIn);
setBalanceIn(newBalanceIn);
let allowance;
if (tokenIn === "ETH") {
setRouterAllowance();
} else {
allowance = await makeCall("allowance", tempContractIn, [accountList[0], ROUTER_ADDRESS]);
setRouterAllowance(allowance);
}
}
if (tokenOut) {
const tempContractOut = new ethers.Contract(tokens[tokenOut].address, erc20Abi, selectedProvider);
const newBalanceOut = await getBalance(tokenOut, accountList[0], tempContractOut);
setBalanceOut(newBalanceOut);
}
}
};
usePoller(getAccountInfo, 6000);
const route = trades
? trades.length > 0
? trades[0].route.path.map(function (item) {
return item.symbol;
})
: []
: [];
const updateRouterAllowance = async newAllowance => {
setApproving(true);
try {
const tempContract = new ethers.Contract(tokens[tokenIn].address, erc20Abi, signer);
const result = await makeCall("approve", tempContract, [ROUTER_ADDRESS, newAllowance]);
console.log(result);
setApproving(false);
return true;
} catch (e) {
notification.open({
message: "Approval unsuccessful",
description: `Error: ${e.message}`,
});
}
};
const approveRouter = async () => {
const approvalAmount =
exact === "in"
? ethers.utils.hexlify(parseUnits(amountIn.toString(), tokens[tokenIn].decimals))
: amountInMax.raw.toString();
console.log(approvalAmount);
const approval = updateRouterAllowance(approvalAmount);
if (approval) {
notification.open({
message: "Token transfer approved",
description: `You can now swap up to ${amountIn} ${tokenIn}`,
});
}
};
const removeRouterAllowance = async () => {
const approvalAmount = ethers.utils.hexlify(0);
console.log(approvalAmount);
const removal = updateRouterAllowance(approvalAmount);
if (removal) {
notification.open({
message: "Token approval removed",
description: `The router is no longer approved for ${tokenIn}`,
});
}
};
const executeSwap = async () => {
setSwapping(true);
try {
let args;
const metadata = {};
let call;
const deadline = Math.floor(Date.now() / 1000) + timeLimit;
const path = trades[0].route.path.map(function (item) {
return item.address;
});
console.log(path);
const accountList = await selectedProvider.listAccounts();
const address = accountList[0];
if (exact === "in") {
const _amountIn = ethers.utils.hexlify(parseUnits(amountIn.toString(), tokens[tokenIn].decimals));
const _amountOutMin = ethers.utils.hexlify(ethers.BigNumber.from(amountOutMin.raw.toString()));
if (tokenIn === "ETH") {
call = "swapExactETHForTokens";
args = [_amountOutMin, path, address, deadline];
metadata.value = _amountIn;
} else {
call = tokenOut === "ETH" ? "swapExactTokensForETH" : "swapExactTokensForTokens";
args = [_amountIn, _amountOutMin, path, address, deadline];
}
} else if (exact === "out") {
const _amountOut = ethers.utils.hexlify(parseUnits(amountOut.toString(), tokens[tokenOut].decimals));
const _amountInMax = ethers.utils.hexlify(ethers.BigNumber.from(amountInMax.raw.toString()));
if (tokenIn === "ETH") {
call = "swapETHForExactTokens";
args = [_amountOut, path, address, deadline];
metadata.value = _amountInMax;
} else {
call = tokenOut === "ETH" ? "swapTokensForExactETH" : "swapTokensForExactTokens";
args = [_amountOut, _amountInMax, path, address, deadline];
}
}
console.log(call, args, metadata);
const result = await makeCall(call, routerContract, args, metadata);
console.log(result);
notification.open({
message: "Swap complete ?",
description: (
<>
<Text>{`Swapped ${tokenIn} for ${tokenOut}, transaction: `}</Text>
<Text copyable>{result.hash}</Text>
</>
),
});
setSwapping(false);
} catch (e) {
console.log(e);
setSwapping(false);
notification.open({
message: "Swap unsuccessful",
description: `Error: ${e.message}`,
});
}
};
const showSwapModal = () => {
setSwapModalVisible(true);
};
const handleSwapModalOk = () => {
setSwapModalVisible(false);
executeSwap();
};
const handleSwapModalCancel = () => {
setSwapModalVisible(false);
};
const insufficientBalance = balanceIn
? parseFloat(formatUnits(balanceIn, tokens[tokenIn].decimals)) < amountIn
: null;
const inputIsToken = tokenIn !== "ETH";
const insufficientAllowance = !inputIsToken
? false
: routerAllowance
? parseFloat(formatUnits(routerAllowance, tokens[tokenIn].decimals)) < amountIn
: null;
const formattedBalanceIn = balanceIn
? parseFloat(formatUnits(balanceIn, tokens[tokenIn].decimals)).toPrecision(6)
: null;
const formattedBalanceOut = balanceOut
? parseFloat(formatUnits(balanceOut, tokens[tokenOut].decimals)).toPrecision(6)
: null;
const metaIn =
tokens && tokenList && tokenIn
? tokenList.filter(function (t) {
return t.address === tokens[tokenIn].address;
})[0]
: null;
const metaOut =
tokens && tokenList && tokenOut
? tokenList.filter(function (t) {
return t.address === tokens[tokenOut].address;
})[0]
: null;
const cleanIpfsURI = uri => {
try {
return uri.replace("ipfs://", "https://ipfs.io/ipfs/");
} catch (e) {
console.log(e, uri);
return uri;
}
};
const logoIn = metaIn ? cleanIpfsURI(metaIn.logoURI) : null;
const logoOut = metaOut ? cleanIpfsURI(metaOut.logoURI) : null;
const rawPrice = trades && trades[0] ? trades[0].executionPrice : null;
const price = rawPrice ? rawPrice.toSignificant(7) : null;
const priceDescription = rawPrice
? invertPrice
? `${rawPrice.invert().toSignificant(7)} ${tokenIn} per ${tokenOut}`
: `${price} ${tokenOut} per ${tokenIn}`
: null;
const priceWidget = (
<Space>
<Text type="secondary">{priceDescription}</Text>
<Button
type="text"
onClick={() => {
setInvertPrice(!invertPrice);
}}
>
<RetweetOutlined />
</Button>
</Space>
);
const swapModal = (
<Modal title="Confirm swap" visible={swapModalVisible} onOk={handleSwapModalOk} onCancel={handleSwapModalCancel}>
<Row>
<Space>
<img src={logoIn} alt={tokenIn} width="30" />
{amountIn}
{tokenIn}
</Space>
</Row>
<Row justify="center" align="middle" style={{ width: 30 }}>
<span>↓</span>
</Row>
<Row>
<Space>
<img src={logoOut} alt={tokenOut} width="30" />
{amountOut}
{tokenOut}
</Space>
</Row>
<Divider />
<Row>{priceWidget}</Row>
<Row>
{trades && ((amountOutMin && exact === "in") || (amountInMax && exact === "out"))
? exact === "in"
? `Output is estimated. You will receive at least ${amountOutMin.toSignificant(
6,
)} ${tokenOut} or the transaction will revert.`
: `Input is estimated. You will sell at most ${amountInMax.toSignificant(
6,
)} ${tokenIn} or the transaction will revert.`
: null}
</Row>
</Modal>
);
return (
<Card
title={
<Space>
<img src="https://ipfs.io/ipfs/QmXttGpZrECX5qCyXbBQiqgQNytVGeZW5Anewvh2jc4psg" width="40" alt="uniswapLogo" />
<Typography>Uniswapper</Typography>
</Space>
}
extra={
<Button
type="text"
onClick={() => {
setSettingsVisible(true);
}}
>
<SettingOutlined />
</Button>
}
>
<Space direction="vertical">
<Row justify="center" align="middle">
<Card
size="small"
type="inner"
title={`From${exact === "out" && tokenIn && tokenOut ? " (estimate)" : ""}`}
extra={
<>
<img src={logoIn} alt={tokenIn} width="30" />
<Button
type="link"
onClick={() => {
setAmountOut();
setAmountIn(formatUnits(balanceIn, tokens[tokenIn].decimals));
setAmountOutMin();
setAmountInMax();
setExact("in");
}}
>
{formattedBalanceIn}
</Button>
</>
}
style={{ width: 400, textAlign: "left" }}
>
<InputNumber
style={{ width: "160px" }}
min={0}
size="large"
value={amountIn}
onChange={e => {
setAmountOut();
setTrades();
setAmountIn(e);
setExact("in");
}}
/>
<Select
showSearch
value={tokenIn}
style={{ width: "120px" }}
size="large"
bordered={false}
defaultValue={defaultToken}
onChange={value => {
console.log(value);
if (value === tokenOut) {
console.log("switch!", tokenIn);
setTokenOut(tokenIn);
setAmountOut(amountIn);
setBalanceOut(balanceIn);
}
setTokenIn(value);
setTrades();
setAmountIn();
setExact("out");
setBalanceIn();
}}
filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
optionFilterProp="children"
>
{tokenList.map(token => (
<Option key={token.symbol} value={token.symbol}>
{token.symbol}
</Option>
))}
</Select>
</Card>
</Row>
<Row justify="center" align="middle">
<Tooltip title={route.join("->")}>
<span>↓</span>
</Tooltip>
</Row>
<Row justify="center" align="middle">
<Card
size="small"
type="inner"
title={`To${exact === "in" && tokenIn && tokenOut ? " (estimate)" : ""}`}
extra={
<>
<img src={logoOut} width="30" alt={tokenOut} />
<Button type="text">{formattedBalanceOut}</Button>
</>
}
style={{ width: 400, textAlign: "left" }}
>
<InputNumber
style={{ width: "160px" }}
size="large"
min={0}
value={amountOut}
onChange={e => {
setAmountOut(e);
setAmountIn();
setTrades();
setExact("out");
}}
/>
<Select
showSearch
value={tokenOut}
style={{ width: "120px" }}
size="large"
bordered={false}
onChange={value => {
console.log(value, tokenIn, tokenOut);
if (value === tokenIn) {
console.log("switch!", tokenOut);
setTokenIn(tokenOut);
setAmountIn(amountOut);
setBalanceIn(balanceOut);
}
setTokenOut(value);
setExact("in");
setAmountOut();
setTrades();
setBalanceOut();
}}
filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
optionFilterProp="children"
>
{tokenList.map(token => (
<Option key={token.symbol} value={token.symbol}>
{token.symbol}
</Option>
))}
</Select>
</Card>
</Row>
<Row justify="center" align="middle">
{priceDescription ? priceWidget : null}
</Row>
<Row justify="center" align="middle">
<Space>
{inputIsToken ? (
<Button size="large" loading={approving} disabled={!insufficientAllowance} onClick={approveRouter}>
{!insufficientAllowance && amountIn && amountOut ? "Approved" : "Approve"}
</Button>
) : null}
<Button
size="large"
loading={swapping}
disabled={insufficientAllowance || insufficientBalance || !amountIn || !amountOut}
onClick={showSwapModal}
>
{insufficientBalance ? "Insufficient balance" : "Swap!"}
</Button>
{swapModal}
</Space>
</Row>
</Space>
<Drawer
visible={settingsVisible}
onClose={() => {
setSettingsVisible(false);
}}
width={500}
>
<Descriptions title="Details" column={1} style={{ textAlign: "left" }}>
<Descriptions.Item label="blockNumber">{blockNumber}</Descriptions.Item>
<Descriptions.Item label="routerAllowance">
<Space>
{routerAllowance ? formatUnits(routerAllowance, tokens[tokenIn].decimals) : null}
{routerAllowance > 0 ? <Button onClick={removeRouterAllowance}>Remove Allowance</Button> : null}
</Space>
</Descriptions.Item>
<Descriptions.Item label="route">{route.join("->")}</Descriptions.Item>
<Descriptions.Item label="exact">{exact}</Descriptions.Item>
<Descriptions.Item label="bestPrice">
{trades ? (trades.length > 0 ? trades[0].executionPrice.toSignificant(6) : null) : null}
</Descriptions.Item>
<Descriptions.Item label="nextMidPrice">
{trades ? (trades.length > 0 ? trades[0].nextMidPrice.toSignificant(6) : null) : null}
</Descriptions.Item>
<Descriptions.Item label="priceImpact">
{trades ? (trades.length > 0 ? trades[0].priceImpact.toSignificant(6) : null) : null}
</Descriptions.Item>
<Descriptions.Item label="slippageTolerance">
<InputNumber
defaultValue={defaultSlippage}
min={0}
max={100}
precision={2}
formatter={value => `${value}%`}
parser={value => value.replace("%", "")}
onChange={value => {
console.log(value);
const slippagePercent = new Percent(Math.round(value * 100).toString(), "10000");
setSlippageTolerance(slippagePercent);
}}
/>
</Descriptions.Item>
<Descriptions.Item label="amountInMax">{amountInMax ? amountInMax.toExact() : null}</Descriptions.Item>
<Descriptions.Item label="amountOutMin">{amountOutMin ? amountOutMin.toExact() : null}</Descriptions.Item>
<Descriptions.Item label="timeLimitInSeconds">
<InputNumber
min={0}
max={3600}
defaultValue={defaultTimeLimit}
onChange={value => {
console.log(value);
setTimeLimit(value);
}}
/>
</Descriptions.Item>
</Descriptions>
</Drawer>
</Card>
);
}
Example #22
| Source File: index.js From camel-store-admin with Apache License 2.0 | 4 votes |
|
render() {
const { setting } = this.props;
const { navTheme, primaryColor, layout, colorWeak } = setting;
const { collapse } = this.state;
return (
<Drawer
visible={collapse}
width={300}
onClose={this.togglerContent}
placement="right"
handler={
<div className={styles.handle}>
<Icon
type={collapse ? 'close' : 'setting'}
style={{
color: '#fff',
fontSize: 20,
}}
/>
</div>
}
onHandleClick={this.togglerContent}
style={{
zIndex: 999,
}}
>
<div className={styles.content}>
<Body title={formatMessage({ id: 'app.setting.pagestyle' })}>
<BlockChecbox
list={[
{
key: 'dark',
url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg',
title: formatMessage({ id: 'app.setting.pagestyle.dark' }),
},
{
key: 'light',
url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg',
title: formatMessage({ id: 'app.setting.pagestyle.light' }),
},
]}
value={navTheme}
onChange={value => this.changeSetting('navTheme', value)}
/>
</Body>
<ThemeColor
title={formatMessage({ id: 'app.setting.themecolor' })}
value={primaryColor}
onChange={color => this.changeSetting('primaryColor', color)}
/>
<Divider />
<Body title={formatMessage({ id: 'app.setting.navigationmode' })}>
<BlockChecbox
list={[
{
key: 'sidemenu',
url: 'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg',
title: formatMessage({ id: 'app.setting.sidemenu' }),
},
{
key: 'topmenu',
url: 'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg',
title: formatMessage({ id: 'app.setting.topmenu' }),
},
]}
value={layout}
onChange={value => this.changeSetting('layout', value)}
/>
</Body>
<List
split={false}
dataSource={this.getLayoutSetting()}
renderItem={this.renderLayoutSettingItem}
/>
<Divider />
<Body title={formatMessage({ id: 'app.setting.othersettings' })}>
<List.Item
actions={[
<Switch
size="small"
checked={!!colorWeak}
onChange={checked => this.changeSetting('colorWeak', checked)}
/>,
]}
>
{formatMessage({ id: 'app.setting.weakmode' })}
</List.Item>
</Body>
<Divider />
<CopyToClipboard
text={JSON.stringify(omit(setting, ['colorWeak']), null, 2)}
onCopy={() => message.success(formatMessage({ id: 'app.setting.copyinfo' }))}
>
<Button block icon="copy">
{formatMessage({ id: 'app.setting.copy' })}
</Button>
</CopyToClipboard>
<Alert
type="warning"
className={styles.productionHint}
message={
<div>
{formatMessage({ id: 'app.setting.production.hint' })}{' '}
<a
href="https://u.ant.design/pro-v2-default-settings"
target="_blank"
rel="noopener noreferrer"
>
src/defaultSettings.js
</a>
</div>
}
/>
</div>
</Drawer>
);
}
Example #23
| Source File: user-profile.jsx From virtuoso-design-system with MIT License | 4 votes |
|
render() {
return (
<>
<List
dataSource={[
{
name: 'Lily',
},
{
name: 'Lily',
},
]}
bordered
renderItem={item => (
<List.Item
key={item.id}
actions={[
<a onClick={this.showDrawer} key={`a-${item.id}`}>
View Profile
</a>,
]}
>
<List.Item.Meta
avatar={
<Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
}
title={<a href="https://ant.design/index-cn">{item.name}</a>}
description="Progresser XTech"
/>
</List.Item>
)}
/>
<Drawer
width={640}
placement="right"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
>
<p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
User Profile
</p>
<p className="site-description-item-profile-p">Personal</p>
<Row>
<Col span={12}>
<DescriptionItem title="Full Name" content="Lily" />
</Col>
<Col span={12}>
<DescriptionItem title="Account" content="[email protected]" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="City" content="HangZhou" />
</Col>
<Col span={12}>
<DescriptionItem title="Country" content="China??" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="Birthday" content="February 2,1900" />
</Col>
<Col span={12}>
<DescriptionItem title="Website" content="-" />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Message"
content="Make things as simple as possible but no simpler."
/>
</Col>
</Row>
<Divider />
<p className="site-description-item-profile-p">Company</p>
<Row>
<Col span={12}>
<DescriptionItem title="Position" content="Programmer" />
</Col>
<Col span={12}>
<DescriptionItem title="Responsibilities" content="Coding" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="Department" content="XTech" />
</Col>
<Col span={12}>
<DescriptionItem title="Supervisor" content={<a>Lin</a>} />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Skills"
content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."
/>
</Col>
</Row>
<Divider />
<p className="site-description-item-profile-p">Contacts</p>
<Row>
<Col span={12}>
<DescriptionItem title="Email" content="[email protected]" />
</Col>
<Col span={12}>
<DescriptionItem title="Phone Number" content="+86 181 0000 0000" />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Github"
content={
<a href="http://github.com/ant-design/ant-design/">
github.com/ant-design/ant-design/
</a>
}
/>
</Col>
</Row>
</Drawer>
</>
);
}
Example #24
| Source File: Sidebar.js From placement-portal with MIT License | 4 votes |
|
render() {
const {pathname} = this.props.location;
let selectedKey = [];
if (pathname != null) {
selectedKey.push(pathname);
}
const {collapsed, isMobile, onCollapse} = this.props;
return (
<>
{
isMobile ?
<Drawer
placement='left'
closable={false}
onClose={onCollapse}
visible={collapsed}
bodyStyle={{
backgroundColor: '#001529',
minHeight: '100%',
padding: '24px 0'
}}>
<Sider
width={250}
style={{minHeight: '100vh', height: '100%'}}
>
<Menu
theme="dark"
mode="inline"
selectedKeys={selectedKey}
style={{
height: '100vh'
}}
>
<Menu.Item key='/student/dashboard'>
<NavLink to="/student/dashboard"><Icon type="dashboard"/><span>Dashboard</span></NavLink>
</Menu.Item>
<Menu.Item key='/student/profile/announcements'>
<NavLink to="/student/profile/announcements"><Icon type="bar-chart"/><span>Announcements</span></NavLink>
</Menu.Item>
<SubMenu
key="Profile"
title={
<>
<Icon type="user"/>
<span>
Profile
</span>
</>
}
>
<Menu.Item key="/student/profile/edit">
<NavLink to="/student/profile/edit">Edit Profile</NavLink>
</Menu.Item>
<Menu.Item key="/student/profile/add_experience">
<NavLink to="/student/profile/add_experience">Add Experience</NavLink>
</Menu.Item>
<Menu.Item key="/student/profile/add_project">
<NavLink to="/student/profile/add_project">Add Project</NavLink>
</Menu.Item>
</SubMenu>
<SubMenu
key="Jobs"
title={
<>
<Icon type="bank"/>
<span>
Jobs
</span>
</>
}
>
<Menu.Item key="/student/jobs/application">
<NavLink to="/student/jobs/application">Current Openings</NavLink>
</Menu.Item>
<Menu.Item key="/student/jobs/manage">
<NavLink to="/student/jobs/manage">Manage Applications</NavLink>
</Menu.Item>
</SubMenu>
<SubMenu
key="Contact"
title={
<>
<Icon type="contacts"/>
<span>
Contact Placement Cell
</span>
</>
}
>
<Menu.Item key="/student/profile/query">
<NavLink to="/student/profile/query">Create Query</NavLink>
</Menu.Item>
<Menu.Item key="/student/profile/contact_us">
<NavLink to="/student/profile/contact_us">Contact Details</NavLink>
</Menu.Item>
</SubMenu>
<Menu.Item>
<NavLink to="/student/profile/report_bug"><Icon type="bug" /><span>Report Bugs</span></NavLink>
</Menu.Item>
</Menu>
</Sider>
</Drawer>
:
<Sider
trigger={null}
width={250}
collapsible
collapsed={collapsed}
style={{height: '100vh', position: 'fixed' }}
>
<Menu
theme="dark"
mode="inline"
selectedKeys={selectedKey}
style={{
height: '100%'
}}
>
<Menu.Item key='/student/dashboard'>
<NavLink to="/student/dashboard"><Icon type="dashboard"/><span>Dashboard</span></NavLink>
</Menu.Item>
<Menu.Item key='/student/profile/announcements'>
<NavLink to="/student/profile/announcements"><Icon type="bar-chart"/><span>Announcements</span></NavLink>
</Menu.Item>
<SubMenu
key="Profile"
title={
<>
<Icon type="user"/>
<span>
Profile
</span>
</>
}
>
<Menu.Item key="/student/profile/edit">
<NavLink to="/student/profile/edit">Edit Profile</NavLink>
</Menu.Item>
<Menu.Item key="/student/profile/add_experience">
<NavLink to="/student/profile/add_experience">Add Experience</NavLink>
</Menu.Item>
<Menu.Item key="/student/profile/add_project">
<NavLink to="/student/profile/add_project">Add Project</NavLink>
</Menu.Item>
</SubMenu>
<SubMenu
key="Jobs"
title={
<>
<Icon type="bank"/>
<span>
Jobs
</span>
</>
}
>
<Menu.Item key="/student/jobs/application">
<NavLink to="/student/jobs/application">Current Openings</NavLink>
</Menu.Item>
<Menu.Item key="/student/jobs/manage">
<NavLink to="/student/jobs/manage">Manage Applications</NavLink>
</Menu.Item>
</SubMenu>
<SubMenu
key="Contact"
title={
<>
<Icon type="contacts"/>
<span>
Contact Placement Cell
</span>
</>
}
>
<Menu.Item key="/student/profile/query">
<NavLink to="/student/profile/query">Create Query</NavLink>
</Menu.Item>
<Menu.Item key="/student/profile/contact_us">
<NavLink to="/student/profile/contact_us">Contact Details</NavLink>
</Menu.Item>
</SubMenu>
<Menu.Item>
<NavLink to="/student/profile/report_bug"><Icon type="bug" /><span>Report Bugs</span></NavLink>
</Menu.Item>
</Menu>
</Sider>
}
</>
);
}
Example #25
| Source File: new_incident_drawer.js From art-dashboard-ui with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<Drawer
title={"Report New Incident"}
width={"80%"}
onClose={this.onClose}
visible={this.state.visibility}
bodyStyle={{paddingBottom: 80}}
footer={null}
>
<Form layout="vertical" hideRequiredMark onFinish={this.on_form_submit}>
<Form.Item >
<div
style={{
textAlign: 'right',
}}
>
<Button type="primary" htmlType={"submit"}>
Submit
</Button>
</div>
</Form.Item>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="incident_start"
label="Incident Start Date (Default Current UTC)(Optional)"
rules={[{ required: false, message: 'Please enter the incident start date' }]}
>
<DatePicker showTime={true} style={{width: "80%", paddingRight: "10%"}} placeholder={"Incident start date (Default Current UTC)"} format={"YYYY-MM-DD HH:mm:ss"} onChange={this.start_date_on_change}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="incident_end"
label="Incident End Date (Optional)"
rules={[{ required: false, message: 'Please enter the incident end date' }]}
>
<DatePicker showTime={true} style={{width: "80%", paddingRight: "10%"}} placeholder={"Incident end date"} format={"YYYY-MM-DD HH:mm:ss"} onChange={this.end_date_on_change}/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<Form.Item
name="title"
label="Title"
rules={[{ required: true, message: 'Please enter the incident title' }]}
>
<TextArea
placeholder="Please enter incident title"
autoSize={{maxRows: 1}}
allowClear={true}
showCount={true}
maxLength={100}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={10} style={{margin: "10px"}}>
<Form.Item
name="description"
label="Description"
rules={[{ required: true, message: 'Please enter the incident description' }]}
>
<TextArea
placeholder="Please enter incident description"
autoSize={{minRows: 1, maxRows: 20}}
allowClear={true}
showCount={true}
maxLength={20000}
onChange={this.update_editable_description}
/>
</Form.Item>
</Col>
<Col span={10} style={{margin: "10px"}}>
<p>Preview</p>
<div style={{ borderStyle: "groove", padding: "10px", maxHeight: "450px", overflowY: "auto"}}>
<ReactMarkdown source={this.state.data["description"]} escapeHtml={false}/>
</div>
</Col>
</Row>
<Row gutter={16}>
<Col span={10} style={{margin: "10px"}}>
<Form.Item
name="impact"
label="Impact"
rules={[{ required: false, message: 'Please enter the incident impact' }]}
>
<TextArea
placeholder="Please enter incident impact"
autoSize={{maxRows: 20}}
allowClear={true}
showCount={true}
maxLength={20000}
onChange={this.update_editable_impact}
/>
</Form.Item>
</Col>
<Col span={10} style={{margin: "10px"}}>
<p>Preview</p>
<div style={{ borderStyle: "groove", padding: "10px", maxHeight: "450px", overflowY: "auto"}}>
<ReactMarkdown source={this.state.data["impact"]} escapeHtml={false}/>
</div>
</Col>
</Row>
<Row gutter={16}>
<Col span={10} style={{margin: "10px"}}>
<Form.Item
name="cause"
label="Cause"
rules={[{ required: false, message: 'Please enter the incident cause' }]}
>
<TextArea
placeholder="Please enter incident cause"
autoSize={{maxRows: 20}}
allowClear={true}
showCount={true}
maxLength={20000}
onChange={this.update_editable_cause}
/>
</Form.Item>
</Col>
<Col span={10} style={{margin: "10px"}}>
<p>Preview</p>
<div style={{ borderStyle: "groove", padding: "10px", maxHeight: "450px", overflowY: "auto"}}>
<ReactMarkdown source={this.state.data["cause"]} escapeHtml={false}/>
</div>
</Col>
</Row>
<Row gutter={16}>
<Col span={10} style={{margin: "10px"}}>
<Form.Item
name="remedy"
label="Remedy"
rules={[{ required: false, message: 'Please enter the incident remedy' }]}
>
<TextArea
placeholder="Please enter incident remedy"
autoSize={{maxRows: 20}}
allowClear={true}
showCount={true}
maxLength={20000}
onChange={this.update_editable_remedy}
/>
</Form.Item>
</Col>
<Col span={10} style={{margin: "10px"}}>
<p>Preview</p>
<div style={{ borderStyle: "groove", padding: "10px", maxHeight: "450px", overflowY: "auto"}}>
<ReactMarkdown source={this.state.data["remedy"]} escapeHtml={false}/>
</div>
</Col>
</Row>
<Row gutter={16}>
<Col span={10} style={{margin: "10px"}}>
<Form.Item
name="action_items"
label="Action Items"
rules={[{ required: false, message: 'Please enter the incident action items' }]}
>
<TextArea
placeholder="Please enter incident action items"
autoSize={{maxRows: 20}}
allowClear={true}
showCount={true}
maxLength={20000}
onChange={this.update_editable_action_items}
/>
</Form.Item>
</Col>
<Col span={10} style={{margin: "10px"}}>
<p>Preview</p>
<div style={{ borderStyle: "groove", padding: "10px", maxHeight: "450px", overflowY: "auto"}}>
<ReactMarkdown source={this.state.data["action_items"]} escapeHtml={false}/>
</div>
</Col>
</Row>
</Form>
</Drawer>
</div>
);
}
Example #26
| Source File: index.js From placement-portal with MIT License | 4 votes |
|
render(){
const {isMobile, studentProfiles, loading} = this.props;
const columns = [
{
title: "Student Name",
dataIndex: 'first_name',
key: "name",
fixed: 'left',
align: 'center',
width: 200,
render : (text, row) =>
text + " " +row.last_name
},
{
title: "CPI",
dataIndex: 'cpi',
key: 'cpi',
align: 'center',
},
{
title: "Year of study",
dataIndex: 'year_of_study',
key: 'year_of_study',
align: 'center',
},
{
title: "Interests",
dataIndex: 'interests',
key: 'interests',
align: 'center',
width: 300,
render: interests =>
interests.map((tag) => <Tag color='blue' key={tag} style={{margin: 5}}>{tag}</Tag>)
},
{
title: "Skills",
dataIndex: 'skills',
key: 'skills',
align: 'center',
width: 300,
render: skills =>
skills.map((tag) => <Tag color='blue' key={tag} style={{margin: 5}}>{tag}</Tag>)
},
{
title: "More details",
dataIndex: '_id',
key: 'id',
align: 'center',
fixed: 'right',
width: 150,
render: (id) =>
<Button
type = 'primary '
onClick = {() => this.handleDetails(id)}
size = "large"
shape = "circle"
icon = "info-circle"
/>
},
];
const tableProps = {
columns,
dataSource: studentProfiles,
loading,
rowKey: '_id',
scroll: {x: 900},
bordered: true
};
return(
<div>
{typeof studentProfiles !== 'undefined' ?
<Drawer
width={isMobile ? '100vw' : '40vw'}
placement="right"
onClose={this.onClose}
visible={this.state.visible}
>
<Row type="flex" justify="center">
<p style={{marginBottom: 24, fontSize: 24}}>Student Profile</p>
</Row>
<Row type='flex' justify='center'>
<Col>
<Row type="flex" justify='center' style={{margin: 10}}>
<Avatar src={studentProfiles[this.state.index].avatar_link} size={64}/>
</Row>
<Row type="flex" justify='center'>
<Typography.Title level={4}>
{studentProfiles[this.state.index].first_name} {studentProfiles[this.state.index].last_name}
</Typography.Title>
</Row>
</Col>
</Row>
<Row type='flex' justify='center' style={{textAlign: 'center'}}>
<Typography.Text type='secondary'>
{commonConstants.yearToTextMap[studentProfiles[this.state.index].year_of_study] + " "}
{commonConstants.courseToTextMap[studentProfiles[this.state.index].course_type]}
<br/>
{commonConstants.branchToTextMap[studentProfiles[this.state.index].branch]}
</Typography.Text>
</Row>
<Divider/>
<div
style={{
margin: "12px",
padding: 24,
background: "#fff"
}}
>
<DescriptionItem title="CPI" content={studentProfiles[this.state.index].cpi}/>
<DescriptionItem title="CV Link" content={<a href={studentProfiles[this.state.index].cv[0].link} target={'_blank'}>Click Here</a>}/>
<DescriptionItem title="Skills" content={studentProfiles[this.state.index].skills.map((tag) =>
<Tag color='blue' key={tag} style={{margin: 5}}>{tag}</Tag>)}/>
<DescriptionItem title="Interests" content={studentProfiles[this.state.index].interests.map((interest) =>
<Tag color='blue' key={interest} style={{margin: 5}}>{interest}</Tag>)}/>
</div>
<Divider/>
<div
style={{
margin: "12px",
padding: 24,
background: "#fff"
}}
>
<Tabs defaultActivity="1">
<TabPane tab="Experience" key="1">
{studentProfiles[this.state.index]["experience"].length > 0 ?
<Experience data={studentProfiles[this.state.index]["experience"]} loading={false}/> :
<Empty description={false}/>
}
</TabPane>
<TabPane tab="Projects" key="2">
{studentProfiles[this.state.index]["projects"].length > 0 ?
<Project data={studentProfiles[this.state.index]["projects"]} loading={false}/> :
<Empty description={false}/>
}
</TabPane>
</Tabs>
</div>
</Drawer> :
null
}
<Row type='flex' justify='center' style={{margin: 24}}>
<Typography.Title>
Student Profiles
</Typography.Title>
</Row>
<Row type='flex' justify='center'>
<Col md={23} xs={24} sm={24}>
<Table {...tableProps}/>
</Col>
</Row>
</div>
)
}
Example #27
| Source File: index.js From ncovis-2020 with MIT License | 4 votes |
|
function CommentPanel({ list, isOpen, setOpen }) {
return (
<Container>
<An id="story" />
<h1>发现</h1>
<Row>
<Intro>
<p>
通过该分析系统你可以短时间内就了解这段时间发生的一些和疫情有关的事。同时能找到很多有意思的现象和问题，比如下面的这些：
</p>
<ul>
<li>
在疫情发展的过程中，可能是因为人们无聊，出现了哪些奇葩话题?
<ul>
<li> 拉屎拉到干净是一种怎样的体验？</li>
<li>
加入有一个按钮，按下去会获得 10 亿元，但是 500
年后人类会毁灭，你按吗?
</li>
</ul>
</li>
<li>
有哪些热度特别高的超级话题?
<ul>
<li>科比去世:该话题的热度超过了4月4号全国哀悼日的热度</li>
<li>美股熔断</li>
<li>肖战事件</li>
<li>塞尔维亚总统哽咽着请求中国援助</li>
<li>孙杨事件</li>
</ul>
</li>
<li>
人们对疫情变化的认识的变化情况：蝙蝠 -{">"} 双⻩连 -{">"} 中药 -
{">"}
推测来自于美国
</li>
<li>
中国疫情发展的重要阶段和关键时间点：天津大学宣布研制出口服疫苗 -
{">"}
新冠对中国发展对意义
</li>
<li>其他国家的疫情发展情况和关键时间点、关键事件。</li>
</ul>
<p>
下面有一些用该平台分析出的文章。你可以自己去发现问题，也可以回答上面问题中的任何一个。注意问题不用太大，可以很小，
但是一定要和疫情有关。这里你可以通过投稿提出问题和自己的看法，通过审核的文章我们会放在该网站上。
</p>
<VoteButton type="primary" onClick={() => setOpen(true)}>
我要投稿
</VoteButton>
</Intro>
<VisImage src={newsImage} />
</Row>
<List>
{list
.sort((a, b) => b.createTime - a.createTime)
.map((d) => (
<Card {...d} key={d.id} />
))}
</List>
<Drawer
title="投稿"
width={360}
onClose={() => setOpen(false)}
visible={isOpen}
bodyStyle={{ paddingBottom: 80 }}
style={{ zIndex: 1010 }}
>
<p>你需要通过邮件发送以下的信息：</p>
<ul>
<li>文章标题</li>
<li>一小段文章介绍</li>
<li>文章链接</li>
<li>笔名</li>
</ul>
<p>收件地址为：[email protected]</p>
<p>当你发送文章，我们会尽快对其进行审核，请耐心等待！</p>
</Drawer>
</Container>
);
}
Example #28
| Source File: Sidenav.js From placement-portal with MIT License | 4 votes |
|
render(){
const {pathname} = this.props.location;
const {sider_collapse} = this.state;
let selectedKey = [];
if (pathname != null) {
let path_array = pathname.split('/')
let key = path_array[2]
selectedKey.push(key);
}
const Draw =
<Drawer>
<div style={{margin: 20}}>
<Row type='flex' justify='center' align='middle'>
<Col>
<img src={Logo} alt="Logo" width='60px'/>
</Col>
</Row>
</div>
<Menu
theme = 'dark'
mode = 'inline'
selectedKeys = {selectedKey}
style={{
height: '100%',
borderRight: 0
}}
>
<MenuItem key = 'dashboard'>
<Link to = '/company/dashboard'>
<Icon type = 'dashboard'/>
<span>Dashboard</span>
</Link>
</MenuItem>
<MenuItem key = 'createjob'>
<Link to = '/company/createjob'>
<Icon type = 'form'/>
<span>Create Jobs</span>
</Link>
</MenuItem>
<MenuItem key = 'managejobs'>
<Link to = '/company/managejobs'>
<Icon type = 'edit'/>
<span>Manage Jobs</span>
</Link>
</MenuItem>
<MenuItem key = 'studentprofiles'>
<Link to = '/company/studentprofiles'>
<Icon type = 'idcard'/>
<span>Student Profiles</span>
</Link>
</MenuItem>
<MenuItem key = 'contactus'>
<Link to = '/company/contactus'>
<Icon type = 'contacts'/>
<span>Contact Us</span>
</Link>
</MenuItem>
</Menu>
</Drawer>;
const Side =
<Sider
width={250}
style={{
minHeight: '100vh'
}}
breakpoint={'md'}
onBreakpoint = {this.handleBreakpoint}
>
<div style={{margin: 20}}>
<Row type='flex' justify='center' align='middle'>
<Col>
<img src={Logo} alt="Logo" width='60px'/>
</Col>
</Row>
</div>
<Menu
theme = 'dark'
mode = 'inline'
selectedKeys = {selectedKey}
style={{
height: '100%',
borderRight: 0
}}
>
<MenuItem key = 'dashboard'>
<Link to = '/company/dashboard'>
<Icon type = 'dashboard'/>
<span>Dashboard</span>
</Link>
</MenuItem>
<MenuItem key = 'createjob'>
<Link to = '/company/createjob'>
<Icon type = 'form'/>
<span>Create Jobs</span>
</Link>
</MenuItem>
<MenuItem key = 'managejobs'>
<Link to = '/company/managejobs'>
<Icon type = 'edit'/>
<span>Manage Jobs</span>
</Link>
</MenuItem>
<MenuItem key = 'studentprofiles'>
<Link to = '/company/studentprofiles'>
<Icon type = 'idcard'/>
<span>Student Profiles</span>
</Link>
</MenuItem>
<MenuItem key = 'contactus'>
<Link to = '/company/contactus'>
<Icon type = 'contacts'/>
<span>Contact Us</span>
</Link>
</MenuItem>
</Menu>
</Sider>;
return(
<div>
{sider_collapse ? Draw : Side}
</div>
)
}
Example #29
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function IncomingCall({
visible = false,
onCancel = () => {},
onOk = () => {},
caller = {},
}) {
const { t } = useTranslation()
const id = caller.userId
const shortName = capitalizeFirstLetter(
firstCharacterOfEachString(caller.nickname)
)
const name = caller.nickname
return (
<Drawer
title={
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
>
{t('src.components.IC')}
</div>
}
placement="bottom"
closable={false}
visible={visible}
height="100%"
footer={
<div
style={{
display: 'flex',
justifyContent: 'space-around',
padding: '12px 0',
}}
>
<Button
style={{
border: 0,
justifyContent: 'center',
display: 'flex',
alignItems: 'center',
backgroundColor: REJECT,
width: 50,
height: 50,
borderRadius: 50 / 2,
}}
icon={
<Decline
style={{ position: 'absolute', height: 25 }}
/>
}
type="ghost"
onClick={onCancel}
/>
<Button
style={{
border: 0,
justifyContent: 'center',
display: 'flex',
alignItems: 'center',
backgroundColor: ACCEPT,
width: 50,
height: 50,
borderRadius: 50 / 2,
}}
icon={
<Phone
style={{ position: 'absolute', height: 25 }}
/>
}
type="ghost"
onClick={onOk}
/>
</div>
}
bodyStyle={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar
className="pulse"
shape="circle"
size={128}
src={DEFAULT_IMG}
>
{shortName}
</Avatar>
<Title style={{ margin: '10px 0 0' }} level={3}>
{name}
</Title>
<Text>{id}</Text>
</Drawer>
)
}
