@material-ui/icons#Remove JavaScript Examples
The following examples show how to use
@material-ui/icons#Remove.
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: App.js From covid-vaccine-notification-system with BSD 3-Clause "New" or "Revised" License | 6 votes |
|
tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <Delete {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <Save {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
}
Example #2
| Source File: editLayoutModal.jsx From GraphVega with MIT License | 4 votes |
|
EditLayoutModal = props => {
const [show, setShow] = useState(false);
const handleClose = () => {
setShow(false);
setTimeout(() => {
props.onClose();
}, 500);
};
const handleShow = () => setShow(true);
return (
<>
<Button onClick={handleShow} variant="outlined" color="primary">
Edit Layout
</Button>
<Modal
size="lg"
show={show}
onHide={handleClose}
style={{ background: "rgba(0, 0, 0,0.5)" }}
>
<Modal.Header closeButton>
<Modal.Title>Edit Layout</Modal.Title>
</Modal.Header>
<Modal.Body>
<Row>
<Col lg={6}>
<center>
<h5>Layout options</h5>
</center>
<Table size="sm">
<tbody>
{props.layoutOptions.map((item, index) => {
return (
<tr key={index}>
<td>{item}</td>
<th style={{ textAlign: "right" }}>
<Button
variant="outlined"
color="primary"
size="small"
onClick={() => {
props.onAddLayoutItem(index);
}}
>
<Add fontSize="small"/>
</Button>
</th>
</tr>
);
})}
</tbody>
</Table>
</Col>
<Col lg={6}>
<center>
<h5>Current Layout</h5>
</center>
<Table size="sm">
<tbody>
{props.layout.map((item, index) => {
return (
<tr key={index}>
<td>{item}</td>
<th style={{ textAlign: "right" }}>
<Button
variant="outlined"
color="secondary"
size="small"
onClick={() => {
props.onRemoveLayoutItem(index);
}}
>
<Remove fontSize="small"/>
</Button>
<ButtonGroup>
<Button
size="small"
onClick={() => {
props.onMoveUp(index);
}}
>
<ArrowUpward fontSize="small"/>
</Button>
<Button
size="small"
onClick={() => {
props.onMoveDown(index);
}}
>
<ArrowDownward fontSize="small"/>
</Button>
</ButtonGroup>
</th>
</tr>
);
})}
</tbody>
</Table>
</Col>
</Row>
</Modal.Body>
<Modal.Footer>
<Button onClick={handleClose}>
Close
</Button>
 
<Button
variant="outlined"
color="primary"
onClick={() => {
setShow(false);
props.onSaveLayout();
}}
>
Save
</Button>
</Modal.Footer>
</Modal>
</>
);
}
Example #3
| Source File: option.jsx From GraphVega with MIT License | 4 votes |
|
Option = props => {
const [show, setShow] = useState(false);
const handleClose = () => {
setShow(false);
setTimeout(() => {
}, 500);
};
const handleShow = () => setShow(true);
const [quantity, setQuantity] = useState(0);
const add = () => {
setShow(false);
const position = quantity > 0 ? "long" : "short";
props.onAddPosition(props.index, props.option["option_type"], position, quantity);
// const quantity = 0;
setQuantity(0);
};
const getColor = () => {
return props.option.change >= 0 ? "text-success" : "text-danger";
};
const setSign = () => {
return props.option.change > 0 ? "+" : "";
};
// const setBackground = () => {
// if(props.option.option_type === "put"){
// return props.option.strike > props.quote.last ? "#E0EBFD":"white";
// }
// else{
// return props.option.strike > props.quote.last ? "white": "#E0EBFD";
// }
// };
const setBorder = idx => {
if(props.option.option_type==="put" && idx === props.layout.length-1) {
const style = {};
style.borderRight = props.option.strike > props.quote.last ? "6px solid #3f51b5":"";
return style;
}
else if (props.option.option_type==="call" && idx === 0){
const style = {};
style.borderLeft = props.option.strike < props.quote.last ? "10px solid #3f51b5":"";
return style;
}
};
const displayItem = data => {
return data ? data : "N/A";
}
const addOption = () => {
setQuantity(quantity + 1);
}
const removeOption = () => {
setQuantity(quantity - 1);
}
const changeQuantity = (event, value) => {
var quantity = Number(event.target.value);
setQuantity(quantity)
}
const setButtonColor = () => {
if(quantity >= 0)
return "primary";
else
return "secondary";
}
return (
<>
<tr style={{ textAlign: 'center'}} onClick={handleShow}>
{props.layout.map((item, index) => {
return <td style={setBorder(index)}>{displayItem(props.option[item.toString()])}</td>;
})}
</tr>
<Modal
size="lg"
show={show}
onHide={handleClose}
style={{ background: "rgba(0, 0, 0,0.5)" }}
>
<Modal.Body closeButton>
<Row>
<Col
lg={{ span: 12 }}
style={{ clear: 'both', textAlign: 'center' }}
>
<h4 style={{ display: 'inline' }}>
<b>{props.option.description}</b>
</h4>
<br />
<h4 style={{ display: 'inline' }}>{props.option.last}</h4>
<h5 className={getColor()} style={{ display: 'inline' }}>
{setSign()}{props.option.change}
</h5>
<h5 className={getColor()} style={{ display: 'inline' }}>
({setSign()}{props.option.change_percentage}%)
</h5>
</Col>
</Row>
<br />
<Row style={{ fontSize: '0.8rem' }}>
<Col lg={{ span: 5, offset: 1 }}>
<Table>
<tbody>
<tr>
<td style={{ textAlign: 'left' }}>Bid</td>
<td style={{ textAlign: 'right' }}>
<b>{props.option.bid}</b>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>Ask</td>
<td style={{ textAlign: 'right' }}>
<b>{props.option.ask}</b>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>Open</td>
<td style={{ textAlign: 'right' }}>
<b>{props.option.open}</b>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>Previous Close</td>
<td style={{ textAlign: 'right' }}>
<b>{props.option.prevclose}</b>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>Open Interest</td>
<td style={{ textAlign: 'right' }}>
<b>{props.option.open_interest}</b>
</td>
</tr>
</tbody>
</Table>
</Col>
<Col lg={{ span: 5 }}>
<Table>
<tbody>
<tr>
<td style={{ textAlign: 'left' }}>Implied Volatility</td>
<td style={{ textAlign: 'right' }}>
<b>{props.option.greeks.mid_iv}</b>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>Delta</td>
<td style={{ textAlign: 'right' }}>
<b> {props.option.greeks.delta}</b>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>Gamma</td>
<td style={{ textAlign: 'right' }}>
<b>{props.option.greeks.gamma}</b>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>Theta</td>
<td style={{ textAlign: 'right' }}>
<b> {props.option.greeks.theta}</b>
</td>
</tr>
<tr>
<td style={{ textAlign: 'left' }}>Vega</td>
<td style={{ textAlign: 'right' }}>
<b> {props.option.greeks.vega}</b>
</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
</Modal.Body>
<Modal.Footer>
<IconButton color="secondary" >
<Remove onClick={removeOption}/>
</IconButton>
<TextField
size="small"
value={quantity}
defaultValue={0}
onChange={changeQuantity}
inputProps={{ maxLength: "4px" }}
label="# of contracts"
variant="outlined"
/>
<IconButton color="primary">
<Add onClick={addOption}/>
</IconButton>
<Button
color={setButtonColor()}
variant="outlined"
size="small"
disabled={quantity===0}
onClick={() => add()}
>
{quantity >= 0 ? "Buy" : "Sell"}
</Button>
<Button
onClick={handleClose}
size="small">
<b>Close</b>
</Button>
</Modal.Footer>
</Modal>
</>
);
}
