@trionesdev/antd-mobile-react 0.0.2-beta.0 → 0.0.2-beta.10

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 (206) hide show
  1. package/LICENSE +21 -21
  2. package/dist/ActionSheet/ActionSheet.d.ts +25 -0
  3. package/dist/ActionSheet/ActionSheet.js +77 -0
  4. package/dist/ActionSheet/index.d.ts +1 -1
  5. package/dist/ActionSheet/index.js +1 -1
  6. package/dist/ActionSheet/style.scss +52 -0
  7. package/dist/Avatar/demo/base.js +2 -2
  8. package/dist/Avatar/demo/style.scss +6 -6
  9. package/dist/Badge/demo/base.js +2 -2
  10. package/dist/Badge/demo/base.scss +6 -6
  11. package/dist/Button/demo/base.js +2 -2
  12. package/dist/Button/style.scss +234 -231
  13. package/dist/Calendar/calendar-grid.js +2 -2
  14. package/dist/Calendar/calendar-range.js +2 -2
  15. package/dist/Calendar/calendar.js +2 -1
  16. package/dist/Calendar/style.scss +85 -85
  17. package/dist/Calendar/touchable-calendar-grid.js +9 -9
  18. package/dist/CalendarDatetimePicker/CalendarDatetimePicker.d.ts +5 -6
  19. package/dist/CalendarDatetimePicker/CalendarDatetimePicker.js +37 -132
  20. package/dist/CalendarDatetimePicker/demo/base.js +5 -21
  21. package/dist/CalendarDatetimePicker/index.d.ts +2 -2
  22. package/dist/CalendarDatetimePicker/style.scss +10 -54
  23. package/dist/CalendarDatetimePicker/types.d.ts +0 -4
  24. package/dist/CalendarDatetimePicker/types.js +1 -6
  25. package/dist/CalendarDatetimePopup/CalendarDatetimePopup.d.ts +10 -0
  26. package/dist/CalendarDatetimePopup/CalendarDatetimePopup.js +136 -0
  27. package/dist/CalendarDatetimePopup/demo/base.js +41 -0
  28. package/dist/CalendarDatetimePopup/index.d.ts +3 -0
  29. package/dist/CalendarDatetimePopup/index.js +2 -0
  30. package/dist/CalendarDatetimePopup/style.scss +54 -0
  31. package/dist/CalendarDatetimePopup/types.d.ts +5 -0
  32. package/dist/CalendarDatetimePopup/types.js +6 -0
  33. package/dist/CalendarPopup/calendar-popup.d.ts +4 -0
  34. package/dist/{CalendarPicker/calendar-picker.js → CalendarPopup/calendar-popup.js} +2 -2
  35. package/dist/CalendarPopup/calendar-range-popup.d.ts +4 -0
  36. package/dist/{CalendarPicker/calendar-range-picker.js → CalendarPopup/calendar-range-popup.js} +8 -7
  37. package/dist/{CalendarPicker → CalendarPopup}/demo/base.js +3 -3
  38. package/dist/CalendarPopup/index.d.ts +9 -0
  39. package/dist/CalendarPopup/index.js +5 -0
  40. package/dist/CalendarPopup/style.scss +31 -0
  41. package/dist/{CalendarPicker → CalendarPopup}/types.d.ts +2 -2
  42. package/dist/Card/demo/base.js +2 -2
  43. package/dist/Card/demo/base.scss +18 -18
  44. package/dist/CascaderPicker/CascaderPicker.d.ts +25 -0
  45. package/dist/CascaderPicker/CascaderPicker.js +78 -0
  46. package/dist/CascaderPicker/demo/base.js +6 -18
  47. package/dist/CascaderPicker/index.d.ts +1 -1
  48. package/dist/CascaderPicker/index.js +1 -1
  49. package/dist/CascaderPicker/style.scss +24 -0
  50. package/dist/CascaderPopup/cascader-popup.d.ts +27 -0
  51. package/dist/CascaderPopup/cascader-popup.js +90 -0
  52. package/dist/CascaderPopup/demo/base.d.ts +3 -0
  53. package/dist/CascaderPopup/demo/base.js +82 -0
  54. package/dist/CascaderPopup/index.d.ts +3 -0
  55. package/dist/CascaderPopup/index.js +2 -0
  56. package/dist/CascaderPopup/style.scss +45 -0
  57. package/dist/Cell/demo/base.js +41 -2
  58. package/dist/Checkbox/demo/base.js +11 -6
  59. package/dist/Checkbox/demo/disabled.js +2 -1
  60. package/dist/ConfigProvider/demo/base.js +2 -2
  61. package/dist/DemoBlock/index.d.ts +6 -0
  62. package/dist/DemoBlock/index.js +9 -2
  63. package/dist/DemoBlock/index.scss +20 -20
  64. package/dist/DemoDescription/index.scss +3 -3
  65. package/dist/Divider/demo/base.js +2 -2
  66. package/dist/Ellipsis/demo/base.js +2 -2
  67. package/dist/Empty/demo/base.js +2 -2
  68. package/dist/ErrorBlock/demo/base.js +2 -2
  69. package/dist/Footer/demo/base.js +2 -2
  70. package/dist/Form/FormItem/form-item-input.d.ts +15 -0
  71. package/dist/Form/FormItem/form-item-input.js +39 -0
  72. package/dist/Form/FormItem/form-item-label.d.ts +13 -0
  73. package/dist/Form/FormItem/form-item-label.js +27 -0
  74. package/dist/Form/FormItem/form-item.d.ts +22 -0
  75. package/dist/Form/FormItem/form-item.js +73 -0
  76. package/dist/Form/FormItem/index.d.ts +5 -0
  77. package/dist/Form/FormItem/index.js +3 -0
  78. package/dist/Form/demo/input.js +1 -1
  79. package/dist/Form/index.d.ts +8 -1
  80. package/dist/Form/index.js +5 -1
  81. package/dist/Form/style.scss +67 -0
  82. package/dist/Grid/demo/base.js +2 -2
  83. package/dist/Grid/demo/base.scss +7 -7
  84. package/dist/Icon/demo/base.js +4 -4
  85. package/dist/Image/demo/base.js +2 -2
  86. package/dist/Image/demo/base.scss +4 -4
  87. package/dist/Image/style.scss +30 -30
  88. package/dist/ImagesPreview/ImagesPreview.js +2 -2
  89. package/dist/ImagesPreview/style.scss +34 -34
  90. package/dist/ImagesWall/CameraModal.js +2 -2
  91. package/dist/ImagesWall/ImagesWall.js +1 -1
  92. package/dist/ImagesWall/style.scss +70 -70
  93. package/dist/Input/base-input.d.ts +13 -0
  94. package/dist/Input/base-input.js +41 -0
  95. package/dist/Input/demo/base.js +89 -13
  96. package/dist/Input/index.d.ts +14 -2
  97. package/dist/Input/index.js +11 -1
  98. package/dist/Input/index.scss +223 -0
  99. package/dist/Input/input-affix-wrapper.d.ts +11 -0
  100. package/dist/Input/input-affix-wrapper.js +37 -0
  101. package/dist/Input/input-opt.d.ts +16 -0
  102. package/dist/Input/input-opt.js +87 -0
  103. package/dist/Input/input-password.d.ts +7 -0
  104. package/dist/Input/input-password.js +48 -0
  105. package/dist/Input/input.d.ts +18 -0
  106. package/dist/Input/input.js +63 -0
  107. package/dist/Input/textarea.d.ts +15 -0
  108. package/dist/Input/textarea.js +51 -0
  109. package/dist/Input/types.d.ts +3 -0
  110. package/dist/Input/types.js +2 -0
  111. package/dist/NavBar/demo/base.scss +5 -5
  112. package/dist/NoticeBar/demo/base.js +2 -2
  113. package/dist/Overlay/Overlay.d.ts +16 -0
  114. package/dist/Overlay/Overlay.js +117 -0
  115. package/dist/Overlay/demo/base.d.ts +3 -0
  116. package/dist/{Mask → Overlay}/demo/base.js +14 -16
  117. package/dist/Overlay/index.d.ts +4 -0
  118. package/dist/Overlay/index.js +3 -0
  119. package/dist/Overlay/style.scss +20 -0
  120. package/dist/PageIndicator/demo/base.js +2 -2
  121. package/dist/Picker/index.d.ts +1 -1
  122. package/dist/Picker/index.js +1 -1
  123. package/dist/Picker/picker.d.ts +19 -0
  124. package/dist/Picker/picker.js +97 -0
  125. package/dist/Picker/style.scss +44 -0
  126. package/dist/PickerView/index.d.ts +2 -1
  127. package/dist/PickerView/index.js +1 -1
  128. package/dist/PickerView/picker-view-column-item.d.ts +7 -0
  129. package/dist/PickerView/picker-view-column-item.js +11 -0
  130. package/dist/PickerView/picker-view-column.d.ts +10 -0
  131. package/dist/PickerView/picker-view-column.js +117 -0
  132. package/dist/PickerView/picker-view.d.ts +12 -0
  133. package/dist/PickerView/picker-view.js +60 -0
  134. package/dist/PickerView/style.scss +72 -0
  135. package/dist/PickerView/types.d.ts +4 -0
  136. package/dist/PickerView/types.js +1 -0
  137. package/dist/Popup/demo/base.js +109 -27
  138. package/dist/Popup/index.d.ts +2 -1
  139. package/dist/Popup/index.js +2 -1
  140. package/dist/Popup/popup.d.ts +31 -0
  141. package/dist/Popup/popup.js +87 -0
  142. package/dist/Popup/style.scss +129 -0
  143. package/dist/Progress/index.d.ts +1 -1
  144. package/dist/Progress/index.js +1 -1
  145. package/dist/Radio/demo/base.js +2 -2
  146. package/dist/Radio/demo/base.scss +4 -4
  147. package/dist/Result/demo/base.js +2 -2
  148. package/dist/SafeArea/demo/base.scss +18 -18
  149. package/dist/ScrollView/index.d.ts +2 -1
  150. package/dist/ScrollView/index.js +1 -1
  151. package/dist/ScrollView/scroll-view.d.ts +4 -0
  152. package/dist/ScrollView/scroll-view.js +55 -0
  153. package/dist/ScrollView/style.scss +19 -0
  154. package/dist/ScrollView/types.d.ts +26 -0
  155. package/dist/ScrollView/types.js +1 -0
  156. package/dist/SideBar/index.d.ts +1 -1
  157. package/dist/SideBar/side-bar.js +6 -6
  158. package/dist/SideBar/style.scss +85 -85
  159. package/dist/Space/demo/base.js +2 -2
  160. package/dist/Swiper/style.scss +54 -54
  161. package/dist/Switch/demo/base.js +2 -2
  162. package/dist/TabBar/demo/base.js +2 -2
  163. package/dist/Tag/demo/base.js +2 -2
  164. package/dist/Tag/demo/style.scss +8 -8
  165. package/dist/Toast/style.scss +63 -63
  166. package/dist/Toast/toast-modal.js +4 -4
  167. package/dist/VerificationCodeInput/demo/base.js +2 -2
  168. package/dist/VerificationCodeInput/index.d.ts +2 -2
  169. package/dist/VerificationCodeInput/index.js +1 -1
  170. package/dist/VerificationCodeInput/style.scss +20 -0
  171. package/dist/VerificationCodeInput/verification-code-input.d.ts +24 -0
  172. package/dist/VerificationCodeInput/verification-code-input.js +99 -0
  173. package/dist/WaterMark/demo/demo1.js +2 -2
  174. package/dist/WaterMark/demo/demo1.scss +6 -6
  175. package/dist/WaterMark/demo/demo2.js +2 -2
  176. package/dist/index.d.ts +9 -7
  177. package/dist/index.js +4 -3
  178. package/dist/style/variable.scss +1 -0
  179. package/dist/types.d.ts +0 -8
  180. package/dist/types.js +0 -1
  181. package/dist/utils/type.js +36 -36
  182. package/dist/utils/use-isomorphic-update-layout-effect.d.ts +1 -1
  183. package/dist/utils/with-default-props.js +4 -4
  184. package/package.json +13 -14
  185. package/readme.md +43 -43
  186. package/dist/CalendarPicker/calendar-picker.d.ts +0 -4
  187. package/dist/CalendarPicker/calendar-range-picker.d.ts +0 -4
  188. package/dist/CalendarPicker/index.d.ts +0 -9
  189. package/dist/CalendarPicker/index.js +0 -5
  190. package/dist/CalendarPicker/style.scss +0 -31
  191. package/dist/Mask/index.d.ts +0 -3
  192. package/dist/Mask/index.js +0 -2
  193. package/dist/Progress/Progress.d.ts +0 -37
  194. package/dist/Progress/Progress.js +0 -52
  195. package/dist/Progress/ProgressCircle.d.ts +0 -17
  196. package/dist/Progress/ProgressCircle.js +0 -148
  197. package/dist/Progress/ProgressLine.d.ts +0 -15
  198. package/dist/Progress/ProgressLine.js +0 -87
  199. package/dist/Progress/style.scss +0 -33
  200. package/dist/Progress/types.d.ts +0 -4
  201. package/dist/Progress/types.js +0 -2
  202. /package/dist/{CalendarDatetimePicker → CalendarDatetimePopup}/DateTimeSwitch.d.ts +0 -0
  203. /package/dist/{CalendarDatetimePicker → CalendarDatetimePopup}/DateTimeSwitch.js +0 -0
  204. /package/dist/{CalendarPicker → CalendarDatetimePopup}/demo/base.d.ts +0 -0
  205. /package/dist/{Mask → CalendarPopup}/demo/base.d.ts +0 -0
  206. /package/dist/{CalendarPicker → CalendarPopup}/types.js +0 -0
@@ -0,0 +1,73 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ var _excluded = ["className", "style", "children", "layout", "label", "labelAlign", "labelWidth", "name", "required", "hidden", "noStyle", "rules", "initialValue", "valuePropName", "errorRender", "extra"];
3
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
8
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
9
+ import React from "react";
10
+ import { FormItemLabel } from "./form-item-label";
11
+ import { FormItemInput } from "./form-item-input";
12
+ import classNames from "classnames";
13
+ import { Field } from "rc-field-form";
14
+ import { useFormContext } from "@trionesdev/antd-mobile-base-react";
15
+ export var FormItem = function FormItem(_ref) {
16
+ var className = _ref.className,
17
+ style = _ref.style,
18
+ children = _ref.children,
19
+ layout = _ref.layout,
20
+ label = _ref.label,
21
+ labelAlign = _ref.labelAlign,
22
+ labelWidth = _ref.labelWidth,
23
+ name = _ref.name,
24
+ required = _ref.required,
25
+ _ref$hidden = _ref.hidden,
26
+ hidden = _ref$hidden === void 0 ? false : _ref$hidden,
27
+ _ref$noStyle = _ref.noStyle,
28
+ noStyle = _ref$noStyle === void 0 ? false : _ref$noStyle,
29
+ rules = _ref.rules,
30
+ initialValue = _ref.initialValue,
31
+ valuePropName = _ref.valuePropName,
32
+ errorRender = _ref.errorRender,
33
+ extra = _ref.extra,
34
+ props = _objectWithoutProperties(_ref, _excluded);
35
+ var _useFormContext = useFormContext(),
36
+ formLayout = _useFormContext.layout,
37
+ formLayoutAlign = _useFormContext.labelAlign,
38
+ formLabelWidth = _useFormContext.labelWidth,
39
+ hiddenError = _useFormContext.hiddenError,
40
+ formExtra = _useFormContext.extra;
41
+ var formItemLayout = layout ? layout : formLayout === 'inline' ? 'horizontal' : formLayout;
42
+ var formItemAlign = labelAlign ? labelAlign : formLayoutAlign || 'left';
43
+ var formItemLabelWidth = labelWidth ? labelWidth : formLabelWidth;
44
+ var itemExtra = extra !== undefined ? extra : formExtra;
45
+ var clsPrefix = "triones-antm-form-item";
46
+ if (noStyle) {
47
+ return /*#__PURE__*/React.createElement(Field, {
48
+ name: name,
49
+ rules: rules,
50
+ trigger: 'onChange',
51
+ initialValue: initialValue
52
+ }, children);
53
+ }
54
+ return /*#__PURE__*/React.createElement("div", {
55
+ className: classNames(clsPrefix, "".concat(clsPrefix, "-").concat(formItemLayout), className, _defineProperty({}, "".concat(clsPrefix, "-hidden"), hidden)),
56
+ style: style
57
+ }, label && /*#__PURE__*/React.createElement(FormItemLabel, {
58
+ className: classNames("".concat(clsPrefix, "-label"), "".concat(clsPrefix, "-label-").concat(formItemAlign)),
59
+ style: {
60
+ width: formItemLabelWidth
61
+ },
62
+ label: label,
63
+ required: required
64
+ }), /*#__PURE__*/React.createElement(FormItemInput, _extends({
65
+ className: "".concat(clsPrefix, "-input")
66
+ }, props, {
67
+ name: name,
68
+ rules: rules,
69
+ errorRender: errorRender,
70
+ initialValue: initialValue,
71
+ hiddenError: hiddenError
72
+ }), children), formExtra);
73
+ };
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import { FormItemProps } from "./form-item";
3
+ declare const FormItem: import("react").FC<FormItemProps>;
4
+ export type { FormItemProps };
5
+ export default FormItem;
@@ -0,0 +1,3 @@
1
+ import { FormItem as InternalFromItem } from "./form-item";
2
+ var FormItem = InternalFromItem;
3
+ export default FormItem;
@@ -25,7 +25,7 @@ export default (function () {
25
25
  })), /*#__PURE__*/React.createElement(Form.Item, {
26
26
  label: "\u8BF4\u660E",
27
27
  name: "description"
28
- }, /*#__PURE__*/React.createElement(Input.TextArea, {
28
+ }, /*#__PURE__*/React.createElement(Input.Textarea, {
29
29
  placeholder: "\u8BF7\u8F93\u5165\u8BF4\u660E"
30
30
  }))), /*#__PURE__*/React.createElement(Button, {
31
31
  type: "primary",
@@ -1,3 +1,10 @@
1
- import { Form, FormProps, FormItemProps } from "@trionesdev/antd-mobile-base-react";
1
+ import { Form as InternalForm, FormProps } from "@trionesdev/antd-mobile-base-react";
2
+ import FormItem, { FormItemProps } from "./FormItem";
3
+ import "./style.scss";
4
+ type InternalFormType = typeof InternalForm;
5
+ type CompoundedComponent = InternalFormType & {
6
+ Item: typeof FormItem;
7
+ };
8
+ declare const Form: CompoundedComponent;
2
9
  export type { FormProps, FormItemProps };
3
10
  export default Form;
@@ -1,2 +1,6 @@
1
- import { Form } from "@trionesdev/antd-mobile-base-react";
1
+ import { Form as InternalForm } from "@trionesdev/antd-mobile-base-react";
2
+ import FormItem from "./FormItem";
3
+ import "./style.scss";
4
+ var Form = InternalForm;
5
+ Form.Item = FormItem;
2
6
  export default Form;
@@ -0,0 +1,67 @@
1
+ @use "../style/variable" as variable;
2
+ $cls-prefix-form: 'triones-antm-form';
3
+ $cls-prefix-form-item: 'triones-antm-form-item';
4
+
5
+ .#{$cls-prefix-form} {}
6
+
7
+ .#{$cls-prefix-form-item} {
8
+
9
+ &-label {
10
+ font-size: variable.$trionesFontSize;
11
+ padding-block: 4Px;
12
+ color: #6F6F6F;
13
+
14
+
15
+ &-wrapper {
16
+ // height: 1.47059em;
17
+ line-height: 1.47059;
18
+ display: flex;
19
+ align-items: center;
20
+ }
21
+
22
+ &-left {}
23
+
24
+ &-right {
25
+ text-align: right;
26
+ }
27
+
28
+ &-required-mark {
29
+ display: inline-block;
30
+ color: red;
31
+ margin-right: 4Px;
32
+ }
33
+
34
+ }
35
+
36
+ &-input {
37
+
38
+ .#{$cls-prefix-form-item} {
39
+ &-error {
40
+ font-size: variable.$trionesFontSizeSm;
41
+ color: red;
42
+ }
43
+ }
44
+ }
45
+
46
+ &-horizontal {
47
+ display: flex;
48
+ flex-direction: row;
49
+
50
+ .#{$cls-prefix-form-item} {
51
+ &-label {
52
+ flex-shrink: 1;
53
+ min-width: 0;
54
+ }
55
+
56
+ &-input {
57
+ flex: auto 1;
58
+ flex-shrink: 1;
59
+ min-width: 0;
60
+ }
61
+ }
62
+ }
63
+
64
+ &-hidden {
65
+ display: none;
66
+ }
67
+ }
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import React from 'react';
5
5
  import { DemoBlock } from "../../DemoBlock";
@@ -1,7 +1,7 @@
1
- .grid-demo-item-block {
2
- border: solid 1px #999;
3
- background: #f5f5f5;
4
- text-align: center;
5
- color: #999;
6
- height: 100%;
7
- }
1
+ .grid-demo-item-block {
2
+ border: solid 1px #999;
3
+ background: #f5f5f5;
4
+ text-align: center;
5
+ color: #999;
6
+ height: 100%;
7
+ }
@@ -1,9 +1,9 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import React from "react";
5
5
  import * as icons from "../../../../antd-mobile-icons-react";
6
- import _ from "lodash";
6
+ import { omit, map } from "lodash-es";
7
7
  import { DemoBlock } from "../../DemoBlock";
8
8
  export default (function () {
9
9
  return /*#__PURE__*/React.createElement(DemoBlock, {
@@ -16,7 +16,7 @@ export default (function () {
16
16
  gap: 20,
17
17
  flexWrap: 'wrap'
18
18
  }
19
- }, _.map(_.omit(icons, 'Icon'), function (icon, name) {
19
+ }, map(omit(icons, 'Icon'), function (icon, name) {
20
20
  return /*#__PURE__*/React.createElement("div", {
21
21
  key: name,
22
22
  style: {
@@ -1,5 +1,5 @@
1
- /**
2
- * compact: true
1
+ /**
2
+ * compact: true
3
3
  */
4
4
  import { DemoBlock } from "../../DemoBlock";
5
5
  import React from 'react';
@@ -1,4 +1,4 @@
1
- .imagesContainer {
2
- --triones-antm-image-width: 90px;
3
- --triones-antm-image-height: 60px;
4
- }
1
+ .imagesContainer {
2
+ --triones-antm-image-width: 90px;
3
+ --triones-antm-image-height: 60px;
4
+ }
@@ -1,30 +1,30 @@
1
- $class-prefix-image: 'triones-antm-image';
2
-
3
- .#{$class-prefix-image} {
4
- overflow: hidden;
5
- text-align: center;
6
- display: flex;
7
- justify-content: center;
8
- position: relative;
9
- &-img {
10
- height: 100%;
11
- width: 100%;
12
- object-fit: cover;
13
- }
14
- &-tip {
15
- position: relative;
16
- background-color: var(--triones-antm-color-fill-content);
17
- height: 100%;
18
- min-height: 24px;
19
- min-width: 24px;
20
- > svg {
21
- width: 24px;
22
- height: 24px;
23
- position: absolute;
24
- left: 50%;
25
- top: 50%;
26
- transform: translate(-50%, -50%);
27
- color: var(--triones-antm-color-weak);
28
- }
29
- }
30
- }
1
+ $class-prefix-image: 'triones-antm-image';
2
+
3
+ .#{$class-prefix-image} {
4
+ overflow: hidden;
5
+ text-align: center;
6
+ display: flex;
7
+ justify-content: center;
8
+ position: relative;
9
+ &-img {
10
+ height: 100%;
11
+ width: 100%;
12
+ object-fit: cover;
13
+ }
14
+ &-tip {
15
+ position: relative;
16
+ background-color: var(--triones-antm-color-fill-content);
17
+ height: 100%;
18
+ min-height: 24px;
19
+ min-width: 24px;
20
+ > svg {
21
+ width: 24px;
22
+ height: 24px;
23
+ position: absolute;
24
+ left: 50%;
25
+ top: 50%;
26
+ transform: translate(-50%, -50%);
27
+ color: var(--triones-antm-color-weak);
28
+ }
29
+ }
30
+ }
@@ -5,10 +5,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
5
5
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
7
  import React, { useEffect } from "react";
8
- import Mask from "../Mask";
9
8
  import classNames from "classnames";
10
9
  import { Swiper, Image } from "../index";
11
10
  import "./style.scss";
11
+ import Overlay from "../Overlay";
12
12
  var cls = 'triones-antm-image-preview';
13
13
  export var ImagesPreview = function ImagesPreview(_ref) {
14
14
  var className = _ref.className,
@@ -45,7 +45,7 @@ export var ImagesPreview = function ImagesPreview(_ref) {
45
45
  }
46
46
  setInnerActiveIndex(activeIndex);
47
47
  }, [activeIndex]);
48
- return /*#__PURE__*/React.createElement(Mask, {
48
+ return /*#__PURE__*/React.createElement(Overlay, {
49
49
  open: innerOpen
50
50
  }, /*#__PURE__*/React.createElement("div", {
51
51
  className: classNames(cls, className),
@@ -1,34 +1,34 @@
1
- $imagePreviewCls: 'triones-antm-image-preview';
2
-
3
- .#{$imagePreviewCls} {
4
- height: 100%;
5
- width: 100%;
6
- position: relative;
7
- background-color: rgba(0, 0, 0, 0.8);
8
-
9
- &-head {
10
- position: fixed;
11
- top: 50Px;
12
- left: 0;
13
- right: 0;
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- color: white;
18
- font-size: 14Px;
19
- z-index: 1000;
20
- }
21
-
22
- &-content {
23
- height: 100%;
24
- width: 100%;
25
- :global{
26
- .triones-antm-image-img{
27
- height: auto!important;
28
- }
29
- }
30
- }
31
-
32
- &-foot {
33
- }
34
- }
1
+ $imagePreviewCls: 'triones-antm-image-preview';
2
+
3
+ .#{$imagePreviewCls} {
4
+ height: 100%;
5
+ width: 100%;
6
+ position: relative;
7
+ background-color: rgba(0, 0, 0, 0.8);
8
+
9
+ &-head {
10
+ position: fixed;
11
+ top: 50Px;
12
+ left: 0;
13
+ right: 0;
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ color: white;
18
+ font-size: 14Px;
19
+ z-index: 1000;
20
+ }
21
+
22
+ &-content {
23
+ height: 100%;
24
+ width: 100%;
25
+ :global{
26
+ .triones-antm-image-img{
27
+ height: auto!important;
28
+ }
29
+ }
30
+ }
31
+
32
+ &-foot {
33
+ }
34
+ }
@@ -5,14 +5,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
5
5
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
7
  import React from "react";
8
- import Mask from "../Mask";
8
+ import Overlay from "../Overlay";
9
9
  export var CameraModal = function CameraModal(_ref) {
10
10
  var open = _ref.open;
11
11
  var _React$useState = React.useState(open || false),
12
12
  _React$useState2 = _slicedToArray(_React$useState, 2),
13
13
  innerOpen = _React$useState2[0],
14
14
  setInnerOpen = _React$useState2[1];
15
- return /*#__PURE__*/React.createElement(Mask, {
15
+ return /*#__PURE__*/React.createElement(Overlay, {
16
16
  open: innerOpen
17
17
  }, /*#__PURE__*/React.createElement("div", {
18
18
  style: {
@@ -19,7 +19,7 @@ import "./style.scss";
19
19
  import ActionSheet from "../ActionSheet";
20
20
  import { CameraModal } from "./CameraModal";
21
21
  import { ImagesPreview } from "../index";
22
- import { isEqual } from "lodash";
22
+ import { isEqual } from "lodash-es";
23
23
  import { RandomUtils } from "../utils/random-utils";
24
24
  var cls = 'triones-antm-images-wall';
25
25
  var ImagesWallItem = function ImagesWallItem(_ref) {
@@ -1,70 +1,70 @@
1
- @import "@trionesdev/antd-mobile-base-react/dist/style/variable";
2
-
3
- $imagesWallCls: 'triones-antm-images-wall';
4
-
5
- .#{$imagesWallCls} {
6
- display: grid;
7
- grid-gap: 4PX;
8
- width: 100%;
9
-
10
- &-item {
11
- aspect-ratio: 1;
12
- border-radius: $trionesBorderRadius;
13
- overflow: hidden;
14
- position: relative;
15
-
16
- &-inner {
17
- width: 100%;
18
- height: 100%;
19
- }
20
-
21
- &-close {
22
- position: absolute;
23
- top: 0;
24
- right: 0;
25
- background-color: rgb(0 0 0 / 63%);
26
- width: 20Px;
27
- height: 20Px;
28
- border-bottom-left-radius: $trionesBorderRadius;
29
- display: flex;
30
- justify-content: center;
31
- align-items: center;
32
-
33
- .triones-antm-icon {
34
- color: white;
35
- font-size: 12Px;
36
- }
37
- }
38
-
39
- &-input {
40
- position: absolute;
41
- width: 100%;
42
- height: 100%;
43
- top: 0;
44
- left: 0;
45
- margin: 0;
46
- padding: 0;
47
- z-index: 1;
48
- opacity: 0;
49
- }
50
-
51
- &-image {
52
- width: 100%;
53
- height: 100%;
54
- object-fit: cover;
55
- }
56
- }
57
-
58
- &-upload {
59
- display: flex;
60
- justify-content: center;
61
- align-items: center;
62
- background-color: $trionesColorBgTextActive;
63
- }
64
-
65
- &-action-sheet {
66
-
67
- }
68
- }
69
-
70
-
1
+ @use "../style/variable" as variable;
2
+
3
+ $imagesWallCls: 'triones-antm-images-wall';
4
+
5
+ .#{$imagesWallCls} {
6
+ display: grid;
7
+ grid-gap: 4PX;
8
+ width: 100%;
9
+
10
+ &-item {
11
+ aspect-ratio: 1;
12
+ border-radius: variable.$trionesBorderRadius;
13
+ overflow: hidden;
14
+ position: relative;
15
+
16
+ &-inner {
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+
21
+ &-close {
22
+ position: absolute;
23
+ top: 0;
24
+ right: 0;
25
+ background-color: rgb(0 0 0 / 63%);
26
+ width: 20Px;
27
+ height: 20Px;
28
+ border-bottom-left-radius: variable.$trionesBorderRadius;
29
+ display: flex;
30
+ justify-content: center;
31
+ align-items: center;
32
+
33
+ .triones-antm-icon {
34
+ color: white;
35
+ font-size: 12Px;
36
+ }
37
+ }
38
+
39
+ &-input {
40
+ position: absolute;
41
+ width: 100%;
42
+ height: 100%;
43
+ top: 0;
44
+ left: 0;
45
+ margin: 0;
46
+ padding: 0;
47
+ z-index: 1;
48
+ opacity: 0;
49
+ }
50
+
51
+ &-image {
52
+ width: 100%;
53
+ height: 100%;
54
+ object-fit: cover;
55
+ }
56
+ }
57
+
58
+ &-upload {
59
+ display: flex;
60
+ justify-content: center;
61
+ align-items: center;
62
+ background-color: variable.$trionesColorBgTextActive;
63
+ }
64
+
65
+ &-action-sheet {
66
+
67
+ }
68
+ }
69
+
70
+
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ export type BaseInputProps = {
3
+ className?: string;
4
+ style?: React.CSSProperties;
5
+ placeholder?: string;
6
+ type?: 'text' | 'password' | 'textarea';
7
+ disabled?: boolean;
8
+ value?: any;
9
+ onChange?: (e: any) => void;
10
+ };
11
+ export interface BaseInputHandle {
12
+ }
13
+ export declare const BaseInput: React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<BaseInputHandle>>;
@@ -0,0 +1,41 @@
1
+ var _excluded = ["className", "style", "placeholder", "type", "value", "onChange"];
2
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
5
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
6
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
7
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
8
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
9
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
10
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
+ import classNames from 'classnames';
12
+ import React, { forwardRef, useEffect, useState } from 'react';
13
+ import { inputCls } from "./types";
14
+ export var BaseInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
15
+ var className = _ref.className,
16
+ style = _ref.style,
17
+ placeholder = _ref.placeholder,
18
+ type = _ref.type,
19
+ value = _ref.value,
20
+ _onChange = _ref.onChange,
21
+ props = _objectWithoutProperties(_ref, _excluded);
22
+ var _useState = useState(0),
23
+ _useState2 = _slicedToArray(_useState, 2),
24
+ keySequence = _useState2[0],
25
+ setKeySequence = _useState2[1];
26
+ useEffect(function () {
27
+ setKeySequence(keySequence + 1);
28
+ }, [type]);
29
+ return /*#__PURE__*/React.createElement("input", _extends({
30
+ key: keySequence
31
+ }, props, {
32
+ className: classNames(["".concat(inputCls), className]),
33
+ style: style,
34
+ placeholder: placeholder,
35
+ type: type,
36
+ value: value,
37
+ onChange: function onChange(e) {
38
+ _onChange === null || _onChange === void 0 || _onChange(e.target.value);
39
+ }
40
+ }));
41
+ });