iglooform 2.5.7 → 2.5.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 (75) hide show
  1. package/es/confirmation/index.d.ts +2 -2
  2. package/es/confirmation/index.js +37 -2
  3. package/es/form/element/index.js +22 -21
  4. package/es/form/hstep/index.d.ts +17 -0
  5. package/es/form/hstep/index.js +158 -0
  6. package/es/form/hstep/style/index.d.ts +1 -0
  7. package/es/form/hstep/style/index.js +1 -0
  8. package/es/form/hstep/style/index.less +79 -0
  9. package/es/form/hsteps/index.d.ts +19 -0
  10. package/es/form/hsteps/index.js +418 -0
  11. package/es/form/hsteps/style/index.d.ts +1 -0
  12. package/es/form/hsteps/style/index.js +1 -0
  13. package/es/form/hsteps/style/index.less +100 -0
  14. package/es/form/index.js +31 -40
  15. package/es/form/pages/index.js +2 -2
  16. package/es/form/section/index.d.ts +2 -0
  17. package/es/form/section/index.js +70 -10
  18. package/es/form/section/style/index.less +18 -0
  19. package/es/form/step/index.js +15 -10
  20. package/es/form/steps/index.js +27 -15
  21. package/es/form-step-context.d.ts +6 -0
  22. package/es/form-step-context.js +4 -0
  23. package/es/free-form/index.js +24 -38
  24. package/es/input/input-number.js +87 -3
  25. package/es/input/phone-number.js +80 -20
  26. package/es/locale/en-US/messages.json +13 -0
  27. package/es/locale/format-message.js +2 -2
  28. package/es/locale/id-ID/messages.json +13 -0
  29. package/es/locale/locale-provider.js +2 -2
  30. package/es/locale/th-TH/messages.json +13 -0
  31. package/es/locale/vi-VN/messages.json +13 -0
  32. package/es/locale/zh-CN/messages.json +13 -0
  33. package/es/locale/zh-TW/messages.json +13 -0
  34. package/es/types.d.ts +17 -1
  35. package/es/upload/style/index.less +2 -0
  36. package/es/upload-photo/index.js +10 -4
  37. package/es/utils/form-utils.js +84 -1
  38. package/lib/confirmation/index.d.ts +2 -2
  39. package/lib/confirmation/index.js +37 -1
  40. package/lib/form/element/index.js +22 -21
  41. package/lib/form/hstep/index.d.ts +17 -0
  42. package/lib/form/hstep/index.js +183 -0
  43. package/lib/form/hstep/style/index.d.ts +1 -0
  44. package/lib/form/hstep/style/index.js +3 -0
  45. package/lib/form/hstep/style/index.less +79 -0
  46. package/lib/form/hsteps/index.d.ts +19 -0
  47. package/lib/form/hsteps/index.js +448 -0
  48. package/lib/form/hsteps/style/index.d.ts +1 -0
  49. package/lib/form/hsteps/style/index.js +3 -0
  50. package/lib/form/hsteps/style/index.less +100 -0
  51. package/lib/form/index.js +31 -39
  52. package/lib/form/pages/index.js +2 -2
  53. package/lib/form/section/index.d.ts +2 -0
  54. package/lib/form/section/index.js +72 -8
  55. package/lib/form/section/style/index.less +18 -0
  56. package/lib/form/step/index.js +15 -10
  57. package/lib/form/steps/index.js +27 -14
  58. package/lib/form-step-context.d.ts +6 -0
  59. package/lib/form-step-context.js +16 -0
  60. package/lib/free-form/index.js +23 -37
  61. package/lib/input/input-number.js +88 -3
  62. package/lib/input/phone-number.js +78 -18
  63. package/lib/locale/en-US/messages.json +13 -0
  64. package/lib/locale/format-message.js +2 -2
  65. package/lib/locale/id-ID/messages.json +13 -0
  66. package/lib/locale/locale-provider.js +2 -2
  67. package/lib/locale/th-TH/messages.json +13 -0
  68. package/lib/locale/vi-VN/messages.json +13 -0
  69. package/lib/locale/zh-CN/messages.json +13 -0
  70. package/lib/locale/zh-TW/messages.json +13 -0
  71. package/lib/types.d.ts +17 -1
  72. package/lib/upload/style/index.less +2 -0
  73. package/lib/upload-photo/index.js +10 -4
  74. package/lib/utils/form-utils.js +85 -1
  75. package/package.json +1 -1
@@ -15,6 +15,8 @@ var _typography = _interopRequireDefault(require("../typography"));
15
15
 
16
16
  var _checkbox = _interopRequireDefault(require("../checkbox"));
17
17
 
18
+ var _button = _interopRequireDefault(require("../button"));
19
+
18
20
  var _localeContext = _interopRequireDefault(require("../locale/locale-context"));
19
21
 
20
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -100,7 +102,41 @@ var Confirmation = function Confirmation(_ref) {
100
102
  cursor: 'pointer',
101
103
  marginLeft: 8
102
104
  },
103
- children: message
105
+ children: message || (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
106
+ children: [formatMessage({
107
+ id: 'I agree to the Igloo'
108
+ }), (0, _jsxRuntime.jsx)(_button.default, {
109
+ type: "link",
110
+ href: "https://contents.iglooinsure.com/termsofservice",
111
+ target: '_blank',
112
+ style: {
113
+ margin: '0 4px',
114
+ lineHeight: 'inherit'
115
+ },
116
+ onClick: function onClick(e) {
117
+ return e.stopPropagation();
118
+ },
119
+ children: formatMessage({
120
+ id: 'Terms of Use'
121
+ })
122
+ }), formatMessage({
123
+ id: 'and'
124
+ }), (0, _jsxRuntime.jsx)(_button.default, {
125
+ type: "link",
126
+ href: "https://contents.iglooinsure.com/privacypolicy",
127
+ style: {
128
+ margin: '0 4px',
129
+ lineHeight: 'inherit'
130
+ },
131
+ target: '_blank',
132
+ onClick: function onClick(e) {
133
+ return e.stopPropagation();
134
+ },
135
+ children: formatMessage({
136
+ id: 'Privacy Policy'
137
+ })
138
+ })]
139
+ })
104
140
  }), modalContent && (0, _jsxRuntime.jsx)(_modal.default, {
105
141
  title: modalTitle,
106
142
  visible: visible,
@@ -180,26 +180,6 @@ var Element = function Element(_ref) {
180
180
  var _useBreakpoint = useBreakpoint(),
181
181
  md = _useBreakpoint.md;
182
182
 
183
- if (type === 'Section') {
184
- return (0, _jsxRuntime.jsx)(_section.default, {
185
- parentName: parentName,
186
- config: config,
187
- preview: preview,
188
- disabled: disabled,
189
- setShowStepButton: setShowStepButton
190
- });
191
- }
192
-
193
- if (type === 'AddableSection') {
194
- return (0, _jsxRuntime.jsx)(_addableSection.default, {
195
- parentName: parentName,
196
- config: config,
197
- preview: preview,
198
- disabled: disabled,
199
- setShowStepButton: setShowStepButton
200
- });
201
- }
202
-
203
183
  var _calcFormItemProps = (0, _formUtils.calcFormItemProps)(config, _objectSpread(_objectSpread({}, extraConfig), {}, {
204
184
  requiredMark: requiredMark
205
185
  }), form, parentName),
@@ -264,7 +244,28 @@ var Element = function Element(_ref) {
264
244
  name: formItemProps.name,
265
245
  value: formItemProps.initialValue
266
246
  }]);
267
- }, [formItemProps.initialValue]); //这里要想一下有没有更优雅的实现方式
247
+ }, [formItemProps.initialValue]);
248
+
249
+ if (type === 'Section') {
250
+ return (0, _jsxRuntime.jsx)(_section.default, {
251
+ parentName: parentName,
252
+ config: config,
253
+ preview: preview,
254
+ disabled: disabled,
255
+ setShowStepButton: setShowStepButton
256
+ });
257
+ }
258
+
259
+ if (type === 'AddableSection') {
260
+ return (0, _jsxRuntime.jsx)(_addableSection.default, {
261
+ parentName: parentName,
262
+ config: config,
263
+ preview: preview,
264
+ disabled: disabled,
265
+ setShowStepButton: setShowStepButton
266
+ });
267
+ } //这里要想一下有没有更优雅的实现方式
268
+
268
269
 
269
270
  if (withoutForm) {
270
271
  var hideWhenPreview = elementProps.hideWhenPreview,
@@ -0,0 +1,17 @@
1
+ import { FC } from 'react';
2
+ import { FormItemConfig, FormItemName } from '../../types';
3
+ import './style/index.less';
4
+ export interface StepProps {
5
+ parentName?: FormItemName;
6
+ config: FormItemConfig;
7
+ edit: boolean;
8
+ preview: boolean;
9
+ index: number;
10
+ total: number;
11
+ handleNext(): void;
12
+ handleEdit(index: number): void;
13
+ showLastIndex?: boolean;
14
+ shouldScroll: boolean;
15
+ }
16
+ declare const Step: FC<StepProps>;
17
+ export default Step;
@@ -0,0 +1,183 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ require("antd/es/divider/style");
9
+
10
+ var _divider = _interopRequireDefault(require("antd/es/divider"));
11
+
12
+ require("antd/es/row/style");
13
+
14
+ var _row = _interopRequireDefault(require("antd/es/row"));
15
+
16
+ require("antd/es/grid/style");
17
+
18
+ var _grid = _interopRequireDefault(require("antd/es/grid"));
19
+
20
+ var _jsxRuntime = require("react/jsx-runtime");
21
+
22
+ var _react = require("react");
23
+
24
+ var _locale = require("../../locale");
25
+
26
+ var _button = _interopRequireDefault(require("../../button"));
27
+
28
+ var _element = _interopRequireDefault(require("../element"));
29
+
30
+ var _formUtils = require("../../utils/form-utils");
31
+
32
+ var _formContext = _interopRequireDefault(require("../../form-context"));
33
+
34
+ var _typography = _interopRequireDefault(require("../../typography"));
35
+
36
+ var _classnames = _interopRequireDefault(require("classnames"));
37
+
38
+ require("./style/index.less");
39
+
40
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
41
+
42
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
43
+
44
+ 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."); }
45
+
46
+ 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); }
47
+
48
+ 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; }
49
+
50
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
51
+
52
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
53
+
54
+ var useBreakpoint = _grid.default.useBreakpoint;
55
+
56
+ var Step = function Step(_ref) {
57
+ var parentName = _ref.parentName,
58
+ _ref$config = _ref.config,
59
+ _ref$config$elements = _ref$config.elements,
60
+ elements = _ref$config$elements === void 0 ? [] : _ref$config$elements,
61
+ name = _ref$config.name,
62
+ label = _ref$config.label,
63
+ editButtonLabel = _ref$config.editButtonLabel,
64
+ getButtonDisabledState = _ref$config.getButtonDisabledState,
65
+ disableEditButton = _ref$config.disableEditButton,
66
+ buttonText = _ref$config.buttonText,
67
+ edit = _ref.edit,
68
+ preview = _ref.preview,
69
+ index = _ref.index,
70
+ total = _ref.total,
71
+ handleNext = _ref.handleNext,
72
+ handleEditProp = _ref.handleEdit,
73
+ showLastIndex = _ref.showLastIndex,
74
+ shouldScroll = _ref.shouldScroll;
75
+
76
+ var _useContext = (0, _react.useContext)(_locale.LocaleContext),
77
+ formatMessage = _useContext.formatMessage;
78
+
79
+ var _useContext2 = (0, _react.useContext)(_formContext.default),
80
+ continueText = _useContext2.continueText,
81
+ form = _useContext2.form,
82
+ getScrollContainer = _useContext2.getScrollContainer;
83
+
84
+ var _useState = (0, _react.useState)(true),
85
+ _useState2 = _slicedToArray(_useState, 2),
86
+ showButton = _useState2[0],
87
+ setShowButton = _useState2[1];
88
+
89
+ var containerRef = (0, _react.useRef)(null);
90
+
91
+ var handleEdit = function handleEdit() {
92
+ return handleEditProp(index);
93
+ };
94
+
95
+ var buttonDisabled = getButtonDisabledState && form && getButtonDisabledState(form);
96
+
97
+ var _useBreakpoint = useBreakpoint(),
98
+ md = _useBreakpoint.md;
99
+
100
+ (0, _react.useEffect)(function () {
101
+ var _containerRef$current, _containerRef$current4;
102
+
103
+ if (md || !(shouldScroll && edit)) return;
104
+ var scrollContainer = getScrollContainer() || window;
105
+ if (typeof scrollContainer.scrollTo !== 'function') return;
106
+
107
+ if (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetTop) {
108
+ var _containerRef$current2, _containerRef$current3;
109
+
110
+ scrollContainer.scrollTo.length === 2 ? scrollContainer.scrollTo(0, (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetTop) - 50) : scrollContainer.scrollTo({
111
+ top: (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetTop) - 50,
112
+ behavior: 'smooth'
113
+ });
114
+ return;
115
+ }
116
+
117
+ containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.scrollIntoView();
118
+ }, [shouldScroll, edit]);
119
+ return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
120
+ children: [(0, _jsxRuntime.jsxs)("div", {
121
+ className: (0, _classnames.default)('igloo-hstep-container', {
122
+ 'igloo-hstep-container-preview': preview
123
+ }),
124
+ ref: containerRef,
125
+ children: [(0, _jsxRuntime.jsxs)(_typography.default, {
126
+ className: "igloo-hstep-label",
127
+ level: "h3a",
128
+ children: [(0, _jsxRuntime.jsx)("span", {
129
+ className: "igloo-hstep-label-text",
130
+ children: label
131
+ }), preview && (0, _jsxRuntime.jsx)(_button.default, {
132
+ type: "link",
133
+ className: "igloo-hstep-label-edit",
134
+ onClick: handleEdit,
135
+ disabled: disableEditButton,
136
+ children: editButtonLabel || formatMessage({
137
+ id: 'Edit'
138
+ })
139
+ }), edit && !md && (0, _jsxRuntime.jsxs)(_typography.default, {
140
+ level: "body3",
141
+ children: [index + 1, "/", total]
142
+ })]
143
+ }), (edit || preview) && (0, _jsxRuntime.jsxs)("div", {
144
+ className: 'igloo-hstep-content',
145
+ children: [(0, _jsxRuntime.jsx)(_row.default, {
146
+ gutter: [32, preview ? 16 : 24],
147
+ children: elements.map(function (child, index) {
148
+ return (0, _jsxRuntime.jsx)(_element.default, {
149
+ config: child,
150
+ parentName: (0, _formUtils.calcNamePath)(parentName, name),
151
+ setShowStepButton: setShowButton,
152
+ preview: preview
153
+ }, index);
154
+ })
155
+ }), edit && showButton && md && (0, _jsxRuntime.jsx)(_button.default, {
156
+ onClick: handleNext,
157
+ className: 'igloo-hstep-button',
158
+ type: "primary",
159
+ disabled: buttonDisabled,
160
+ children: buttonText || continueText || formatMessage({
161
+ id: 'Continue'
162
+ })
163
+ })]
164
+ }), !edit && !preview && (0, _jsxRuntime.jsx)(_divider.default, {
165
+ className: "igloo-hstep-divider"
166
+ })]
167
+ }), edit && showButton && !md && (0, _jsxRuntime.jsx)("div", {
168
+ className: "igloo-hstep-button-container",
169
+ children: (0, _jsxRuntime.jsx)(_button.default, {
170
+ onClick: handleNext,
171
+ className: 'igloo-hstep-button',
172
+ type: "primary",
173
+ disabled: buttonDisabled,
174
+ children: buttonText || continueText || formatMessage({
175
+ id: 'Continue'
176
+ })
177
+ })
178
+ })]
179
+ });
180
+ };
181
+
182
+ var _default = Step;
183
+ exports.default = _default;
@@ -0,0 +1 @@
1
+ import './index.less';
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+
3
+ require("./index.less");
@@ -0,0 +1,79 @@
1
+ .igloo-hstep-container {
2
+ width: 100%;
3
+ background: #ffffff;
4
+ padding: 32px;
5
+ margin-top: 32px;
6
+
7
+ .igloo-hstep-label {
8
+ display: flex;
9
+ justify-content: space-between;
10
+ align-items: center;
11
+ font-size: 20px;
12
+ line-height: 28px;
13
+ margin-bottom: 16px;
14
+
15
+ .igloo-hstep-label-edit {
16
+ font-size: 16px;
17
+ color: @primary-color;
18
+ cursor: pointer;
19
+ font-weight: 500;
20
+ }
21
+
22
+ .igloo-hstep-label-text {
23
+ color: #212121;
24
+ }
25
+ }
26
+
27
+ .igloo-hstep-content {
28
+ width: 100%;
29
+
30
+ .igloo-hstep-button {
31
+ min-width: 221px;
32
+ margin-top: 32px;
33
+ }
34
+ }
35
+
36
+ .igloo-hstep-divider {
37
+ margin-top: 16px;
38
+ border-color: #bdbdbd;
39
+ }
40
+ }
41
+
42
+ @media screen and (max-width: 768px) {
43
+ .igloo-hstep-container-preview {
44
+ background: #f9f9f9;
45
+ }
46
+
47
+ .igloo-hstep-container {
48
+ width: 100%;
49
+ padding: 24px 16px;
50
+ margin-top: 0;
51
+
52
+ .igloo-hstep-content {
53
+ margin-top: 24px;
54
+ }
55
+
56
+ .igloo-hstep-divider {
57
+ margin-top: 8px;
58
+ width: auto;
59
+ min-width: auto;
60
+ margin-left: 16px;
61
+ margin-right: 16px;
62
+ }
63
+ }
64
+
65
+ .igloo-hstep-button-container {
66
+ width: 100%;
67
+ position: sticky;
68
+ bottom: 0;
69
+ box-shadow: 0px 0px 1px rgba(20, 20, 20, 0.04),
70
+ 0px 1px 8px 2px rgba(20, 20, 20, 0.08);
71
+
72
+ padding: 24px 16px;
73
+ background: #ffffff;
74
+
75
+ .igloo-hstep-button {
76
+ width: 100%;
77
+ }
78
+ }
79
+ }
@@ -0,0 +1,19 @@
1
+ import { FC } from 'react';
2
+ import { FormItemConfig, FormItemName } from '../../types';
3
+ import './style/index.less';
4
+ import { ConfirmationProps } from '../../confirmation';
5
+ export interface HStepsProps {
6
+ config: FormItemConfig & {
7
+ confirmations?: {
8
+ [key: string]: {
9
+ required: boolean;
10
+ confirmation?: ConfirmationProps;
11
+ };
12
+ };
13
+ withReview?: boolean;
14
+ };
15
+ parentName?: FormItemName;
16
+ name?: FormItemName;
17
+ }
18
+ declare const HSteps: FC<HStepsProps>;
19
+ export default HSteps;