Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

update 3 files and delete 1 file

Browse Source
master
Reza_ashrafi 2 years ago
parent 99a5f07cc5
commit 0e6c073a99
4 changed files with 25 additions and 217 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. 149
      src/components/Input/index.js
  2. 60
      src/components/Input/index.scss
  3. 23
      src/views/Auth/Profile/GenderSwitch/index.js
  4. 4
      src/views/Auth/Profile/index.js

149
src/components/Input/index.js
Unescape View File

@ -1,39 +1,13 @@
import React, { useState } from "react"; import React, { useState } from "react";
import _ from "lodash"; import _ from "lodash";
import "./index.scss";
const langDetector = (lang, option1, option2) => {
return lang === "fa" ? option1 : option2;
};
const inputStatusHandler = (value, focus, status, primary, success, danger) => {
if (!focus) {
return "";
} else {
if (!value) {
return primary;
} else {
if (status) {
return success;
} else {
return;
}
}
}
};
export default function Input(props) { export default function Input(props) {
const [focusToggle, setFocusToggle] = useState(false); const [focusToggle, setFocusToggle] = useState(false);
const { const {
backgroundColor,
lang,
theme,
inputMode, inputMode,
label, label,
status,
maxLength, maxLength,
message,
onChange, onChange,
align, align,
name, name,
@ -45,136 +19,27 @@ export default function Input(props) {
return ( return (
<div <div
className={_.join( className="input flex flex-col relative my-2 dark:bg-opacity-10 w-full"
[
"input flex flex-col relative my-2 dark:bg-opacity-10 w-full",
langDetector(lang, "fa", "en"),
],
" "
)}
style={{ width }} style={{ width }}
> >
{/* <label <label
className={_.join( className={`absolute right-2 transform bg-white -translate-y-1/2 dark:text-white px-2 text-xs transition-all duration-300 pointer-events-none ${value || focusToggle ? "top-0 text-xs" : "top-1/2 text-sm"} ${focusToggle ? "text-blueC0" : "text-gray1"}`}
[
"absolute top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-white px-2 text-xs transition-all duration-300",
langDetector(lang, "right-2", "left-2"),
inputStatusHandler(
value,
focusToggle,
status,
"input__labelFocus",
"input__labelSuccess",
"input__labelDanger"
),
],
" "
)}
onClick={() => setFocusToggle(true)}
> >
{label} {label}
</label> */} </label>
<input <input
type="text" type="text"
inputMode={inputMode} inputMode={inputMode}
placeholder={label} // placeholder={label}
className={_.join( className={`flex-1 border border-gray-300 dark:bg-opacity-10 dark:text-white focus:border-blueC0 rounded-md outline-none py-3 px-4 text-tiny ${align} ${direction}`}
[
`flex-1 border border-gray-300 dark:bg-opacity-10 dark:text-white rounded-md outline-none py-3 px-4 text-tiny ${
backgroundColor ? backgroundColor : "bg-transparent"
} ${align}`,
inputStatusHandler(
value,
focusToggle,
status,
"input__inputActive",
"input__inputSuccess",
"input__inputDanger"
),
"transition",
],
" "
)}
value={value} value={value}
style={{ direction: direction }}
onChange={(e) => onChange={(e) =>
onChange(name, (e.target.value = regex(e.target.value))) onChange(name, (e.target.value = regex(e.target.value)))
} }
onFocus={() => setFocusToggle(true)} onFocus={() => setFocusToggle(true)}
onBlur={() => (!value ? setFocusToggle(false) : setFocusToggle(true))} onBlur={() => setFocusToggle(false)}
maxLength={maxLength} maxLength={maxLength}
/> />
{/* {!status && value && (
<img
src={danger}
alt={langDetector(lang, "اشتباه", "wrong")}
className={_.join(
[
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
langDetector(lang, "left-2", "right-2"),
],
" "
)}
/>
)} */}
{/* {status && value && (
<img
src={tick}
alt={langDetector(lang, "درست", "right")}
className={_.join(
[
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
langDetector(lang, "left-2", "right-2"),
],
" "
)}
/>
)} */}
{value && !status && (
<span
className={_.join(
[
"input__message text-xs absolute -bottom-5",
langDetector(lang, "right-2", "left-2"),
inputStatusHandler(
value,
focusToggle,
status,
"",
"input__messageSuccess",
"input__messageDanger"
),
"transition",
],
" "
)}
>
{message}
</span>
)}
{/* {value && (
<span
className={_.join(
[
"input__length absolute -bottom-5 text-xs",
langDetector(lang, "left-2", "right-2"),
inputStatusHandler(
value,
focusToggle,
status,
"",
"input__lengthSuccess",
"input__lengthDanger"
),
"transition",
],
" "
)}
>
{value.length + "/" + maxLength}
</span>
)} */}
</div> </div>
); );
} }

60
src/components/Input/index.scss
Unescape View File

@ -1,60 +0,0 @@
$primary: #23C933;
$gray: #dbdbdb;
$danger: #E00A0A;
$success: #23C933;
.input {
&__labelFocus{
top: 0px !important;
font-size: 9px !important;
color: $primary !important;
}
&__labelDanger{
top: 0px !important;
font-size: 9px !important;
color: $danger !important;
}
&__labelSuccess{
top: 0px !important;
font-size: 9px !important;
color: $success !important;
}
&__inputActive{
border-color: $primary !important;
}
&__inputSuccess{
border-color: $success !important;
}
&__inputDanger{
border-color: $danger !important;
}
&__message{
&Success{
color: $success;
}
&Danger{
color: $danger;
}
}
&__length{
&Success{
color: $success;
}
&Danger{
color: $danger;
}
}
}
.en {
direction: ltr;
text-align: left;
}
.fa {
direction: rtl;
text-align: right;
}

23
src/views/Auth/Profile/GenderSwitch/index.js
Unescape View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import './index.scss'; import "./index.scss";
export default function GenderSwitch({ export default function GenderSwitch({
onChange, onChange,
@ -9,18 +9,21 @@ export default function GenderSwitch({
label, label,
}) { }) {
return ( return (
<div className="gender flex justify-between items-center"> <div className="flex flex-col w-full gap-4">
<strong className="text-sm text-gray1">{label}</strong>
<div className="flex w-full items-center gap-4">
{options?.map((option, index) => (
<div <div
className={selectedOption === 2 && "gender__active"} className={`rounded-sm py-3 flex-1 transition-all border border-solid border-blueC0 duration-500 cursor-pointer text-center ${
onClick={() => onChange(name, 2)} selectedOption === index + 1
? "bg-blueC0 text-white"
: " text-blueC0"
}`}
onClick={() => onChange(name, index + 1)}
> >
{options[0]} {option}
</div> </div>
<div ))}
className={selectedOption === 1 && "gender__active"}
onClick={() => onChange(name, 1)}
>
{options[1]}
</div> </div>
</div> </div>
); );

4
src/views/Auth/Profile/index.js
Unescape View File

@ -472,7 +472,7 @@ function Profile({
</div> </div>
) : ( ) : (
<div <div
className="flex flex-col items-center gap-5 w-full pt-5" className="flex flex-col items-center gap-5 w-full pt-5 select-none"
onSubmit={(e) => onSubmit()} onSubmit={(e) => onSubmit()}
> >
<Upload <Upload
@ -565,7 +565,7 @@ function Profile({
onChange={(name, value) => onChange={(name, value) =>
setFormData({ ...formData, [name]: value }) setFormData({ ...formData, [name]: value })
} }
label="" label="جنسیت"
/> />
<div className="w-full"></div> <div className="w-full"></div>
</div> </div>

Write Preview
Loading…
Cancel
Save