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

Braineet design system

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 */

import React from 'react';
import { Upload, useUploadState, UploadDropzone } from '..';
import Icon from '../../icon';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export 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 = 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__*/_jsx(Upload, {
    state: upload,
    children: /*#__PURE__*/_jsx(UploadDropzone, _extends({}, args))
  });
};
var TemplateAvatar = function TemplateAvatar(args) {
  var _React$useState = React.useState(),
    avatar = _React$useState[0],
    setAvatar = _React$useState[1];
  var handleChangeAvatar = function handleChangeAvatar(images) {
    setAvatar(images[0].thumbUrl);
  };
  var upload = 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__*/_jsx(Upload, {
    state: upload,
    showUploadList: false,
    children: /*#__PURE__*/_jsx(UploadDropzone, _extends({}, args, {
      width: "80px",
      height: "80px",
      children: /*#__PURE__*/_jsx("div", {
        style: {
          backgroundImage: "url('" + avatar + "')",
          backgroundSize: 'cover'
        },
        children: !avatar ? /*#__PURE__*/_jsxs(_Fragment, {
          children: [/*#__PURE__*/_jsx(Icon, {
            name: "plus"
          }), "Upload avatar"]
        }) : null
      })
    }))
  });
};
export var Default = Template.bind({});
Default.args = _extends({}, defaultArgs);
export var CustomTexts = Template.bind({});
CustomTexts.args = _extends({}, defaultArgs, {
  title: 'You can custom me!',
  helper: 'You can custom me too!'
});
export var CustomIcon = Template.bind({});
CustomIcon.args = _extends({}, defaultArgs, {
  icon: 'paper_clip'
});
export var FullSize = Template.bind({});
FullSize.args = _extends({}, defaultArgs, {
  size: 'full'
});
export var SmallSize = Template.bind({});
SmallSize.args = _extends({}, defaultArgs, {
  size: 'small'
});
export var Custom = TemplateAvatar.bind({});
Custom.args = _extends({}, defaultArgs);