@nutui/nutui-react-taro 3.0.5 → 3.0.7

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 (204) hide show
  1. package/CHANGELOG.md +59 -1
  2. package/dist/cjs/packages/actionsheet/style/style.css +4 -4
  3. package/dist/cjs/packages/address/style/style.css +4 -4
  4. package/dist/cjs/packages/audio/style/style.css +4 -16
  5. package/dist/cjs/packages/badge/badge.js +4 -3
  6. package/dist/cjs/packages/badge/style/badge.scss +4 -0
  7. package/dist/cjs/packages/badge/style/style.css +9 -6
  8. package/dist/cjs/packages/badge/style/style.harmony.css +3 -0
  9. package/dist/cjs/packages/button/style/button.scss +4 -20
  10. package/dist/cjs/packages/button/style/style.css +4 -16
  11. package/dist/cjs/packages/button/style/style.harmony.css +2 -14
  12. package/dist/cjs/packages/calendar/style/style.css +4 -4
  13. package/dist/cjs/packages/cascader/style/style.css +4 -4
  14. package/dist/cjs/packages/collapse/style/style.css +22 -7
  15. package/dist/cjs/packages/collapseitem/collapseitem.js +63 -77
  16. package/dist/cjs/packages/collapseitem/style/collapseitem.scss +22 -5
  17. package/dist/cjs/packages/collapseitem/style/style.css +22 -7
  18. package/dist/cjs/packages/collapseitem/style/style.harmony.css +22 -7
  19. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  20. package/dist/cjs/packages/datepicker/style/style.css +7 -4
  21. package/dist/cjs/packages/datepickerview/style/style.css +3 -0
  22. package/dist/cjs/packages/dialog/content.d.ts +11 -3
  23. package/dist/cjs/packages/dialog/content.js +4 -4
  24. package/dist/cjs/packages/dialog/dialog.d.ts +39 -4
  25. package/dist/cjs/packages/dialog/dialog.js +14 -13
  26. package/dist/cjs/packages/dialog/index.d.ts +1 -1
  27. package/dist/cjs/packages/dialog/style/style.css +4 -16
  28. package/dist/cjs/packages/empty/style/style.css +4 -16
  29. package/dist/cjs/packages/fixednav/style/style.css +9 -6
  30. package/dist/cjs/packages/imagepreview/style/style.css +4 -4
  31. package/dist/cjs/packages/indicator/indicator.js +1 -1
  32. package/dist/cjs/packages/lottie/index.js +5 -5
  33. package/dist/cjs/packages/lottie/{mp.js → lottiemp.js} +1 -1
  34. package/dist/cjs/packages/notify/notify.js +44 -13
  35. package/dist/cjs/packages/notify/style/notify.scss +39 -36
  36. package/dist/cjs/packages/notify/style/style.css +36 -31
  37. package/dist/cjs/packages/notify/style/style.harmony.css +36 -31
  38. package/dist/cjs/packages/numberkeyboard/style/style.css +4 -4
  39. package/dist/cjs/packages/picker/style/style.css +7 -4
  40. package/dist/cjs/packages/pickerview/pickerroller.js +7 -2
  41. package/dist/cjs/packages/pickerview/style/pickerview.scss +3 -0
  42. package/dist/cjs/packages/pickerview/style/style.css +3 -0
  43. package/dist/cjs/packages/pickerview/style/style.harmony.css +3 -0
  44. package/dist/cjs/packages/popover/popover.d.ts +0 -7
  45. package/dist/cjs/packages/popover/popover.js +114 -141
  46. package/dist/cjs/packages/popover/style/popover.scss +48 -51
  47. package/dist/cjs/packages/popover/style/style.css +64 -70
  48. package/dist/cjs/packages/popover/style/style.harmony.css +64 -60
  49. package/dist/cjs/packages/popup/style/popup.scss +4 -4
  50. package/dist/cjs/packages/popup/style/style.css +4 -4
  51. package/dist/cjs/packages/popup/style/style.harmony.css +4 -4
  52. package/dist/cjs/packages/resultpage/style/style.css +4 -16
  53. package/dist/cjs/packages/searchbar/searchbar.js +8 -2
  54. package/dist/cjs/packages/shortpassword/style/style.css +4 -4
  55. package/dist/cjs/packages/skeleton/skeleton.js +63 -52
  56. package/dist/cjs/packages/skeleton/style/index.js +0 -1
  57. package/dist/cjs/packages/skeleton/style/skeleton.scss +40 -46
  58. package/dist/cjs/packages/skeleton/style/style.css +32 -175
  59. package/dist/cjs/packages/skeleton/style/style.harmony.css +32 -42
  60. package/dist/cjs/packages/switch/style/style.css +5 -0
  61. package/dist/cjs/packages/switch/style/style.harmony.css +5 -0
  62. package/dist/cjs/packages/switch/style/switch.scss +5 -0
  63. package/dist/cjs/packages/switch/switch.js +22 -11
  64. package/dist/cjs/packages/tabbar/style/style.css +54 -45
  65. package/dist/cjs/packages/tabbar/style/style.harmony.css +24 -18
  66. package/dist/cjs/packages/tabbar/style/tabbar.scss +28 -19
  67. package/dist/cjs/packages/tabbar/tabbar.js +28 -10
  68. package/dist/cjs/packages/tabbaritem/style/style.css +30 -27
  69. package/dist/cjs/packages/tabbaritem/style/style.harmony.css +21 -21
  70. package/dist/cjs/packages/tabbaritem/style/tabbaritem.scss +32 -29
  71. package/dist/cjs/packages/tabbaritem/tabbaritem.js +38 -14
  72. package/dist/cjs/packages/tabpane/tabpane.js +2 -2
  73. package/dist/cjs/packages/timeselect/style/style.css +4 -4
  74. package/dist/cjs/packages/tour/style/style.css +64 -70
  75. package/dist/cjs/packages/tour/tour.js +3 -4
  76. package/dist/cjs/types/spec/badge/base.d.ts +1 -0
  77. package/dist/cjs/types/spec/dialog/base.d.ts +50 -1
  78. package/dist/cjs/types/spec/dialog/base.js +7 -0
  79. package/dist/cjs/types/spec/dialog/h5.d.ts +4 -1
  80. package/dist/cjs/types/spec/dialog/taro.d.ts +8 -2
  81. package/dist/cjs/types/spec/indicator/base.d.ts +1 -1
  82. package/dist/cjs/types/spec/notify/base.d.ts +7 -2
  83. package/dist/cjs/types/spec/popover/base.d.ts +7 -0
  84. package/dist/cjs/types/spec/searchbar/taro.d.ts +10 -7
  85. package/dist/cjs/types/spec/skeleton/base.d.ts +7 -5
  86. package/dist/cjs/types/spec/switch/base.d.ts +3 -2
  87. package/dist/cjs/types/spec/switch/h5.d.ts +1 -1
  88. package/dist/cjs/types/spec/switch/taro.d.ts +1 -4
  89. package/dist/cjs/types/spec/tabbar/base.d.ts +7 -4
  90. package/dist/cjs/utils/get-rect-by-taro.js +10 -0
  91. package/dist/cjs/utils/lru.d.ts +8 -0
  92. package/dist/cjs/utils/lru.js +58 -0
  93. package/dist/es/packages/actionsheet/style/style.css +4 -4
  94. package/dist/es/packages/address/style/style.css +4 -4
  95. package/dist/es/packages/audio/style/style.css +4 -16
  96. package/dist/es/packages/badge/badge.js +4 -3
  97. package/dist/es/packages/badge/style/badge.scss +4 -0
  98. package/dist/es/packages/badge/style/style.css +9 -6
  99. package/dist/es/packages/badge/style/style.harmony.css +3 -0
  100. package/dist/es/packages/button/style/button.scss +4 -20
  101. package/dist/es/packages/button/style/style.css +4 -16
  102. package/dist/es/packages/button/style/style.harmony.css +2 -14
  103. package/dist/es/packages/calendar/style/style.css +4 -4
  104. package/dist/es/packages/cascader/style/style.css +4 -4
  105. package/dist/es/packages/collapse/style/style.css +22 -7
  106. package/dist/es/packages/collapseitem/collapseitem.js +65 -79
  107. package/dist/es/packages/collapseitem/style/collapseitem.scss +22 -5
  108. package/dist/es/packages/collapseitem/style/style.css +22 -7
  109. package/dist/es/packages/collapseitem/style/style.harmony.css +22 -7
  110. package/dist/es/packages/configprovider/types.d.ts +1 -1
  111. package/dist/es/packages/datepicker/style/style.css +7 -4
  112. package/dist/es/packages/datepickerview/style/style.css +3 -0
  113. package/dist/es/packages/dialog/content.d.ts +11 -3
  114. package/dist/es/packages/dialog/content.js +4 -4
  115. package/dist/es/packages/dialog/dialog.d.ts +39 -4
  116. package/dist/es/packages/dialog/dialog.js +14 -13
  117. package/dist/es/packages/dialog/index.d.ts +1 -1
  118. package/dist/es/packages/dialog/style/style.css +4 -16
  119. package/dist/es/packages/empty/style/style.css +4 -16
  120. package/dist/es/packages/fixednav/style/style.css +9 -6
  121. package/dist/es/packages/imagepreview/style/style.css +4 -4
  122. package/dist/es/packages/indicator/indicator.js +1 -1
  123. package/dist/es/packages/lottie/index.js +3 -3
  124. package/dist/es/packages/lottie/{mp.js → lottiemp.js} +1 -1
  125. package/dist/es/packages/notify/notify.js +45 -14
  126. package/dist/es/packages/notify/style/notify.scss +39 -36
  127. package/dist/es/packages/notify/style/style.css +36 -31
  128. package/dist/es/packages/notify/style/style.harmony.css +36 -31
  129. package/dist/es/packages/numberkeyboard/style/style.css +4 -4
  130. package/dist/es/packages/picker/style/style.css +7 -4
  131. package/dist/es/packages/pickerview/pickerroller.js +7 -2
  132. package/dist/es/packages/pickerview/style/pickerview.scss +3 -0
  133. package/dist/es/packages/pickerview/style/style.css +3 -0
  134. package/dist/es/packages/pickerview/style/style.harmony.css +3 -0
  135. package/dist/es/packages/popover/popover.d.ts +0 -7
  136. package/dist/es/packages/popover/popover.js +115 -142
  137. package/dist/es/packages/popover/style/popover.scss +48 -51
  138. package/dist/es/packages/popover/style/style.css +64 -70
  139. package/dist/es/packages/popover/style/style.harmony.css +64 -60
  140. package/dist/es/packages/popup/style/popup.scss +4 -4
  141. package/dist/es/packages/popup/style/style.css +4 -4
  142. package/dist/es/packages/popup/style/style.harmony.css +4 -4
  143. package/dist/es/packages/resultpage/style/style.css +4 -16
  144. package/dist/es/packages/searchbar/searchbar.js +7 -2
  145. package/dist/es/packages/shortpassword/style/style.css +4 -4
  146. package/dist/es/packages/skeleton/skeleton.js +62 -52
  147. package/dist/es/packages/skeleton/style/index.js +0 -1
  148. package/dist/es/packages/skeleton/style/skeleton.scss +40 -46
  149. package/dist/es/packages/skeleton/style/style.css +32 -175
  150. package/dist/es/packages/skeleton/style/style.harmony.css +32 -42
  151. package/dist/es/packages/switch/style/style.css +5 -0
  152. package/dist/es/packages/switch/style/style.harmony.css +5 -0
  153. package/dist/es/packages/switch/style/switch.scss +5 -0
  154. package/dist/es/packages/switch/switch.js +21 -11
  155. package/dist/es/packages/tabbar/style/style.css +54 -45
  156. package/dist/es/packages/tabbar/style/style.harmony.css +24 -18
  157. package/dist/es/packages/tabbar/style/tabbar.scss +28 -19
  158. package/dist/es/packages/tabbar/tabbar.js +27 -10
  159. package/dist/es/packages/tabbaritem/style/style.css +30 -27
  160. package/dist/es/packages/tabbaritem/style/style.harmony.css +21 -21
  161. package/dist/es/packages/tabbaritem/style/tabbaritem.scss +32 -29
  162. package/dist/es/packages/tabbaritem/tabbaritem.js +38 -14
  163. package/dist/es/packages/tabpane/tabpane.js +2 -2
  164. package/dist/es/packages/timeselect/style/style.css +4 -4
  165. package/dist/es/packages/tour/style/style.css +64 -70
  166. package/dist/es/packages/tour/tour.js +3 -4
  167. package/dist/es/types/spec/badge/base.d.ts +4 -0
  168. package/dist/es/types/spec/dialog/base.d.ts +83 -1
  169. package/dist/es/types/spec/dialog/base.js +1 -1
  170. package/dist/es/types/spec/dialog/h5.d.ts +4 -1
  171. package/dist/es/types/spec/dialog/taro.d.ts +8 -2
  172. package/dist/es/types/spec/indicator/base.d.ts +1 -1
  173. package/dist/es/types/spec/notify/base.d.ts +22 -5
  174. package/dist/es/types/spec/popover/base.d.ts +7 -0
  175. package/dist/es/types/spec/searchbar/taro.d.ts +10 -7
  176. package/dist/es/types/spec/skeleton/base.d.ts +19 -14
  177. package/dist/es/types/spec/switch/base.d.ts +6 -2
  178. package/dist/es/types/spec/switch/h5.d.ts +1 -1
  179. package/dist/es/types/spec/switch/taro.d.ts +1 -4
  180. package/dist/es/types/spec/tabbar/base.d.ts +7 -4
  181. package/dist/es/utils/get-rect-by-taro.js +9 -0
  182. package/dist/es/utils/lru.d.ts +8 -0
  183. package/dist/es/utils/lru.js +49 -0
  184. package/dist/nutui.react.umd.js +683 -552
  185. package/dist/style.css +1 -1
  186. package/dist/style.scss +46 -46
  187. package/dist/styles/theme-jmapp.scss +1 -0
  188. package/dist/styles/themes/jmapp.css +1 -1
  189. package/dist/styles/variables-jmapp.scss +237 -50
  190. package/dist/styles/variables-jrkf.scss +25 -14
  191. package/dist/styles/variables.scss +38 -51
  192. package/package.json +1 -1
  193. package/dist/cjs/packages/dialog/types.d.ts +0 -57
  194. package/dist/cjs/packages/dialog/types.js +0 -4
  195. package/dist/cjs/packages/dialog/types.taro.d.ts +0 -10
  196. package/dist/es/packages/dialog/types.d.ts +0 -57
  197. package/dist/es/packages/dialog/types.js +0 -1
  198. package/dist/es/packages/dialog/types.taro.d.ts +0 -10
  199. /package/dist/cjs/packages/lottie/{mp.d.ts → lottiemp.d.ts} +0 -0
  200. /package/dist/cjs/packages/lottie/{web.d.ts → lottieweb.d.ts} +0 -0
  201. /package/dist/cjs/packages/lottie/{web.js → lottieweb.js} +0 -0
  202. /package/dist/es/packages/lottie/{mp.d.ts → lottiemp.d.ts} +0 -0
  203. /package/dist/es/packages/lottie/{web.d.ts → lottieweb.d.ts} +0 -0
  204. /package/dist/es/packages/lottie/{web.js → lottieweb.js} +0 -0
@@ -94,18 +94,6 @@
94
94
  .nut-button-round {
95
95
  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
96
96
  }
97
- .nut-button-round-xlarge {
98
- border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
99
- }
100
- .nut-button-round-large {
101
- border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
102
- }
103
- .nut-button-round-small {
104
- border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
105
- }
106
- .nut-button-round-mini {
107
- border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
108
- }
109
97
  .nut-button-default {
110
98
  padding: var(--nutui-button-default-padding, 0px 12px);
111
99
  border-style: solid;
@@ -131,7 +119,7 @@
131
119
  height: var(--nutui-button-xlarge-height, 48px);
132
120
  padding: var(--nutui-button-xlarge-padding, 0px 24px);
133
121
  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
134
- border-radius: var(--nutui-radius-base, 8px);
122
+ border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
135
123
  }
136
124
  .nut-button-xlarge .nut-button-text {
137
125
  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -151,7 +139,7 @@
151
139
  height: var(--nutui-button-large-height, 40px);
152
140
  padding: var(--nutui-button-large-padding, 0px 16px);
153
141
  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
154
- border-radius: var(--nutui-radius-s, 6px);
142
+ border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
155
143
  }
156
144
  .nut-button-large .nut-button-text {
157
145
  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -171,7 +159,7 @@
171
159
  height: var(--nutui-button-small-height, 28px);
172
160
  padding: var(--nutui-button-small-padding, 0px 8px);
173
161
  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
174
- border-radius: var(--nutui-radius-xs, 4px);
162
+ border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
175
163
  }
176
164
  .nut-button-small .nut-icon {
177
165
  font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -185,7 +173,7 @@
185
173
  height: var(--nutui-button-mini-height, 24px);
186
174
  padding: var(--nutui-button-mini-padding, 0px 8px);
187
175
  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
188
- border-radius: var(--nutui-radius-xs, 4px);
176
+ border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
189
177
  }
190
178
  .nut-button-mini .nut-icon {
191
179
  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
@@ -8,10 +8,12 @@ Object.defineProperty(exports, "SearchBar", {
8
8
  return SearchBar;
9
9
  }
10
10
  });
11
+ var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
11
12
  var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
13
  var _object_spread = require("@swc/helpers/_/_object_spread");
13
14
  var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
14
15
  var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
16
+ var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
15
17
  var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
16
18
  var _components = require("@tarojs/components");
17
19
  var _iconsreacttaro = require("@nutui/icons-react-taro");
@@ -69,7 +71,9 @@ var SearchBar = function SearchBar(props) {
69
71
  outerValue
70
72
  ]);
71
73
  (0, _react.useEffect)(function() {
72
- autoFocus && forceFocus();
74
+ if (_taro.default.getEnv() === 'WEB') {
75
+ autoFocus && forceFocus();
76
+ }
73
77
  }, [
74
78
  autoFocus
75
79
  ]);
@@ -77,10 +81,12 @@ var SearchBar = function SearchBar(props) {
77
81
  return /*#__PURE__*/ _react.default.createElement(_components.Input, {
78
82
  className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
79
83
  ref: searchRef,
80
- value: value || '',
84
+ style: style,
85
+ value: (value || '').toString(),
81
86
  placeholder: placeholder || locale.placeholder,
82
87
  disabled: disabled || readOnly,
83
88
  maxlength: maxLength,
89
+ autoFocus: autoFocus,
84
90
  onInput: onInput,
85
91
  onFocus: focus,
86
92
  onBlur: blur,
@@ -60,7 +60,7 @@
60
60
 
61
61
  .nut-popup {
62
62
  position: fixed;
63
- min-height: 46%;
63
+ min-height: 26%;
64
64
  max-height: 100%;
65
65
  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
66
66
  -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
198
198
  transform: scale(0.8);
199
199
  }
200
200
  }
201
- .nut-popup-slide-default-enter-active {
201
+ .nut-popup-slide-none-enter-active {
202
202
  animation-fill-mode: both;
203
203
  animation-name: popup-scale-fade-in;
204
204
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
205
205
  }
206
- .nut-popup-slide-default-exit-active {
206
+ .nut-popup-slide-none-exit-active {
207
207
  animation-fill-mode: both;
208
208
  animation-name: popup-scale-fade-out;
209
209
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
330
330
  animation-name: popup-slide-left-exit;
331
331
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
332
332
  }
333
- .nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
333
+ .nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
334
334
  display: none;
335
335
  }
336
336
  .nut-popup .nut-overflow-hidden {
@@ -9,83 +9,94 @@ Object.defineProperty(exports, "Skeleton", {
9
9
  }
10
10
  });
11
11
  var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
12
- var _define_property = require("@swc/helpers/_/_define_property");
12
+ var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
13
  var _object_spread = require("@swc/helpers/_/_object_spread");
14
14
  var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
15
15
  var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
16
- var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
17
- var _components = require("@tarojs/components");
16
+ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
17
+ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
18
18
  var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
19
- var _index = /*#__PURE__*/ _interop_require_default._(require("../avatar/index"));
19
+ var _components = require("@tarojs/components");
20
20
  var _typings = require("../../utils/typings");
21
- var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
22
21
  var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
23
22
  rows: 1,
24
- animated: false,
25
- title: false,
26
- avatar: false,
27
- avatarSize: '50px',
23
+ animated: true,
28
24
  visible: false,
29
- avatarShape: 'round'
25
+ size: 'normal',
26
+ shape: 'round',
27
+ duration: 0.6,
28
+ inline: false
30
29
  });
31
30
  var Skeleton = function Skeleton(props) {
32
- var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, animated = _ref.animated, rows = _ref.rows, title = _ref.title, avatar = _ref.avatar, avatarSize = _ref.avatarSize, visible = _ref.visible, children = _ref.children, avatarShape = _ref.avatarShape, rest = (0, _object_without_properties._)(_ref, [
31
+ var shapeStyle = function shapeStyle() {
32
+ if (shape === 'circle') return {
33
+ borderRadius: '50%'
34
+ };
35
+ if (shape === 'square') return {
36
+ borderRadius: '0'
37
+ };
38
+ return {};
39
+ };
40
+ var durationStyle = function durationStyle() {
41
+ if (typeof duration !== 'undefined') return {
42
+ animationDuration: "".concat(duration, "s")
43
+ };
44
+ return {};
45
+ };
46
+ var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, width = _ref.width, height = _ref.height, shape = _ref.shape, animated = _ref.animated, rows = _ref.rows, visible = _ref.visible, size = _ref.size, duration = _ref.duration, children = _ref.children, rest = (0, _object_without_properties._)(_ref, [
33
47
  "className",
48
+ "width",
49
+ "height",
50
+ "shape",
34
51
  "animated",
35
52
  "rows",
36
- "title",
37
- "avatar",
38
- "avatarSize",
39
53
  "visible",
40
- "children",
41
- "avatarShape"
54
+ "size",
55
+ "duration",
56
+ "children"
42
57
  ]);
43
58
  var classPrefix = 'nut-skeleton';
44
59
  var classes = (0, _classnames.default)(classPrefix, className);
45
- var _obj;
46
- var avatarClass = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "nut-avatar", true), (0, _define_property._)(_obj, "nut-skeleton-content-avatar", true), (0, _define_property._)(_obj, "avatar-".concat(avatarShape), avatarShape), _obj));
47
- var repeatLines = function repeatLines(num) {
60
+ var repeatCount = function repeatCount(num) {
48
61
  return Array.from({
49
62
  length: num
50
63
  }, function(v, i) {
51
64
  return i;
52
65
  });
53
66
  };
54
- var getStyle = function getStyle() {
55
- if (avatarSize) {
56
- return {
57
- width: (0, _pxtransform.default)(parseInt(avatarSize)),
58
- height: (0, _pxtransform.default)(parseInt(avatarSize))
59
- };
60
- }
61
- return {
62
- width: (0, _pxtransform.default)(50),
63
- height: (0, _pxtransform.default)(50)
64
- };
67
+ var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), animate = _useState[0], setAnimate = _useState[1];
68
+ var playAnimation = function playAnimation() {
69
+ setAnimate(false);
70
+ setTimeout(function() {
71
+ setAnimate(true);
72
+ }, 10);
65
73
  };
66
- return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, visible ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, children) : /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
74
+ (0, _react.useEffect)(function() {
75
+ if (!animated) return;
76
+ playAnimation();
77
+ // 每隔 3 秒播放一次动画
78
+ var intervalId = setInterval(playAnimation, 1000 + duration * 1000) // xs 动画 + 1s 间隔
79
+ ;
80
+ // 清理定时器
81
+ return function() {
82
+ return clearInterval(intervalId);
83
+ };
84
+ }, []);
85
+ return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, visible ? children : /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
67
86
  className: classes
68
- }, rest), animated && /*#__PURE__*/ _react.default.createElement(_components.View, {
69
- className: "".concat(classPrefix, "-animation")
70
- }), /*#__PURE__*/ _react.default.createElement(_components.View, {
71
- className: "".concat(classPrefix, "-content")
72
- }, avatar && /*#__PURE__*/ _react.default.createElement(_index.default, {
73
- className: avatarClass,
74
- background: "rgb(239, 239, 239)",
75
- shape: avatarShape,
76
- style: getStyle(),
77
- icon: "null"
78
- }), rows === 1 ? /*#__PURE__*/ _react.default.createElement(_components.View, {
79
- className: "".concat(classPrefix, "-content-block")
80
- }) : /*#__PURE__*/ _react.default.createElement(_components.View, {
81
- className: "".concat(classPrefix, "-content-line")
82
- }, title && /*#__PURE__*/ _react.default.createElement(_components.View, {
83
- className: "".concat(classPrefix, "-content-title")
84
- }), repeatLines(rows).map(function(item, index) {
87
+ }, rest), repeatCount(rows).map(function(item, index) {
88
+ var contentClass = "".concat(classPrefix, "-content ").concat(classPrefix, "-content-").concat(size, " ").concat(classPrefix, "-content-").concat(size, "-").concat(index);
85
89
  return /*#__PURE__*/ _react.default.createElement(_components.View, {
86
- className: "".concat(classPrefix, "-content-block ").concat(index === repeatLines(rows).length - 1 ? "".concat(classPrefix, "-content-block-last-child") : ''),
87
- key: index
88
- });
89
- })))));
90
+ className: "".concat(contentClass),
91
+ key: index,
92
+ style: (0, _object_spread._)({
93
+ width: width,
94
+ height: height
95
+ }, shapeStyle())
96
+ }, animated && /*#__PURE__*/ _react.default.createElement(_components.View, {
97
+ className: "".concat(classPrefix, "-animated ").concat(animate ? "".concat(classPrefix, "-animation") : ''),
98
+ style: durationStyle()
99
+ }));
100
+ })));
90
101
  };
91
102
  Skeleton.displayName = 'NutSkeleton';
@@ -1,2 +1 @@
1
- import '../../avatar/style';
2
1
  import './skeleton.scss';
@@ -1,44 +1,29 @@
1
1
  .nut-skeleton {
2
- display: inline-block;
3
- position: relative;
4
- overflow: hidden;
5
- vertical-align: middle;
6
- width: 100%;
2
+ line-height: 0px;
3
+ font-size: 0px;
7
4
 
8
5
  &-content {
9
- display: flex;
10
- flex-direction: row;
6
+ position: relative;
7
+ display: inline-flex;
8
+ width: $skeleton-line-width;
9
+ background: $skeleton-background;
10
+ border-radius: $skeleton-line-border-radius;
11
+ overflow: hidden;
11
12
 
12
- &-avatar {
13
- margin-right: 20px;
14
- background: $skeleton-background !important;
13
+ &-normal {
14
+ height: $skeleton-line-normal-height;
15
15
  }
16
16
 
17
- &-block {
18
- width: $skeleton-line-width;
19
- height: $skeleton-line-height;
20
- background: $skeleton-background;
21
- margin-top: 10px;
22
- border-radius: $skeleton-line-border-radius;
17
+ &-large {
18
+ height: $skeleton-line-large-height;
23
19
  }
24
20
 
25
- &-line {
26
- width: 100%;
27
- display: flex;
28
- flex-direction: column;
29
- .nut-skeleton-content-block:last-child {
30
- width: 70%;
31
- }
21
+ &-small {
22
+ height: $skeleton-line-small-height;
23
+ margin-top: 8px;
32
24
  }
33
-
34
- &-title {
35
- width: 30%;
36
- height: $skeleton-line-height;
37
- background: $skeleton-background;
38
- }
39
-
40
- &-block-last-child {
41
- width: 55%;
25
+ &-small-0 {
26
+ margin-top: 0;
42
27
  }
43
28
  }
44
29
 
@@ -49,41 +34,50 @@
49
34
  width: 100%;
50
35
  height: 100%;
51
36
  z-index: 1;
52
- animation: nut-skeleton 2s ease-in-out 0s infinite;
37
+ background: linear-gradient(
38
+ 90deg,
39
+ rgba(0, 0, 0, 0) 0%,
40
+ rgba(0, 0, 0, 0.02) 50%,
41
+ rgba(0, 0, 0, 0) 100%
42
+ );
43
+ animation-name: nut-skeleton;
44
+ animation-delay: 0s;
45
+ animation-duration: 0.6s;
46
+ animation-direction: normal;
47
+ animation-fill-mode: both;
48
+ animation-play-state: running;
49
+ animation-iteration-count: 1;
50
+ animation-timing-function: linear;
53
51
  }
54
52
 
55
53
  @keyframes nut-skeleton {
56
- 0% {
57
- background-position-x: -500px;
54
+ from {
55
+ transform: translateX(-100%);
58
56
  }
59
57
 
60
58
  to {
61
- background-position-x: calc(500px + 100%);
59
+ transform: translateX(100%);
62
60
  }
63
61
  }
64
62
  }
65
63
 
66
64
  [dir='rtl'] .nut-skeleton,
67
65
  .nut-rtl .nut-skeleton {
68
- &-content {
69
- .nut-avatar {
70
- margin-right: 0;
71
- margin-left: 20px;
72
- }
73
- }
74
66
  &-animation {
75
67
  left: auto;
76
68
  right: 0;
77
- animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
69
+ animation: nut-skeleton-rtl 2s linear 0s infinite;
78
70
  }
79
71
 
80
72
  @keyframes nut-skeleton-rtl {
81
- 0% {
82
- background-position-x: calc(500px + 100%);
73
+ from {
74
+ //background-position: -200% 0;
75
+ transform: translateX(100%);
83
76
  }
84
77
 
85
78
  to {
86
- background-position-x: -500px;
79
+ //background-position: 200% 0;
80
+ transform: translateX(-100%);
87
81
  }
88
82
  }
89
83
  }
@@ -2,176 +2,30 @@
2
2
  /* #endif */
3
3
  /* #ifndef harmony */
4
4
  /* #endif */
5
- .nut-image {
6
- display: block;
7
- position: relative;
8
- }
9
- .nut-image-default {
10
- display: block;
11
- width: 100%;
12
- height: 100%;
13
- }
14
- .nut-image.nut-image-round {
15
- border-radius: 50%;
16
- overflow: hidden;
17
- }
18
- .nut-image-loading {
19
- width: 100%;
20
- height: 100%;
21
- position: absolute;
22
- top: 0;
23
- left: 0;
24
- display: flex;
25
- flex-direction: column;
26
- align-items: center;
27
- justify-content: center;
28
- background: var(--nutui-color-background, #f2f3f5);
29
- background-size: 100% 100%;
30
- }
31
- .nut-image-error {
32
- width: 100%;
33
- height: 100%;
34
- position: absolute;
35
- top: 0;
36
- left: 0;
37
- display: flex;
38
- flex-direction: column;
39
- align-items: center;
40
- justify-content: center;
41
- background: var(--nutui-color-background, #f2f3f5);
42
- background-size: 100% 100%;
43
- }
44
-
45
- [dir=rtl] .nut-image .nut-img-loading,
46
- .nut-rtl .nut-image .nut-img-loading {
47
- left: auto;
48
- right: 0;
49
- }
50
- [dir=rtl] .nut-image .nut-img-error,
51
- .nut-rtl .nut-image .nut-img-error {
52
- left: auto;
53
- right: 0;
54
- }
55
-
56
- .nut-avatar-group {
57
- display: flex;
58
- flex-direction: row;
59
- flex: 0 0 auto;
60
- }
61
- .nut-avatar-group-avatar,
62
- .nut-avatar-group .nut-avatar {
63
- border: 1px solid #fff;
64
- margin-left: -8px;
65
- }
66
- .nut-avatar-group-avatar:not(:first-of-type),
67
- .nut-avatar-group .nut-avatar:not(:first-of-type) {
68
- margin-left: -8px;
69
- }
70
-
71
- [dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
72
- .nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
73
- margin-left: 0;
74
- margin-right: -8px;
75
- }
76
-
77
- .nut-avatar {
78
- position: relative;
79
- flex: 0 0 auto;
80
- display: flex;
81
- justify-content: center;
82
- align-items: center;
83
- width: var(--nutui-avatar-normal-width, 40px);
84
- height: var(--nutui-avatar-normal-height, 40px);
85
- }
86
- .nut-avatar-round {
87
- border-radius: 999px;
88
- overflow: hidden;
89
- }
90
- .nut-avatar-square {
91
- border-radius: var(--nutui-avatar-square, 5px);
92
- }
93
- .nut-avatar-first-child {
94
- margin-left: 0;
95
- margin-right: 0;
96
- }
97
- .nut-avatar-img {
98
- width: 100%;
99
- height: 100%;
100
- flex-shrink: 0;
101
- background-size: 100% 100%;
102
- background-repeat: no-repeat;
103
- background-position: center center;
104
- }
105
- .nut-avatar-icon {
106
- background-size: 100% 100%;
107
- }
108
- .nut-avatar-text {
109
- display: flex;
110
- justify-content: center;
111
- align-items: center;
112
- }
113
- .nut-avatar-large {
114
- width: var(--nutui-avatar-large-width, 60px);
115
- height: var(--nutui-avatar-large-height, 60px);
116
- }
117
- .nut-avatar-large-img {
118
- width: var(--nutui-avatar-large-width, 60px);
119
- height: var(--nutui-avatar-large-height, 60px);
120
- }
121
- .nut-avatar-large-icon {
122
- width: var(--nutui-avatar-large-width, 60px);
123
- height: var(--nutui-avatar-large-height, 60px);
124
- }
125
- .nut-avatar-large-text {
126
- width: var(--nutui-avatar-large-width, 60px);
127
- height: var(--nutui-avatar-large-height, 60px);
128
- }
129
- .nut-avatar-small {
130
- width: var(--nutui-avatar-small-width, 32px);
131
- height: var(--nutui-avatar-small-height, 32px);
132
- }
133
- .nut-avatar-small-text {
134
- width: var(--nutui-avatar-small-width, 32px);
135
- height: var(--nutui-avatar-small-height, 32px);
136
- }
137
-
138
5
  .nut-skeleton {
139
- display: inline-block;
140
- position: relative;
141
- overflow: hidden;
142
- vertical-align: middle;
143
- width: 100%;
6
+ line-height: 0px;
7
+ font-size: 0px;
144
8
  }
145
9
  .nut-skeleton-content {
146
- display: flex;
147
- flex-direction: row;
148
- }
149
- .nut-skeleton-content-avatar {
150
- margin-right: 20px;
151
- background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5)) !important;
152
- }
153
- .nut-skeleton-content-block {
10
+ position: relative;
11
+ display: inline-flex;
154
12
  width: var(--nutui-skeleton-line-width, 100%);
155
- height: var(--nutui-skeleton-line-height, 15px);
156
- background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5));
157
- margin-top: 10px;
158
- border-radius: var(--nutui-skeleton-line-border-radius, 0);
13
+ background: var(--nutui-skeleton-background, var(--nutui-color-background-sunken, #f7f8fc));
14
+ border-radius: var(--nutui-skeleton-line-border-radius, var(--nutui-radius-xs, 4px));
15
+ overflow: hidden;
159
16
  }
160
- .nut-skeleton-content-line {
161
- width: 100%;
162
- display: flex;
163
- flex-direction: column;
17
+ .nut-skeleton-content-normal {
18
+ height: var(--nutui-skeleton-line-normal-height, 24px);
164
19
  }
165
- .nut-skeleton-content-line .nut-skeleton-content-block:last-child {
166
- width: 70%;
20
+ .nut-skeleton-content-large {
21
+ height: var(--nutui-skeleton-line-large-height, 32px);
167
22
  }
168
- .nut-skeleton-content-title {
169
- width: 30%;
170
- height: var(--nutui-skeleton-line-height, 15px);
171
- background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5));
23
+ .nut-skeleton-content-small {
24
+ height: var(--nutui-skeleton-line-small-height, 16px);
25
+ margin-top: 8px;
172
26
  }
173
- .nut-skeleton-content-block-last-child {
174
- width: 55%;
27
+ .nut-skeleton-content-small-0 {
28
+ margin-top: 0;
175
29
  }
176
30
  .nut-skeleton-animation {
177
31
  position: absolute;
@@ -180,33 +34,36 @@
180
34
  width: 100%;
181
35
  height: 100%;
182
36
  z-index: 1;
183
- animation: nut-skeleton 2s ease-in-out 0s infinite;
37
+ background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0) 100%);
38
+ animation-name: nut-skeleton;
39
+ animation-delay: 0s;
40
+ animation-duration: 0.6s;
41
+ animation-direction: normal;
42
+ animation-fill-mode: both;
43
+ animation-play-state: running;
44
+ animation-iteration-count: 1;
45
+ animation-timing-function: linear;
184
46
  }
185
47
  @keyframes nut-skeleton {
186
- 0% {
187
- background-position-x: -500px;
48
+ from {
49
+ transform: translateX(-100%);
188
50
  }
189
51
  to {
190
- background-position-x: calc(500px + 100%);
52
+ transform: translateX(100%);
191
53
  }
192
54
  }
193
55
 
194
- [dir=rtl] .nut-skeleton-content .nut-avatar,
195
- .nut-rtl .nut-skeleton-content .nut-avatar {
196
- margin-right: 0;
197
- margin-left: 20px;
198
- }
199
56
  [dir=rtl] .nut-skeleton-animation,
200
57
  .nut-rtl .nut-skeleton-animation {
201
58
  left: auto;
202
59
  right: 0;
203
- animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
60
+ animation: nut-skeleton-rtl 2s linear 0s infinite;
204
61
  }
205
62
  @keyframes nut-skeleton-rtl {
206
- 0% {
207
- background-position-x: calc(500px + 100%);
63
+ from {
64
+ transform: translateX(100%);
208
65
  }
209
66
  to {
210
- background-position-x: -500px;
67
+ transform: translateX(-100%);
211
68
  }
212
69
  }