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

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

@ -8,29 +8,33 @@ const FormFields = ({
defaultValue,
set,
label,
className,
borderClassname,
type,
maxLength,
max,
min,
register,
onClick,
}) => {
const [value, setValue] = useState(defaultValue);
return (
<div
onClick={onClick}
className={
"h-full rounded border border-color7 mx-1 relative flex items-center flex-row-reverse bg-color2_5" +
className +
(value ? " border-blue-500 bg-white border rounded" : " bg-transparent")
"h-full flex flex-row items-center rounded border mx-1 relative " +
borderClassname +
(value
? " border-[#2483E1] bg-white border rounded"
: " bg-transparent")
}
>
<div
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
? `text-blue-500 bg-white top-[-10px]`
: "text-color19 top-[20px]")
? `text-[#2483E1] bg-white top-[-10px]`
: "text-[#0F0543] top-[10px]")
}
>
{label}
@ -41,7 +45,9 @@ const FormFields = ({
maxLength={maxLength}
value={value}
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)}
inputMode={type === "number" ? "numeric" : ""}
onInput={(e) => {
@ -69,3 +75,7 @@ const 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 Input from "./Input";
const FormInput = () => {
const { register, getValues } = useForm();
const [selectedInput, setSelectedInput] = useState(false);
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="flex-grow px-4">
@ -12,6 +14,10 @@ const FormInput = () => {
register={register("firstName")}
// defaultValue={info?.firstName}
label="نام "
borderClassname={` ${
selectedInput === true ? "border-[#E0E0E0]" : "border-[#2483E1]"
}`}
onClick={() => setSelectedInput(true)}
/>
</div>
<div className="flex-grow px-4">

Loading…
Cancel
Save