musae 1.0.14 → 1.0.15

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 (9) hide show
  1. package/dist/components/button/hooks.cjs +6 -2
  2. package/dist/components/button/hooks.mjs +6 -2
  3. package/dist/components/tabs/hooks.cjs +14 -14
  4. package/dist/components/tabs/hooks.mjs +14 -14
  5. package/dist/components/tabs/navigation.cjs +8 -8
  6. package/dist/components/tabs/navigation.mjs +8 -8
  7. package/dist/components/tabs/tab.cjs +3 -2
  8. package/dist/components/tabs/tab.mjs +4 -3
  9. package/package.json +1 -1
package/dist/components/button/hooks.cjs CHANGED
@@ -25,14 +25,18 @@ var useButton = function useButton(_ref) {
25
25
  clear = _useRipple.clear;
26
26
  var click = relax.useEvent(/*#__PURE__*/function () {
27
27
  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(event) {
28
+ var clicked;
28
29
  return _regenerator().w(function (_context) {
29
30
  while (1) switch (_context.p = _context.n) {
30
31
  case 0:
31
32
  add(event);
32
33
  _context.p = 1;
33
- setIsLoading(true);
34
+ clicked = onClick === null || onClick === void 0 ? void 0 : onClick(event);
35
+ if (clicked instanceof Promise) {
36
+ setIsLoading(true);
37
+ }
34
38
  _context.n = 2;
35
- return onClick === null || onClick === void 0 ? void 0 : onClick(event);
39
+ return clicked;
36
40
  case 2:
37
41
  _context.p = 2;
38
42
  setIsLoading(false);
package/dist/components/button/hooks.mjs CHANGED
@@ -23,14 +23,18 @@ var useButton = function useButton(_ref) {
23
23
  clear = _useRipple.clear;
24
24
  var click = useEvent(/*#__PURE__*/function () {
25
25
  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(event) {
26
+ var clicked;
26
27
  return _regenerator().w(function (_context) {
27
28
  while (1) switch (_context.p = _context.n) {
28
29
  case 0:
29
30
  add(event);
30
31
  _context.p = 1;
31
- setIsLoading(true);
32
+ clicked = onClick === null || onClick === void 0 ? void 0 : onClick(event);
33
+ if (clicked instanceof Promise) {
34
+ setIsLoading(true);
35
+ }
32
36
  _context.n = 2;
33
- return onClick === null || onClick === void 0 ? void 0 : onClick(event);
37
+ return clicked;
34
38
  case 2:
35
39
  _context.p = 2;
36
40
  setIsLoading(false);
package/dist/components/tabs/hooks.cjs CHANGED
@@ -70,14 +70,6 @@ var useNavigation = function useNavigation() {
70
70
  _useState8 = _slicedToArray(_useState7, 2),
71
71
  tabsSize = _useState8[0],
72
72
  setTabsSize = _useState8[1];
73
- var resize = relax.useEvent(function () {
74
- var _navigatorRef$current, _navigatorRef$current2, _tabsRef$current$getB, _tabsRef$current;
75
- var _navigatorSize = (_navigatorRef$current = (_navigatorRef$current2 = navigatorRef.current) === null || _navigatorRef$current2 === void 0 ? void 0 : _navigatorRef$current2.getBoundingClientRect().width) !== null && _navigatorRef$current !== void 0 ? _navigatorRef$current : 0;
76
- var _tabsSize = (_tabsRef$current$getB = (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.getBoundingClientRect().width) !== null && _tabsRef$current$getB !== void 0 ? _tabsRef$current$getB : 0;
77
- setNavigatorSize(_navigatorSize);
78
- setTabsSize(_tabsSize);
79
- scroll(0);
80
- });
81
73
  var _useMemo = React.useMemo(function () {
82
74
  return {
83
75
  maxOffset: Math.max(0, tabsSize - navigatorSize),
@@ -86,6 +78,20 @@ var useNavigation = function useNavigation() {
86
78
  }, [navigatorSize, tabsSize]),
87
79
  maxOffset = _useMemo.maxOffset,
88
80
  minOffset = _useMemo.minOffset;
81
+ // handle scroll
82
+ var scroll = relax.useEvent(function (delta) {
83
+ setOffset(function (prev) {
84
+ return relax.clamp(prev + delta, minOffset, maxOffset);
85
+ });
86
+ });
87
+ var resize = relax.useEvent(function () {
88
+ var _navigatorRef$current, _navigatorRef$current2, _tabsRef$current$getB, _tabsRef$current;
89
+ var _navigatorSize = (_navigatorRef$current = (_navigatorRef$current2 = navigatorRef.current) === null || _navigatorRef$current2 === void 0 ? void 0 : _navigatorRef$current2.getBoundingClientRect().width) !== null && _navigatorRef$current !== void 0 ? _navigatorRef$current : 0;
90
+ var _tabsSize = (_tabsRef$current$getB = (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.getBoundingClientRect().width) !== null && _tabsRef$current$getB !== void 0 ? _tabsRef$current$getB : 0;
91
+ setNavigatorSize(_navigatorSize);
92
+ setTabsSize(_tabsSize);
93
+ scroll(0);
94
+ });
89
95
  var _useMemo2 = React.useMemo(function () {
90
96
  return {
91
97
  isLeadingOverflow: offset > minOffset,
@@ -94,12 +100,6 @@ var useNavigation = function useNavigation() {
94
100
  }, [minOffset, maxOffset, offset]),
95
101
  isLeadingOverflow = _useMemo2.isLeadingOverflow,
96
102
  isTrailingOverflow = _useMemo2.isTrailingOverflow;
97
- // handle scroll
98
- var scroll = relax.useEvent(function (delta) {
99
- setOffset(function (prev) {
100
- return relax.clamp(prev + delta, minOffset, maxOffset);
101
- });
102
- });
103
103
  // if window resize
104
104
  // re-calculate offsets range
105
105
  relax.useResize(resize);
package/dist/components/tabs/hooks.mjs CHANGED
@@ -68,14 +68,6 @@ var useNavigation = function useNavigation() {
68
68
  _useState8 = _slicedToArray(_useState7, 2),
69
69
  tabsSize = _useState8[0],
70
70
  setTabsSize = _useState8[1];
71
- var resize = useEvent(function () {
72
- var _navigatorRef$current, _navigatorRef$current2, _tabsRef$current$getB, _tabsRef$current;
73
- var _navigatorSize = (_navigatorRef$current = (_navigatorRef$current2 = navigatorRef.current) === null || _navigatorRef$current2 === void 0 ? void 0 : _navigatorRef$current2.getBoundingClientRect().width) !== null && _navigatorRef$current !== void 0 ? _navigatorRef$current : 0;
74
- var _tabsSize = (_tabsRef$current$getB = (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.getBoundingClientRect().width) !== null && _tabsRef$current$getB !== void 0 ? _tabsRef$current$getB : 0;
75
- setNavigatorSize(_navigatorSize);
76
- setTabsSize(_tabsSize);
77
- scroll(0);
78
- });
79
71
  var _useMemo = useMemo(function () {
80
72
  return {
81
73
  maxOffset: Math.max(0, tabsSize - navigatorSize),
@@ -84,6 +76,20 @@ var useNavigation = function useNavigation() {
84
76
  }, [navigatorSize, tabsSize]),
85
77
  maxOffset = _useMemo.maxOffset,
86
78
  minOffset = _useMemo.minOffset;
79
+ // handle scroll
80
+ var scroll = useEvent(function (delta) {
81
+ setOffset(function (prev) {
82
+ return clamp(prev + delta, minOffset, maxOffset);
83
+ });
84
+ });
85
+ var resize = useEvent(function () {
86
+ var _navigatorRef$current, _navigatorRef$current2, _tabsRef$current$getB, _tabsRef$current;
87
+ var _navigatorSize = (_navigatorRef$current = (_navigatorRef$current2 = navigatorRef.current) === null || _navigatorRef$current2 === void 0 ? void 0 : _navigatorRef$current2.getBoundingClientRect().width) !== null && _navigatorRef$current !== void 0 ? _navigatorRef$current : 0;
88
+ var _tabsSize = (_tabsRef$current$getB = (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.getBoundingClientRect().width) !== null && _tabsRef$current$getB !== void 0 ? _tabsRef$current$getB : 0;
89
+ setNavigatorSize(_navigatorSize);
90
+ setTabsSize(_tabsSize);
91
+ scroll(0);
92
+ });
87
93
  var _useMemo2 = useMemo(function () {
88
94
  return {
89
95
  isLeadingOverflow: offset > minOffset,
@@ -92,12 +98,6 @@ var useNavigation = function useNavigation() {
92
98
  }, [minOffset, maxOffset, offset]),
93
99
  isLeadingOverflow = _useMemo2.isLeadingOverflow,
94
100
  isTrailingOverflow = _useMemo2.isTrailingOverflow;
95
- // handle scroll
96
- var scroll = useEvent(function (delta) {
97
- setOffset(function (prev) {
98
- return clamp(prev + delta, minOffset, maxOffset);
99
- });
100
- });
101
101
  // if window resize
102
102
  // re-calculate offsets range
103
103
  useResize(resize);
package/dist/components/tabs/navigation.cjs CHANGED
@@ -73,7 +73,7 @@ var Navigation = function Navigation(_ref) {
73
73
  items = _useTabsContext.items,
74
74
  classNames = _useTabsContext.classNames;
75
75
  var indicatorRef = React.useRef(null);
76
- var tabRefs = React.useRef(new Map());
76
+ var tabItemsRef = React.useRef(new Map());
77
77
  var _useNavigation = hooks.useNavigation(),
78
78
  navigatorRef = _useNavigation.navigatorRef,
79
79
  tabsRef = _useNavigation.tabsRef,
@@ -96,13 +96,13 @@ var Navigation = function Navigation(_ref) {
96
96
  // repaint indicator when activeKey changed
97
97
  // animate indicator to correct position & width
98
98
  React.useEffect(function () {
99
- var _indicator = indicatorRef.current;
100
- if (!_indicator) return;
99
+ var indicator = indicatorRef.current;
100
+ if (!indicator) return;
101
101
  if (relax.isUndefined(activeKey)) return;
102
- var tab = tabRefs.current.get(activeKey);
103
- react.animate(_indicator, {
104
- left: tab === null || tab === void 0 ? void 0 : tab.offsetLeft,
105
- width: tab === null || tab === void 0 ? void 0 : tab.clientWidth
102
+ var tabItem = tabItemsRef.current.get(activeKey);
103
+ react.animate(indicator, {
104
+ left: tabItem === null || tabItem === void 0 ? void 0 : tabItem.offsetLeft,
105
+ width: tabItem === null || tabItem === void 0 ? void 0 : tabItem.clientWidth
106
106
  });
107
107
  }, [activeKey]);
108
108
  return /*#__PURE__*/React.createElement("div", {
@@ -126,7 +126,7 @@ var Navigation = function Navigation(_ref) {
126
126
  label: item.label,
127
127
  onClick: onChange,
128
128
  ref: function ref(_tab) {
129
- tabRefs.current.set(item.key, _tab);
129
+ tabItemsRef.current.set(item.key, _tab);
130
130
  }
131
131
  });
132
132
  }), /*#__PURE__*/React.createElement("div", {
package/dist/components/tabs/navigation.mjs CHANGED
@@ -69,7 +69,7 @@ var Navigation = function Navigation(_ref) {
69
69
  items = _useTabsContext.items,
70
70
  classNames = _useTabsContext.classNames;
71
71
  var indicatorRef = useRef(null);
72
- var tabRefs = useRef(new Map());
72
+ var tabItemsRef = useRef(new Map());
73
73
  var _useNavigation = useNavigation(),
74
74
  navigatorRef = _useNavigation.navigatorRef,
75
75
  tabsRef = _useNavigation.tabsRef,
@@ -92,13 +92,13 @@ var Navigation = function Navigation(_ref) {
92
92
  // repaint indicator when activeKey changed
93
93
  // animate indicator to correct position & width
94
94
  useEffect(function () {
95
- var _indicator = indicatorRef.current;
96
- if (!_indicator) return;
95
+ var indicator = indicatorRef.current;
96
+ if (!indicator) return;
97
97
  if (isUndefined(activeKey)) return;
98
- var tab = tabRefs.current.get(activeKey);
99
- animate(_indicator, {
100
- left: tab === null || tab === void 0 ? void 0 : tab.offsetLeft,
101
- width: tab === null || tab === void 0 ? void 0 : tab.clientWidth
98
+ var tabItem = tabItemsRef.current.get(activeKey);
99
+ animate(indicator, {
100
+ left: tabItem === null || tabItem === void 0 ? void 0 : tabItem.offsetLeft,
101
+ width: tabItem === null || tabItem === void 0 ? void 0 : tabItem.clientWidth
102
102
  });
103
103
  }, [activeKey]);
104
104
  return /*#__PURE__*/React.createElement("div", {
@@ -122,7 +122,7 @@ var Navigation = function Navigation(_ref) {
122
122
  label: item.label,
123
123
  onClick: onChange,
124
124
  ref: function ref(_tab) {
125
- tabRefs.current.set(item.key, _tab);
125
+ tabItemsRef.current.set(item.key, _tab);
126
126
  }
127
127
  });
128
128
  }), /*#__PURE__*/React.createElement("div", {
package/dist/components/tabs/tab.cjs CHANGED
@@ -6,6 +6,7 @@ var React = require('react');
6
6
  var button = require('../button/button.cjs');
7
7
  var hooks = require('./hooks.cjs');
8
8
  var className = require('@aiszlab/relax/class-name');
9
+ var relax = require('@aiszlab/relax');
9
10
 
10
11
  var Tab = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
11
12
  var value = _ref.value,
@@ -15,9 +16,9 @@ var Tab = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
15
16
  activeKey = _useTabsContext.activeKey,
16
17
  classNames = _useTabsContext.classNames;
17
18
  var isActive = activeKey === value;
18
- var click = React.useCallback(function () {
19
+ var click = relax.useEvent(function () {
19
20
  onClick(value);
20
- }, [onClick, value]);
21
+ });
21
22
  var styled = {
22
23
  className: "musaex-1c9xf0i"
23
24
  };
package/dist/components/tabs/tab.mjs CHANGED
@@ -1,7 +1,8 @@
1
- import React, { forwardRef, useCallback } from 'react';
1
+ import React, { forwardRef } from 'react';
2
2
  import { Button } from '../button/button.mjs';
3
3
  import { useTabsContext } from './hooks.mjs';
4
4
  import { stringify } from '@aiszlab/relax/class-name';
5
+ import { useEvent } from '@aiszlab/relax';
5
6
 
6
7
  var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
7
8
  var value = _ref.value,
@@ -11,9 +12,9 @@ var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
11
12
  activeKey = _useTabsContext.activeKey,
12
13
  classNames = _useTabsContext.classNames;
13
14
  var isActive = activeKey === value;
14
- var click = useCallback(function () {
15
+ var click = useEvent(function () {
15
16
  onClick(value);
16
- }, [onClick, value]);
17
+ });
17
18
  var styled = {
18
19
  className: "musaex-1c9xf0i"
19
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "musae",
3
- "version": "1.0.14",
3
+ "version": "1.0.15",
4
4
  "description": "musae-ui",
5
5
  "author": "tutu@fantufantu.com",
6
6
  "license": "MIT",