update 3 files and delete 1 file

master
Reza_ashrafi 2 years ago
parent 99a5f07cc5
commit 0e6c073a99
  1. 149
      src/components/Input/index.js
  2. 60
      src/components/Input/index.scss
  3. 29
      src/views/Auth/Profile/GenderSwitch/index.js
  4. 4
      src/views/Auth/Profile/index.js

@ -1,39 +1,13 @@
import React, { useState } from "react";
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) {
const [focusToggle, setFocusToggle] = useState(false);
const {
backgroundColor,
lang,
theme,
inputMode,
label,
status,
maxLength,
message,
onChange,
align,
name,
@ -45,136 +19,27 @@ export default function Input(props) {
return (
<div
className={_.join(
[
"input flex flex-col relative my-2 dark:bg-opacity-10 w-full",
langDetector(lang, "fa", "en"),
],
" "
)}
className="input flex flex-col relative my-2 dark:bg-opacity-10 w-full"
style={{ width }}
>
{/* <label
className={_.join(
[
"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
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"}`}
>
{label}
</label> */}
</label>
<input
type="text"
inputMode={inputMode}
placeholder={label}
className={_.join(
[
`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",
],
" "
)}
// placeholder={label}
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}`}
value={value}
style={{ direction: direction }}
onChange={(e) =>
onChange(name, (e.target.value = regex(e.target.value)))
}
onFocus={() => setFocusToggle(true)}
onBlur={() => (!value ? setFocusToggle(false) : setFocusToggle(true))}
onBlur={() => setFocusToggle(false)}
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>
);
}

@ -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;
}

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

@ -472,7 +472,7 @@ function Profile({
</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()}
>
<Upload
@ -565,7 +565,7 @@ function Profile({
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
label=""
label="جنسیت"
/>
<div className="w-full"></div>
</div>

Loading…
Cancel
Save