diff --git a/packages/survey-creator-angular/src/components/action-button.component.html b/packages/survey-creator-angular/src/components/action-button.component.html index a180101f19..eec0b5fb7d 100644 --- a/packages/survey-creator-angular/src/components/action-button.component.html +++ b/packages/survey-creator-angular/src/components/action-button.component.html @@ -1,6 +1,18 @@ - {{text}} - {{text}} + + {{text}} + {{text}} + + + + + + + + + \ No newline at end of file diff --git a/packages/survey-creator-angular/src/components/action-button.component.ts b/packages/survey-creator-angular/src/components/action-button.component.ts index 5b944eb818..bf30162a87 100644 --- a/packages/survey-creator-angular/src/components/action-button.component.ts +++ b/packages/survey-creator-angular/src/components/action-button.component.ts @@ -14,6 +14,7 @@ export class ActionButtonComponent extends EmbeddedViewContentComponent { @Input() disabled: boolean = false; @Input() text: string = ""; @Input() title: string = ""; + @Input() iconName: string = ""; @Input() allowBubble: boolean = false; onClick(event: any) { this.click(); diff --git a/packages/survey-creator-angular/src/questions/question-link-value.component.html b/packages/survey-creator-angular/src/questions/question-link-value.component.html index 375b9b5d92..4c305091b3 100644 --- a/packages/survey-creator-angular/src/questions/question-link-value.component.html +++ b/packages/survey-creator-angular/src/questions/question-link-value.component.html @@ -1,6 +1,6 @@ + [disabled]="!model.isClickable" [classes]="model.linkSetButtonCssClasses" [title]="model.tooltip" [iconName]="model.iconName"> { +interface IActionButtonProps { + classes?; + click: () => void; + selected?: boolean; + disabled?: boolean; + text?: string; + title?: string; + iconName?: string; + allowBubble?: boolean; +} +export class ActionButton extends SurveyElementBase { renderElement(): JSX.Element { - let classes = this.props.classes + " svc-action-button"; - if (this.props.selected) { - classes += " svc-action-button--selected"; + const classes = new CssClassBuilder() + .append(this.props.classes) + .append("svc-action-button") + .append("svc-action-button--selected", !!this.props.selected) + .append("svc-action-button--disabled", !!this.props.disabled) + .toString(); + if (this.props.iconName) { + return this.renderIcon(classes); } + return this.renderButtonText(classes); + } + + renderButtonText(classes): JSX.Element { if (this.props.disabled) { - classes += " svc-action-button--disabled"; return {this.props.text}; } return ( @@ -31,4 +50,28 @@ export class ActionButton extends SurveyElementBase { ); } + renderIcon(classes): JSX.Element { + classes += " svc-action-button--icon"; + if (this.props.disabled) { + return ; + } + return ( + <> + {attachKey2click( + { + if (!this.props.allowBubble) { + e.stopPropagation(); + } + this.props.click(); + }} + title={this.props.title} + > + + + )} + + ); + } } +ReactElementFactory.Instance.registerElement("svc-action-button", (props: any) => { return React.createElement(ActionButton, props); }); \ No newline at end of file diff --git a/packages/survey-creator-react/src/QuestionLinkValue.tsx b/packages/survey-creator-react/src/QuestionLinkValue.tsx index 279eae3e97..64aef4b363 100644 --- a/packages/survey-creator-react/src/QuestionLinkValue.tsx +++ b/packages/survey-creator-react/src/QuestionLinkValue.tsx @@ -36,6 +36,7 @@ export class SurveyQuestionLinkValue extends SurveyQuestionElementBase { disabled={!this.question.isClickable} text={this.question.linkValueText} title={this.question.tooltip} + iconName={this.question.iconName} > {this.renderClear()} diff --git a/packages/survey-creator-vue/src/components/ActionButton.vue b/packages/survey-creator-vue/src/components/ActionButton.vue index b35faddf1c..e22546cc31 100644 --- a/packages/survey-creator-vue/src/components/ActionButton.vue +++ b/packages/survey-creator-vue/src/components/ActionButton.vue @@ -1,23 +1,42 @@ diff --git a/packages/survey-creator-vue/src/questions/LinkValue.vue b/packages/survey-creator-vue/src/questions/LinkValue.vue index d675372ec6..a06f9f5fb3 100644 --- a/packages/survey-creator-vue/src/questions/LinkValue.vue +++ b/packages/survey-creator-vue/src/questions/LinkValue.vue @@ -7,6 +7,7 @@ :disabled="!question.isClickable" :classes="question.linkSetButtonCssClasses" :title="question.tooltip" + :iconName="question.iconName" >