@canlooks/can-ui 0.0.177 → 0.0.180

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 (11) hide show
  1. package/dist/cjs/components/button/button.style.js +4 -0
  2. package/dist/cjs/components/calendar/calendar.js +5 -5
  3. package/dist/cjs/components/dateTimePicker/dateTimePicker.js +2 -7
  4. package/dist/cjs/extensions/reactiveForm/reactiveFormItem.js +0 -4
  5. package/dist/cjs/utils/hooks.js +10 -5
  6. package/dist/esm/components/button/button.style.js +4 -0
  7. package/dist/esm/components/calendar/calendar.js +6 -6
  8. package/dist/esm/components/dateTimePicker/dateTimePicker.js +3 -8
  9. package/dist/esm/extensions/reactiveForm/reactiveFormItem.js +0 -4
  10. package/dist/esm/utils/hooks.js +10 -5
  11. package/package.json +11 -11
package/dist/cjs/components/button/button.style.js CHANGED
@@ -54,6 +54,10 @@ function useStyle({ color }) {
54
54
  &:active {
55
55
  transition-duration: 0s;
56
56
  }
57
+
58
+ .${exports.classes.content} {
59
+ display: flex;
60
+ }
57
61
  }
58
62
  `;
59
63
  const sizeStyle = (0, react_1.css) `
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/cjs/extensions/reactiveForm/reactiveFormItem.js CHANGED
@@ -26,10 +26,6 @@ function InnerFormItem({ dependencies, checked, value, onChange, ...props }) {
26
26
  props.children.props?.onChange?.(e);
27
27
  onChange?.(e);
28
28
  context.onChange?.();
29
- },
30
- onkeydown(e) {
31
- e.preventDefault();
32
- props.children.props?.onkeydown?.(e);
33
29
  }
34
30
  };
35
31
  return ((0, jsx_runtime_1.jsx)(form_1.FormItem, { ...props, ref: (0, utils_1.cloneRef)(formItemRef, props.ref), _fieldValue: checked ?? value, children: (_, styleProps, key) => {
package/dist/cjs/utils/hooks.js CHANGED
@@ -82,11 +82,15 @@ function useUnmounted(onUnmount) {
82
82
  (0, react_1.useMemo)(() => {
83
83
  mountTimes.current++;
84
84
  }, []);
85
- (0, react_1.useEffect)(() => () => {
86
- if (!--mountTimes.current) {
87
- isUnmounted.current = true;
88
- onUnmount?.();
89
- }
85
+ (0, react_1.useEffect)(() => {
86
+ // 在<Activity/>组件中，组件可以重新激活
87
+ isUnmounted.current = false;
88
+ return () => {
89
+ if (!--mountTimes.current) {
90
+ isUnmounted.current = true;
91
+ onUnmount?.();
92
+ }
93
+ };
90
94
  }, []);
91
95
  return isUnmounted;
92
96
  }
@@ -122,6 +126,7 @@ function useLoading(fn, referredLoading = false) {
122
126
  return await res;
123
127
  }
124
128
  finally {
129
+ console.log(157, unmounted.current);
125
130
  !unmounted.current && setLoading(false);
126
131
  }
127
132
  }
package/dist/esm/components/button/button.style.js CHANGED
@@ -49,6 +49,10 @@ export function useStyle({ color }) {
49
49
  &:active {
50
50
  transition-duration: 0s;
51
51
  }
52
+
53
+ .${classes.content} {
54
+ display: flex;
55
+ }
52
56
  }
53
57
  `;
54
58
  const sizeStyle = css `
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/dist/esm/extensions/reactiveForm/reactiveFormItem.js CHANGED
@@ -23,10 +23,6 @@ function InnerFormItem({ dependencies, checked, value, onChange, ...props }) {
23
23
  props.children.props?.onChange?.(e);
24
24
  onChange?.(e);
25
25
  context.onChange?.();
26
- },
27
- onkeydown(e) {
28
- e.preventDefault();
29
- props.children.props?.onkeydown?.(e);
30
26
  }
31
27
  };
32
28
  return (_jsx(FormItem, { ...props, ref: cloneRef(formItemRef, props.ref), _fieldValue: checked ?? value, children: (_, styleProps, key) => {
package/dist/esm/utils/hooks.js CHANGED
@@ -67,11 +67,15 @@ export function useUnmounted(onUnmount) {
67
67
  useMemo(() => {
68
68
  mountTimes.current++;
69
69
  }, []);
70
- useEffect(() => () => {
71
- if (!--mountTimes.current) {
72
- isUnmounted.current = true;
73
- onUnmount?.();
74
- }
70
+ useEffect(() => {
71
+ // 在<Activity/>组件中，组件可以重新激活
72
+ isUnmounted.current = false;
73
+ return () => {
74
+ if (!--mountTimes.current) {
75
+ isUnmounted.current = true;
76
+ onUnmount?.();
77
+ }
78
+ };
75
79
  }, []);
76
80
  return isUnmounted;
77
81
  }
@@ -107,6 +111,7 @@ export function useLoading(fn, referredLoading = false) {
107
111
  return await res;
108
112
  }
109
113
  finally {
114
+ console.log(157, unmounted.current);
110
115
  !unmounted.current && setLoading(false);
111
116
  }
112
117
  }
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.180",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",
@@ -51,7 +51,7 @@
51
51
  "@fortawesome/free-brands-svg-icons": "^7.2.0",
52
52
  "@fortawesome/free-regular-svg-icons": "^7.2.0",
53
53
  "@fortawesome/free-solid-svg-icons": "^7.2.0",
54
- "@fortawesome/react-fontawesome": "^3.3.0",
54
+ "@fortawesome/react-fontawesome": "^3.3.1",
55
55
  "@types/react-transition-group": "^4.4.12",
56
56
  "color": "^5.0.3",
57
57
  "dayjs": "^1.11.20",
@@ -60,25 +60,25 @@
60
60
  },
61
61
  "devDependencies": {
62
62
  "@ant-design/icons": "^6.1.1",
63
- "@canlooks/react-router": "^1.2.1",
64
- "@canlooks/reactive": "^4.7.15",
63
+ "@canlooks/react-router": "^2.0.6",
64
+ "@canlooks/reactive": "^4.7.18",
65
65
  "@emotion/styled": "^11.14.1",
66
66
  "@mdi/js": "^7.4.47",
67
67
  "@mdi/react": "^1.6.1",
68
- "@mui/icons-material": "^7.3.9",
69
- "@types/node": "^25.5.0",
68
+ "@mui/icons-material": "^9.0.0",
69
+ "@types/node": "^25.6.0",
70
70
  "@types/react": "^19.2.14",
71
71
  "@types/react-dom": "^19.2.3",
72
72
  "@types/react-syntax-highlighter": "^15.5.13",
73
73
  "mime": "^4.1.0",
74
- "next": "^16.2.1",
75
- "react": "^19.2.4",
76
- "react-dom": "^19.2.4",
74
+ "next": "^16.2.4",
75
+ "react": "^19.2.5",
76
+ "react-dom": "^19.2.5",
77
77
  "react-markdown": "^10.1.0",
78
78
  "react-syntax-highlighter": "^16.1.1",
79
79
  "remark-gfm": "^4.0.1",
80
80
  "tsc-alias": "^1.8.16",
81
- "typescript": "^6.0.2",
82
- "vite": "^8.0.3"
81
+ "typescript": "^6.0.3",
82
+ "vite": "^8.0.9"
83
83
  }
84
84
  }