iep-ui/lib/typography/Editable.js

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

'use strict';

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

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

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _KeyCode = require('../_util/KeyCode');

var _KeyCode2 = _interopRequireDefault(_KeyCode);

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

exports['default'] = {
  name: 'Editable',
  props: {
    prefixCls: _vueTypes2['default'].string,
    value: _vueTypes2['default'].string,
    maxlength: _vueTypes2['default'].number,
    autoSize: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].object]),
    onSave: _vueTypes2['default'].func,
    onCancel: _vueTypes2['default'].func,
    onEnd: _vueTypes2['default'].func,
    onChange: _vueTypes2['default'].func,
    originContent: _vueTypes2['default'].string
  },
  data: function data() {
    return {
      current: '',
      lastKeyCode: undefined,
      inComposition: false,
      cancelFlag: false,
      textArea: ''
    };
  },

  watch: {
    value: {
      handler: function handler(e) {
        this.current = e;
      },

      deep: true,
      immediate: true
    }
  },
  mounted: function mounted() {
    if (this.textArea) {
      var resizableTextArea = this.textArea ? this.textArea : this.textArea.resizableTextArea;
      var innerTextArea = resizableTextArea.textArea;
      innerTextArea.focus();
      var length = innerTextArea.length;

      innerTextArea.setSelectionRange(length, length);
    }
  },

  methods: {
    saveTextAreaRef: function saveTextAreaRef(node) {
      this.textArea = node;
    },

    // eslint-disable-next-line vue/no-dupe-keys
    onChange: function onChange(e) {
      this.current = e.target.replace(/[\r\n]/g, '');
      this.$emit('change', this.current);
    },
    onCompositionStart: function onCompositionStart() {
      this.inComposition = true;
    },
    onCompositionEnd: function onCompositionEnd() {
      this.inComposition = false;
    },
    onKeyDown: function onKeyDown(e) {
      var keyCode = e.keyCode;

      if (keyCode === _KeyCode2['default'].ENTER) {
        e.preventDefault();
      }
      // We don't record keyCode when IME is using
      if (this.inComposition) return;

      this.lastKeyCode = keyCode;
    },
    onKeyUp: function onKeyUp(e) {
      var keyCode = e.keyCode,
          ctrlKey = e.ctrlKey,
          altKey = e.altKey,
          metaKey = e.metaKey,
          shiftKey = e.shiftKey;

      // Check if it's a real key

      if (this.lastKeyCode === keyCode && !this.inComposition && !ctrlKey && !altKey && !metaKey && !shiftKey) {
        if (keyCode === _KeyCode2['default'].ENTER) {
          this.confirmChange();
          this.$emit('end');
        } else if (keyCode === _KeyCode2['default'].ESC) {
          this.current = this.originContent;
          this.$emit('cancel');
        }
      }
    },
    onBlur: function onBlur() {
      this.confirmChange();
      this.$emit('end');
    },
    confirmChange: function confirmChange() {
      this.$emit('save', this.current.trim());
    }
  },
  render: function render() {
    var h = arguments[0];

    return h(
      'div',
      {
        attrs: { className: this.$props.prefixCls + ' ' + this.$props.prefixCls + '-edit-content' }
      },
      [h(TextArea, {
        ref: this.saveTextAreaRef,
        attrs: { maxlength: this.$props.maxlength,
          value: this.current,

          autoSize: this.$props.autoSize === undefined || this.$props.autoSize
        },
        on: {
          'change': this.onChange,
          'keydown': this.onKeyDown,
          'keyup': this.onKeyUp,
          'compositionstart': this.onCompositionStart,
          'compositionend': this.onCompositionEnd,
          'blur': this.onBlur
        }
      }), h(EnterOutlined, { 'class': this.$props.prefixCls + '-edit-content-confirm' })]
    );
  }
};