feat: add URL link for setter titles

This commit is contained in:
shuaige.zsg 2020-05-27 15:29:12 +08:00
parent 700e5b06dd
commit 4678408963
2 changed files with 28 additions and 4 deletions

View File

@ -7,8 +7,23 @@ import { Tip } from '../tip';
import './title.less';
export class Title extends Component<{ title: TitleContent; className?: string; onClick?: () => void }> {
constructor(props: any) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e: React.MouseEvent) {
const { title, onClick } = this.props as any;
const url = title && (title.docUrl || title.url);
if (url) {
window.open(url);
// 防止触发行操作(如折叠面板)
e.stopPropagation();
}
// TODO: 操作交互冲突,目前 mixedSetter 仅有 2 个 setter 注册时用到了 onClick
onClick && onClick(e);
}
render() {
let { title, className, onClick } = this.props;
let { title, className } = this.props;
if (title == null) {
return null;
}
@ -40,7 +55,7 @@ export class Title extends Component<{ title: TitleContent; className?: string;
'has-tip': !!tip,
'only-icon': !title.label
})}
onClick={onClick}
onClick={this.handleClick}
>
{icon ? <b className="lc-title-icon">{icon}</b> : null}
{title.label ? intl(title.label) : null}

View File

@ -28,6 +28,11 @@ export class Field extends Component<FieldProps> {
display: this.props.defaultDisplay || 'inline',
};
constructor(props: any) {
super(props);
this.handleClear = this.handleClear.bind(this);
}
private toggleExpand = () => {
const { onExpandChange } = this.props;
const collapsed = !this.state.collapsed;
@ -68,6 +73,10 @@ export class Field extends Component<FieldProps> {
});
this.dispose = () => observer.disconnect();
}
private handleClear(e: React.MouseEvent) {
e.stopPropagation();
this.props.onClear && this.props.onClear();
}
componentDidMount() {
const { defaultDisplay } = this.props;
if (!defaultDisplay || defaultDisplay === 'inline') {
@ -118,7 +127,7 @@ export class Field extends Component<FieldProps> {
>
<div className="lc-field-head" onClick={isAccordion ? this.toggleExpand : undefined}>
<div className="lc-field-title">
{createValueState(valueState, onClear)}
{createValueState(valueState, this.handleClear)}
<Title title={title || ''} />
<InlineTip position="top">{tipContent}</InlineTip>
</div>
@ -143,7 +152,7 @@ export class Field extends Component<FieldProps> {
*
* TODO: turn number to enum
*/
function createValueState(valueState?: number, onClear?: () => void) {
function createValueState(valueState?: number, onClear?: (e: React.MouseEvent) => void) {
let tip: any = null;
let className = 'lc-valuestate';
let icon: any = null;