pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

some debug

Browse Source
main
alireza khaji 3 years ago
parent a40a064265
commit e42bc8616e
2 changed files with 100 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 182
      src/components/input/index.js
  2. 5
      src/view/register/index.js

182
src/components/input/index.js
Unescape View File

@ -3,95 +3,103 @@ import _onInput from "../../utils/onInput";
const Input = ({ const Input = ({
title, title,
borderType, borderType,
gapSize, gapSize,
id, id,
type, type,
direction, direction,
className, className,
onChange, onChange,
style, style,
bg, bg,
value, value,
max, max,
onFocus onFocus,
defaultValue,
}) => { }) => {
useEffect(() => { useEffect(() => {
if (value !== null && value !== "" && value !== undefined) {
if(value !== null && value !== '' && value !== undefined){ blurHandler2(id ? id : 0);
blurHandler2(id ? id : 0) }
} }, [value]);
}, [value])
const focusHandler = (id) => { const focusHandler = (id) => {
let inputs = document.querySelectorAll(".Login-box-form-item"); let inputs = document.querySelectorAll(".Login-box-form-item");
let label = document.querySelectorAll(".Login-box-form-item-label"); let label = document.querySelectorAll(".Login-box-form-item-label");
let line = document.querySelectorAll(".Login-box-form-item-line"); let line = document.querySelectorAll(".Login-box-form-item-line");
inputs[id].style.borderColor = "#df1452";
inputs[id].style.backgroundColor = "#fff";
inputs[id].style.color = '#404040';
label[id].style.transform = `translate(-10px,-27px)`;
label[id].style.color = "#df1452";
line[id].style.backgroundColor = "#fff";
};
const blurHandler = (id) => { inputs[id].style.borderColor = "#df1452";
let inputsBox = document.querySelectorAll(".Login-box-form-item"); inputs[id].style.backgroundColor = "#fff";
let inputs = document.querySelectorAll(".Login-box-form-item-input"); inputs[id].style.color = "#404040";
let label = document.querySelectorAll(".Login-box-form-item-label"); label[id].style.transform = `translate(-10px,-27px)`;
let line = document.querySelectorAll(".Login-box-form-item-line"); label[id].style.color = "#df1452";
if (inputs[id]) { line[id].style.backgroundColor = "#fff";
inputsBox[id].style.borderColor = "#EBEBEB"; };
label[id].style.transform = "translate(-10px,-27px)";
label[id].style.color = "#959595";
inputs[id].style.backgroundColor = "#fff";
line[id].style.backgroundColor = "#fff";
}
}; const blurHandler = (id) => {
const blurHandler2 = (id) => { let inputsBox = document.querySelectorAll(".Login-box-form-item");
let inputsBox = document.querySelectorAll(".Login-box-form-item"); let inputs = document.querySelectorAll(".Login-box-form-item-input");
let inputs = document.querySelectorAll(".Login-box-form-item-input"); let label = document.querySelectorAll(".Login-box-form-item-label");
let label = document.querySelectorAll(".Login-box-form-item-label"); let line = document.querySelectorAll(".Login-box-form-item-line");
let line = document.querySelectorAll(".Login-box-form-item-line"); if (inputs[id]) {
if (inputs[id]) { inputsBox[id].style.borderColor = "#EBEBEB";
inputsBox[id].style.borderColor = "#404040"; label[id].style.transform = "translate(-10px,-27px)";
label[id].style.transform = "translate(-10px,-27px)"; label[id].style.color = "#959595";
label[id].style.color = "#404040"; inputs[id].style.backgroundColor = "#fff";
inputs[id].style.backgroundColor = "#fff"; line[id].style.backgroundColor = "#fff";
line[id].style.backgroundColor = "#fff"; }
} };
const blurHandler2 = (id) => {
}; let inputsBox = document.querySelectorAll(".Login-box-form-item");
return ( let inputs = document.querySelectorAll(".Login-box-form-item-input");
<div style={style} className={`${className} Login-box-form-item w-full h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7 mt-6 relative flex items-center flex-row-reverse`}> let label = document.querySelectorAll(".Login-box-form-item-label");
<div className={`Login-box-form-item-line w-${gapSize ? gapSize : '20'} h-px absolute top-[-1px] right-7 `}></div> let line = document.querySelectorAll(".Login-box-form-item-line");
<div className="Login-box-form-item-label text-sm text-color19 bg-white absolute right-6 transition-all duration-300 pointer-events-none"> if (inputs[id]) {
{title ? title : 'نام کاربری'} inputsBox[id].style.borderColor = "#404040";
</div> label[id].style.transform = "translate(-10px,-27px)";
<input label[id].style.color = "#404040";
type={type ? type : 'text'} inputs[id].style.backgroundColor = "#fff";
line[id].style.backgroundColor = "#fff";
name="Login-box-form-item-input-name" }
id={`Login-box-form-item-input-name${id}`} };
className={`Login-box-form-item-input w-full h-full px-4 outline-0 rounded-lg text-gray-700 `} return (
style={{ direction: direction ? direction : "ltr", backgroundColor: bg }} <div
onFocus={() => {if(onFocus){onFocus();} focusHandler(id ? id : 0)}} style={style}
className={`${className} Login-box-form-item w-full h-12 ${
borderType ? borderType : "rounded-lg"
onBlur={() => blurHandler(id ? id : 0)} } border border-color7 mt-6 relative flex items-center flex-row-reverse`}
onChange={onChange} >
value={value} <div
maxLength={max} className={`Login-box-form-item-line w-${
gapSize ? gapSize : "20"
/> } h-px absolute top-[-1px] right-7 `}
></div>
</div> <div className="Login-box-form-item-label text-sm text-color19 bg-white absolute right-6 transition-all duration-300 pointer-events-none">
) {title ? title : "نام کاربری"}
} </div>
<input
type={type ? type : "text"}
name="Login-box-form-item-input-name"
id={`Login-box-form-item-input-name${id}`}
className={`Login-box-form-item-input w-full h-full px-4 outline-0 rounded-lg text-gray-700 `}
style={{
pointerEvents : defaultValue ? "none" : 'auto',
direction: direction ? direction : "ltr",
backgroundColor: bg,
}}
onFocus={() => {
if (onFocus) {
onFocus();
}
focusHandler(id ? id : 0);
}}
onBlur={() => blurHandler(id ? id : 0)}
onChange={onChange}
value={value}
maxLength={max}
/>
</div>
);
};
export default Input; export default Input;

5
src/view/register/index.js
Unescape View File

@ -536,6 +536,7 @@ const Register = ({
direction="rtl" direction="rtl"
id={0} id={0}
value={userInfo?.firstName} value={userInfo?.firstName}
defaultValue={user?.firstName}
onChange={(e) => onChange={(e) =>
setUserInfo({ setUserInfo({
...userInfo, ...userInfo,
@ -550,6 +551,7 @@ const Register = ({
id={1} id={1}
direction="rtl" direction="rtl"
value={userInfo.lastName} value={userInfo.lastName}
defaultValue={user?.lastName}
onChange={(e) => onChange={(e) =>
setUserInfo({ setUserInfo({
...userInfo, ...userInfo,
@ -566,6 +568,7 @@ const Register = ({
type="textNumber" type="textNumber"
max={10} max={10}
value={userInfo.nationalId} value={userInfo.nationalId}
defaultValue={user?.nationalId}
onChange={(e) => onChange={(e) =>
setUserInfo({ setUserInfo({
...userInfo, ...userInfo,
@ -608,6 +611,7 @@ const Register = ({
setUserInfo({ ...userInfo, gender: e.target.value }) setUserInfo({ ...userInfo, gender: e.target.value })
} }
className="bg-white border border-solid border-gray-200 w-52 px-3 mx-1 rounded text-black outline-red52 py-1 h-12 mt-6" className="bg-white border border-solid border-gray-200 w-52 px-3 mx-1 rounded text-black outline-red52 py-1 h-12 mt-6"
style={user?.gender ? { pointerEvents: "none" } : null}
> >
{genders.map((item) => ( {genders.map((item) => (
<option <option
@ -661,6 +665,7 @@ const Register = ({
setUserInfo({ ...userInfo, gradeIds: e.target.value }) setUserInfo({ ...userInfo, gradeIds: e.target.value })
} }
className="bg-white border border-solid border-gray-300 w-48 p-3 rounded-lg text-black outline-red52 mx-6" className="bg-white border border-solid border-gray-300 w-48 p-3 rounded-lg text-black outline-red52 mx-6"
style={user?.gradeIds ? { pointerEvents: "none" } : null}
> >
<option value={null}>انتخاب پایه تحصیلی</option> <option value={null}>انتخاب پایه تحصیلی</option>
{grades.map((item) => ( {grades.map((item) => (

Write Preview
Loading…
Cancel
Save