parent
d92199f6b0
commit
3e3bea6402
71 changed files with 4006 additions and 24 deletions
|
After Width: | Height: | Size: 489 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 725 B |
|
After Width: | Height: | Size: 570 B |
|
After Width: | Height: | Size: 622 B |
|
After Width: | Height: | Size: 378 KiB |
|
After Width: | Height: | Size: 543 B |
|
After Width: | Height: | Size: 552 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 545 B |
|
After Width: | Height: | Size: 545 B |
|
After Width: | Height: | Size: 545 B |
|
After Width: | Height: | Size: 857 B |
|
After Width: | Height: | Size: 58 KiB |
@ -0,0 +1,245 @@ |
||||
import React, { useState, useRef, useEffect } from "react"; |
||||
|
||||
import { |
||||
getDateAccordingToMonth, |
||||
shallowClone, |
||||
getValueType, |
||||
} from "./shared/generalUtils"; |
||||
import { |
||||
TYPE_SINGLE_DATE, |
||||
TYPE_RANGE, |
||||
TYPE_MUTLI_DATE, |
||||
} from "./shared/constants"; |
||||
import { useLocaleUtils, useLocaleLanguage } from "./shared/hooks"; |
||||
|
||||
import { Header, MonthSelector, YearSelector, DaysList } from "./components"; |
||||
|
||||
const Calendar = ({ |
||||
value, |
||||
onChange, |
||||
onDisabledDayError, |
||||
calendarClassName, |
||||
calendarTodayClassName, |
||||
calendarSelectedDayClassName, |
||||
calendarRangeStartClassName, |
||||
calendarRangeBetweenClassName, |
||||
calendarRangeEndClassName, |
||||
disabledDays, |
||||
colorPrimary, |
||||
colorPrimaryLight, |
||||
slideAnimationDuration, |
||||
minimumDate, |
||||
maximumDate, |
||||
selectorStartingYear, |
||||
selectorEndingYear, |
||||
locale, |
||||
shouldHighlightWeekends, |
||||
renderFooter, |
||||
customDaysClassName, |
||||
events, |
||||
renderEvents, |
||||
type, |
||||
}) => { |
||||
const calendarElement = useRef(null); |
||||
const [mainState, setMainState] = useState({ |
||||
activeDate: null, |
||||
monthChangeDirection: "", |
||||
isMonthSelectorOpen: false, |
||||
isYearSelectorOpen: false, |
||||
}); |
||||
const [eventInFooter, setEventInFooter] = useState(null); |
||||
useEffect(() => { |
||||
const handleKeyUp = ({ key }) => { |
||||
/* istanbul ignore else */ |
||||
if (key === "Tab") |
||||
calendarElement.current.classList.remove("-noFocusOutline"); |
||||
}; |
||||
calendarElement.current.addEventListener("keyup", handleKeyUp, false); |
||||
return () => { |
||||
// calendarElement.current.removeEventListener('keyup', handleKeyUp, false);
|
||||
}; |
||||
}); |
||||
|
||||
const { getToday } = useLocaleUtils(locale); |
||||
const { weekDays: weekDaysList, isRtl } = useLocaleLanguage(locale); |
||||
const today = getToday(); |
||||
|
||||
const createStateToggler = (property) => () => { |
||||
setMainState({ ...mainState, [property]: !mainState[property] }); |
||||
}; |
||||
|
||||
const toggleMonthSelector = createStateToggler("isMonthSelectorOpen"); |
||||
const toggleYearSelector = createStateToggler("isYearSelectorOpen"); |
||||
|
||||
const getComputedActiveDate = () => { |
||||
const valueType = getValueType(value); |
||||
if (valueType === TYPE_MUTLI_DATE && value.length) |
||||
return shallowClone(value[0]); |
||||
if (valueType === TYPE_SINGLE_DATE && value) return shallowClone(value); |
||||
if (valueType === TYPE_RANGE && value.from) return shallowClone(value.from); |
||||
return shallowClone(today); |
||||
}; |
||||
|
||||
const activeDate = mainState.activeDate |
||||
? shallowClone(mainState.activeDate) |
||||
: getComputedActiveDate(); |
||||
|
||||
const weekdays = weekDaysList.map((weekDay) => ( |
||||
<abbr |
||||
key={weekDay.name} |
||||
title={weekDay.name} |
||||
className={`Calendar__weekDay ${type}`} |
||||
> |
||||
{type == "dashboard" ? weekDay.name : weekDay.short} |
||||
</abbr> |
||||
)); |
||||
|
||||
const handleMonthChange = (direction) => { |
||||
setMainState({ |
||||
...mainState, |
||||
monthChangeDirection: direction, |
||||
}); |
||||
}; |
||||
|
||||
const updateDate = () => { |
||||
setMainState({ |
||||
...mainState, |
||||
activeDate: getDateAccordingToMonth( |
||||
activeDate, |
||||
mainState.monthChangeDirection |
||||
), |
||||
monthChangeDirection: "", |
||||
}); |
||||
}; |
||||
|
||||
const selectMonth = (newMonthNumber) => { |
||||
setMainState({ |
||||
...mainState, |
||||
activeDate: { ...activeDate, month: newMonthNumber }, |
||||
isMonthSelectorOpen: false, |
||||
}); |
||||
}; |
||||
|
||||
const selectYear = (year) => { |
||||
setMainState({ |
||||
...mainState, |
||||
activeDate: { ...activeDate, year }, |
||||
isYearSelectorOpen: false, |
||||
}); |
||||
}; |
||||
|
||||
return ( |
||||
<div |
||||
className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${ |
||||
isRtl ? "rtl" : "ltr" |
||||
}`}
|
||||
role="grid" |
||||
style={{ |
||||
"--cl-color-primary": colorPrimary, |
||||
"--cl-color-primary-light": colorPrimaryLight, |
||||
"--animation-duration": slideAnimationDuration, |
||||
}} |
||||
ref={calendarElement} |
||||
> |
||||
<Header |
||||
maximumDate={maximumDate} |
||||
minimumDate={minimumDate} |
||||
activeDate={activeDate} |
||||
onMonthChange={handleMonthChange} |
||||
onMonthSelect={toggleMonthSelector} |
||||
onYearSelect={toggleYearSelector} |
||||
monthChangeDirection={mainState.monthChangeDirection} |
||||
isMonthSelectorOpen={mainState.isMonthSelectorOpen} |
||||
isYearSelectorOpen={mainState.isYearSelectorOpen} |
||||
locale={locale} |
||||
type={type} |
||||
/> |
||||
|
||||
<MonthSelector |
||||
isOpen={mainState.isMonthSelectorOpen} |
||||
activeDate={activeDate} |
||||
onMonthSelect={selectMonth} |
||||
maximumDate={maximumDate} |
||||
minimumDate={minimumDate} |
||||
locale={locale} |
||||
/> |
||||
|
||||
<YearSelector |
||||
isOpen={mainState.isYearSelectorOpen} |
||||
activeDate={activeDate} |
||||
onYearSelect={selectYear} |
||||
selectorStartingYear={selectorStartingYear} |
||||
selectorEndingYear={selectorEndingYear} |
||||
maximumDate={maximumDate} |
||||
minimumDate={minimumDate} |
||||
locale={locale} |
||||
/> |
||||
|
||||
<div className={`Calendar__weekDays ${type}`}>{weekdays}</div> |
||||
|
||||
<DaysList |
||||
activeDate={activeDate} |
||||
value={value} |
||||
monthChangeDirection={mainState.monthChangeDirection} |
||||
onSlideChange={updateDate} |
||||
disabledDays={disabledDays} |
||||
onDisabledDayError={onDisabledDayError} |
||||
minimumDate={minimumDate} |
||||
maximumDate={maximumDate} |
||||
onChange={onChange} |
||||
calendarTodayClassName={calendarTodayClassName} |
||||
calendarSelectedDayClassName={calendarSelectedDayClassName} |
||||
calendarRangeStartClassName={calendarRangeStartClassName} |
||||
calendarRangeEndClassName={calendarRangeEndClassName} |
||||
calendarRangeBetweenClassName={calendarRangeBetweenClassName} |
||||
locale={locale} |
||||
shouldHighlightWeekends={shouldHighlightWeekends} |
||||
customDaysClassName={customDaysClassName} |
||||
events={events} |
||||
renderFooter={renderFooter} |
||||
renderEvents={renderEvents} |
||||
isQuickSelectorOpen={ |
||||
mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen |
||||
} |
||||
showEvent={(event) => setEventInFooter(event)} |
||||
type={type} |
||||
/> |
||||
<div className="Calendar__footer"> |
||||
<div className={`footer__Events ${type}`}> |
||||
{type == "dashboard" ? ( |
||||
<> |
||||
<div className="text-xl font-black text-blue-400"> |
||||
رویداد ها:{" "} |
||||
</div> |
||||
<p className="text-blue-300 font-sansbold"> |
||||
{eventInFooter |
||||
? eventInFooter |
||||
: "رویدادی در این روز وجود ندارد!"} |
||||
</p> |
||||
</> |
||||
) : ( |
||||
eventInFooter |
||||
)} |
||||
</div> |
||||
{renderFooter()} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
Calendar.defaultProps = { |
||||
minimumDate: null, |
||||
maximumDate: null, |
||||
colorPrimary: "#0eca2d", |
||||
colorPrimaryLight: "#cff4d5", |
||||
slideAnimationDuration: "0.4s", |
||||
calendarClassName: "", |
||||
locale: "en", |
||||
value: null, |
||||
renderFooter: () => null, |
||||
renderEvents: () => null, |
||||
customDaysClassName: [], |
||||
events: [], |
||||
}; |
||||
|
||||
export default Calendar; |
||||
@ -0,0 +1,203 @@ |
||||
import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'; |
||||
|
||||
import Calendar from './Calendar'; |
||||
import DatePickerInput from './DatePickerInput'; |
||||
import { getValueType } from './shared/generalUtils'; |
||||
import { TYPE_SINGLE_DATE, TYPE_MUTLI_DATE, TYPE_RANGE } from './shared/constants'; |
||||
|
||||
const DatePicker = ({ |
||||
value, |
||||
onChange, |
||||
formatInputText, |
||||
inputPlaceholder, |
||||
inputClassName, |
||||
inputName, |
||||
renderInput, |
||||
wrapperClassName, |
||||
calendarClassName, |
||||
calendarTodayClassName, |
||||
calendarSelectedDayClassName, |
||||
calendarRangeStartClassName, |
||||
calendarRangeBetweenClassName, |
||||
calendarRangeEndClassName, |
||||
calendarPopperPosition, |
||||
disabledDays, |
||||
onDisabledDayError, |
||||
colorPrimary, |
||||
colorPrimaryLight, |
||||
slideAnimationDuration, |
||||
minimumDate, |
||||
maximumDate, |
||||
selectorStartingYear, |
||||
selectorEndingYear, |
||||
locale, |
||||
shouldHighlightWeekends, |
||||
renderFooter, |
||||
customDaysClassName, |
||||
}) => { |
||||
const calendarContainerElement = useRef(null); |
||||
const inputElement = useRef(null); |
||||
const shouldPreventToggle = useRef(false); |
||||
const [isCalendarOpen, setCalendarVisiblity] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
const handleBlur = () => { |
||||
setCalendarVisiblity(false); |
||||
}; |
||||
window.addEventListener('blur', handleBlur, false); |
||||
return () => { |
||||
window.removeEventListener('blur', handleBlur, false); |
||||
}; |
||||
}, []); |
||||
|
||||
// handle input focus/blur
|
||||
useEffect(() => { |
||||
const valueType = getValueType(value); |
||||
if (valueType === TYPE_MUTLI_DATE) return; // no need to close the calendar
|
||||
const shouldCloseCalendar = |
||||
valueType === TYPE_SINGLE_DATE ? !isCalendarOpen : !isCalendarOpen && value.from && value.to; |
||||
if (shouldCloseCalendar) inputElement.current.blur(); |
||||
}, [value, isCalendarOpen]); |
||||
|
||||
const handleBlur = e => { |
||||
e.persist(); |
||||
if (!isCalendarOpen) return; |
||||
const isInnerElementFocused = calendarContainerElement.current.contains(e.relatedTarget); |
||||
if (shouldPreventToggle.current) { |
||||
shouldPreventToggle.current = false; |
||||
inputElement.current.focus(); |
||||
} else if (isInnerElementFocused && e.relatedTarget) { |
||||
e.relatedTarget.focus(); |
||||
} else { |
||||
setCalendarVisiblity(false); |
||||
} |
||||
}; |
||||
|
||||
const openCalendar = () => { |
||||
if (!shouldPreventToggle.current) setCalendarVisiblity(true); |
||||
}; |
||||
|
||||
// Keep the calendar in the screen bounds if input is near the window edges
|
||||
useLayoutEffect(() => { |
||||
if (!isCalendarOpen) return; |
||||
const { left, width, height, top } = calendarContainerElement.current.getBoundingClientRect(); |
||||
const { clientWidth, clientHeight } = document.documentElement; |
||||
const isOverflowingFromRight = left + width > clientWidth; |
||||
const isOverflowingFromLeft = left < 0; |
||||
const isOverflowingFromBottom = top + height > clientHeight; |
||||
|
||||
const getLeftStyle = () => { |
||||
const overflowFromRightDistance = left + width - clientWidth; |
||||
|
||||
if (!isOverflowingFromRight && !isOverflowingFromLeft) return; |
||||
const overflowFromLeftDistance = Math.abs(left); |
||||
const rightPosition = isOverflowingFromLeft ? overflowFromLeftDistance : 0; |
||||
|
||||
const leftStyle = isOverflowingFromRight |
||||
? `calc(50% - ${overflowFromRightDistance}px)` |
||||
: `calc(50% + ${rightPosition}px)`; |
||||
return leftStyle; |
||||
}; |
||||
|
||||
calendarContainerElement.current.style.left = getLeftStyle(); |
||||
if ( |
||||
(calendarPopperPosition === 'auto' && isOverflowingFromBottom) || |
||||
calendarPopperPosition === 'top' |
||||
) { |
||||
calendarContainerElement.current.classList.add('-top'); |
||||
} |
||||
}, [isCalendarOpen]); |
||||
|
||||
const handleCalendarChange = newValue => { |
||||
const valueType = getValueType(value); |
||||
onChange(newValue); |
||||
if (valueType === TYPE_SINGLE_DATE) setCalendarVisiblity(false); |
||||
else if (valueType === TYPE_RANGE && newValue.from && newValue.to) setCalendarVisiblity(false); |
||||
}; |
||||
|
||||
const handleKeyUp = ({ key }) => { |
||||
switch (key) { |
||||
case 'Enter': |
||||
setCalendarVisiblity(true); |
||||
break; |
||||
case 'Escape': |
||||
setCalendarVisiblity(false); |
||||
shouldPreventToggle.current = true; |
||||
break; |
||||
} |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
if (!isCalendarOpen && shouldPreventToggle.current) { |
||||
inputElement.current.focus(); |
||||
shouldPreventToggle.current = false; |
||||
} |
||||
}, [shouldPreventToggle, isCalendarOpen]); |
||||
|
||||
return ( |
||||
<div |
||||
onFocus={openCalendar} |
||||
onBlur={handleBlur} |
||||
onKeyUp={handleKeyUp} |
||||
className={`DatePicker ${wrapperClassName}`} |
||||
role="presentation" |
||||
> |
||||
<DatePickerInput |
||||
ref={inputElement} |
||||
formatInputText={formatInputText} |
||||
value={value} |
||||
inputPlaceholder={inputPlaceholder} |
||||
inputClassName={inputClassName} |
||||
renderInput={renderInput} |
||||
inputName={inputName} |
||||
locale={locale} |
||||
/> |
||||
{isCalendarOpen && ( |
||||
<> |
||||
<div |
||||
ref={calendarContainerElement} |
||||
className="DatePicker__calendarContainer" |
||||
data-testid="calendar-container" |
||||
role="presentation" |
||||
onMouseDown={() => { |
||||
shouldPreventToggle.current = true; |
||||
}} |
||||
> |
||||
<Calendar |
||||
value={value} |
||||
onChange={handleCalendarChange} |
||||
calendarClassName={calendarClassName} |
||||
calendarTodayClassName={calendarTodayClassName} |
||||
calendarSelectedDayClassName={calendarSelectedDayClassName} |
||||
calendarRangeStartClassName={calendarRangeStartClassName} |
||||
calendarRangeBetweenClassName={calendarRangeBetweenClassName} |
||||
calendarRangeEndClassName={calendarRangeEndClassName} |
||||
disabledDays={disabledDays} |
||||
colorPrimary={colorPrimary} |
||||
colorPrimaryLight={colorPrimaryLight} |
||||
slideAnimationDuration={slideAnimationDuration} |
||||
onDisabledDayError={onDisabledDayError} |
||||
minimumDate={minimumDate} |
||||
maximumDate={maximumDate} |
||||
selectorStartingYear={selectorStartingYear} |
||||
selectorEndingYear={selectorEndingYear} |
||||
locale={locale} |
||||
shouldHighlightWeekends={shouldHighlightWeekends} |
||||
renderFooter={renderFooter} |
||||
customDaysClassName={customDaysClassName} |
||||
/> |
||||
</div> |
||||
<div className="DatePicker__calendarArrow" /> |
||||
</> |
||||
)} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
DatePicker.defaultProps = { |
||||
wrapperClassName: '', |
||||
locale: 'en', |
||||
calendarPopperPosition: 'auto', |
||||
}; |
||||
|
||||
export default DatePicker; |
||||
@ -0,0 +1,93 @@ |
||||
import React from 'react'; |
||||
|
||||
import { useLocaleUtils, useLocaleLanguage } from './shared/hooks'; |
||||
import { putZero, getValueType } from './shared/generalUtils'; |
||||
import { TYPE_SINGLE_DATE, TYPE_RANGE, TYPE_MUTLI_DATE } from './shared/constants'; |
||||
|
||||
const DatePickerInput = React.forwardRef( |
||||
( |
||||
{ value, inputPlaceholder, inputClassName, inputName, formatInputText, renderInput, locale }, |
||||
ref, |
||||
) => { |
||||
const { getLanguageDigits } = useLocaleUtils(locale); |
||||
const { |
||||
from: fromWord, |
||||
to: toWord, |
||||
yearLetterSkip, |
||||
digitSeparator, |
||||
defaultPlaceholder, |
||||
isRtl, |
||||
} = useLocaleLanguage(locale); |
||||
|
||||
const getSingleDayValue = () => { |
||||
if (!value) return ''; |
||||
const year = getLanguageDigits(value.year); |
||||
const month = getLanguageDigits(putZero(value.month)); |
||||
const day = getLanguageDigits(putZero(value.day)); |
||||
return `${year}/${month}/${day}`; |
||||
}; |
||||
|
||||
const getDayRangeValue = () => { |
||||
if (!value.from || !value.to) return ''; |
||||
const { from, to } = value; |
||||
const fromText = `${getLanguageDigits(putZero(from.year)) |
||||
.toString() |
||||
.slice(yearLetterSkip)}/${getLanguageDigits(putZero(from.month))}/${getLanguageDigits( |
||||
putZero(from.day), |
||||
)}`;
|
||||
const toText = `${getLanguageDigits(putZero(to.year)) |
||||
.toString() |
||||
.slice(yearLetterSkip)}/${getLanguageDigits(putZero(to.month))}/${getLanguageDigits( |
||||
putZero(to.day), |
||||
)}`;
|
||||
return `${fromWord} ${fromText} ${toWord} ${toText}`; |
||||
}; |
||||
|
||||
const getMultiDateValue = () => { |
||||
return value.map(date => getLanguageDigits(date.day)).join(`${digitSeparator} `); |
||||
}; |
||||
|
||||
const getValue = () => { |
||||
if (formatInputText()) return formatInputText(); |
||||
const valueType = getValueType(value); |
||||
switch (valueType) { |
||||
case TYPE_SINGLE_DATE: |
||||
return getSingleDayValue(); |
||||
case TYPE_RANGE: |
||||
return getDayRangeValue(); |
||||
case TYPE_MUTLI_DATE: |
||||
return getMultiDateValue(); |
||||
} |
||||
}; |
||||
|
||||
const placeholderValue = inputPlaceholder || defaultPlaceholder; |
||||
const render = () => { |
||||
return ( |
||||
renderInput({ ref }) || ( |
||||
<input |
||||
data-testid="datepicker-input" |
||||
readOnly |
||||
ref={ref} |
||||
value={getValue()} |
||||
name={inputName} |
||||
placeholder={placeholderValue} |
||||
className={`DatePicker__input -${isRtl ? 'rtl' : 'ltr'} ${inputClassName}`} |
||||
aria-label={placeholderValue} |
||||
/> |
||||
) |
||||
); |
||||
}; |
||||
|
||||
return render(); |
||||
}, |
||||
); |
||||
|
||||
DatePickerInput.defaultProps = { |
||||
formatInputText: () => '', |
||||
renderInput: () => null, |
||||
inputPlaceholder: '', |
||||
inputClassName: '', |
||||
inputName: '', |
||||
}; |
||||
|
||||
export default DatePickerInput; |
||||
@ -0,0 +1,399 @@ |
||||
import React, { useRef, useEffect } from 'react'; |
||||
|
||||
import { |
||||
getSlideDate, |
||||
handleSlideAnimationEnd, |
||||
animateContent, |
||||
} from '../shared/sliderHelpers'; |
||||
import { |
||||
deepCloneObject, |
||||
isSameDay, |
||||
createUniqueRange, |
||||
getValueType, |
||||
} from '../shared/generalUtils'; |
||||
import { |
||||
TYPE_SINGLE_DATE, |
||||
TYPE_RANGE, |
||||
TYPE_MUTLI_DATE, |
||||
} from '../shared/constants'; |
||||
import handleKeyboardNavigation from '../shared/keyboardNavigation'; |
||||
import { useLocaleUtils, useLocaleLanguage } from '../shared/hooks'; |
||||
|
||||
const DaysList = ({ |
||||
activeDate, |
||||
value, |
||||
monthChangeDirection, |
||||
onSlideChange, |
||||
disabledDays, |
||||
onDisabledDayError, |
||||
minimumDate, |
||||
maximumDate, |
||||
onChange, |
||||
locale, |
||||
calendarTodayClassName, |
||||
calendarSelectedDayClassName, |
||||
calendarRangeStartClassName, |
||||
calendarRangeEndClassName, |
||||
calendarRangeBetweenClassName, |
||||
shouldHighlightWeekends, |
||||
isQuickSelectorOpen, |
||||
customDaysClassName, |
||||
events, |
||||
showEvent, |
||||
type |
||||
}) => { |
||||
const calendarSectionWrapper = useRef(null); |
||||
const { isRtl, weekDays: weekDaysList } = useLocaleLanguage(locale); |
||||
const { |
||||
getToday, |
||||
isBeforeDate, |
||||
checkDayInDayRange, |
||||
getMonthFirstWeekday, |
||||
getMonthLength, |
||||
getLanguageDigits, |
||||
getMonthName, |
||||
} = useLocaleUtils(locale); |
||||
const today = getToday(); |
||||
|
||||
useEffect(() => { |
||||
if (!monthChangeDirection) return; |
||||
animateContent({ |
||||
direction: monthChangeDirection, |
||||
parent: calendarSectionWrapper.current, |
||||
}); |
||||
}, [monthChangeDirection]); |
||||
|
||||
const getDayRangeValue = (day) => { |
||||
const clonedDayRange = deepCloneObject(value); |
||||
const dayRangeValue = |
||||
clonedDayRange.from && clonedDayRange.to |
||||
? { from: null, to: null } |
||||
: clonedDayRange; |
||||
const dayRangeProp = !dayRangeValue.from ? 'from' : 'to'; |
||||
dayRangeValue[dayRangeProp] = day; |
||||
const { from, to } = dayRangeValue; |
||||
|
||||
// swap from and to values if from is later than to
|
||||
if (isBeforeDate(dayRangeValue.to, dayRangeValue.from)) { |
||||
dayRangeValue.from = to; |
||||
dayRangeValue.to = from; |
||||
} |
||||
|
||||
const checkIncludingDisabledDay = (disabledDay) => { |
||||
return checkDayInDayRange({ |
||||
day: disabledDay, |
||||
from: dayRangeValue.from, |
||||
to: dayRangeValue.to, |
||||
}); |
||||
}; |
||||
const includingDisabledDay = disabledDays.find(checkIncludingDisabledDay); |
||||
if (includingDisabledDay) { |
||||
onDisabledDayError(includingDisabledDay); |
||||
return value; |
||||
} |
||||
|
||||
return dayRangeValue; |
||||
}; |
||||
|
||||
const getMultiDateValue = (day) => { |
||||
const isAlreadyExisting = value.some((valueDay) => |
||||
isSameDay(valueDay, day) |
||||
); |
||||
const addedToValue = [...value, day]; |
||||
const removedFromValue = value.filter( |
||||
(valueDay) => !isSameDay(valueDay, day) |
||||
); |
||||
return isAlreadyExisting ? removedFromValue : addedToValue; |
||||
}; |
||||
|
||||
const handleDayClick = (day) => { |
||||
const getNewValue = () => { |
||||
const valueType = getValueType(value); |
||||
switch (valueType) { |
||||
case TYPE_SINGLE_DATE: |
||||
return day; |
||||
case TYPE_RANGE: |
||||
return getDayRangeValue(day); |
||||
case TYPE_MUTLI_DATE: |
||||
return getMultiDateValue(day); |
||||
} |
||||
}; |
||||
const newValue = getNewValue(); |
||||
onChange(newValue); |
||||
}; |
||||
|
||||
const isSingleDateSelected = (day) => { |
||||
const valueType = getValueType(value); |
||||
if (valueType === TYPE_SINGLE_DATE) return isSameDay(day, value); |
||||
if (valueType === TYPE_MUTLI_DATE) |
||||
return value.some((valueDay) => isSameDay(valueDay, day)); |
||||
}; |
||||
|
||||
const getDayStatus = (dayItem) => { |
||||
const isToday = isSameDay(dayItem, today); |
||||
const isSelected = isSingleDateSelected(dayItem); |
||||
const { from: startingDay, to: endingDay } = value || {}; |
||||
const isStartingDayRange = isSameDay(dayItem, startingDay); |
||||
const isEndingDayRange = isSameDay(dayItem, endingDay); |
||||
const isWithinRange = checkDayInDayRange({ |
||||
day: dayItem, |
||||
from: startingDay, |
||||
to: endingDay, |
||||
}); |
||||
return { |
||||
isToday, |
||||
isSelected, |
||||
isStartingDayRange, |
||||
isEndingDayRange, |
||||
isWithinRange, |
||||
}; |
||||
}; |
||||
|
||||
const getDayClassNames = (dayItem) => { |
||||
const { |
||||
isToday, |
||||
isSelected, |
||||
isStartingDayRange, |
||||
isEndingDayRange, |
||||
isWithinRange, |
||||
} = getDayStatus(dayItem); |
||||
const customDayItemClassName = customDaysClassName.find((day) => |
||||
isSameDay(dayItem, day) |
||||
); |
||||
|
||||
const classNames = '' |
||||
.concat(isToday && !isSelected ? ` -today ${calendarTodayClassName}` : '') |
||||
.concat(!dayItem.isStandard ? ' -blank' : '') |
||||
.concat(dayItem.isWeekend && shouldHighlightWeekends ? ' -weekend' : '') |
||||
.concat( |
||||
customDayItemClassName ? ` ${customDayItemClassName.className}` : '' |
||||
) |
||||
.concat(isSelected ? ` -selected ${calendarSelectedDayClassName}` : '') |
||||
.concat( |
||||
isStartingDayRange |
||||
? ` -selectedStart ${calendarRangeStartClassName}` |
||||
: '' |
||||
) |
||||
.concat( |
||||
isEndingDayRange ? ` -selectedEnd ${calendarRangeEndClassName}` : '' |
||||
) |
||||
.concat( |
||||
isWithinRange |
||||
? ` -selectedBetween ${calendarRangeBetweenClassName}` |
||||
: '' |
||||
) |
||||
.concat(dayItem.isDisabled ? ' -disabled' : ''); |
||||
return classNames; |
||||
}; |
||||
|
||||
const getViewMonthDays = (date) => { |
||||
// to match month starting date with the correct weekday label
|
||||
const prependingBlankDays = createUniqueRange( |
||||
getMonthFirstWeekday(date), |
||||
'starting-blank' |
||||
); |
||||
const standardDays = createUniqueRange(getMonthLength(date)).map((day) => ({ |
||||
...day, |
||||
isStandard: true, |
||||
month: date.month, |
||||
year: date.year, |
||||
})); |
||||
const allDays = [...prependingBlankDays, ...standardDays]; |
||||
return allDays; |
||||
}; |
||||
|
||||
const handleDayPress = ({ isDisabled, ...dayItem }) => { |
||||
if (isDisabled) { |
||||
onDisabledDayError(dayItem); // good for showing error messages
|
||||
} else handleDayClick(dayItem); |
||||
}; |
||||
|
||||
const isDayReachableByKeyboard = ({ |
||||
isOnActiveSlide, |
||||
isStandard, |
||||
isSelected, |
||||
isStartingDayRange, |
||||
isToday, |
||||
day, |
||||
}) => { |
||||
if (isQuickSelectorOpen || !isOnActiveSlide || !isStandard) return false; |
||||
if (isSelected || isStartingDayRange || isToday || day === 1) return true; |
||||
}; |
||||
|
||||
const renderEachWeekDays = ( |
||||
{ id, value: day, month, year, isStandard }, |
||||
index |
||||
) => { |
||||
const dayItem = { day, month, year }; |
||||
const isInDisabledDaysRange = disabledDays.some((disabledDay) => |
||||
isSameDay(dayItem, disabledDay) |
||||
); |
||||
const isBeforeMinimumDate = isBeforeDate(dayItem, minimumDate); |
||||
const isAfterMaximumDate = isBeforeDate(maximumDate, dayItem); |
||||
const isNotInValidRange = |
||||
isStandard && (isBeforeMinimumDate || isAfterMaximumDate); |
||||
const isDisabled = isInDisabledDaysRange || isNotInValidRange; |
||||
const isWeekend = weekDaysList.some( |
||||
(weekDayItem, weekDayItemIndex) => |
||||
weekDayItem.isWeekend && weekDayItemIndex === index |
||||
); |
||||
const additionalClass = getDayClassNames({ |
||||
...dayItem, |
||||
isWeekend, |
||||
isStandard, |
||||
isDisabled, |
||||
}); |
||||
const dayLabel = `${weekDaysList[index].name}, ${day} ${getMonthName( |
||||
month |
||||
)} ${year}`;
|
||||
const isOnActiveSlide = month === activeDate.month; |
||||
const dayStatus = getDayStatus(dayItem); |
||||
const { isSelected, isStartingDayRange, isEndingDayRange, isWithinRange } = |
||||
dayStatus; |
||||
const shouldEnableKeyboardNavigation = isDayReachableByKeyboard({ |
||||
...dayItem, |
||||
...dayStatus, |
||||
isOnActiveSlide, |
||||
isStandard, |
||||
}); |
||||
|
||||
// showing Dots Of Events
|
||||
const specialDate = (sDay, sMonth, sYear) => { |
||||
return events.map((e) => { |
||||
if (sDay == e.day && sMonth == e.month && sYear == e.year) { |
||||
return <span key={'dot' + e.id} style={{ |
||||
color: e.color |
||||
}}>.</span>; |
||||
|
||||
} |
||||
}) |
||||
|
||||
}; |
||||
|
||||
const showEventDescription = (sDay, sMonth, sYear) => { |
||||
|
||||
return events.map((e) => { |
||||
|
||||
if (sDay == e.day && sMonth == e.month && sYear == e.year) { |
||||
|
||||
return (<div key={'description' + e.id}><p>{e.description}</p></div>) |
||||
|
||||
} |
||||
|
||||
}) |
||||
|
||||
|
||||
} |
||||
return ( |
||||
<div |
||||
style={{ |
||||
display: 'flex', |
||||
flexDirection: 'column', |
||||
alignItems: 'center', |
||||
}} |
||||
tabIndex={shouldEnableKeyboardNavigation ? '0' : '-1'} |
||||
key={id} |
||||
className={`Calendar__day ${type} -${isRtl ? 'rtl' : 'ltr'} ${additionalClass}`} |
||||
onClick={() => { |
||||
handleDayPress({ ...dayItem, isDisabled }); |
||||
// console.log(specialDate(day));
|
||||
// console.log(showEventDescription(day))
|
||||
showEvent(showEventDescription(day, month, year)) |
||||
|
||||
}} |
||||
onKeyDown={({ key }) => { |
||||
/* istanbul ignore else */ |
||||
if (key === 'Enter') handleDayPress({ ...dayItem, isDisabled }); |
||||
}} |
||||
aria-disabled={isDisabled} |
||||
aria-label={dayLabel} |
||||
aria-selected={ |
||||
isSelected || isStartingDayRange || isEndingDayRange || isWithinRange |
||||
} |
||||
{...(!isStandard || !isOnActiveSlide || isQuickSelectorOpen |
||||
? { 'aria-hidden': true } |
||||
: {})} |
||||
role="gridcell" |
||||
data-is-default-selectable={shouldEnableKeyboardNavigation} |
||||
> |
||||
<p>{!isStandard ? '' : getLanguageDigits(day)}</p> |
||||
{/* Dots Of Events */} |
||||
<span>{specialDate(day, month, year)}</span> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const renderMonthDays = (isInitialActiveChild) => { |
||||
const date = getSlideDate({ |
||||
activeDate, |
||||
isInitialActiveChild, |
||||
monthChangeDirection, |
||||
parent: calendarSectionWrapper.current, |
||||
}); |
||||
const allDays = getViewMonthDays(date); |
||||
const renderSingleWeekRow = (weekRowIndex) => { |
||||
const eachWeekDays = allDays |
||||
.slice(weekRowIndex * 7, weekRowIndex * 7 + 7) |
||||
.map(renderEachWeekDays); |
||||
return ( |
||||
<div |
||||
key={String(weekRowIndex)} |
||||
className="Calendar__weekRow" |
||||
role="row" |
||||
> |
||||
{eachWeekDays} |
||||
</div> |
||||
); |
||||
}; |
||||
return Array.from(Array(6).keys()).map(renderSingleWeekRow); |
||||
}; |
||||
|
||||
const handleKeyDown = (e) => { |
||||
handleKeyboardNavigation(e, { allowVerticalArrows: true }); |
||||
}; |
||||
|
||||
return ( |
||||
<div |
||||
ref={calendarSectionWrapper} |
||||
className="Calendar__sectionWrapper" |
||||
role="presentation" |
||||
data-testid="days-section-wrapper" |
||||
onKeyDown={handleKeyDown} |
||||
> |
||||
<div |
||||
onAnimationEnd={(e) => { |
||||
handleSlideAnimationEnd(e); |
||||
onSlideChange(); |
||||
}} |
||||
className="Calendar__section -shown" |
||||
role="rowgroup" |
||||
> |
||||
{renderMonthDays(true)} |
||||
</div> |
||||
<div |
||||
onAnimationEnd={(e) => { |
||||
handleSlideAnimationEnd(e); |
||||
onSlideChange(); |
||||
}} |
||||
className="Calendar__section -hiddenNext" |
||||
role="rowgroup" |
||||
> |
||||
{renderMonthDays(false)} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
DaysList.defaultProps = { |
||||
onChange: () => { }, |
||||
onDisabledDayError: () => { }, |
||||
disabledDays: [], |
||||
calendarTodayClassName: '', |
||||
calendarSelectedDayClassName: '', |
||||
calendarRangeStartClassName: '', |
||||
calendarRangeBetweenClassName: '', |
||||
calendarRangeEndClassName: '', |
||||
shouldHighlightWeekends: false, |
||||
}; |
||||
|
||||
export default DaysList; |
||||
@ -0,0 +1,205 @@ |
||||
import React, { useEffect, useRef } from 'react'; |
||||
|
||||
import { isSameDay } from '../shared/generalUtils'; |
||||
import { getSlideDate, animateContent, handleSlideAnimationEnd } from '../shared/sliderHelpers'; |
||||
import { useLocaleUtils, useLocaleLanguage } from '../shared/hooks'; |
||||
|
||||
const Header = ({ |
||||
maximumDate, |
||||
minimumDate, |
||||
onMonthChange, |
||||
activeDate, |
||||
monthChangeDirection, |
||||
onMonthSelect, |
||||
onYearSelect, |
||||
isMonthSelectorOpen, |
||||
isYearSelectorOpen, |
||||
locale, |
||||
type |
||||
}) => { |
||||
const headerElement = useRef(null); |
||||
const monthYearWrapperElement = useRef(null); |
||||
|
||||
const { getMonthName, isBeforeDate, getLanguageDigits } = useLocaleUtils(locale); |
||||
const { |
||||
isRtl, |
||||
nextMonth, |
||||
previousMonth, |
||||
openMonthSelector, |
||||
closeMonthSelector, |
||||
openYearSelector, |
||||
closeYearSelector, |
||||
} = useLocaleLanguage(locale); |
||||
|
||||
useEffect(() => { |
||||
if (!monthChangeDirection) return; |
||||
animateContent({ |
||||
direction: monthChangeDirection, |
||||
parent: monthYearWrapperElement.current, |
||||
}); |
||||
}, [monthChangeDirection]); |
||||
|
||||
useEffect(() => { |
||||
const isOpen = isMonthSelectorOpen || isYearSelectorOpen; |
||||
const monthText = headerElement.current.querySelector( |
||||
'.Calendar__monthYear.-shown .Calendar__monthText', |
||||
); |
||||
const yearText = monthText.nextSibling; |
||||
const hasActiveBackground = element => element.classList.contains('-activeBackground'); |
||||
const isInitialRender = |
||||
!isOpen && !hasActiveBackground(monthText) && !hasActiveBackground(yearText); |
||||
if (isInitialRender) return; |
||||
|
||||
const arrows = [...headerElement.current.querySelectorAll('.Calendar__monthArrowWrapper')]; |
||||
const hasMonthSelectorToggled = isMonthSelectorOpen || hasActiveBackground(monthText); |
||||
const primaryElement = hasMonthSelectorToggled ? monthText : yearText; |
||||
const secondaryElement = hasMonthSelectorToggled ? yearText : monthText; |
||||
|
||||
let translateXDirection = hasMonthSelectorToggled ? 1 : -1; |
||||
if (isRtl) translateXDirection *= -1; |
||||
const scale = !isOpen ? 0.95 : 1; |
||||
const translateX = !isOpen ? 0 : `${(translateXDirection * secondaryElement.offsetWidth) / 2}`; |
||||
if (!isOpen) { |
||||
secondaryElement.removeAttribute('aria-hidden'); |
||||
} else { |
||||
secondaryElement.setAttribute('aria-hidden', true); |
||||
} |
||||
secondaryElement.setAttribute('tabindex', isOpen ? '-1' : '0'); |
||||
secondaryElement.style.transform = ''; |
||||
primaryElement.style.transform = `scale(${scale}) ${ |
||||
translateX ? `translateX(${translateX}px)` : '' |
||||
}`;
|
||||
primaryElement.classList.toggle('-activeBackground'); |
||||
secondaryElement.classList.toggle('-hidden'); |
||||
arrows.forEach(arrow => { |
||||
const isHidden = arrow.classList.contains('-hidden'); |
||||
arrow.classList.toggle('-hidden'); |
||||
if (isHidden) { |
||||
arrow.removeAttribute('aria-hidden'); |
||||
arrow.setAttribute('tabindex', '0'); |
||||
} else { |
||||
arrow.setAttribute('aria-hidden', true); |
||||
arrow.setAttribute('tabindex', '-1'); |
||||
} |
||||
}); |
||||
}, [isMonthSelectorOpen, isYearSelectorOpen]); |
||||
|
||||
const getMonthYearText = isInitialActiveChild => { |
||||
const date = getSlideDate({ |
||||
isInitialActiveChild, |
||||
monthChangeDirection, |
||||
activeDate, |
||||
parent: monthYearWrapperElement.current, |
||||
}); |
||||
const year = getLanguageDigits(date.year); |
||||
const month = getMonthName(date.month); |
||||
return { month, year }; |
||||
}; |
||||
|
||||
const isNextMonthArrowDisabled = |
||||
maximumDate && |
||||
isBeforeDate(maximumDate, { ...activeDate, month: activeDate.month + 1, day: 1 }); |
||||
const isPreviousMonthArrowDisabled = |
||||
minimumDate && |
||||
(isBeforeDate({ ...activeDate, day: 1 }, minimumDate) || |
||||
isSameDay(minimumDate, { ...activeDate, day: 1 })); |
||||
|
||||
const onMonthChangeTrigger = direction => { |
||||
const isMonthChanging = Array.from(monthYearWrapperElement.current.children).some(child => |
||||
child.classList.contains('-shownAnimated'), |
||||
); |
||||
if (isMonthChanging) return; |
||||
onMonthChange(direction); |
||||
}; |
||||
|
||||
// first button text is the one who shows the current month and year(initial active child)
|
||||
const monthYearButtons = [true, false].map(isInitialActiveChild => { |
||||
const { month, year } = getMonthYearText(isInitialActiveChild); |
||||
const isActiveMonth = month === getMonthName(activeDate.month); |
||||
const hiddenStatus = { |
||||
...(isActiveMonth ? {} : { 'aria-hidden': true }), |
||||
}; |
||||
return ( |
||||
<div |
||||
onAnimationEnd={handleSlideAnimationEnd} |
||||
className={`Calendar__monthYear ${isInitialActiveChild ? '-shown' : '-hiddenNext'}`} |
||||
role="presentation" |
||||
key={String(isInitialActiveChild)} |
||||
{...hiddenStatus} |
||||
> |
||||
<button |
||||
onClick={onMonthSelect} |
||||
type="button" |
||||
className="Calendar__monthText" |
||||
aria-label={isMonthSelectorOpen ? closeMonthSelector : openMonthSelector} |
||||
tabIndex={isActiveMonth ? '0' : '-1'} |
||||
{...hiddenStatus} |
||||
> |
||||
{month} |
||||
</button> |
||||
<button |
||||
onClick={onYearSelect} |
||||
type="button" |
||||
className="Calendar__yearText" |
||||
aria-label={isYearSelectorOpen ? closeYearSelector : openYearSelector} |
||||
tabIndex={isActiveMonth ? '0' : '-1'} |
||||
{...hiddenStatus} |
||||
> |
||||
{year} |
||||
</button> |
||||
</div> |
||||
); |
||||
}); |
||||
|
||||
return ( |
||||
<div ref={headerElement} className={`Calendar__header ${type}`}> |
||||
{type == 'dashboard' ?
|
||||
|
||||
<div |
||||
className={`Calendar__monthYearContainer ${type}`} |
||||
ref={monthYearWrapperElement} |
||||
data-testid="month-year-container" |
||||
> |
||||
|
||||
{monthYearButtons} |
||||
</div> |
||||
: |
||||
<> |
||||
<button |
||||
className="Calendar__monthArrowWrapper -right" |
||||
onClick={() => { |
||||
onMonthChangeTrigger('PREVIOUS'); |
||||
}} |
||||
aria-label={previousMonth} |
||||
type="button" |
||||
disabled={isPreviousMonthArrowDisabled} |
||||
> |
||||
<span className="Calendar__monthArrow" /> |
||||
</button> |
||||
<div |
||||
className="Calendar__monthYearContainer" |
||||
ref={monthYearWrapperElement} |
||||
data-testid="month-year-container" |
||||
> |
||||
|
||||
{monthYearButtons} |
||||
</div> |
||||
<button |
||||
className="Calendar__monthArrowWrapper -left" |
||||
onClick={() => { |
||||
onMonthChangeTrigger('NEXT'); |
||||
}} |
||||
aria-label={nextMonth} |
||||
type="button" |
||||
disabled={isNextMonthArrowDisabled} |
||||
> |
||||
<span className="Calendar__monthArrow" /> |
||||
</button> |
||||
</> |
||||
|
||||
} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Header; |
||||
@ -0,0 +1,74 @@ |
||||
import React, { useRef, useEffect } from 'react'; |
||||
|
||||
import { isSameDay } from '../shared/generalUtils'; |
||||
import handleKeyboardNavigation from '../shared/keyboardNavigation'; |
||||
import { useLocaleUtils, useLocaleLanguage } from '../shared/hooks'; |
||||
|
||||
const MonthSelector = ({ activeDate, maximumDate, minimumDate, onMonthSelect, isOpen, locale }) => { |
||||
const monthSelector = useRef(null); |
||||
|
||||
useEffect(() => { |
||||
const classToggleMethod = isOpen ? 'add' : 'remove'; |
||||
monthSelector.current.classList[classToggleMethod]('-open'); |
||||
}, [isOpen]); |
||||
|
||||
const { getMonthNumber, isBeforeDate } = useLocaleUtils(locale); |
||||
const { months: monthsList } = useLocaleLanguage(locale); |
||||
|
||||
const handleKeyDown = e => { |
||||
handleKeyboardNavigation(e, { allowVerticalArrows: false }); |
||||
}; |
||||
|
||||
const renderMonthSelectorItems = () => |
||||
monthsList.map(persianMonth => { |
||||
const monthNumber = getMonthNumber(persianMonth); |
||||
const monthDate = { day: 1, month: monthNumber, year: activeDate.year }; |
||||
const isAfterMaximumDate = |
||||
maximumDate && isBeforeDate(maximumDate, { ...monthDate, month: monthNumber }); |
||||
const isBeforeMinimumDate = |
||||
minimumDate && |
||||
(isBeforeDate({ ...monthDate, month: monthNumber + 1 }, minimumDate) || |
||||
isSameDay({ ...monthDate, month: monthNumber + 1 }, minimumDate)); |
||||
const isSelected = monthNumber === activeDate.month; |
||||
return ( |
||||
<li |
||||
key={persianMonth} |
||||
className={`Calendar__monthSelectorItem ${isSelected ? '-active' : ''}`} |
||||
> |
||||
<button |
||||
tabIndex={isSelected && isOpen ? '0' : '-1'} |
||||
onClick={() => { |
||||
onMonthSelect(monthNumber); |
||||
}} |
||||
className="Calendar__monthSelectorItemText" |
||||
type="button" |
||||
disabled={isAfterMaximumDate || isBeforeMinimumDate} |
||||
aria-pressed={isSelected} |
||||
data-is-default-selectable={isSelected} |
||||
> |
||||
{persianMonth} |
||||
</button> |
||||
</li> |
||||
); |
||||
}); |
||||
return ( |
||||
<div |
||||
role="presentation" |
||||
className="Calendar__monthSelectorAnimationWrapper" |
||||
{...(isOpen ? {} : { 'aria-hidden': true })} |
||||
> |
||||
<div |
||||
role="presentation" |
||||
data-testid="month-selector-wrapper" |
||||
className="Calendar__monthSelectorWrapper" |
||||
onKeyDown={handleKeyDown} |
||||
> |
||||
<ul ref={monthSelector} className="Calendar__monthSelector" data-testid="month-selector"> |
||||
{renderMonthSelectorItems()} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default MonthSelector; |
||||
@ -0,0 +1,99 @@ |
||||
import React, { useRef, useEffect } from 'react'; |
||||
|
||||
import { MINIMUM_SELECTABLE_YEAR_SUBTRACT, MAXIMUM_SELECTABLE_YEAR_SUM } from '../shared/constants'; |
||||
import handleKeyboardNavigation from '../shared/keyboardNavigation'; |
||||
import { useLocaleUtils } from '../shared/hooks'; |
||||
|
||||
const YearSelector = ({ |
||||
isOpen, |
||||
activeDate, |
||||
onYearSelect, |
||||
selectorStartingYear, |
||||
selectorEndingYear, |
||||
maximumDate, |
||||
minimumDate, |
||||
locale, |
||||
}) => { |
||||
const wrapperElement = useRef(null); |
||||
const yearListElement = useRef(null); |
||||
|
||||
const { getLanguageDigits, getToday } = useLocaleUtils(locale); |
||||
const startingYearValue = |
||||
selectorStartingYear || getToday().year - MINIMUM_SELECTABLE_YEAR_SUBTRACT; |
||||
const endingYearValue = selectorEndingYear || getToday().year + MAXIMUM_SELECTABLE_YEAR_SUM; |
||||
const allYears = []; |
||||
for (let i = startingYearValue; i <= endingYearValue; i += 1) { |
||||
allYears.push(i); |
||||
} |
||||
useEffect(() => { |
||||
const classToggleMethod = isOpen ? 'add' : 'remove'; |
||||
const activeSelectorYear = wrapperElement.current.querySelector( |
||||
'.Calendar__yearSelectorItem.-active', |
||||
); |
||||
if (!activeSelectorYear) { |
||||
throw new RangeError( |
||||
`Provided value for year is out of selectable year range. You're probably using a wrong locale prop value or your provided value's locale is different from the date picker locale. Try changing the 'locale' prop or the value you've provided.`, |
||||
); |
||||
} |
||||
wrapperElement.current.classList[classToggleMethod]('-faded'); |
||||
yearListElement.current.scrollTop = |
||||
activeSelectorYear.offsetTop - activeSelectorYear.offsetHeight * 5; |
||||
yearListElement.current.classList[classToggleMethod]('-open'); |
||||
}, [isOpen]); |
||||
|
||||
const renderSelectorYears = () => { |
||||
return allYears.map(item => { |
||||
const isAfterMaximumDate = maximumDate && item > maximumDate.year; |
||||
const isBeforeMinimumDate = minimumDate && item < minimumDate.year; |
||||
const isSelected = activeDate.year === item; |
||||
return ( |
||||
<li key={item} className={`Calendar__yearSelectorItem ${isSelected ? '-active' : ''}`}> |
||||
<button |
||||
tabIndex={isSelected && isOpen ? '0' : '-1'} |
||||
className="Calendar__yearSelectorText" |
||||
type="button" |
||||
onClick={() => { |
||||
onYearSelect(item); |
||||
}} |
||||
disabled={isAfterMaximumDate || isBeforeMinimumDate} |
||||
aria-pressed={isSelected} |
||||
data-is-default-selectable={isSelected} |
||||
> |
||||
{getLanguageDigits(item)} |
||||
</button> |
||||
</li> |
||||
); |
||||
}); |
||||
}; |
||||
|
||||
const handleKeyDown = e => { |
||||
handleKeyboardNavigation(e, { allowVerticalArrows: false }); |
||||
}; |
||||
|
||||
return ( |
||||
<div |
||||
className="Calendar__yearSelectorAnimationWrapper" |
||||
role="presentation" |
||||
{...(isOpen ? {} : { 'aria-hidden': true })} |
||||
> |
||||
<div |
||||
ref={wrapperElement} |
||||
className="Calendar__yearSelectorWrapper" |
||||
role="presentation" |
||||
data-testid="year-selector-wrapper" |
||||
onKeyDown={handleKeyDown} |
||||
> |
||||
<ul ref={yearListElement} className="Calendar__yearSelector" data-testid="year-selector"> |
||||
{renderSelectorYears()} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
YearSelector.defaultProps = { |
||||
selectorStartingYear: 0, |
||||
selectorEndingYear: 0, |
||||
}; |
||||
|
||||
export default YearSelector; |
||||
@ -0,0 +1,4 @@ |
||||
export { default as Header } from './Header'; |
||||
export { default as MonthSelector } from './MonthSelector'; |
||||
export { default as YearSelector } from './YearSelector'; |
||||
export { default as DaysList } from './DaysList'; |
||||
@ -0,0 +1,3 @@ |
||||
export { default } from "./DatePicker"; |
||||
export * from "./Calendar"; |
||||
export { default as utils } from "./shared/localeUtils"; |
||||
@ -0,0 +1,104 @@ |
||||
export const PERSIAN_NUMBERS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']; |
||||
|
||||
export const PERSIAN_MONTHS = [ |
||||
'فروردین', |
||||
'اردیبهشت', |
||||
'خرداد', |
||||
'تیر', |
||||
'مرداد', |
||||
'شهریور', |
||||
'مهر', |
||||
'آبان', |
||||
'آذر', |
||||
'دی', |
||||
'بهمن', |
||||
'اسفند', |
||||
]; |
||||
|
||||
export const GREGORIAN_MONTHS = [ |
||||
'January', |
||||
'February', |
||||
'March', |
||||
'April', |
||||
'May', |
||||
'June', |
||||
'July', |
||||
'August', |
||||
'September', |
||||
'October', |
||||
'November', |
||||
'December', |
||||
]; |
||||
|
||||
export const PERSIAN_WEEK_DAYS = [ |
||||
{ |
||||
name: 'شنبه', |
||||
short: 'ش', |
||||
}, |
||||
{ |
||||
name: 'یکشنبه', |
||||
short: 'ی', |
||||
}, |
||||
{ |
||||
name: 'دوشنبه', |
||||
short: 'د', |
||||
}, |
||||
{ |
||||
name: 'سه شنبه', |
||||
short: 'س', |
||||
}, |
||||
{ |
||||
name: 'چهارشنبه', |
||||
short: 'چ', |
||||
}, |
||||
{ |
||||
name: 'پنجشنبه', |
||||
short: 'پ', |
||||
}, |
||||
{ |
||||
name: 'جمعه', |
||||
short: 'ج', |
||||
isWeekend: true, |
||||
}, |
||||
]; |
||||
|
||||
export const GREGORIAN_WEEK_DAYS = [ |
||||
{ |
||||
name: 'Sunday', |
||||
short: 'S', |
||||
isWeekend: true, |
||||
}, |
||||
{ |
||||
name: 'Monday', |
||||
short: 'M', |
||||
}, |
||||
{ |
||||
name: 'Tuesday', |
||||
short: 'T', |
||||
}, |
||||
{ |
||||
name: 'Wednesday', |
||||
short: 'W', |
||||
}, |
||||
{ |
||||
name: 'Thursday', |
||||
short: 'T', |
||||
}, |
||||
{ |
||||
name: 'Friday', |
||||
short: 'F', |
||||
}, |
||||
{ |
||||
name: 'Saturday', |
||||
short: 'S', |
||||
isWeekend: true, |
||||
}, |
||||
]; |
||||
|
||||
export const MINIMUM_SELECTABLE_YEAR_SUBTRACT = 100; |
||||
|
||||
export const MAXIMUM_SELECTABLE_YEAR_SUM = 50; |
||||
|
||||
export const TYPE_SINGLE_DATE = 'SINGLE_DATE'; |
||||
export const TYPE_RANGE = 'RANGE'; |
||||
export const TYPE_MUTLI_DATE = 'MUTLI_DATE'; |
||||
@ -0,0 +1,69 @@ |
||||
import { TYPE_SINGLE_DATE, TYPE_RANGE, TYPE_MUTLI_DATE } from './constants'; |
||||
|
||||
/* |
||||
These utility functions don't depend on locale of the date picker(Persian or Gregorian) |
||||
*/ |
||||
|
||||
const createUniqueRange = (number, startingId) => |
||||
Array.from(Array(number).keys()).map(key => ({ |
||||
value: key + 1, |
||||
id: `${startingId}-${key}`, |
||||
})); |
||||
|
||||
const isSameDay = (day1, day2) => { |
||||
if (!day1 || !day2) return false; |
||||
return day1.day === day2.day && day1.month === day2.month && day1.year === day2.year; |
||||
}; |
||||
|
||||
const putZero = number => (number.toString().length === 1 ? `0${number}` : number); |
||||
|
||||
const toExtendedDay = date => [date.year, date.month, date.day]; |
||||
|
||||
const shallowClone = value => ({ ...value }); |
||||
|
||||
const deepCloneObject = obj => |
||||
JSON.parse(JSON.stringify(obj, (key, value) => (typeof value === 'undefined' ? null : value))); |
||||
|
||||
const getDateAccordingToMonth = (date, direction) => { |
||||
const toSum = direction === 'NEXT' ? 1 : -1; |
||||
let newMonthIndex = date.month + toSum; |
||||
let newYear = date.year; |
||||
if (newMonthIndex < 1) { |
||||
newMonthIndex = 12; |
||||
newYear -= 1; |
||||
} |
||||
if (newMonthIndex > 12) { |
||||
newMonthIndex = 1; |
||||
newYear += 1; |
||||
} |
||||
const newDate = { year: newYear, month: newMonthIndex, day: 1 }; |
||||
return newDate; |
||||
}; |
||||
|
||||
const hasProperty = (object, propertyName) => |
||||
Object.prototype.hasOwnProperty.call(object || {}, propertyName); |
||||
|
||||
const getValueType = value => { |
||||
if (Array.isArray(value)) return TYPE_MUTLI_DATE; |
||||
if (hasProperty(value, 'from') && hasProperty(value, 'to')) return TYPE_RANGE; |
||||
if ( |
||||
!value || |
||||
(hasProperty(value, 'year') && hasProperty(value, 'month') && hasProperty(value, 'day')) |
||||
) { |
||||
return TYPE_SINGLE_DATE; |
||||
} |
||||
throw new TypeError( |
||||
`The passed value is malformed! Please make sure you're using one of the valid value types for date picker.`, |
||||
); |
||||
}; |
||||
|
||||
export { |
||||
createUniqueRange, |
||||
isSameDay, |
||||
putZero, |
||||
toExtendedDay, |
||||
shallowClone, |
||||
deepCloneObject, |
||||
getDateAccordingToMonth, |
||||
getValueType, |
||||
}; |
||||
@ -0,0 +1,10 @@ |
||||
import { useMemo } from 'react'; |
||||
|
||||
import utils from './localeUtils'; |
||||
import getLanguageText from './localeLanguages'; |
||||
|
||||
const useLocaleUtils = locale => useMemo(() => utils(locale), [locale]); |
||||
|
||||
const useLocaleLanguage = locale => useMemo(() => getLanguageText(locale), [locale]); |
||||
|
||||
export { useLocaleUtils, useLocaleLanguage }; |
||||
@ -0,0 +1,44 @@ |
||||
const handleArrowKeys = (e, { allowVerticalArrows }) => { |
||||
const { activeElement } = document; |
||||
const getNthChildSafe = (element, index) => (element ? element.children[index] : null); |
||||
const getStandardItem = item => item && (item.hasAttribute('aria-hidden') ? null : item); |
||||
const { nextSibling: nextRow, previousSibling: previousRow } = activeElement.parentElement; |
||||
const nextSibling = getStandardItem(activeElement.nextSibling || getNthChildSafe(nextRow, 0)); |
||||
const previousRowLength = previousRow ? previousRow.children.length - 1 : 0; |
||||
const previousSibling = getStandardItem( |
||||
activeElement.previousSibling || getNthChildSafe(previousRow, previousRowLength), |
||||
); |
||||
const getVerticalSibling = row => |
||||
getNthChildSafe(row, Array.from(activeElement.parentElement.children).indexOf(activeElement)); |
||||
const downSibling = getStandardItem(getVerticalSibling(nextRow)); |
||||
const upSibling = getStandardItem(getVerticalSibling(previousRow)); |
||||
const isDefaultSelectable = activeElement.dataset.isDefaultSelectable === 'true'; |
||||
|
||||
if (!isDefaultSelectable) activeElement.tabIndex = '-1'; |
||||
const focusIfAvailable = element => { |
||||
e.preventDefault(); |
||||
/* istanbul ignore else */ |
||||
if (element) { |
||||
element.setAttribute('tabindex', '0'); |
||||
element.focus(); |
||||
} |
||||
}; |
||||
switch (e.key) { |
||||
case 'ArrowRight': |
||||
focusIfAvailable(nextSibling); |
||||
break; |
||||
case 'ArrowLeft': |
||||
focusIfAvailable(previousSibling); |
||||
break; |
||||
case 'ArrowDown': |
||||
/* istanbul ignore else */ |
||||
if (allowVerticalArrows) focusIfAvailable(downSibling); |
||||
break; |
||||
case 'ArrowUp': |
||||
/* istanbul ignore else */ |
||||
if (allowVerticalArrows) focusIfAvailable(upSibling); |
||||
break; |
||||
} |
||||
}; |
||||
|
||||
export default handleArrowKeys; |
||||
@ -0,0 +1,85 @@ |
||||
import jalaali from 'jalaali-js'; |
||||
|
||||
import { |
||||
GREGORIAN_MONTHS, |
||||
PERSIAN_MONTHS, |
||||
GREGORIAN_WEEK_DAYS, |
||||
PERSIAN_WEEK_DAYS, |
||||
PERSIAN_NUMBERS, |
||||
} from './constants'; |
||||
import { toExtendedDay } from './generalUtils'; |
||||
|
||||
const localeLanguages = { |
||||
en: { |
||||
months: GREGORIAN_MONTHS, |
||||
weekDays: GREGORIAN_WEEK_DAYS, |
||||
weekStartingIndex: 0, |
||||
getToday(gregorainTodayObject) { |
||||
return gregorainTodayObject; |
||||
}, |
||||
toNativeDate(date) { |
||||
return new Date(date.year, date.month - 1, date.day); |
||||
}, |
||||
getMonthLength(date) { |
||||
return new Date(date.year, date.month, 0).getDate(); |
||||
}, |
||||
transformDigit(digit) { |
||||
return digit; |
||||
}, |
||||
nextMonth: 'Next Month', |
||||
previousMonth: 'Previous Month', |
||||
openMonthSelector: 'Open Month Selector', |
||||
openYearSelector: 'Open Year Selector', |
||||
closeMonthSelector: 'Close Month Selector', |
||||
closeYearSelector: 'Close Year Selector', |
||||
from: 'from', |
||||
to: 'to', |
||||
defaultPlaceholder: 'Select...', |
||||
digitSeparator: ',', |
||||
yearLetterSkip: 0, |
||||
isRtl: false, |
||||
}, |
||||
fa: { |
||||
months: PERSIAN_MONTHS, |
||||
weekDays: PERSIAN_WEEK_DAYS, |
||||
weekStartingIndex: 1, |
||||
getToday({ year, month, day }) { |
||||
const { jy, jm, jd } = jalaali.toJalaali(year, month, day); |
||||
return { year: jy, month: jm, day: jd }; |
||||
}, |
||||
toNativeDate(date) { |
||||
const gregorian = jalaali.toGregorian(...toExtendedDay(date)); |
||||
return new Date(gregorian.gy, gregorian.gm - 1, gregorian.gd); |
||||
}, |
||||
getMonthLength(date) { |
||||
return jalaali.jalaaliMonthLength(date.year, date.month); |
||||
}, |
||||
transformDigit(digit) { |
||||
return digit |
||||
.toString() |
||||
.split('') |
||||
.map(letter => PERSIAN_NUMBERS[Number(letter)]) |
||||
.join(''); |
||||
}, |
||||
nextMonth: 'ماه بعد', |
||||
previousMonth: 'ماه قبل', |
||||
openMonthSelector: 'نمایش انتخابگر ماه', |
||||
openYearSelector: 'نمایش انتخابگر سال', |
||||
closeMonthSelector: 'بستن انتخابگر ماه', |
||||
closeYearSelector: 'بستن انتخابگر ماه', |
||||
from: 'از', |
||||
to: 'تا', |
||||
defaultPlaceholder: 'انتخاب...', |
||||
digitSeparator: '،', |
||||
yearLetterSkip: -2, |
||||
isRtl: true, |
||||
}, |
||||
}; |
||||
|
||||
const getLocaleDetails = locale => { |
||||
if (typeof locale === 'string') return localeLanguages[locale]; |
||||
return locale; |
||||
}; |
||||
|
||||
export { localeLanguages }; |
||||
export default getLocaleDetails; |
||||
@ -0,0 +1,61 @@ |
||||
/* |
||||
These utility functions highly depend on locale of the date picker(Persian or Gregorian) |
||||
*/ |
||||
|
||||
import getLocaleDetails from './localeLanguages'; |
||||
|
||||
const utils = (locale = 'en') => { |
||||
const { |
||||
months: monthsList, |
||||
getToday: localeGetToday, |
||||
toNativeDate, |
||||
getMonthLength, |
||||
weekStartingIndex, |
||||
transformDigit: getLanguageDigits, |
||||
} = typeof locale === 'string' ? getLocaleDetails(locale) : locale; |
||||
|
||||
const getToday = () => { |
||||
const todayDate = new Date(); |
||||
const year = todayDate.getFullYear(); |
||||
const month = todayDate.getMonth() + 1; |
||||
const day = todayDate.getDate(); |
||||
return localeGetToday({ year, month, day }); |
||||
}; |
||||
|
||||
const getMonthName = month => monthsList[month - 1]; |
||||
|
||||
const getMonthNumber = monthName => monthsList.indexOf(monthName) + 1; |
||||
|
||||
const getMonthFirstWeekday = date => { |
||||
const gregorianDate = toNativeDate({ ...date, day: 1 }); |
||||
const weekday = gregorianDate.getDay(); |
||||
const dayIndex = weekday + weekStartingIndex; |
||||
return dayIndex % 7; |
||||
}; |
||||
|
||||
const isBeforeDate = (day1, day2) => { |
||||
if (!day1 || !day2) return false; |
||||
return toNativeDate(day1) < toNativeDate(day2); |
||||
}; |
||||
|
||||
const checkDayInDayRange = ({ day, from, to }) => { |
||||
if (!day || !from || !to) return false; |
||||
const nativeDay = toNativeDate(day); |
||||
const nativeFrom = toNativeDate(from); |
||||
const nativeTo = toNativeDate(to); |
||||
return nativeDay > nativeFrom && nativeDay < nativeTo; |
||||
}; |
||||
|
||||
return { |
||||
getToday, |
||||
getMonthName, |
||||
getMonthNumber, |
||||
getMonthLength, |
||||
getMonthFirstWeekday, |
||||
isBeforeDate, |
||||
checkDayInDayRange, |
||||
getLanguageDigits, |
||||
}; |
||||
}; |
||||
|
||||
export default utils; |
||||
@ -0,0 +1,33 @@ |
||||
import { getDateAccordingToMonth } from './generalUtils'; |
||||
|
||||
const getSlideDate = ({ parent, isInitialActiveChild, activeDate, monthChangeDirection }) => { |
||||
if (!parent) { |
||||
return isInitialActiveChild ? activeDate : getDateAccordingToMonth(activeDate, 'NEXT'); |
||||
} |
||||
const child = parent.children[isInitialActiveChild ? 0 : 1]; |
||||
const isActiveSlide = |
||||
child.classList.contains('-shown') || child.classList.contains('-shownAnimated'); // check -shownAnimated for Safari bug
|
||||
return isActiveSlide ? activeDate : getDateAccordingToMonth(activeDate, monthChangeDirection); |
||||
}; |
||||
|
||||
const animateContent = ({ parent, direction }) => { |
||||
const wrapperChildren = Array.from(parent.children); |
||||
const shownItem = wrapperChildren.find(child => child.classList.contains('-shown')); |
||||
const hiddenItem = wrapperChildren.find(child => child !== shownItem); |
||||
const baseClass = shownItem.classList[0]; |
||||
const isNextMonth = direction === 'NEXT'; |
||||
const getAnimationClass = value => (value ? '-hiddenNext' : '-hiddenPrevious'); |
||||
hiddenItem.style.transition = 'none'; |
||||
shownItem.style.transition = ''; |
||||
shownItem.className = `${baseClass} ${getAnimationClass(!isNextMonth)}`; |
||||
hiddenItem.className = `${baseClass} ${getAnimationClass(isNextMonth)}`; |
||||
hiddenItem.classList.add('-shownAnimated'); |
||||
}; |
||||
|
||||
const handleSlideAnimationEnd = ({ target }) => { |
||||
target.classList.remove('-hiddenNext'); |
||||
target.classList.remove('-hiddenPrevious'); |
||||
target.classList.replace('-shownAnimated', '-shown'); |
||||
}; |
||||
|
||||
export { animateContent, getSlideDate, handleSlideAnimationEnd }; |
||||
@ -0,0 +1,48 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
function Search({ |
||||
lang, |
||||
textColor, |
||||
backgroundColor = "bg-white ", |
||||
onChange, |
||||
name, |
||||
icon = true, |
||||
placeholder, |
||||
padding = "py-3 lg:py-4 md:py-5", |
||||
}) { |
||||
return ( |
||||
<div className="flex items-center justify-center w-full z-50 overflow-hidden rounded-md"> |
||||
<div className="relative text-gray-600 focus-within:text-gray-400 w-full"> |
||||
{icon ? ( |
||||
<span className="absolute inset-y-0 flex items-center pl-2 left-0"> |
||||
<button |
||||
type="submit" |
||||
className="p-1 focus:outline-none focus:shadow-outline" |
||||
> |
||||
<img src="/icons/search.png" className="w-5 h-5" alt="" /> |
||||
</button> |
||||
</span> |
||||
) : null} |
||||
<input |
||||
type="search" |
||||
name={name} |
||||
className={`z-50 w-full text-xs font-2 ${padding} ${backgroundColor} ${ |
||||
textColor ? textColor : "text-gray1" |
||||
} border border-solid border-surfaceBorder rounded-md pr-3 ${ |
||||
icon ? "pl-14" : "pl-3" |
||||
} outline-none focus:border-primary`}
|
||||
placeholder={placeholder} |
||||
autoComplete="off" |
||||
onChange={(e) => onChange(e.target.value)} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
const mapDispatchToProps = {}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Search); |
||||
@ -0,0 +1,37 @@ |
||||
// it has style inside index.scss ---> // Start SimpleCalendar && end SimpleCalendar
|
||||
|
||||
import React, { useEffect, useState } from "react"; |
||||
import DatePicker from "../CalendarComponents"; |
||||
import { utils } from "../CalendarComponents"; |
||||
|
||||
const SimpleDatePicker = ({returnValue,defaultValue,mode}) => { |
||||
const [selectedDay, setSelectedDay] = useState(defaultValue || null); |
||||
const gotoToday = () => { |
||||
setSelectedDay(utils("fa").getToday()); |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
if(mode){ |
||||
returnValue(selectedDay, mode); |
||||
} |
||||
else{ |
||||
returnValue(selectedDay); |
||||
} |
||||
// returnValue(selectedDay);
|
||||
}, [selectedDay]); |
||||
|
||||
return ( |
||||
<div className="flex items-center justify-center w-full"> |
||||
<DatePicker |
||||
value={selectedDay} |
||||
onChange={setSelectedDay} |
||||
inputPlaceholder="انتخاب تاریخ" |
||||
shouldHighlightWeekends |
||||
renderFooter={() => <button onClick={gotoToday}>برو به امروز</button>} |
||||
locale="fa" |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default SimpleDatePicker; |
||||
@ -0,0 +1,23 @@ |
||||
import React from "react"; |
||||
|
||||
const ShowMoreRows = ({ pageSize, setPageSize }) => { |
||||
return ( |
||||
<select |
||||
className="text-white text-sm rounded cursor-pointer mr-2 bg-[#65A9FF]" |
||||
value={pageSize} |
||||
onChange={(e) => setPageSize(Number(e.target.value))} |
||||
> |
||||
{[7, 10, 25, 50].map((pageSize) => ( |
||||
<option |
||||
key={pageSize} |
||||
value={pageSize} |
||||
className=" text-xs text-right ltr" |
||||
> |
||||
نمایش {pageSize} |
||||
</option> |
||||
))} |
||||
</select> |
||||
); |
||||
}; |
||||
|
||||
export default ShowMoreRows; |
||||
@ -0,0 +1,31 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
//components
|
||||
import ShowMoreRows from "./components/ShowMoreRows"; |
||||
import GoToPage from "../Toolbar/components/GoToPage"; |
||||
|
||||
export const Footer = ({ |
||||
pageIndex, |
||||
gotoPage, |
||||
pageOptions, |
||||
pageSize, |
||||
setPageSize, |
||||
}) => { |
||||
return ( |
||||
<div className="flex items-center gap-6"> |
||||
<GoToPage |
||||
pageIndex={pageIndex} |
||||
gotoPage={gotoPage} |
||||
pageOptions={pageOptions} |
||||
/> |
||||
<ShowMoreRows pageSize={pageSize} setPageSize={setPageSize} /> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
const mapDispatchToProps = {}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Footer); |
||||
@ -0,0 +1,185 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
//components
|
||||
import RowDetail from "../../../components/RowDetail"; |
||||
|
||||
const Table = ({ |
||||
getTableProps, |
||||
headerGroups, |
||||
prepareRow, |
||||
filtering, |
||||
tabs, |
||||
setTabs, |
||||
getTableBodyProps, |
||||
columns, |
||||
page, |
||||
rows, |
||||
footerGroups, |
||||
name, |
||||
schema, |
||||
data, |
||||
editor, |
||||
activeOtherTab, |
||||
setActiveOtherTab, |
||||
fake, |
||||
setFake, |
||||
}) => { |
||||
// const bodyComponent = React.useMemo(() => {
|
||||
// return {
|
||||
// 1: page.map((row, idx) => {
|
||||
// prepareRow(row);
|
||||
// return (
|
||||
// <React.Fragment key={idx}>
|
||||
// <tr
|
||||
// {...row.getRowProps()}
|
||||
// // className={isEven(idx) ? "bg-gray-600" : "bg-white"}
|
||||
// >
|
||||
// {row.cells.map((cell, index) => {
|
||||
// return (
|
||||
// <td
|
||||
// key={index}
|
||||
// {...cell.getCellProps()}
|
||||
// className="p-4 whitespace-nowrap text-sm text-[#00253A]"
|
||||
// role="cell"
|
||||
// >
|
||||
// {cell.render("Cell")}
|
||||
// </td>
|
||||
// );
|
||||
// })}
|
||||
// </tr>
|
||||
// {row.isExpanded ? (
|
||||
// <tr className="w-full">
|
||||
// <td colSpan={headerGroups[0].headers.length}>
|
||||
// <RowDetail
|
||||
// data={data}
|
||||
// schema={schema.filter((e) => e.more)}
|
||||
// setTabs={setTabs}
|
||||
// tabs={tabs}
|
||||
// row={row.original}
|
||||
// name={name}
|
||||
// />
|
||||
// </td>
|
||||
// </tr>
|
||||
// ) : null}
|
||||
// </React.Fragment>
|
||||
// );
|
||||
// }),
|
||||
// 2 : editor
|
||||
// };
|
||||
// },[tabs]);
|
||||
|
||||
return ( |
||||
<table |
||||
{...getTableProps()} |
||||
className="w-full divide-y divide-gray-200 mb-5" |
||||
> |
||||
<thead className="bg-[#f3fff4]"> |
||||
{headerGroups.map((headerGroup, index) => ( |
||||
<tr key={index} {...headerGroup.getHeaderGroupProps()}> |
||||
{headerGroup.headers.map((column) => ( |
||||
<th |
||||
{...column.getHeaderProps(column.getSortByToggleProps())} |
||||
scope="col" |
||||
className="cursor-pointer py-2 px-2 text-right text-sm bg-[#3287B9] text-background text-white" |
||||
> |
||||
{column.render("Header")} |
||||
{/* {column.render("description")} */} |
||||
<span> |
||||
{column.isSorted ? (column.isSortedDesc ? " 🔽" : " 🔼") : ""} |
||||
</span> |
||||
</th> |
||||
))} |
||||
</tr> |
||||
))} |
||||
</thead> |
||||
{/* filter row */} |
||||
{console.log("...............................o")} |
||||
{filtering ? ( |
||||
<thead className="bg-[#F1F5FE]"> |
||||
{headerGroups.map((headerGroup, index) => ( |
||||
<tr key={index} {...headerGroup.getHeaderGroupProps()}> |
||||
{headerGroup.headers.map((column) => ( |
||||
<> |
||||
<th |
||||
{...column.getHeaderProps()} |
||||
className="py-2 px-2 text-sm text-primaryText" |
||||
> |
||||
{column.canFilter ? column.render("Filter") : null} |
||||
</th> |
||||
</> |
||||
))} |
||||
</tr> |
||||
))} |
||||
</thead> |
||||
) : null} |
||||
<tbody |
||||
{...getTableBodyProps()} |
||||
className="w-full divide-y divide-gray-20" |
||||
> |
||||
{page.map((row, idx) => { |
||||
prepareRow(row); |
||||
return ( |
||||
<React.Fragment key={idx}> |
||||
<tr |
||||
{...row.getRowProps()} |
||||
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
|
||||
> |
||||
{row.cells.map((cell, index) => { |
||||
return ( |
||||
<td |
||||
key={index} |
||||
{...cell.getCellProps()} |
||||
className="py-4 px-2 whitespace-nowrap text-sm text-[#00253A] text-right" |
||||
role="cell" |
||||
> |
||||
{cell.render("Cell")} |
||||
</td> |
||||
); |
||||
})} |
||||
</tr> |
||||
{row.isExpanded ? ( |
||||
<tr className="w-full"> |
||||
<td colSpan={headerGroups[0].headers.length}> |
||||
<RowDetail |
||||
data={data} |
||||
schema={schema.filter((e) => e.more)} |
||||
setTabs={setTabs} |
||||
tabs={tabs} |
||||
row={row.original} |
||||
name={name} |
||||
/> |
||||
</td> |
||||
</tr> |
||||
) : null} |
||||
</React.Fragment> |
||||
); |
||||
})} |
||||
|
||||
{/* {tabs?.length > 1 && editor} */} |
||||
</tbody> |
||||
{/* {tabs?.length > 1 && editor} */} |
||||
<tfoot className={`bg-blue-900 ${rows.length > 5 ? "w-full" : "hidden"}`}> |
||||
{footerGroups.map((footerGroup, index) => ( |
||||
<tr key={index} {...footerGroup.getFooterGroupProps()}> |
||||
{footerGroup.headers.map((column, index) => ( |
||||
<td |
||||
key={index} |
||||
{...column.getFooterProps} |
||||
className="py-2 px-4 text-right text-xs text-white" |
||||
> |
||||
{column.render("Footer")} |
||||
</td> |
||||
))} |
||||
</tr> |
||||
))} |
||||
</tfoot> |
||||
</table> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
const mapDispatchToProps = {}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Table); |
||||
@ -0,0 +1,61 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
//components
|
||||
import Table from "./components/Table"; |
||||
|
||||
export const Main = ({ |
||||
getTableProps, |
||||
headerGroups, |
||||
prepareRow, |
||||
filtering, |
||||
setFiltering, |
||||
tabs, |
||||
setTabs, |
||||
getTableBodyProps, |
||||
columns, |
||||
page, |
||||
rows, |
||||
footerGroups, |
||||
name, |
||||
schema, |
||||
data, |
||||
editor, |
||||
activeOtherTab, |
||||
setActiveOtherTab, |
||||
fake, |
||||
setFake |
||||
}) => { |
||||
return ( |
||||
<main className="w-full flex-1"> |
||||
<Table |
||||
getTableProps={getTableProps} |
||||
headerGroups={headerGroups} |
||||
prepareRow={prepareRow} |
||||
filtering={filtering} |
||||
setFiltering={setFiltering} |
||||
tabs={tabs} |
||||
setTabs={setTabs} |
||||
fake={fake} |
||||
setFake={setFake} |
||||
getTableBodyProps={getTableBodyProps} |
||||
columns={columns} |
||||
page={page} |
||||
rows={rows} |
||||
footerGroups={footerGroups} |
||||
name={name} |
||||
schema={schema} |
||||
data={data} |
||||
editor={editor} |
||||
activeOtherTab={activeOtherTab} |
||||
setActiveOtherTab={setActiveOtherTab} |
||||
/> |
||||
</main> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
const mapDispatchToProps = {}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Main); |
||||
@ -0,0 +1,21 @@ |
||||
import React from "react"; |
||||
|
||||
const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => { |
||||
return ( |
||||
<span className="text-xs text-blue-400 mr-1"> |
||||
صفحه{" "} |
||||
<input |
||||
className="ml-1 text-xs p-1 rounded border-blue-400 w-9" |
||||
type="number" |
||||
defaultValue={pageIndex + 1} |
||||
onChange={(e) => { |
||||
const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0; |
||||
gotoPage(pageNumber); |
||||
}} |
||||
/> |
||||
از {pageOptions.length} |
||||
</span> |
||||
); |
||||
}; |
||||
|
||||
export default GoToPage; |
||||
@ -0,0 +1,61 @@ |
||||
import React from "react"; |
||||
|
||||
const Pagination = ({ |
||||
gotoPage, |
||||
canPreviousPage, |
||||
previousPage, |
||||
canNextPage, |
||||
pageCount, |
||||
nextPage, |
||||
}) => { |
||||
return ( |
||||
<div className="flex flex-row items-center"> |
||||
<button |
||||
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
||||
onClick={() => gotoPage(0)} |
||||
disabled={!canPreviousPage} |
||||
> |
||||
<img |
||||
src="/icons/table/ReactTable4double-left-arrow.svg" |
||||
className="rotate-180 w-4" |
||||
alt="" |
||||
/> |
||||
</button> |
||||
<button |
||||
className={`rounded py-1 px-2 ml-1 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
||||
onClick={() => previousPage()} |
||||
disabled={!canPreviousPage} |
||||
> |
||||
<img |
||||
src="/icons/table/ReactTable4right-arrow.svg" |
||||
className="w-3" |
||||
alt="" |
||||
/> |
||||
</button> |
||||
<button |
||||
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
||||
onClick={() => nextPage()} |
||||
disabled={!canNextPage} |
||||
> |
||||
<img |
||||
src="/icons/table/ReactTable4left-arrow.svg" |
||||
className="w-3" |
||||
alt="" |
||||
/> |
||||
</button> |
||||
<button |
||||
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
||||
onClick={() => gotoPage(pageCount - 1)} |
||||
disabled={!canNextPage} |
||||
> |
||||
<img |
||||
src="/icons/table/ReactTable4double-left-arrow.svg" |
||||
className="w-4" |
||||
alt="" |
||||
/> |
||||
</button> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Pagination; |
||||
@ -0,0 +1,60 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => { |
||||
const [openModal, setOpenModal] = useState(false); |
||||
return ( |
||||
<section> |
||||
<div |
||||
onClick={() => setOpenModal(true)} |
||||
data-modal-toggle="large-modal" |
||||
className="mr-2 flex flex-col items-center justify-center p-1 bg-[#F9FBFF] rounded" |
||||
> |
||||
<img |
||||
src="/icons/table/ReactTable4settings.svg" |
||||
className="w-5 cursor-pointer" |
||||
alt="" |
||||
/> |
||||
</div> |
||||
{/* modal */} |
||||
<div |
||||
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg bg-opacity-90 bg-surfaceBorder flex items-center justify-center fixed left-0 top-0
|
||||
${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
|
||||
onClick={() => setOpenModal(false)} |
||||
> |
||||
<div |
||||
className="absolute top-[10%] bg-white w-6/12 p-4 rounded" |
||||
onClick={(e) => e.stopPropagation()} |
||||
> |
||||
<div className=""> |
||||
<h2 className="text-base"> |
||||
با زدن بر روی هر یک از چک باکس ها میتوانید نمایش ستون هارو خاموش |
||||
روشن کنید{" "} |
||||
</h2> |
||||
<div className="text-sm mt-5"> |
||||
<input |
||||
className="ml-2" |
||||
type="checkbox" |
||||
{...getToggleHideAllColumnsProps()} |
||||
/>{" "} |
||||
تاگل کردن همه |
||||
</div> |
||||
{allColumns.map((column, index) => ( |
||||
<div key={index}> |
||||
<label className="text-sm"> |
||||
<input |
||||
type="checkbox" |
||||
className="ml-2 " |
||||
{...column.getToggleHiddenProps()} |
||||
/> |
||||
{column.Footer} |
||||
</label> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Settings; |
||||
@ -0,0 +1,128 @@ |
||||
import React from "react"; |
||||
|
||||
const Tabbar = ({ |
||||
setTabs, |
||||
tabs, |
||||
name, |
||||
fake, |
||||
setFake, |
||||
activeOtherTab, |
||||
setActiveOtherTab, |
||||
}) => { |
||||
const tabsActionsHandler = React.useCallback( |
||||
(type, id) => { |
||||
if (type === "activation") { |
||||
setTabs({ |
||||
table: name, |
||||
tabs: tabs.map((tab) => { |
||||
return { ...tab, isActive: tab.id === id ? true : false }; |
||||
}), |
||||
}); |
||||
} |
||||
if (type === "delete") { |
||||
setTabs({ table: name, tabs: tabs.filter((tab) => tab.id !== id) }); |
||||
} |
||||
}, |
||||
[tabs] |
||||
); |
||||
const deleteTab = (e, index) => { |
||||
e.stopPropagation(); |
||||
let newList = []; |
||||
for (let i = 0; i < tabs.length; i++) { |
||||
if (i !== index) { |
||||
newList.push(tabs[i]); |
||||
} |
||||
} |
||||
if (tabs[index].isActive) { |
||||
newList[0].isActive = true; |
||||
setActiveOtherTab(false); |
||||
} |
||||
setFake(Math.random() * 1000); |
||||
setTabs(newList); |
||||
}; |
||||
const selectTab = (e, index) => { |
||||
let newList = [...tabs]; |
||||
if (index === 0) { |
||||
newList[0].isActive = true; |
||||
for (let i = 1; i < newList.length; i++) { |
||||
newList[i].isActive = false; |
||||
} |
||||
setActiveOtherTab(false); |
||||
} else { |
||||
for (let i = 0; i < newList.length; i++) { |
||||
if (i === index) { |
||||
newList[i].isActive = true; |
||||
} else { |
||||
newList[i].isActive = false; |
||||
} |
||||
} |
||||
setActiveOtherTab(true); |
||||
} |
||||
setFake(Math.random() * 1000); |
||||
setTabs(newList); |
||||
}; |
||||
// console.log(fake);
|
||||
// console.log("tabs:");
|
||||
// console.log(tabs);
|
||||
return ( |
||||
<ul |
||||
className="tabbar flex no-scrollbar overflow-x-auto scrolling-touch" |
||||
onMouseDown={(e) => { |
||||
const slider = window.document.querySelector(".tabbar"); |
||||
window.isDown = true; |
||||
window.startX = e.pageX - slider.offsetLeft; |
||||
window.scrollLeft = slider.scrollLeft; |
||||
}} |
||||
onMouseLeave={(e) => { |
||||
window.isDown = false; |
||||
}} |
||||
onMouseUp={(e) => { |
||||
window.isDown = false; |
||||
}} |
||||
onMouseMove={(e) => { |
||||
const slider = window.document.querySelector(".tabbar"); |
||||
if (!window.isDown) return; |
||||
e.preventDefault(); |
||||
const x = e.pageX - slider.offsetLeft; |
||||
const walk = (x - window.startX) * 1; |
||||
slider.scrollLeft = window.scrollLeft - walk; |
||||
}} |
||||
> |
||||
{tabs?.map((el, index) => ( |
||||
<li |
||||
key={index} |
||||
onClick={(e) => { |
||||
selectTab(e, index); |
||||
}} |
||||
aria-current="page" |
||||
className={`flex flex-row items-center text-sm text-white px-2 py-0.5 text-center active rounded-sm ${ |
||||
el?.isActive ? "text-[#fff]" : "text-[#000]" |
||||
} ${el?.isActive ? "bg-[#92c1fc]" : "bg-[#F1F6FF]"}`}
|
||||
> |
||||
<div |
||||
className="h-full py-2 pointer-events-none" |
||||
onClick={(e) => tabsActionsHandler("activation", el.id)} |
||||
> |
||||
{el.name} |
||||
</div> |
||||
{el.id ? ( |
||||
<img |
||||
src="/icons/table/ReactTable5zarbedar-icon.svg" |
||||
className="w-2 mr-3 cursor-pointer" |
||||
alt="" |
||||
onClick={(e) => { |
||||
deleteTab(e, index); |
||||
}} |
||||
/> |
||||
) : null} |
||||
</li> |
||||
))} |
||||
</ul> |
||||
); |
||||
}; |
||||
|
||||
window.isDown = false; |
||||
|
||||
export default Tabbar; |
||||
|
||||
// if (window.isDown) return e.preventDefault();
|
||||
@ -0,0 +1,21 @@ |
||||
import React from "react"; |
||||
|
||||
//components
|
||||
import Search from "../../../../Search"; |
||||
|
||||
const TableSearch = ({ globalFilter, setGlobalFilter }) => { |
||||
|
||||
return ( |
||||
<div className="flex flex-row-reverse items-center relative ml-2 "> |
||||
<Search |
||||
icon={false} |
||||
placeholder="جستجو ..." |
||||
padding="py-1" |
||||
value={globalFilter || ' '} |
||||
onChange={(value) => setGlobalFilter(value)} |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default TableSearch; |
||||
@ -0,0 +1,69 @@ |
||||
import React from "react"; |
||||
|
||||
//components
|
||||
import Tabbar from "./components/Tabbar"; |
||||
import TableSearch from "./components/TableSearch"; |
||||
import GoToPage from "./components/GoToPage"; |
||||
import Pagination from "./components/Pagination"; |
||||
import Settings from "./components/Settings"; |
||||
|
||||
export const Toolbar = ({ |
||||
setTabs, |
||||
tabs, |
||||
globalFilter, |
||||
setGlobalFilter, |
||||
pageIndex, |
||||
pageOptions, |
||||
gotoPage, |
||||
canPreviousPage, |
||||
previousPage, |
||||
canNextPage, |
||||
pageCount, |
||||
nextPage, |
||||
allColumns, |
||||
getToggleHideAllColumnsProps, |
||||
name, |
||||
fake, |
||||
setFake, |
||||
activeOtherTab, |
||||
setActiveOtherTab, |
||||
}) => { |
||||
return ( |
||||
<div className="flex justify-between items-center"> |
||||
<Tabbar |
||||
setTabs={setTabs} |
||||
tabs={tabs} |
||||
name={name} |
||||
fake={fake} |
||||
setFake={setFake} |
||||
activeOtherTab={activeOtherTab} |
||||
setActiveOtherTab={setActiveOtherTab} |
||||
/> |
||||
<div className="flex py-2 bg-surface items-center gap-2 px-2 bg-sky-200"> |
||||
<TableSearch |
||||
globalFilter={globalFilter} |
||||
setGlobalFilter={setGlobalFilter} |
||||
/> |
||||
<GoToPage |
||||
pageIndex={pageIndex} |
||||
pageOptions={pageOptions} |
||||
gotoPage={gotoPage} |
||||
/> |
||||
<Pagination |
||||
gotoPage={gotoPage} |
||||
canPreviousPage={canPreviousPage} |
||||
previousPage={previousPage} |
||||
canNextPage={canNextPage} |
||||
pageCount={pageCount} |
||||
nextPage={nextPage} |
||||
/> |
||||
<Settings |
||||
allColumns={allColumns} |
||||
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Toolbar; |
||||
@ -0,0 +1,14 @@ |
||||
import React from "react"; |
||||
|
||||
const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => { |
||||
const defaultRef = React.useRef(); |
||||
const resolvedRef = ref || defaultRef; |
||||
|
||||
React.useEffect(() => { |
||||
resolvedRef.current.indeterminate = indeterminate; |
||||
}, [resolvedRef, indeterminate]); |
||||
|
||||
return <input type="checkbox" ref={resolvedRef} {...rest} />; |
||||
}); |
||||
|
||||
export default Checkbox; |
||||
@ -0,0 +1,15 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
export const ColumnSearch = ({ column }) => { |
||||
const { filterValue, setFilter } = column; |
||||
|
||||
return ( |
||||
<div className="w-full flex flex-row items-center "> |
||||
<input |
||||
value={filterValue || ""} |
||||
onChange={(e) => setFilter(e.target.value)} |
||||
className={`w-full h-8 text-xs text-blue-400 bg-[#F9FBFF] border-[#B5D6FF] rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`} |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -0,0 +1,98 @@ |
||||
import { tab } from "@testing-library/user-event/dist/tab"; |
||||
import { useState } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { table } from "../../../../../redux/actions"; |
||||
|
||||
//components
|
||||
import DropDown from "./Dropdown"; |
||||
|
||||
const Buttons = ({ |
||||
row, |
||||
setTabs, |
||||
tabs, |
||||
name, |
||||
fake, |
||||
setFake, |
||||
setActiveOtherTab, |
||||
activeOtherTab, |
||||
}) => { |
||||
const [activeDetails, setActiveDetails] = useState(null); |
||||
const editHandler = () => { |
||||
console.log("edit click"); |
||||
console.log(fake); |
||||
console.log(tabs); |
||||
// console.log(row);
|
||||
// console.log(name);
|
||||
let newList = [...tabs]; |
||||
console.log(newList); |
||||
for (let i = 0; i < newList.length; i++) { |
||||
newList[i].isActive = false; |
||||
} |
||||
newList.push({ |
||||
id: Math.floor(Math.random() * 10000), |
||||
name: row.original.name, |
||||
isActive: true, |
||||
data: row, |
||||
element: "editor", |
||||
}); |
||||
console.log(newList); |
||||
console.log("!!!!!!!!!!!!!!!!!!!!!!!"); |
||||
setFake(Math.random() * 10000); |
||||
setTabs(newList); |
||||
setActiveOtherTab(true); |
||||
}; |
||||
return ( |
||||
<div className="flex flex-row items-center justify-end "> |
||||
<div |
||||
className="" |
||||
onClick={() => { |
||||
setActiveDetails(!activeDetails); |
||||
}} |
||||
> |
||||
<button |
||||
className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300 text-[12px]" |
||||
{...row.getToggleRowExpandedProps()} |
||||
> |
||||
جزئیات |
||||
<img |
||||
src="/icons/table/ReactTable4arrow-icon.svg" |
||||
alt="" |
||||
className={`mx-1 w-3 cursor-pointer mr-2 transition-all duration-500 ${ |
||||
activeDetails ? "rotate-60" : "rotate-90" |
||||
}`}
|
||||
/> |
||||
</button> |
||||
</div> |
||||
<div |
||||
className="mx-1 p-1 rounded border border-gray-300 cursor-pointer" |
||||
onClick={editHandler} |
||||
> |
||||
<img src="/icons/table/ReactTable4edit.svg" alt="" className="w-10" /> |
||||
</div> |
||||
{/* <DropDown /> */} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
tabs: state.table.tabs, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
setTabs: table.setTab, |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Buttons); |
||||
|
||||
// setTabs({
|
||||
// table: name,
|
||||
// tabs: [
|
||||
// ...tabs,
|
||||
// { name: row.original.name, id: row.original.id, isActive: false },
|
||||
// ].map((tab) => {
|
||||
// return {
|
||||
// ...tab,
|
||||
// isActive: row.original.id === tab.id ? true : false,
|
||||
// };
|
||||
// }),
|
||||
// });
|
||||
@ -0,0 +1,53 @@ |
||||
import React from "react"; |
||||
|
||||
const DropDown = ({}) => { |
||||
return ( |
||||
<div className="mr-3"> |
||||
<button |
||||
className="" |
||||
id="dropdownButton" |
||||
data-dropdown-toggle="dropdown" |
||||
type="button" |
||||
> |
||||
<img |
||||
src="/icons/table/DropDownmore2.svg" |
||||
alt="" |
||||
className={`cursor-pointer w-5`} |
||||
/> |
||||
</button> |
||||
<div |
||||
id="dropdown" |
||||
className="hidden z-10 text-xs list-none bg-[#65A9FF] rounded divide-y divide-gray-100 shadow" |
||||
> |
||||
<ul className="" aria-labelledby="dropdownButton"> |
||||
<li> |
||||
<a |
||||
href="#" |
||||
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded" |
||||
> |
||||
ایتم شماره1 |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a |
||||
href="#" |
||||
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded" |
||||
> |
||||
ایتم شماره1 |
||||
</a> |
||||
</li> |
||||
<li> |
||||
<a |
||||
href="#" |
||||
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded" |
||||
> |
||||
ایتم شماره1 |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default DropDown; |
||||
@ -0,0 +1,75 @@ |
||||
import React, { useState } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { table } from "../../../../../redux/actions"; |
||||
|
||||
//components
|
||||
import DropDown from "./Dropdown"; |
||||
|
||||
const EditButtons = ({ |
||||
setFiltering, |
||||
filtering, |
||||
setTabs, |
||||
tabs, |
||||
name, |
||||
fake, |
||||
setFake, |
||||
setActiveOtherTab, |
||||
}) => { |
||||
const [selectedFilterRow, setSelectedFilterRow] = useState(filtering); |
||||
|
||||
const addNewItem = () => { |
||||
let newList = [...tabs]; |
||||
newList[0].isActive = false; |
||||
newList.push({ |
||||
name: "ردیف جدید", |
||||
isActive: true, |
||||
data: null, |
||||
id: Math.floor(Math.random() * 10000), |
||||
element: "editor", |
||||
}); |
||||
setFake(Math.random() * 10000); |
||||
setTabs(newList); |
||||
setActiveOtherTab(true); |
||||
}; |
||||
return ( |
||||
<div className="flex flex-row items-center justify-end"> |
||||
{/* add new row */} |
||||
<button |
||||
className="mx-1 flex flex-row items-center bg-[#65A9FF] p-2 text-xs text-white rounded border-b-2 border-blue-600" |
||||
onClick={addNewItem} |
||||
> |
||||
<div>ثبت جدید</div> |
||||
<img |
||||
src="/icons/table/ReactTable4plus.svg" |
||||
alt="" |
||||
className={`cursor-pointer w-2 mr-1 `} |
||||
/> |
||||
</button> |
||||
{/* filter */} |
||||
<img |
||||
src="/icons/table/ReactTable4filter.svg" |
||||
alt="" |
||||
className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8
|
||||
${selectedFilterRow ? "border" : "border-0"}`}
|
||||
onClick={() => { |
||||
setFiltering(!selectedFilterRow); |
||||
setSelectedFilterRow(!selectedFilterRow); |
||||
}} |
||||
/> |
||||
{/* dropDown */} |
||||
{/* <DropDown /> */} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
tabs: state.table.tabs, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
setTabs: table.setTab, |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(EditButtons); |
||||
|
||||
EditButtons.defaultProps = {}; |
||||
@ -0,0 +1,34 @@ |
||||
const status = { |
||||
1: { |
||||
color: "#65FFAD", |
||||
label: "وضعیت عادی", |
||||
}, |
||||
2: { |
||||
color: "#FF6565", |
||||
label: "اعلان سطح هشدار", |
||||
}, |
||||
3: { |
||||
color: "#65DAFF", |
||||
label: "بررسی و پیگیری", |
||||
}, |
||||
4: { |
||||
color: "#FFEA65", |
||||
label: "وضعیت بحرانی", |
||||
}, |
||||
}; |
||||
|
||||
export function OrderLevel({ value }) { |
||||
return ( |
||||
<div className="p-2 rounded-3xl border border-[#aaa] w-fit"> |
||||
<div className="flex flex-row items-center justify-center gap-2"> |
||||
<span |
||||
className={`w-2 h-2 rounded-full`} |
||||
style={{
|
||||
backgroundColor: status[value].color |
||||
}} |
||||
></span> |
||||
<span className="text-[#00253A]">{status[value].label}</span> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
const statusMap = { |
||||
1: { |
||||
label: "ارسال شده", |
||||
bg: "#E2FFE377", |
||||
color: "#00613D", |
||||
}, |
||||
2: { |
||||
label: "رسیدگی", |
||||
bg: "#FFF78733", |
||||
color: "#ECF150", |
||||
}, |
||||
3: { |
||||
label: "لغو شده", |
||||
bg: "#FFD8CC33", |
||||
color: "#611100", |
||||
}, |
||||
4: { |
||||
label: "پیگیری", |
||||
bg: "#E2FFFD33", |
||||
color: "#00614A", |
||||
}, |
||||
}; |
||||
|
||||
export function OrderStatus({ value }) { |
||||
value = +value; |
||||
return ( |
||||
<div className=""> |
||||
<span |
||||
className={`p-2 rounded bg-[${statusMap[value].bg}] text-[${statusMap[value].color}]`} |
||||
> |
||||
{statusMap[value].label} |
||||
</span> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,52 @@ |
||||
import React from "react"; |
||||
|
||||
export const SelectFilter = ({ |
||||
column: { filterValue, setFilter, preFilteredRows, id, render }, |
||||
}) => { |
||||
const options = React.useMemo(() => { |
||||
const options = new Set(); |
||||
preFilteredRows.forEach((row) => { |
||||
options.add(row.values[id]); |
||||
}); |
||||
return [...options.values()]; |
||||
}, [id, preFilteredRows]); |
||||
|
||||
return ( |
||||
<select |
||||
className="text-xs bg-[#F9FBFF] border-[#B5D6FF] flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" |
||||
name={id} |
||||
id={id} |
||||
value={filterValue} |
||||
onChange={(e) => { |
||||
setFilter(e.target.value || undefined); |
||||
}} |
||||
> |
||||
<option className="text-white bg-[#65A9FF]" value=""> |
||||
همه |
||||
</option> |
||||
{options.map((option, i) => ( |
||||
<option |
||||
key={i} |
||||
value={option} |
||||
className="text-right text-white px-2 bg-[#65A9FF]" |
||||
> |
||||
{(() => { |
||||
if (option === 1) { |
||||
return "ارسال شده"; |
||||
} else if (option === 2) { |
||||
return "رسیدگی"; |
||||
} else if (option === 3) { |
||||
return "لغو شده"; |
||||
} else if (option === 4) { |
||||
return "پیگیری"; |
||||
} else { |
||||
return "خطری"; |
||||
} |
||||
})()}{" "} |
||||
</option> |
||||
))} |
||||
</select> |
||||
); |
||||
}; |
||||
|
||||
export default SelectFilter; |
||||
@ -0,0 +1,39 @@ |
||||
import React from "react"; |
||||
|
||||
export const SliderColumnFilter = ({ |
||||
column: { filterValue, setFilter, preFilteredRows, id }, |
||||
}) => { |
||||
const [min, max] = React.useMemo(() => { |
||||
let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0; |
||||
let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0; |
||||
preFilteredRows.forEach((row) => { |
||||
min = Math.min(row.values[id], min); |
||||
max = Math.max(row.values[id], max); |
||||
}); |
||||
return [min, max]; |
||||
}, [id, preFilteredRows]); |
||||
|
||||
return ( |
||||
<div className="flex flex-row items-center justify-between w-10/12"> |
||||
<input |
||||
className=" w-10/12" |
||||
type="range" |
||||
min={min}
|
||||
max={max} |
||||
value={filterValue || min} |
||||
onChange={(e) => { |
||||
setFilter(parseInt(e.target.value, 10)); |
||||
}} |
||||
/> |
||||
<div className="p-1 rounded bg-blue-300 bg-opacity-20"> |
||||
<img |
||||
src="/icons/table/ReactTable4zarbedar-icon.svg" |
||||
onClick={() => setFilter(undefined)} |
||||
className="cursor-pointer w-2 h-2" |
||||
alt="" |
||||
/> |
||||
</div> |
||||
{/* <button onClick={() => setFilter(undefined)}>ریست</button> */} |
||||
</div> |
||||
); |
||||
}; |
||||
@ -0,0 +1,95 @@ |
||||
// import { format } from "date-fns";
|
||||
|
||||
//components
|
||||
import { OrderStatus } from "./components/OrderStatus"; |
||||
import { OrderLevel } from "./components/OrderLevel"; |
||||
import Buttons from "./components/Buttons"; |
||||
import EditButtons from "./components/EditButtons"; |
||||
import SelectFilter from "./components/SelectFilter.js"; |
||||
import { SliderColumnFilter } from "./components/SliderColumnFilter.js"; |
||||
import moment from "jalali-moment"; |
||||
import { ColumnSearch } from "../ColumnSearch"; |
||||
|
||||
const Components = { |
||||
date: ({ value }) => { |
||||
// return format(new Date(value), "dd/MM/yyyy");
|
||||
// return moment(value).locale("fa").format("YYYY-MM-DD")
|
||||
return moment(value, "YYYY/MM/DD") |
||||
.locale("fa") |
||||
.format("YYYY/MM/DD") |
||||
}, |
||||
OrderStatus, |
||||
OrderLevel, |
||||
text: ({ value }) => value, |
||||
string: ({ value }) => value, |
||||
number: ({ value }) => value, |
||||
}; |
||||
|
||||
const Filters = { |
||||
SliderColumnFilter: SliderColumnFilter, |
||||
SelectFilter: SelectFilter, |
||||
ColumnSrarch:ColumnSearch |
||||
}; |
||||
|
||||
export const COLUMNS = ({ |
||||
schema, |
||||
setFiltering, |
||||
filtering, |
||||
setTabs, |
||||
name, |
||||
tabs, |
||||
fake, |
||||
setFake, |
||||
setActiveOtherTab, |
||||
activeOtherTab, |
||||
}) => [ |
||||
...schema.map((e) => ({ |
||||
accessor: e.name, |
||||
Header: e.description, |
||||
// Cell: e.renderer ? Components[e.renderer] : Components["text"],
|
||||
Cell: e.type ? Components[e.type] : Components["text"], |
||||
Filter: e.filter ? Filters[e.filter] : Filters["ColumnSrarch"], |
||||
disableSortBy: e.sort == false, |
||||
Footer: "ستون " + e.description, |
||||
})), |
||||
{ |
||||
Header: () => ( |
||||
<EditButtons |
||||
setFiltering={setFiltering} |
||||
filtering={filtering} |
||||
name={name} |
||||
fake={fake} |
||||
setFake={setFake} |
||||
setActiveOtherTab={setActiveOtherTab} |
||||
/> |
||||
), |
||||
Footer: "ستون ", |
||||
accessor: "edit", |
||||
Cell: ({ row }) => ( |
||||
<Buttons |
||||
row={row} |
||||
name={name} |
||||
fake={fake} |
||||
setFake={setFake} |
||||
setActiveOtherTab={setActiveOtherTab} |
||||
activeOtherTab={activeOtherTab} |
||||
/> |
||||
), |
||||
disableSortBy: true, |
||||
disableFilters: true, |
||||
}, |
||||
]; |
||||
|
||||
|
||||
|
||||
// Cell: ({ row }) =>
|
||||
// Buttons({
|
||||
// row,
|
||||
// setTabs,
|
||||
// tabs,
|
||||
// name,
|
||||
// fake,
|
||||
// setFake,
|
||||
// setActiveOtherTab,
|
||||
// activeOtherTab,
|
||||
// }),
|
||||
@ -0,0 +1,57 @@ |
||||
import React from "react"; |
||||
import { OrderLevel } from "./Columns/components/OrderLevel"; |
||||
import { OrderStatus } from "./Columns/components/OrderStatus"; |
||||
|
||||
const components = { |
||||
orderLevel: (val) => <OrderLevel value={val} />, |
||||
orderStatus: (val) => <OrderStatus value={val} />, |
||||
string: (val) => <span className="text-black">{val}</span>, |
||||
number: (val) => <span className="text-black">{val}</span>, |
||||
default: (val) => <span className="text-black">{val}</span>, |
||||
}; |
||||
|
||||
const RowDetail = ({ schema, data, tabs, setTabs, row, name,fake,setFake }) => { |
||||
return ( |
||||
<div className="w-full flex items-center border-r-4 border-blue-600 p-2 bg-[#FBFCFE]"> |
||||
{/* right */} |
||||
<div className="w-[80%] flex flex-wrap items-center "> |
||||
{schema.map((field) => ( |
||||
<div className="flex items-center mr-2 my-2"> |
||||
<div className="w-1 h-4 ml-1 rounded bg-[#EDF2FB]"></div> |
||||
<p className="flex items-center gap-1 text-xs text-blue-400 border-[#65A9FF]"> |
||||
{field?.description} |
||||
{components[field?.type || "default"](data[0][field?.name])} |
||||
</p> |
||||
</div> |
||||
))} |
||||
</div> |
||||
{/* left */} |
||||
<div className="w-[20%] flex flex-col items-end justify-end"> |
||||
<button className="border border-[#D53921] text-[#D53921] rounded w-8/12 text-xs py-2 mb-2 bg-white"> |
||||
حذف |
||||
</button> |
||||
<button |
||||
className="border border-[#65A9FF] text-[#65A9FF] rounded w-8/12 text-xs py-2 bg-white" |
||||
onClick={() => { |
||||
setTabs({ |
||||
table: name, |
||||
tabs: [ |
||||
...tabs, |
||||
{ name: row.name, id: row.id, isActive: true }, |
||||
].map((tab) => { |
||||
return { |
||||
...tab, |
||||
isActive: row.id === tab.id ? true : false, |
||||
}; |
||||
}), |
||||
}); |
||||
}} |
||||
> |
||||
نمایش |
||||
</button> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default RowDetail; |
||||
@ -0,0 +1,213 @@ |
||||
import React, { useState, useMemo } from "react"; |
||||
import { |
||||
useTable, |
||||
useSortBy, |
||||
useGlobalFilter, |
||||
useFilters, |
||||
usePagination, |
||||
useRowSelect, |
||||
useColumnOrder, |
||||
useExpanded, |
||||
} from "react-table"; |
||||
|
||||
//components
|
||||
// import Breadrumbs from "../Breadcrumbs";
|
||||
import Toolbar from "./Layouts/Toolbar"; |
||||
import Checkbox from "./components/Checkbox"; |
||||
import { COLUMNS } from "./components/Columns"; |
||||
import { ColumnSearch } from "../Table/components/ColumnSearch"; |
||||
|
||||
import Footer from "./Layouts/Footer"; |
||||
import Main from "./Layouts/Main"; |
||||
|
||||
const Table = ({ |
||||
data, |
||||
schema, |
||||
name, |
||||
Editor, |
||||
getData, |
||||
title, |
||||
tabs, |
||||
setTabs, |
||||
fake, |
||||
setFake, |
||||
activeOtherTab, |
||||
setActiveOtherTab, |
||||
add, |
||||
update, |
||||
}) => { |
||||
const [filtering, setFiltering] = useState(false); |
||||
|
||||
const columns = useMemo( |
||||
() => |
||||
COLUMNS({ |
||||
schema: schema.filter((e) => !e.more), |
||||
filtering, |
||||
setFiltering, |
||||
setTabs, |
||||
name, |
||||
tabs, |
||||
fake, |
||||
setFake, |
||||
activeOtherTab, |
||||
setActiveOtherTab, |
||||
}), |
||||
[filtering, schema] |
||||
); |
||||
|
||||
const EditableCell = ({ |
||||
value: initialValue, |
||||
row: { index }, |
||||
column: { id }, |
||||
updateMyData, // This is a custom function that we supplied to our table instance
|
||||
}) => { |
||||
// We need to keep and update the state of the cell normally
|
||||
const [value, setValue] = React.useState(initialValue); |
||||
|
||||
const onChange = (e) => { |
||||
setValue(e.target.value); |
||||
}; |
||||
|
||||
// We'll only update the external data when the input is blurred
|
||||
const onBlur = () => { |
||||
updateMyData(index, id, value); |
||||
}; |
||||
|
||||
// If the initialValue is changed external, sync it up with our state
|
||||
React.useEffect(() => { |
||||
setValue(initialValue); |
||||
}, [initialValue]); |
||||
|
||||
return <input value={value} onChange={onChange} onBlur={onBlur} />; |
||||
}; |
||||
|
||||
const defaultColumn = React.useMemo(() => { |
||||
return { |
||||
Filter: ColumnSearch, |
||||
}; |
||||
}, []); |
||||
|
||||
const { |
||||
getTableProps, |
||||
getTableBodyProps, |
||||
headerGroups, |
||||
footerGroups, |
||||
rows, |
||||
page, |
||||
nextPage, |
||||
previousPage, |
||||
canNextPage, |
||||
canPreviousPage, |
||||
pageOptions, |
||||
gotoPage, |
||||
pageCount, |
||||
setPageSize, |
||||
prepareRow, |
||||
allColumns, |
||||
getToggleHideAllColumnsProps, |
||||
setColumnOrder, |
||||
selectedFlatRows, |
||||
state, |
||||
setGlobalFilter, |
||||
resetResizing, |
||||
} = useTable( |
||||
{ |
||||
columns, |
||||
data, |
||||
defaultColumn, |
||||
}, |
||||
useColumnOrder, |
||||
useFilters, |
||||
useGlobalFilter, |
||||
useSortBy, |
||||
useExpanded, |
||||
usePagination, |
||||
useRowSelect, |
||||
(hooks) => { |
||||
hooks.visibleColumns.push((columns) => { |
||||
return [ |
||||
{ |
||||
id: "selection", |
||||
Header: ({ getToggleAllRowsSelectedProps }) => ( |
||||
<Checkbox {...getToggleAllRowsSelectedProps()} /> |
||||
), |
||||
Cell: ({ row }) => ( |
||||
<Checkbox {...row.getToggleRowSelectedProps()} /> |
||||
), |
||||
}, |
||||
...columns, |
||||
]; |
||||
}); |
||||
} |
||||
); |
||||
|
||||
const { globalFilter, pageIndex, pageSize } = state; |
||||
const acitvieTab = tabs?.find((e) => e.isActive) || {}; |
||||
return ( |
||||
<div className="w-full flex flex-col flex-1"> |
||||
<Toolbar |
||||
setTabs={setTabs} |
||||
tabs={tabs} |
||||
fake={fake} |
||||
setFake={setFake} |
||||
activeOtherTab={activeOtherTab} |
||||
setActiveOtherTab={setActiveOtherTab} |
||||
setGlobalFilter={setGlobalFilter} |
||||
globalFilter={globalFilter} |
||||
pageIndex={pageIndex} |
||||
pageOptions={pageOptions} |
||||
gotoPage={gotoPage} |
||||
canPreviousPage={canPreviousPage} |
||||
previousPage={previousPage} |
||||
canNextPage={canNextPage} |
||||
pageCount={pageCount} |
||||
nextPage={nextPage} |
||||
allColumns={allColumns} |
||||
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps} |
||||
name={name} |
||||
/> |
||||
{acitvieTab.element == "table" && ( |
||||
<Main |
||||
getTableProps={getTableProps} |
||||
headerGroups={headerGroups} |
||||
prepareRow={prepareRow} |
||||
filtering={filtering} |
||||
setTabs={setTabs} |
||||
tabs={tabs} |
||||
fake={fake} |
||||
setFake={setFake} |
||||
activeOtherTab={activeOtherTab} |
||||
setActiveOtherTab={setActiveOtherTab} |
||||
columns={columns} |
||||
getTableBodyProps={getTableBodyProps} |
||||
page={page} |
||||
rows={rows} |
||||
footerGroups={footerGroups} |
||||
name={name} |
||||
schema={schema} |
||||
data={data} |
||||
/> |
||||
)} |
||||
{acitvieTab.element == "table" && ( |
||||
<Footer |
||||
pageIndex={pageIndex} |
||||
gotoPage={gotoPage} |
||||
pageOptions={pageOptions} |
||||
pageSize={pageSize} |
||||
setPageSize={setPageSize} |
||||
/> |
||||
)} |
||||
{acitvieTab.element == "editor" && ( |
||||
<Editor |
||||
schema={schema} |
||||
data={acitvieTab.data} |
||||
add={add} |
||||
update={update} |
||||
/> |
||||
)} |
||||
{/* {acitvieTab.element == "viewer" && <Viewer />} */} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Table; |
||||
@ -0,0 +1,8 @@ |
||||
const table = { |
||||
setTab: |
||||
(data = {}) => |
||||
async (dispatch) => |
||||
await dispatch({ type: "table/setTab", data }), |
||||
}; |
||||
|
||||
export default table; |
||||
@ -0,0 +1,126 @@ |
||||
const initialState = { |
||||
productTable: { |
||||
data: [ |
||||
{ |
||||
id: 1, |
||||
name: "خسرو سهرابی", |
||||
order_date: "1400/11/09", |
||||
order_price: 1, |
||||
order_number: "09120023100", |
||||
user_job: "مهندس ساختمان", |
||||
order_status: 1, |
||||
order_level: 1, |
||||
birth_place: "استان تهران شهر تهران", |
||||
office_phone: "02144407010", |
||||
education: "کارشناسی", |
||||
job: "فروشنده لوازم خانگی", |
||||
field_study: "مدیریت صنعتی", |
||||
birth_day: "1368/09/02", |
||||
uni: "تهران", |
||||
address: |
||||
"خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", |
||||
behaviour: |
||||
"بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق", |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: "خسرو سهرابی", |
||||
order_date: "1400/11/09", |
||||
order_price: 1, |
||||
order_number: "09120023100", |
||||
user_job: "مهندس ساختمان", |
||||
order_status: 1, |
||||
order_level: 1, |
||||
birth_place: "استان تهران شهر تهران", |
||||
office_phone: "02144407010", |
||||
education: "کارشناسی", |
||||
job: "فروشنده لوازم خانگی", |
||||
field_study: "مدیریت صنعتی", |
||||
birth_day: "1368/09/02", |
||||
uni: "تهران", |
||||
address: |
||||
"خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", |
||||
behaviour: |
||||
"بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق", |
||||
}, |
||||
], |
||||
schema: [ |
||||
{ |
||||
description: "نام و نام خانوادگی", |
||||
name: "name", |
||||
type: "text", |
||||
sort: false, |
||||
}, |
||||
{ |
||||
description: "تاریخ سفارش", |
||||
name: "order_date", |
||||
filter: "SliderColumnFilter", |
||||
type: "text", |
||||
renderer: "date", |
||||
}, |
||||
{ |
||||
description: "مبلغ سفارش", |
||||
name: "order_price", |
||||
type: "text", |
||||
filter: "SliderColumnFilter", |
||||
}, |
||||
{ |
||||
description: "شماره سفارش", |
||||
name: "order_number", |
||||
type: "text", |
||||
}, |
||||
{ |
||||
description: "شغل کاربر", |
||||
name: "user_job", |
||||
type: "text", |
||||
more: true, |
||||
}, |
||||
{ |
||||
description: "وضعیت سفارش", |
||||
type: "text", |
||||
name: "order_status", |
||||
renderer: "OrderStatus", |
||||
filter: "SelectFilter", |
||||
more: true, |
||||
enum: { |
||||
1: "ارسال شده", |
||||
2: "رسیدگی", |
||||
3: "لغو شده", |
||||
4: "پیگیری", |
||||
}, |
||||
}, |
||||
{ |
||||
description: "سطح اهمیت", |
||||
type: "text", |
||||
name: "order_level", |
||||
renderer: "OrderLevel", |
||||
filter: "SelectFilter", |
||||
more: true, |
||||
enum: { |
||||
1: "وضعیت عادی", |
||||
2: "اعلان سطح هشدار", |
||||
3: "بررسی و پیگیری", |
||||
4: "وضعیت بحرانی", |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
tabs: [], |
||||
// table2: {
|
||||
// tabs: [],
|
||||
// },
|
||||
}; |
||||
|
||||
export default function table(state = initialState, action) { |
||||
let { type, data } = action; |
||||
switch (type) { |
||||
case "table/setTab": |
||||
console.log("reducer:") |
||||
console.log(data); |
||||
return { |
||||
...state,tabs:data |
||||
}; |
||||
default: |
||||
return state; |
||||
} |
||||
} |
||||
@ -0,0 +1,105 @@ |
||||
|
||||
|
||||
import React, { useMemo, useState } from "react"; |
||||
import { useEffect } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import Table from "../../components/Table"; |
||||
import * as actions from "../../redux/actions"; |
||||
import Editor from "./layouts/Editor"; |
||||
|
||||
const source = "user"; |
||||
const title = " مدیریت کاربران"; |
||||
|
||||
const UserManagement = ({ |
||||
info, |
||||
getData, |
||||
tabs, |
||||
setTabs, |
||||
add, |
||||
update, |
||||
getSchoolList, |
||||
schoolList |
||||
}) => { |
||||
useMemo(() => { |
||||
// getData({ num: 1000 });
|
||||
getSchoolList({ productType :7}); |
||||
}, []); |
||||
// console.log(info);
|
||||
console.log(schoolList); |
||||
useEffect(() => { |
||||
setTabs([ |
||||
{ |
||||
id: 0, |
||||
name: title, |
||||
isActive: true, |
||||
element: "table", |
||||
}, |
||||
]); |
||||
}, []); |
||||
console.log("ProductManagement render---------------------------------"); |
||||
// console.log(tabs);
|
||||
// const [tabs, setTabs] = useState([
|
||||
// {
|
||||
// id: 0,
|
||||
// name: title,
|
||||
// isActive: true,
|
||||
// },
|
||||
// ]);
|
||||
const [activeOtherTab, setActiveOtherTab] = useState(false); |
||||
const [fake, setFake] = useState(0); |
||||
return ( |
||||
<div |
||||
className="UserManagement w-[95.5%] h-screen max-h-screen bg-[#F8F8F8] overflow-y-auto rtl relative" |
||||
// style={{ width: "calc(100% - 4.5%)" }}
|
||||
> |
||||
<div className="w-full h-full absolute top-0 left-0 bg-[#ffffff10] backdrop-blur z-[100] flex items-center justify-center"> |
||||
<div className="w-1/2 py-4 px-2 rounded bg-white flex items-center justify-between"> |
||||
<select |
||||
name="UserManagement-school-select" |
||||
id="UserManagement-school-select" |
||||
className="w-[70%] h-12 rounded px-1 py-0" |
||||
> |
||||
{schoolList?.map((item,index)=>( |
||||
<option key={index} value={item.id}>{item?.name}</option> |
||||
))} |
||||
</select> |
||||
<div className="h-12 w-[25%] rounded flex items-center justify-center text-white bg-red52"> |
||||
تایید |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className="flex flex-1 w-full pt-12 pb-4"> |
||||
<Table |
||||
data={info.list || []} |
||||
schema={info.schema || []} |
||||
Editor={Editor} |
||||
add={add} |
||||
update={update} |
||||
getData={getData} |
||||
title={title} |
||||
tabs={tabs} |
||||
setTabs={setTabs} |
||||
fake={fake} |
||||
setFake={setFake} |
||||
activeOtherTab={activeOtherTab} |
||||
setActiveOtherTab={setActiveOtherTab} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
const mapStateToProps = (state) => ({ |
||||
info: state[source], |
||||
tabs: state.table.tabs, |
||||
schoolList: state.book.list |
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
getData: actions[source].list, |
||||
setTabs: actions.table.setTab, |
||||
update: actions[source].update, |
||||
add: actions[source].add, |
||||
getSchoolList : actions.book.list |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(UserManagement); |
||||
@ -0,0 +1,202 @@ |
||||
import React, { useEffect, useState } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { file } from "../../../redux/actions"; |
||||
import loadingGiff from "../../../assets/img/Rolling-1s-200px.gif"; |
||||
import SimpleDatePicker from "../../../components/SimpleDatePicker"; |
||||
import moment from "jalali-moment"; |
||||
const baseUrl = "https://light.barnamenegar.com/api/v1"; |
||||
const components = (props) => ({ |
||||
text: ( |
||||
<input |
||||
type="text" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
/> |
||||
), |
||||
string: ( |
||||
<textarea |
||||
type="text" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
/> |
||||
), |
||||
number: ( |
||||
<input |
||||
type="number" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
/> |
||||
), |
||||
select: ( |
||||
<select |
||||
type="text" |
||||
className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA]" |
||||
{...props} |
||||
> |
||||
{Object.entries(props?.options || {}).map(([v, k]) => ( |
||||
<option value={v} key={v}> |
||||
{k} |
||||
</option> |
||||
))} |
||||
</select> |
||||
), |
||||
file: ( |
||||
<div className="table-edit-input w-full py-3 px-2 rounded-md border border-[#D5DEEA] flex justify-between bg-[#fff]"> |
||||
<div className="w-full flex items-center"> |
||||
<div |
||||
className="w-fit w-24 text-center py-1 rounded bg-[#111] text-white text-sm cursor-pointer" |
||||
onClick={props.chooseFile} |
||||
> |
||||
انتخاب فایل |
||||
</div> |
||||
{/* <div className="text-xs mt-2 text-right">{props.fileNmae}</div> */} |
||||
{props.fileNmae && !props.loading && ( |
||||
<div |
||||
className="w-fit w-24 py-1 rounded bg-[#65A9FF] text-white text-sm mr-2 cursor-pointer" |
||||
onClick={props.uploadHandler} |
||||
> |
||||
آپلود |
||||
</div> |
||||
)} |
||||
{props.loading && ( |
||||
<img src={loadingGiff} alt="loadingGiff" className="h-10 mr-2" /> |
||||
)} |
||||
<input |
||||
className="edit-file-input w-0 h-0 hidden" |
||||
id="edit-file-input" |
||||
type={"file"} |
||||
// onChange={(e) => {
|
||||
// props.setFileName(e.target.value);
|
||||
// }}
|
||||
onChange={(e) => props.fileInputHandler(e)} |
||||
/> |
||||
</div> |
||||
{props.defaultValue && !props?.fileNmae ? ( |
||||
<img |
||||
src={baseUrl + "/file/" + props.defaultValue} |
||||
className="edit-file-img-placeholder h-10" |
||||
/> |
||||
) : null} |
||||
{props?.fileNmae && ( |
||||
<img src={props?.fileNmae} className="edit-file-img-placeholder h-10" /> |
||||
)} |
||||
</div> |
||||
), |
||||
date: ( |
||||
<div className="w-full"> |
||||
<SimpleDatePicker returnValue={props.setDateInfo} mode={props.mode} /> |
||||
</div> |
||||
), |
||||
}); |
||||
|
||||
const Filed = (props) => { |
||||
return components(props)[props.type] || <div>{props.type}</div>; |
||||
}; |
||||
const Editor = ({ data, schema, update, add, loading,lastUpload,uploadFile }) => { |
||||
const [info, setInfo] = useState(data ? { id: data?.original?.id } : {}); |
||||
const changeInputHandler = (e, key) => { |
||||
setInfo({ ...info, [key]: e.target.value }); |
||||
}; |
||||
useEffect(() => { |
||||
if (lastUpload) { |
||||
setInfo({ ...info, fileId: String(lastUpload) }); |
||||
} |
||||
}, [lastUpload]); |
||||
|
||||
const submitHandler = () => { |
||||
if (data) update(info); |
||||
else add(info); |
||||
console.log(info); |
||||
}; |
||||
|
||||
const [fileNmae, setFileName] = useState(null); |
||||
const chooseFile = () => { |
||||
document.querySelector(".edit-file-input").click(); |
||||
}; |
||||
const fileInputHandler = (e) => { |
||||
console.log(e.target.value); |
||||
if (e.target.files && e.target.files[0]) { |
||||
var reader = new FileReader(); |
||||
|
||||
reader.onload = function (event) { |
||||
setFileName(event.target.result); |
||||
}; |
||||
|
||||
reader.readAsDataURL(e.target.files[0]); |
||||
} |
||||
}; |
||||
|
||||
const uploadHandler=()=>{ |
||||
uploadFile({ |
||||
file: document.querySelector("#edit-file-input").files[0], |
||||
}); |
||||
} |
||||
|
||||
const [dateInfo,setDateInfo]=useState(null); |
||||
const datehandler=(value,mode)=>{ |
||||
setDateInfo({ ...value,mode}); |
||||
} |
||||
useEffect(() => { |
||||
console.log("::::::::::::::::::::::::::::::::::::::::::::-") |
||||
console.log(dateInfo); |
||||
if(dateInfo?.day){ |
||||
setInfo({ |
||||
...info, |
||||
[dateInfo.mode]: moment( |
||||
`${dateInfo?.year}/${dateInfo?.month}/${dateInfo?.day}` |
||||
) |
||||
.locale("en") |
||||
.format("YYYY-MM-DD"), |
||||
}); |
||||
} |
||||
}, [dateInfo]); |
||||
return ( |
||||
<div className="w-full py-3" key={data?.id || 0}> |
||||
{console.log({ data })} |
||||
<div className="w-full flex rtl flex-wrap items-center justify-between gap-y-6"> |
||||
{schema?.map((item, index) => ( |
||||
<div key={index} className="w-1/2 shrink-0 flex items-center "> |
||||
<div className="w-1/6 text-sm ml-2">{item?.description}:</div> |
||||
<Filed |
||||
type={ |
||||
item?.options |
||||
? "select" |
||||
: item.name == "fileId" |
||||
? "file" |
||||
: item?.type |
||||
} |
||||
options={item?.options} |
||||
defaultValue={data?.original[item?.name]} |
||||
onChange={(e) => changeInputHandler(e, item?.name)} |
||||
fileNmae={fileNmae} |
||||
setFileName={setFileName} |
||||
chooseFile={chooseFile} |
||||
fileInputHandler={fileInputHandler} |
||||
uploadHandler={uploadHandler} |
||||
loading={loading} |
||||
setDateInfo={datehandler} |
||||
mode={item?.name} |
||||
/> |
||||
</div> |
||||
))} |
||||
</div> |
||||
<div |
||||
className="px-6 py-4 w-fit rounded-md bg-[#3C58EB] text-[#fff] text-base cursor-pointer mx-auto mt-6" |
||||
onClick={submitHandler} |
||||
> |
||||
{data ? "ثبت تغییرات" : "ثبت ردیف"} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({ |
||||
loading: state.file.loading, |
||||
lastUpload: state.file.lastUpload, |
||||
}); |
||||
|
||||
const mapDispatchToProps = { |
||||
uploadFile : file.upload |
||||
}; |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Editor); |
||||
Loading…
Reference in new issue