iep-ui/lib/iep-sundry-upload/IepSundryUpload.js

An enterprise-class UI design language and Vue-based implementation

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _configConsumerProps = require('../config-provider/configConsumerProps');

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _upload = require('../upload');

var _upload2 = _interopRequireDefault(_upload);

var _dropdown = require('../dropdown');

var _dropdown2 = _interopRequireDefault(_dropdown);

var _slider = require('../slider');

var _slider2 = _interopRequireDefault(_slider);

var _propsUtil = require('../_util/props-util');

var _left = require('./icons/left');

var _left2 = _interopRequireDefault(_left);

var _right = require('./icons/right');

var _right2 = _interopRequireDefault(_right);

var _add = require('./icons/add');

var _add2 = _interopRequireDefault(_add);

var _reduce = require('./icons/reduce');

var _reduce2 = _interopRequireDefault(_reduce);

var _vueCropper = require('vue-cropper');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function getBase64(img, callback) {
  var reader = new FileReader();
  reader.addEventListener('load', function () {
    return callback(reader.result);
  });
  reader.readAsDataURL(img);
}

exports['default'] = {
  name: 'IepSundryUpload',
  props: (0, _extends3['default'])({}, _upload2['default'].props, {
    cropper: _vueTypes2['default'].bool.def(false),
    dataType: _vueTypes2['default'].oneOf(['base64', 'blob']).def('base64')
  }),
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  data: function data() {
    return {
      localFile: undefined,
      visible: false,
      rotate: 0,
      zoom: 0
    };
  },

  methods: {
    handleUpload: function handleUpload(e) {
      var _this = this;

      if (this.$props.cropper) {
        getBase64(e, function (imageUrl) {
          _this.localFile = imageUrl;
          _this.visible = true;
        });
      } else {
        return e;
      }
    },
    handleTools: function handleTools(e) {
      var _this2 = this;

      switch (e) {
        case 1:
          if (this.zoom === -100) {
            return false;
          }
          this.zoom -= 10;
          if (this.zoom < -100) {
            this.zoom = -100;
          }
          this.$refs.cropper.changeScale(-1);
          break;
        case 2:
          if (this.zoom === 100) {
            return false;
          }
          this.zoom += 10;
          if (this.zoom > 100) {
            this.zoom = 100;
          }
          this.$refs.cropper.changeScale(1);
          break;
        case 3:
          if (this.rotate === 0) {
            return false;
          }
          this.$refs.cropper.rotateRight();
          this.rotate -= 90;
          if (this.rotate < 0) {
            this.rotate = 0;
          }
          break;
        case 4:
          if (this.rotate === 360) {
            return false;
          }
          this.$refs.cropper.rotateLeft();
          this.rotate += 90;
          if (this.rotate > 360) {
            this.rotate = 360;
          }
          break;
        case 5:
          this.visible = false;
          break;
        case 6:
          if (this.$props.dataType === 'base64') {
            this.$refs.cropper.getCropData(function (data) {
              _this2.$emit('cropper', data);
              _this2.visible = false;
            });
          } else {
            this.$refs.cropper.getCropBlob(function (data) {
              _this2.$emit('cropper', data);
              _this2.visible = false;
            });
          }
          break;
        case 7:
          this.visible = false;
          break;
      }
    }
  },

  render: function render() {
    var _this3 = this;

    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $props = this.$props,
        $slots = this.$slots,
        visible = this.visible,
        rotate = this.rotate,
        zoom = this.zoom,
        handleTools = this.handleTools;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('iep-sundry-upload', customizePrefixCls);
    var uploadProps = {
      props: (0, _extends3['default'])({}, $props, {
        transformFile: function transformFile(e) {
          return _this3.handleUpload(e);
        }
      }),
      on: (0, _propsUtil.getListeners)(this)
    };

    var cropperProps = {
      props: {
        img: this.localFile,
        autoCrop: true
      }
    };

    return h(
      'div',
      { 'class': prefixCls },
      [h(
        _dropdown2['default'],
        {
          attrs: { visible: visible }
        },
        [visible ? h(
          'div',
          { 'class': prefixCls + '-cropper', slot: 'overlay' },
          [h(
            'div',
            { 'class': prefixCls + '-cropper-header' },
            [h(
              'div',
              { 'class': prefixCls + '-cropper-header-text' },
              ['\u7F16\u8F91\u56FE\u7247']
            ), h(
              'div',
              { 'class': prefixCls + '-cropper-header-icon', on: {
                  'click': function click() {
                    return handleTools(7);
                  }
                }
              },
              [h('a-iep-icon', {
                attrs: { type: 'basic_linear_button_close', color: '#9DABC6' }
              })]
            )]
          ), h(
            'div',
            { 'class': prefixCls + '-cropper-body' },
            [h(
              'div',
              { 'class': prefixCls + '-cropper-body-picture' },
              [h(_vueCropper.VueCropper, (0, _babelHelperVueJsxMergeProps2['default'])([cropperProps, { ref: 'cropper' }]))]
            ), h(
              'div',
              { 'class': prefixCls + '-cropper-body-tools' },
              [h(
                'div',
                { 'class': prefixCls + '-cropper-body-tools-item' },
                [h(
                  'div',
                  { 'class': prefixCls + '-cropper-body-tools-item-btn', on: {
                      'click': function click() {
                        return handleTools(1);
                      }
                    }
                  },
                  [h(_reduce2['default'])]
                ), h(
                  'div',
                  { 'class': prefixCls + '-cropper-body-tools-item-core' },
                  [h(_slider2['default'], {
                    attrs: { min: -100, max: 100, step: 10, value: zoom }
                  })]
                ), h(
                  'div',
                  { 'class': prefixCls + '-cropper-body-tools-item-btn', on: {
                      'click': function click() {
                        return handleTools(2);
                      }
                    }
                  },
                  [h(_add2['default'])]
                )]
              ), h(
                'div',
                { 'class': prefixCls + '-cropper-body-tools-item' },
                [h(
                  'div',
                  { 'class': prefixCls + '-cropper-body-tools-item-btn', on: {
                      'click': function click() {
                        return handleTools(3);
                      }
                    }
                  },
                  [h(_left2['default'])]
                ), h(
                  'div',
                  { 'class': prefixCls + '-cropper-body-tools-item-core' },
                  [h(_slider2['default'], {
                    attrs: { min: 0, max: 360, step: 90, value: rotate }
                  })]
                ), h(
                  'div',
                  { 'class': prefixCls + '-cropper-body-tools-item-btn', on: {
                      'click': function click() {
                        return handleTools(4);
                      }
                    }
                  },
                  [h(_right2['default'])]
                )]
              )]
            )]
          ), h(
            'div',
            { 'class': prefixCls + '-cropper-footer' },
            [h(
              'a-button',
              {
                on: {
                  'click': function click() {
                    return handleTools(5);
                  }
                }
              },
              ['\u53D6\u6D88']
            ), h(
              'a-button',
              {
                attrs: { type: 'primary' },
                on: {
                  'click': function click() {
                    return handleTools(6);
                  }
                }
              },
              ['\u786E\u5B9A']
            )]
          )]
        ) : null, h(
          _upload2['default'],
          uploadProps,
          [$slots['default']]
        )]
      )]
    );
  }
};