Skip to content

B
bkunyun
Commit 30de630e authored by rocosen's avatar rocosen
Browse files
Options

input

parent ebe9370e
Hide whitespace changes
Inline Side-by-side
Showing with 359 additions and 2 deletions
src/components/mui/Input.tsx 0 → 100644
View file @ 30de630e
import React, { FC } from "react";
import { Props } from "ahooks/lib/useControllableValue";
import { makeStyles } from "tss-react/mui";
import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material";
import { TextField } from '@mui/material';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
type selectData = {
json: any[]
native?: boolean
}
type resizeBysData = 'outlinedLarge' | 'outlined' | 'outlinedSmall' | 'outlinedXsmall' | 'MuiOutlinedInputInputLarge' | 'MuiOutlinedInputInput' | 'MuiOutlinedInputInputSmall' | 'MuiOutlinedInputInputXsmall'
// type b = 'selectPropsLarge' | 'selectPropsSmall' | 'selectPropsXsmall'
type TextFieldProps = {
label?: string
autoFocus?: boolean
type?: string
defaultValue?: string
placeholder?: string
variant?: "outlined" | "standard" | "filled" | undefined
select?: selectData
disabled?: boolean
onChange?: () => void;
onBlur?: () => void;
error?: boolean
helperText?: string
fullWidth?: boolean
rows?: number
multiline?: boolean
required?: boolean
onkeydown?: () => void;
margin?: "none" | "dense" | undefined
size?: string
selectSize?: string
selectStyle?: any
startAdornment?: JSX.Element;
endAdornment?: JSX.Element;
disabledClass?: any
textAlign?: 'right' | 'center' | 'left'
customClass?: any
value?: any
onFocus?: () => void;
}
const InputComponent = (props: TextFieldProps) => {
const { label, autoFocus, type, defaultValue, placeholder, variant, select, disabled, onChange, onBlur, error, helperText,
fullWidth, rows, multiline, required, onkeydown, margin, size, selectSize, selectStyle, startAdornment, endAdornment,
disabledClass, textAlign, customClass, value, onFocus
} = props;
const { classes, cx } = useStyles({});
const onChangeDefault = () => { }
const resizeBys = (sty: string) => {
switch (size) {
case "large":
return sty + "Large";
case "small":
return sty + "Small";
case "xsmall":
return sty + "Xsmall";
default:
return sty;
}
}
const reSelectSizeBys = (sty: string) => {
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") as resizeBysData]]: true,
...(textAlign ? { [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: {
root: classes[resizeBys("outlined") as resizeBysData],
error: classes.errorLabel
}
}}
FormHelperTextProps={{
classes: {
error: classes.errorFormHelperTextProps
}
}}
SelectProps={{
native: (select && select.native) || false,
classes: {
outlined: textAlign ? classes[`SelectProps${textAlign}`] : classes['SelectPropsleft'],
// selectMenu: classes[reSelectSizeBys("selectProps") as b]
}
}}
>
{
select && select.json && select.json.length > 0 && select.json.map((option: any, 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") as resizeBysData]]: true,
...(textAlign ? { [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: {
root: classes[resizeBys("outlined") as resizeBysData],
error: classes.errorLabel
}
}}
FormHelperTextProps={{
classes: {
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: any, key) => {
return (
<MenuItem key={key} disabled={option.disabled || false} value={option.value} className={selectStyle || classes.defaultSelectStyle}>
{option.label}
</MenuItem>
)
})
}
</TextField>
)
}
const useStyles = makeStyles<{}>()(
(theme, { }) => ({
MuiOutlinedInputInputLarge: { padding: "13.5px 15px !important", MozAppearance: 'textfield' },
MuiOutlinedInputInput: { padding: "12px 15px !important", "&::placeholder": { fontSize: "14px" }, MozAppearance: 'textfield' },
MuiOutlinedInputInputSmall: { padding: "10px 15px !important", "&::placeholder": { fontSize: "13px" }, MozAppearance: 'textfield' },
MuiOutlinedInputInputXsmall: { padding: "8px 15px !important", "&::placeholder": { fontSize: "12px" }, MozAppearance: 'textfield' },
outlinedLarge: { transform: "translate(14px, 15.5px) scale(1) ", fontSize: '14px !important', fontWeight: '400 !important', color: '#707070 !important' },
outlined: { transform: "translate(14px, 14px) scale(1) ", fontSize: '14px !important', fontWeight: '400 !important', color: '#707070 !important' },
outlinedSmall: { transform: "translate(14px, 11px) scale(1) ", fontSize: '14px !important', fontWeight: '400 !important', color: '#707070 !important' },
outlinedXsmall: { transform: "translate(12px, 11px) scale(1) ", fontSize: '13px !important', fontWeight: '400 !important', color: '#707070 !important' },
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 InputComponent;
\ No newline at end of file
src/views/Project/ProjectWorkbench/index.tsx
View file @ 30de630e
...@@ -27,6 +27,7 @@ import List_select from "@/assets/project/workbenchList_select.svg" ...@@ -27,6 +27,7 @@ import List_select from "@/assets/project/workbenchList_select.svg"
//ui //ui
import ButtonDemo from "@/views/mui_demo/button" import ButtonDemo from "@/views/mui_demo/button"
import InputDemo from "@/views/mui_demo/input"
const ProjectWorkbench = observer(() => { const ProjectWorkbench = observer(() => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
...@@ -55,12 +56,19 @@ const ProjectWorkbench = observer(() => { ...@@ -55,12 +56,19 @@ const ProjectWorkbench = observer(() => {
iconed: List_select iconed: List_select
}, },
{ {
label: "按钮组件库", label: "按钮组件",
value: "MUI", value: "MUI_BUTTON",
component: <ButtonDemo />, component: <ButtonDemo />,
icon: List, icon: List,
iconed: List_select iconed: List_select
}, },
{
label: "输入框组件",
value: "MUI_INPUT",
component: <InputDemo />,
icon: List,
iconed: List_select
},
]; ];
}, []); }, []);
......
src/views/mui_demo/input.tsx 0 → 100644
View file @ 30de630e
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import DeleteIcon from '@mui/icons-material/Delete';
import { InputAdornment } from '@mui/material';
import InputComponent from "@/components/mui/Input";
const ProjectMembers = () => {
const http = useHttp();
const { currentProjectStore } = useStores();
useEffect(() => {
}, []);
return (
<>
<InputComponent
fullWidth={false}
label={"test"}
defaultValue={"sssssssss"}
size={'large'}
/>
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"test"}
error={true}
helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"test"}
size={'small'}
disabled
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"xsmall"}
size={'xsmall'}
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
placeholder={"测试机哦"}
endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>}
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent fullWidth={false} size={"small"} placeholder={"xxxxxx"} endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>} />
<br /> <br />
<InputComponent
fullWidth={true}
select={
{
json: [{value:'1',label:"2"},{value:'3',label:"4"}]
}
}
/>
<br /><br />
{/* <SelectComponent
option={json}
/>
<br /><br />
<SelectComponent
option={json}
size={"large"}
/>
<br /><br />
<SelectComponent
option={json}
size={"small"}
/> */}
<br /><br />
</>
);
};
export default memo(ProjectMembers);
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