@rh-support/components 1.2.15 → 1.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/cjs/InlineEdit/InlineEdit.d.ts +4 -0
  2. package/lib/cjs/InlineEdit/InlineEdit.d.ts.map +1 -1
  3. package/lib/cjs/InlineEdit/InlineEdit.js +12 -3
  4. package/lib/cjs/InlineEdit/inlineEdit.css +15 -0
  5. package/lib/esm/InlineEdit/InlineEdit.d.ts +4 -0
  6. package/lib/esm/InlineEdit/InlineEdit.d.ts.map +1 -1
  7. package/lib/esm/InlineEdit/InlineEdit.js +14 -4
  8. package/lib/esm/InlineEdit/inlineEdit.css +15 -0
  9. package/package.json +2 -2
package/lib/cjs/InlineEdit/InlineEdit.d.ts CHANGED
@@ -19,6 +19,10 @@ interface IProps {
19
19
  onSave: any;
20
20
  onCancel: any;
21
21
  cancelOnToggle?: boolean;
22
+ charCount: number;
23
+ charTotal: number;
24
+ cancelToggleState?: boolean;
25
+ saveToggleState?: boolean;
22
26
  collapseOnBlur?: boolean;
23
27
  saveOnBlur?: boolean;
24
28
  saveDisabled?: boolean;
package/lib/cjs/InlineEdit/InlineEdit.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAmKhC;kBAnKQ,UAAU;;;AAsKnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAqLhC;kBArLQ,UAAU;;;AAwLnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
package/lib/cjs/InlineEdit/InlineEdit.js CHANGED
@@ -117,6 +117,13 @@ function InlineEdit(props) {
117
117
  // editingTrueOnStart is a state to track if inlineEdit component is open on start, we don't want to focus
118
118
  // on input/textareat in this situation as we may have other form elements on page that we want to focus
119
119
  var _c = __read(react_1.useState(!props.initialIsEditing), 2), canAutoSetFocus = _c[0], setCanAutoSfocus = _c[1];
120
+ // To close InlineEdit input and show content whenever cancel is clicked
121
+ react_1.useEffect(function () {
122
+ if (isEditing) {
123
+ setIsEditing(!isEditing);
124
+ }
125
+ // eslint-disable-next-line react-hooks/exhaustive-deps
126
+ }, [props.cancelToggleState, props.saveToggleState]);
120
127
  var onEditClicked = function (e) {
121
128
  setCanAutoSfocus(true);
122
129
  e.preventDefault();
@@ -211,19 +218,21 @@ function InlineEdit(props) {
211
218
  react_1.default.createElement(react_i18next_1.Trans, null, props.cancelLabel))));
212
219
  };
213
220
  var canShowContent = !isEditing && props.allowInlineEdit && props.content;
221
+ var showCount = " " + props.charCount + " / " + props.charTotal;
214
222
  return (react_1.default.createElement("div", { className: "form-group edit-question " + props.formClassName, id: props.formId },
215
223
  !props.hideLabel && (react_1.default.createElement(react_1.default.Fragment, null,
216
224
  react_1.default.createElement("label", __assign({}, props.labelProps),
217
225
  react_1.default.createElement("span", { className: "label-edit" }, props.labelContent),
218
226
  props.helperContent,
219
- renderEditButton()))),
227
+ !props.content && !isEditing ? renderEditButton() : null))),
220
228
  renderSaveCancel(),
229
+ props.hideSaveCancel && isEditing && (react_1.default.createElement("span", { className: "\n " + (props.charCount > props.charTotal ? 'char-count pf-u-danger-color-100' : 'char-count') }, props.charCount ? showCount : null)),
221
230
  canShowContent && !props.usePreformattedTag && (react_1.default.createElement(react_1.default.Fragment, null,
222
231
  react_1.default.createElement("p", { id: props.inputId, style: { display: props.hideLabel ? 'inline' : 'block' } },
223
232
  props.content,
224
- props.hideLabel && (react_1.default.createElement(react_1.default.Fragment, null,
233
+ react_1.default.createElement(react_1.default.Fragment, null,
225
234
  props.helperContent,
226
- renderEditButton())),
235
+ renderEditButton()),
227
236
  props.loadingIndicator && react_1.default.createElement("span", { className: "loading-indicator" }, props.loadingIndicator)))),
228
237
  canShowContent && props.usePreformattedTag && react_1.default.createElement("pre", { id: props.inputId }, props.content),
229
238
  react_1.default.createElement(react_1.default.Fragment, null,
package/lib/cjs/InlineEdit/inlineEdit.css CHANGED
@@ -27,3 +27,18 @@
27
27
  .case-overview .edit-question .loading-indicator {
28
28
  margin-left: 0px;
29
29
  }
30
+
31
+ /* Character Count */
32
+ .char-count {
33
+ float: right;
34
+ position: relative;
35
+ padding-right: var(--pf-global--spacer--4xl);
36
+ margin-right: var(--pf-global--spacer--lg);
37
+ font-size: 12px;
38
+ }
39
+
40
+ @media (max-width: 415px) {
41
+ .char-count {
42
+ padding-right: var(--pf-global--spacer--2xl);
43
+ }
44
+ }
package/lib/esm/InlineEdit/InlineEdit.d.ts CHANGED
@@ -19,6 +19,10 @@ interface IProps {
19
19
  onSave: any;
20
20
  onCancel: any;
21
21
  cancelOnToggle?: boolean;
22
+ charCount: number;
23
+ charTotal: number;
24
+ cancelToggleState?: boolean;
25
+ saveToggleState?: boolean;
22
26
  collapseOnBlur?: boolean;
23
27
  saveOnBlur?: boolean;
24
28
  saveDisabled?: boolean;
package/lib/esm/InlineEdit/InlineEdit.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGnD,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAmKhC;kBAnKQ,UAAU;;;AAsKnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"InlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/InlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAI1B,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAsBD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAqLhC;kBArLQ,UAAU;;;AAwLnB,OAAO,EAAE,UAAU,EAAE,CAAC"}
package/lib/esm/InlineEdit/InlineEdit.js CHANGED
@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
10
10
  import './inlineEdit.css';
11
11
  import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
12
12
  import { isEmpty } from 'lodash';
13
- import React, { useState } from 'react';
13
+ import React, { useEffect, useState } from 'react';
14
14
  import { Trans } from 'react-i18next';
15
15
  const defaultProps = {
16
16
  allowInlineEdit: false,
@@ -37,6 +37,13 @@ function InlineEdit(props) {
37
37
  // editingTrueOnStart is a state to track if inlineEdit component is open on start, we don't want to focus
38
38
  // on input/textareat in this situation as we may have other form elements on page that we want to focus
39
39
  const [canAutoSetFocus, setCanAutoSfocus] = useState(!props.initialIsEditing);
40
+ // To close InlineEdit input and show content whenever cancel is clicked
41
+ useEffect(() => {
42
+ if (isEditing) {
43
+ setIsEditing(!isEditing);
44
+ }
45
+ // eslint-disable-next-line react-hooks/exhaustive-deps
46
+ }, [props.cancelToggleState, props.saveToggleState]);
40
47
  const onEditClicked = (e) => {
41
48
  setCanAutoSfocus(true);
42
49
  e.preventDefault();
@@ -100,19 +107,22 @@ function InlineEdit(props) {
100
107
  React.createElement("button", { type: "button", "data-tracking-id": props.dataTrackingId ? `${props.dataTrackingId}-inline-edit-cancel` : null, className: "btn btn-app btn-link", onClick: onCancelClicked },
101
108
  React.createElement(Trans, null, props.cancelLabel))));
102
109
  const canShowContent = !isEditing && props.allowInlineEdit && props.content;
110
+ const showCount = ` ${props.charCount} / ${props.charTotal}`;
103
111
  return (React.createElement("div", { className: `form-group edit-question ${props.formClassName}`, id: props.formId },
104
112
  !props.hideLabel && (React.createElement(React.Fragment, null,
105
113
  React.createElement("label", Object.assign({}, props.labelProps),
106
114
  React.createElement("span", { className: "label-edit" }, props.labelContent),
107
115
  props.helperContent,
108
- renderEditButton()))),
116
+ !props.content && !isEditing ? renderEditButton() : null))),
109
117
  renderSaveCancel(),
118
+ props.hideSaveCancel && isEditing && (React.createElement("span", { className: `
119
+ ${props.charCount > props.charTotal ? 'char-count pf-u-danger-color-100' : 'char-count'}` }, props.charCount ? showCount : null)),
110
120
  canShowContent && !props.usePreformattedTag && (React.createElement(React.Fragment, null,
111
121
  React.createElement("p", { id: props.inputId, style: { display: props.hideLabel ? 'inline' : 'block' } },
112
122
  props.content,
113
- props.hideLabel && (React.createElement(React.Fragment, null,
123
+ React.createElement(React.Fragment, null,
114
124
  props.helperContent,
115
- renderEditButton())),
125
+ renderEditButton()),
116
126
  props.loadingIndicator && React.createElement("span", { className: "loading-indicator" }, props.loadingIndicator)))),
117
127
  canShowContent && props.usePreformattedTag && React.createElement("pre", { id: props.inputId }, props.content),
118
128
  React.createElement(React.Fragment, null,
package/lib/esm/InlineEdit/inlineEdit.css CHANGED
@@ -27,3 +27,18 @@
27
27
  .case-overview .edit-question .loading-indicator {
28
28
  margin-left: 0px;
29
29
  }
30
+
31
+ /* Character Count */
32
+ .char-count {
33
+ float: right;
34
+ position: relative;
35
+ padding-right: var(--pf-global--spacer--4xl);
36
+ margin-right: var(--pf-global--spacer--lg);
37
+ font-size: 12px;
38
+ }
39
+
40
+ @media (max-width: 415px) {
41
+ .char-count {
42
+ padding-right: var(--pf-global--spacer--2xl);
43
+ }
44
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/components",
3
- "version": "1.2.15",
3
+ "version": "1.2.16",
4
4
  "description": "Contains all reusabel components for support app",
5
5
  "author": "Vikas Rathee <vrathee@redhat.com>",
6
6
  "license": "ISC",
@@ -126,5 +126,5 @@
126
126
  "not ie <= 11",
127
127
  "not op_mini all"
128
128
  ],
129
- "gitHead": "5bcb813517a4aff493587c48665551d4aeb1d00e"
129
+ "gitHead": "af45effefff4d9434a171992428c249f80fc84ce"
130
130
  }