ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update prettier setting

Browse Source
This commit is contained in:
zerosoul
2022-06-12 15:30:14 +08:00
parent 14b4678d9e
commit 516794d352
209 changed files with 2435 additions and 4588 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/styled/Input.js
+4 -21
View File
@@ -65,39 +65,22 @@ const StyledInput = styled.input`
}
`;
export default function Input({
type = "text",
prefix = "",
className,
...rest
}) {
export default function Input({ type = "text", prefix = "", className, ...rest }) {
const [inputType, setInputType] = useState(type);
const togglePasswordVisible = () => {
setInputType((prev) => (prev == "password" ? "text" : "password"));
};
return type == "password" ? (
<StyledWrapper className={className}>
<StyledInput
type={inputType}
className={`inner ${className}`}
{...rest}
/>
<StyledInput type={inputType} className={`inner ${className}`} {...rest} />
<div className="view" onClick={togglePasswordVisible}>
{inputType == "password" ? (
<HiEyeOff color="#78787c" />
) : (
<HiEye color="#78787c" />
)}
{inputType == "password" ? <HiEyeOff color="#78787c" /> : <HiEye color="#78787c" />}
</div>
</StyledWrapper>
) : prefix ? (
<StyledWrapper className={className}>
<span className="prefix">{prefix}</span>
<StyledInput
className={`inner ${className}`}
type={inputType}
{...rest}
/>
<StyledInput className={`inner ${className}`} type={inputType} {...rest} />
</StyledWrapper>
) : (
<StyledInput type={inputType} className={className} {...rest} />
src/common/component/styled/Menu.js
+1 -2
View File
@@ -5,8 +5,7 @@ const StyledMenu = styled.ul`
gap: 2px;
padding: 4px;
background-color: #fff;
box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1),
0px 10px 10px rgba(31, 41, 55, 0.04);
box-shadow: 0px 20px 25px 20px rgba(31, 41, 55, 0.1), 0px 10px 10px rgba(31, 41, 55, 0.04);
border-radius: 12px;
min-width: 200px;
.item {
src/common/component/styled/Radio.js
+75 -75
View File
@@ -3,89 +3,89 @@ import styled from "styled-components";
import { nanoid } from "@reduxjs/toolkit";
const StyledForm = styled.form`
> .option {
&:not(:last-child) {
margin-bottom: 8px;
}
> input[type="radio"] {
display: none;
& + .box {
width: 512px;
background: #ffffff;
border: 1px solid #d0d5dd;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
transition: all ease-in-out 250ms;
& > label {
display: flex;
flex-direction: row;
align-items: center;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #667085;
cursor: pointer;
user-select: none;
transition: all ease-in-out 250ms;
&:before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
border-radius: 8px;
background: #ffffff;
box-shadow: inset 0 0 0 4px #ffffff;
border: 1px solid #d0d5dd;
margin: 14px 8px 14px 14px;
transition: all ease-in-out 500ms;
}
> .option {
&:not(:last-child) {
margin-bottom: 8px;
}
}
&:checked + .box {
background: #22ccee;
border: 1px solid #d0d5dd;
> input[type="radio"] {
display: none;
& > label {
color: #ffffff;
& + .box {
width: 512px;
background: #ffffff;
border: 1px solid #d0d5dd;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
transition: all ease-in-out 250ms;
&:before {
background: #ffffff;
box-shadow: inset 0 0 0 4px #22ccee;
border: 1px solid #ffffff;
}
& > label {
display: flex;
flex-direction: row;
align-items: center;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #667085;
cursor: pointer;
user-select: none;
transition: all ease-in-out 250ms;
&:before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
border-radius: 8px;
background: #ffffff;
box-shadow: inset 0 0 0 4px #ffffff;
border: 1px solid #d0d5dd;
margin: 14px 8px 14px 14px;
transition: all ease-in-out 500ms;
}
}
}
&:checked + .box {
background: #22ccee;
border: 1px solid #d0d5dd;
& > label {
color: #ffffff;
&:before {
background: #ffffff;
box-shadow: inset 0 0 0 4px #22ccee;
border: 1px solid #ffffff;
}
}
}
}
}
}
}
`;
export default function Radio({ options, value = undefined, onChange = undefined }) {
const [innerValue, setInnerValue] = useState(0);
const id = useRef(nanoid());
const [innerValue, setInnerValue] = useState(0);
const id = useRef(nanoid());
return (
<StyledForm>
{options.map((item, index) => (
<div className="option" key={index}>
<input
type="radio"
checked={(value !== undefined ? value : innerValue) === index}
onChange={() => {
value === undefined && setInnerValue(index);
onChange !== null && onChange(index);
}}
id={`${id.current}-${index}`}
/>
<div className="box">
<label htmlFor={`${id.current}-${index}`}>{item}</label>
</div>
</div>
))}
</StyledForm>
);
return (
<StyledForm>
{options.map((item, index) => (
<div className="option" key={index}>
<input
type="radio"
checked={(value !== undefined ? value : innerValue) === index}
onChange={() => {
value === undefined && setInnerValue(index);
onChange !== null && onChange(index);
}}
id={`${id.current}-${index}`}
/>
<div className="box">
<label htmlFor={`${id.current}-${index}`}>{item}</label>
</div>
</div>
))}
</StyledForm>
);
}
src/common/component/styled/Select.js
+1 -3
View File
@@ -48,9 +48,7 @@ export default function Select({ options = [], updateSelect = null }) {
{options.map(({ title, value, selected, underline }) => {
return (
<li
onClick={
selected ? null : handleSelect.bind(null, { title, value })
}
onClick={selected ? null : handleSelect.bind(null, { title, value })}
className={`item sb ${underline ? "underline" : ""}`}
data-disabled={selected}
key={value}