Reza_ashrafi
2 years ago
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