@sendgrid/ui-components - npm Package Compare versions

Comparing version 1.44.15 to 1.45.0

package.json

 {
   "name": "@sendgrid/ui-components",
-  "version": "1.44.15",
+  "version": "1.45.0",
   "description": "Reusable UI components for Sendgrid's applications.",
@@ -5,0 +5,0 @@ "main": "index.js",

segment-term/index.d.ts

@@ -25,5 +25,7 @@ import React, { PureComponent } from 'react';
     className?: string;
+    disabled?: boolean;
 }
 export declare class SegmentTerm extends PureComponent<SegmentTermProps> {
     static defaultProps: {
+        disabled: boolean;
         editable: boolean;
@@ -30,0 +32,0 @@ editing: boolean;

segment-term/index.js

@@ -21,8 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     get termControls() {
-        const _a = this.props, { editable, editing, onEdit, onDelete } = _a, attributes = __rest(_a, ["editable", "editing", "onEdit", "onDelete"]);
-        if (editing) {
+        const _a = this.props, { editable, editing, onEdit, onDelete, disabled } = _a, attributes = __rest(_a, ["editable", "editing", "onEdit", "onDelete", "disabled"]);
+        if (editing && !disabled) {
             return (onDelete && (React.createElement("a", { className: "btn btn-small btn-trash", style: { cursor: 'pointer', color: ScssVars['slate-60'] }, onClick: onDelete },
                 React.createElement(Icon, { type: "trash" }))));
         }
-        if (editable) {
+        if (editable && !disabled) {
             return (React.createElement(Icon, { type: "pencil", className: cn('segment-term-edit', Styles['segment-term-edit']), style: { opacity: 1, color: ScssVars['slate-60'] }, onClick: editable && !editing ? onEdit : undefined }));
@@ -33,3 +33,3 @@ }
     render() {
-        const _a = this.props, { hasAddButton, hasQueryToggle, queryToggleKey, hasSeparator, editable, editing, label, onAddButtonClick, onQueryToggle, queryName, queryToggle, radios, renderAlert, renderInputs, title, onDelete, onConfirm, showConfirm, className, onEdit } = _a, attributes = __rest(_a, ["hasAddButton", "hasQueryToggle", "queryToggleKey", "hasSeparator", "editable", "editing", "label", "onAddButtonClick", "onQueryToggle", "queryName", "queryToggle", "radios", "renderAlert", "renderInputs", "title", "onDelete", "onConfirm", "showConfirm", "className", "onEdit"]);
+        const _a = this.props, { hasAddButton, hasQueryToggle, queryToggleKey, hasSeparator, editable, editing, label, onAddButtonClick, onQueryToggle, queryName, queryToggle, radios, renderAlert, renderInputs, title, onDelete, onConfirm, showConfirm, className, onEdit, disabled } = _a, attributes = __rest(_a, ["hasAddButton", "hasQueryToggle", "queryToggleKey", "hasSeparator", "editable", "editing", "label", "onAddButtonClick", "onQueryToggle", "queryName", "queryToggle", "radios", "renderAlert", "renderInputs", "title", "onDelete", "onConfirm", "showConfirm", "className", "onEdit", "disabled"]);
         const queryToggleAnd = queryToggle === 'and';
@@ -49,3 +49,5 @@ return (React.createElement("div", Object.assign({ className: cn('segment-term-wrap', Styles['segment-term-wrap'], className, {
                     'has-separator': hasSeparator,
-                    [Styles['is-editable']]: editing,
+                    [Styles['is-disabled']]: disabled,
+                    'is-disabled': disabled,
+                    [Styles['is-editable']]: editing && !disabled,
                     'is-editable': editing,
@@ -61,6 +63,13 @@ [Styles['is-live']]: !editable,
                 renderAlert && renderAlert()),
-            hasQueryToggle && (React.createElement("div", { className: cn('segment-term-switch', Styles['segment-term-switch']), key: queryToggleKey },
-                React.createElement(ToggleButtons, { keys: ['and', 'or'], selectedKey: queryToggle, onChange: (event, key) => onQueryToggle(key) }, (and, or) => (React.createElement(React.Fragment, null,
+            hasQueryToggle && (React.createElement("div", { className: cn('segment-term-switch', Styles['segment-term-switch'], {
+                    'segment-term-switch--disabled': disabled,
+                    [Styles['segment-term-switch--disabled']]: disabled,
+                    'segment-term-switch--disabled-and': disabled && queryToggle === 'and',
+                    [Styles['segment-term-switch--disabled-and']]: disabled && queryToggle === 'and',
+                    'segment-term-switch--disabled-or': disabled && queryToggle === 'or',
+                    [Styles['segment-term-switch--disabled-or']]: disabled && queryToggle === 'or',
+                }), key: queryToggleKey },
+                React.createElement(ToggleButtons, { keys: ['and', 'or'], selectedKey: queryToggle, onChange: (event, key) => onQueryToggle(key) }, (and, or) => (React.createElement(React.Fragment, null, disabled ? (React.createElement("p", { className: Styles['operator--disabled'] }, queryToggle)) : (React.createElement(React.Fragment, null,
                     React.createElement(Button, Object.assign({}, and, { small: true, type: "group-item" }), "AND"),
-                    React.createElement(Button, Object.assign({}, or, { small: true, type: "group-item" }), "OR")))))),
+                    React.createElement(Button, Object.assign({}, or, { small: true, type: "group-item" }), "OR")))))))),
             hasAddButton && (React.createElement(ButtonList, null,
@@ -71,2 +80,3 @@ React.createElement(Button, { type: "secondary", icon: "plus", onClick: onAddButtonClick }, "Add Condition")))));
 SegmentTerm.defaultProps = {
+    disabled: false,
     editable: false,
@@ -73,0 +83,0 @@ editing: false,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

980598

increased by0.11%

Lines of code

9394

increased by0.14%

No dependency changes