parent
							
								
									9711959824
								
							
						
					
					
						commit
						f5ba1596b0
					
				
				 10 changed files with 358 additions and 181 deletions
			
			
		| @ -1,61 +1,86 @@ | ||||
| import React, { useState } from "react"; | ||||
| import React from "react"; | ||||
| import onInput from "../../../../utils/onInput"; | ||||
| import Input from "../../../../components/Input/index"; | ||||
| import { connect } from "react-redux"; | ||||
| 
 | ||||
| import moment from "jalali-moment"; | ||||
| function Birthdate({ value, name, onChange, isDesktop, ...props }) { | ||||
|   const [isFocused, setIsFocused] = React.useState(false); | ||||
| 
 | ||||
| export default function Birthdate({ defaultValue, name, ...props }) { | ||||
|   let momentDate = moment(defaultValue[name]); | ||||
|   let isvalid = momentDate.isValid(); | ||||
|   const day = isvalid ? momentDate.format("jDD") : null, | ||||
|     month = isvalid ? momentDate.format("jMM") : null, | ||||
|     year = isvalid ? momentDate.format("jYYYY") : null; | ||||
|   const [state, setState] = useState({ day, month, year }); | ||||
|   const onChange = (_name, value) => { | ||||
|     let _state = { ...state, [_name]: value }; | ||||
|     setState(_state); | ||||
| 
 | ||||
|     props.onChange( | ||||
|       name, | ||||
|       moment | ||||
|         .from(`${_state.year}/${_state.month}/${_state.day}`, "fa", "YYYY/M/D") | ||||
|         .locale("en") | ||||
|     ); | ||||
|   }; | ||||
|   return ( | ||||
|     <div className="birthdate d-flex justify-content-between align-items-center"> | ||||
|       <label>{window.t("تاریخ تولد")} </label> | ||||
|       <div className="mobile-birthdate__date d-flex align-items-center"> | ||||
|         <Input | ||||
|           variant="standard" | ||||
|     <div className="flex bg-background relative justify-center lg:w-full border border-solid focus:border-blueMarine dark:focus:border-blueCurious border-surfaceBorder rounded-md py-4 px-4"> | ||||
|       {isDesktop && ( | ||||
|         <label | ||||
|           className={`text-tiny text-blueMarine bg-background dark:bg-grayDarkJungle font-4 right-4 absolute transform -translate-y-1/2 transition-all ${ | ||||
|             isFocused | ||||
|               ? "top-0 text-blueMarine text-sm dark:text-blueCurious" | ||||
|               : "top-1/2 text-grayBattleShip text-tiny" | ||||
|           }`}
 | ||||
|           onClick={() => setIsFocused(true)} | ||||
|         > | ||||
|           تاریخ تولد | ||||
|         </label> | ||||
|       )} | ||||
| 
 | ||||
|       <div className="flex items-center"> | ||||
|         <input | ||||
|           type="text" | ||||
|           inputMode="numeric" | ||||
|           name="day" | ||||
|           placeholder={window.t("روز")} | ||||
|           maxLength={2} | ||||
|           onInput={onInput.dayHandler} | ||||
|           onChange={onChange} | ||||
|           defaultValue={state} | ||||
|           className="w-20 text-center ltr text-sm lg:text-tiny outline-none bg-gray-50 dark:bg-opacity-10 dark:text-white" | ||||
|           onFocus={() => setIsFocused(true)} | ||||
|           onBlur={() => setIsFocused(false)} | ||||
|           onChange={(e) => | ||||
|             onChange(name, { | ||||
|               ...value, | ||||
|               day: onInput.dayHandler(e.target.value), | ||||
|             }) | ||||
|           } | ||||
|           placeholder="روز" | ||||
|           maxLength="2" | ||||
|           value={value?.day} | ||||
|         /> | ||||
|         <span>/</span> | ||||
|         <Input | ||||
|           variant="standard" | ||||
|         <span className="mx-4 text-gray-300">/</span> | ||||
|         <input | ||||
|           type="text" | ||||
|           inputMode="numeric" | ||||
|           name="month" | ||||
|           placeholder={window.t("ماه")} | ||||
|           maxLength={2} | ||||
|           onInput={onInput.monthHandler} | ||||
|           onChange={onChange} | ||||
|           defaultValue={state} | ||||
|           className="w-20 text-center text-sm ltr lg:text-tiny outline-none bg-gray-50 dark:bg-opacity-10 dark:text-white" | ||||
|           onFocus={() => setIsFocused(true)} | ||||
|           onBlur={() => setIsFocused(false)} | ||||
|           onChange={(e) => | ||||
|             onChange(name, { | ||||
|               ...value, | ||||
|               month: onInput.monthHandler(e.target.value), | ||||
|             }) | ||||
|           } | ||||
|           placeholder="ماه" | ||||
|           maxLength="2" | ||||
|           value={value?.month} | ||||
|         /> | ||||
|         <span>/</span> | ||||
|         <Input | ||||
|           variant="standard" | ||||
|         <span className="mx-4 text-gray-300">/</span> | ||||
|         <input | ||||
|           type="text" | ||||
|           inputMode="numeric" | ||||
|           name="year" | ||||
|           placeholder={window.t("سال")} | ||||
|           maxLength={4} | ||||
|           onInput={onInput.yearHandler} | ||||
|           onChange={onChange} | ||||
|           defaultValue={state} | ||||
|           className="w-20 text-center text-sm ltr lg:text-tiny outline-none bg-gray-50 dark:bg-opacity-10 dark:text-white" | ||||
|           onFocus={() => setIsFocused(true)} | ||||
|           onBlur={() => setIsFocused(false)} | ||||
|           onChange={(e) => | ||||
|             onChange(name, { | ||||
|               ...value, | ||||
|               year: onInput.yearHandler(e.target.value), | ||||
|             }) | ||||
|           } | ||||
|           placeholder="سال" | ||||
|           maxLength="4" | ||||
|           value={value?.year} | ||||
|         /> | ||||
|       </div> | ||||
|     </div> | ||||
|   ); | ||||
| } | ||||
| 
 | ||||
| const mapStateToProps = (state) => ({ | ||||
|   isDesktop: state.config.device === "desktop", | ||||
| }); | ||||
| 
 | ||||
| export default connect(mapStateToProps)(Birthdate); | ||||
|  | ||||
| @ -1,27 +1,55 @@ | ||||
| import React from "react"; | ||||
| import React, { useState, useMemo } from "react"; | ||||
| import { connect } from "react-redux"; | ||||
| //assets
 | ||||
| 
 | ||||
| export default function Upload({ name, value, onChange, label }) { | ||||
| const reader = new FileReader(); | ||||
| function Upload({ name, value: initValue, onChange }) { | ||||
|   const [loaded, setSelected] = useState(null); | ||||
|   reader.onload = (e) => setSelected(e.target.result); | ||||
|   const value = loaded || initValue; | ||||
|   useMemo(() => { | ||||
|     setSelected(null); | ||||
|   }, [initValue]); | ||||
|   return ( | ||||
|     <div className="profile-upload d-flex justify-content-center align-items-center mb-3"> | ||||
|       <> | ||||
|         {value === null ? ( | ||||
|           <></> | ||||
|         ) : ( | ||||
|           <img | ||||
|             src={ | ||||
|               value.name | ||||
|                 ? URL.createObjectURL(value) | ||||
|                 : window.baseURL + "file/" + value | ||||
|             } | ||||
|             alt={window.t("کاربر")} | ||||
|           /> | ||||
|         )} | ||||
|         <input | ||||
|           type="file" | ||||
|           name={name} | ||||
|           onChange={(e) => onChange(e.target.name, e.target.files[0])} | ||||
|     <div className="flex justify-center bg-surface rounded-full items-center overflow-hidden relative max-w-[100px] max-h-[100px] w-[100px] h-[100px]"> | ||||
|       <div | ||||
|         className={`h-full  w-full rounded-full flex justify-center items-center ${ | ||||
|           value ? "" : "bg-surface" | ||||
|         }`}
 | ||||
|       > | ||||
|         <img | ||||
|           src={ | ||||
|             value | ||||
|               ? value?.indexOf("data") > -1 | ||||
|                 ? value | ||||
|                 : "https://iranesch.com/api/v1/file/" + value | ||||
|               : "/icons/camera-white.svg" | ||||
|           } | ||||
|           alt="" | ||||
|           className={`rounded-full ${ | ||||
|             value ? "w-full  object-contain " : "w-2/5 object-contain" | ||||
|           } ${isNaN(value) ? "grayscale" : ""}`}
 | ||||
|         /> | ||||
|       </> | ||||
|       </div> | ||||
|       {value && ( | ||||
|         <div className="rounded-full flex justify-center bg-surface items-center absolute right-0 bottom-0 w-7 h-7 z-20"> | ||||
|           <img src={"/icons/camera-white.svg"} alt="camera" className="w-2/3" /> | ||||
|         </div> | ||||
|       )} | ||||
|       <input | ||||
|         type="file" | ||||
|         name={name} | ||||
|         className="w-full h-full opacity-0 absolute top-0 left-0" | ||||
|         onChange={(e) => { | ||||
|           reader.readAsDataURL(e.target.files[0]); | ||||
|           onChange(e.target.name, e.target.files[0]); | ||||
|         }} | ||||
|       /> | ||||
|     </div> | ||||
|   ); | ||||
| } | ||||
| 
 | ||||
| const mapStateToProps = (state) => ({ | ||||
| }); | ||||
| 
 | ||||
| export default connect(mapStateToProps)(Upload); | ||||
|  | ||||
					Loading…
					
					
				
		Reference in new issue