iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
558 lines (519 loc) • 18.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _moment = require('moment');
var _moment2 = _interopRequireDefault(_moment);
var _momentRange = require('moment-range');
var _slider = require('../slider');
var _slider2 = _interopRequireDefault(_slider);
var _momentUtil = require('../_util/moment-util');
var _lodash = require('lodash');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var moment = (0, _momentRange.extendMoment)(_moment2['default']);
var dateMode = {
minute: 'mm:00',
hour: 'HH:00',
day: 'MM-DD',
week: 'YYYY-w周',
month: 'YYYY-MM',
year: 'YYYY年'
};
exports['default'] = {
name: 'IepSlider',
inheritAttrs: false,
model: {
prop: 'value'
},
props: {
step: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number]).def(1),
defaultValue: _momentUtil.TimeType,
formatSlider: _vueTypes2['default'].string,
isCustomRange: _vueTypes2['default'].bool.def(false),
tooltipIsVisible: _vueTypes2['default'].bool.def(true),
overlayClassName: _vueTypes2['default'].string,
prefixCls: _vueTypes2['default'].string,
tipFormat: _vueTypes2['default'].string.def('YYYY-MM-DD HH:mm:ss'),
theme: _vueTypes2['default'].oneOf(['dark', 'light']).def('dark'),
mode: _vueTypes2['default'].oneOf(['minute', 'hour', 'day', 'week', 'month', 'year']).def('minute'),
value: _momentUtil.TimesType,
slideValue: _vueTypes2['default'].number.def(0),
resetColor: _vueTypes2['default'].bool.def(false),
isPart: _vueTypes2['default'].bool.def(false),
autoPlay: _vueTypes2['default'].bool.def(false),
loop: _vueTypes2['default'].bool.def(false),
timeout: _vueTypes2['default'].number.def(1000),
trackStrictly: _vueTypes2['default'].bool.def(true),
track: _vueTypes2['default'].oneOf(['all', 'odd', 'even', 'bothEnds']).def('bothEnds'),
trackFunc: _vueTypes2['default'].func,
interval: _vueTypes2['default'].number.def(0),
hoverTooltip: _vueTypes2['default'].bool.def(true)
},
inject: {
configProvider: { 'default': function _default() {
return _configConsumerProps.ConfigConsumerProps;
} }
},
data: function data() {
return {
isPlay: false,
backupList: [],
dayRangeList: [],
marks: {},
backupMarks: {},
scale: 0,
timer: null,
realityValue: 0,
tooltipVisible: false,
counter: 0,
localInterval: 0,
panelMode: 'minute',
panelValue: [],
styleLeft: undefined,
styleLeftIndex: undefined,
localPart: false
};
},
created: function created() {
this.realityValue = this.slideValue;
this.panelValue = this.value;
this.panelMode = this.mode;
this.localPart = this.isPart && this.panelMode === 'hour';
this.renderSlider();
},
beforeDestroy: function beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
},
watch: {
mode: {
handler: function handler(e) {
this.tooltipVisible = false;
this.panelMode = e;
this.realityValue = 0;
this.backupList = [];
this.marks = {};
this.counter = 0;
this.backupMarks = {};
this.renderSlider();
this.isPlay = false;
this.localPart = this.isPart && this.panelMode === 'hour';
if (this.timer) {
clearInterval(this.timer);
}
}
},
value: {
handler: function handler(e) {
this.tooltipVisible = false;
this.panelValue = e;
this.counter = 0;
this.realityValue = 0;
this.backupList = [];
this.marks = {};
this.backupMarks = {};
this.renderSlider();
this.isPlay = false;
if (this.timer) {
clearInterval(this.timer);
}
}
},
interval: {
handler: function handler(e) {
this.localInterval = e;
this.handleSliderMounted();
},
immediate: true,
deep: true
},
defaultValue: {
handler: function handler() {
this.renderSlider();
}
}
},
render: function render() {
var _this = this;
var h = arguments[0];
var props = this.$props,
isPlay = this.isPlay,
handlePlay = this.handlePlay,
marks = this.marks,
tipFormatter = this.tipFormatter,
realityValue = this.realityValue,
tooltipVisible = this.tooltipVisible,
handleSliderChange = this.handleSliderChange,
handleAfterChange = this.handleAfterChange,
hoverTooltip = this.hoverTooltip,
scale = this.scale,
localPart = this.localPart;
var partNodes = null;
var customizePrefixCls = props.prefixCls,
theme = props.theme,
resetColor = props.resetColor;
var getPrefixCls = this.configProvider.getPrefixCls;
var prefixCls = getPrefixCls('iep-slider', customizePrefixCls);
var wrapperCls = (0, _classnames2['default'])([prefixCls, props.overlayClassName, localPart ? prefixCls + '-part' : '', prefixCls + '-' + theme, resetColor ? prefixCls + '-reset' : '']);
var playNodes = h(
'div',
{ 'class': prefixCls + '-left', on: {
'click': handlePlay
}
},
[isPlay ? h('a-iep-icon', {
attrs: { type: 'basic_solid_button_suspend4' }
}) : h('a-iep-icon', {
attrs: { type: 'basic_solid_button_pla4' }
})]
);
if (localPart) {
partNodes = this.dayRangeList.map(function (item, index) {
return item.scale >= 0 ? h(
'div',
{
'class': prefixCls + '-right-part-cell',
style: {
left: index * item.scale + '%',
width: item.scale + '%'
}
},
[h(
'div',
{ 'class': prefixCls + '-right-part-cell-text' },
[h('span', [item.primevalItem.format('M月D日')]), h('span', [item.primevalItem.format('dddd')])]
)]
) : null;
});
}
var scaleUnit = document.documentElement.style.fontSize ? parseFloat(document.documentElement.style.fontSize) / 100 : 1;
var slideNodes = h(
'div',
{ 'class': prefixCls + '-right', ref: 'right' },
[marks ? h(
'div',
{ 'class': prefixCls + '-right-slider' },
[h(_slider2['default'], {
attrs: {
marks: marks,
step: scale,
allTip: true,
value: realityValue,
tipFormatter: tipFormatter,
tooltipVisible: this.$props.tooltipIsVisible ? tooltipVisible : false
},
on: {
'change': function change(e) {
return handleSliderChange(e);
},
'afterChange': function afterChange(e) {
return handleAfterChange(e);
},
'handleTrackChangeValue': function handleTrackChangeValue(e) {
return _this.handleTrackChangeValue(e);
},
'instance': function instance() {
return _this.handleSliderMounted();
},
'stepEnter': function stepEnter(e, offset, index) {
_this.styleLeft = offset;
_this.styleLeftIndex = (0, _lodash.find)(_this.backupList, { index: index });
},
'stepLeave': function stepLeave(e, offset) {
_this.styleLeft = undefined;
}
},
ref: 'slider' }), !(0, _lodash.isEmpty)(this.styleLeft) && hoverTooltip ? h(
'div',
{ 'class': prefixCls + '-small-tip', style: {
'--left': this.styleLeft,
'--width': 100 * scaleUnit + 'px',
'--bisect': 100 * scaleUnit / 2 + 'px'
} },
[h(
'div',
{ 'class': prefixCls + '-small-tip-core' },
[h('span', [this.styleLeftIndex.formatItem])]
)]
) : null]
) : null, localPart ? h(
'div',
{ 'class': prefixCls + '-right-part' },
[h(
'div',
{ 'class': prefixCls + '-right-part-core' },
[partNodes]
)]
) : null]
);
return h(
'div',
{ 'class': wrapperCls },
[playNodes, slideNodes]
);
},
methods: {
reset: function reset() {
this.tooltipVisible = false;
this.realityValue = 0;
this.counter = 0;
this.isPlay = false;
if (this.timer) {
clearInterval(this.timer);
}
},
handleAutoPlay: function handleAutoPlay() {
var _this2 = this;
this.tooltipVisible = true;
var len = this.backupList.length;
var num = this.formatNumber(this.timeout);
if (len - 1 <= 0) {
return false;
} else {
var sliderValue = (0, _lodash.find)(this.backupList, {
formatItem: this.backupMarks[this.realityValue]
});
this.$emit('sliderStart', {
value: sliderValue ? sliderValue.primevalItem : undefined
});
this.timer = setInterval(function () {
_this2.counter++;
_this2.isPlay = true;
if (_this2.realityValue === 100) {
_this2.counter = 0;
_this2.tooltipVisible = false;
clearInterval(_this2.timer);
var _sliderValue = (0, _lodash.find)(_this2.backupList, {
formatItem: _this2.backupMarks[_this2.realityValue]
});
_this2.$emit('sliderEnd', {
value: _sliderValue ? _sliderValue.primevalItem : undefined
});
if (_this2.loop && _this2.isPlay) {
_this2.realityValue = 0;
_this2.handleAutoPlay();
} else {
_this2.isPlay = false;
}
} else {
_this2.realityValue = _this2.counter * _this2.scale;
// const endSliderIndex = this.backupList.findIndex(e => e.formatItem === this.backupMarks[this.realityValue]);
// const sliderValue = find(this.backupList, {
// formatItem: this.backupMarks[this.realityValue],
// });
var endSliderIndex = _this2.backupList.findIndex(function (item) {
return item.index * _this2.scale === _this2.realityValue;
});
_this2.$emit('sliderChange', {
value: _this2.backupList[endSliderIndex > -1 ? endSliderIndex : 0].primevalItem,
realityValue: _this2.backupMarks[_this2.realityValue],
isPlay: _this2.isPlay,
list: _this2.backupList,
marks: _this2.backupMarks
});
}
}, num);
}
},
onEnd: function onEnd(val) {
this.$emit('change', val);
},
handleTrackChangeValue: function handleTrackChangeValue(e) {
var _this3 = this;
// const item = this.backupMarks[e];
var index = this.backupList.findIndex(function (item) {
return item.index * _this3.scale === e;
});
var value = this.backupList[index > -1 ? index : 0];
if (this.$props.autoPlay) {
this.handleAutoPlay();
}
this.$emit('trackChange', value);
},
formatNumber: function formatNumber(e) {
return parseInt(e.toString().split('').map(function (item, index) {
return index === 0 ? item : 0;
}).join(''));
},
handleSliderChange: function handleSliderChange(e) {
var _this4 = this;
this.realityValue = e;
clearInterval(this.timer);
this.counter = this.realityValue / this.scale;
if (this.isPlay) {
this.$nextTick(function () {
_this4.handleAutoPlay();
});
}
},
handleAfterChange: function handleAfterChange(e) {
var _this5 = this;
this.realityValue = e;
clearInterval(this.timer);
this.counter = this.realityValue / this.scale;
var index = this.backupList.findIndex(function (item) {
return item.index * _this5.scale === e;
});
var value = this.backupList[index > -1 ? index : 0];
this.$emit('sliderKeyboardChange', value);
},
tipFormatter: function tipFormatter(e) {
var _this6 = this;
var item = this.backupMarks[e];
var index = this.backupList.findIndex(function (item) {
return item.index * _this6.scale === e;
});
if (index > -1) {
return moment(this.backupList[index].primevalItem).format(this.tipFormat);
} else {
return item ? item : null;
}
},
formatName: function formatName(e, name, item) {
if (this.trackFunc) {
return this.trackFunc(e, name, item, this.backupList);
} else {
switch (this.track) {
case 'all':
return name;
case 'odd':
return this.trackStrictly ? e === 0 || e === this.backupList.length - 1 ? name : e % 2 !== 0 ? name : '' : e % 2 !== 0 ? name : '';
case 'even':
return this.trackStrictly ? e === 0 || e === this.backupList.length - 1 ? name : e % 2 === 0 ? name : '' : e % 2 === 0 ? name : '';
case 'bothEnds':
return e === 0 || e === this.backupList.length - 1 ? name : '';
}
}
},
renderSlider: function renderSlider() {
var _this7 = this;
var _$props = this.$props,
step = _$props.step,
defaultValue = _$props.defaultValue,
isCustomRange = _$props.isCustomRange;
var panelValue = this.panelValue,
localPart = this.localPart;
if (panelValue && panelValue.length) {
if (isCustomRange) {
this.backupList = this.customGetRangeList(panelValue, this.panelMode);
} else {
this.backupList = this.getRangeList(panelValue[0], panelValue[1], this.panelMode, step);
}
this.scale = 100 * 100 / ((this.backupList.length - 1) * 100);
var marks = {},
backupMarks = {};
this.backupList.forEach(function (item, index) {
if (!(0, _lodash.isEmpty)(defaultValue)) {
if (item.primevalItem.startOf(_this7.panelMode).diff(defaultValue.startOf(_this7.panelMode), _this7.panelMode) === 0) {
_this7.realityValue = index * _this7.scale;
backupMarks[index * _this7.scale] = item.formatItem;
}
}
marks[index * _this7.scale] = _this7.formatName(index, item.formatItem, item);
backupMarks[index * _this7.scale] = item.formatItem;
});
this.marks = marks;
this.backupMarks = backupMarks;
if (!(0, _lodash.isEmpty)(defaultValue)) {
this.counter = this.realityValue / this.scale;
} else {
this.counter = 0;
}
if (localPart && this.panelMode === 'hour') {
var localDayList = this.getRangeList(panelValue[0].startOf('hours'), panelValue[1].endOf('hours'), 'days');
var scale = 0;
for (var i = 0; i < this.backupList.length; i++) {
var item = this.backupList[i];
if (item.primevalItem.format('HH:00') === panelValue[0].startOf('hours').format('HH:00') && i !== 0) {
scale = i * this.scale;
break;
}
}
this.dayRangeList = localDayList.map(function (item) {
return (0, _extends3['default'])({}, item, {
scale: scale
});
});
}
if (this.autoPlay) {
this.$nextTick(function () {
_this7.handleAutoPlay();
});
}
var sliderValue = (0, _lodash.find)(this.backupList, { formatItem: this.backupMarks[0] });
this.$emit('beforeSliderStart', {
value: sliderValue ? sliderValue.primevalItem : undefined
});
this.$nextTick(function () {
_this7.handleSliderMounted();
});
}
},
handlePlay: function handlePlay() {
this.isPlay = !this.isPlay;
if (this.isPlay) {
if (this.realityValue === 100) {
this.realityValue = 0;
if (this.timer) {
clearInterval(this.timer);
}
}
this.handleAutoPlay();
} else {
clearInterval(this.timer);
}
},
onChange: function onChange(val) {
this.$emit('change', val);
},
customGetRangeList: function customGetRangeList(dateList, mode) {
var _this8 = this;
return dateList.map(function (item, index) {
return {
primevalItem: item,
index: index,
formatItem: moment(item).format(!(0, _lodash.isEmpty)(_this8.$props.formatSlider) ? _this8.$props.formatSlider : dateMode[mode])
};
});
},
getRangeList: function getRangeList(start, end, mode, step) {
var excludeEnd = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
var range = moment.range(start, end);
return Array.from(range.by(mode, { step: step, excludeEnd: excludeEnd })).map(function (item, index) {
return {
primevalItem: item,
index: index,
formatItem: moment(item).format(dateMode[mode])
};
});
},
handleSliderMounted: function handleSliderMounted() {
if (this.$refs.slider) {
var steps = (0, _lodash.find)(this.$refs.slider.$el.children, { className: 'ant-slider-step' });
var len = steps.children.length;
if (parseInt(this.localInterval) > 0) {
for (var i = 0; i < len; i++) {
var item = steps.children[i];
if (i % (parseInt(this.localInterval) + 1) !== 0) {
item.style.opacity = 0;
} else {
item.style.opacity = 1;
}
}
} else {
for (var _i = 0; _i < len; _i++) {
var _item = steps.children[_i];
_item.style.opacity = 1;
}
}
}
}
}
};