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 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 ( |
return ( |
||||||
<div className="birthdate d-flex justify-content-between align-items-center"> |
<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"> |
||||||
<label>{window.t("تاریخ تولد")} </label> |
{isDesktop && ( |
||||||
<div className="mobile-birthdate__date d-flex align-items-center"> |
<label |
||||||
<Input |
className={`text-tiny text-blueMarine bg-background dark:bg-grayDarkJungle font-4 right-4 absolute transform -translate-y-1/2 transition-all ${ |
||||||
variant="standard" |
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" |
name="day" |
||||||
placeholder={window.t("روز")} |
className="w-20 text-center ltr text-sm lg:text-tiny outline-none bg-gray-50 dark:bg-opacity-10 dark:text-white" |
||||||
maxLength={2} |
onFocus={() => setIsFocused(true)} |
||||||
onInput={onInput.dayHandler} |
onBlur={() => setIsFocused(false)} |
||||||
onChange={onChange} |
onChange={(e) => |
||||||
defaultValue={state} |
onChange(name, { |
||||||
|
...value, |
||||||
|
day: onInput.dayHandler(e.target.value), |
||||||
|
}) |
||||||
|
} |
||||||
|
placeholder="روز" |
||||||
|
maxLength="2" |
||||||
|
value={value?.day} |
||||||
/> |
/> |
||||||
<span>/</span> |
<span className="mx-4 text-gray-300">/</span> |
||||||
<Input |
<input |
||||||
variant="standard" |
type="text" |
||||||
|
inputMode="numeric" |
||||||
name="month" |
name="month" |
||||||
placeholder={window.t("ماه")} |
className="w-20 text-center text-sm ltr lg:text-tiny outline-none bg-gray-50 dark:bg-opacity-10 dark:text-white" |
||||||
maxLength={2} |
onFocus={() => setIsFocused(true)} |
||||||
onInput={onInput.monthHandler} |
onBlur={() => setIsFocused(false)} |
||||||
onChange={onChange} |
onChange={(e) => |
||||||
defaultValue={state} |
onChange(name, { |
||||||
|
...value, |
||||||
|
month: onInput.monthHandler(e.target.value), |
||||||
|
}) |
||||||
|
} |
||||||
|
placeholder="ماه" |
||||||
|
maxLength="2" |
||||||
|
value={value?.month} |
||||||
/> |
/> |
||||||
<span>/</span> |
<span className="mx-4 text-gray-300">/</span> |
||||||
<Input |
<input |
||||||
variant="standard" |
type="text" |
||||||
|
inputMode="numeric" |
||||||
name="year" |
name="year" |
||||||
placeholder={window.t("سال")} |
className="w-20 text-center text-sm ltr lg:text-tiny outline-none bg-gray-50 dark:bg-opacity-10 dark:text-white" |
||||||
maxLength={4} |
onFocus={() => setIsFocused(true)} |
||||||
onInput={onInput.yearHandler} |
onBlur={() => setIsFocused(false)} |
||||||
onChange={onChange} |
onChange={(e) => |
||||||
defaultValue={state} |
onChange(name, { |
||||||
|
...value, |
||||||
|
year: onInput.yearHandler(e.target.value), |
||||||
|
}) |
||||||
|
} |
||||||
|
placeholder="سال" |
||||||
|
maxLength="4" |
||||||
|
value={value?.year} |
||||||
/> |
/> |
||||||
</div> |
</div> |
||||||
</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 ( |
return ( |
||||||
<div className="profile-upload d-flex justify-content-center align-items-center mb-3"> |
<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 |
||||||
{value === null ? ( |
className={`h-full w-full rounded-full flex justify-center items-center ${ |
||||||
<></> |
value ? "" : "bg-surface" |
||||||
) : ( |
}`}
|
||||||
<img |
> |
||||||
src={ |
<img |
||||||
value.name |
src={ |
||||||
? URL.createObjectURL(value) |
value |
||||||
: window.baseURL + "file/" + value |
? value?.indexOf("data") > -1 |
||||||
} |
? value |
||||||
alt={window.t("کاربر")} |
: "https://iranesch.com/api/v1/file/" + value |
||||||
/> |
: "/icons/camera-white.svg" |
||||||
)} |
} |
||||||
<input |
alt="" |
||||||
type="file" |
className={`rounded-full ${ |
||||||
name={name} |
value ? "w-full object-contain " : "w-2/5 object-contain" |
||||||
onChange={(e) => onChange(e.target.name, e.target.files[0])} |
} ${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> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
}); |
||||||
|
|
||||||
|
export default connect(mapStateToProps)(Upload); |
||||||
|
|||||||
Loading…
Reference in new issue