diff --git a/packages/ui-react/lib/Accordion/Accordion.module.scss b/packages/ui-react/lib/Accordion/Accordion.module.scss index 2d8eeab..fb5e740 100644 --- a/packages/ui-react/lib/Accordion/Accordion.module.scss +++ b/packages/ui-react/lib/Accordion/Accordion.module.scss @@ -10,6 +10,7 @@ $animation-duration: $duration-300; } .accordionTrigger { all: unset; + font-size: 1rem; cursor: pointer; display: flex; align-items: center; @@ -39,10 +40,11 @@ $animation-duration: $duration-300; min-height: 0px; display: flex; height: fit-content; + font-size: 0.9rem; // align-items: center; // justify-content: center; .inner { - padding: 10px 20px; + padding: 12px 20px; opacity: 0; transition: all $animation-duration ease-in; &.show { diff --git a/packages/ui-react/lib/Accordion/Accordion.tsx b/packages/ui-react/lib/Accordion/Accordion.tsx index 24ebf6d..e15f055 100644 --- a/packages/ui-react/lib/Accordion/Accordion.tsx +++ b/packages/ui-react/lib/Accordion/Accordion.tsx @@ -28,7 +28,7 @@ export interface AccordionProps extends React.HtmlHTMLAttributes export const Accordion = React.forwardRef( ( - { disabled = false, accordionTrigger, accordionContent, className, width = 280, ...rest }, + { disabled = false, accordionTrigger, accordionContent, className, width = 240, ...rest }, ref, ) => { const accordionClass = classnames(styles['base']); diff --git a/packages/ui-react/lib/Calendar/Calendar.module.scss b/packages/ui-react/lib/Calendar/Calendar.module.scss index b28c3a0..f0ba504 100644 --- a/packages/ui-react/lib/Calendar/Calendar.module.scss +++ b/packages/ui-react/lib/Calendar/Calendar.module.scss @@ -1,30 +1,25 @@ @use '../variables' as *; $animation-duration: $duration-300; .base { - height: fit-content; - width: fit-content; - padding: 10px; - border-radius: $radius-10; - background-color: var(--white-color); - color: var(--black-color); - box-shadow: $shadow; - min-width: 18rem; + padding: 10px !important; + width: fit-content !important; + + @include shadow; .calendarTitle { - font-size: 18px; + font-size: 1rem; font-weight: 1000; - color: var(--shadow-color); + // color: var(--shadow-color); display: flex; flex-direction: row; justify-content: space-between; align-items: center; - padding: 8px 10px; + padding: 8px 20px 8px 10px; .buttonContainer { display: flex; gap: 3px; .button { - height: 24px; - width: 24px; position: relative; + border: none; svg { @include absolute-center; } @@ -34,11 +29,11 @@ $animation-duration: $duration-300; .calendarItems { display: grid; grid-template-columns: repeat(7, 1fr); - column-gap: 5px; - row-gap: 3px; - padding: 5px 10px; + margin: 5px 10px; box-sizing: border-box; justify-items: center; + box-sizing: border-box; + overflow: hidden; .calendarItem { display: flex; align-items: center; @@ -46,34 +41,34 @@ $animation-duration: $duration-300; width: 35px; height: 35px; cursor: pointer; + border-radius: 0px; &.otherMonth { opacity: 0.4; } &:hover:not(&.today):not(&.select) { - background-color: var(--background-blue); - color: var(--primary-color); - border-radius: $radius-5; + background-color: $violet-color; + color: $black-color; transition: all $animation-duration $cubic-bezier; + border: none; } &.today { - background-color: var(--background-blue); - color: var(--primary-color); - border-radius: $radius-5; + background-color: $violet-color; + color: $black-color; + border: 1px solid $default-color; } &.select { - background-color: var(--primary-color); - border-radius: 5px; - color: var(--white-color); + background-color: $violet-color; + color: $black-color; transition: all $animation-duration $cubic-bezier; + border: 1px solid $default-color; } } } .weekdays { display: grid; grid-template-columns: repeat(7, 1fr); - background-color: var(--title-shadow); box-sizing: border-box; - gap: 5px; + // gap: 5px; padding: 10px; border-radius: 5px; font-weight: 600; diff --git a/packages/ui-react/lib/Calendar/Calendar.stories.tsx b/packages/ui-react/lib/Calendar/Calendar.stories.tsx index e06df89..f9c8f65 100644 --- a/packages/ui-react/lib/Calendar/Calendar.stories.tsx +++ b/packages/ui-react/lib/Calendar/Calendar.stories.tsx @@ -22,7 +22,7 @@ export default meta; type Story = StoryObj; const defaultProps: CalendarProps = { - onChange: function () {}, + onChange: test, defaultSelected: undefined, }; diff --git a/packages/ui-react/lib/Calendar/Calendar.tsx b/packages/ui-react/lib/Calendar/Calendar.tsx index d493d8f..26971c4 100644 --- a/packages/ui-react/lib/Calendar/Calendar.tsx +++ b/packages/ui-react/lib/Calendar/Calendar.tsx @@ -1,15 +1,15 @@ import classNames from 'classnames'; -import React, { useEffect, useState } from 'react'; +import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'; import styles from './Calendar.module.scss'; import DayItem from './DayItem'; -import { Button } from '..'; +import { Button, Card } from '..'; import { ChevronsLeft, ChevronsRight } from 'lucide-react'; -export interface CalendarProps extends React.HtmlHTMLAttributes { +export interface CalendarProps extends Omit, 'onChange'> { /** * the onChange of the calendar */ - onchange?: (value: Date) => void; + onChange?: (value: Date) => void; /** * the selected of the date */ @@ -18,32 +18,38 @@ export interface CalendarProps extends React.HtmlHTMLAttributes * defaultselected of the calendar */ defaultSelected?: Date; + /** + * shadow of the calendar + */ + shadow?: 'regular' | 'small' | 'medium' | 'large' | 'extraLarge' | 'inner' | 'none'; } export const Calendar = React.forwardRef( - ({ onchange, selected = undefined, defaultSelected = undefined, ...rest }, ref) => { + ({ onChange, selected, defaultSelected, shadow = 'none', ...rest }, ref) => { // Initialize the state to store the selected date const [selectDate, setSelectDate] = useState(defaultSelected); - const [currentDate] = useState(new Date()); - const [numberOfDaysFromPrevMonth, setNumberOfDaysFromPrevMonth] = useState(0); - const [numberOfDaysInLastMonth, setNumberOfDaysInLastMonth] = useState(0); - const [numberOfDaysInMonth, setNumberOfDaysInMonth] = useState(0); - const [numberOfDaysFromAfterMonth, setNumberOfDaysFromAfterMonth] = useState(0); const [selectMonth, setSelectMonth] = useState(new Date().getMonth()); - // Function to generate the calendar grid - useEffect(() => { - const numberOfDaysInMonth = new Date(currentDate.getFullYear(), selectMonth + 1, 0).getDate(); - setNumberOfDaysInMonth(numberOfDaysInMonth); + const currentDate = useMemo(() => new Date(), []); - const numberOfDaysInLastMonth = new Date(currentDate.getFullYear(), selectMonth, 0).getDate(); - setNumberOfDaysInLastMonth(numberOfDaysInLastMonth); + const numberOfDaysInMonth = useMemo( + () => new Date(currentDate.getFullYear(), selectMonth + 1, 0).getDate(), + [selectMonth], + ); - const firstDayOfMonth = new Date(currentDate.getFullYear(), selectMonth, 1).getDay(); + const numberOfDaysInLastMonth = useMemo( + () => new Date(currentDate.getFullYear(), selectMonth, 0).getDate(), + [selectMonth], + ); + const numberOfDaysFromPrevMonth = useMemo(() => { + const firstDayOfMonth = new Date(currentDate.getFullYear(), selectMonth, 1).getDay(); const numberOfDaysFromPrevMonth = (firstDayOfMonth + 6) % 7; - setNumberOfDaysFromPrevMonth(numberOfDaysFromPrevMonth); + return numberOfDaysFromPrevMonth; + }, [selectMonth, currentDate]); + + const numberOfDaysFromAfterMonth = useMemo(() => { const lastDayOfMonth = new Date( currentDate.getFullYear(), selectMonth, @@ -51,14 +57,17 @@ export const Calendar = React.forwardRef( ).getDay(); const numberOfDaysFromAfterMonth = Math.abs(lastDayOfMonth - 7) % 7; - setNumberOfDaysFromAfterMonth(numberOfDaysFromAfterMonth); - }, [currentDate, selectMonth]); + + return numberOfDaysFromAfterMonth; + }, [selectMonth, numberOfDaysInMonth, numberOfDaysInMonth]); + + // Function to generate the calendar grid useEffect(() => { selected && setSelectDate(selected); }, [selected]); - const weekdays = () => { + const Weekdays = memo(() => { const weekdays = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU']; const weekdaysFlex = []; @@ -79,92 +88,102 @@ export const Calendar = React.forwardRef( , ); return weekdaysFlex; - }; - const calendarClass = classNames(`${styles['base']}`); + }); + + const calendarClass = classNames(`${styles['base']} ${styles[`shadow-${shadow}`]}`); - const changeMonth = (isBack: boolean) => { - isBack && setSelectMonth(selectMonth - 1); - !isBack && setSelectMonth(selectMonth + 1); - }; + const changeMonth = useCallback( + (isBack: boolean) => { + isBack && setSelectMonth(selectMonth - 1); + !isBack && setSelectMonth(selectMonth + 1); + }, + [selectMonth], + ); useEffect(() => { - selectDate && onchange && onchange(selectDate); - }, [selectDate, onchange]); + selectDate && onChange && onChange(selectDate); + }, [selectDate, onChange]); return ( -
+
+
+ + +
+ + {(([, month, , year]) => `${month}, ${year}`)( + new Date(currentDate.getFullYear(), selectMonth + 1, 0).toDateString().split(' '), + )} + +
+ +
+ {[...Array(numberOfDaysFromPrevMonth)].map((_, index) => ( + + ))} + + {[...Array(numberOfDaysInMonth)].map((_, index) => ( + + ))} + + {[...Array(numberOfDaysFromAfterMonth)].map((_, index) => ( + + ))} +
+ + } + className={calendarClass} {...rest} - > -
-
- - -
- - {(([, month, , year]) => `${month}, ${year}`)( - new Date(currentDate.getFullYear(), selectMonth + 1, 0).toDateString().split(' '), - )} - -
- {weekdays()} -
- {[...Array(numberOfDaysFromPrevMonth)].map((_, index) => ( - - ))} - - {[...Array(numberOfDaysInMonth)].map((_, index) => ( - - ))} - - {[...Array(numberOfDaysFromAfterMonth)].map((_, index) => ( - - ))} -
-
+ /> ); }, ); diff --git a/packages/ui-react/lib/Calendar/DayItem.tsx b/packages/ui-react/lib/Calendar/DayItem.tsx index 7f3c49a..ef8a590 100644 --- a/packages/ui-react/lib/Calendar/DayItem.tsx +++ b/packages/ui-react/lib/Calendar/DayItem.tsx @@ -1,5 +1,6 @@ -import { memo } from 'react'; +import { memo, useMemo } from 'react'; import styles from './Calendar.module.scss'; +import { Button } from '..'; interface DayItemProps { index: number; @@ -18,20 +19,6 @@ const DayItem = memo(function otherMonthItem({ onChange, selectMonth, }: DayItemProps) { - let month; - - switch (isOtherMonth) { - case 'pre': - month = selectMonth - 1; - break; - case 'after': - month = selectMonth + 1; - break; - default: - month = selectMonth; - break; - } - function isSameDay(date1?: Date, date2?: Date) { return ( date1?.getFullYear() === date2?.getFullYear() && @@ -40,23 +27,41 @@ const DayItem = memo(function otherMonthItem({ ); } - const thisDate = new Date(currentDate.getFullYear(), month, index); + const thisDate = useMemo(() => { + let month: number = selectMonth; + + switch (isOtherMonth) { + case 'pre': + month = selectMonth - 1; + break; + case 'after': + month = selectMonth + 1; + break; + default: + month = selectMonth; + break; + } + + return new Date(currentDate.getFullYear(), month, index); + }, [currentDate, index, isOtherMonth, selectMonth]); const handleClick = () => { thisDate && onChange(thisDate); }; return ( -
{index} -
+ ); }); diff --git a/packages/ui-react/lib/DatePicker/DatePicker.module.scss b/packages/ui-react/lib/DatePicker/DatePicker.module.scss index 835febb..17fdb1a 100644 --- a/packages/ui-react/lib/DatePicker/DatePicker.module.scss +++ b/packages/ui-react/lib/DatePicker/DatePicker.module.scss @@ -11,25 +11,17 @@ $border: $border-1; display: flex; align-items: center; gap: 10px; - color: var(--shadow-color) !important; + color: $default-color !important; transition: all $animation-duration $cubic-bezier; padding: 10px 15px !important; width: 250px; height: 42px; - border-radius: $radius-10; - border: $border solid var(--shadow-color) !important; + border-radius: 3px; + border: $border solid $default-color !important; font-size: $font-size-14 !important; padding: 11px !important; .select-date { - color: var(--black-color) !important; - } - &.is-select-date { - border: $border solid var(--primary-color) !important; - color: var(--primary-color) !important; - } - &:hover { - color: var(--primary-color) !important; - border: $border solid var(--primary-color) !important; + color: $default-color !important; } } .calendar-container { diff --git a/packages/ui-react/lib/DatePicker/DatePicker.stories.tsx b/packages/ui-react/lib/DatePicker/DatePicker.stories.tsx index e5b39c8..571a18a 100644 --- a/packages/ui-react/lib/DatePicker/DatePicker.stories.tsx +++ b/packages/ui-react/lib/DatePicker/DatePicker.stories.tsx @@ -32,7 +32,7 @@ export default meta; type Story = StoryObj; const defaultProps: DatePickerProps = { - onchange: test, + onChange: test, }; export const DefaultDatePicker: Story = { diff --git a/packages/ui-react/lib/DatePicker/DatePicker.tsx b/packages/ui-react/lib/DatePicker/DatePicker.tsx index 383054a..5dc8abc 100644 --- a/packages/ui-react/lib/DatePicker/DatePicker.tsx +++ b/packages/ui-react/lib/DatePicker/DatePicker.tsx @@ -1,13 +1,14 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { Button, Calendar } from '..'; import styles from './DatePicker.module.scss'; import { CalendarDays } from 'lucide-react'; -export interface DatePickerProps extends React.HtmlHTMLAttributes { +export interface DatePickerProps + extends Omit, 'onChange'> { /** * onchange, the onchange of the datepicker */ - onchange?: (value: Date) => void; + onChange?: (value: Date) => void; /** * defaultPickDate, the defaultPickDate of the datepicker */ @@ -19,7 +20,7 @@ export interface DatePickerProps extends React.HtmlHTMLAttributes( - ({ onchange, defaultPickDate, pickDate, ...rest }, ref) => { + ({ onChange, defaultPickDate, pickDate, ...rest }, ref) => { const [calendarVisible, setCalendarVisible] = useState(false); const [selectDate, setSelectDate] = useState(defaultPickDate); const [selectDateString, setSelectDateString] = useState( @@ -28,18 +29,17 @@ export const DatePicker = React.forwardRef( const [calendarIn, setCalendarIn] = useState(false); const [calendarHide, setCalendarHide] = useState(false); - useEffect(() => { - if (pickDate) { - setSelectDate(pickDate); - setSelectDateString(pickDate.toString()); - } - }, [pickDate]); + const pickDateString = useMemo(() => pickDate?.toString(), [pickDate]); - useEffect(() => { - selectDate && onchange && onchange(selectDate); - }, [selectDate, onchange]); + // useEffect(() => { + // if (pickDate) { + // setSelectDate(pickDate); + // setSelectDateString(pickDate.toString()); + // } + // }, [pickDate]); const handleDate = (value: Date) => { + onChange && onChange(value); setSelectDate(value); if (value.toString() !== new Date().toString()) { setSelectDateString(value.toString()); @@ -74,8 +74,6 @@ export const DatePicker = React.forwardRef( }, 200); }; - // console.log('selectDateString', selectDateString); - return ( <>
( color="border" className={`${styles['date-picker-button']} ${styles[calendarVisible ? 'is-select-date' : '']} - ${styles[selectDateString ? 'have-select-date' : '']}`} + ${styles[(pickDateString ?? selectDateString) ? 'have-select-date' : '']}`} onClick={handleCalendarVisible} + shadow="none" > - {!selectDateString ? ( + {!(pickDateString ?? selectDateString) ? ( Pick a date ) : ( - {selectDate?.toDateString()} + + {(pickDate ?? selectDate)?.toDateString()} + )} {calendarVisible && ( @@ -106,12 +107,12 @@ export const DatePicker = React.forwardRef( `} > { e.stopPropagation(); }} - > + />
)} diff --git a/packages/ui-react/lib/Sheet/Sheet.mdx b/packages/ui-react/lib/Sheet/Sheet.mdx index ff3f20f..119b8a7 100644 --- a/packages/ui-react/lib/Sheet/Sheet.mdx +++ b/packages/ui-react/lib/Sheet/Sheet.mdx @@ -13,10 +13,11 @@ export const ShowSheet = () => { const [visible, setVisible] = useState(false); return ( <> - + setVisible(false)} + sheetTitle='这是一个基本的sheet 🪗' /> ); diff --git a/packages/ui-react/lib/Sheet/Sheet.module.scss b/packages/ui-react/lib/Sheet/Sheet.module.scss index 2ec76fa..a60c437 100644 --- a/packages/ui-react/lib/Sheet/Sheet.module.scss +++ b/packages/ui-react/lib/Sheet/Sheet.module.scss @@ -107,12 +107,15 @@ $padding-left-right-distance: 20px; display: flex; align-items: center; justify-content: center; + border: none; + padding: 0px !important; + color: $default-color; svg { transition: all $animation-duration $cubic-bezier; } &:hover { svg { - fill: var(--black-color); + fill: $black-color; } } } diff --git a/packages/ui-react/lib/Sheet/Sheet.stories.tsx b/packages/ui-react/lib/Sheet/Sheet.stories.tsx index c516e5f..59ec21e 100644 --- a/packages/ui-react/lib/Sheet/Sheet.stories.tsx +++ b/packages/ui-react/lib/Sheet/Sheet.stories.tsx @@ -19,6 +19,7 @@ type Story = StoryObj; const defaultProps: SheetProps = { visible: false, + sheetTitle: '这是一个基本的sheet 🪗', }; export const DefaultSheet: Story = { diff --git a/packages/ui-react/lib/Sheet/Sheet.tsx b/packages/ui-react/lib/Sheet/Sheet.tsx index 46e3344..8df233e 100644 --- a/packages/ui-react/lib/Sheet/Sheet.tsx +++ b/packages/ui-react/lib/Sheet/Sheet.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, type CSSProperties } from 'react'; +import React, { useEffect, useLayoutEffect, useState, type CSSProperties } from 'react'; import styles from './Sheet.module.scss'; // import SheetTrigger from './SheetTrigger'; import { SheetHeader } from './SheetHeader'; @@ -81,7 +81,7 @@ export const Sheet = React.forwardRef( const [sheetHide, setSheetHide] = useState(false); const [open, close] = useWrapperVisibleStore((state) => [state.open, state.close]); - useEffect(() => { + useLayoutEffect(() => { visible ? openSheet() : closeSheet(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [visible]); @@ -127,7 +127,7 @@ export const Sheet = React.forwardRef( + />
{mainContent}
{isFooter && {sheetFooter}} diff --git a/packages/ui-react/lib/Sheet/SheetHeader.tsx b/packages/ui-react/lib/Sheet/SheetHeader.tsx index fb24b47..6e3e9f9 100644 --- a/packages/ui-react/lib/Sheet/SheetHeader.tsx +++ b/packages/ui-react/lib/Sheet/SheetHeader.tsx @@ -16,11 +16,6 @@ export interface SheetHeaderProps { export const SheetHeader = React.forwardRef( ({ content, onCancel, ...rest }, ref) => { - const [headerContent, setHeaderContent] = useState('Basic Sheet'); - - useEffect(() => { - content && setHeaderContent(content); - }, [content]); return ( <>
( className={styles['sheet-header']} >
- {headerContent} + {content}