@canlooks/can-ui 0.0.177 → 0.0.178

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/calendar/calendar.js +5 -5
  2. package/dist/cjs/components/dateTimePicker/dateTimePicker.js +2 -7
  3. package/dist/esm/components/calendar/calendar.js +6 -6
  4. package/dist/esm/components/dateTimePicker/dateTimePicker.js +3 -8
  5. package/package.json +1 -1
package/dist/cjs/components/calendar/calendar.js CHANGED
@@ -6,19 +6,18 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
6
6
  const dayjs_1 = tslib_1.__importDefault(require("dayjs"));
7
7
  const utils_1 = require("../../utils");
8
8
  const panelDates_1 = require("./panelDates");
9
- const react_1 = require("react");
10
9
  const calendar_style_1 = require("./calendar.style");
11
10
  const flex_1 = require("../flex");
12
11
  const panelYear_1 = require("./panelYear");
13
12
  const panelMonth_1 = require("./panelMonth");
14
13
  const Calendar = ({ viewLevel = 'date', showToday = true, dateButtonProps, todayButtonText = '回今天', todayButtonProps, size = 'medium', defaultValue = null, min, max, disabledDates, value, onChange, _defaultNull, ...props }) => {
15
14
  const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
16
- const [viewType, setViewType] = (0, react_1.useState)(viewLevel);
17
- const [innerD, setInnerD] = (0, react_1.useState)(() => innerValue.current ?? (0, dayjs_1.default)().startOf('date'));
15
+ const [viewType, setViewType] = (0, utils_1.useDerivedState)(viewLevel);
16
+ const [innerD, setInnerD] = (0, utils_1.useDerivedState)(() => innerValue.current ?? (0, dayjs_1.default)().startOf('date'), [innerValue.current]);
18
17
  const commonProps = {
19
18
  value: innerValue.current,
20
19
  setValue: setInnerValue,
21
- innerD,
20
+ innerD: innerD.current,
22
21
  setInnerD,
23
22
  setViewType,
24
23
  min,
@@ -26,6 +25,7 @@ const Calendar = ({ viewLevel = 'date', showToday = true, dateButtonProps, today
26
25
  disabledDates,
27
26
  onSelected: (newValue) => {
28
27
  if (viewLevel === 'date') {
28
+ // 视图等级为`date`时，选中年或月跳转回`date`视图
29
29
  setViewType('date');
30
30
  }
31
31
  else {
@@ -40,7 +40,7 @@ const Calendar = ({ viewLevel = 'date', showToday = true, dateButtonProps, today
40
40
  _defaultNull
41
41
  };
42
42
  const renderPanel = () => {
43
- switch (viewType) {
43
+ switch (viewType.current) {
44
44
  case 'date':
45
45
  return (0, jsx_runtime_1.jsx)(panelDates_1.PanelDates, { ...commonProps });
46
46
  case 'month':
package/dist/cjs/components/dateTimePicker/dateTimePicker.js CHANGED
@@ -20,16 +20,11 @@ function useDateTimePickerContext() {
20
20
  return (0, react_1.useContext)(DateTimePickerContext);
21
21
  }
22
22
  exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format = 'YYYY-MM-DD', defaultValue = null, value, onChange, defaultOpen = false, open, onOpenChange, autoClose = !/[Hms]/.test(format), ...props }) => {
23
- const focused = (0, react_1.useRef)(false);
24
- const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
25
- const setInnerOpen = (open) => {
26
- // 如果仍聚焦在输入框，则不用关闭弹框
27
- (open || !focused.current) && _setInnerOpen(open);
28
- };
23
+ const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
29
24
  const [dateValue, _setDateValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
30
25
  const setDateValue = (date) => {
31
26
  _setDateValue(date);
32
- autoClose && _setInnerOpen(false);
27
+ autoClose && setInnerOpen(false);
33
28
  };
34
29
  const contextValue = (0, react_1.useMemo)(() => ({
35
30
  min, max, disabledHours, disabledMinutes, disabledSeconds
package/dist/esm/components/calendar/calendar.js CHANGED
@@ -1,20 +1,19 @@
1
1
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
2
2
  import dayjs from 'dayjs';
3
- import { clsx, useControlled } from '../../utils/index.js';
3
+ import { clsx, useControlled, useDerivedState } from '../../utils/index.js';
4
4
  import { PanelDates } from './panelDates.js';
5
- import { useState } from 'react';
6
5
  import { classes, style } from './calendar.style.js';
7
6
  import { Flex } from '../flex/index.js';
8
7
  import { PanelYear } from './panelYear.js';
9
8
  import { PanelMonth } from './panelMonth.js';
10
9
  export const Calendar = ({ viewLevel = 'date', showToday = true, dateButtonProps, todayButtonText = '回今天', todayButtonProps, size = 'medium', defaultValue = null, min, max, disabledDates, value, onChange, _defaultNull, ...props }) => {
11
10
  const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
12
- const [viewType, setViewType] = useState(viewLevel);
13
- const [innerD, setInnerD] = useState(() => innerValue.current ?? dayjs().startOf('date'));
11
+ const [viewType, setViewType] = useDerivedState(viewLevel);
12
+ const [innerD, setInnerD] = useDerivedState(() => innerValue.current ?? dayjs().startOf('date'), [innerValue.current]);
14
13
  const commonProps = {
15
14
  value: innerValue.current,
16
15
  setValue: setInnerValue,
17
- innerD,
16
+ innerD: innerD.current,
18
17
  setInnerD,
19
18
  setViewType,
20
19
  min,
@@ -22,6 +21,7 @@ export const Calendar = ({ viewLevel = 'date', showToday = true, dateButtonProps
22
21
  disabledDates,
23
22
  onSelected: (newValue) => {
24
23
  if (viewLevel === 'date') {
24
+ // 视图等级为`date`时，选中年或月跳转回`date`视图
25
25
  setViewType('date');
26
26
  }
27
27
  else {
@@ -36,7 +36,7 @@ export const Calendar = ({ viewLevel = 'date', showToday = true, dateButtonProps
36
36
  _defaultNull
37
37
  };
38
38
  const renderPanel = () => {
39
- switch (viewType) {
39
+ switch (viewType.current) {
40
40
  case 'date':
41
41
  return _jsx(PanelDates, { ...commonProps });
42
42
  case 'month':
package/dist/esm/components/dateTimePicker/dateTimePicker.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
2
- import { createContext, memo, useContext, useMemo, useRef } from 'react';
2
+ import { createContext, memo, useContext, useMemo } from 'react';
3
3
  import { classes, datePickerPopperStyle, style } from './dateTimePicker.style.js';
4
4
  import dayjs from 'dayjs';
5
5
  import { InputBase } from '../inputBase/index.js';
@@ -15,16 +15,11 @@ export function useDateTimePickerContext() {
15
15
  return useContext(DateTimePickerContext);
16
16
  }
17
17
  export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, format = 'YYYY-MM-DD', defaultValue = null, value, onChange, defaultOpen = false, open, onOpenChange, autoClose = !/[Hms]/.test(format), ...props }) => {
18
- const focused = useRef(false);
19
- const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
20
- const setInnerOpen = (open) => {
21
- // 如果仍聚焦在输入框，则不用关闭弹框
22
- (open || !focused.current) && _setInnerOpen(open);
23
- };
18
+ const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
24
19
  const [dateValue, _setDateValue] = useControlled(defaultValue, value, onChange);
25
20
  const setDateValue = (date) => {
26
21
  _setDateValue(date);
27
- autoClose && _setInnerOpen(false);
22
+ autoClose && setInnerOpen(false);
28
23
  };
29
24
  const contextValue = useMemo(() => ({
30
25
  min, max, disabledHours, disabledMinutes, disabledSeconds
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.177",
3
+ "version": "0.0.178",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",