qt-public-ui
Version:
新设计规范下业务组件库
373 lines (370 loc) • 15.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _classnames = _interopRequireDefault(require("classnames"));
var _ = require("..");
var _moment = _interopRequireDefault(require("moment"));
var _qtPublicHooks = require("qt-public-hooks");
require("./style");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/* eslint-disable no-param-reassign */
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["default"].isMoment);
};
var range2Name = function range2Name(range) {
return "".concat(range[0].format(DATE_FORMAT), "~").concat(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 = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
dropdownVisible = _useState2[0],
setDropdownVisible = _useState2[1];
var _useState3 = (0, _react.useState)(initialValue),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
values = _useState4[0],
setValues = _useState4[1];
var _useState5 = (0, _react.useState)(getDefaultPannel(use)),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
pannel = _useState6[0],
setPannel = _useState6[1];
var _useState7 = (0, _react.useState)(customPannelName || (use === null || use === void 0 ? void 0 : use.length) === 1 && pannelNames[pannel] || '对比分析'),
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
pannelName = _useState8[0],
setPannelName = _useState8[1];
var _useState9 = (0, _react.useState)([]),
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
listData = _useState10[0],
setListData = _useState10[1];
var _useState11 = (0, _react.useState)([]),
_useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
shownList = _useState12[0],
setShownList = _useState12[1];
var _useState13 = (0, _react.useState)(),
_useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
searchValue = _useState14[0],
setSearchValue = _useState14[1];
var _useState15 = (0, _react.useState)(initialValue.map(function (it) {
return it.value;
})),
_useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
checkboxVals = _useState16[0],
setCheckboxVals = _useState16[1];
// 受控组件
(0, _react.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]);
(0, _qtPublicHooks.useUpdateEffect)(function () {
if (pannel === 'date' || !dropdownVisible) return;
var listFetch = props[fetchName[pannel]] || function () {
return Promise.resolve([]);
};
listFetch().then(setListData);
}, [dropdownVisible, pannel]);
(0, _qtPublicHooks.useUpdateEffect)(function () {
var filtered = searchValue ? listData.filter(function (datum) {
return datum.label.indexOf(searchValue) > -1;
}) : listData;
setShownList(filtered);
}, [pannel, listData]);
(0, _qtPublicHooks.useUpdateEffect)(function () {
setShownList(listData.filter(function (datum) {
return datum.label.indexOf(searchValue) > -1;
}));
}, [searchValue]);
var dropdownCls = (0, _qtPublicHooks.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 || [],
_ref2 = (0, _slicedToArray2["default"])(_ref, 2),
start = _ref2[0],
end = _ref2[1];
var diff = (0, _moment["default"])(end).diff((0, _moment["default"])(start), 'days');
var newValue = [(0, _moment["default"])(date).subtract(diff, 'days'), (0, _moment["default"])(date)];
if (isUnique(newValue)) {
var _values = (0, _toConsumableArray2["default"])(values);
_values.push(newValue);
!isControlled && setValues(_values);
onChange && onChange(_values, 'add', newValue, pannel);
} else {
_antd.message.error('添加对比重复');
}
}
};
var onClear = function onClear() {
var initValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
!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((0, _toConsumableArray2["default"])(checkboxVals), [value]));
setValues([].concat((0, _toConsumableArray2["default"])(values), [{
label: label,
value: value
}]));
onChange && onChange([].concat((0, _toConsumableArray2["default"])(values), [{
label: label,
value: value
}]), 'add', {
label: label,
value: value
}, pannel);
}
if (!checked) {
var _checkboxVals = (0, _toConsumableArray2["default"])(checkboxVals);
var _values = (0, _toConsumableArray2["default"])(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["default"].createElement("div", {
className: "umui-picker-panel-container",
style: {
display: 'flex'
}
}, /*#__PURE__*/_react["default"].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["default"].createElement("li", {
key: opt.value,
className: (0, _classnames["default"])('umui-cycle-compare-tab', {
'tab-active': opt.value === pannel
}),
"data-value": opt.value
}, opt.label, /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
type: "umicon-arrow-right"
}));
})), /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-cycle-compare-combine"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-cycle-compare-tips"
}, pannel === 'date' && /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
type: "umicon-hint",
className: "umui-tips-icon"
}), currTips), pannel !== 'date' && /*#__PURE__*/_react["default"].createElement(_.Input.Search, {
placeholder: currTips,
value: searchValue
// className="umui-cycle-compare-search"
,
className: (0, _classnames["default"])('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["default"].createElement("span", null, (values === null || values === void 0 ? void 0 : values.length) || 0, "/", max)), pannel === 'date' && panelNode, pannel !== 'date' && /*#__PURE__*/_react["default"].createElement(_.VirtualList, {
data: shownList,
itemKey: "value",
height: 266,
itemHeight: 28
}, function (item, idx) {
var isChecked = checkboxVals.includes(item.value);
return /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
key: "".concat(item.label, "_").concat(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["default"].createElement(_antd.Popover, {
content: name,
mouseEnterDelay: 0.5
}, name);
};
(0, _qtPublicHooks.useUpdateEffect)(function () {
setPannelName(customPannelName || use.length === 1 && pannelNames[use[0]] || '对比分析');
}, [use]);
(0, _qtPublicHooks.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["default"].createElement("div", {
className: (0, _classnames["default"])('umui-cycle-compare', className),
style: style
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])('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["default"].createElement("span", null, nameAndValue), /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
type: "umicon-compare"
// className="umui-cycle-compare-icon umui-cycle-compare-icon-vs"
,
className: (0, _classnames["default"])('umui-cycle-compare-icon', {
'umui-cycle-compare-icon-vs': values && values.length > 0
})
}), values && values.length > 0 && /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
type: "umicon-close",
onClick: function onClick(e) {
e.stopPropagation();
onResetClick();
},
className: "umui-cycle-compare-icon umui-cycle-compare-icon-delete"
})), /*#__PURE__*/_react["default"].createElement(_antd.DatePicker, {
className: "umui-hidden-ant-picker",
showToday: false,
open: dropdownVisible,
onChange: onDateChange,
panelRender: renderExtraFooter,
disabledDate: disabledDate,
getPopupContainer: getPopupContainer // cxw API变了
// getCalendarContainer={getPopupContainer}
,
dropdownClassName: (0, _classnames["default"])('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: []
};
var _default = exports["default"] = CycleCompare;