@braineet/ui
Version:
Braineet design system
112 lines (111 loc) • 4.34 kB
JavaScript
;
exports.__esModule = true;
exports.default = exports.SmallSize = exports.FullSize = exports.Default = exports.CustomTexts = exports.CustomIcon = exports.Custom = void 0;
var _react = _interopRequireDefault(require("react"));
var _ = require("..");
var _icon = _interopRequireDefault(require("../../icon"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable react/destructuring-assignment */
var _default = exports.default = {
title: 'Components/Upload/Dropzone',
component: _.UploadDropzone
};
var defaultArgs = {
title: 'Drag and Drop here',
helper: 'Or click to upload'
};
var action = function action(_ref) {
var file = _ref.file,
onProgress = _ref.onProgress;
return new Promise(function (resolve) {
var simulateProgress = 0;
var interval = Math.floor(Math.random() * (500 - 100 + 1) + 100);
var frame = function frame() {
if (simulateProgress >= 100) {
clearInterval(intervalProgress);
var promiseFn = resolve;
promiseFn(_extends({}, file, {
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
}));
} else {
simulateProgress += 10;
onProgress(simulateProgress);
}
};
var intervalProgress = setInterval(frame, interval);
});
};
// eslint-disable-next-line react/prop-types
var Template = function Template(args) {
var upload = (0, _.useUploadState)({
defaultItems: args == null ? void 0 : args.defaultItems,
items: args == null ? void 0 : args.items,
listType: args == null ? void 0 : args.listType,
onChange: args == null ? void 0 : args.onChange,
disabled: args == null ? void 0 : args.disabled,
readonly: args == null ? void 0 : args.readonly,
action: action
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Upload, {
state: upload,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.UploadDropzone, _extends({}, args))
});
};
var TemplateAvatar = function TemplateAvatar(args) {
var _React$useState = _react.default.useState(),
avatar = _React$useState[0],
setAvatar = _React$useState[1];
var handleChangeAvatar = function handleChangeAvatar(images) {
setAvatar(images[0].thumbUrl);
};
var upload = (0, _.useUploadState)({
defaultItems: args == null ? void 0 : args.defaultItems,
items: args == null ? void 0 : args.items,
listType: args == null ? void 0 : args.listType,
disabled: args == null ? void 0 : args.disabled,
readonly: args == null ? void 0 : args.readonly,
onChange: handleChangeAvatar,
action: action
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Upload, {
state: upload,
showUploadList: false,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.UploadDropzone, _extends({}, args, {
width: "80px",
height: "80px",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
backgroundImage: "url('" + avatar + "')",
backgroundSize: 'cover'
},
children: !avatar ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
name: "plus"
}), "Upload avatar"]
}) : null
})
}))
});
};
var Default = exports.Default = Template.bind({});
Default.args = _extends({}, defaultArgs);
var CustomTexts = exports.CustomTexts = Template.bind({});
CustomTexts.args = _extends({}, defaultArgs, {
title: 'You can custom me!',
helper: 'You can custom me too!'
});
var CustomIcon = exports.CustomIcon = Template.bind({});
CustomIcon.args = _extends({}, defaultArgs, {
icon: 'paper_clip'
});
var FullSize = exports.FullSize = Template.bind({});
FullSize.args = _extends({}, defaultArgs, {
size: 'full'
});
var SmallSize = exports.SmallSize = Template.bind({});
SmallSize.args = _extends({}, defaultArgs, {
size: 'small'
});
var Custom = exports.Custom = TemplateAvatar.bind({});
Custom.args = _extends({}, defaultArgs);