update 8 files

master
mahdi 2 years ago
parent 67b6043616
commit e6f6fa74bf
  1. 6
      src/App.js
  2. 9
      src/components/AnimatedInput/Input.js
  3. 3
      src/components/DateRangePicker/index.js
  4. 9
      src/components/FormInput/index.js
  5. 2
      src/components/ReactTable5/BasicTable.js
  6. 15
      src/index.scss

@ -187,7 +187,7 @@ function App() {
{/* <FolderTree /> */} {/* <FolderTree /> */}
{/* ----------------------------$$$ end---------------------------- */} {/* ----------------------------$$$ end---------------------------- */}
{/* <ReactTable4 /> */} <ReactTable4 />
{/* <ReactTable5 /> */} {/* <ReactTable5 /> */}
{/* ----------------------------$$$ start---------------------------- */} {/* ----------------------------$$$ start---------------------------- */}
@ -209,7 +209,7 @@ function App() {
<FileManager /> <FileManager />
<GridListTable /> {/* <GridListTable /> */}
<PopupCard /> <PopupCard />
@ -265,7 +265,7 @@ function App() {
{/* <DateRangePicker /> */} {/* <DateRangePicker /> */}
{/* ----------------------------$$$ end---------------------------- */} {/* ----------------------------$$$ end---------------------------- */}
{/* <FormInput /> */} <FormInput />
{/* <LeafletMap /> */} {/* <LeafletMap /> */}

@ -9,6 +9,7 @@ const FormFields = ({
set, set,
label, label,
borderClassname, borderClassname,
inputClassname,
type, type,
maxLength, maxLength,
max, max,
@ -17,7 +18,7 @@ const FormFields = ({
onClick, onClick,
}) => { }) => {
const [value, setValue] = useState(defaultValue); const [value, setValue] = useState(defaultValue);
console.log(value);
return ( return (
<div <div
onClick={onClick} onClick={onClick}
@ -31,8 +32,8 @@ const FormFields = ({
className={ className={
"text-xs absolute transition-all duration-300 pointer-events-none px-3 transform -translate-x-[7px]" + "text-xs absolute transition-all duration-300 pointer-events-none px-3 transform -translate-x-[7px]" +
(value (value
? `text-[#2483E1] bg-white top-[-10px]` ? ` text-blue-600 bg-white top-[-10px]`
: "text-[#0F0543] top-[10px]") : " text-gray-400 top-[10px]")
} }
> >
{label} {label}
@ -54,7 +55,7 @@ const FormFields = ({
e.target.value = value; e.target.value = value;
}} }}
className={`rtl w-full h-full px-4 py-2 outline-0 text-xs rounded-md text-[#0F0543] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent className={`rtl w-full h-full px-4 py-2 outline-0 text-xs rounded-md text-[#0F0543] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent
${value === "" ? "bg-red-200 " : "bg-[#F9F9F9] "} `} ${!value ? "bg-[#F9F9F9] " : "bg-white "} `}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
inputMode={type === "number" ? "numeric" : ""} inputMode={type === "number" ? "numeric" : ""}
/> />

@ -49,11 +49,12 @@ function CustomRangeInput({ openCalendar, value }) {
const DateRangePicker = () => { const DateRangePicker = () => {
return ( return (
<div className="w-full" style={{ direction: "rtl" }}> <div className="w-full rtl flex flex-col-reverse">
{/* <Calendar calendar={persian} locale={persian_fa} /> {/* <Calendar calendar={persian} locale={persian_fa} />
<hr className="my-20" /> */} <hr className="my-20" /> */}
<DatePicker <DatePicker
range range
className="flex "
calendar={persian} calendar={persian}
locale={persian_fa} locale={persian_fa}
fixMainPosition={true} fixMainPosition={true}

@ -12,7 +12,7 @@ const FormInput = ({ items }) => {
const [selectedInput, setSelectedInput] = useState(false); const [selectedInput, setSelectedInput] = useState(false);
return ( return (
<div className="h-96 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-auto w-fit 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 flex-1 flex flex-col gap-y-4 px-4"> <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
<Input <Input
register={register("firstName")} register={register("firstName")}
@ -80,14 +80,15 @@ const FormInput = ({ items }) => {
/> />
</div> </div>
<div className="flex-grow flex-1 flex flex-col px-4 justify-between"> <div className="flex-grow flex-1 flex flex-col px-4 justify-between">
<Input <lable>تاریخ ورود</lable>
<DateRangePicker />{" "}
{/* <Input
register={register("lastName")} register={register("lastName")}
label="تاریخ ورود" label="تاریخ ورود"
type="text" type="text"
borderClassname={`border-transparent `} borderClassname={`border-transparent `}
className={``} className={``}
/> /> */}
<DateRangePicker />
</div> </div>
</div> </div>
); );

@ -240,7 +240,7 @@ const BasicTable = ({ addTab, activeTab }) => {
className: cell.column.className, className: cell.column.className,
})} })}
style={{ style={{
padding: "12px", padding: "20px",
fontSize: "13px", fontSize: "13px",
textAlign: "right", textAlign: "right",
whiteSpace: "nowrap", whiteSpace: "nowrap",

@ -19,7 +19,12 @@ body {
direction: rtl; direction: rtl;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.rtl {
direction: rtl;
}
.ltr {
direction: ltr;
}
.comment-num { .comment-num {
font-size: 8px; font-size: 8px;
padding-top: 4px; padding-top: 4px;
@ -28,6 +33,14 @@ body {
padding-right: 4px; padding-right: 4px;
border-radius: 50%; border-radius: 50%;
} }
.rmdp-container {
display: flex !important;
flex-direction: column-reverse;
}
.rmdp-container > div {
position: relative !important;
transform: none !important;
}
// TODO Start Alert Component // TODO Start Alert Component

Loading…
Cancel
Save