@rh-support/components 2.0.4 → 2.0.7

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 (91) hide show
  1. package/lib/cjs/AlertMessage/AlertMessage.js +2 -2
  2. package/lib/cjs/AlertMessage/index.d.ts +0 -1
  3. package/lib/cjs/AlertMessage/index.d.ts.map +1 -1
  4. package/lib/cjs/AlertMessage/index.js +1 -1
  5. package/lib/cjs/ConfirmationModal/ConfirmationModal.stories.d.ts +0 -6
  6. package/lib/cjs/ConfirmationModal/ConfirmationModal.stories.d.ts.map +1 -1
  7. package/lib/cjs/ConfirmationModal/ConfirmationModal.stories.js +29 -69
  8. package/lib/cjs/CustomContentLoader/CustomContentLoader.d.ts.map +1 -1
  9. package/lib/cjs/CustomContentLoader/CustomContentLoader.js +23 -23
  10. package/lib/cjs/CustomTextInput/CustomTextInput.js +3 -3
  11. package/lib/cjs/DropDownList/SearchableList.d.ts.map +1 -1
  12. package/lib/cjs/DropDownList/SearchableList.js +2 -0
  13. package/lib/cjs/DropDownList/dropdownUtils.d.ts.map +1 -1
  14. package/lib/cjs/DropDownList/dropdownUtils.js +1 -0
  15. package/lib/cjs/Functional/CaseContactsSelectorExternal.js +2 -2
  16. package/lib/cjs/InlineEdit/InlineEdit.js +2 -2
  17. package/lib/cjs/InlineEdit/NewInlineEdit.js +2 -2
  18. package/lib/cjs/LoadingDots/index.d.ts +0 -1
  19. package/lib/cjs/LoadingDots/index.d.ts.map +1 -1
  20. package/lib/cjs/LoadingDots/index.js +1 -1
  21. package/lib/cjs/TextAreaResizable/TextAreaResizable.js +5 -2
  22. package/lib/esm/AlertMessage/AlertMessage.js +2 -2
  23. package/lib/esm/AlertMessage/index.d.ts +0 -1
  24. package/lib/esm/AlertMessage/index.d.ts.map +1 -1
  25. package/lib/esm/AlertMessage/index.js +1 -1
  26. package/lib/esm/ConfirmationModal/ConfirmationModal.stories.d.ts +0 -6
  27. package/lib/esm/ConfirmationModal/ConfirmationModal.stories.d.ts.map +1 -1
  28. package/lib/esm/ConfirmationModal/ConfirmationModal.stories.js +19 -18
  29. package/lib/esm/CustomContentLoader/CustomContentLoader.d.ts.map +1 -1
  30. package/lib/esm/CustomContentLoader/CustomContentLoader.js +23 -23
  31. package/lib/esm/CustomTextInput/CustomTextInput.js +1 -1
  32. package/lib/esm/DropDownList/SearchableList.d.ts.map +1 -1
  33. package/lib/esm/DropDownList/SearchableList.js +2 -0
  34. package/lib/esm/DropDownList/dropdownUtils.d.ts.map +1 -1
  35. package/lib/esm/DropDownList/dropdownUtils.js +1 -0
  36. package/lib/esm/Functional/CaseContactsSelectorExternal.js +1 -1
  37. package/lib/esm/InlineEdit/InlineEdit.js +1 -1
  38. package/lib/esm/InlineEdit/NewInlineEdit.js +1 -1
  39. package/lib/esm/LoadingDots/index.d.ts +0 -1
  40. package/lib/esm/LoadingDots/index.d.ts.map +1 -1
  41. package/lib/esm/LoadingDots/index.js +1 -1
  42. package/lib/esm/TextAreaResizable/TextAreaResizable.js +1 -1
  43. package/package.json +8 -24
  44. package/lib/cjs/AlertMessage/AlertMessage.stories.d.ts +0 -12
  45. package/lib/cjs/AlertMessage/AlertMessage.stories.d.ts.map +0 -1
  46. package/lib/cjs/AlertMessage/AlertMessage.stories.js +0 -29
  47. package/lib/cjs/DropDownList/Dropdownlist.stories.d.ts +0 -17
  48. package/lib/cjs/DropDownList/Dropdownlist.stories.d.ts.map +0 -1
  49. package/lib/cjs/DropDownList/Dropdownlist.stories.js +0 -253
  50. package/lib/cjs/LoadingDots/LoadingDots.stories.d.ts +0 -10
  51. package/lib/cjs/LoadingDots/LoadingDots.stories.d.ts.map +0 -1
  52. package/lib/cjs/LoadingDots/LoadingDots.stories.js +0 -16
  53. package/lib/cjs/LoadingIndicator/LoadingIndicator.stories.d.ts +0 -11
  54. package/lib/cjs/LoadingIndicator/LoadingIndicator.stories.d.ts.map +0 -1
  55. package/lib/cjs/LoadingIndicator/LoadingIndicator.stories.js +0 -18
  56. package/lib/cjs/Table/PFTable.stories.d.ts +0 -20
  57. package/lib/cjs/Table/PFTable.stories.d.ts.map +0 -1
  58. package/lib/cjs/Table/PFTable.stories.js +0 -81
  59. package/lib/cjs/demo/Demo.css +0 -3
  60. package/lib/cjs/demo/Demo.d.ts +0 -13
  61. package/lib/cjs/demo/Demo.d.ts.map +0 -1
  62. package/lib/cjs/demo/Demo.js +0 -42
  63. package/lib/cjs/demo/Demo.md +0 -0
  64. package/lib/cjs/demo/Demo.scss +0 -3
  65. package/lib/cjs/demo/index.d.ts +0 -3
  66. package/lib/cjs/demo/index.d.ts.map +0 -1
  67. package/lib/cjs/demo/index.js +0 -23
  68. package/lib/esm/AlertMessage/AlertMessage.stories.d.ts +0 -12
  69. package/lib/esm/AlertMessage/AlertMessage.stories.d.ts.map +0 -1
  70. package/lib/esm/AlertMessage/AlertMessage.stories.js +0 -20
  71. package/lib/esm/DropDownList/Dropdownlist.stories.d.ts +0 -17
  72. package/lib/esm/DropDownList/Dropdownlist.stories.d.ts.map +0 -1
  73. package/lib/esm/DropDownList/Dropdownlist.stories.js +0 -156
  74. package/lib/esm/LoadingDots/LoadingDots.stories.d.ts +0 -10
  75. package/lib/esm/LoadingDots/LoadingDots.stories.d.ts.map +0 -1
  76. package/lib/esm/LoadingDots/LoadingDots.stories.js +0 -8
  77. package/lib/esm/LoadingIndicator/LoadingIndicator.stories.d.ts +0 -11
  78. package/lib/esm/LoadingIndicator/LoadingIndicator.stories.d.ts.map +0 -1
  79. package/lib/esm/LoadingIndicator/LoadingIndicator.stories.js +0 -9
  80. package/lib/esm/Table/PFTable.stories.d.ts +0 -20
  81. package/lib/esm/Table/PFTable.stories.d.ts.map +0 -1
  82. package/lib/esm/Table/PFTable.stories.js +0 -73
  83. package/lib/esm/demo/Demo.css +0 -3
  84. package/lib/esm/demo/Demo.d.ts +0 -13
  85. package/lib/esm/demo/Demo.d.ts.map +0 -1
  86. package/lib/esm/demo/Demo.js +0 -26
  87. package/lib/esm/demo/Demo.md +0 -0
  88. package/lib/esm/demo/Demo.scss +0 -3
  89. package/lib/esm/demo/index.d.ts +0 -3
  90. package/lib/esm/demo/index.d.ts.map +0 -1
  91. package/lib/esm/demo/index.js +0 -2
@@ -1,81 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.empty = exports.Default = void 0;
7
- var addon_actions_1 = require("@storybook/addon-actions");
8
- var addon_knobs_1 = require("@storybook/addon-knobs");
9
- var react_1 = __importDefault(require("react"));
10
- var index_1 = require("./index");
11
- // @ts-ignore
12
- var README_md_1 = __importDefault(require("./README.md"));
13
- exports.default = {
14
- title: 'Components/PFTable',
15
- component: index_1.PFTable,
16
- decorators: [addon_knobs_1.withKnobs],
17
- };
18
- var columnsData = [
19
- {
20
- id: 'repo',
21
- title: 'Repositories',
22
- sortable: true,
23
- accessor: function (data) { return data.repo; },
24
- },
25
- {
26
- id: 'branch',
27
- title: 'Branches',
28
- accessor: function (data) { return data.branch; },
29
- },
30
- {
31
- id: 'pr',
32
- title: 'Pull requests',
33
- accessor: function (data) { return data.pr; },
34
- },
35
- {
36
- id: 'workspace',
37
- title: 'Workspaces',
38
- accessor: function (data) { return data.workspace; },
39
- },
40
- ];
41
- var tableData = [
42
- {
43
- repo: 'Repo one',
44
- branch: 'Branch one',
45
- pr: ' Pull Request one',
46
- workspace: 'Workspace one',
47
- },
48
- {
49
- repo: 'Repo two',
50
- branch: 'Branch two',
51
- pr: ' Pull Request two',
52
- workspace: 'Workspace two',
53
- },
54
- {
55
- repo: 'Repo three',
56
- branch: 'Branch three',
57
- pr: ' Pull Request three',
58
- workspace: 'Workspace three',
59
- },
60
- {
61
- repo: 'Repo four',
62
- branch: 'Branch four',
63
- pr: ' Pull Request four',
64
- workspace: 'Workspace four',
65
- },
66
- ];
67
- var Default = function () { return (react_1.default.createElement(react_1.default.Fragment, null,
68
- react_1.default.createElement(index_1.Table, { columns: columnsData, data: tableData },
69
- react_1.default.createElement(index_1.PFTable, { "aria-label": "case-list", className: "case-list-table", pagination: false, onRowClick: addon_actions_1.action('row clicked'), onSortChange: addon_actions_1.action('sort clicked'), onSelect: addon_actions_1.action('on Select') })))); };
70
- exports.Default = Default;
71
- var empty = function () { return (react_1.default.createElement(react_1.default.Fragment, null,
72
- react_1.default.createElement(index_1.Table, { columns: columnsData, data: [] },
73
- react_1.default.createElement(index_1.PFTable, { "aria-label": "case-list", className: "case-list-table", pagination: false, onRowClick: addon_actions_1.action('row clicked'), onSortChange: addon_actions_1.action('sort clicked'), onSelect: addon_actions_1.action('on Select') })))); };
74
- exports.empty = empty;
75
- exports.Default.story = {
76
- parameters: {
77
- notes: {
78
- markdown: README_md_1.default,
79
- },
80
- },
81
- };
@@ -1,3 +0,0 @@
1
- .demo-class {
2
- color: red;
3
- }
@@ -1,13 +0,0 @@
1
- import './Demo.css';
2
- import './Demo.scss';
3
- import React from 'react';
4
- interface IProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
5
- message: string;
6
- show?: boolean;
7
- }
8
- declare function Demo(props: IProps): JSX.Element;
9
- declare namespace Demo {
10
- var defaultProps: Partial<IProps>;
11
- }
12
- export default Demo;
13
- //# sourceMappingURL=Demo.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../../src/demo/Demo.tsx"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,MAAO,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAClG,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAMD,iBAAS,IAAI,CAAC,KAAK,EAAE,MAAM,eAU1B;kBAVQ,IAAI;;;AAYb,eAAe,IAAI,CAAC"}
@@ -1,42 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
- var __importDefault = (this && this.__importDefault) || function (mod) {
25
- return (mod && mod.__esModule) ? mod : { "default": mod };
26
- };
27
- Object.defineProperty(exports, "__esModule", { value: true });
28
- require("./Demo.css");
29
- require("./Demo.scss");
30
- var react_1 = __importDefault(require("react"));
31
- var defaultProps = {
32
- show: true,
33
- };
34
- function Demo(props) {
35
- var show = props.show, message = props.message, className = props.className, restProps = __rest(props, ["show", "message", "className"]);
36
- if (!show) {
37
- return null;
38
- }
39
- return (react_1.default.createElement("div", __assign({ className: "demo-class demo-class-background" + (className ? ' ' + className : '') }, restProps), message));
40
- }
41
- Demo.defaultProps = defaultProps;
42
- exports.default = Demo;
File without changes
@@ -1,3 +0,0 @@
1
- .demo-class-background {
2
- background: green;
3
- }
@@ -1,3 +0,0 @@
1
- declare const Demo: Promise<typeof import("./Demo")>;
2
- export default Demo;
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/demo/index.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,kCAAmB,CAAC;AAE9B,eAAe,IAAI,CAAC"}
@@ -1,23 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
13
- });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- Object.defineProperty(exports, "__esModule", { value: true });
22
- var Demo = Promise.resolve().then(function () { return __importStar(require('./Demo')); });
23
- exports.default = Demo;
@@ -1,12 +0,0 @@
1
- /// <reference types="react" />
2
- import { AlertMessage } from './AlertMessage';
3
- declare const _default: {
4
- title: string;
5
- component: typeof AlertMessage;
6
- decorators: ((...args: any) => any)[];
7
- };
8
- export default _default;
9
- export declare const Alert: () => JSX.Element;
10
- export declare const DangerAlert: () => JSX.Element;
11
- export declare const WarningAlert: () => JSX.Element;
12
- //# sourceMappingURL=AlertMessage.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AlertMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/AlertMessage/AlertMessage.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,YAAY,EAAa,MAAM,gBAAgB,CAAC;;;;;;AAEzD,wBAIE;AAYF,eAAO,MAAM,KAAK,mBAOjB,CAAC;AACF,eAAO,MAAM,WAAW,mBAOvB,CAAC;AACF,eAAO,MAAM,YAAY,mBAExB,CAAC"}
@@ -1,20 +0,0 @@
1
- import { action } from '@storybook/addon-actions';
2
- import { select, text, withKnobs } from '@storybook/addon-knobs';
3
- import React from 'react';
4
- import { AlertMessage, AlertType } from './AlertMessage';
5
- export default {
6
- title: 'Components/AlertMessage',
7
- component: AlertMessage,
8
- decorators: [withKnobs],
9
- };
10
- const options = {
11
- Warning: AlertType.WARNING,
12
- Danger: AlertType.DANGER,
13
- Info: AlertType.INFO,
14
- Success: AlertType.SUCCESS,
15
- };
16
- const label = 'Type';
17
- const defaultValue = AlertType.WARNING;
18
- export const Alert = () => (React.createElement(AlertMessage, { show: true, title: text('Title', 'This is an alert'), onClose: action('Close button clicked'), variant: select(label, options, defaultValue) }));
19
- export const DangerAlert = () => (React.createElement(AlertMessage, { show: true, title: text('Title', 'This is a danger alert'), onClose: action('Close button clicked'), variant: AlertType.DANGER }));
20
- export const WarningAlert = () => (React.createElement(AlertMessage, { show: true, title: text('Title', 'This is a warning alert'), variant: AlertType.WARNING }));
@@ -1,17 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- decorators: ((...args: any) => any)[];
5
- };
6
- export default _default;
7
- export declare const AsyncDropdown: () => JSX.Element;
8
- export declare const AsyncMultiDropdown: () => JSX.Element;
9
- export declare const DropdownList: () => JSX.Element;
10
- export declare const Searchable: () => JSX.Element;
11
- export declare const DropdownListInvalid: () => JSX.Element;
12
- export declare const SearchableInvalid: () => JSX.Element;
13
- export declare const SearchableMultiSelect: () => JSX.Element;
14
- export declare const MultiSelectDropdownList: () => JSX.Element;
15
- export declare const MultiSelectSearchableDropdownList: () => JSX.Element;
16
- export declare const MultiSelectSearchableDropdownListWithChip: () => JSX.Element;
17
- //# sourceMappingURL=Dropdownlist.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Dropdownlist.stories.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/Dropdownlist.stories.tsx"],"names":[],"mappings":";;;;;AASA,wBAGE;AAwPF,eAAO,MAAM,aAAa,mBAA2B,CAAC;AAEtD,eAAO,MAAM,kBAAkB,mBAAgC,CAAC;AAEhE,eAAO,MAAM,YAAY,mBAKxB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAEtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAM/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAM7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAMjC,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAAiC,CAAC;AAEtE,eAAO,MAAM,iCAAiC,mBAA2C,CAAC;AAE1F,eAAO,MAAM,yCAAyC,mBAAoD,CAAC"}
@@ -1,156 +0,0 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import { Chip, ChipGroup } from '@patternfly/react-core';
11
- import { getDropdownBtnPlaceholder, toOption, toOptions } from '@rh-support/utils';
12
- import { array, boolean, number, text, withKnobs } from '@storybook/addon-knobs';
13
- import React, { useMemo, useState } from 'react';
14
- import { AsyncDropDownList, AsyncMultiDropDownList } from './AsyncDropDownList';
15
- import { Dropdown } from './DropDownList';
16
- import { MultiSelectDropDownList } from './MultiSelectDropdownList';
17
- export default {
18
- title: 'Components/Dropdown',
19
- decorators: [withKnobs],
20
- };
21
- const PER_PAGE = 50;
22
- const SEARCH_URI = 'https://api.github.com/search/users';
23
- function makeAndHandleRequest(query, page = 1) {
24
- return fetch(`${SEARCH_URI}?q=${query}+in:login&page=${page}&per_page=${PER_PAGE}`)
25
- .then((resp) => resp.json())
26
- .then(({ items, total_count }) => {
27
- /* eslint-disable-line camelcase */
28
- const options = items.map((i) => ({
29
- avatar_url: i.avatar_url,
30
- id: i.id,
31
- login: i.login,
32
- }));
33
- return { options, total_count };
34
- });
35
- }
36
- function AsyncComponent() {
37
- const [items, setItems] = useState([]);
38
- const [isFetching, setIsFetching] = useState(false);
39
- const [selectedItem, setSelectedItem] = useState({ login: 'karan' });
40
- const fetchUsers = (inputVal) => __awaiter(this, void 0, void 0, function* () {
41
- try {
42
- setIsFetching(true);
43
- const userResponse = yield makeAndHandleRequest(inputVal);
44
- setItems(userResponse);
45
- }
46
- catch (e) {
47
- // silently fails
48
- }
49
- finally {
50
- setIsFetching(false);
51
- }
52
- });
53
- const onDropdownChange = (item) => {
54
- setSelectedItem(item.label);
55
- };
56
- const onPaginate = (shownResults, inputVal, e) => {
57
- console.log(inputVal);
58
- // fetch more results here
59
- };
60
- const onOuterClick = () => {
61
- // optional if you don't want to show the last results if user focuses out of dropdown
62
- setItems({ options: [] });
63
- };
64
- const onDropdownClear = () => {
65
- setSelectedItem({ login: '' });
66
- };
67
- // this is the most important part to memoize the selected item. If you don't then every time
68
- // new results are fetched the dropdown will render and toOption always create a new object
69
- // forcing dropdown to render and overriding the input value
70
- const memoizedSelectedItem = useMemo(() => toOption(selectedItem, { labelKey: 'login' }), [selectedItem]);
71
- return (React.createElement(AsyncDropDownList, { placeholder: text('Placeholder', 'Select a user'), id: "user-async-selector", selectedItem: memoizedSelectedItem, list: items
72
- ? toOptions(items.options, {
73
- labelKey: 'login',
74
- childrenKey: 'children',
75
- })
76
- : [], title: `Select a Cluster`, onOuterClick: onOuterClick, onChange: onDropdownChange, onSearch: fetchUsers, delay: number('Delay', 300), useCache: boolean('Use Cache', true), isLoadingList: isFetching, paginate: boolean('Paginate', true), onPaginate: onPaginate, maxResults: number('Max Results', PER_PAGE - 1), emptyListLabel: text('Empty Label', 'No results found'), onClearSelection: onDropdownClear }));
77
- }
78
- function AsyncMultiComponent() {
79
- const [items, setItems] = useState([]);
80
- const [isFetching, setIsFetching] = useState(false);
81
- const [selectedItems, setSelectedItems] = useState([{ login: 'karan' }]);
82
- const fetchUsers = (inputVal) => __awaiter(this, void 0, void 0, function* () {
83
- try {
84
- setIsFetching(true);
85
- const userResponse = yield makeAndHandleRequest(inputVal);
86
- setItems(userResponse);
87
- }
88
- catch (e) {
89
- // silently fails
90
- }
91
- finally {
92
- setIsFetching(false);
93
- }
94
- });
95
- const onDropdownChange = (item) => {
96
- setSelectedItems(item.map((i) => i.value));
97
- };
98
- const onPaginate = (shownResults, inputVal, e) => {
99
- console.log(inputVal);
100
- // fetch more results here
101
- };
102
- const onOuterClick = () => {
103
- // optional if you don't want to show the last results if user focuses out of dropdown
104
- setItems({ options: [] });
105
- };
106
- const onDropdownClear = () => {
107
- setSelectedItems([]);
108
- };
109
- // this is the most important part to memoize the selected item. If you don't then every time
110
- // new results are fetched the dropdown will render and toOption always create a new object
111
- // forcing dropdown to render and overriding the input value
112
- const memoizedSelectedItems = useMemo(() => toOptions(selectedItems, { labelKey: 'login' }), [selectedItems]);
113
- return (React.createElement(AsyncMultiDropDownList, { placeholder: text('PlaceHolder', 'Select multiple users'), id: "user-async-selector", selectedItems: memoizedSelectedItems, list: items
114
- ? toOptions(items.options, {
115
- labelKey: 'login',
116
- childrenKey: 'children',
117
- })
118
- : [], title: `Select a Cluster`, onOuterClick: onOuterClick, onChange: onDropdownChange, onSearch: fetchUsers, delay: number('Delay', 300), useCache: boolean('Use Cache', true), isLoadingList: isFetching, paginate: boolean('Paginate', true), onPaginate: onPaginate, maxResults: number('Max Results', PER_PAGE - 1), emptyListLabel: text('Empty Label', 'No results found'), onClearSelection: onDropdownClear }));
119
- }
120
- function MultiSelectComponent() {
121
- const [selectedItems, setSelectedItems] = useState([]);
122
- const onChange = (newItems) => {
123
- setSelectedItems(newItems.map((item) => item.label));
124
- };
125
- return (React.createElement(MultiSelectDropDownList, { title: "Multi", selectedItems: toOptions(selectedItems), placeholder: getDropdownBtnPlaceholder(text('Placeholder', 'Choose a color'), selectedItems, 'colors', 3, 'All colors selected'), onChange: onChange, list: toOptions(array('List', ['Green', 'Red', 'Blue'])), searchable: boolean('Searchable', false) }));
126
- }
127
- function MultiSelectSearchableComponent() {
128
- const [selectedItems, setSelectedItems] = useState([]);
129
- const onChange = (newItems) => {
130
- setSelectedItems(newItems.map((item) => item.label));
131
- };
132
- return (React.createElement(MultiSelectDropDownList, { title: "Multi", selectedItems: toOptions(selectedItems), placeholder: getDropdownBtnPlaceholder(text('Placeholder', 'Choose a color'), selectedItems, 'colors', 3, 'All colors selected'), onChange: onChange, list: toOptions(array('List', ['Green', 'Red', 'Blue'])), searchable: boolean('Searchable', true) }));
133
- }
134
- function MultiSelectSearchableComponentWithChips() {
135
- const [selectedItems, setSelectedItems] = useState([]);
136
- const onChange = (newItems) => {
137
- setSelectedItems(newItems.map((item) => item.label));
138
- };
139
- const removeSelectedItem = (item) => {
140
- setSelectedItems(selectedItems.filter((i) => i !== item));
141
- };
142
- const chipGroupComponent = () => {
143
- return (React.createElement(ChipGroup, null, (selectedItems || []).map((currentChip, index) => (React.createElement(Chip, { isReadOnly: index === 0 ? true : false, key: currentChip, onClick: (ev) => removeSelectedItem(currentChip) }, currentChip)))));
144
- };
145
- return (React.createElement(MultiSelectDropDownList, { title: "Multi", selectedItems: toOptions(selectedItems), placeholder: getDropdownBtnPlaceholder(text('Placeholder', 'Choose a color'), selectedItems, 'colors', 3, 'All colors selected'), onChange: onChange, list: toOptions(array('List', ['Green', 'Red', 'Blue'])), searchable: boolean('Searchable', true), chipGroupComponent: chipGroupComponent() }));
146
- }
147
- export const AsyncDropdown = () => React.createElement(AsyncComponent, null);
148
- export const AsyncMultiDropdown = () => React.createElement(AsyncMultiComponent, null);
149
- export const DropdownList = () => (React.createElement(Dropdown, { list: toOptions(array('List', ['Green', 'Red', 'Blue'])), placeholder: text('Placeholder', 'Choose a color') }));
150
- export const Searchable = () => (React.createElement(Dropdown, { list: toOptions(array('List', ['Green', 'Red', 'Blue'])), searchable: boolean('Searchable', true) }));
151
- export const DropdownListInvalid = () => (React.createElement(Dropdown, { list: toOptions(array('List', ['Green', 'Red', 'Blue'])), placeholder: text('Placeholder', 'Choose a color'), isInValid: boolean('Is invalid', true) }));
152
- export const SearchableInvalid = () => (React.createElement(Dropdown, { list: toOptions(array('List', ['Green', 'Red', 'Blue'])), searchable: boolean('Searchable', true), isInValid: boolean('Is invalid', true) }));
153
- export const SearchableMultiSelect = () => (React.createElement(Dropdown, { list: toOptions(array('List', ['Green', 'Red', 'Blue'])), searchable: boolean('Searchable', true), isInValid: boolean('Is invalid', true) }));
154
- export const MultiSelectDropdownList = () => React.createElement(MultiSelectComponent, null);
155
- export const MultiSelectSearchableDropdownList = () => React.createElement(MultiSelectSearchableComponent, null);
156
- export const MultiSelectSearchableDropdownListWithChip = () => React.createElement(MultiSelectSearchableComponentWithChips, null);
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- import { LoadingDots } from './LoadingDots';
3
- declare const _default: {
4
- title: string;
5
- component: typeof LoadingDots;
6
- };
7
- export default _default;
8
- export declare const Default: () => JSX.Element;
9
- export declare const withLoadingText: () => JSX.Element;
10
- //# sourceMappingURL=LoadingDots.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LoadingDots.stories.d.ts","sourceRoot":"","sources":["../../../src/LoadingDots/LoadingDots.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;;;;AAE5C,wBAGE;AAEF,eAAO,MAAM,OAAO,mBAAwB,CAAC;AAE7C,eAAO,MAAM,eAAe,mBAAuD,CAAC"}
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { LoadingDots } from './LoadingDots';
3
- export default {
4
- title: 'Components/Loading Dots',
5
- component: LoadingDots,
6
- };
7
- export const Default = () => React.createElement(LoadingDots, null);
8
- export const withLoadingText = () => React.createElement(LoadingDots, { message: "Some basic text here" });
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- import { LoadingIndicator } from './LoadingIndicator';
3
- declare const _default: {
4
- title: string;
5
- Component: typeof LoadingIndicator;
6
- };
7
- export default _default;
8
- export declare const ExtraSmall: () => JSX.Element;
9
- export declare const Small: () => JSX.Element;
10
- export declare const Large: () => JSX.Element;
11
- //# sourceMappingURL=LoadingIndicator.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LoadingIndicator.stories.d.ts","sourceRoot":"","sources":["../../../src/LoadingIndicator/LoadingIndicator.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;;;;;AAEtD,wBAGE;AAEF,eAAO,MAAM,UAAU,mBAAmD,CAAC;AAC3E,eAAO,MAAM,KAAK,mBAAmD,CAAC;AACtE,eAAO,MAAM,KAAK,mBAAmD,CAAC"}
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { LoadingIndicator } from './LoadingIndicator';
3
- export default {
4
- title: 'Components/LoadingIndicator',
5
- Component: LoadingIndicator,
6
- };
7
- export const ExtraSmall = () => React.createElement(LoadingIndicator, { show: true, size: "xs" });
8
- export const Small = () => React.createElement(LoadingIndicator, { show: true, size: "sm" });
9
- export const Large = () => React.createElement(LoadingIndicator, { show: true, size: "lg" });
@@ -1,20 +0,0 @@
1
- /// <reference types="react" />
2
- import { PFTable } from './index';
3
- declare const _default: {
4
- title: string;
5
- component: typeof PFTable;
6
- decorators: ((...args: any) => any)[];
7
- };
8
- export default _default;
9
- export declare const Default: {
10
- (): JSX.Element;
11
- story: {
12
- parameters: {
13
- notes: {
14
- markdown: any;
15
- };
16
- };
17
- };
18
- };
19
- export declare const empty: () => JSX.Element;
20
- //# sourceMappingURL=PFTable.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PFTable.stories.d.ts","sourceRoot":"","sources":["../../../src/Table/PFTable.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAW,OAAO,EAAS,MAAM,SAAS,CAAC;;;;;;AAIlD,wBAIE;AAqDF,eAAO,MAAM,OAAO;;;;;;;;;CAanB,CAAC;AAEF,eAAO,MAAM,KAAK,mBAajB,CAAC"}
@@ -1,73 +0,0 @@
1
- import { action } from '@storybook/addon-actions';
2
- import { withKnobs } from '@storybook/addon-knobs';
3
- import React from 'react';
4
- import { PFTable, Table } from './index';
5
- // @ts-ignore
6
- import pftableReadMe from './README.md';
7
- export default {
8
- title: 'Components/PFTable',
9
- component: PFTable,
10
- decorators: [withKnobs],
11
- };
12
- const columnsData = [
13
- {
14
- id: 'repo',
15
- title: 'Repositories',
16
- sortable: true,
17
- accessor: (data) => data.repo,
18
- },
19
- {
20
- id: 'branch',
21
- title: 'Branches',
22
- accessor: (data) => data.branch,
23
- },
24
- {
25
- id: 'pr',
26
- title: 'Pull requests',
27
- accessor: (data) => data.pr,
28
- },
29
- {
30
- id: 'workspace',
31
- title: 'Workspaces',
32
- accessor: (data) => data.workspace,
33
- },
34
- ];
35
- const tableData = [
36
- {
37
- repo: 'Repo one',
38
- branch: 'Branch one',
39
- pr: ' Pull Request one',
40
- workspace: 'Workspace one',
41
- },
42
- {
43
- repo: 'Repo two',
44
- branch: 'Branch two',
45
- pr: ' Pull Request two',
46
- workspace: 'Workspace two',
47
- },
48
- {
49
- repo: 'Repo three',
50
- branch: 'Branch three',
51
- pr: ' Pull Request three',
52
- workspace: 'Workspace three',
53
- },
54
- {
55
- repo: 'Repo four',
56
- branch: 'Branch four',
57
- pr: ' Pull Request four',
58
- workspace: 'Workspace four',
59
- },
60
- ];
61
- export const Default = () => (React.createElement(React.Fragment, null,
62
- React.createElement(Table, { columns: columnsData, data: tableData },
63
- React.createElement(PFTable, { "aria-label": "case-list", className: "case-list-table", pagination: false, onRowClick: action('row clicked'), onSortChange: action('sort clicked'), onSelect: action('on Select') }))));
64
- export const empty = () => (React.createElement(React.Fragment, null,
65
- React.createElement(Table, { columns: columnsData, data: [] },
66
- React.createElement(PFTable, { "aria-label": "case-list", className: "case-list-table", pagination: false, onRowClick: action('row clicked'), onSortChange: action('sort clicked'), onSelect: action('on Select') }))));
67
- Default.story = {
68
- parameters: {
69
- notes: {
70
- markdown: pftableReadMe,
71
- },
72
- },
73
- };
@@ -1,3 +0,0 @@
1
- .demo-class {
2
- color: red;
3
- }
@@ -1,13 +0,0 @@
1
- import './Demo.css';
2
- import './Demo.scss';
3
- import React from 'react';
4
- interface IProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
5
- message: string;
6
- show?: boolean;
7
- }
8
- declare function Demo(props: IProps): JSX.Element;
9
- declare namespace Demo {
10
- var defaultProps: Partial<IProps>;
11
- }
12
- export default Demo;
13
- //# sourceMappingURL=Demo.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../../src/demo/Demo.tsx"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,MAAO,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAClG,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAMD,iBAAS,IAAI,CAAC,KAAK,EAAE,MAAM,eAU1B;kBAVQ,IAAI;;;AAYb,eAAe,IAAI,CAAC"}
@@ -1,26 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import './Demo.css';
13
- import './Demo.scss';
14
- import React from 'react';
15
- const defaultProps = {
16
- show: true,
17
- };
18
- function Demo(props) {
19
- const { show, message, className } = props, restProps = __rest(props, ["show", "message", "className"]);
20
- if (!show) {
21
- return null;
22
- }
23
- return (React.createElement("div", Object.assign({ className: `demo-class demo-class-background${className ? ' ' + className : ''}` }, restProps), message));
24
- }
25
- Demo.defaultProps = defaultProps;
26
- export default Demo;
File without changes
@@ -1,3 +0,0 @@
1
- .demo-class-background {
2
- background: green;
3
- }
@@ -1,3 +0,0 @@
1
- declare const Demo: Promise<typeof import("./Demo")>;
2
- export default Demo;
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/demo/index.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,kCAAmB,CAAC;AAE9B,eAAe,IAAI,CAAC"}
@@ -1,2 +0,0 @@
1
- const Demo = import('./Demo');
2
- export default Demo;