Fixed most of the muiV5 / react 18 version problems
This commit is contained in:
Frikky
@@ -1272,11 +1272,11 @@ const Workflows = (props) => {
|
||||
width: "100%",
|
||||
color: "white",
|
||||
backgroundColor: surfaceColor,
|
||||
padding: "12px 12px 0px 15px",
|
||||
borderRadius: 5,
|
||||
display: "flex",
|
||||
boxSizing: "border-box",
|
||||
position: "relative",
|
||||
padding: "12px 12px 0px 15px",
|
||||
};
|
||||
|
||||
const gridContainer = {
|
||||
@@ -1603,10 +1603,9 @@ const Workflows = (props) => {
|
||||
const innerColor = "rgba(255,255,255,0.3)";
|
||||
const setupPaperStyle = {
|
||||
minHeight: paperAppStyle.minHeight,
|
||||
maxWidth: "100%",
|
||||
maxWidth: "100%",
|
||||
minWidth: paperAppStyle.width,
|
||||
color: innerColor,
|
||||
padding: paperAppStyle.padding,
|
||||
borderRadius: paperAppStyle.borderRadius,
|
||||
display: "flex",
|
||||
boxSizing: "border-box",
|
||||
@@ -1614,10 +1613,12 @@ const Workflows = (props) => {
|
||||
border: `2px solid ${innerColor}`,
|
||||
cursor: "pointer",
|
||||
backgroundColor: hover ? "rgba(39,41,45,0.5)" : "rgba(39,41,45,1)",
|
||||
|
||||
padding: paperAppStyle.padding,
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
|
||||
<Grid item xs={isMobile ? 12 : 4} style={{ }}>
|
||||
<Paper
|
||||
square
|
||||
style={setupPaperStyle}
|
||||
@@ -3066,153 +3067,12 @@ const Workflows = (props) => {
|
||||
</span>
|
||||
);
|
||||
|
||||
// const tourOptions = {
|
||||
// defaultStepOptions: {
|
||||
// classes: "shadow-md bg-purple-dark",
|
||||
// scrollTo: true
|
||||
// },
|
||||
// useModalOverlay: true,
|
||||
// tourName: workflows,
|
||||
// exitOnEsc: true,
|
||||
// }
|
||||
|
||||
// //classes: "custom-class-name-1 custom-class-name-2",
|
||||
// const newSteps = [
|
||||
// {
|
||||
// id: "intro",
|
||||
// scrollTo: true,
|
||||
// beforeShowPromise: function() {
|
||||
// return new Promise(function(resolve) {
|
||||
// setTimeout(function() {
|
||||
// window.scrollTo(0, 0);
|
||||
// resolve();
|
||||
// }, 500);
|
||||
// });
|
||||
// },
|
||||
// buttons: [
|
||||
// {
|
||||
// classes: "shepherd-button-primary",
|
||||
// style: {
|
||||
// backgroundColor: "red",
|
||||
// color: "white",
|
||||
// },
|
||||
// text: "Next",
|
||||
// type: "next"
|
||||
// }
|
||||
// ],
|
||||
// highlightClass: "highlight",
|
||||
// showCancelLink: true,
|
||||
// text: [
|
||||
// "React-Shepherd is a JavaScript library for guiding users through your React app."
|
||||
// ],
|
||||
// when: {
|
||||
// show: () => {
|
||||
// console.log("show step 1");
|
||||
// },
|
||||
// hide: () => {
|
||||
// console.log("hide step 1");
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// id: "second",
|
||||
// attachTo: {
|
||||
// element: "second-step",
|
||||
// on: "top"
|
||||
// },
|
||||
// text: [
|
||||
// "Yuk eksplorasi hasil Tes Minat Bakat-mu dan rekomendasi <b>Jurusan</b> dan Karier."
|
||||
// ],
|
||||
// buttons: [
|
||||
// {
|
||||
// classes: "btn btn-info",
|
||||
// text: "Kembali",
|
||||
// type: "back"
|
||||
// },
|
||||
// {
|
||||
// classes: "btn btn-success",
|
||||
// text: "Saya Mengerti",
|
||||
// type: "cancel"
|
||||
// }
|
||||
// ],
|
||||
// when: {
|
||||
// show: () => {
|
||||
// console.log("show stepp");
|
||||
// },
|
||||
// hide: () => {
|
||||
// console.log("complete step");
|
||||
// }
|
||||
// },
|
||||
// showCancelLink: false,
|
||||
// scrollTo: true,
|
||||
// modalOverlayOpeningPadding: 4,
|
||||
// useModalOverlay: false,
|
||||
// canClickTarget: false
|
||||
// }
|
||||
// ]
|
||||
|
||||
// function TourButton() {
|
||||
// const tour = useContext(ShepherdTourContext);
|
||||
|
||||
// return (
|
||||
// <Button variant="contained" color="primary" onClick={tour.start}>
|
||||
// Start Tour
|
||||
// </Button>
|
||||
// );
|
||||
// }
|
||||
|
||||
const WorkflowView = () => {
|
||||
if (workflows.length === 0) {
|
||||
// Not going there yet
|
||||
//if ((userdata.tutorials !== undefined && userdata.tutorials !== null && !userdata.tutorials.includes("getting-started")) || userdata.tutorials === null) {
|
||||
// return <Navigate to="/getting-started" replace />;
|
||||
//}
|
||||
//return (
|
||||
// <div style={emptyWorkflowStyle}>
|
||||
// <Paper style={boxStyle}>
|
||||
// <div>
|
||||
// <h2>Welcome to Shuffle</h2>
|
||||
// </div>
|
||||
// <div>
|
||||
// <p>
|
||||
// <b>Shuffle</b> is a flexible, easy to use, automation platform
|
||||
// allowing users to integrate their services and devices freely.
|
||||
// It's made to significantly reduce the amount of manual labor,
|
||||
// and is focused on security applications.{" "}
|
||||
// <a
|
||||
// href="/docs/about"
|
||||
// style={{ textDecoration: "none", color: "#f85a3e" }}
|
||||
// >
|
||||
// Click here to learn more.
|
||||
// </a>
|
||||
// </p>
|
||||
// </div>
|
||||
// <div>
|
||||
// If you want to jump straight into it, click here to create your
|
||||
// first workflow:
|
||||
// </div>
|
||||
// <div style={{ display: "flex" }}>
|
||||
// <Button
|
||||
// id="second-step"
|
||||
// color="primary"
|
||||
// style={{ marginTop: "20px" }}
|
||||
// variant="outlined"
|
||||
// onClick={() => setModalOpen(true)}
|
||||
// >
|
||||
// New workflow
|
||||
// </Button>
|
||||
// <span style={{ paddingTop: 20, display: "flex" }}>
|
||||
// <Typography
|
||||
// style={{ marginTop: 5, marginLeft: 30, marginRight: 15 }}
|
||||
// >
|
||||
// ..OR
|
||||
// </Typography>
|
||||
// {workflowButtons}
|
||||
// </span>
|
||||
// </div>
|
||||
// </Paper>
|
||||
// </div>
|
||||
//)
|
||||
// Not going there yet
|
||||
//if ((userdata.tutorials !== undefined && userdata.tutorials !== null && !userdata.tutorials.includes("getting-started")) || userdata.tutorials === null) {
|
||||
// return <Navigate to="/getting-started" replace />;
|
||||
//}
|
||||
}
|
||||
|
||||
var workflowDelay = -150
|
||||
@@ -3224,101 +3084,40 @@ const Workflows = (props) => {
|
||||
<div style={workflowViewStyle}>
|
||||
<div style={{ display: "flex", marginTop: 25, }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<Typography variant="h1" style={{fontSize: 30}}>
|
||||
Workflows
|
||||
</Typography>
|
||||
<Typography variant="h1" style={{fontSize: 30}}>
|
||||
Workflows
|
||||
</Typography>
|
||||
</div>
|
||||
{/*
|
||||
<div style={{ flex: 1 }}>
|
||||
<Typography style={{ marginTop: 7, marginBottom: "auto" }}>
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href="https://shuffler.io/docs/workflows"
|
||||
style={{ textDecoration: "none", color: "#f85a3e" }}
|
||||
>
|
||||
Learn more about Workflows
|
||||
</a>
|
||||
</Typography>
|
||||
</div>
|
||||
*/}
|
||||
{isMobile ? null :
|
||||
<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
|
||||
<div style={{ flex: 1, float: "right" }}>
|
||||
<ChipInput
|
||||
style={{}}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
maxWidth: 275,
|
||||
minWidth: 275,
|
||||
},
|
||||
}}
|
||||
placeholder="Add Filter"
|
||||
color="primary"
|
||||
fullWidth
|
||||
value={filters}
|
||||
onAdd={(chip) => {
|
||||
addFilter(chip);
|
||||
}}
|
||||
onDelete={(_, index) => {
|
||||
removeFilter(index);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{isMobile ? null :
|
||||
<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
|
||||
<div style={{ flex: 1, float: "right" }}>
|
||||
<ChipInput
|
||||
style={{}}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
maxWidth: 275,
|
||||
minWidth: 275,
|
||||
},
|
||||
}}
|
||||
placeholder="Add Filter"
|
||||
color="primary"
|
||||
fullWidth
|
||||
value={filters}
|
||||
onAdd={(chip) => {
|
||||
addFilter(chip);
|
||||
}}
|
||||
onDelete={(_, index) => {
|
||||
removeFilter(index);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div style={{ flex: 1, textAlign: "right", }}>
|
||||
{workflowButtons}
|
||||
</div>
|
||||
</div>
|
||||
{/*
|
||||
<div style={flexContainerStyle}>
|
||||
<div style={{...flexBoxStyle, ...activeWorkflowStyle}}>
|
||||
<div style={flexContentStyle}>
|
||||
<div><img src={mobileImage} style={iconStyle} /></div>
|
||||
<div style={ blockRightStyle }>
|
||||
<div style={counterStyle}>{workflows.length}</div>
|
||||
<div style={fontSize_16}>ACTIVE WORKFLOWS</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{...flexBoxStyle, ...availableWorkflowStyle}}>
|
||||
<div style={flexContentStyle}>
|
||||
<div><img src={bookImage} style={iconStyle} /></div>
|
||||
<div style={ blockRightStyle }>
|
||||
<div style={counterStyle}>{workflows.length}</div>
|
||||
<div style={fontSize_16}>AVAILABE WORKFLOWS</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{...flexBoxStyle, ...notificationStyle}}>
|
||||
<div style={flexContentStyle}>
|
||||
<div><img src={bagImage} style={iconStyle} /></div>
|
||||
<div style={ blockRightStyle }>
|
||||
<div style={counterStyle}>{workflows.length}</div>
|
||||
<div style={fontSize_16}>NOTIFICATIONS</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/}
|
||||
|
||||
{/*
|
||||
chipRenderer={({ value, isFocused, isDisabled, handleClick, handleRequestDelete }, key) => {
|
||||
console.log("VALUE: ", value)
|
||||
|
||||
return (
|
||||
<Chip
|
||||
key={key}
|
||||
style={chipStyle}
|
||||
|
||||
>
|
||||
{value}
|
||||
</Chip>
|
||||
)
|
||||
}}
|
||||
*/}
|
||||
|
||||
<div style={{width: "100%", minHeight: isMobile ? 0 : 51, maxHeight: isMobile ? 0 : 51, marginTop: 10, }}>
|
||||
{!isMobile && usecases !== null && usecases !== undefined && usecases.length > 0 ?
|
||||
@@ -3367,10 +3166,7 @@ const Workflows = (props) => {
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 10, marginBottom: 10, }} />
|
||||
{!isMobile &&
|
||||
actionImageList !== undefined &&
|
||||
actionImageList !== null &&
|
||||
actionImageList.length > 0 ? (
|
||||
{!isMobile && actionImageList !== undefined && actionImageList !== null && actionImageList.length > 0 ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
@@ -3515,17 +3311,20 @@ const Workflows = (props) => {
|
||||
workflowDelay += 75
|
||||
} else {
|
||||
return (
|
||||
<Grid key={index} item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
|
||||
<WorkflowPaper key={index} data={data} />
|
||||
</Grid>
|
||||
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
|
||||
<Grid key={index} item xs={isMobile ? 12 : 4} style={{}}>
|
||||
<WorkflowPaper key={index} data={data} />
|
||||
</Grid>
|
||||
</Zoom>
|
||||
)
|
||||
}
|
||||
|
||||
/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/
|
||||
return (
|
||||
<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
|
||||
<WorkflowPaper key={index} data={data} />
|
||||
</Grid>
|
||||
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
|
||||
<Grid item xs={isMobile ? 12 : 4} style={{}}>
|
||||
<WorkflowPaper key={index} data={data} />
|
||||
</Grid>
|
||||
</Zoom>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
|
||||
Reference in New Issue
Block a user