@nutui/nutui-react-taro 3.0.5 → 3.0.6

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 (108) hide show
  1. package/CHANGELOG.md +40 -1
  2. package/dist/cjs/packages/badge/badge.js +4 -3
  3. package/dist/cjs/packages/badge/style/badge.scss +4 -0
  4. package/dist/cjs/packages/badge/style/style.css +9 -6
  5. package/dist/cjs/packages/badge/style/style.harmony.css +3 -0
  6. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  7. package/dist/cjs/packages/datepicker/style/style.css +3 -0
  8. package/dist/cjs/packages/datepickerview/style/style.css +3 -0
  9. package/dist/cjs/packages/fixednav/style/style.css +9 -6
  10. package/dist/cjs/packages/indicator/indicator.js +1 -1
  11. package/dist/cjs/packages/lottie/index.js +5 -5
  12. package/dist/cjs/packages/lottie/{mp.js → lottiemp.js} +1 -1
  13. package/dist/cjs/packages/notify/notify.js +44 -13
  14. package/dist/cjs/packages/notify/style/notify.scss +39 -36
  15. package/dist/cjs/packages/notify/style/style.css +36 -31
  16. package/dist/cjs/packages/notify/style/style.harmony.css +36 -31
  17. package/dist/cjs/packages/picker/style/style.css +3 -0
  18. package/dist/cjs/packages/pickerview/pickerroller.js +7 -2
  19. package/dist/cjs/packages/pickerview/style/pickerview.scss +3 -0
  20. package/dist/cjs/packages/pickerview/style/style.css +3 -0
  21. package/dist/cjs/packages/pickerview/style/style.harmony.css +3 -0
  22. package/dist/cjs/packages/searchbar/searchbar.js +8 -2
  23. package/dist/cjs/packages/skeleton/skeleton.js +63 -52
  24. package/dist/cjs/packages/skeleton/style/index.js +0 -1
  25. package/dist/cjs/packages/skeleton/style/skeleton.scss +40 -46
  26. package/dist/cjs/packages/skeleton/style/style.css +32 -175
  27. package/dist/cjs/packages/skeleton/style/style.harmony.css +32 -42
  28. package/dist/cjs/packages/switch/style/style.css +5 -0
  29. package/dist/cjs/packages/switch/style/style.harmony.css +5 -0
  30. package/dist/cjs/packages/switch/style/switch.scss +5 -0
  31. package/dist/cjs/packages/switch/switch.js +22 -11
  32. package/dist/cjs/packages/tabbar/style/style.css +54 -45
  33. package/dist/cjs/packages/tabbar/style/style.harmony.css +24 -18
  34. package/dist/cjs/packages/tabbar/style/tabbar.scss +28 -19
  35. package/dist/cjs/packages/tabbar/tabbar.js +28 -10
  36. package/dist/cjs/packages/tabbaritem/style/style.css +30 -27
  37. package/dist/cjs/packages/tabbaritem/style/style.harmony.css +21 -21
  38. package/dist/cjs/packages/tabbaritem/style/tabbaritem.scss +32 -29
  39. package/dist/cjs/packages/tabbaritem/tabbaritem.js +38 -14
  40. package/dist/cjs/types/spec/badge/base.d.ts +1 -0
  41. package/dist/cjs/types/spec/indicator/base.d.ts +1 -1
  42. package/dist/cjs/types/spec/notify/base.d.ts +7 -2
  43. package/dist/cjs/types/spec/searchbar/taro.d.ts +10 -7
  44. package/dist/cjs/types/spec/skeleton/base.d.ts +7 -5
  45. package/dist/cjs/types/spec/switch/base.d.ts +3 -2
  46. package/dist/cjs/types/spec/switch/h5.d.ts +1 -1
  47. package/dist/cjs/types/spec/switch/taro.d.ts +1 -4
  48. package/dist/cjs/types/spec/tabbar/base.d.ts +7 -4
  49. package/dist/es/packages/badge/badge.js +4 -3
  50. package/dist/es/packages/badge/style/badge.scss +4 -0
  51. package/dist/es/packages/badge/style/style.css +9 -6
  52. package/dist/es/packages/badge/style/style.harmony.css +3 -0
  53. package/dist/es/packages/configprovider/types.d.ts +1 -1
  54. package/dist/es/packages/datepicker/style/style.css +3 -0
  55. package/dist/es/packages/datepickerview/style/style.css +3 -0
  56. package/dist/es/packages/fixednav/style/style.css +9 -6
  57. package/dist/es/packages/indicator/indicator.js +1 -1
  58. package/dist/es/packages/lottie/index.js +3 -3
  59. package/dist/es/packages/lottie/{mp.js → lottiemp.js} +1 -1
  60. package/dist/es/packages/notify/notify.js +45 -14
  61. package/dist/es/packages/notify/style/notify.scss +39 -36
  62. package/dist/es/packages/notify/style/style.css +36 -31
  63. package/dist/es/packages/notify/style/style.harmony.css +36 -31
  64. package/dist/es/packages/picker/style/style.css +3 -0
  65. package/dist/es/packages/pickerview/pickerroller.js +7 -2
  66. package/dist/es/packages/pickerview/style/pickerview.scss +3 -0
  67. package/dist/es/packages/pickerview/style/style.css +3 -0
  68. package/dist/es/packages/pickerview/style/style.harmony.css +3 -0
  69. package/dist/es/packages/searchbar/searchbar.js +7 -2
  70. package/dist/es/packages/skeleton/skeleton.js +62 -52
  71. package/dist/es/packages/skeleton/style/index.js +0 -1
  72. package/dist/es/packages/skeleton/style/skeleton.scss +40 -46
  73. package/dist/es/packages/skeleton/style/style.css +32 -175
  74. package/dist/es/packages/skeleton/style/style.harmony.css +32 -42
  75. package/dist/es/packages/switch/style/style.css +5 -0
  76. package/dist/es/packages/switch/style/style.harmony.css +5 -0
  77. package/dist/es/packages/switch/style/switch.scss +5 -0
  78. package/dist/es/packages/switch/switch.js +21 -11
  79. package/dist/es/packages/tabbar/style/style.css +54 -45
  80. package/dist/es/packages/tabbar/style/style.harmony.css +24 -18
  81. package/dist/es/packages/tabbar/style/tabbar.scss +28 -19
  82. package/dist/es/packages/tabbar/tabbar.js +27 -10
  83. package/dist/es/packages/tabbaritem/style/style.css +30 -27
  84. package/dist/es/packages/tabbaritem/style/style.harmony.css +21 -21
  85. package/dist/es/packages/tabbaritem/style/tabbaritem.scss +32 -29
  86. package/dist/es/packages/tabbaritem/tabbaritem.js +38 -14
  87. package/dist/es/types/spec/badge/base.d.ts +4 -0
  88. package/dist/es/types/spec/indicator/base.d.ts +1 -1
  89. package/dist/es/types/spec/notify/base.d.ts +22 -5
  90. package/dist/es/types/spec/searchbar/taro.d.ts +10 -7
  91. package/dist/es/types/spec/skeleton/base.d.ts +19 -14
  92. package/dist/es/types/spec/switch/base.d.ts +6 -2
  93. package/dist/es/types/spec/switch/h5.d.ts +1 -1
  94. package/dist/es/types/spec/switch/taro.d.ts +1 -4
  95. package/dist/es/types/spec/tabbar/base.d.ts +7 -4
  96. package/dist/nutui.react.umd.js +422 -297
  97. package/dist/style.css +1 -1
  98. package/dist/style.scss +47 -47
  99. package/dist/styles/variables-jmapp.scss +23 -1
  100. package/dist/styles/variables-jrkf.scss +23 -1
  101. package/dist/styles/variables.scss +35 -37
  102. package/package.json +1 -1
  103. /package/dist/cjs/packages/lottie/{mp.d.ts → lottiemp.d.ts} +0 -0
  104. /package/dist/cjs/packages/lottie/{web.d.ts → lottieweb.d.ts} +0 -0
  105. /package/dist/cjs/packages/lottie/{web.js → lottieweb.js} +0 -0
  106. /package/dist/es/packages/lottie/{mp.d.ts → lottiemp.d.ts} +0 -0
  107. /package/dist/es/packages/lottie/{web.d.ts → lottieweb.d.ts} +0 -0
  108. /package/dist/es/packages/lottie/{web.js → lottieweb.js} +0 -0
@@ -5,38 +5,44 @@
5
5
  .nut-tabbar {
6
6
  border: 0px;
7
7
  box-shadow: none;
8
- border-bottom: 1px solid #eee;
9
- border-top: 1px solid #eee;
8
+ border-bottom: 0;
9
+ border-top: 0;
10
10
  width: 100%;
11
- display: flex;
12
- flex-direction: column;
13
- justify-content: center;
14
- align-items: center;
15
- box-sizing: border-box;
16
11
  background: #ffffff;
17
12
  }
18
13
  .nut-tabbar-wrap {
19
- width: 100%;
20
- height: 50px;
14
+ height: 46px;
21
15
  display: flex;
16
+ }
17
+ .nut-tabbar-wrap-3 {
18
+ padding: 0 16px;
19
+ }
20
+ .nut-tabbar-wrap-2 {
21
+ padding: 0 32px;
22
+ }
23
+ .nut-tabbar-wrap-horizontal {
24
+ align-items: center;
25
+ }
26
+ .nut-tabbar-wrap-horizontal .nut-tabbar-item {
22
27
  flex-direction: row;
23
28
  justify-content: center;
24
- align-items: center;
25
29
  }
26
- .nut-tabbar:last-child {
27
- border-right: 0;
30
+ .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon {
31
+ width: 20px;
32
+ height: 20px;
33
+ }
34
+ .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text {
35
+ margin: 0 4px 0 6px;
36
+ font-size: 14px;
37
+ }
38
+ .nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after {
39
+ border: 0;
28
40
  }
29
41
  .nut-tabbar-fixed {
30
42
  position: fixed;
31
43
  bottom: 0px;
32
44
  left: 0px;
33
45
  }
34
- .nut-tabbar-safe-area {
35
- display: block;
36
- width: 100%;
37
- padding-bottom: constant(safe-area-inset-bottom);
38
- padding-bottom: env(safe-area-inset-bottom);
39
- }
40
46
 
41
47
  [dir=rtl] .nut-tabbar:last-child,
42
48
  .nut-rtl .nut-tabbar:last-child {
@@ -4,24 +4,40 @@
4
4
  border-bottom: $tabbar-border-bottom;
5
5
  border-top: $tabbar-border-top;
6
6
  width: 100%;
7
- display: flex;
8
- flex-direction: column;
9
- justify-content: center;
10
- align-items: center;
11
- box-sizing: border-box;
12
7
  background: $color-background-overlay;
13
8
 
14
9
  &-wrap {
15
- width: 100%;
16
10
  height: $tabbar-height;
17
11
  display: flex;
18
- flex-direction: row;
19
- justify-content: center;
20
- align-items: center;
21
- }
22
12
 
23
- &:last-child {
24
- border-right: 0;
13
+ &-3 {
14
+ padding: 0 16px;
15
+ }
16
+
17
+ &-2 {
18
+ padding: 0 32px;
19
+ }
20
+
21
+ &-horizontal {
22
+ align-items: center;
23
+ .nut-tabbar-item {
24
+ flex-direction: row;
25
+ justify-content: center;
26
+ .nut-icon {
27
+ width: 20px;
28
+ height: 20px;
29
+ }
30
+ .nut-tabbar-item-text {
31
+ margin: 0 4px 0 6px;
32
+ font-size: 14px;
33
+ }
34
+ .nut-badge-sup {
35
+ &::after {
36
+ border: 0;
37
+ }
38
+ }
39
+ }
40
+ }
25
41
  }
26
42
 
27
43
  &-fixed {
@@ -29,13 +45,6 @@
29
45
  bottom: 0px;
30
46
  left: 0px;
31
47
  }
32
-
33
- &-safe-area {
34
- display: block;
35
- width: 100%;
36
- padding-bottom: constant(safe-area-inset-bottom);
37
- padding-bottom: env(safe-area-inset-bottom);
38
- }
39
48
  }
40
49
 
41
50
  [dir='rtl'] .nut-tabbar,
@@ -9,27 +9,30 @@ Object.defineProperty(exports, "Tabbar", {
9
9
  }
10
10
  });
11
11
  var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
12
+ var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
13
  var _define_property = require("@swc/helpers/_/_define_property");
13
14
  var _object_spread = require("@swc/helpers/_/_object_spread");
14
15
  var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
15
16
  var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
16
- var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
17
+ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
17
18
  var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
18
19
  var _components = require("@tarojs/components");
19
20
  var _typings = require("../../utils/typings");
20
21
  var _usepropsvalue = require("../../hooks/use-props-value");
21
22
  var _index = /*#__PURE__*/ _interop_require_default._(require("../tabbaritem/index"));
22
23
  var _context = /*#__PURE__*/ _interop_require_default._(require("./context"));
24
+ var _index1 = /*#__PURE__*/ _interop_require_default._(require("../safearea/index"));
23
25
  var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
24
26
  defaultValue: 0,
25
27
  fixed: false,
26
28
  inactiveColor: '',
27
29
  activeColor: '',
30
+ direction: 'vertical',
28
31
  safeArea: false,
29
- onSwitch: function onSwitch(value) {}
32
+ onSwitch: function onSwitch() {}
30
33
  });
31
34
  var Tabbar = function Tabbar(props) {
32
- var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
35
+ var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, defaultValue = _$_object_spread.defaultValue, value = _$_object_spread.value, fixed = _$_object_spread.fixed, activeColor = _$_object_spread.activeColor, inactiveColor = _$_object_spread.inactiveColor, direction = _$_object_spread.direction, safeArea = _$_object_spread.safeArea, className = _$_object_spread.className, style = _$_object_spread.style, onSwitch = _$_object_spread.onSwitch;
33
36
  var classPrefix = 'nut-tabbar';
34
37
  var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
35
38
  value: value,
@@ -37,11 +40,26 @@ var Tabbar = function Tabbar(props) {
37
40
  finalValue: 0,
38
41
  onChange: onSwitch
39
42
  }), 2), selectIndex = _usePropsValue[0], setSelectIndex = _usePropsValue[1];
43
+ var sizeCls = (0, _react.useMemo)(function() {
44
+ var size = _react.default.Children.count(children);
45
+ var _obj;
46
+ return size > 3 ? '' : (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-wrap-3"), size === 3), (0, _define_property._)(_obj, "".concat(classPrefix, "-wrap-2"), size === 2), (0, _define_property._)(_obj, "".concat(classPrefix, "-wrap-").concat(direction), size === 2 && direction !== 'vertical'), _obj));
47
+ }, [
48
+ children,
49
+ direction
50
+ ]);
51
+ var itemDirection = (0, _react.useMemo)(function() {
52
+ var size = _react.default.Children.count(children);
53
+ return size === 2 && direction !== 'vertical' && direction;
54
+ }, [
55
+ direction,
56
+ children
57
+ ]);
40
58
  return /*#__PURE__*/ _react.default.createElement(_components.View, {
41
59
  className: (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-fixed"), fixed), className),
42
60
  style: style
43
61
  }, /*#__PURE__*/ _react.default.createElement(_components.View, {
44
- className: "".concat(classPrefix, "-wrap")
62
+ className: "".concat(classPrefix, "-wrap ").concat(sizeCls)
45
63
  }, /*#__PURE__*/ _react.default.createElement(_context.default.Provider, {
46
64
  value: {
47
65
  selectIndex: selectIndex,
@@ -50,12 +68,12 @@ var Tabbar = function Tabbar(props) {
50
68
  handleClick: setSelectIndex
51
69
  }
52
70
  }, _react.default.Children.map(children, function(child, index) {
53
- if (!/*#__PURE__*/ _react.default.isValidElement(child)) return null;
54
- return /*#__PURE__*/ _react.default.cloneElement(child, (0, _object_spread_props._)((0, _object_spread._)({}, child.props), {
55
- index: index
56
- }));
57
- }))), (fixed || safeArea) && /*#__PURE__*/ _react.default.createElement(_components.View, {
58
- className: "".concat(classPrefix, "-safe-area")
71
+ return /*#__PURE__*/ _react.default.isValidElement(child) ? /*#__PURE__*/ _react.default.cloneElement(child, (0, _object_spread_props._)((0, _object_spread._)({}, child.props), {
72
+ index: index,
73
+ direction: itemDirection
74
+ })) : null;
75
+ }))), (fixed || safeArea) && /*#__PURE__*/ _react.default.createElement(_index1.default, {
76
+ position: "bottom"
59
77
  }));
60
78
  };
61
79
  Tabbar.displayName = 'NutTabbar';
@@ -52,6 +52,9 @@
52
52
  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
53
53
  z-index: 1;
54
54
  }
55
+ .nut-badge-disabled {
56
+ background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
57
+ }
55
58
  .nut-badge-number {
56
59
  font-family: "JD";
57
60
  }
@@ -77,14 +80,14 @@
77
80
  height: var(--nutui-badge-dot-width, 6px);
78
81
  }
79
82
  .nut-badge-dot-small {
80
- min-width: var(--nutui-badge-dot-width, 4px);
81
- width: var(--nutui-badge-dot-width, 4px);
82
- height: var(--nutui-badge-dot-width, 4px);
83
+ min-width: var(--nutui-badge-dot-small-width, 4px);
84
+ width: var(--nutui-badge-dot-small-width, 4px);
85
+ height: var(--nutui-badge-dot-small-width, 4px);
83
86
  }
84
87
  .nut-badge-dot-large {
85
- min-width: var(--nutui-badge-dot-width, 8px);
86
- width: var(--nutui-badge-dot-width, 8px);
87
- height: var(--nutui-badge-dot-width, 8px);
88
+ min-width: var(--nutui-badge-dot-large-width, 8px);
89
+ width: var(--nutui-badge-dot-large-width, 8px);
90
+ height: var(--nutui-badge-dot-large-width, 8px);
88
91
  }
89
92
  .nut-badge-outline {
90
93
  background: #ffffff;
@@ -97,25 +100,16 @@
97
100
  .nut-tabbar-item {
98
101
  display: flex;
99
102
  flex-direction: column;
100
- justify-content: center;
101
103
  align-items: center;
102
104
  flex: 1;
103
- text-align: center;
104
- text-decoration: none;
105
+ padding: 6px 0 2px;
105
106
  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
106
107
  height: 100%;
107
108
  }
108
- .nut-tabbar-item-icon-box {
109
- padding: 0px;
110
- display: flex;
111
- flex-direction: column;
112
- align-items: center;
113
- position: relative;
114
- }
115
- .nut-tabbar-item-icon-box .nut-icon {
116
- width: 22px;
117
- height: 22px;
118
- font-size: 22px;
109
+ .nut-tabbar-item .nut-icon {
110
+ width: 24px;
111
+ height: 24px;
112
+ font-size: 24px;
119
113
  /* #ifdef harmony*/
120
114
  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
121
115
  /* #endif*/
@@ -123,23 +117,32 @@
123
117
  color: inherit;
124
118
  /* #endif*/
125
119
  }
126
- .nut-tabbar-item-icon-box-nav {
120
+ .nut-tabbar-item-text {
127
121
  display: block;
128
122
  color: var(--nutui-color-text, #505259);
129
- font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
130
- line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
131
- margin-top: var(--nutui-tabbar-text-margin-top, 3px);
123
+ font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
124
+ line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10px));
125
+ margin-top: var(--nutui-tabbar-text-margin-top, 4px);
126
+ }
127
+ .nut-tabbar-item .nut-image-default {
128
+ width: 38px;
129
+ height: 38px;
130
+ border-radius: 38px;
131
+ }
132
+ .nut-tabbar-item-large {
133
+ justify-content: center;
134
+ padding: 0;
132
135
  }
133
- .nut-tabbar-item-icon-box-large {
136
+ .nut-tabbar-item-large .nut-tabbar-item-text {
134
137
  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
135
138
  margin-top: 0;
136
- line-height: var(--nutui-tabbar-text-line-height, 20px);
139
+ line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
137
140
  font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
138
141
  }
139
142
  .nut-tabbar-item-active {
140
143
  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
141
144
  }
142
- .nut-tabbar-item-active .nut-tabbar-item-icon-box,
145
+ .nut-tabbar-item-active .nut-tabbar-item-text,
143
146
  .nut-tabbar-item-active .nut-icon {
144
147
  /* #ifdef harmony*/
145
148
  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
@@ -5,25 +5,16 @@
5
5
  .nut-tabbar-item {
6
6
  display: flex;
7
7
  flex-direction: column;
8
- justify-content: center;
9
8
  align-items: center;
10
9
  flex: 1;
11
- text-align: center;
12
- text-decoration: none;
10
+ padding: 6px 0 2px;
13
11
  color: #1a1a1a;
14
12
  height: 100%;
15
13
  }
16
- .nut-tabbar-item-icon-box {
17
- padding: 0px;
18
- display: flex;
19
- flex-direction: column;
20
- align-items: center;
21
- position: relative;
22
- }
23
- .nut-tabbar-item-icon-box .nut-icon {
24
- width: 22px;
25
- height: 22px;
26
- font-size: 22px;
14
+ .nut-tabbar-item .nut-icon {
15
+ width: 24px;
16
+ height: 24px;
17
+ font-size: 24px;
27
18
  /* #ifdef harmony*/
28
19
  color: #1a1a1a;
29
20
  /* #endif*/
@@ -31,23 +22,32 @@
31
22
  color: inherit;
32
23
  /* #endif*/
33
24
  }
34
- .nut-tabbar-item-icon-box-nav {
25
+ .nut-tabbar-item-text {
35
26
  display: block;
36
27
  color: #505259;
37
- font-size: 11px;
38
- line-height: 11px;
39
- margin-top: 3px;
28
+ font-size: 10px;
29
+ line-height: 10px;
30
+ margin-top: 4px;
31
+ }
32
+ .nut-tabbar-item .nut-image-default {
33
+ width: 38px;
34
+ height: 38px;
35
+ border-radius: 38px;
36
+ }
37
+ .nut-tabbar-item-large {
38
+ justify-content: center;
39
+ padding: 0;
40
40
  }
41
- .nut-tabbar-item-icon-box-large {
41
+ .nut-tabbar-item-large .nut-tabbar-item-text {
42
42
  font-size: 16px;
43
43
  margin-top: 0;
44
- line-height: 20px;
44
+ line-height: 16px;
45
45
  font-weight: 400;
46
46
  }
47
47
  .nut-tabbar-item-active {
48
48
  color: #ff0f23;
49
49
  }
50
- .nut-tabbar-item-active .nut-tabbar-item-icon-box {
50
+ .nut-tabbar-item-active .nut-tabbar-item-text {
51
51
  /* #ifdef harmony*/
52
52
  color: #ff0f23;
53
53
  /* #endif*/
@@ -1,45 +1,48 @@
1
1
  .nut-tabbar-item {
2
2
  display: flex;
3
3
  flex-direction: column;
4
- justify-content: center;
5
4
  align-items: center;
6
5
  flex: 1;
7
- text-align: center;
8
- text-decoration: none;
6
+ padding: 6px 0 2px;
9
7
  color: $tabbar-inactive-color;
10
8
  height: 100%;
11
9
 
12
- &-icon-box {
13
- padding: 0px;
14
- display: flex;
15
- flex-direction: column;
16
- align-items: center;
17
- position: relative;
10
+ .nut-icon {
11
+ width: 24px;
12
+ height: 24px;
13
+ font-size: 24px;
14
+ /* #ifdef harmony*/
15
+ color: $tabbar-inactive-color;
16
+ /* #endif*/
17
+ /* #ifndef harmony*/
18
+ color: inherit;
19
+ /* #endif*/
20
+ }
18
21
 
19
- .nut-icon {
20
- width: 22px;
21
- height: 22px;
22
- font-size: 22px;
23
- /* #ifdef harmony*/
24
- color: $tabbar-inactive-color;
25
- /* #endif*/
26
- /* #ifndef harmony*/
27
- color: inherit;
28
- /* #endif*/
29
- }
22
+ &-text {
23
+ display: block;
24
+ color: $color-text;
25
+ font-size: $tabbar-text-font-size;
26
+ line-height: $tabbar-text-font-size;
27
+ margin-top: $tabbar-text-margin-top;
28
+ }
30
29
 
31
- &-nav {
32
- display: block;
33
- color: $color-text;
34
- font-size: $tabbar-text-font-size;
35
- line-height: $tabbar-text-font-size;
36
- margin-top: $tabbar-text-margin-top;
30
+ .nut-image {
31
+ &-default {
32
+ width: 38px;
33
+ height: 38px;
34
+ border-radius: 38px;
37
35
  }
36
+ }
37
+
38
+ &-large {
39
+ justify-content: center;
40
+ padding: 0;
38
41
 
39
- &-large {
42
+ .nut-tabbar-item-text {
40
43
  font-size: $tabbar-text-large-font-size;
41
44
  margin-top: 0;
42
- line-height: $tabbar-text-line-height;
45
+ line-height: $tabbar-text-large-font-size;
43
46
  font-weight: $tabbar-text-large-font-weight;
44
47
  }
45
48
  }
@@ -47,7 +50,7 @@
47
50
  &-active {
48
51
  color: $tabbar-active-color;
49
52
 
50
- .nut-tabbar-item-icon-box,
53
+ .nut-tabbar-item-text,
51
54
  .nut-icon {
52
55
  /* #ifdef harmony*/
53
56
  color: $tabbar-active-color;
@@ -20,7 +20,6 @@ var _components = require("@tarojs/components");
20
20
  var _typings = require("../../utils/typings");
21
21
  var _index = /*#__PURE__*/ _interop_require_default._(require("../badge/index"));
22
22
  var _context = /*#__PURE__*/ _interop_require_default._(require("../tabbar/context"));
23
- var _addcolorforharmony = /*#__PURE__*/ _interop_require_default._(require("../../utils/add-color-for-harmony"));
24
23
  var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
25
24
  title: '',
26
25
  icon: null,
@@ -28,11 +27,12 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
28
27
  dot: false,
29
28
  max: 99,
30
29
  top: '0',
31
- right: '0'
30
+ right: '0',
31
+ direction: 'vertical'
32
32
  });
33
33
  var TabbarItem = function TabbarItem(props) {
34
34
  var ctx = (0, _react.useContext)(_context.default);
35
- var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, style = _ref.style, title = _ref.title, icon = _ref.icon, value = _ref.value, dot = _ref.dot, max = _ref.max, top = _ref.top, right = _ref.right, index = _ref.index, rest = (0, _object_without_properties._)(_ref, [
35
+ var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, style = _ref.style, title = _ref.title, icon = _ref.icon, value = _ref.value, dot = _ref.dot, max = _ref.max, top = _ref.top, right = _ref.right, index = _ref.index, direction = _ref.direction, onActiveClick = _ref.onActiveClick, rest = (0, _object_without_properties._)(_ref, [
36
36
  "className",
37
37
  "style",
38
38
  "title",
@@ -42,15 +42,19 @@ var TabbarItem = function TabbarItem(props) {
42
42
  "max",
43
43
  "top",
44
44
  "right",
45
- "index"
45
+ "index",
46
+ "direction",
47
+ "onActiveClick"
46
48
  ]);
47
49
  var active = index === (ctx === null || ctx === void 0 ? void 0 : ctx.selectIndex);
48
50
  var classPrefix = 'nut-tabbar-item';
49
- var tabbarItemClass = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-active"), active), className);
50
- var boxPrefix = "".concat(classPrefix, "-icon-box");
51
- var titleClass = (0, _classnames.default)(boxPrefix, "".concat(boxPrefix, "-nav"), (0, _define_property._)({}, "".concat(boxPrefix, "-large"), !icon));
51
+ var _obj;
52
+ var tabbarItemClass = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-active"), active), (0, _define_property._)(_obj, "".concat(classPrefix, "-large"), !icon || !title), _obj), className);
53
+ var renderNodeWithActive = function renderNodeWithActive(node) {
54
+ return node && typeof node === 'function' ? node(active) : node;
55
+ };
52
56
  var badgeProps = {
53
- value: value,
57
+ value: renderNodeWithActive(value),
54
58
  dot: dot,
55
59
  max: max,
56
60
  top: top,
@@ -59,11 +63,33 @@ var TabbarItem = function TabbarItem(props) {
59
63
  };
60
64
  var renderTitleText = function renderTitleText() {
61
65
  return title && /*#__PURE__*/ _react.default.createElement(_components.View, {
62
- className: titleClass,
66
+ className: "".concat(classPrefix, "-text"),
63
67
  style: {
64
68
  color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
65
69
  }
66
- }, title);
70
+ }, renderNodeWithActive(title));
71
+ };
72
+ var renderTitle = function renderTitle() {
73
+ return /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread._)({
74
+ size: "normal"
75
+ }, badgeProps), renderTitleText());
76
+ };
77
+ var renderIcon = function renderIcon() {
78
+ var distIcon = renderNodeWithActive(icon);
79
+ // 鸿蒙差异处理,需要手动给icon一个color
80
+ return /*#__PURE__*/ _react.default.isValidElement(distIcon) ? /*#__PURE__*/ _react.default.cloneElement(distIcon, (0, _object_spread_props._)((0, _object_spread._)({}, distIcon.props), {
81
+ color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
82
+ })) : null;
83
+ };
84
+ var renderIconAndTitle = function renderIconAndTitle() {
85
+ return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread_props._)((0, _object_spread._)({
86
+ size: "normal"
87
+ }, badgeProps), {
88
+ top: 3
89
+ }), renderIcon()), renderTitleText());
90
+ };
91
+ var renderDualItem = function renderDualItem() {
92
+ return dot ? null : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderIcon(), renderTitleText(), /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps));
67
93
  };
68
94
  return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
69
95
  className: tabbarItemClass,
@@ -71,9 +97,7 @@ var TabbarItem = function TabbarItem(props) {
71
97
  color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
72
98
  }, style),
73
99
  onClick: function onClick() {
74
- return ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index);
100
+ return active ? onActiveClick === null || onActiveClick === void 0 ? void 0 : onActiveClick() : ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index);
75
101
  }
76
- }, rest), icon ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement(_components.View, {
77
- className: boxPrefix
78
- }, (0, _addcolorforharmony.default)(icon, active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor))), renderTitleText()) : /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, renderTitleText()));
102
+ }, rest), direction === 'horizontal' && !dot ? renderDualItem() : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, icon && renderIconAndTitle(), !icon && renderTitle()));
79
103
  };
@@ -11,4 +11,5 @@ export interface BaseBadge extends BaseProps {
11
11
  right: SimpleValue;
12
12
  fill: BadgeFill;
13
13
  size: BadgeDotSize;
14
+ disabled: boolean;
14
15
  }
@@ -1,6 +1,6 @@
1
1
  import { BaseProps } from '../../base/props';
2
2
  import { UIType } from '../../base/atoms';
3
- export type IndicatorType = 'anchor' | 'slide';
3
+ export type IndicatorType = 'anchor' | 'slide' | 'dualScreen';
4
4
  export type IndicatorColor = Extract<UIType, 'primary' | 'default'>;
5
5
  export interface BaseIndicator extends BaseProps {
6
6
  total: number;
@@ -1,9 +1,14 @@
1
+ import { PositionY } from "../../base/atoms";
1
2
  import { BaseProps } from '../../base/props';
2
3
  export interface BaseNotify extends BaseProps {
3
4
  id: string;
5
+ distance: number;
6
+ navHeight: number;
7
+ closeable: boolean;
8
+ leftIcon: React.ReactNode;
9
+ rightIcon: React.ReactNode;
10
+ position: PositionY;
4
11
  duration: number;
5
- type: string;
6
- position: string;
7
12
  onClick: () => void;
8
13
  onClose: () => void;
9
14
  }
@@ -1,10 +1,13 @@
1
- import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
2
- import { ITouchEvent } from '@tarojs/components';
1
+ import { BaseEventOrig, ITouchEvent, InputProps } from '@tarojs/components';
3
2
  import { BaseSearchBar } from './base';
3
+ type inputEventDetail = InputProps.inputEventDetail;
4
+ type inputForceEventDetail = InputProps.inputForceEventDetail;
5
+ type inputValueEventDetail = InputProps.inputValueEventDetail;
4
6
  export interface TaroSearchBarProps extends Omit<BaseSearchBar, 'onChange' | 'onFocus' | 'onBlur' | 'onClear' | 'onInputClick'> {
5
- onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
6
- onFocus?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
7
- onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void;
8
- onClear?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
9
- onInputClick?: (event: MouseEvent<HTMLInputElement>) => void;
7
+ onChange?: (value: string, event?: BaseEventOrig<inputEventDetail>) => void;
8
+ onFocus?: (value: string, event: BaseEventOrig<inputForceEventDetail>) => void;
9
+ onBlur?: (value: string, event: BaseEventOrig<inputValueEventDetail>) => void;
10
+ onClear?: (event: ITouchEvent) => void;
11
+ onInputClick?: (event: ITouchEvent) => void;
10
12
  }
13
+ export {};
@@ -1,11 +1,13 @@
1
1
  import { BaseProps } from '../../base/props';
2
+ import { SimpleValue, UIRound, UISize } from '../../base/atoms';
2
3
  export type avatarShape = 'round' | 'square';
3
4
  export interface BaseSkeleton extends BaseProps {
4
- animated: boolean;
5
5
  rows: number;
6
- title: boolean;
7
- avatar: boolean;
8
- avatarSize: string;
6
+ size: Extract<UISize, 'small' | 'normal' | 'large'>;
7
+ width?: SimpleValue;
8
+ height?: SimpleValue;
9
+ shape: UIRound | 'circle';
10
+ animated: boolean;
11
+ duration: number;
9
12
  visible: boolean;
10
- avatarShape: avatarShape;
11
13
  }
@@ -1,10 +1,11 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { BaseProps } from '../../base/props';
3
- export interface BaseSwitch<EVENT = any> extends BaseProps {
3
+ export interface BaseSwitch extends BaseProps {
4
4
  checked: boolean;
5
5
  defaultChecked: boolean;
6
6
  disabled: boolean;
7
7
  activeText: ReactNode;
8
8
  inactiveText: ReactNode;
9
- onChange: (val: boolean, event: EVENT) => void;
9
+ loadingIcon: ReactNode;
10
+ onChange: (val: boolean) => void;
10
11
  }
@@ -1,3 +1,3 @@
1
1
  import { BaseSwitch } from '../switch/base';
2
- export interface WebSwitchProps extends BaseSwitch<React.MouseEvent> {
2
+ export interface WebSwitchProps extends BaseSwitch {
3
3
  }