Skip to content

B
bkunyun
Commit 0a8bc331 authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

feat: mui迁移

parent b9e8de78
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2664 additions and 1 deletion
src/api/api_prefix.ts
View file @ 0a8bc331
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:17:48
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-01 16:57:23
* @FilePath: /bkunyun/src/api/api_prefix.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
// const AWSPREFIX = "/0xaws"; // const AWSPREFIX = "/0xaws";
// const PRIVATIZATIONPREFIX = "/fileserver" // const PRIVATIZATIONPREFIX = "/fileserver"
// const PRIVATIZATION_API_URI_PREFIX = process.env.NODE_ENV === 'development' ? "http://123.57.131.31" : ""; // const PRIVATIZATION_API_URI_PREFIX = process.env.NODE_ENV === 'development' ? "http://123.57.131.31" : "";
...@@ -24,7 +32,7 @@ switch (process.env.REACT_APP_ENV) { ...@@ -24,7 +32,7 @@ switch (process.env.REACT_APP_ENV) {
if (['www.bkunyun.com'].includes(window.location.host)) { if (['www.bkunyun.com'].includes(window.location.host)) {
BACKEND_API_URI_PREFIX = "https://www.bkunyun.com"; BACKEND_API_URI_PREFIX = "https://www.bkunyun.com";
} else { } else {
BACKEND_API_URI_PREFIX = "https://www.cloudam.cn"; BACKEND_API_URI_PREFIX = "http://47.57.4.97";
} }
break; break;
} }
......
src/components/Material.Ui/Button.jsx 0 → 100644
View file @ 0a8bc331
import React from "react";
import PropTypes from "prop-types";
import makeStyles from "@material-ui/styles/makeStyles";
import { Typography, Button, Menu, MenuItem } from "@material-ui/core";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
const useStyles = makeStyles({
root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#0055D9" } },
containedSecondary: { backgroundColor: "#D62C1F", boxShadow: "none !important", "&:hover": { backgroundColor: "#D82C1F" } },
outlined: { backgroundColor: '#FFFFFF', border: "1px solid #136EFA", boxShadow: "none !important", color: "#136EFA", "&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" } },
outlinedSecondary: { border: "1px solid #D62C1F", color: "#D62C1F", "&:hover": { border: "1px solid #D62C1F", backgroundColor: "rgba(214, 44, 31, 0.1)" } },
label: { "& p": { fontSize: "13px" } },
text: { backgroundColor: 'transparent', boxShadow: "none !important" },
textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
textSecondary: { color: "#F44335", "&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" } },
sizeSmall: { "& p": { fontSize: "12px" } },
sizeLarge: { "& p": { fontSize: "14px" } },
menuItemRoot: {}
})
const ButtonComponent = (props) => {
const classes = useStyles();
const { img, select, selectCallBack, text, size, click, variant, color, disabled, disableElevation, disableFocusRipple, btnStyle = {}, fontSize = '' } = props;
const [anchorEl, setAnchorEl] = React.useState(null);
const defultClick = (event) => event && event.stoppropagation && event.stoppropagation()
// 更多按钮 点击 弹出菜单
const handleClick = (event) => setAnchorEl(event.currentTarget);
// 关闭更多 menu 弹框
const handleClose = () => setAnchorEl(null);
// 选择更多按钮回调
const handleCloseOption = (item, key) => {
setAnchorEl(null);
selectCallBack && selectCallBack(item, key)
};
return (
<>
<Button
size={size || "medium"}
variant={variant || "contained"}
color={color || "primary"}
disabled={disabled || false}
disableElevation={disableElevation || false}
disableFocusRipple={disableFocusRipple || false}
classes={{
root: btnStyle.root || classes.root,
label: btnStyle.label || classes.label,
disabled: btnStyle.disabled || classes.disabled,
containedSecondary: btnStyle.containedSecondary || classes.containedSecondary,
outlined: btnStyle.outlined || classes.outlined,
outlinedSecondary: btnStyle.outlinedSecondary || classes.outlinedSecondary,
text: btnStyle.text || classes.text,
textPrimary: btnStyle.textPrimary || classes.textPrimary,
textSecondary: btnStyle.textSecondary || classes.textSecondary,
sizeSmall: btnStyle.sizeSmall || classes.sizeSmall,
sizeLarge: btnStyle.sizeLarge || classes.sizeLarge,
}}
style={{...props.style}}
onClick={select ? handleClick : (click || defultClick)}
>
{img || ''}
<Typography style={{ fontSize: fontSize }}>{text || ""}</Typography>
{select && <ExpandMoreIcon fontSize={"small"} />}
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
{
select && select.length > 0 && select.map((item, key) => {
return (
<MenuItem
key={key}
classes={{ root: classes.menuItemRoot }}
onClick={() => handleCloseOption(item, key)}>
{item.text || ""}
</MenuItem>
)
})
}
</Menu>
</>
)
}
ButtonComponent.propTypes = {
size: PropTypes.oneOf(["large", "medium", "small"]),
variant: PropTypes.oneOf(["contained", "outlined", "text"]),
color: PropTypes.oneOf(["default", "inherit", "primary", "secondary"]),
disabled: PropTypes.bool,
disableElevation: PropTypes.bool,
disableFocusRipple: PropTypes.bool,
};
export default ButtonComponent;
\ No newline at end of file
src/components/Material.Ui/Calendar.jsx 0 → 100644
View file @ 0a8bc331
import 'date-fns';
import React, { useState } from 'react';
import { Grid, Typography } from '@material-ui/core';
import DateFnsUtils from '@date-io/date-fns';
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from '@material-ui/pickers';
import makeStyles from "@material-ui/styles/makeStyles";
import frLocale_cn from "date-fns/locale/zh-CN";
import frLocale_en from "date-fns/locale/en-US";
import { isEn } from "../../../commons/utils/helper.js";
const frLocale = isEn() ? frLocale_en : frLocale_cn
const useStyles = makeStyles({
dateInputBox: {
width: "8.125rem",
boxSizing: "border-box",
},
dateInputBody: {
height: "36px !important",
},
root: {
margin: "0",
background: "#FFFFFF",
borderRadius: "4px",
border: "1px solid #D8D8D8",
},
input: {
fontSize: "0.8125rem",
padding: "8px 0 8px 8px",
marginRight: "-10px"
},
label: {
opacity: "0.3",
},
rootButton: {
background: "none",
backgroundColor: "none",
'&:hover': {
background: "none",
backgroundColor: "none"
},
'&:before': {
background: "none",
backgroundColor: "none"
},
'&:hover:before': {
background: "none",
backgroundColor: "none"
},
'&:after': {
background: "none",
backgroundColor: "none"
}
},
underline: {
border: "none",
content: "",
borderBottom: "none",
'&:before': {
border: "none",
content: "",
borderBottomStyle: "none !important",
borderBottom: "none",
},
'&:hover:before': {
border: "none",
content: "",
borderBottom: "none",
},
'&:after': {
border: "none",
content: "",
borderBottom: "none",
}
},
calendar_body: {
display: 'flex',
marginLeft: "-0.5rem",
alignItems: "center",
justifyContent: "center",
marginRight: "10px",
height: "36px",
marginLeft: "10px"
},
lineFiltrate: {
width: '1rem',
height: "1px",
backgroundColor: "#D8D8D8",
margin: "0 0.3125rem"
},
})
export default function MaterialUIPickers(props) {
const { startTime, endTime, DateChange, lastDate } = props;
const [openDatePicker, setOpenDatePicker] = useState({
one: false,
two: false,
})
const classes = useStyles()
const openCalendar = (type, date) => {
setOpenDatePicker({
one: type === 'start' ? date : openDatePicker[`${type === 'start' ? 'one' : 'two'}`],
two: type === 'end' ? date : openDatePicker[`${type === 'start' ? 'one' : 'two'}`],
})
};
const closeCalendar = () => {
setOpenDatePicker({
one: false,
two: false,
})
};
const handleDateChange = (type, date) => {
let d = new Date(date);
DateChange(type, d)
setOpenDatePicker({
one: false,
two: false,
})
}
const Calendar = (type) => {
return (
<Grid container item className={classes.dateInputBox}>
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={frLocale} >
<Grid container justifycontent="space-around" className={classes.dateInputBody}>
<KeyboardDatePicker
disableToolbar
variant="inline"
open={openDatePicker[`${type === 'start' ? 'one' : 'two'}`]}
format={isEn() ? "MM/dd/yyyy" : "yyyy-MM-dd"}
disableFuture
minDate={lastDate ? new Date(lastDate) : new Date("1900-01-01")}
margin="normal"
id="date-picker-inline"
onClick={() => openCalendar(type, true)}
onOpen={() => openCalendar(type, true)}
onClose={() => closeCalendar()}
value={type === 'start' ? startTime : endTime}
onChange={(date) => handleDateChange(type, date)}
InputProps={{
classes: {
input: classes.input,
underline: classes.underline
},
}}
classes={{
root: classes.root
}}
KeyboardButtonProps={{
'aria-label': 'change date',
classes: {
root: classes.rootButton,
label: classes.label
},
}}
/>
</Grid>
</MuiPickersUtilsProvider>
</Grid>
)
}
return (
<Grid className={classes.calendar_body}>
{Calendar('start')}
<Typography className={classes.lineFiltrate}></Typography>
{Calendar('end')}
</Grid>
);
}
\ No newline at end of file
src/components/Material.Ui/Checkbox.jsx 0 → 100644
View file @ 0a8bc331
import React from 'react';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import { Radio } from "@material-ui/core";
import Checkbox from '@material-ui/core/Checkbox';
import PropTypes from "prop-types";
import makeStyles from "@material-ui/styles/makeStyles";
const useStyles = makeStyles({
label: { color: "#383838", fontSize: "14px" },
root: { marginRight: 0 },
radioRoot: { color: "#c9c9c9" },
radioChecked: { color: "#136EFA !important" },
})
const CheckBoxComponent = props => {
const { defaultChecked = false, checkChange, label, color, id, checkBoxStyle = {}, size, disabled, labelPlacement, controllChecked, controllCheckChange, controll, radio, show = true } = props;
const [checked, setChecked] = React.useState(defaultChecked);
const classes = useStyles()
const handleChange = (event) => {
setChecked(event.target.checked);
checkChange && checkChange(event.target.checked)
};
const controllHandleChange = (event) => {
controllCheckChange(event.target.checked)
};
if (!show) return ""
if (controll) {
return (
<FormControlLabel
control={
radio ?
<Radio size={'small'}
classes={{ root: classes.radioRoot, checked: classes.radioChecked }}
checked={controllChecked} onChange={controllHandleChange} /> :
<Checkbox
checked={controllChecked}
onChange={controllHandleChange}
name={id || "name"}
color={color || "primary"}
disabled={disabled || false}
size={size || "medium"}
/>
}
label={label || ""}
labelPlacement={labelPlacement || "end"}
classes={{
label: checkBoxStyle.label || classes.label,
root: checkBoxStyle.root || classes.root,
}}
/>
)
}
return (
<FormControlLabel
control={
<Checkbox
checked={checked}
onChange={handleChange}
name={id || "name"}
color={color || "primary"}
disabled={disabled || false}
size={size || "medium"}
/>
}
label={label || ""}
labelPlacement={labelPlacement || "end"}
classes={{
label: checkBoxStyle.label || classes.label,
root: checkBoxStyle.root || classes.root,
}}
/>
)
}
CheckBoxComponent.propTypes = {
size: PropTypes.oneOf(["medium", "small"]),
disabled: PropTypes.oneOf([true, false]),
};
export default CheckBoxComponent
\ No newline at end of file
src/components/Material.Ui/Complexbutton.jsx 0 → 100644
View file @ 0a8bc331
import React from "react";
import PropTypes from "prop-types";
import makeStyles from "@material-ui/styles/makeStyles";
import { Typography, Button, Menu, MenuItem } from "@material-ui/core";
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import CheckboxComponent from "@/commons/components/Material.Ui/Checkbox"
import Text from "@/commons/components/Material.Ui/Text"
import { isEn } from "@/commons/utils/helper";
const useStyles = makeStyles({
root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#0055D9" } },
containedSecondary: { backgroundColor: "#D62C1F", boxShadow: "none !important", "&:hover": { backgroundColor: "#D82C1F" } },
outlined: { backgroundColor: '#FFFFFF', border: "1px solid #136EFA", boxShadow: "none !important", color: "#136EFA", "&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" } },
outlinedSecondary: { border: "1px solid #D62C1F", color: "#D62C1F", "&:hover": { border: "1px solid #D62C1F", backgroundColor: "rgba(214, 44, 31, 0.1)" } },
label: { "& p": { fontSize: "13px" } },
text: { backgroundColor: 'transparent', boxShadow: "none !important" },
textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
textSecondary: { color: "#F44335", "&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" } },
sizeSmall: { "& p": { fontSize: "12px" } },
sizeLarge: { "& p": { fontSize: "14px" } },
menuItemRoot: { width: "110px" },
textStyle: { padding: "8px 22px", borderRight: "1px solid rgb(0,44,112,0.2)" },
textStyle_en: { padding: "8px 16px", borderRight: "1px solid rgb(0,44,112,0.2)" },
checkBoxBody: { width: "100%", marginLeft: "0px" }
})
const ButtonComponent = (props) => {
const classes = useStyles();
const { subText, Checked, selectCallBack, text, size, click, variant, color, disabled, disableElevation, disableFocusRipple, btnStyle = {}, fontSize, subClick } = props;
const [anchorEl, setAnchorEl] = React.useState(null);
const defultClick = (event) => event && event.stoppropagation && event.stoppropagation()
// 更多按钮 点击 弹出菜单
const handleClick = (event) => {
console.log(event.currentTarget, 'lllll')
setAnchorEl(event.currentTarget)
}
// 关闭更多 menu 弹框
const handleClose = () => setAnchorEl(null);
// 选择更多按钮回调
const handleCloseOption = (item, key) => {
setAnchorEl(null);
selectCallBack && selectCallBack(item, key)
};
return (
<>
<Button
size={size || "medium"}
variant={variant || "contained"}
color={color || "primary"}
disabled={disabled || false}
disableElevation={disableElevation || false}
disableFocusRipple={disableFocusRipple || false}
classes={{
root: btnStyle.root || classes.root,
label: btnStyle.label || classes.label,
disabled: btnStyle.disabled || classes.disabled,
containedSecondary: btnStyle.containedSecondary || classes.containedSecondary,
outlined: btnStyle.outlined || classes.outlined,
outlinedSecondary: btnStyle.outlinedSecondary || classes.outlinedSecondary,
text: btnStyle.text || classes.text,
textPrimary: btnStyle.textPrimary || classes.textPrimary,
textSecondary: btnStyle.textSecondary || classes.textSecondary,
sizeSmall: btnStyle.sizeSmall || classes.sizeSmall,
sizeLarge: btnStyle.sizeLarge || classes.sizeLarge,
}}
style={{ ...props.style, boxShadow: "none !important", backgroundColor: "#136EFA", padding: "0px 0px", width: "110px" }}
>
<Typography
className={isEn() ? classes.textStyle_en : classes.textStyle}
style={fontSize ? { fontSize: fontSize } : {}}
onClick={click}
>
{text || ""}</Typography>
<div
style={{ display: "flex", padding: "0px 5px" }}
onClick={handleClick}
>
<ArrowDropDownIcon fontSize={"small"} style={{ color: "#fff" }} />
</div>
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
style={{ marginTop: "47px", marginLeft: isEn() ? "-77px" : "-76px" }}
>
<div style={{ width: "110px" }}>
<CheckboxComponent
defaultChecked={Checked}
label={<Text text={subText} op={"lg"} variant={"body1"} />}
labelPlacement={"end"}
size={"small"}
checkChange={(event) => subClick(event)}
checkBoxStyle={{
root: classes.checkBoxBody
}}
/>
</div>
</Menu>
</>
)
}
ButtonComponent.propTypes = {
size: PropTypes.oneOf(["large", "medium", "small"]),
variant: PropTypes.oneOf(["contained", "outlined", "text"]),
color: PropTypes.oneOf(["default", "inherit", "primary", "secondary"]),
disabled: PropTypes.bool,
disableElevation: PropTypes.bool,
disableFocusRipple: PropTypes.bool,
};
export default ButtonComponent;
\ No newline at end of file
src/components/Material.Ui/Dialog.jsx 0 → 100644
View file @ 0a8bc331
import React, { useMemo } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import MuiDialogContent from '@material-ui/core/DialogContent';
import MuiDialogActions from '@material-ui/core/DialogActions';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';
import Slide from '@material-ui/core/Slide';
import ButtonComponent from "@/commons/components/Material.Ui/Button";
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { useTheme } from '@material-ui/core/styles';
import PropTypes from "prop-types";
import { CLOUDE } from "@/commons/utils/constants"
import { useEffect } from 'react';
const styles = (theme) => ({
root: {
margin: 0,
padding: "16px 24px",
},
closeButton: {
position: 'absolute',
right: theme.spacing(1),
top: theme.spacing(1) - 4,
color: theme.palette.grey[500],
},
});
const DialogTitle = withStyles(styles)((props) => {
const { children, classes, onClose, ...other } = props;
return (
<MuiDialogTitle disableTypography className={classes.root} {...other}>
<Typography variant="body1">{children}</Typography>
{onClose ? (
<IconButton aria-label="close" className={classes.closeButton} onClick={() => onClose(false)}>
<CloseIcon />
</IconButton>
) : null}
</MuiDialogTitle>
);
});
const DialogActions = withStyles(() => ({
root: {
margin: 0,
padding: "16px 24px",
"& > :not(:first-child)": {
marginLeft: "15px"
}
},
}))(MuiDialogActions);
const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction={props.direction || "up"} ref={ref} {...props} />;
});
const AlertDialogSlide = props => {
const { open, handleClose, dividers, content, padding = true,confirmDisabled=false, header, canncel = CLOUDE.canncel, confirm = CLOUDE.confirm, fullScreen, scroll, maxWidth, bottom, backAndKey, direction, classes, contentStyle } = props;
const theme = useTheme();
const mediaFull = useMediaQuery(theme.breakpoints.down('sm'));
const [fullWidth, setFullWidth] = React.useState(true);
const DialogContent = withStyles(() => ({
root: {
padding: padding ? "20px 24px 40px" : "0", fontWeight: "400", ...contentStyle
},
dividers: { borderColor: "rgba(34, 34, 34, 0.08)" },
}))(MuiDialogContent);
const otherName = useMemo(() => { return (content) }, [content])
return (
<Dialog
open={open}
classes={classes}
TransitionComponent={Transition}
keepMounted
onClose={() => handleClose(false)}
fullScreen={fullScreen || mediaFull}
scroll={scroll || "paper"}
aria-describedby="dialog"
aria-labelledby="confirmation-dialog-title"
fullWidth={fullWidth}
// disableBackdropClick={backAndKey || true}//点击屏幕外关闭
// disableEscapeKeyDown={backAndKey || true}//按下键盘ESC关闭
maxWidth={maxWidth || "sm"}
>
<DialogTitle id="customized-dialog-title" onClose={handleClose}>
{header || ""}
</DialogTitle>
<DialogContent dividers={dividers || true}>
{/* {content || ""} */}
{otherName}
</DialogContent>
{
!bottom && (canncel || confirm) && <DialogActions>
{canncel && <ButtonComponent click={() => handleClose(false)} variant={"outlined"} text={canncel} />}
{confirm && <ButtonComponent click={() => handleClose(1)} text={confirm} disabled={ confirmDisabled || false} />}
</DialogActions>
}
{
bottom && bottom
}
</Dialog>
)
}
AlertDialogSlide.propTypes = {
maxWidth: PropTypes.oneOf([false, "xs", "sm", "md", "lg", "xl"]),
scroll: PropTypes.oneOf(['paper', 'body'])
};
export default AlertDialogSlide
\ No newline at end of file
src/components/Material.Ui/IconButton.jsx 0 → 100644
View file @ 0a8bc331
import React from 'react'
import { Grid , Typography } from '@material-ui/core'
import icondelete from '../../assets/img/iconDelete.svg'
import iconDashboard from '../../assets/img/iconDashboard.svg'
import { makeStyles } from '@material-ui/core'
const Style = makeStyles({
paddingbox:{
borderRadius: '4px',
border:' 1px solid rgba(19, 110, 250, 1)',
cursor:'pointer',
minHeight:'33px',
display:'flex',
alignItems:'center',
// justifyContent:'center'
},
content:{
color:'rgba(19, 110, 250, 1)',
fontSize:'13px',
lineHeight:'17px',
fontWeight:'400',
fontFamily:'PingFangSC-Regular, PingFang SC'
},
img:{
// width:'17px',
marginRight:'4px'
}
})
export default props =>{
const { startIcon = '' , color , onClick , text = '' , marginright = '16px' ,style={} , paddingleft='' } = props
const classes = Style()
const icon = (str)=>{
switch(str){
case 'delete' :
return icondelete;
case 'dashboard':
return iconDashboard;
default:
break;
}
}
return <Grid onClick = {()=>{onClick&&onClick()}} className = {classes.paddingbox}
style={{padding:Boolean(startIcon)?'3px 14px 3px 7px':' 6px 8px ',marginRight:marginright,paddingLeft:paddingleft, ...style}}>
{startIcon&& <img src ={icon(startIcon)} alt ='' className= {classes.img}/>}
<Typography className={classes.content}>{ text }</Typography>
</Grid>
}
\ No newline at end of file
src/components/Material.Ui/Input.jsx 0 → 100644
View file @ 0a8bc331
import React from "react";
import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';
import { makeStyles } from '@material-ui/core/styles';
import cx from "classnames"
const useStyles = makeStyles({
MuiOutlinedInputInputLarge: { padding: "13.5px 15px", MozAppearance: 'textfield' },
MuiOutlinedInputInput: { padding: "12px 15px", "&::placeholder": { fontSize: "14px" }, MozAppearance: 'textfield' },
MuiOutlinedInputInputSmall: { padding: "10px 15px", "&::placeholder": { fontSize: "13px" }, MozAppearance: 'textfield' },
MuiOutlinedInputInputXsmall: { padding: "8px 15px", "&::placeholder": { fontSize: "12px" }, MozAppearance: 'textfield' },
outlinedLarge: { transform: "translate(14px, 15.5px) scale(1)", fontSize: '14px', fontWeight: '400', color: '#707070' },
outlined: { transform: "translate(14px, 14px) scale(1)", fontSize: '14px', fontWeight: '400', color: '#707070' },
outlinedSmall: { transform: "translate(14px, 11px) scale(1)", fontSize: '14px', fontWeight: '400', color: '#707070' },
outlinedXsmall: { transform: "translate(12px, 11px) scale(1)", fontSize: '13px', fontWeight: '400', color: '#707070' },
notchedOutline: { borderColor: "rgba(216, 216, 216, 1)" },
root: {
"&:hover": {
"& .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(19, 110, 250, 0.9)" }
},
},
error: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#D62C1F !important"
},
},
disabled: {
color: "#E3E3E3 !important",
"& .MuiOutlinedInput-notchedOutline": { borderColor: "#E3E3E3 !important" },
"&:hover": {
"& .MuiOutlinedInput-notchedOutline": { borderColor: "#E3E3E3 !important" }
},
},
errorLabel: { color: "#D62C1F !important" },
errorFormHelperTextProps: { color: "#D62C1F !important", fontSize: "12px", lineHeight: '14px' },
SelectPropsright: { textAlign: "right" },
SelectPropscenter: { textAlign: "center" },
SelectPropsleft: { textAlign: "left" },
selectProp: { fontSize: "14px" },
selectPropsLarge: { fontSize: "14px" },
selectPropsSmall: { fontSize: "13px" },
selectPropsXsmall: { fontSize: "12px" },
adornedEnd: { paddingRight: "8px" },
defaultSelectStyle: { fontSize: "14px" }
})
export default props => {
const classes = useStyles();
const { label, type, variant, disabled, onChange, placeholder, value, textAlign, customClass,
autoFocus, defaultValue, error, fullWidth, margin, select, disabledClass, onBlur, selectStyle,
multiline, required, rows, startAdornment, endAdornment, helperText, size, onkeydown, selectSize, onFocus
} = props;
const onChangeDefault = () => { }
const resizeBys = (sty) => {
switch (size) {
case "large":
return sty + "Large";
case "small":
return sty + "Small";
case "xsmall":
return sty + "Xsmall";
default:
return sty;
}
}
const reSelectSizeBys = (sty) => {
switch (selectSize) {
case "large":
return sty + "Large";
case "small":
return sty + "Small";
case "xsmall":
return sty + "Xsmall";
default:
return sty;
}
}
const onBlurDefault = () => {
}
const onFocusDefault = () => { }
if (![undefined, null].includes(value)) {
return (
<TextField
label={label || ""}
autoFocus={autoFocus || false}
type={type || "text"}
value={value || ""}
placeholder={placeholder || ""}
variant={variant || "outlined"}
select={select ? true : false}
disabled={disabled || false}
onChange={onChange || onChangeDefault}
onBlur={onBlur || onBlurDefault}
error={error || false}
helperText={helperText || ""}
fullWidth={fullWidth || false}
onFocus={onFocus || onFocusDefault}
rows={rows || 1}
multiline={multiline || false}
required={required || false}
InputProps={{
margin: margin || "none",
classes: {
root: classes.root,
input: cx({
[classes[resizeBys("MuiOutlinedInputInput")]]: true,
[classes[`SelectProps${textAlign}`]]: textAlign,
[customClass]: customClass
}),
notchedOutline: classes.notchedOutline,
error: classes.error,
disabled: disabledClass || classes.disabled,
adornedEnd: classes.adornedEnd
},
startAdornment: startAdornment || "",
endAdornment: endAdornment || ""
}}
InputLabelProps={{
classes: {
outlined: classes[resizeBys("outlined")],
error: classes.errorLabel
}
}}
FormHelperTextProps={{
classes: {
root: classes.rootFormHelperTextProps,
error: classes.errorFormHelperTextProps
}
}}
SelectProps={{
native: (select && select.native) || false,
classes: {
outlined: textAlign ? classes[`SelectProps${textAlign}`] : classes['SelectPropsleft'],
selectMenu: classes[reSelectSizeBys("selectProps")]
}
}}
>
{
select && select.json && select.json.length > 0 && select.json.map((option, key) => {
return (
<MenuItem key={key} disabled={option.disabled || false} value={option.value} className={selectStyle || classes.defaultSelectStyle}>
{option.label}
</MenuItem>
)
})
}
</TextField>
)
}
return (
<TextField
label={label || ""}
autoFocus={autoFocus || false}
type={type || "text"}
defaultValue={defaultValue || ""}
placeholder={placeholder || ""}
variant={variant || "outlined"}
select={select ? true : false}
disabled={disabled || false}
onChange={onChange || onChangeDefault}
onBlur={onBlur || onBlurDefault}
error={error || false}
helperText={helperText || ""}
fullWidth={fullWidth || false}
rows={rows || 1}
multiline={multiline || false}
required={required || false}
onKeyDown={onkeydown || (() => { })}
InputProps={{
margin: margin || "none",
classes: {
root: classes.root,
input: cx({
[classes[resizeBys("MuiOutlinedInputInput")]]: true,
[classes[`SelectProps${textAlign}`]]: textAlign,
[customClass]: customClass
}),
notchedOutline: classes.notchedOutline,
error: classes.error,
disabled: disabledClass || classes.disabled,
adornedEnd: classes.adornedEnd
},
startAdornment: startAdornment || "",
endAdornment: endAdornment || ""
}}
InputLabelProps={{
classes: {
outlined: classes[resizeBys("outlined")],
error: classes.errorLabel
}
}}
FormHelperTextProps={{
classes: {
root: classes.rootFormHelperTextProps,
error: classes.errorFormHelperTextProps
}
}}
SelectProps={{
native: (select && select.native) || false,
classes: {
outlined: textAlign ? classes[`SelectProps${textAlign}`] : classes['SelectPropsleft'],
}
}}
>
{
select && select.json && select.json.length > 0 && select.json.map((option, key) => {
return (
<MenuItem key={key} disabled={option.disabled || false} value={option.value} className={selectStyle || classes.defaultSelectStyle}>
{option.label}
</MenuItem>
)
})
}
</TextField>
)
}
\ No newline at end of file
src/components/Material.Ui/MergeTable.jsx 0 → 100644
View file @ 0a8bc331
import React from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Checkbox from "@material-ui/core/Checkbox";
import Spin from "@/commons/components/Material.Ui/Spin";
import { CLOUDE } from '@/commons/utils/constants';
import EnhancedTableToolbarComponent from "./Table/EnhancedTableToolbar"
import EnhancedTableHeadComponent from "./Table/EnhancedTableHead"
import { getComparator, stableSort, useStyles } from "./Table/function";
import ActionsComponent from "./Table/ActionsComponent"
import { useEffect } from "react";
import Tooltip from '@material-ui/core/Tooltip';
export default function EnhancedTable(props) {
const classes = useStyles();
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("");
const { headCells, rows, footer = true, elevation1, tableStyle, tableContainerStyle, stickyheader, TableHeadClasses, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick, bodyTableCellStyle, headTableCellStyle, cancelHover,
load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox, RowHeight = '', CellWidth = '', rowHover, TableNodataPadding = '', TableNodataLineHeight = '' } = props;
const [selected, setSelected] = React.useState(initSelected || []);
const [rowsPerPageOptions, setRowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
const [spin, setSpin] = React.useState(false)
const [onRow, setOnRow] = React.useState('')
useEffect(() => {
setOnRow(defaultRow)
}, [defaultRow])
const onRowClickDefault = (value) => {
setOnRow(value)
onRowClick(value)
}
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelecteds = rows.map((n) => n[param || 'id']);
setSelected(newSelecteds);
checkboxData(newSelecteds);
return;
}
setSelected([]);
checkboxData([]);
};
React.useEffect(() => {
setSpin(load)
}, [load]);
const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1)
);
}
checkboxData(newSelected)
setSelected(newSelected);
};
const handleOnPageChange = (event, newPage) => {
changePage(newPage, rowsPerPage);
};
const handleChangeRowsPerPage = (event) => {
changePage(0, parseInt(event.target.value, 10));
};
const isSelected = (name) => selected.indexOf(name) !== -1;
const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
return (
<div className={classes.root}>
<Paper className={classes.paper} classes={{ elevation1: elevation1 || classes.elevation1 }} >
<Spin spin={spin} />
{toolbar && toolbar}
<TableContainer style={{ ...tableContainerStyle }}>
<Table stickyHeader={stickyheader || false} className={classes.table} style={{ ...tableStyle }} aria-labelledby="tableTitle" size={size || "medium"} aria-label="cloudam table header" >
<EnhancedTableHeadComponent
classes={classes}
{...props}
numSelected={selected.length}
headTableCellCheckbox={headTableCellCheckbox}
headTableCell={headTableCellStyle}
order={order}
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={rows.length}
headCells={headCells || []}
/>
<TableBody>
{
(rows.length === 0 && !load) && <TableRow>
<TableCell
colSpan={headCells.filter(k => k.id === "checkbox").length === 0 ? headCells.length : headCells.length + 1}
className={classes.TypographyStyle}
style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom, padding: TableNodataPadding, lineHeight: TableNodataLineHeight }}
>
No Data
</TableCell>
</TableRow>
}
{stableSort(rows, getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
const isItemSelected = isSelected(row[param || "id"]);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover={rowHover ? false : (row[disabledparam || "enabled"] ? true : false)}
onClick={(event) => {
if (!row[disabledparam]) return;
onRowClick && onRowClickDefault(row[param || "id"])
headCells.filter(k => k.id === "checkbox").length > 0 && handleClick(event, row[param || "id"])
}}
onDoubleClick={() => {
onDoubleClick && onDoubleClick(row)
}}
style={{
height: RowHeight,
border: onRow === row[param || "id"] ? !row[disabledparam] ? "" : '1px solid #136EFA' : "",
backgroundColor: onRow === row[param || "id"] ? !row[disabledparam] ? "rgba(255, 255, 255, 0.4)" : "rgba(19, 110, 250, 0.1)" : "",
cursor: props.cursor ? (row[props.cursor] ? "pointer" : "auto") : (onRowClick ? !row[disabledparam] ? "no-drop" : "pointer" : "auto"),
opacity: !row[disabledparam] ? 0.3 : 1
}}
classes={{
root: cancelHover && classes.cancelHoverStyle
}}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row[param || "id"]}
selected={isItemSelected}
>
{
headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell padding="checkbox">
<Checkbox color={"primary"} checked={isItemSelected} inputProps={{ "aria-labelledby": labelId }} />
</TableCell>
}
{
headCells.map((item, k) => {
let subscript = rows.findIndex((e) => e[item.id] === 'merge')
if (index !== subscript && row[item.id] === 'merge') return null
return (
<TableCell key={k} component="th" id={labelId + k}
style={{ width: CellWidth, textAlign: item.numeric ? "right" : "left", paddingRight: item.sort && item.numeric ? "40px" : "", boxSizing: "border-box" }}
scope="row"
rowSpan={(row[item.id] === 'merge') ? (rows.length - (index)) : 1}
padding={item.disablePadding ? "none" : "default"}
classes={{
body: bodyTableCellStyle || classes.bodyTableCell,
}}
> {row[item.id] === 'merge' ? ((item.id === 'parallelFileSystem' && rows[0].parallelFileSystem === "merge") ? CLOUDE.chargesText16 : "") : row[item.id]}</TableCell>
)
})
}
</TableRow>
);
})}
{/* {emptyRows > 0 && (
<TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)} */}
</TableBody>
</Table>
</TableContainer>
{
footer && <TablePagination
rowsPerPageOptions={rowsPerPageOptions}
component="div"
count={count || rows.length}
rowsPerPage={rowsPerPage}
page={page}
ActionsComponent={ActionsComponent}
onChangePage={handleOnPageChange}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
}
</Paper>
</div>
);
}
src/components/Material.Ui/SearchSelectCheckBox.jsx 0 → 100644
View file @ 0a8bc331
import React, { useState, useEffect, useRef } from "react";
import TextField from '@material-ui/core/TextField';
import cx from "classnames"
import { makeStyles } from '@material-ui/core/styles';
import { Grid, List, ListItem, ListItemText, Chip } from "@material-ui/core";
import Checkbox from '@material-ui/core/Checkbox';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
const useStyles = makeStyles({
MuiOutlinedInputInputLarge: { padding: "13.5px 15px" },
MuiOutlinedInputInput: { padding: "12px 15px" },
MuiOutlinedInputInputSmall: { padding: "10px 15px" },
outlinedLarge: { transform: "translate(14px, 15.5px) scale(1)", fontSize: '14px', fontWeight: '400', color: '#707070' },
outlined: { transform: "translate(14px, 14px) scale(1)", fontSize: '14px', fontWeight: '400', color: '#707070' },
outlinedSmall: { transform: "translate(14px, 11px) scale(1)", fontSize: '14px', fontWeight: '400', color: '#707070' },
notchedOutline: { borderColor: "rgba(216, 216, 216, 1)" },
root: {
width: "100%",
"&:hover": {
"& .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(19, 110, 250, 0.9)" }
},
},
error: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#D62C1F !important"
},
},
disabled: {
color: "#E3E3E3 !important",
"& .MuiOutlinedInput-notchedOutline": { borderColor: "#E3E3E3 !important" },
"&:hover": {
"& .MuiOutlinedInput-notchedOutline": { borderColor: "#E3E3E3 !important" }
},
},
errorLabel: { color: "#D62C1F !important" },
errorFormHelperTextProps: { color: "#D62C1F !important", fontSize: "12px" },
wrap: { width: "100%", position: "relative" },
contentWrap: {
padding: "8px 0", height: 0, transition: "all 1s", position: "absolute", zIndex: 9, width: "100%",
backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
overflowY: "scroll",
maxHeight: "398px"
},
contentWrapOpenPosition:{top:"-400px"},
contentWrapOpen: { height: "auto" },
ArrowDropDownIconRoot: { transition: "all 0.2s", transform: "rotate(0)", position: "absolute", right: "15px", top: "6px" },
ArrowDropDownIconRootOpen: { transform: "rotate(180deg)" },
inputWrap: { position: "relative" },
checked: { color: "#136EFA !important" }
})
let time = null;
export default props => {
const classes = useStyles();
const { label, type, variant, disabled, onChange, placeholder, autoFocus, defaultValue, error, fullWidth, margin, multiline, required, rows, startAdornment, endAdornment, helperText, size, option, callback, values = [], inputValue } = props;
const [open, setOpen] = useState(false)
const [curDomBottom, setCurDomBottom] = useState('')
const onChangeDefault = (e) => {
onChange && throttle(e.target.value)
}
const handleMouseUp = (event) => {
setOpen(false)
event && event.stopPropagation()
}
//节流
const throttle = (e) => {
if (!time) {
time = setTimeout(() => {
onChange(e)
time = null
}, 400);
}
}
const inputEl = useRef(null);
useEffect(() => {
window.addEventListener('click', handleMouseUp, false)
return () => window.removeEventListener('click', handleMouseUp, false)
}, [])
const resizeBys = (sty) => {
switch (size) {
case "large":
return sty + "Large";
case "small":
return sty + "Small";
default:
return sty;
}
}
// 获取当前 元素距离底部位置
const scrollFun = (sty) => {
let dom = inputEl.current;
const height = window.innerHeight //可视区窗口高度
const curDomHeight = dom.offsetHeight
// const curDomHeight = dom.getBoundingClientRect().height
const curDomY = dom.getBoundingClientRect().y
const curDomBottom = height - curDomHeight - curDomY
if( curDomBottom<400 ){
setCurDomBottom("top")
}else setCurDomBottom("")
}
const selectClick = (e, item) => {
callback && callback(item)
}
return (
<Grid ref={inputEl} className={cx({ [classes.wrap]: true, })} onClick={(e) => e.stopPropagation()}>
<Grid className={cx({ [classes.inputWrap]: true, })}>
<TextField
onFocus={() => {
scrollFun()
setOpen(true);
}}
label={label || ""}
style={{ width: "100%" }}
autoFocus={autoFocus || false}
defaultValue={defaultValue || ""}
type={type || "text"}
placeholder={placeholder || ""}
variant={variant || "outlined"}
disabled={disabled || false}
onChange={onChangeDefault}
error={error || false}
helperText={helperText || ""}
fullWidth={fullWidth || false}
rows={rows || 1}
multiline={multiline || false}
required={required || false}
InputProps={{
margin: margin || "none",
classes: {
root: classes.root,
input: classes[resizeBys("MuiOutlinedInputInput")],
notchedOutline: classes.notchedOutline,
error: classes.error,
disabled: classes.disabled
},
startAdornment: startAdornment || "",
endAdornment: endAdornment || "",
}}
InputLabelProps={{
classes: {
outlined: classes[resizeBys("outlined")],
error: classes.errorLabel
}
}}
FormHelperTextProps={{
classes: {
root: classes.rootFormHelperTextProps,
error: classes.errorFormHelperTextProps
}
}}
/>
<ArrowDropDownIcon classes={{
root: cx({
[classes.ArrowDropDownIconRoot]: true,
[classes.ArrowDropDownIconRootOpen]: open
})
}} />
</Grid>
{
open && inputValue !== "" && (
<Grid onClick={(e) => e.stopPropagation()} className={cx({
[classes.contentWrap]: true,
[classes.contentWrapOpen]: open,
[classes.contentWrapOpenPosition]: curDomBottom==="top",
})
} id="select-wrap-content">
<Grid className={classes.gridScroll}>
<List component="nav" className={classes.root} aria-label="contacts">
{
option && option.map((item, key) => {
return (
<ListItem
selected={values.filter(k => k.value === item.value).length > 0}
classes={{ root: classes.rootListItem }} key={key} button
onClick={(event) => selectClick(event, item)}
>
<ListItemText primary={item.label} />
<Checkbox
checked={values.filter(k => k.value === item.value).length > 0}
onChange={(event) => selectClick(event, item)}
classes={{
checked: classes.checked
}}
/>
</ListItem>
)
})
}
</List>
</Grid>
</Grid>
)
}
</Grid >
)
}
\ No newline at end of file
src/components/Material.Ui/Select.jsx 0 → 100644
View file @ 0a8bc331
import React, { useState, useEffect } from "react";
import Selectzone from './Selectzone.jsx'
import { Grid, Typography, List, ListItem, ListItemText } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import { CLOUDE } from "@/commons/utils/constants"
import cx from "classnames"
const useStyles = makeStyles({
wrapHeightLarge: { height: "44px" },
wrapHeight: { height: "40px" },
wrapHeightSmall: { height: "36px" },
wrapHeightXsmall: { height: "32px" },
wrap: { width: "100%", position: "relative" },
noBorderwrap: { width: "125px", position: "relative" },
noBorderEnwrap: { width: "165px", position: "relative" },
inputWrap: {
display: "flex", justifyContent: "space-between", alignItems: "center", background: "#FFFFFF", borderRadius: '4px', border: "1px solid #D8D8D8",
cursor: "pointer", padding: "0 15px",
"&:hover": { borderColor: "#136EFA" }
},
noBorderinputWrap: {
display: "flex", justifyContent: "space-between", alignItems: "center", background: "#FFFFFF",
cursor: "pointer", padding: "0",
},
inputHeightLarge: { height: "44px" },
inputHeight: { height: "40px" },
inputHeightSmall: { height: "36px" },
inputHeightXsmall: { height: "32px" },
inputWrapOpen: { border: "1px solid #136EFA" },
text: { color: "#1B1B1B", fontSize: '14px', fontWeight: 400 },
ArrowDropDownIconRoot: { transition: "all 0.2s", transform: "rotate(0)" },
ArrowDropDownIconRootOpen: { transform: "rotate(180deg)" },
contentWrap: {
padding: "8px 0", height: 0, transition: "all 1s", position: "absolute", zIndex: 9, width: "100%",
backgroundColor: "#FFFFFF", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.16)", borderRadius: "4px",
overflowY: "auto",
maxHeight: "400px"
},
contentWrapOpen: { height: "auto" },
rootListItem: { width: "100%", paddingRight: "0px" },
root: { flex: '1 1 auto', minWidth: 0, color: '#222', marginTop: '4px', marginBottom: '4px' },
primary: { fontSize: "14px" },
lg: { fontSize: "16px" },
sm: { fontSize: "13px" },
md: { fontSize: "12px" },
selected: {
// background:'red',
// color:'red'
}
})
export default props => {
const classes = useStyles();
const { value, size, option, callback, noBorder, rootStyle, customSvg, textStyle, sz, startIcon, DropdownboxStyle, DropdownboxitemStyle } = props;
const [open, setOpen] = useState(false)
const [values, setValue] = useState(value || CLOUDE.Options)
const handleClick = (event) => {
event.stopPropagation()
setOpen((open) => !open)
}
const handleMouseUp = (event) => {
setOpen(false)
event && event.stopPropagation()
}
useEffect(() => {
window.addEventListener('click', handleMouseUp, false)
return () => window.removeEventListener('click', handleMouseUp, false)
}, [])
useEffect(() => {
setValue(value)
}, [value])
const selectClick = (event, item) => {
setValue(item.label)
callback && callback(item)
handleMouseUp()
event.stopPropagation()
}
const resizeBys = (sty) => {
switch (size) {
case "large":
return sty + "Large";
case "small":
return sty + "Small";
case "xsmall":
return sty + "Xsmall";
default:
return sty;
}
}
const reBorder = (sty) => {
switch (noBorder) {
case "true_cn":
return "noBorder" + sty;
case "true_en":
return "noBorderEn" + sty;
default:
return sty;
}
}
const fontsizeFun = () => {
switch (sz) {
case 'lg':
case 'sm':
case 'md':
return sz;
default:
return "primary"
}
}
return (
<Grid className={
cx({
[classes[reBorder('wrap')]]: true,
[classes[resizeBys("wrapHeight")]]: true,
})
} onClick={(e) => e.stopPropagation()}>
<Grid onClick={handleClick} className={
cx({
[classes[resizeBys('inputHeight')]]: true,
[classes[reBorder('inputWrap')]]: true,
[classes.inputWrapOpen]: open && !noBorder
})
}
style={{ ...rootStyle }}
>
{startIcon && startIcon}
<Typography className={classes.text} style={{ ...textStyle }}>{values || CLOUDE.Options}</Typography>
{
customSvg ? (
(
<div style={{ ...customSvg }}>
<ArrowDropDownIcon classes={{
root: cx({
[classes.ArrowDropDownIconRoot]: true,
[classes.ArrowDropDownIconRootOpen]: open
})
}} />
</div>
)
) : (<ArrowDropDownIcon classes={{
root: cx({
[classes.ArrowDropDownIconRoot]: true,
[classes.ArrowDropDownIconRootOpen]: open
})
}} />)
}
</Grid>
{
open && (
<Grid onClick={(e) => e.stopPropagation()} className={
cx({
[classes.contentWrap]: true,
[classes.contentWrapOpen]: open
})
} style={{ ...DropdownboxStyle, DropdownboxitemStyle }} id="select-wrap-content">
<Grid className={classes.gridScroll}>
<List component="nav" className={classes.root} aria-label="contacts">
{
option && option.map((item, key) => {
return (
<ListItem
selected={values === item.label}
classes={{ root: classes.rootListItem, selected: classes.selected }} key={key} button
style={{ ...DropdownboxitemStyle }}
onClick={(event) => selectClick(event, item)}
>
{item.icon ? <Selectzone Icon={item.icon} selected={values === item.label} key={key} classes={{ root: classes.rootListItem, popper: classes.popper, primary: classes[fontsizeFun()] }} selectClick={selectClick} item={item} /> : <ListItemText primary={item.label}
classes={{ primary: classes[fontsizeFun()] }}
/>}
</ListItem>
)
})
}
</List>
</Grid>
</Grid>
)
}
</Grid >
)
}
\ No newline at end of file
src/components/Material.Ui/SelectCheckBox.jsx 0 → 100644
View file @ 0a8bc331
This diff is collapsed.
src/components/Material.Ui/Selectzone.jsx 0 → 100644
View file @ 0a8bc331
import React, { useState, useEffect } from "react";
import { makeStyles } from '@material-ui/core/styles';
import {
Grid,
ListItemText,
Tooltip,
} from "@material-ui/core";
import icon from '../../../console/cloudelastic/assets/img/templates/icon_about_grey.png'
const useStyles = makeStyles({
popper:{fontSize:'12px'}
})
export default props => {
const classesstyle=useStyles()
const { item, classes , Icon , selected } = props;
const [hover, sethover] = useState(false);
const [select,setselect] = useState(false)
useEffect(() => {
setselect(selected?true:false)
}, [selected]);
const move = () => {
!hover&&sethover(true)
};
const leave = () => {
hover&&sethover(false)
};
return (
<Grid
onMouseEnter={move}
onMouseLeave ={leave}
style={{display:'flex',alignItems:"center",justifyContent:'space-between',width:"100%",background:Icon === 'dashBoard' &&selected?'rgba(25, 28, 31, 1)':''}}
>
{
Icon === 'dashBoard' && <Grid style={{
width:'2px',
height:'34px',
marginRight:'13px',
background:selected?'linear-gradient(180deg, #F05A28 0%, #FBC40D 100%)':'transparent',
}}></Grid>
}
<ListItemText
primary={item.label}
classes={{ primary: classes.primary }}
/>
{Icon !=='dashBoard' &&item.description&&hover&&<Tooltip
arrow
placement={'top'}
classes={{
tooltip: classesstyle.popper,
}}
title={item.description?item.description:""}><img src={item.src?item.src:icon} alt='' style={{ width: "16px",height:'16px', marginRight: "10px" ,marginLeft:'auto'}}/></Tooltip>}
</Grid>
);
};
src/components/Material.Ui/Spin.jsx 0 → 100644
View file @ 0a8bc331
import React from "react";
import "./css/Spin.css";
export default (props) => {
const { spin, relative } = props;
if (!spin) return ""
return (
<div className="ant-spin ant-spin-spinning ant-spin-show-text" style={{ position: relative ? "relative" : "" }}>
<span className="ant-spin-dot ant-spin-dot-spin">
<i className="ant-spin-dot-item"></i>
<i className="ant-spin-dot-item"></i>
<i className="ant-spin-dot-item"></i>
<i className="ant-spin-dot-item"></i>
</span>
<div className="ant-spin-text">Loading...</div>
<div className="ant-spin-background">
</div>
</div>
)
}
\ No newline at end of file
src/components/Material.Ui/Table.jsx 0 → 100644
View file @ 0a8bc331
import React from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Checkbox from "@material-ui/core/Checkbox";
import Spin from "@/commons/components/Material.Ui/Spin";
import EnhancedTableToolbarComponent from "./Table/EnhancedTableToolbar"
import EnhancedTableHeadComponent from "./Table/EnhancedTableHead"
import { getComparator, stableSort, useStyles } from "./Table/function";
import ActionsComponent from "./Table/ActionsComponent"
import { useEffect } from "react";
export default function EnhancedTable(props) {
const classes = useStyles();
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("");
const { headCells, rows, footer = true, elevation1, tableStyle,tablecellstyle, tableContainerStyle, stickyheader, TableHeadClasses, onRowClick, defaultRow, minHeight='', borderBottom='', onDoubleClick,
load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox ,RowHeight='',CellWidth='',rowHover, TableNodataPadding = '',TableNodataLineHeight=''} = props;
const [selected, setSelected] = React.useState(initSelected || []);
const [rowsPerPageOptions, setRowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
const [spin, setSpin] = React.useState(false)
const [onRow, setOnRow] = React.useState('')
useEffect(() => {
setOnRow(defaultRow)
}, [defaultRow])
const onRowClickDefault = (value) => {
setOnRow(value)
onRowClick(value)
}
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
const handleSelectAllClick = (event) => {
if (event.target.checked) {
const newSelecteds = rows.map((n) => n[param || 'id']);
setSelected(newSelecteds);
checkboxData(newSelecteds);
return;
}
setSelected([]);
checkboxData([]);
};
React.useEffect(() => {
setSpin(load)
}, [load]);
const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(
selected.slice(0, selectedIndex),
selected.slice(selectedIndex + 1)
);
}
checkboxData(newSelected)
setSelected(newSelected);
};
const handleOnPageChange = (event, newPage) => {
changePage(newPage, rowsPerPage);
};
const handleChangeRowsPerPage = (event) => {
changePage(0, parseInt(event.target.value, 10));
};
const isSelected = (name) => selected.indexOf(name) !== -1;
const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
return (
<div className={classes.root}>
<Paper className={classes.paper} classes={{ elevation1: elevation1 || classes.elevation1 }} >
<Spin spin={spin} />
{toolbar && toolbar}
<TableContainer style={{ ...tableContainerStyle }}>
<Table stickyHeader={stickyheader || false} className={classes.table} style={{ ...tableStyle }} aria-labelledby="tableTitle" size={size || "medium"} aria-label="cloudam table header" >
<EnhancedTableHeadComponent
classes={classes}
{...props}
numSelected={selected.length}
headTableCellCheckbox={headTableCellCheckbox}
order={order}
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={rows.length}
headCells={headCells || []}
/>
<TableBody>
{
(rows.length === 0 && !load) && <TableRow>
<TableCell
colSpan={headCells.filter(k => k.id === "checkbox").length === 0 ? headCells.length : headCells.length + 1}
className={classes.TypographyStyle}
style={{ minHeight: minHeight, height: minHeight, borderBottom: borderBottom ,padding:TableNodataPadding,lineHeight:TableNodataLineHeight}}
>
No Data
</TableCell>
</TableRow>
}
{stableSort(rows, getComparator(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
const isItemSelected = isSelected(row[param || "id"]);
const labelId = `enhanced-table-checkbox-${index}`;
return (
<TableRow
hover={ rowHover ? false : (row[disabledparam || "enabled"] ? true : false)}
onClick={(event) => {
if (!row[disabledparam]) return;
onRowClick && onRowClickDefault(row[param || "id"])
headCells.filter(k => k.id === "checkbox").length > 0 && handleClick(event, row[param || "id"])
}}
onDoubleClick={() => {
onDoubleClick && onDoubleClick(row)
}}
style={{
height:RowHeight,
border: onRow === row[param || "id"] ? !row[disabledparam] ? "" : '1px solid #136EFA' : "",
backgroundColor: onRow === row[param || "id"] ? !row[disabledparam] ? "rgba(255, 255, 255, 0.4)" : "rgba(19, 110, 250, 0.1)" : "",
cursor: props.cursor ? (row[props.cursor] ? "pointer" : "auto") : (onRowClick ? !row[disabledparam] ? "no-drop" : "pointer" : "auto"),
opacity: !row[disabledparam] ? 0.3 : 1
}}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row[param || "id"]}
selected={isItemSelected}
>
{
headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell padding="checkbox">
<Checkbox color={"primary"} checked={isItemSelected} inputProps={{ "aria-labelledby": labelId }} />
</TableCell>
}
{
headCells.map((item, k) => {
return (
<TableCell key={k} component="th" id={labelId + k}
// align={}
style={{ width:CellWidth, textAlign: item.numeric ? "right" : "left", paddingRight: item.sort && item.numeric ? "40px" : "",border:tablecellstyle }}
scope="row"
padding={item.disablePadding ? "none" : "default"}
classes={{
body: props.bodyTableCell || classes.bodyTableCell
}}
> {row[item.id]} </TableCell>
)
})
}
</TableRow>
);
})}
{/* {emptyRows > 0 && (
<TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)} */}
</TableBody>
</Table>
</TableContainer>
{
footer && <TablePagination
rowsPerPageOptions={rowsPerPageOptions}
component="div"
count={count || rows.length}
rowsPerPage={rowsPerPage}
page={page}
ActionsComponent={ActionsComponent}
onChangePage={handleOnPageChange}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
}
</Paper>
</div>
);
}
src/components/Material.Ui/Table/ActionsComponent.jsx 0 → 100644
View file @ 0a8bc331
import React from 'react';
import PropTypes from 'prop-types';
import Button from "@material-ui/core/Button";
import IconButton from '@material-ui/core/IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import LastPageIcon from '@material-ui/icons/LastPage';
import makeStyles from "@material-ui/styles/makeStyles";
const useStyles = makeStyles({
firstPageIconStyle: { width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', margin: "0 6px" },
KeyboardArrowLeftStyle:{ width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', marginRight: "3px" },
keyboardArrowRightStyle:{ width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', marginLeft: "3px" },
lastPageIconStyle:{ width: '28px', height: '28px', padding: 0, backgroundColor: '#FFFFFF', borderRadius: '2px', border: '1px solid #D8D8D8', margin: "0 6px" }
})
const TablePaginationActionsConsole = props => {
const classes = useStyles();
const { count, page, rowsPerPage, onChangePage } = props;
const handleFirstPageButtonClick = (event) => {
onChangePage(event, 0);
}
const handleBackButtonClick = (event) => {
onChangePage(event, page - 1);
}
const handleNextButtonClick = (event) => {
onChangePage(event, page + 1);
}
const btnClick = (event, item) => {
onChangePage(event, item);
}
const handleLastPageButtonClick = (event) => {
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
}
const buttons = (count, page, rowsPerPage) => {
let max = 1;
if( rowsPerPage !== -1 ){
max = count % rowsPerPage === 0 ? count / rowsPerPage : parseInt(count / rowsPerPage) + 1;
}
let arr = [...Array(max).keys()];
return arr.map((item) => {
if (item - 4 <= page && item + 4 >= page && count > 4)
return <Button
key={item}
onClick={() => btnClick('', item)}
style={{ minWidth: '28px', marginRight: "3px", marginLeft: "3px", minHeight: '28px', lineHeight: '28px', fontSize: "12px", border: page === item ? "1px solid #136EFA" : "1px solid #D8D8D8", color: page === item ? "#fff" : "#111111", background: page === item ? '#136EFA' : "#fff", borderRadius: "2px", padding: '0' }}>
{item + 1}
</Button>
return ""
})
}
return (
<div style={{ flexShrink: 0, }}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
className={classes.firstPageIconStyle}
aria-label="first page"
>
<FirstPageIcon />
</IconButton>
<IconButton
className = { classes.KeyboardArrowLeftStyle }
onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
<KeyboardArrowLeft />
</IconButton>
{
buttons(count, page, rowsPerPage)
}
<IconButton
onClick={handleNextButtonClick}
className={classes.keyboardArrowRightStyle}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
<KeyboardArrowRight />
</IconButton>
<IconButton
className={classes.lastPageIconStyle}
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
<LastPageIcon />
</IconButton>
</div>
);
}
TablePaginationActionsConsole.propTypes = {
count: PropTypes.number.isRequired,
onChangePage: PropTypes.func.isRequired,
page: PropTypes.number.isRequired,
rowsPerPage: PropTypes.number.isRequired,
};
export default TablePaginationActionsConsole
\ No newline at end of file
src/components/Material.Ui/Table/EnhancedTableHead.jsx 0 → 100644
View file @ 0a8bc331
import React from "react";
import TableHead from "@material-ui/core/TableHead";
import TableSortLabel from "@material-ui/core/TableSortLabel";
import PropTypes from "prop-types";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
import Checkbox from "@material-ui/core/Checkbox";
import { Typography } from "@material-ui/core";
import Tooltip from '@material-ui/core/Tooltip';
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
const EnhancedTableHead = (props) => {
const { classes, onSelectAllClick, order, orderBy, TableHeadClasses, numSelected, rowCount, onRequestSort, headCells, headTableCell, headTableCellCheckbox,RowStyle } = props;
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
return (
<TableHead classes={{ root: TableHeadClasses || classes.TableHeadClasses }}>
<TableRow style={{...RowStyle}}>
{
headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell padding="checkbox">
<Checkbox
color={'primary'}
indeterminate={numSelected > 0 && numSelected < rowCount}
checked={rowCount > 0 && numSelected === rowCount}
onChange={onSelectAllClick}
inputProps={{ "aria-label": "select all desserts" }}
/>
</TableCell>
}
{headCells.map((headCell,k) => (
<TableCell
key={headCell.id}
style={{ width: headCell.width ? headCell.width : "", textAlign: headCell.numeric ? "right" : "left", display: headCell.id !== "checkbox" ? "" : "none" }}
padding={headCell.disablePadding ? "none" : "default"}
sortDirection={orderBy === headCell.id ? order : false}
classes={{ head:( k && headTableCell) || classes.headTableCell }}
>
{
headCell.sort && <TableSortLabel active={orderBy === headCell.id} direction={order} onClick={createSortHandler(headCell.id)} >
{headCell.label}
</TableSortLabel>
}
{
!headCell.sort && <Typography className={headTableCellCheckbox || ''} style={headCell.tooltip ? { display: "flex", alignItems: "center" } : {}} >
{headCell.label}
{headCell.tooltip ? <Tooltip title={headCell.tooltip} placement="top" arrow>
<ErrorOutlineIcon style={{ fontSize: "16px",marginLeft:"5px" }} fontSize="small" />
</Tooltip> : ""}
</Typography>
}
</TableCell>
))}
</TableRow>
</TableHead>
);
}
EnhancedTableHead.propTypes = {
classes: PropTypes.object.isRequired,
numSelected: PropTypes.number.isRequired,
onRequestSort: PropTypes.func.isRequired,
onSelectAllClick: PropTypes.func.isRequired,
order: PropTypes.oneOf(["asc", "desc"]).isRequired,
orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired,
};
export default EnhancedTableHead
\ No newline at end of file
src/components/Material.Ui/Table/EnhancedTableToolbar.jsx 0 → 100644
View file @ 0a8bc331
import React from "react";
import { useToolbarStyles } from "./function";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import PropTypes from "prop-types";
import clsx from "clsx";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import DeleteIcon from "@material-ui/icons/Delete";
import FilterListIcon from "@material-ui/icons/FilterList";
const EnhancedTableToolbar = (props) => {
const classes = useToolbarStyles();
const { numSelected } = props;
return (
<Toolbar
className={clsx(classes.root, { [classes.highlight]: numSelected > 0 })}
>
{numSelected > 0 ? (
<Typography
className={classes.title}
color="inherit"
variant="subtitle1"
component="div"
>
{numSelected} selected
</Typography>
) : (
<Typography
className={classes.title}
variant="h6"
id="tableTitle"
component="div"
>
Nutrition
</Typography>
)}
{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton aria-label="filter list">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</Toolbar>
);
};
EnhancedTableToolbar.propTypes = {
numSelected: PropTypes.number.isRequired,
};
export default EnhancedTableToolbar;
\ No newline at end of file
src/components/Material.Ui/Table/function.js 0 → 100644
View file @ 0a8bc331
import { lighten, makeStyles } from "@material-ui/core/styles";
/*
*@分割线=======================================================================================================================================
*@Description: 排序算法
*@File:
*@param: {} []
*@MethodAuthor: dawei.liu
*@Date: 2021-07-22 14:42:51
*/
export function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy])
return -1;
if (b[orderBy] > a[orderBy])
return 1;
return 0;
}
/*
*@分割线=======================================================================================================================================
*@Description: 表格排序
*@File: /commons/components/Material.Ui/Table.jsx
*@param: {} []
*@MethodAuthor: dawei.liu
*@Date: 2021-07-22 14:42:36
*/
export function getComparator(order, orderBy) {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
/*
*@分割线=======================================================================================================================================
*@Description: 排序算法
*@File:
*@param: {} []
*@MethodAuthor: dawei.liu
*@Date: 2021-07-22 14:42:24
*/
export function stableSort(array, comparator) {
const stabilizedThis = array.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) return order;
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
/*
*@分割线=======================================================================================================================================
*@Description: table toolbar styles
*@File: EnhancedTableToolbar
*@param: {} []
*@MethodAuthor: dawei.liu
*@Date: 2021-07-22 14:41:53
*/
export const useToolbarStyles = makeStyles((theme) => ({
root: {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1),
},
highlight:
theme.palette.type === "light"
? {
color: theme.palette.primary.main,
backgroundColor: lighten(theme.palette.primary.light, 0.85),
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.primary.dark,
},
title: { flex: "1 1 100%" },
}));
/*
*@分割线=======================================================================================================================================
*@Description: 样式
*@File:
*@param: {theme} [theme]
*@MethodAuthor: dawei.liu
*@Date: 2021-07-22 14:40:37
*/
export const useStyles = makeStyles((theme) => ({
root: { width: "100%", position: "relative" },
paper: { width: "100%", marginBottom: theme.spacing(2) },
elevation1: { boxShadow: "none", padding: "20px" },
elevationNoPadding: { boxShadow: "none", padding: "0" },
table: { minWidth: 500 },
visuallyHidden: { border: 0, clip: "rect(0 0 0 0)", height: 1, margin: -1, overflow: "hidden", padding: 0, position: "absolute", top: 20, width: 1 },
LinearProgressStyle: { position: "absolute", left: 0, top: "0", width: "100%" },
TypographyStyle: { height: "300px", width: "100%", justifyContent: "center", alignItems: "center", color: "#666", fontSize: "16px", textAlign: "center" },
bodyTableCell: { color: "#222222", fontSize: "12px", borderBottom: "1px solid rgba(34, 34, 34, 0.08)", padding: "10px", paddingLeft: "16px" },
headTableCell: { color: "rgba(34, 34, 34, 0.65)", fontSize: "12px", padding: "16px" },
rootTableContainer: { position: "relative", overflowX: "auto", maxHeight: "700px" },
TableHeadClasses: { backgroundColor: "rgba(34, 34, 34, 0.03)" },
bodyTableCellRoot: { borderBottom: "1px solid rgba(34, 34, 34, 0.08)", },
TypographyboderStyle: { height: "300px", width: "100%", justifyContent: "center", alignItems: "center", color: "#666", fontSize: "16px", textAlign: "center", borderBottom: "none" },
rootTableboderContainer: { position: "relative", overflowX: "auto", maxHeight: "700px", border: "1px solid rgb(216, 216, 216)" },
cancelHoverStyle:{"&:hover": { background: 'none !important' },}
}));
\ No newline at end of file
src/components/Material.Ui/TablePage.jsx 0 → 100644
View file @ 0a8bc331
This diff is collapsed.
src/components/Material.Ui/Text.jsx 0 → 100644
View file @ 0a8bc331
import React from "react";
import { Typography } from "@material-ui/core";
import PropTypes from "prop-types";
import makeStyles from "@material-ui/styles/makeStyles";
const useStyles = makeStyles({
h3: { fontSize: "24px" },
h4: { fontSize: "20px" },
h5: { fontSize: "16px" },
body1: { fontSize: "14px" },
subtitle1: { fontSize: "13px" },
subtitle2: { fontSize: "12px" },
colorInherit: { color: "#222222" },
colorInherit_hover: { color: "#222222", "&:hover": { color: "#136EFA" } },
colorSecondary: { color: "#00CCCC" },
colorError: { color: "#FF4E4E" },
colorTextPrimary: { color: "#0DD09B" },
HiddenRoot: {
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
},
line: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}
});
const TextComponent = props => {
const classes = useStyles();
const fontWT = (fontWeight) => {
switch (fontWeight) {
case "small":
return 300;
case "large":
return 500;
case "big":
return 600;
case "bigger":
return 800;
default:
return 400;
}
}
const opacityFun = (value) => {
switch (value) {
case 'l':
return 0.05
case 'm':
return 0.08
case 'mh':
return 0.1
case 'h':
return 0.15
case 'xs':
return 0.25
case 'ss':
return 0.3
case 'sm':
return 0.45
case 'mm':
return 0.5
case 'md':
return 0.65
case 'gx':
return 0.8
case 'lg':
return 0.85
default:
return 1
}
}
const { text, align, color, display, gutterBottom, variant, fw, op, style, wordBreak, line, click, hover, hoverClass = false } = props;
const defaultClick = () => { }
const stylesFun = () => {
return {
wordBreak: wordBreak ? "break-all" : "keep-all",
textTransform: "none",
...style,
fontWeight: fontWT(fw),
opacity: opacityFun(op),
WebkitLineClamp: line && line.num ? line.num : 1,
width: line && line.width ? line.width : "auto",
maxWidth: line && line.maxWidth ? line.maxWidth : "100%",
}
}
return (
<Typography
align={align || "inherit"}
color={color || "inherit"}
display={display || "initial"}
gutterBottom={gutterBottom || false}
variant={variant || "body1"}
onClick={click || defaultClick}
classes={{
h3: classes.h3,
h4: classes.h4,
h5: classes.h5,
body1: classes.body1,
subtitle1: classes.subtitle1,
subtitle2: classes.subtitle2,
colorInherit: hover ? (hoverClass || classes.colorInherit_hover) : classes.colorInherit,
colorSecondary: classes.colorSecondary,
colorTextPrimary: classes.colorTextPrimary,
colorError: classes.colorError,
root: line ? (line.num && line.num === 1 ? classes.line : classes.HiddenRoot) : classes.root
}}
style={stylesFun()}
>
{text || ''}
</Typography>
)
}
TextComponent.propTypes = {
fw: PropTypes.oneOf(["bigger","big", "large", "medium", "small"]),
variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit']),
color: PropTypes.oneOf(["initial", "inherit", "primary", "secondary", "textPrimary", "textSecondary", "error"]),
op: PropTypes.oneOf(['', 'l', 'm', 'mh', 'h', 'xs', 'ss', 'sm', 'mm', 'md', 'lg', 'gx', 'xl']),
};
export default TextComponent
\ No newline at end of file
src/components/Material.Ui/TipError.jsx 0 → 100644
View file @ 0a8bc331
import React from 'react';
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
import Text from "@/commons/components/Material.Ui/Text"
import makeStyles from "@material-ui/styles/makeStyles";
import { Grid } from '@material-ui/core';
const useStyles = makeStyles({
tipBody: { width: "100%", height: "40px", background: "#FFEDED", boxShadow: "0px 2px 6px 0px rgba(189, 14, 0, 0.03)", borderRadius: "4px", display: "flex", alignItems: "center" },
root: { marginRight: 0 }
})
export default props => {
const { text } = props;
const classes = useStyles()
return (
<Grid className={classes.tipBody}>
<ErrorOutlineIcon style={{ color: "#FF4E4E", margin: "0px 10px 0px 20px" }} fontSize="small" />
<Text color={"error"} variant={"subtitle2"} text={text} />
</Grid>
)
}
\ No newline at end of file
src/components/Material.Ui/TipNote.jsx 0 → 100644
View file @ 0a8bc331
import React from 'react';
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
import makeStyles from "@material-ui/styles/makeStyles";
import { Grid } from '@material-ui/core';
import { Typography } from "@material-ui/core";
import { BACKEND_API_URI_PREFIX } from "@/commons/utils/api_prefix";
const useStyles = makeStyles({
tipBody: { border: "1px solid rgba(19, 110, 250, 0.09)", borderRadius: "4px", display: "flex", alignItems: "center" },
root: { marginRight: 0 },
goText: {
color: "rgb(19, 110, 250)",
cursor: "pointer",
'&:hover': {
textDecoration: "underline"
}
}
})
export default props => {
const { style, text, iconColor, backgroundColor, margin, manual } = props;
const classes = useStyles()
return (
<Grid className={style ? style : classes.tipBody} style={{ backgroundColor: backgroundColor ? backgroundColor : "#FFEDED", margin: margin ? margin : "0" }} >
<ErrorOutlineIcon style={{ color: iconColor ? iconColor : "#FF4E4E", margin: "0px 10px 0px 20px" }} fontSize="small" />
<Typography style={{ fontSize: "12px", marginRight: "20px" ,padding:'12px 0'}}>
{text || ''}
{
manual ? (
<span className={classes.goText} onClick={()=>{
window.open(BACKEND_API_URI_PREFIX + '/helpce/docs/2027/about3', '_blank')
}}>
安装手册
</span>
) : ""
}
</Typography>
</Grid>
)
}
\ No newline at end of file
src/components/Material.Ui/TipTooltip.jsx 0 → 100644
View file @ 0a8bc331
import React from 'react';
import makeStyles from '@material-ui/styles/makeStyles';
import Tooltip from "@/commons/components/Material.Ui/Tooltip";
const COIN_IAMGE_TIPS = require("@/console/cloudelastic/assets/img/templates/icon_about_grey.png");
const useStyles = makeStyles({
tooltipStyle: { lineHeight: "22px" ,backgroundColor: "#4D4D4D", borderRadius: "4px",padding:"8px 10px"}
});
export default props => {
const classes = useStyles();
const { title, marginLeft,iconWidth } = props;
return (
<Tooltip title={title} tooltip={classes.tooltipStyle}>
<img src={COIN_IAMGE_TIPS} style={{ width:iconWidth || "16px", marginLeft: marginLeft || "8px" }} alt="" />
</Tooltip>
)
}
\ No newline at end of file
src/components/Material.Ui/Tooltip.jsx 0 → 100644
View file @ 0a8bc331
import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
import makeStyles from "@material-ui/styles/makeStyles";
const useStyles = makeStyles({
tooltip: { backgroundColor: "#4D4D4D", borderRadius: "4px",padding:"8px 10px" ,fontSize:'12px'},
})
export default props => {
const classes = useStyles()
const { title, placement, children,tooltip } = props
return (
<Tooltip
interactive={true}
title={title}
classes={{
popper: classes.popper,
tooltip:tooltip || classes.tooltip
}}
placement={placement || "top"}>
{children}
</Tooltip>
)
}
// placement 'bottom-end'
// | 'bottom-start'
// | 'bottom'
// | 'left-end'
// | 'left-start'
// | 'left'
// | 'right-end'
// | 'right-start'
// | 'right'
// | 'top-end'
// | 'top-start'
// | 'top'
src/components/Material.Ui/ViewPasswordDialog.jsx 0 → 100644
View file @ 0a8bc331
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Dialogs from "@/commons/components/Dialog/Dialogs";
import { Typography } from "@material-ui/core";
import { CopyToClipboard } from 'react-copy-to-clipboard';
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
import Public from "@/commons/components/Public";
import { CLOUDE } from "@/commons/utils/constants";
import { Grid } from "@material-ui/core";
import Text from "@/commons/components/Material.Ui/Text"
const useStyles = makeStyles({
classNameType:{ maxWidth:'inherit' }
})
export default props => {
const { open, password, closeDialogCallBack, system } = props;
const classes = useStyles()
const { setMessages, render } = Public()
return render(
<Dialogs
dialogs={open}
type="2"
classes={classes}
isBotton={false}
btnMarginTop="20px"
mixWidth="28rem"
height="11.125rem"
classNameType = {'classNameType'}
isBottom={true}
style={{ flex: 1 }}
closeAccountDialog={() => closeDialogCallBack()}
>
<Grid style={{ margin: "0 auto", padding: "46px 0 60px", boxSizing: "border-box", alignItems: 'center' }}>
<Grid style={{ display: "flex", }} >
<Text variant={"body1"} text={CLOUDE['userName'] + "：" + (system === "LINUX" ? "cloudam" : "Administrator")} />
<CopyToClipboard text={system === "LINUX" ? "cloudam" : "Administrator"}
onCopy={() => {
setMessages({
message: CLOUDE['copySuccess'],
messagetype: 'success',
})
}}>
<FileCopyOutlinedIcon fontSize={'small'} style={{ color: "#136EFA", marginLeft: "10px", cursor: "pointer" }} />
</CopyToClipboard>
</Grid>
<Grid style={{ display: "flex", }} >
<Grid style={{ textAlign: 'center', display: "flex", alignItems: "center" }}>
<Text variant={"body1"} text={CLOUDE['password'] + "："} />
<Text variant={"body1"} text={password} />
</Grid>
<CopyToClipboard text={`${password}`}
onCopy={() => {
setMessages({
message: CLOUDE['copySuccess'],
messagetype: 'success',
})
}}>
<FileCopyOutlinedIcon fontSize={'small'} style={{ color: "#136EFA", marginLeft: "10px", cursor: "pointer" }} />
</CopyToClipboard>
</Grid>
</Grid>
</Dialogs>
)
}
\ No newline at end of file
src/components/Material.Ui/caculate.jsx 0 → 100644
View file @ 0a8bc331
import React from 'react'
import { makeStyles,Grid, } from '@material-ui/core'
import Text from "@/commons/components/Material.Ui/Text"
import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
import SelectComponent from "@/commons/components/Material.Ui/Input"
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
const style= makeStyles({
flex:{
minWidth:'74px',
height:'32px',
display:'flex',
alignItems:'center',
justifyContent:'space-evenly',
border:'1px solid rgba(216, 216, 216, 0.6)'
},
icon:{
height:'32px',
display:'flex',
flexDirection:'column',
justifyContent:'space-around'
// overflow:'hidden',
},
up:{
height:'0',
width:'0',
cursor:'pointer',
border:'5px solid transparent',
borderBottomColor:'rgba(117, 117, 117, 1)'
},
down:{
height:'0',
width:'0',
cursor:'pointer',
border:'5px solid transparent',
borderTopColor:'rgba(117, 117, 117, 1)'
},
handwareRightContentGrid2:{
width:'74px',
height:'32px',
},
customizationRoot:{
height:'16px',
}
})
let time = 0
let timer = null
let timer2 = null
let numCache = 0
let upCache = false
export default props => {
const classes = style()
const [num,setNum] = React.useState(72)
const { change, current } = props
const operation ={
down:(up)=>{
numCache = num
time = 0
upCache = up ? true : false
window.addEventListener('mouseup',operation.up)
timer = setTimeout( ()=>{
time = 1
operation.ldown(up)
} ,500 )
},
up:()=>{
window.removeEventListener('mouseup',operation.up)
clearTimeout(timer)
timer = null
timer2 && clearTimeout(timer2)
timer2 = null
if(time === 0 && !(!upCache && numCache <= 0)) {
setNum(upCache?numCache+1:numCache-1)
}
timer = 0
},
ldown:(up)=>{
timer2 && clearTimeout(timer2)
if( !up && numCache <= 0 ) return
numCache = up?(numCache+1):(numCache-1)
setNum(numCache)
timer2 = setTimeout(()=>{
time = time+1
operation.ldown(up)
},time>10?100:200)
},
change:(e)=>{
if( e.target.value.indexOf('-') > -1 ) return
setNum(Number(e.target.value))
}
}
React.useEffect(()=>{
time = 0
timer = null
timer2 = null
numCache = 0
upCache = false
},[])
React.useEffect(()=>{
![undefined,''].includes(current) && setNum(current)
},[current])
React.useEffect(()=>{
change && change( num )
},[num])
const typeInput = {
icon: (type) => {
return (
<Grid className={classes.icon}>
<Grid className={classes.up} onMouseDown={()=>operation.down(1)}></Grid>
<Grid className={classes.down} onMouseDown={()=>operation.down()}></Grid>
</Grid>
)
},
}
return (
<Grid className={classes.handwareRightContentGrid2}>
<SelectComponent
size='xsmall'
customClass = {classes.customizationRoot}
fullWidth={true}
textAlign={"right"}
value={String(num)}
endAdornment={typeInput.icon("cpu")}
type={'number'}
onChange={operation.change}
/>
</Grid>)
}
\ No newline at end of file
src/components/Material.Ui/css/Spin.css 0 → 100644
View file @ 0a8bc331
.ant-spin-spinning{
opacity:1
}
.ant-spin{
position: absolute;
top: 0;
left: 0;
z-index: 4;
display: block;
width: 100%;
z-index: 999;
height: 100%;
min-height: 100px;
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5715;
list-style: none;
font-feature-settings: "tnum";
color: #1890ff;
text-align: center;
transition: transform .3s cubic-bezier(.78,.14,.15,.86);
}
.ant-spin.ant-spin-show-text .ant-spin-dot{
margin-top: -20px;
}
.ant-spin .ant-spin-dot{
position: absolute;
top: 50%;
left: 50%;
margin: -10px;
z-index: 11111;
}
.ant-spin-dot-spin{
transform: rotate( 45deg );
-webkit-animation: antRotate 1.2s infinite linear;
animation: antRotate 1.2s infinite linear;
}
.ant-spin-dot{
display: inline-block;
font-size: 20px;
width: 1em;
height: 1em;
}
.ant-spin-dot-item{
position: absolute;
display: block;
width: 9px;
height: 9px;
background-color: #1890ff;
border-radius: 100%;
transform: scale(.75);
transform-origin: 50% 50%;
opacity: .3;
-webkit-animation: antSpinMove 1s infinite linear alternate;
animation: antSpinMove 1s infinite linear alternate;
}
.ant-spin-dot-item:nth-child(1){
top: 0;
left: 0;
}
.ant-spin-dot-item:nth-child(2){
top: 0;
right: 0;
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.ant-spin-dot-item:nth-child(3) {
right: 0;
bottom: 0;
-webkit-animation-delay: .8s;
animation-delay: .8s;
}
.ant-spin-dot-item:nth-child(4) {
bottom: 0;
left: 0;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.ant-spin .ant-spin-text {
position: absolute;
top: 50%;
width: 100%;
padding-top: 5px;
text-shadow: 0 1px 2px #fff;
font-weight: 500;
}
.ant-spin.ant-spin-show-text .ant-spin-text {
display: block;
}
@-webkit-keyframes antRotate {
to {
transform: rotate(405deg)
}
}
@keyframes antRotate {
to {
transform: rotate(405deg)
}
}
@-webkit-keyframes antSpinMove {
to {
opacity: 1
}
}
@keyframes antSpinMove {
to {
opacity: 1
}
}
.ant-spin-background{
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.6);
z-index: 9999;
transition: all 0.3s;
}
\ No newline at end of file
src/components/mui/Tabs.tsx 0 → 100644
View file @ 0a8bc331
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-01 14:46:35
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { memo } from "react";
import { Box } from "@mui/system";
import Tab from "@mui/material/Tab";
import { TabContext, TabList, TabPanel } from "@mui/lab";
interface ITabList {
label: string;
value: string;
component: JSX.Element;
}
interface IProps {
value: string;
onChange: (val: string) => void;
tabList: ITabList[];
}
const Tabs = (props: IProps) => {
const { value, onChange, tabList } = props;
return (
<TabContext value={value}>
<Box sx={{ borderBottom: 1, borderColor: "#F0F2F5" }}>
<TabList
onChange={(e: any, val: string) => {
onChange(val);
}}
aria-label="lab API tabs example"
>
{tabList?.map((item) => {
return (
<Tab label={item.label} value={item.value} key={item.value} />
);
})}
</TabList>
</Box>
{tabList?.map((item) => {
return (
<TabPanel value={item.value} key={item.value}>
{item.component}
</TabPanel>
);
})}
</TabContext>
);
};
export default memo(Tabs);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment