What is MobileTearSheet and where is it?
By all means copy the one from the docs site. (it's just an image.)
Take it:
https://raw.githubusercontent.com/callemall/material-ui/master/docs/src/app/components/MobileTearSheet.js
Here is my working version (in one file) you can drop into you project.
If you want to use this source, please up vote this answer
MobileTearSheet.js
import React, from 'react';
const MobileTearSheet = React.createClass({
getDefaultProps() {
return { height: "100%" }
},
render:function() {
const styles = {
root: {
marginBottom: 24,
marginRight: 24,
maxWidth: 360,
width: '100%',
},
container: {
border: 'solid 1px #d9d9d9',
borderBottom: 'none',
height: this.props.height,
overflow: 'hidden',
},
bottomTear: {
display: 'block',
position: 'relative',
marginTop: -10,
maxWidth: 360,
},
};
return (
<div style={Object.assign({},styles.root,this.props.style||{})}>
<div style={styles.container}>
{this.props.children}
</div>
<div style={styles.bottomTear}>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 360 10" enableBackground="new 0 0 360 10">
<polygon fill="#DAD9D9" points={`359,0 359,7.5 352.5,0.5 345,8.5 337.5,0.5 330,8.5 322.5,0.5 315,8.5 307.5,0.5 300,8.5 292.5,0.5
285,8.5 277.5,0.5 270,8.5 262.5,0.5 255,8.5 247.5,0.5 240,8.5 232.5,0.5 225,8.5 217.5,0.5 210,8.5 202.5,0.5 195,8.5 187.5,0.5
180,8.5 172.5,0.5 165,8.5 157.5,0.5 150,8.5 142.5,0.5 135,8.5 127.5,0.5 120,8.5 112.5,0.5 105,8.5 97.5,0.5 90,8.5 82.5,0.5
75,8.5 67.5,0.5 60,8.5 52.5,0.5 45,8.5 37.5,0.5 30,8.5 22.5,0.5 15,8.5 7.5,0.5 1,7.5 1,0 0,0 0,10 7.5,2 15,10 22.5,2 30,10
37.5,2 45,10 52.5,2 60,10 67.5,2 75,10 82.5,2 90,10 97.5,2 105,10 112.5,2 120,10 127.5,2 135,10 142.5,2 150,10 157.5,2 165,10
172.5,2 180,10 187.5,2 195,10 202.5,2 210,10 217.5,2 225,10 232.5,2 240,10 247.5,2 255,10 262.5,2 270,10 277.5,2 285,10
292.5,2 300,10 307.5,2 315,10 322.5,2 330,10 337.5,2 345,10 352.5,2 360,10 360,0 `}/>
</svg>
</div>
</div>
);
}
})
export default MobileTearSheet;
For usage see: material-ui list example
I found this question while debugging why the List example code wasn't compiling. Don't worry you can just replace the tags with a and it should work just fine!
Related
I am working on a food app that adds items to a cart then calculates the total amount. I am trying to implement a reducer as opposed to having multiple instances of state hooks and I am running into this error when trying to click open my cart modal.
I know the items are being added successfully to the cart because when I add them, then inspect in the console and remove the "display: none " property from my modal and see the added food items there. For some reason its specifically when I click my cart to see the modal is when I receive the error.
The error message is saying the error is located in my app.js file where I assign define the cartFoods prop to my Cartmodal component
App.js Component
import logo from "./logo.svg";
import "./App.css";
import NavHeader from "./NavHeader";
import { useState, useEffect, useReducer } from "react";
import FoodList from "./FoodList";
import CartModal from "./CartModal";
import "animate.css";
function App() {
const [foods, setFoods] = useState([
{
food: "sushi roll",
description: "fresh tuna topped with eel sauce and avocado",
price: "14.99",
quantity: 1,
},
{
food: "pizza",
description: "baked to a crisp with mozarrella, basil and tomato sauce",
price: "9.99",
quantity: 1,
},
{
food: "special fried rice",
description: "cooked with onions , shrimp , chicken",
price: "19.99",
quantity: 1,
},
{
food: "tacos",
description:
"choice of either ,shrimp , chicken, or steak, topped with pico de gallo",
price: "15.99",
quantity: 1,
},
]);
const [totalFoodAmount, setTotalFoodAmount] = useState(0);
// const [modalDisplay, setModalDisplay] = useState("none");
const [totalPrice, setTotalPrice] = useState(0);
const [cartFoods, setCartFoods] = useState([]);
const [cartItem, setCartItem] = useState({});
const [modalDisplay, setModalDisplay] = useState("none");
const [amountValue, setAmountValue] = useState(0);
function foodReducer(state, action) {
if (action.type === "ADD_CART_ITEMS") {
return { cartFoodItems: state.cartFoodItems.concat(action.val) };
}
}
const [foodState, dispatch] = useReducer(foodReducer, {
modalDisplay: "none",
totalFoodPrice: 0,
cartFoodItems: [],
});
function setDisplay() {
dispatch({ type: "ADD_MODAL_DISPLAY" });
setModalDisplay("flex");
}
function removeModal() {
dispatch({ type: "REMOVE_MODAL_DISPLAY" });
setModalDisplay("none");
}
function setQuantity(e) {
console.log(e.target.value);
setAmountValue(e.target.value);
}
function addFood(food) {
console.log(food);
let newFoodItem = { ...food, quantity: amountValue };
// setCartFoods((prevState) => cartFoods.concat(newFoodItem));
dispatch({ type: "ADD_CART_ITEMS", val: newFoodItem });
// ask slavo specific question on why state doesnt update right away when you console.log(cartFoods) inside the function
}
useEffect(() => {
let total = foodState.cartFoodItems.reduce(function (a, b) {
return a + Number(b.quantity);
}, 0);
setTotalFoodAmount(total);
foodState.cartFoodItems.map((food) =>
setTotalPrice(totalPrice + food.price * food.quantity)
);
}, [foodState]);
return (
<div className="App">
<NavHeader cartQuantity={totalFoodAmount} setDisplay={setDisplay} />
<FoodList foodList={foods} addFood={addFood} setAmount={setQuantity} />
<CartModal
cartFoods={foodState.cartFoodItems}
display={modalDisplay}
closeModal={removeModal}
totalPrice={totalPrice}
/>
</div>
);
}
export default App;
Cart.js component
import React from "react";
export default function Cart(props) {
return (
<div
style={{
display: "flex",
marginRight: "35px",
border: "1px solid lightgray",
padding: "5px",
borderRadius: "5px",
margin: "10px",
}}
className="cart-section"
onClick={props.setDisplay}
>
<div style={{ marginRight: "20px" }}>
<h4>Your Cart</h4>
</div>
<div style={{ position: "relative", top: "0vh" }}>
<h4>Quantity: {props.cartQuantity}</h4>
</div>
</div>
);
}
CartModal.js
import React from "react";
import "animate.css";
import { CSSTransition } from "react-transition-group";
export default function CartModal(props) {
return (
<div
style={{
background: "#000000a6",
width: "100vw",
height: "100vh",
position: "fixed",
top: "0",
left: "0",
overflow: "scroll",
display: props.display,
justifyContent: "center",
alignItems: "center",
}}
>
<div
style={{
background: "white",
padding: "30px",
minHeight: "60vh",
minWidth: "75vw",
borderRadius: "10px",
}}
className="cart-modal"
>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<h3 onClick={props.closeModal}>x</h3>
</div>
<h4 style={{ textAlign: "center" }}>Your Cart</h4>
{props.cartFoods.length === 0 ? (
<h1>There are no Items in your cart</h1>
) : (
props.cartFoods.map((food, index) => (
<div
style={{
display: "flex",
justifyContent: "space-between",
borderBottom: "2px solid lightgray",
}}
key={index}
>
<div style={{ width: "10vh" }}>
<h3>{food.food}</h3>
<p>{food.price}</p>
<p>Quantity: {food.quantity}</p>
</div>
<div style={{ display: "flex" }}>
<button style={{ margin: "10px", maxHeight: "20px" }}>-</button>
<button style={{ margin: "10px", maxHeight: "20px" }}>+</button>
</div>
</div>
))
)}
<h2>Price: ${props.totalPrice}</h2>
</div>
</div>
);
}
I found a simple application with React and draw2D.
The dashbox is the div and the canvas.
The circle is a
draw2d.shape.basic.Circle({
x: 40,
y: 10,
stroke: 3
})
How to change the code to draw the circle inside the box dashed (the canvas)?
https://codesandbox.io/s/exciting-cray-97g6r?file=/src/App.js
thanks.
The first solution
<span>
<p>Avec canvas2</p>
<div ref={inputRef} id="canvas"
style={{ height: 200, width: 300, border: "dashed brown",position:"relative" }}/>
</span>
Only add position:"relative", to the div.
I improve this solution again.
componentDidMount() {
this.canvas = new draw2d.Canvas("canvas", 9000, 9000));
this.canvas.add(
new draw2d.shape.basic.Circle({
x: 40,
y: 10,
stroke: 3
})
);
}
render() {
return (
<span>
<p>Avec canvas2</p>
<div
id="canvas"
style={{ height: 600, width: 600, border: "dashed brown" }}
/>
</span>
);
}
Now, we have a big picture inside a window ..
I need to create the same view of TextInput like on photo. Any ideas?
link to photo:
Try using react-native-linear-gradient. i.e.
<LinearGradient
style={styles.container}
locations={[0, 0.15, 0.15]}
colors={['rgba(200, 200, 218, 0.25)', 'rgba(200, 200, 218, 0.005)', '#eafcff']}
>
<TextInput
{/* ... */}
/>
</LinearGradient>
// ....
const styles = StyleSheet.create({
container: {
//...
backgroundColor: '#eafcff',
},
//...
How about this inset property ?
box-shadow: inset 0 0 5px 5px #888;
I am using Parallax from react-spring to create a parallax effect. I understand that the can use the height of its parent to set its area. This solution, however, is causing a strange behaviour when scrolling by keeping the and visible on the screen. I have a few questions here:
How can I setup this layout in a way where it will behave normally?
Do I need to place the and inside the ParallaxComp with fixed heights (I am hoping there is a better solution)?
Is there a way to make the assume its height based on the contents inside rather than use the prop factor?
Thank you in advance.
Codesandbox
App.js
import React from "react";
import ParallaxComp from "./ParallaxComp";
import "./styles.css";
export default function App() {
return (
<div className="App">
<nav style={{ height: "5rem", background: "purple", color: "white" }}>
Nav
</nav>
{/* <main style={{ height: "100%" }}> */}
<main style={{ height: "100vh" }}>
<ParallaxComp />
</main>
<footer style={{ height: "5rem", background: "blue", color: "white" }}>
Footer
</footer>
</div>
);
}
ParallaxComp.js
import React from "react";
import { Parallax, ParallaxLayer } from "react-spring/renderprops-addons";
let parallax;
const ParallaxComp = () => {
return (
<Parallax pages={2} scrolling={true} vertical ref={ref => (parallax = ref)}>
<ParallaxLayer
offset={0}
speed={0.1}
style={{
fontSize: "23.47222vw",
textAlign: "right",
textTransform: "uppercase"
}}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
<path
d="M887 0c0 224.45-182.22 406.4-407 406.4S73 224.45 73 0h814z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#fec70e"
/>
</svg>
</ParallaxLayer>
<ParallaxLayer
offset={0}
speed={-0.4}
style={{
fontSize: "23.47222vw",
textAlign: "right",
textTransform: "uppercase"
}}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
<path
d="M216 105.2c0 59.65-48.35 108-108 108S0 164.84 0 105.2h216z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#037e36"
/>
</svg>
</ParallaxLayer>
</Parallax>
);
};
export default ParallaxComp;
I have multiple icons stored in a component under switch statement. Based on a condition, I want to display that icon in render function of another component. If I manually add the svg and the path element, then the icon gets displayed correctly. But I would like to optimize my code such that when I call the function with correct parameters, it extracts the corresponding svg element along with its path element.
First Component(where icons reside):
export function getSymbolPlotly(symbol) { // eslint-disable-line
let elm;
const { color, shape } = symbol;
switch (shape) {
case 'x-dot':
elm = <path
className="point"
transform="translate(8,8)"
d="M0,3.39l3.39,3.39l3.39,-3.39l-3.39,-3.39l3.39,-3.39l-3.39,-3.39l-3.39,3.39l-3.39,-3.39l-3.39,3.39l3.39,3.39l-3.39,3.39l3.39,3.39ZM0,0.5L0.5,0L0,-0.5L-0.5,0Z"
style={{
opacity: 1,
strokeWidth: '0px',
fill: color,
fillOpacity: 1
}}></path>;
break;
case 'square':
elm = <path
className="point"
transform="translate(8,8)"
d="M6,6H-6V-6H6Z"
style={{
opacity: 1,
strokeWidth: '0px',
fill: color,
fillOpacity: 1
}}></path>;
break;
case 'hourglass':
elm = <path
className="point"
transform="translate(6,8)"
d="M6,6H-6L6,-6H-6Z"
style={{
opacity: 1,
strokeWidth: '0px',
fill: color,
fillOpacity: 1
}}></path>;
break;
default:
elm = <circle cx="6" cy="6" r="6" transform="translate(0,2)" fill={color}></circle>;
}````
Second component(render function where I need to display icons):
````switch (user.processState) {
case 'DENIED':
return <span><svg style={{ width: '15px', height: '15px' }}>
{getSymbolPlotly('hourglass')}
</svg></span>
case 'CANCELLED':
return <span><svg style={{ width: '15px', height: '15px' }}>
<path className="point"
transform="translate(8,8)"
d="M0,3.39l3.39,3.39l3.39,-3.39l-3.39,-3.39l3.39,-3.39l-3.39,-3.39l-3.39,3.39l-3.39,-3.39l-3.39,3.39l3.39,3.39l-3.39,3.39l3.39,3.39ZM0,0.5L0.5,0L0,-0.5L-0.5,0Z"
style={{
opacity: 1,
strokeWidth: '0px',
fill: '#e5004c',
fillOpacity: 1
}}></path>
</svg>{this.state.message}</span>;
}
In the above code, case CANCELLED displays the icon perfectly as I am manually adding the path element. But I would like to optimize the code as I would need to display the icons at multiple locations and adding path element at every position would make the code tedious. If I call the getSymbol function and pass the name of the icon as parameter, it doesn't display anything. Even when the parameter doesn't match any case, it won't even display the default circle element.
Is there a way to extract the svg and path element in cleaner way from another component ?
In your getSymbolPlotly function you destructure an object called symbol const { color, shape } = symbol;. When you call that function you pass a string called getSymbolPlotly('hourglass'), there is the first error.
I don't know if you pasted the entire code for the getSymbolPlotly function but you must also return the element. To extract in a more "clean" way you can to like this.
import React from "react";
export function getSymbolPlotly(symbol) {
// eslint-disable-line
const { color, shape } = symbol;
switch (shape) {
case "x-dot":
return (
<path
className="point"
transform="translate(8,8)"
d="M0,3.39l3.39,3.39l3.39,-3.39l-3.39,-3.39l3.39,-3.39l-3.39,-3.39l-3.39,3.39l-3.39,-3.39l-3.39,3.39l3.39,3.39l-3.39,3.39l3.39,3.39ZM0,0.5L0.5,0L0,-0.5L-0.5,0Z"
style={{
opacity: 1,
strokeWidth: "0px",
fill: color,
fillOpacity: 1
}}
/>
);
case "square":
return (
<path
className="point"
transform="translate(8,8)"
d="M6,6H-6V-6H6Z"
style={{
opacity: 1,
strokeWidth: "0px",
fill: color,
fillOpacity: 1
}}
/>
);
case "hourglass":
return (
<path
className="point"
transform="translate(6,8)"
d="M6,6H-6L6,-6H-6Z"
style={{
opacity: 1,
strokeWidth: "0px",
fill: color,
fillOpacity: 1
}}
/>
);
default:
return (
<circle cx="6" cy="6" r="6" transform="translate(0,2)" fill={color} />
);
}
}
And in some other component you can call it like this.
return (
<div className="App">
<div>
<svg style={{ width: "15px", height: "15px" }}>
{getSymbolPlotly({ shape: "hourglass", color: "red" })}
</svg>
</div>
<div>
<svg style={{ width: "15px", height: "15px" }}>
{getSymbolPlotly({ shape: "x-dot", color: "purple" })}
</svg>
</div>
</div>
);
I've created a Codesandbox with a working demo here.