update App.js, src/components/FolderTree/index.js, Input.js and src/components/FormInput/index.js

master
mahdi andalib 2 years ago
parent 8ce55208ea
commit 1c0d029641
  1. 5
      src/App.js
  2. 3
      src/components/FolderTree/index.js
  3. 26
      src/components/FormInput/Input.js
  4. 8
      src/components/FormInput/index.js

@ -120,7 +120,8 @@ function App() {
<BlogDesign5 /> <BlogDesign5 />
<BlogDesign6 /> */} <BlogDesign6 /> */}
{/* <Button /> <ButtonDivTag /> */} {/* <Button /> */}
{/* <ButtonDivTag /> */}
{/* ---------------------------- not usable ---------------------------- */} {/* ---------------------------- not usable ---------------------------- */}
{/* <ButtonDesign /> */} {/* <ButtonDesign /> */}
@ -212,7 +213,7 @@ function App() {
{/* <GridListTable /> */} {/* <GridListTable /> */}
{/* <PopupCard /> */} <PopupCard />
{/* ----------------------------$$$ start---------------------------- */} {/* ----------------------------$$$ start---------------------------- */}
{/* <CircleInCircle /> {/* <CircleInCircle />

@ -12,6 +12,7 @@ import opened from "./images/opened.svg";
const FolderState = ({ items }) => { const FolderState = ({ items }) => {
let [selected, setSelected] = useState(1); let [selected, setSelected] = useState(1);
let [top, setTop] = useState(1); let [top, setTop] = useState(1);
return ( return (
<> <>
<div <div
@ -29,6 +30,7 @@ const FolderState = ({ items }) => {
</> </>
); );
}; };
const FolderTree = ({ items, pid, selected, setSelected, setTop }) => { const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
const [expands, setExpand] = useState( const [expands, setExpand] = useState(
items.filter((item) => item.exapnd).map((item) => item.id) items.filter((item) => item.exapnd).map((item) => item.id)
@ -98,6 +100,7 @@ const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
}; };
export default FolderState; export default FolderState;
FolderState.defaultProps = { FolderState.defaultProps = {
items: [ items: [
{ {

@ -8,29 +8,33 @@ const FormFields = ({
defaultValue, defaultValue,
set, set,
label, label,
className, borderClassname,
type, type,
maxLength, maxLength,
max, max,
min, min,
register, register,
onClick,
}) => { }) => {
const [value, setValue] = useState(defaultValue); const [value, setValue] = useState(defaultValue);
return ( return (
<div <div
onClick={onClick}
className={ className={
"h-full rounded border border-color7 mx-1 relative flex items-center flex-row-reverse bg-color2_5" + "h-full flex flex-row items-center rounded border mx-1 relative " +
className + borderClassname +
(value ? " border-blue-500 bg-white border rounded" : " bg-transparent") (value
? " border-[#2483E1] bg-white border rounded"
: " bg-transparent")
} }
> >
<div <div
className={ className={
" text-sm absolute transition-all duration-300 pointer-events-none px-3 PY-2 text-left transform translate-x-[-10px] " + " text-xs absolute transition-all duration-300 pointer-events-none px-3 transform -translate-x-[7px] " +
(value (value
? `text-blue-500 bg-white top-[-10px]` ? `text-[#2483E1] bg-white top-[-10px]`
: "text-color19 top-[20px]") : "text-[#0F0543] top-[10px]")
} }
> >
{label} {label}
@ -41,7 +45,9 @@ const FormFields = ({
maxLength={maxLength} maxLength={maxLength}
value={value} value={value}
type={"text"} type={"text"}
className={"rtl w-full h-full px-4 outline-0 "} className={`rtl w-full h-full px-4 py-2 bg-[#F9F9F9] text-[#F9F9F9] outline-0 text-xs rounded focus:border-[#2483E1 focus:ring-[#2483E1
${value === "" ? "bg-[#F9F9F9]" : "bg-red-600"}
`}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
inputMode={type === "number" ? "numeric" : ""} inputMode={type === "number" ? "numeric" : ""}
onInput={(e) => { onInput={(e) => {
@ -69,3 +75,7 @@ const FormFields = ({
}; };
export default FormFields; export default FormFields;
FormFields.defaultProps = {
borderClassname: "border-[#2483E1] bg-indigo-600",
};

@ -1,10 +1,12 @@
import React from "react"; import React, { useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import Input from "./Input"; import Input from "./Input";
const FormInput = () => { const FormInput = () => {
const { register, getValues } = useForm(); const { register, getValues } = useForm();
const [selectedInput, setSelectedInput] = useState(false);
return ( return (
<div className="mx-72 mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm"> <div className="mx-72 mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3] divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm">
<div className="flex-grow px-4"> <div className="flex-grow px-4">
@ -12,6 +14,10 @@ const FormInput = () => {
register={register("firstName")} register={register("firstName")}
// defaultValue={info?.firstName} // defaultValue={info?.firstName}
label="نام " label="نام "
borderClassname={` ${
selectedInput === true ? "border-[#E0E0E0]" : "border-[#2483E1]"
}`}
onClick={() => setSelectedInput(true)}
/> />
</div> </div>
<div className="flex-grow px-4"> <div className="flex-grow px-4">

Loading…
Cancel
Save