qt-public-ui
Version:
新设计规范下业务组件库
241 lines • 8.92 kB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import { Default, Icon, autoAddTooltip } from '..';
import { Dropdown, Input, Tabs } from 'antd';
import classnames from 'classnames';
import { isFunction, toString, get, isArray } from 'lodash';
import './style.less';
var TabPane = Tabs.TabPane;
var defaultApp = function defaultApp(type, data) {
if (data === void 0) {
data = [];
}
var all = data.find(function (item) {
return item.key === type;
});
return {
iconUrl: 'umicon-chanpin_huaban1',
appName: all ? "\u5168\u90E8" + all.tab : '全部应用',
appInfoId: 'all'
};
};
var DropDownSelect = function DropDownSelect(props) {
var _newData$;
var style = props.style,
className = props.className,
showAll = props.showAll,
appId = props.appId,
getJumpUrl = props.getJumpUrl,
data = props.data,
defaultActiveKey = props.defaultActiveKey,
onChange = props.onChange,
onChangeTabs = props.onChangeTabs;
var inputRef = useRef();
var getCurrent = function getCurrent(list, _appId) {
var current = defaultApp(1, list);
data.forEach(function (item) {
var _item$children = item.children,
children = _item$children === void 0 ? [] : _item$children;
if (isArray(children) && children.find(function (val) {
return String(_appId) === String(val.appInfoId);
})) {
current = children.find(function (val) {
return String(_appId) === String(val.appInfoId);
});
}
});
return current;
};
var _useState = useState(false),
visible = _useState[0],
setVisible = _useState[1];
var _useState2 = useState(''),
keyword = _useState2[0],
setKeyword = _useState2[1];
var _useState3 = useState({}),
currentApp = _useState3[0],
setCurrentApp = _useState3[1];
var _useState4 = useState(''),
placeholder = _useState4[0],
setPlaceholder = _useState4[1];
var _useState5 = useState(get(currentApp, 'appName')),
appValue = _useState5[0],
setAppValue = _useState5[1];
var _useState6 = useState(data),
newData = _useState6[0],
setNewData = _useState6[1];
var _useState7 = useState(defaultActiveKey),
activeKey = _useState7[0],
setActiveKey = _useState7[1];
var _useHistory = useHistory(),
push = _useHistory.push;
var _useLocation = useLocation(),
pathname = _useLocation.pathname;
var onDropdownVisibleChange = function onDropdownVisibleChange(newVisible) {
setVisible(newVisible);
setActiveKey(getActiveKey(data, appId));
if (newVisible) {
setAppValue(null);
setPlaceholder(get(currentApp, 'appName'));
} else {
!appValue && setAppValue(get(currentApp, 'appName'));
inputRef.current && inputRef.current.input && inputRef.current.input.blur();
}
};
var onSearchChange = function onSearchChange(e) {
setKeyword(e.target.value);
setNewData(data.filter(function (item) {
var children = item.children;
var childrenData = children.filter(function (val) {
var _val$appName;
return (val === null || val === void 0 ? void 0 : (_val$appName = val.appName) === null || _val$appName === void 0 ? void 0 : _val$appName.toLowerCase().indexOf(e.target.value.toLowerCase())) > -1;
});
return isArray(childrenData) && childrenData.length;
}));
};
var getActiveKey = function getActiveKey(list, _appId) {
var current = list.find(function (item) {
var _item$children2 = item.children,
children = _item$children2 === void 0 ? [] : _item$children2;
return isArray(children) && children.find(function (val) {
return String(_appId) === String(val.appInfoId);
});
});
return (current === null || current === void 0 ? void 0 : current.key) || defaultActiveKey;
};
useEffect(function () {
setCurrentApp(getCurrent(data, appId));
setAppValue(get(getCurrent(data, appId), 'appName'));
setNewData(data);
setActiveKey(getActiveKey(data, appId));
}, [appId, JSON.stringify(data)]);
var onAppChange = function onAppChange(app) {
var oldApp = getCurrent(data, app);
setCurrentApp(app);
setAppValue(get(app, 'appName'));
setKeyword('');
setVisible(false);
isFunction(onChange) && onChange(app, oldApp);
getJumpUrl && push(getJumpUrl(pathname, appId, app.appInfoId));
};
var onFocusInput = function onFocusInput() {
setPlaceholder(get(currentApp, 'appName'));
setAppValue(null);
};
var getSelects = function getSelects(children, key) {
if (children === void 0) {
children = [];
}
if (!children.length) {
return /*#__PURE__*/React.createElement(Default, {
type: "empty"
});
}
return /*#__PURE__*/React.createElement("ul", {
className: keyword ? '' : 'app-list'
}, (showAll && !keyword ? [defaultApp(key, data)] : []).concat(children).filter(function (app) {
return new RegExp(keyword, 'i').test(app === null || app === void 0 ? void 0 : app.appName);
}).map(function (app) {
var appInfoId = app.appInfoId,
appName = app.appName,
iconUrl = app.iconUrl,
isMyFavorite = app.isMyFavorite;
return autoAddTooltip(function (ref) {
return /*#__PURE__*/React.createElement("li", {
ref: ref,
key: appInfoId,
className: classnames('app-item', {
'selected-app': toString(get(currentApp, 'appInfoId')) === toString(appInfoId)
}),
onClick: function onClick() {
onAppChange(app);
}
}, appInfoId !== 'all' ? /*#__PURE__*/React.createElement("img", {
className: "app-image",
src: iconUrl
}) : /*#__PURE__*/React.createElement(Icon, {
className: "app-icon",
type: iconUrl
}), /*#__PURE__*/React.createElement("span", {
className: "app-name"
}, appName), isMyFavorite && /*#__PURE__*/React.createElement(Icon, {
type: "umicon-xingbiaozhiding-shixin",
style: {
color: '#FC9C41',
fontSize: 12,
position: 'absolute',
right: 2,
top: 12
}
}));
}, {
type: 'singleLine',
title: appName
});
}));
};
var onTabsChange = function onTabsChange(key) {
setActiveKey(key);
isFunction(onChangeTabs) && onChangeTabs(key);
inputRef.current && inputRef.current.input && inputRef.current.input.focus();
};
var showTabsDom = function showTabsDom() {
return !keyword ? /*#__PURE__*/React.createElement(Tabs, {
activeKey: activeKey,
onChange: onTabsChange,
tabBarGutter: 32
}, newData.map(function (item) {
var tab = item.tab,
key = item.key,
_item$children3 = item.children,
children = _item$children3 === void 0 ? [] : _item$children3;
return /*#__PURE__*/React.createElement(TabPane, {
tab: tab,
key: key
}, getSelects(children, key));
})) : /*#__PURE__*/React.createElement("div", {
className: "app-list"
}, newData.map(function (item) {
var tab = item.tab,
key = item.key,
_item$children4 = item.children,
children = _item$children4 === void 0 ? [] : _item$children4;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
key: key,
className: "dropdown-app-select-text"
}, tab), getSelects(children, key));
}));
};
var appSelectDropdownOverlayContent = /*#__PURE__*/React.createElement("div", {
className: "dropdown-app-select"
}, data.length > 1 ? showTabsDom() : getSelects((_newData$ = newData[0]) === null || _newData$ === void 0 ? void 0 : _newData$.children, activeKey));
return /*#__PURE__*/React.createElement(Dropdown, {
visible: visible,
onVisibleChange: onDropdownVisibleChange,
overlay: appSelectDropdownOverlayContent,
trigger: ['click']
}, /*#__PURE__*/React.createElement("div", {
className: classnames('comp-app-select comp-app-select-dropdown', className),
style: style
}, /*#__PURE__*/React.createElement(Input, {
value: appValue || keyword,
ref: inputRef,
prefix: /*#__PURE__*/React.createElement("span", {
className: "app-cover"
}, get(currentApp, 'appId') !== 'all' ? /*#__PURE__*/React.createElement("img", {
className: "app-image",
src: get(currentApp, 'iconUrl')
}) : /*#__PURE__*/React.createElement(Icon, {
className: "app-icon",
type: get(currentApp, 'iconUrl')
})),
onFocus: onFocusInput,
onChange: onSearchChange,
placeholder: placeholder,
suffix: /*#__PURE__*/React.createElement(Icon, {
className: "icon-directivity",
type: visible ? 'ant-caret-up' : 'ant-caret-down'
})
})));
};
export default DropDownSelect;