diff --git a/.gitignore b/.gitignore index 7b24e9f..11407d1 100644 --- a/.gitignore +++ b/.gitignore @@ -120,3 +120,4 @@ out .yarn/install-state.gz .pnp.* react-mui-scheduler-* +yarn.lock \ No newline at end of file diff --git a/dist/index.esm.js b/dist/index.esm.js index a8a529b..a615bfe 100644 --- a/dist/index.esm.js +++ b/dist/index.esm.js @@ -23,6 +23,7 @@ import AutorenewIcon from '@mui/icons-material/Autorenew'; import LocalPrintshopIcon from '@mui/icons-material/LocalPrintshop'; import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'; import GridViewIcon from '@mui/icons-material/GridView'; +import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray'; import EventNoteRoundedIcon from '@mui/icons-material/EventNoteRounded'; import { styled as styled$1 } from '@mui/system'; import Timeline from '@mui/lab/Timeline'; @@ -225,17 +226,17 @@ var trJA = { }; var day = "天"; -var week = "星期"; +var week = "周"; var month = "月"; -var timeline = "年表"; +var timeline = "时间线"; var mon = "星期一"; -var tue = "三月"; -var wed = "海"; -var thu = "游戏"; -var fri = "周五"; +var tue = "星期二"; +var wed = "星期三"; +var thu = "星期四"; +var fri = "星期五"; var sat = "星期六"; -var sun = "太阳"; -var search = "寻找..."; +var sun = "星期天"; +var search = "搜索..."; var trZH = { day: day, week: week, @@ -323,6 +324,8 @@ var StyledAutoComplete = styled(Autocomplete)(function (_ref) { }); function ToolbarSearchbar(props) { + var _ref3; + var events = props.events, _onInputChange = props.onInputChange; @@ -355,7 +358,7 @@ function ToolbarSearchbar(props) { display: 'inline-flex' }, onChange: handleOnChange, - options: events === null || events === void 0 ? void 0 : events.sort(function (a, b) { + options: (_ref3 = _toConsumableArray(events)) === null || _ref3 === void 0 ? void 0 : _ref3.sort(function (a, b) { return -b.groupLabel.localeCompare(a.groupLabel); }), groupBy: function groupBy(option) { @@ -749,7 +752,7 @@ function SchedulerToolbar(props) { })), /*#__PURE__*/React.createElement(Typography, { variant: "body2" }, "Settings"))), /*#__PURE__*/React.createElement(Collapse, { - in: alertProps === null || alertProps === void 0 ? void 0 : alertProps.open + "in": alertProps === null || alertProps === void 0 ? void 0 : alertProps.open }, /*#__PURE__*/React.createElement(Alert, { color: alertProps === null || alertProps === void 0 ? void 0 : alertProps.color, severity: alertProps === null || alertProps === void 0 ? void 0 : alertProps.severity, @@ -1842,7 +1845,7 @@ var StyledContainer = styled(Typography)(function (_ref) { }); function TimeLineModeView(props) { - var _fileredEvents2; + var _ref3, _fileredEvents2; var options = props.options, rows = props.rows, @@ -1863,7 +1866,7 @@ function TimeLineModeView(props) { onTaskClick && onTaskClick(event, task); }; - var fileredEvents = rows === null || rows === void 0 ? void 0 : rows.sort(function (a, b) { + var fileredEvents = (_ref3 = _toConsumableArray(rows)) === null || _ref3 === void 0 ? void 0 : _ref3.sort(function (a, b) { var _b$startHour; return -(b === null || b === void 0 ? void 0 : (_b$startHour = b.startHour) === null || _b$startHour === void 0 ? void 0 : _b$startHour.localeCompare(a === null || a === void 0 ? void 0 : a.startHour)); @@ -2543,7 +2546,7 @@ function Scheduler(props) { alignItems: "center", justifyContent: "start" }, isMonthMode && /*#__PURE__*/React.createElement(TransitionMode, { - in: true + "in": true }, /*#__PURE__*/React.createElement(Grid, { item: true, xs: 12 @@ -2560,7 +2563,7 @@ function Scheduler(props) { onDateChange: handleDateChange, onEventsChange: handleEventsChange }))), isWeekMode && /*#__PURE__*/React.createElement(TransitionMode, { - in: true + "in": true }, /*#__PURE__*/React.createElement(Grid, { item: true, xs: 12 @@ -2577,7 +2580,7 @@ function Scheduler(props) { onDateChange: handleDateChange, onEventsChange: handleEventsChange }))), isDayMode && /*#__PURE__*/React.createElement(TransitionMode, { - in: true + "in": true }, /*#__PURE__*/React.createElement(Grid, { item: true, xs: 12 @@ -2594,7 +2597,7 @@ function Scheduler(props) { onDateChange: handleDateChange, onEventsChange: handleEventsChange })))), isTimelineMode && /*#__PURE__*/React.createElement(TransitionMode, { - in: true + "in": true }, /*#__PURE__*/React.createElement(Grid, { container: true, spacing: 2, diff --git a/dist/index.umd.js b/dist/index.umd.js index 6c4b718..5161e2a 100644 --- a/dist/index.umd.js +++ b/dist/index.umd.js @@ -1,8 +1,8 @@ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/regenerator'), require('react'), require('prop-types'), require('i18next'), require('react-i18next'), require('@mui/material/styles'), require('@mui/material'), require('date-fns'), require('@babel/runtime/helpers/extends'), require('@mui/lab/AdapterDateFns'), require('@mui/lab/LocalizationProvider'), require('@mui/lab/StaticDatePicker'), require('@mui/icons-material/Close'), require('@mui/icons-material/ChevronLeft'), require('@mui/icons-material/ChevronRight'), require('@mui/icons-material/Today'), require('@mui/icons-material/Settings'), require('@mui/icons-material/Archive'), require('@mui/icons-material/Autorenew'), require('@mui/icons-material/LocalPrintshop'), require('@mui/icons-material/PlayCircleOutline'), require('@mui/icons-material/GridView'), require('@mui/icons-material/EventNoteRounded'), require('@mui/system'), require('@mui/lab/Timeline'), require('@mui/lab/TimelineItem'), require('@mui/lab/TimelineSeparator'), require('@mui/lab/TimelineConnector'), require('@mui/lab/TimelineContent'), require('@mui/lab/TimelineOppositeContent'), require('@mui/lab/TimelineDot'), require('@mui/icons-material/Schedule'), require('date-fns/locale')) : - typeof define === 'function' && define.amd ? define(['@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/regenerator', 'react', 'prop-types', 'i18next', 'react-i18next', '@mui/material/styles', '@mui/material', 'date-fns', '@babel/runtime/helpers/extends', '@mui/lab/AdapterDateFns', '@mui/lab/LocalizationProvider', '@mui/lab/StaticDatePicker', '@mui/icons-material/Close', '@mui/icons-material/ChevronLeft', '@mui/icons-material/ChevronRight', '@mui/icons-material/Today', '@mui/icons-material/Settings', '@mui/icons-material/Archive', '@mui/icons-material/Autorenew', '@mui/icons-material/LocalPrintshop', '@mui/icons-material/PlayCircleOutline', '@mui/icons-material/GridView', '@mui/icons-material/EventNoteRounded', '@mui/system', '@mui/lab/Timeline', '@mui/lab/TimelineItem', '@mui/lab/TimelineSeparator', '@mui/lab/TimelineConnector', '@mui/lab/TimelineContent', '@mui/lab/TimelineOppositeContent', '@mui/lab/TimelineDot', '@mui/icons-material/Schedule', 'date-fns/locale'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["react-material-scheduler"] = factory(global._defineProperty, global._asyncToGenerator, global._slicedToArray, global._regeneratorRuntime, global.React, global.PropTypes, global.i18n, global.reactI18next, global.styles, global.material, global.dateFns, global._extends, global.AdapterDateFns, global.LocalizationProvider, global.StaticDatePicker, global.CloseIcon, global.ChevronLeftIcon, global.ChevronRightIcon, global.TodayIcon, global.SettingsIcon, global.ArchiveIcon, global.AutorenewIcon, global.LocalPrintshopIcon, global.PlayCircleOutlineIcon, global.GridViewIcon, global.EventNoteRoundedIcon, global.system, global.Timeline, global.TimelineItem, global.TimelineSeparator, global.TimelineConnector, global.TimelineContent, global.TimelineOppositeContent, global.TimelineDot, global.ScheduleIcon, global.locale)); -})(this, (function (_defineProperty, _asyncToGenerator, _slicedToArray, _regeneratorRuntime, React, PropTypes, i18n, reactI18next, styles, material, dateFns, _extends, AdapterDateFns, LocalizationProvider, StaticDatePicker, CloseIcon, ChevronLeftIcon, ChevronRightIcon, TodayIcon, SettingsIcon, ArchiveIcon, AutorenewIcon, LocalPrintshopIcon, PlayCircleOutlineIcon, GridViewIcon, EventNoteRoundedIcon, system, Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineOppositeContent, TimelineDot, ScheduleIcon, locale) { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/regenerator'), require('react'), require('prop-types'), require('i18next'), require('react-i18next'), require('@mui/material/styles'), require('@mui/material'), require('date-fns'), require('@babel/runtime/helpers/extends'), require('@mui/lab/AdapterDateFns'), require('@mui/lab/LocalizationProvider'), require('@mui/lab/StaticDatePicker'), require('@mui/icons-material/Close'), require('@mui/icons-material/ChevronLeft'), require('@mui/icons-material/ChevronRight'), require('@mui/icons-material/Today'), require('@mui/icons-material/Settings'), require('@mui/icons-material/Archive'), require('@mui/icons-material/Autorenew'), require('@mui/icons-material/LocalPrintshop'), require('@mui/icons-material/PlayCircleOutline'), require('@mui/icons-material/GridView'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/EventNoteRounded'), require('@mui/system'), require('@mui/lab/Timeline'), require('@mui/lab/TimelineItem'), require('@mui/lab/TimelineSeparator'), require('@mui/lab/TimelineConnector'), require('@mui/lab/TimelineContent'), require('@mui/lab/TimelineOppositeContent'), require('@mui/lab/TimelineDot'), require('@mui/icons-material/Schedule'), require('date-fns/locale')) : + typeof define === 'function' && define.amd ? define(['@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/regenerator', 'react', 'prop-types', 'i18next', 'react-i18next', '@mui/material/styles', '@mui/material', 'date-fns', '@babel/runtime/helpers/extends', '@mui/lab/AdapterDateFns', '@mui/lab/LocalizationProvider', '@mui/lab/StaticDatePicker', '@mui/icons-material/Close', '@mui/icons-material/ChevronLeft', '@mui/icons-material/ChevronRight', '@mui/icons-material/Today', '@mui/icons-material/Settings', '@mui/icons-material/Archive', '@mui/icons-material/Autorenew', '@mui/icons-material/LocalPrintshop', '@mui/icons-material/PlayCircleOutline', '@mui/icons-material/GridView', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/EventNoteRounded', '@mui/system', '@mui/lab/Timeline', '@mui/lab/TimelineItem', '@mui/lab/TimelineSeparator', '@mui/lab/TimelineConnector', '@mui/lab/TimelineContent', '@mui/lab/TimelineOppositeContent', '@mui/lab/TimelineDot', '@mui/icons-material/Schedule', 'date-fns/locale'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["react-material-scheduler"] = factory(global._defineProperty, global._asyncToGenerator, global._slicedToArray, global._regeneratorRuntime, global.React, global.PropTypes, global.i18n, global.reactI18next, global.styles, global.material, global.dateFns, global._extends, global.AdapterDateFns, global.LocalizationProvider, global.StaticDatePicker, global.CloseIcon, global.ChevronLeftIcon, global.ChevronRightIcon, global.TodayIcon, global.SettingsIcon, global.ArchiveIcon, global.AutorenewIcon, global.LocalPrintshopIcon, global.PlayCircleOutlineIcon, global.GridViewIcon, global._toConsumableArray, global.EventNoteRoundedIcon, global.system, global.Timeline, global.TimelineItem, global.TimelineSeparator, global.TimelineConnector, global.TimelineContent, global.TimelineOppositeContent, global.TimelineDot, global.ScheduleIcon, global.locale)); +})(this, (function (_defineProperty, _asyncToGenerator, _slicedToArray, _regeneratorRuntime, React, PropTypes, i18n, reactI18next, styles, material, dateFns, _extends, AdapterDateFns, LocalizationProvider, StaticDatePicker, CloseIcon, ChevronLeftIcon, ChevronRightIcon, TodayIcon, SettingsIcon, ArchiveIcon, AutorenewIcon, LocalPrintshopIcon, PlayCircleOutlineIcon, GridViewIcon, _toConsumableArray, EventNoteRoundedIcon, system, Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineOppositeContent, TimelineDot, ScheduleIcon, locale) { 'use strict'; function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } @@ -27,6 +27,7 @@ var LocalPrintshopIcon__default = /*#__PURE__*/_interopDefaultLegacy(LocalPrintshopIcon); var PlayCircleOutlineIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayCircleOutlineIcon); var GridViewIcon__default = /*#__PURE__*/_interopDefaultLegacy(GridViewIcon); + var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray); var EventNoteRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(EventNoteRoundedIcon); var Timeline__default = /*#__PURE__*/_interopDefaultLegacy(Timeline); var TimelineItem__default = /*#__PURE__*/_interopDefaultLegacy(TimelineItem); @@ -227,17 +228,17 @@ }; var day = "天"; - var week = "星期"; + var week = "周"; var month = "月"; - var timeline = "年表"; + var timeline = "时间线"; var mon = "星期一"; - var tue = "三月"; - var wed = "海"; - var thu = "游戏"; - var fri = "周五"; + var tue = "星期二"; + var wed = "星期三"; + var thu = "星期四"; + var fri = "星期五"; var sat = "星期六"; - var sun = "太阳"; - var search = "寻找..."; + var sun = "星期天"; + var search = "搜索..."; var trZH = { day: day, week: week, @@ -325,6 +326,8 @@ }); function ToolbarSearchbar(props) { + var _ref3; + var events = props.events, _onInputChange = props.onInputChange; @@ -357,7 +360,7 @@ display: 'inline-flex' }, onChange: handleOnChange, - options: events === null || events === void 0 ? void 0 : events.sort(function (a, b) { + options: (_ref3 = _toConsumableArray__default["default"](events)) === null || _ref3 === void 0 ? void 0 : _ref3.sort(function (a, b) { return -b.groupLabel.localeCompare(a.groupLabel); }), groupBy: function groupBy(option) { @@ -751,7 +754,7 @@ })), /*#__PURE__*/React__default["default"].createElement(material.Typography, { variant: "body2" }, "Settings"))), /*#__PURE__*/React__default["default"].createElement(material.Collapse, { - in: alertProps === null || alertProps === void 0 ? void 0 : alertProps.open + "in": alertProps === null || alertProps === void 0 ? void 0 : alertProps.open }, /*#__PURE__*/React__default["default"].createElement(material.Alert, { color: alertProps === null || alertProps === void 0 ? void 0 : alertProps.color, severity: alertProps === null || alertProps === void 0 ? void 0 : alertProps.severity, @@ -1844,7 +1847,7 @@ }); function TimeLineModeView(props) { - var _fileredEvents2; + var _ref3, _fileredEvents2; var options = props.options, rows = props.rows, @@ -1865,7 +1868,7 @@ onTaskClick && onTaskClick(event, task); }; - var fileredEvents = rows === null || rows === void 0 ? void 0 : rows.sort(function (a, b) { + var fileredEvents = (_ref3 = _toConsumableArray__default["default"](rows)) === null || _ref3 === void 0 ? void 0 : _ref3.sort(function (a, b) { var _b$startHour; return -(b === null || b === void 0 ? void 0 : (_b$startHour = b.startHour) === null || _b$startHour === void 0 ? void 0 : _b$startHour.localeCompare(a === null || a === void 0 ? void 0 : a.startHour)); @@ -2545,7 +2548,7 @@ alignItems: "center", justifyContent: "start" }, isMonthMode && /*#__PURE__*/React__default["default"].createElement(TransitionMode, { - in: true + "in": true }, /*#__PURE__*/React__default["default"].createElement(material.Grid, { item: true, xs: 12 @@ -2562,7 +2565,7 @@ onDateChange: handleDateChange, onEventsChange: handleEventsChange }))), isWeekMode && /*#__PURE__*/React__default["default"].createElement(TransitionMode, { - in: true + "in": true }, /*#__PURE__*/React__default["default"].createElement(material.Grid, { item: true, xs: 12 @@ -2579,7 +2582,7 @@ onDateChange: handleDateChange, onEventsChange: handleEventsChange }))), isDayMode && /*#__PURE__*/React__default["default"].createElement(TransitionMode, { - in: true + "in": true }, /*#__PURE__*/React__default["default"].createElement(material.Grid, { item: true, xs: 12 @@ -2596,7 +2599,7 @@ onDateChange: handleDateChange, onEventsChange: handleEventsChange })))), isTimelineMode && /*#__PURE__*/React__default["default"].createElement(TransitionMode, { - in: true + "in": true }, /*#__PURE__*/React__default["default"].createElement(material.Grid, { container: true, spacing: 2, diff --git a/locales/zh/common.json b/locales/zh/common.json index e41d3f1..5185387 100644 --- a/locales/zh/common.json +++ b/locales/zh/common.json @@ -1,14 +1,14 @@ { "day": "天", - "week": "星期", + "week": "周", "month": "月", - "timeline": "年表", + "timeline": "时间线", "mon": "星期一", - "tue": "三月", - "wed": "海", - "thu": "游戏", - "fri": "周五", + "tue": "星期二", + "wed": "星期三", + "thu": "星期四", + "fri": "星期五", "sat": "星期六", - "sun": "太阳", - "search": "寻找..." + "sun": "星期天", + "search": "搜索..." } \ No newline at end of file diff --git a/src/TimeLineModeView.jsx b/src/TimeLineModeView.jsx index ae48ecc..7d46634 100644 --- a/src/TimeLineModeView.jsx +++ b/src/TimeLineModeView.jsx @@ -1,7 +1,7 @@ -import React, {useContext} from 'react' +import React, { useContext } from 'react' import PropTypes from 'prop-types' import { styled } from '@mui/material/styles' -import {Typography} from "@mui/material" +import { Typography } from "@mui/material" import Timeline from '@mui/lab/Timeline' import TimelineItem from '@mui/lab/TimelineItem' import TimelineSeparator from '@mui/lab/TimelineSeparator' @@ -32,10 +32,10 @@ const StyledContainer = styled(Typography)(({ theme }) => ({ } })) -function TimeLineModeView (props) { - const {options, rows, searchResult, onTaskClick} = props +function TimeLineModeView(props) { + const { options, rows, searchResult, onTaskClick } = props const dateFnsLocale = useContext(DateFnsLocaleContext) - + /** * @name handleTaskClick * @description @@ -48,14 +48,14 @@ function TimeLineModeView (props) { event.stopPropagation() onTaskClick && onTaskClick(event, task) } - - let fileredEvents = rows?.sort((a, b) => -b?.startHour?.localeCompare(a?.startHour)) + + let fileredEvents = [...rows]?.sort((a, b) => -b?.startHour?.localeCompare(a?.startHour)) if (searchResult) { fileredEvents = fileredEvents?.filter( event => event?.groupLabel === searchResult?.groupLabel ) } - + return ( handleTaskClick(event, task)} > {task?.date && - format( - parse( - task?.date, - 'yyyy-MM-dd', - new Date() - ), - 'PPP', - { locale: dateFnsLocale } - )} + format( + parse( + task?.date, + 'yyyy-MM-dd', + new Date() + ), + 'PPP', + { locale: dateFnsLocale } + )}
{task?.startHour} - {task?.endHour} @@ -96,7 +96,7 @@ function TimeLineModeView (props) { - + {task?.icon || } diff --git a/src/ToolbarSeachBar.jsx b/src/ToolbarSeachBar.jsx index b9f0607..7ab10fe 100644 --- a/src/ToolbarSeachBar.jsx +++ b/src/ToolbarSeachBar.jsx @@ -1,4 +1,4 @@ -import React, {useContext, useState} from 'react' +import React, { useContext, useState } from 'react' import PropTypes from 'prop-types' import { format, parse } from 'date-fns' import { useTranslation } from 'react-i18next' @@ -23,18 +23,18 @@ const StyledAutoComplete = styled(Autocomplete)(({ theme }) => ({ }, })) -function ToolbarSearchbar (props) { - const {events, onInputChange} = props +function ToolbarSearchbar(props) { + const { events, onInputChange } = props const { t } = useTranslation(['common']) const [value, setValue] = useState('') const dateFnsLocale = useContext(DateFnsLocaleContext) const [inputValue, setInputValue] = useState('') - + const handleOnChange = (event, newValue) => { setValue(newValue) if (onInputChange) onInputChange(newValue) } - + return ( -b.groupLabel.localeCompare(a.groupLabel))} + options={[...events]?.sort((a, b) => -b.groupLabel.localeCompare(a.groupLabel))} groupBy={(option) => option ? option?.groupLabel : null} /* ( @@ -63,7 +63,7 @@ function ToolbarSearchbar (props) { */ getOptionLabel={(option) => ( option ? - `${option.groupLabel || ''} | (${option.startHour || ''} - ${option.endHour || ''})` : '' + `${option.groupLabel || ''} | (${option.startHour || ''} - ${option.endHour || ''})` : '' )} isOptionEqualToValue={(option, value) => option.id === value.id} onInputChange={(event, newInputValue) => { @@ -71,7 +71,7 @@ function ToolbarSearchbar (props) { onInputChange(newInputValue) }} renderOption={(props, option) => ( - + {format( parse(option?.date, 'yyyy-MM-dd', new Date()), 'dd-MMMM-yyyy' @@ -84,7 +84,7 @@ function ToolbarSearchbar (props) { {...params} size="small" label={t('search')} - InputProps={{...params.InputProps}} + InputProps={{ ...params.InputProps }} /> )} />