@pingux/astro 2.133.0-alpha.1 → 2.133.0-alpha.2
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.
@@ -114,17 +114,23 @@ var Default = function Default(args) {
|
|
114
114
|
);
|
115
115
|
};
|
116
116
|
exports.Default = Default;
|
117
|
-
var CustomDefaultImage =
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
117
|
+
var CustomDefaultImage = {
|
118
|
+
// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
|
119
|
+
// readers when an overlay opens.
|
120
|
+
parameters: {
|
121
|
+
chromatic: {
|
122
|
+
disableSnapshot: true // Disable snapshots for this specific story
|
123
|
+
}
|
124
|
+
},
|
125
|
+
|
126
|
+
render: function render(args) {
|
127
|
+
return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ImageUploadField, (0, _extends2["default"])({}, args, {
|
122
128
|
label: "Upload Image",
|
123
129
|
defaultPreviewImage: "https://picsum.photos/id/1056/200/300",
|
124
130
|
previewHeight: 150,
|
125
131
|
previewWidth: 150
|
126
|
-
})))
|
127
|
-
|
132
|
+
})));
|
133
|
+
}
|
128
134
|
};
|
129
135
|
exports.CustomDefaultImage = CustomDefaultImage;
|
130
136
|
var CustomItemText = function CustomItemText(args) {
|
@@ -157,82 +163,93 @@ var ComponentAsDefaultImage = function ComponentAsDefaultImage(args) {
|
|
157
163
|
);
|
158
164
|
};
|
159
165
|
exports.ComponentAsDefaultImage = ComponentAsDefaultImage;
|
160
|
-
var ExistingImage =
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
167
|
-
error = _useState4[0],
|
168
|
-
setError = _useState4[1];
|
169
|
-
var _useState5 = (0, _react.useState)(false),
|
170
|
-
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
171
|
-
isLoading = _useState6[0],
|
172
|
-
setIsLoading = _useState6[1];
|
166
|
+
var ExistingImage = {
|
167
|
+
parameters: {
|
168
|
+
chromatic: {
|
169
|
+
disableSnapshot: true // Disable snapshots for this specific story
|
170
|
+
}
|
171
|
+
},
|
173
172
|
|
174
|
-
|
175
|
-
|
176
|
-
var
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
173
|
+
render: function render() {
|
174
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
175
|
+
var _useState = (0, _react.useState)('https://picsum.photos/id/1025/200/300'),
|
176
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
177
|
+
previewImage = _useState2[0],
|
178
|
+
setPreviewImage = _useState2[1];
|
179
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
180
|
+
var _useState3 = (0, _react.useState)(null),
|
181
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
182
|
+
error = _useState4[0],
|
183
|
+
setError = _useState4[1];
|
184
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
185
|
+
var _useState5 = (0, _react.useState)(false),
|
186
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
187
|
+
isLoading = _useState6[0],
|
188
|
+
setIsLoading = _useState6[1];
|
186
189
|
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
})
|
235
|
-
|
190
|
+
// When controlling the previewImage yourself, it's important to handle updating the state
|
191
|
+
var handleChange = /*#__PURE__*/function () {
|
192
|
+
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
|
193
|
+
var _e$target;
|
194
|
+
var files, reader;
|
195
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
196
|
+
while (1) switch (_context.prev = _context.next) {
|
197
|
+
case 0:
|
198
|
+
// Clear errors
|
199
|
+
setError(undefined);
|
200
|
+
// Turn on loading indicator
|
201
|
+
setIsLoading(true);
|
202
|
+
|
203
|
+
// Handle setting the preview image
|
204
|
+
files = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.files[0];
|
205
|
+
reader = new FileReader();
|
206
|
+
reader.onload = function (_ref2) {
|
207
|
+
var result = _ref2.target.result;
|
208
|
+
setPreviewImage(result);
|
209
|
+
};
|
210
|
+
_context.prev = 5;
|
211
|
+
_context.next = 8;
|
212
|
+
return new _promise["default"](function (resolve) {
|
213
|
+
return (0, _setTimeout2["default"])(resolve, 3000);
|
214
|
+
});
|
215
|
+
case 8:
|
216
|
+
// Trigger the preview image callback
|
217
|
+
reader.readAsDataURL(files);
|
218
|
+
_context.next = 15;
|
219
|
+
break;
|
220
|
+
case 11:
|
221
|
+
_context.prev = 11;
|
222
|
+
_context.t0 = _context["catch"](5);
|
223
|
+
setPreviewImage(undefined);
|
224
|
+
setError('There was an error...');
|
225
|
+
case 15:
|
226
|
+
// Unset loading indicator
|
227
|
+
setIsLoading(false);
|
228
|
+
case 16:
|
229
|
+
case "end":
|
230
|
+
return _context.stop();
|
231
|
+
}
|
232
|
+
}, _callee, null, [[5, 11]]);
|
233
|
+
}));
|
234
|
+
return function handleChange(_x) {
|
235
|
+
return _ref.apply(this, arguments);
|
236
|
+
};
|
237
|
+
}();
|
238
|
+
return (
|
239
|
+
// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
|
240
|
+
// readers when an overlay opens.
|
241
|
+
(0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.ImageUploadField, {
|
242
|
+
label: "Upload Image",
|
243
|
+
isLoading: isLoading,
|
244
|
+
onChange: handleChange,
|
245
|
+
previewImage: previewImage,
|
246
|
+
previewHeight: 150,
|
247
|
+
previewWidth: 150,
|
248
|
+
status: error ? 'error' : 'default',
|
249
|
+
helperText: error
|
250
|
+
}))
|
251
|
+
);
|
252
|
+
}
|
236
253
|
};
|
237
254
|
exports.ExistingImage = ExistingImage;
|
238
255
|
var ErrorOnUpload = function ErrorOnUpload() {
|
@@ -101,17 +101,23 @@ export var Default = function Default(args) {
|
|
101
101
|
___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ImageUploadField, args))
|
102
102
|
);
|
103
103
|
};
|
104
|
-
export var CustomDefaultImage =
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
104
|
+
export var CustomDefaultImage = {
|
105
|
+
// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
|
106
|
+
// readers when an overlay opens.
|
107
|
+
parameters: {
|
108
|
+
chromatic: {
|
109
|
+
disableSnapshot: true // Disable snapshots for this specific story
|
110
|
+
}
|
111
|
+
},
|
112
|
+
|
113
|
+
render: function render(args) {
|
114
|
+
return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ImageUploadField, _extends({}, args, {
|
109
115
|
label: "Upload Image",
|
110
116
|
defaultPreviewImage: "https://picsum.photos/id/1056/200/300",
|
111
117
|
previewHeight: 150,
|
112
118
|
previewWidth: 150
|
113
|
-
})))
|
114
|
-
|
119
|
+
})));
|
120
|
+
}
|
115
121
|
};
|
116
122
|
export var CustomItemText = function CustomItemText(args) {
|
117
123
|
return (
|
@@ -141,82 +147,93 @@ export var ComponentAsDefaultImage = function ComponentAsDefaultImage(args) {
|
|
141
147
|
})))
|
142
148
|
);
|
143
149
|
};
|
144
|
-
export var ExistingImage =
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
151
|
-
error = _useState4[0],
|
152
|
-
setError = _useState4[1];
|
153
|
-
var _useState5 = useState(false),
|
154
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
155
|
-
isLoading = _useState6[0],
|
156
|
-
setIsLoading = _useState6[1];
|
150
|
+
export var ExistingImage = {
|
151
|
+
parameters: {
|
152
|
+
chromatic: {
|
153
|
+
disableSnapshot: true // Disable snapshots for this specific story
|
154
|
+
}
|
155
|
+
},
|
157
156
|
|
158
|
-
|
159
|
-
|
160
|
-
var
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
157
|
+
render: function render() {
|
158
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
159
|
+
var _useState = useState('https://picsum.photos/id/1025/200/300'),
|
160
|
+
_useState2 = _slicedToArray(_useState, 2),
|
161
|
+
previewImage = _useState2[0],
|
162
|
+
setPreviewImage = _useState2[1];
|
163
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
164
|
+
var _useState3 = useState(null),
|
165
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
166
|
+
error = _useState4[0],
|
167
|
+
setError = _useState4[1];
|
168
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
169
|
+
var _useState5 = useState(false),
|
170
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
171
|
+
isLoading = _useState6[0],
|
172
|
+
setIsLoading = _useState6[1];
|
170
173
|
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
})
|
219
|
-
|
174
|
+
// When controlling the previewImage yourself, it's important to handle updating the state
|
175
|
+
var handleChange = /*#__PURE__*/function () {
|
176
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
|
177
|
+
var _e$target;
|
178
|
+
var files, reader;
|
179
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
180
|
+
while (1) switch (_context.prev = _context.next) {
|
181
|
+
case 0:
|
182
|
+
// Clear errors
|
183
|
+
setError(undefined);
|
184
|
+
// Turn on loading indicator
|
185
|
+
setIsLoading(true);
|
186
|
+
|
187
|
+
// Handle setting the preview image
|
188
|
+
files = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.files[0];
|
189
|
+
reader = new FileReader();
|
190
|
+
reader.onload = function (_ref2) {
|
191
|
+
var result = _ref2.target.result;
|
192
|
+
setPreviewImage(result);
|
193
|
+
};
|
194
|
+
_context.prev = 5;
|
195
|
+
_context.next = 8;
|
196
|
+
return new _Promise(function (resolve) {
|
197
|
+
return _setTimeout(resolve, 3000);
|
198
|
+
});
|
199
|
+
case 8:
|
200
|
+
// Trigger the preview image callback
|
201
|
+
reader.readAsDataURL(files);
|
202
|
+
_context.next = 15;
|
203
|
+
break;
|
204
|
+
case 11:
|
205
|
+
_context.prev = 11;
|
206
|
+
_context.t0 = _context["catch"](5);
|
207
|
+
setPreviewImage(undefined);
|
208
|
+
setError('There was an error...');
|
209
|
+
case 15:
|
210
|
+
// Unset loading indicator
|
211
|
+
setIsLoading(false);
|
212
|
+
case 16:
|
213
|
+
case "end":
|
214
|
+
return _context.stop();
|
215
|
+
}
|
216
|
+
}, _callee, null, [[5, 11]]);
|
217
|
+
}));
|
218
|
+
return function handleChange(_x) {
|
219
|
+
return _ref.apply(this, arguments);
|
220
|
+
};
|
221
|
+
}();
|
222
|
+
return (
|
223
|
+
// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
|
224
|
+
// readers when an overlay opens.
|
225
|
+
___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ImageUploadField, {
|
226
|
+
label: "Upload Image",
|
227
|
+
isLoading: isLoading,
|
228
|
+
onChange: handleChange,
|
229
|
+
previewImage: previewImage,
|
230
|
+
previewHeight: 150,
|
231
|
+
previewWidth: 150,
|
232
|
+
status: error ? 'error' : 'default',
|
233
|
+
helperText: error
|
234
|
+
}))
|
235
|
+
);
|
236
|
+
}
|
220
237
|
};
|
221
238
|
export var ErrorOnUpload = function ErrorOnUpload() {
|
222
239
|
var _useState7 = useState(true),
|