bcjang/operationSystem-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
bcjang
2025-02-12 18:29:27 +09:00
commit 513ea114cc
290 changed files with 84274 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/common/input/AuthCheckBox.js Normal file
View File

@@ -0,0 +1,64 @@
import styled from 'styled-components';
import CheckIcon from '../../../assets/img/icon/icon-chk.png';
const AuthCheckBox = props => {
//console.log(props.defaultChecked);
return (
<>
<CheckBoxStyle>
<InputCheck
type="checkbox"
name={props.name}
className="input-check"
id={props.id}
disabled={props.disabled}
onChange={e => props.setData && props.setData(e)}
checked={props.checked !== undefined ? props.checked : false}
// defaultChecked={props.defaultChecked}
onClick={props.handleCheck && props.handleCheck}
/>
<Label htmlFor={props.id}>{props.label}</Label>
</CheckBoxStyle>
</>
);
};
export default AuthCheckBox;
const CheckBoxStyle = styled.div`
display: inline-flex;
align-items: center;
justify-content: center;
`;
const InputCheck = styled.input`
position: absolute;
opacity: 0;
&:checked + label:before, &:disabled + label:before {
background: url(${CheckIcon}) no-repeat;
background-position: -32px 0px;
}
`;
const Label = styled.label`
position: relative;
display: inline-block;
cursor: pointer;
padding-left: 21px;
font-weight: 600;
width: max-content;
&:before {
content: '';
display: inline-block;
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 0;
width: 16px;
height: 16px;
overflow: hidden;
vertical-align: middle;
background: url(${CheckIcon}) no-repeat;
background-position: 0px 0px;
}
`;

74
src/components/common/input/CheckBox.js Normal file
View File

@@ -0,0 +1,74 @@
import styled from 'styled-components';
import CheckIcon from '../../../assets/img/icon/icon-chk.png';
const CheckBox = props => {
//console.log(props.defaultChecked);
return (
<>
<CheckBoxStyle>
<InputCheck
type="checkbox"
name={props.name}
className="input-check"
id={props.id}
disabled={props.disabled}
onChange={e => props.setData && props.setData(e)}
checked={props.checked}
defaultChecked={props.defaultChecked}
onClick={props.handleCheck && props.handleCheck}
/>
<Label htmlFor={props.id}>{props.label}</Label>
</CheckBoxStyle>
</>
);
};
export default CheckBox;
const CheckBoxStyle = styled.div`
display: ${({inline}) => (inline === false ? 'block' : 'inline-flex')};
margin-top: ${({inline}) => (inline === false ? '10px' : '')};
align-items: center;
justify-content: center;
`;
// const CheckBoxStyle = styled.div`
// display: 'inline-flex';
// align-items: center;
// justify-content: center;
// `;
const InputCheck = styled.input`
position: absolute;
opacity: 0;
&:checked + label:before {
background: url(${CheckIcon}) no-repeat;
background-position: -32px 0px;
}
&:disabled + label:before {
background: url(${CheckIcon}) no-repeat;
background-position: -16px 0px;
}
`;
const Label = styled.label`
position: relative;
display: inline-block;
cursor: pointer;
padding-left: 21px;
font-weight: 600;
width: max-content;
&:before {
content: '';
display: inline-block;
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 0;
width: 16px;
height: 16px;
overflow: hidden;
vertical-align: middle;
background: url(${CheckIcon}) no-repeat;
background-position: 0px 0px;
}
`;

46
src/components/common/input/DateTimeInput.js Normal file
View File

@@ -0,0 +1,46 @@
import { DateGroup, DatePickerWrapper, InputGroup, InputLabel, SelectInput } from '../../../styles/Components';
import DatePickerComponent from '../Date/DatePickerComponent';
import { HourList, MinuteList } from '../../../assets/data';
import { RegistInputItem, SubText } from '../../../styles/ModuleComponents';
import { useTranslation } from 'react-i18next';
const DateTimeInput = ({title, dateName, selectedDate, handleSelectedDate, onChange}) => {
const { t } = useTranslation();
return(
<RegistInputItem>
{title && <InputLabel>{title}</InputLabel>}
<DateGroup>
<InputGroup>
<DatePickerWrapper>
<DatePickerComponent name={dateName} selectedDate={selectedDate} handleSelectedDate={handleSelectedDate} pastDate={new Date()} />
</DatePickerWrapper>
<SelectInput
onChange={onChange}
id="hour"
defaultValue={selectedDate && String(selectedDate.getHours()).padStart(2, '0')}
>
{HourList.map(hour => (
<option value={hour} key={hour}>
{hour}
</option>
))}
</SelectInput>
<SelectInput
onChange={onChange}
id="min"
defaultValue={selectedDate && String(selectedDate.getMinutes()).padStart(2, '0')}
>
{MinuteList.map(min => (
<option value={min} key={min}>
{min}
</option>
))}
</SelectInput>
</InputGroup>
<SubText>{t('DATE_KTC')}</SubText>
</DateGroup>
</RegistInputItem>
)
}
export default DateTimeInput;

50
src/components/common/input/Radio.js Normal file
View File

@@ -0,0 +1,50 @@
import styled from 'styled-components';
import RadioIcon from '../../../assets/img/icon/icon-radio.png';
const RadioInput = ({ label, id, name, value, fontSize, fontWeight, checked, handleChange, handleClick, disabled }) => {
return (
<>
<RadioWrapper fontSize={fontSize} fontWeight={fontWeight} onClick={handleClick}>
<input type="radio" name={name} id={id} value={value} checked={checked} onChange={handleChange} disabled={disabled} />
<label htmlFor={id}>{label}</label>
</RadioWrapper>
</>
);
};
export default RadioInput;
const RadioWrapper = styled.div`
display: inline-block;
vertical-align: middle;
margin-bottom: 5px;
label {
position: relative;
display: inline-block;
cursor: pointer;
padding-left: 20px;
width: max-content;
font-size: ${props => props.fontSize || '14px'};
font-weight: 600;
&:before {
content: '';
display: inline-block;
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 0;
width: 14px;
height: 14px;
vertical-align: middle;
background: url('${RadioIcon}') no-repeat;
}
}
input {
position: absolute;
opacity: 0;
&:checked + label:before {
background: url('${RadioIcon}') no-repeat;
background-position: -14px 0;
}
}
`;