@braineet/ui/dist/cjs/components/upload/Dropzone/index.stories.js

Braineet design system

"use strict";

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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
var _default = {
  title: 'Components/Upload/Dropzone',
  component: _.UploadDropzone
};
exports.default = _default;
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 = Template.bind({});
exports.Default = Default;
Default.args = _extends({}, defaultArgs);
var CustomTexts = Template.bind({});
exports.CustomTexts = CustomTexts;
CustomTexts.args = _extends({}, defaultArgs, {
  title: 'You can custom me!',
  helper: 'You can custom me too!'
});
var CustomIcon = Template.bind({});
exports.CustomIcon = CustomIcon;
CustomIcon.args = _extends({}, defaultArgs, {
  icon: 'paper_clip'
});
var FullSize = Template.bind({});
exports.FullSize = FullSize;
FullSize.args = _extends({}, defaultArgs, {
  size: 'full'
});
var SmallSize = Template.bind({});
exports.SmallSize = SmallSize;
SmallSize.args = _extends({}, defaultArgs, {
  size: 'small'
});
var Custom = TemplateAvatar.bind({});
exports.Custom = Custom;
Custom.args = _extends({}, defaultArgs);