parent
fca56638ec
commit
fa0d709565
7 changed files with 8345 additions and 8348 deletions
@ -0,0 +1,85 @@ |
||||
import React, { useState } from "react"; |
||||
import fixNumbers from "./fixNumbers"; |
||||
|
||||
const Input = ({ |
||||
defaultValue, |
||||
set, |
||||
label, |
||||
borderClassname, |
||||
inputClassname, |
||||
placeholderClass, |
||||
activePlaceholderClass, |
||||
type, |
||||
maxLength, |
||||
max, |
||||
min, |
||||
register, |
||||
onClick, |
||||
icon, |
||||
}) => { |
||||
const [value, setValue] = useState(defaultValue); |
||||
console.log(value); |
||||
return ( |
||||
<div |
||||
onClick={onClick} |
||||
className={ |
||||
"h-full w-full flex flex-row items-center rounded relative bg-[#F9F9F9] " + |
||||
borderClassname + |
||||
(value ? " bg-white border rounded " : " bg-white ") |
||||
} |
||||
> |
||||
<div |
||||
className={ |
||||
"text-xs absolute transition-all duration-300 pointer-events-none px-3 text-[#00253A] transform -translate-x-[4px]" + |
||||
(value |
||||
? ` ${activePlaceholderClass} + top-[-10px]` |
||||
: ` ${placeholderClass} + top-[10px]`) |
||||
} |
||||
> |
||||
{label} |
||||
</div> |
||||
{type !== "textarea" ? ( |
||||
<input |
||||
{...register} |
||||
maxLength={maxLength} |
||||
value={value} |
||||
type={"text"} |
||||
onInput={(e) => { |
||||
let value = e.target.value; |
||||
if (type === "number") |
||||
value = fixNumbers(value).replace(/[^\d.-]/g, ""); |
||||
if (maxLength && value.length > maxLength) |
||||
value = value.slice(0, maxLength); |
||||
if (!isNaN(max) && +e.target.value > max) value = max; |
||||
if (!isNaN(min) && +e.target.value < min) value = min; |
||||
e.target.value = value; |
||||
}} |
||||
className={`rtl w-full h-full outline-0 text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${inputClassname}
|
||||
${!value ? "bg-[#F9F9F9] " : "bg-white"} `}
|
||||
onChange={(e) => setValue(e.target.value)} |
||||
inputMode={type === "number" ? "numeric" : ""} |
||||
/> |
||||
) : ( |
||||
<textarea |
||||
{...register} |
||||
className={`rtl w-full h-full text-[#00253A] p-4 outline-0 resize-none text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${ |
||||
!value ? "bg-[#F9F9F9] " : "bg-white" |
||||
}`}
|
||||
onChange={(e) => setValue(e.target.value)} |
||||
> |
||||
{value} |
||||
</textarea> |
||||
)} |
||||
{icon && <img src={icon} alt="calender" className="ml-2" />} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Input; |
||||
|
||||
Input.defaultProps = { |
||||
inputClassname: "", |
||||
placeholderClass: "text-[#bdc3c7]", |
||||
activePlaceholderClass: "text-blue-600 bg-white", |
||||
icon: false, |
||||
}; |
||||
@ -0,0 +1,22 @@ |
||||
const persianNumbers = [ |
||||
/۰/g, |
||||
/۱/g, |
||||
/۲/g, |
||||
/۳/g, |
||||
/۴/g, |
||||
/۵/g, |
||||
/۶/g, |
||||
/۷/g, |
||||
/۸/g, |
||||
/۹/g, |
||||
], |
||||
arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g], |
||||
fixNumbers = function (str) { |
||||
if (typeof str === "string") { |
||||
for (var i = 0; i < 10; i++) { |
||||
str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i); |
||||
} |
||||
} |
||||
return str; |
||||
}; |
||||
export default fixNumbers; |
||||
@ -0,0 +1,37 @@ |
||||
import React from "react"; |
||||
|
||||
const RadioButton = () => { |
||||
return ( |
||||
<div className="relative flex items-center justify-between rounded py-4 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
||||
<div className="flex items-center justify-center flex-1 pl-5"> |
||||
<input |
||||
id="default-radio-1" |
||||
type="radio" |
||||
value="" |
||||
name="default-radio" |
||||
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" |
||||
/> |
||||
<label for="default-radio-1" class="mr-2 text-xs text-[#00253A]"> |
||||
بله |
||||
</label> |
||||
</div> |
||||
<div className="flex items-center justify-center flex-1 pl-5"> |
||||
<input |
||||
id="default-radio-2" |
||||
type="radio" |
||||
value="" |
||||
name="default-radio" |
||||
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" |
||||
/> |
||||
<label for="default-radio-2" class="mr-2 text-xs text-[#00253A]"> |
||||
خیر |
||||
</label> |
||||
</div> |
||||
<div class="absolute top-0 transform -translate-y-2.5 -translate-x-2 px-2 z-10 bg-white"> |
||||
<p className="text-xs text-[#00253A]">آیا قابلیت ارجاع دارد؟</p> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default RadioButton; |
||||
Loading…
Reference in new issue