qt-public-ui
Version:
新设计规范下业务组件库
353 lines (352 loc) • 12.8 kB
JavaScript
/* eslint-disable no-param-reassign */
import React, { useState, useEffect } from 'react';
import { DatePicker, message, Checkbox, Popover } from 'antd';
import classnames from 'classnames';
import { IconSlim as Icon, Input, VirtualList } from '..';
import moment from 'moment';
import { useDropdownClickAway, useUpdateEffect } from 'qt-public-hooks';
import './style';
var DATE_FORMAT = 'YYYY-MM-DD';
var tabOptions = [{
value: 'date',
label: '时段对比',
tips: '请选择对比时段的终点'
}, {
value: 'channel',
label: '渠道对比',
tips: '搜索渠道名称'
}, {
value: 'version',
label: '版本对比',
tips: '搜索版本名称'
}, {
value: 'benchmark',
label: '行业对比',
tips: '搜索行业名称'
}, {
value: 'indicator',
label: '指标对比',
tips: '搜索指标名称'
}, {
value: 'plan',
label: '计划对比',
tips: '搜索计划名称'
}, {
value: 'scene',
label: '场景对比',
tips: '搜索场景名称'
}];
var fetchName = {
indicator: 'fetchIndicators',
channel: 'fetchChannels',
version: 'fetchVersions',
benchmark: 'fetchBenchmarks',
plan: 'fetchPlans',
scene: 'fetchScenes'
};
var pannelNames = tabOptions.reduce(function (names, opt) {
names[opt.value] = opt.label;
return names;
}, {});
var getDefaultPannel = function getDefaultPannel(use) {
var _tabOptions$filter$;
if (!use || use.length === 0) return 'date';
// return use.map(key => tabOptions.find(i => i.value === key) || {});
return ((_tabOptions$filter$ = tabOptions.filter(function (f) {
return use.includes(f.value);
})[0]) === null || _tabOptions$filter$ === void 0 ? void 0 : _tabOptions$filter$.value) || 'date';
};
var isDateRange = function isDateRange(value) {
return Array.isArray(value) && value.length === 2 && value.every(moment.isMoment);
};
var range2Name = function range2Name(range) {
return range[0].format(DATE_FORMAT) + "~" + range[1].format(DATE_FORMAT);
};
var CycleCompare = function CycleCompare(props) {
var _props$use = props.use,
use = _props$use === void 0 ? ['date'] : _props$use,
_props$max = props.max,
max = _props$max === void 0 ? Infinity : _props$max,
pickerValue = props.pickerValue,
style = props.style,
className = props.className,
customPannelName = props.customPannelName,
customPannelTips = props.customPannelTips,
_props$defaultValue = props.defaultValue,
defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
onChange = props.onChange,
disabledDate = props.disabledDate,
customReset = props.customReset,
getPopupContainer = props.getPopupContainer;
var isControlled = ('value' in props);
var initialValue = isControlled ? props.value || [] : defaultValue;
var _useState = useState(false),
dropdownVisible = _useState[0],
setDropdownVisible = _useState[1];
var _useState2 = useState(initialValue),
values = _useState2[0],
setValues = _useState2[1];
var _useState3 = useState(getDefaultPannel(use)),
pannel = _useState3[0],
setPannel = _useState3[1];
var _useState4 = useState(customPannelName || (use === null || use === void 0 ? void 0 : use.length) === 1 && pannelNames[pannel] || '对比分析'),
pannelName = _useState4[0],
setPannelName = _useState4[1];
var _useState5 = useState([]),
listData = _useState5[0],
setListData = _useState5[1];
var _useState6 = useState([]),
shownList = _useState6[0],
setShownList = _useState6[1];
var _useState7 = useState(),
searchValue = _useState7[0],
setSearchValue = _useState7[1];
var _useState8 = useState(initialValue.map(function (it) {
return it.value;
})),
checkboxVals = _useState8[0],
setCheckboxVals = _useState8[1];
// 受控组件
useEffect(function () {
isControlled && setValues(props.value || []);
if (pannel !== 'date') {
setCheckboxVals(props.value ? props.value.map(function (it) {
return it.value;
}) : []);
}
if (props.value && props.value.length > max) {
throw new RangeError('Length of values prop in CycleCompare must less than max prop.');
}
}, [isControlled, max, pannel, props.value]);
useUpdateEffect(function () {
if (pannel === 'date' || !dropdownVisible) return;
var listFetch = props[fetchName[pannel]] || function () {
return Promise.resolve([]);
};
listFetch().then(setListData);
}, [dropdownVisible, pannel]);
useUpdateEffect(function () {
var filtered = searchValue ? listData.filter(function (datum) {
return datum.label.indexOf(searchValue) > -1;
}) : listData;
setShownList(filtered);
}, [pannel, listData]);
useUpdateEffect(function () {
setShownList(listData.filter(function (datum) {
return datum.label.indexOf(searchValue) > -1;
}));
}, [searchValue]);
var dropdownCls = useDropdownClickAway(function () {
setDropdownVisible(false);
});
var isUnique = function isUnique(value) {
if (isDateRange(value)) {
var valueStrs = values.map(function (val) {
return isDateRange(val) ? range2Name(val) : val.value;
});
return valueStrs.indexOf(range2Name(value)) === -1;
} // 暂时不涉及其他类型,只有 1 个 if
return true;
};
var onTabClick = function onTabClick(e) {
var tValue = e.target && e.target.getAttribute('data-value');
if (tValue && tValue !== pannel) {
onClear();
setPannel(tValue);
setSearchValue(undefined);
}
};
var onDateChange = function onDateChange(date) {
if (!date) return;
if (values && values.length < max) {
var _ref = pickerValue || [],
start = _ref[0],
end = _ref[1];
var diff = moment(end).diff(moment(start), 'days');
var newValue = [moment(date).subtract(diff, 'days'), moment(date)];
if (isUnique(newValue)) {
var _values = [].concat(values);
_values.push(newValue);
!isControlled && setValues(_values);
onChange && onChange(_values, 'add', newValue, pannel);
} else {
message.error('添加对比重复');
}
}
};
var onClear = function onClear(initValue) {
if (initValue === void 0) {
initValue = [];
}
!isControlled && setValues(initValue);
onChange && onChange(initValue, 'clear');
};
var onResetClick = function onResetClick() {
if (typeof customReset === 'function') onClear(customReset());else onClear();
};
var onCheckboxChange = function onCheckboxChange(item, e) {
var checked = e.target.checked;
var label = item.label,
value = item.value;
if (checked && values.length < max) {
setCheckboxVals([].concat(checkboxVals, [value]));
setValues([].concat(values, [{
label: label,
value: value
}]));
onChange && onChange([].concat(values, [{
label: label,
value: value
}]), 'add', {
label: label,
value: value
}, pannel);
}
if (!checked) {
var _checkboxVals = [].concat(checkboxVals);
var _values = [].concat(values);
var cIndex = _checkboxVals.findIndex(function (val) {
return val === value;
});
var vIndex = _values.findIndex(function (val) {
return val.value === value;
});
_checkboxVals.splice(cIndex, 1);
_values.splice(vIndex, 1);
setCheckboxVals(_checkboxVals);
setValues(_values);
onChange && onChange(_values, 'delete', {
label: label,
value: value
}, pannel);
}
};
var renderExtraFooter = function renderExtraFooter(panelNode) {
var _tabOptions$find;
var currTips = customPannelTips || ((_tabOptions$find = tabOptions.find(function (tab) {
return tab.value === pannel;
})) === null || _tabOptions$find === void 0 ? void 0 : _tabOptions$find.tips) || '请选择';
return /*#__PURE__*/React.createElement("div", {
className: "umui-picker-panel-container",
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("ul", {
className: "umui-cycle-compare-tabs",
onClick: onTabClick
}, tabOptions.filter(function (opt) {
return (use === null || use === void 0 ? void 0 : use.includes(opt.value)) || false;
}).map(function (opt) {
return /*#__PURE__*/React.createElement("li", {
key: opt.value,
className: classnames('umui-cycle-compare-tab', {
'tab-active': opt.value === pannel
}),
"data-value": opt.value
}, opt.label, /*#__PURE__*/React.createElement(Icon, {
type: "umicon-arrow-right"
}));
})), /*#__PURE__*/React.createElement("div", {
className: "umui-cycle-compare-combine"
}, /*#__PURE__*/React.createElement("div", {
className: "umui-cycle-compare-tips"
}, pannel === 'date' && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
type: "umicon-hint",
className: "umui-tips-icon"
}), currTips), pannel !== 'date' && /*#__PURE__*/React.createElement(Input.Search, {
placeholder: currTips,
value: searchValue
// className="umui-cycle-compare-search"
,
className: classnames('umui-cycle-compare-search', {
'umui-cycle-compare-search-no-max': !(max < Infinity)
}),
onChange: function onChange(e) {
return setSearchValue(e.target.value);
}
}), max < Infinity && /*#__PURE__*/React.createElement("span", null, (values === null || values === void 0 ? void 0 : values.length) || 0, "/", max)), pannel === 'date' && panelNode, pannel !== 'date' && /*#__PURE__*/React.createElement(VirtualList, {
data: shownList,
itemKey: "value",
height: 266,
itemHeight: 28
}, function (item, idx) {
var isChecked = checkboxVals.includes(item.value);
return /*#__PURE__*/React.createElement(Checkbox, {
key: item.label + "_" + idx,
checked: isChecked,
onChange: onCheckboxChange.bind(null, item),
disabled: item.disabled || checkboxVals.length >= max && !isChecked
}, item.label);
})));
};
var renderValues = function renderValues() {
var name = values === null || values === void 0 ? void 0 : values.map(function (val) {
var key = isDateRange(val) ? range2Name(val) : val.value;
return isDateRange(val) ? key : val.label;
}).join('、');
return /*#__PURE__*/React.createElement(Popover, {
content: name,
mouseEnterDelay: 0.5
}, name);
};
useUpdateEffect(function () {
setPannelName(customPannelName || use.length === 1 && pannelNames[use[0]] || '对比分析');
}, [use]);
useUpdateEffect(function () {
if (isControlled) {
setValues(props.value || []);
pannel !== 'date' && setCheckboxVals(props.value.map(function (v) {
return v.value;
}));
}
}, [isControlled, props.value]);
var nameAndValue = values && values.length > 0 ? renderValues() : pannelName;
return /*#__PURE__*/React.createElement("div", {
className: classnames('umui-cycle-compare', className),
style: style
}, /*#__PURE__*/React.createElement("div", {
className: classnames('umui-cycle-compare-btn', {
'umui-active': dropdownVisible || values && values.length > 0
}),
onClick: function onClick() {
var value = !dropdownVisible;
setDropdownVisible(value);
setTimeout(function () {
return setDropdownVisible(value);
}, 0);
}
}, /*#__PURE__*/React.createElement("span", null, nameAndValue), /*#__PURE__*/React.createElement(Icon, {
type: "umicon-compare"
// className="umui-cycle-compare-icon umui-cycle-compare-icon-vs"
,
className: classnames('umui-cycle-compare-icon', {
'umui-cycle-compare-icon-vs': values && values.length > 0
})
}), values && values.length > 0 && /*#__PURE__*/React.createElement(Icon, {
type: "umicon-close",
onClick: function onClick(e) {
e.stopPropagation();
onResetClick();
},
className: "umui-cycle-compare-icon umui-cycle-compare-icon-delete"
})), /*#__PURE__*/React.createElement(DatePicker, {
className: "umui-hidden-ant-picker",
showToday: false,
open: dropdownVisible,
onChange: onDateChange,
panelRender: renderExtraFooter,
disabledDate: disabledDate,
getPopupContainer: getPopupContainer // cxw API变了
// getCalendarContainer={getPopupContainer}
,
dropdownClassName: classnames('umui-cycle-compare-pannel', dropdownCls, {
'umui-cycle-compare-only': (use === null || use === void 0 ? void 0 : use.length) === 1,
'umui-cycle-compare-list': pannel !== 'date'
})
}));
};
CycleCompare.displayName = 'CycleCompare';
CycleCompare.defaultProps = {
defaultValue: []
};
export default CycleCompare;