From fa71f16885339b2de8193f675dcf69a85a77aabc Mon Sep 17 00:00:00 2001 From: Moiz Masud Date: Tue, 6 Dec 2022 23:04:27 -0500 Subject: [PATCH 01/18] Add inline loading component Signed-off-by: Moiz Masud --- src/assets/component-icons/inline-loading.svg | 19 ++ src/fragment-components/a-inline-loading.tsx | 256 ++++++++++++++++++ src/fragment-components/index.ts | 3 + .../src/components/ui-inline-loading.tsx | 56 ++++ src/ui-fragment/src/utils.tsx | 4 + 5 files changed, 338 insertions(+) create mode 100644 src/assets/component-icons/inline-loading.svg create mode 100644 src/fragment-components/a-inline-loading.tsx create mode 100644 src/ui-fragment/src/components/ui-inline-loading.tsx diff --git a/src/assets/component-icons/inline-loading.svg b/src/assets/component-icons/inline-loading.svg new file mode 100644 index 000000000..c4db98ac8 --- /dev/null +++ b/src/assets/component-icons/inline-loading.svg @@ -0,0 +1,19 @@ + + + + + + + + + + Loading... + + + + + + + + + diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx new file mode 100644 index 000000000..61448fcd8 --- /dev/null +++ b/src/fragment-components/a-inline-loading.tsx @@ -0,0 +1,256 @@ +import React from 'react'; +import { + RadioButtonGroup, + RadioButton, + InlineLoading, + TextInput, + NumberInput +} from 'carbon-components-react'; +import { AComponent } from './a-component'; +import { ComponentInfo } from '.'; +import { css } from 'emotion'; +import image from './../assets/component-icons/inline-loading.svg'; +import { + nameStringToVariableString, + reactClassNamesFromComponentObj, + angularClassNamesFromComponentObj +} from '../utils/fragment-tools'; + +export const AInlineLoadingSettingsUI = ({ selectedComponent, setComponent }: any) => { + return <> + Status + setComponent({ + ...selectedComponent, + status: event + })}> + + + + + + setComponent({ + ...selectedComponent, + activeText: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + inactiveText: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + errorText: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + successText: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + activeIconDescription: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + errorIconDescription: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + finishedIconDescription: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + inactiveIconDescription: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + successDelay: Number(event.imaginaryTarget.value) + })} /> + ; +}; + +export const AInlineLoadingCodeUI = ({ selectedComponent, setComponent }: any) => setComponent({ + ...selectedComponent, + codeContext: { + ...selectedComponent.codeContext, + name: event.currentTarget.value + } + })} +/>; + +export const AInlineLoading = ({ + componentObj, + ...rest +}: any) => { + const status: any = { + active: { + iconDescription: componentObj.activeIconDescription, + description: componentObj.activeText + }, + error: { + iconDescription: componentObj.errorIconDescription, + description: componentObj.errorText + }, + inactive: { + iconDescription: componentObj.inactiveIconDescription, + description: componentObj.inactiveText + }, + finished: { + iconDescription: componentObj.finishedIconDescription, + description: componentObj.successText + } + }; + + return ( + + cc.id).join(' ')} /> + + ); +}; + +export const componentInfo: ComponentInfo = { + component: AInlineLoading, + codeUI: AInlineLoadingCodeUI, + settingsUI: AInlineLoadingSettingsUI, + keywords: ['inline', 'loading'], + name: 'Inline Loading', + type: 'inline-loading', + defaultComponentObj: { + type: 'inline-loading', + status: 'active', + activeText: '', + inactiveText: '', + successText: '', + errorText: '', + activeIconDescription: '', + errorIconDescription: '', + finishedIconDescription: '', + inactiveIconDescription: '', + successDelay: 1500 + }, + image, + codeExport: { + angular: { + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Status = "${json.status}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}LoadingText = "${json.activeText}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}SuccessText = "${json.successText}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}ErrorText = "${json.errorText}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}SuccessDelay = ${json.successDelay};`, + outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}OnSuccess = new EventEmitter();`, + imports: ['InlineLoadingModule'], + code: ({ json }) => { + return ` + `; + } + }, + react: { + imports: ['InlineLoading'], + code: ({ json }) => { + const status = `state["${nameStringToVariableString(json.codeContext?.name)}"] || "${json.status}"`; + return ` { + if(typeof state.${nameStringToVariableString(json.codeContext?.name)}OnSuccess === "function") { + return state.${nameStringToVariableString(json.codeContext?.name)}OnSuccess; + } + return undefined; + })} + successDelay={${json.successDelay}} + description={${nameStringToVariableString(json.codeContext?.name)}StatusDescription} + iconDescription={${nameStringToVariableString(json.codeContext?.name)}StatusIconDescription} + status={${status}} + ${reactClassNamesFromComponentObj(json)} />`; + }, + additionalCode: (json) => { + const name = nameStringToVariableString(json.codeContext?.name); + const status = `${name}Status`; + const statusDescription = `${name}StatusDescription`; + const statusIconDescription = `${name}StatusIconDescription`; + return { + [status]: `const ${status} = { + active: { + iconDescription: "${json.activeIconDescription}", + description: "${json.activeText}" + }, + error: { + iconDescription: "${json.errorIconDescription}", + description: "${json.errorText}" + }, + inactive: { + iconDescription: "${json.inactiveIconDescription}", + description: "${json.inactiveText}" + }, + finished: { + iconDescription: "${json.finishedIconDescription}", + description: "${json.successText}" + } + }`, + [statusDescription]: `const ${statusDescription} = ${status}[state["${name}"] || "${json.status}"].description`, + [statusIconDescription]: `const ${statusIconDescription} = ${status}[state["${name}"] || "${json.status}"].iconDescription` + }; + } + } + } +}; diff --git a/src/fragment-components/index.ts b/src/fragment-components/index.ts index 8e373a6ac..018d67d93 100644 --- a/src/fragment-components/index.ts +++ b/src/fragment-components/index.ts @@ -23,6 +23,7 @@ import * as textarea from './a-text-area'; import * as textinput from './a-text-input'; import * as link from './a-link'; import * as loading from './a-loading'; +import * as inlineLoading from './a-inline-loading'; import * as overflowMenu from './a-overflow-menu'; // Tiles import * as tile from './tiles/a-tile'; @@ -50,6 +51,7 @@ export { AFragment, AFragmentSettingsUI, AFragmentCodeUI } from './a-fragment'; export { AGrid, AGridSettingsUI } from './a-grid'; export { ALoading, ALoadingCodeUI, ALoadingSettingsUI } from './a-loading'; export { ALink, ALinkSettingsUI, ALinkCodeUI } from './a-link'; +export { AInlineLoading, AInlineLoadingCodeUI, AInlineLoadingSettingsUI } from './a-inline-loading'; export { ANumberInput, ANumberInputSettingsUI, ANumberInputCodeUI } from './a-numberinput'; export { AProgressIndicator, AProgressIndicatorSettingsUI, AProgressIndicatorCodeUI } from './a-progress-indicator'; export { ARow, ARowSettingsUI } from './a-row'; @@ -87,6 +89,7 @@ export const allComponents = { fragment, grid, loading, + inlineLoading, radio, radioGroup, link, diff --git a/src/ui-fragment/src/components/ui-inline-loading.tsx b/src/ui-fragment/src/components/ui-inline-loading.tsx new file mode 100644 index 000000000..59f3a07c1 --- /dev/null +++ b/src/ui-fragment/src/components/ui-inline-loading.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { InlineLoading } from 'carbon-components-react'; +import { CssClasses } from '../types'; + +export interface InlineLoadingState { + type: string; + status: string; + activeIconDescription: string; + activeText: string; + errorIconDescription: string; + errorText: string; + inactiveIconDescription: string; + inactiveText: string; + finishedIconDescription: string; + successText: string; + successDelay: number; + cssClasses?: CssClasses[]; + codeContext?: { + name: string; + }; +} + +export const UIInlineLoading = ({ state }: { + state: InlineLoadingState; + setState: (state: any) => void; + setGlobalState: (state: any) => void; +}) => { + if (state.type !== 'inline-loading') { + // eslint-disable-next-line react/jsx-no-useless-fragment + return <>; + } + const status: any = { + active: { + iconDescription: state.activeIconDescription, + description: state.activeText + }, + error: { + iconDescription: state.errorIconDescription, + description: state.errorText + }, + inactive: { + iconDescription: state.inactiveIconDescription, + description: state.inactiveText + }, + finished: { + iconDescription: state.finishedIconDescription, + description: state.successText + } + }; + return cc.id).join(' ')} />; +}; diff --git a/src/ui-fragment/src/utils.tsx b/src/ui-fragment/src/utils.tsx index 612d139d5..9ba941255 100644 --- a/src/ui-fragment/src/utils.tsx +++ b/src/ui-fragment/src/utils.tsx @@ -14,6 +14,7 @@ import { UIDropdown } from './components/ui-dropdown'; import { UIExpandableTile } from './components/ui-expandable-tile'; import { UIGrid } from './components/ui-grid'; import { UILink } from './components/ui-link'; +import { UIInlineLoading } from './components/ui-inline-loading'; import { UILoading } from './components/ui-loading'; import { UINumberInput } from './components/ui-number-input'; import { UIOverflowMenu } from './components/ui-overflow-menu'; @@ -151,6 +152,9 @@ export const renderComponents = (state: any, setState: (state: any) => void, set case 'loading': return ; + case 'inline-loading': + return ; + case 'radio-group': return ; From d5416940b7f705b9cf66d1083edfd0700e5253d9 Mon Sep 17 00:00:00 2001 From: Akshat Patel <38994122+Akshat55@users.noreply.github.com> Date: Wed, 7 Dec 2022 15:00:45 -0500 Subject: [PATCH 02/18] Remove extra bracket from react export --- src/fragment-components/a-inline-loading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 61448fcd8..7f8f16800 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -216,7 +216,7 @@ export const componentInfo: ComponentInfo = { return state.${nameStringToVariableString(json.codeContext?.name)}OnSuccess; } return undefined; - })} + }} successDelay={${json.successDelay}} description={${nameStringToVariableString(json.codeContext?.name)}StatusDescription} iconDescription={${nameStringToVariableString(json.codeContext?.name)}StatusIconDescription} From 547dfc7d7390f0ae47ec674e2975691653fa8f9c Mon Sep 17 00:00:00 2001 From: Zvonimir Fras Date: Thu, 8 Dec 2022 13:44:42 -0500 Subject: [PATCH 03/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 7f8f16800..f5cab656d 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -103,7 +103,7 @@ export const AInlineLoadingSettingsUI = ({ selectedComponent, setComponent }: an setComponent({ From d458029e51fa5a36d6a1bd888573e751e65f44b8 Mon Sep 17 00:00:00 2001 From: Zvonimir Fras Date: Thu, 8 Dec 2022 13:46:58 -0500 Subject: [PATCH 04/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index f5cab656d..6d69d4a86 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -155,11 +155,11 @@ export const AInlineLoading = ({ rejectDrop={true} {...rest}> cc.id).join(' ')} /> + successDelay={componentObj.successDelay} + description={status[componentObj.status].description} + iconDescription={status[componentObj.status].iconDescription} + status={componentObj.status} + className={componentObj.cssClasses?.map((cc: any) => cc.id).join(' ')} /> ); }; From 1b0e3aad85f35495995f89219d8c795a5c5a642d Mon Sep 17 00:00:00 2001 From: Zvonimir Fras Date: Thu, 8 Dec 2022 13:48:15 -0500 Subject: [PATCH 05/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 6d69d4a86..0a12162d4 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -173,16 +173,7 @@ export const componentInfo: ComponentInfo = { type: 'inline-loading', defaultComponentObj: { type: 'inline-loading', - status: 'active', - activeText: '', - inactiveText: '', - successText: '', - errorText: '', - activeIconDescription: '', - errorIconDescription: '', - finishedIconDescription: '', - inactiveIconDescription: '', - successDelay: 1500 + status: 'active' }, image, codeExport: { From 890886877bc67dddbd93248a5e08e6d5a90f015d Mon Sep 17 00:00:00 2001 From: Zvonimir Fras Date: Thu, 8 Dec 2022 13:56:57 -0500 Subject: [PATCH 06/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 0a12162d4..a7d02c1a0 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -179,10 +179,10 @@ export const componentInfo: ComponentInfo = { codeExport: { angular: { inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Status = "${json.status}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}LoadingText = "${json.activeText}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}SuccessText = "${json.successText}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}ErrorText = "${json.errorText}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}SuccessDelay = ${json.successDelay};`, + @Input() ${nameStringToVariableString(json.codeContext?.name)}LoadingText = "${json.activeText || 'Loading...'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}SuccessText = "${json.successText || 'Finished.'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}ErrorText = "${json.errorText || 'Error!'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}SuccessDelay = ${json.successDelay === undefined ? 1500 : json.successDelay };`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}OnSuccess = new EventEmitter();`, imports: ['InlineLoadingModule'], code: ({ json }) => { From 66e5f5ddd14966bbc12decab2b0937a7fa0f82c2 Mon Sep 17 00:00:00 2001 From: Zvonimir Fras Date: Thu, 8 Dec 2022 13:59:26 -0500 Subject: [PATCH 07/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index a7d02c1a0..b85b98dd7 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -204,9 +204,8 @@ export const componentInfo: ComponentInfo = { return ` { if(typeof state.${nameStringToVariableString(json.codeContext?.name)}OnSuccess === "function") { - return state.${nameStringToVariableString(json.codeContext?.name)}OnSuccess; + state.${nameStringToVariableString(json.codeContext?.name)}OnSuccess(); } - return undefined; }} successDelay={${json.successDelay}} description={${nameStringToVariableString(json.codeContext?.name)}StatusDescription} From 55e38ca61b02b01a17105591c8767287d2a9ec2a Mon Sep 17 00:00:00 2001 From: Zvonimir Fras Date: Thu, 8 Dec 2022 14:00:13 -0500 Subject: [PATCH 08/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index b85b98dd7..ef975c0db 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -203,7 +203,7 @@ export const componentInfo: ComponentInfo = { const status = `state["${nameStringToVariableString(json.codeContext?.name)}"] || "${json.status}"`; return ` { - if(typeof state.${nameStringToVariableString(json.codeContext?.name)}OnSuccess === "function") { + if (typeof state.${nameStringToVariableString(json.codeContext?.name)}OnSuccess === "function") { state.${nameStringToVariableString(json.codeContext?.name)}OnSuccess(); } }} From a20744def686bec447ce86570e92660008406ae2 Mon Sep 17 00:00:00 2001 From: Zvonimir Fras Date: Thu, 8 Dec 2022 14:01:15 -0500 Subject: [PATCH 09/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index ef975c0db..dbea70e17 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -218,6 +218,7 @@ export const componentInfo: ComponentInfo = { const status = `${name}Status`; const statusDescription = `${name}StatusDescription`; const statusIconDescription = `${name}StatusIconDescription`; + return { [status]: `const ${status} = { active: { From 10c3827a838a895468f79ca7421b7b3cdc51c632 Mon Sep 17 00:00:00 2001 From: Akshat Patel <38994122+Akshat55@users.noreply.github.com> Date: Thu, 8 Dec 2022 15:18:16 -0500 Subject: [PATCH 10/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index dbea70e17..2d824787b 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -222,8 +222,8 @@ export const componentInfo: ComponentInfo = { return { [status]: `const ${status} = { active: { - iconDescription: "${json.activeIconDescription}", - description: "${json.activeText}" + iconDescription: "${json.activeIconDescription || 'Loading...'}", + description: "${json.activeText || 'Loading...'}" }, error: { iconDescription: "${json.errorIconDescription}", From fec579a7c9f04d96d156d35c0db1482ce682b1dd Mon Sep 17 00:00:00 2001 From: Akshat Patel <38994122+Akshat55@users.noreply.github.com> Date: Thu, 8 Dec 2022 15:21:43 -0500 Subject: [PATCH 11/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 2d824787b..62e729745 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -226,8 +226,8 @@ export const componentInfo: ComponentInfo = { description: "${json.activeText || 'Loading...'}" }, error: { - iconDescription: "${json.errorIconDescription}", - description: "${json.errorText}" + iconDescription: "${json.errorIconDescription || 'Error!'}", + description: "${json.errorText || 'Error!'}" }, inactive: { iconDescription: "${json.inactiveIconDescription}", From 0734342797a3b6b5caac18078b19b29e8a93352b Mon Sep 17 00:00:00 2001 From: Akshat Patel <38994122+Akshat55@users.noreply.github.com> Date: Thu, 8 Dec 2022 15:21:49 -0500 Subject: [PATCH 12/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 62e729745..1292a6aae 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -230,8 +230,8 @@ export const componentInfo: ComponentInfo = { description: "${json.errorText || 'Error!'}" }, inactive: { - iconDescription: "${json.inactiveIconDescription}", - description: "${json.inactiveText}" + iconDescription: "${json.inactiveIconDescription || ''}", + description: "${json.inactiveText || ''}" }, finished: { iconDescription: "${json.finishedIconDescription}", From 5df6c87682ea225e3f4fd07e8fb46931142a875e Mon Sep 17 00:00:00 2001 From: Akshat Patel <38994122+Akshat55@users.noreply.github.com> Date: Thu, 8 Dec 2022 15:22:36 -0500 Subject: [PATCH 13/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 1292a6aae..1e5e53f46 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -234,8 +234,8 @@ export const componentInfo: ComponentInfo = { description: "${json.inactiveText || ''}" }, finished: { - iconDescription: "${json.finishedIconDescription}", - description: "${json.successText}" + iconDescription: "${json.finishedIconDescription || 'Finished.'}", + description: "${json.successText || 'Finished.'}" } }`, [statusDescription]: `const ${statusDescription} = ${status}[state["${name}"] || "${json.status}"].description`, From 3af03dc10c32ae91676ec03fa5547fadf7d1dd59 Mon Sep 17 00:00:00 2001 From: Akshat Patel <38994122+Akshat55@users.noreply.github.com> Date: Thu, 8 Dec 2022 15:51:11 -0500 Subject: [PATCH 14/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 1e5e53f46..2e77c0c6e 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -223,7 +223,7 @@ export const componentInfo: ComponentInfo = { [status]: `const ${status} = { active: { iconDescription: "${json.activeIconDescription || 'Loading...'}", - description: "${json.activeText || 'Loading...'}" + description: "${json.activeText || 'Loading...'}" }, error: { iconDescription: "${json.errorIconDescription || 'Error!'}", From 51882f659c2ca362464f931a72afa0165447a587 Mon Sep 17 00:00:00 2001 From: Zvonimir Fras Date: Fri, 9 Dec 2022 09:21:20 -0500 Subject: [PATCH 15/18] Apply suggestions from code review --- src/fragment-components/a-inline-loading.tsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 2e77c0c6e..c786f24cf 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -46,14 +46,14 @@ export const AInlineLoadingSettingsUI = ({ selectedComponent, setComponent }: an setComponent({ ...selectedComponent, activeText: event.currentTarget.value })} /> setComponent({ ...selectedComponent, inactiveText: event.currentTarget.value @@ -67,7 +67,7 @@ export const AInlineLoadingSettingsUI = ({ selectedComponent, setComponent }: an })} /> setComponent({ ...selectedComponent, successText: event.currentTarget.value @@ -106,6 +106,7 @@ export const AInlineLoadingSettingsUI = ({ selectedComponent, setComponent }: an label='Success delay (ms)' name='successDelay' value={selectedComponent.successDelay} + step={100} onChange={(event: any) => setComponent({ ...selectedComponent, successDelay: Number(event.imaginaryTarget.value) @@ -169,19 +170,22 @@ export const componentInfo: ComponentInfo = { codeUI: AInlineLoadingCodeUI, settingsUI: AInlineLoadingSettingsUI, keywords: ['inline', 'loading'], - name: 'Inline Loading', + name: 'Inline loading', type: 'inline-loading', defaultComponentObj: { type: 'inline-loading', - status: 'active' + status: 'active', + activeText: 'Loading...', + successText: 'Finished.', + errorText: 'Error!' }, image, codeExport: { angular: { inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Status = "${json.status}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}LoadingText = "${json.activeText || 'Loading...'}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}SuccessText = "${json.successText || 'Finished.'}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}ErrorText = "${json.errorText || 'Error!'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}LoadingText = "${json.activeText}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}SuccessText = "${json.successText}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}ErrorText = "${json.errorText}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}SuccessDelay = ${json.successDelay === undefined ? 1500 : json.successDelay };`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}OnSuccess = new EventEmitter();`, imports: ['InlineLoadingModule'], From 54ea69a014094ca0df9813c2acc5ac427e76b8ff Mon Sep 17 00:00:00 2001 From: Zvonimir Fras Date: Fri, 9 Dec 2022 09:30:33 -0500 Subject: [PATCH 16/18] Update src/fragment-components/a-inline-loading.tsx --- src/fragment-components/a-inline-loading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index c786f24cf..3eab905a5 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -60,7 +60,7 @@ export const AInlineLoadingSettingsUI = ({ selectedComponent, setComponent }: an })} /> setComponent({ ...selectedComponent, errorText: event.currentTarget.value From 4c26e5213f54fca1ad4f9008f0b5c0807f15c2f2 Mon Sep 17 00:00:00 2001 From: Moiz Masud Date: Tue, 3 Jan 2023 13:32:41 -0500 Subject: [PATCH 17/18] Add dropdown for status change and added accordian Signed-off-by: Moiz Masud --- src/fragment-components/a-inline-loading.tsx | 130 +++++++++++-------- 1 file changed, 73 insertions(+), 57 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 3eab905a5..4d4cc2e8a 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { - RadioButtonGroup, - RadioButton, + Accordion, + AccordionItem, InlineLoading, TextInput, + Dropdown, NumberInput } from 'carbon-components-react'; import { AComponent } from './a-component'; @@ -17,33 +18,35 @@ import { } from '../utils/fragment-tools'; export const AInlineLoadingSettingsUI = ({ selectedComponent, setComponent }: any) => { + const [isAccordionOpen, setIsAccordionOpen] = useState({} as any); + + useEffect(() => { + setIsAccordionOpen({ + active: selectedComponent.activeIconDescription, + error: selectedComponent.errorIconDescription, + finished: selectedComponent.finishedIconDescription, + inactive: selectedComponent.inactiveIconDescription, + }); + }, [selectedComponent]); + + const statusItems = [ + { id: 'inactive', text: 'Inactive' }, + { id: 'active', text: 'Active' }, + { id: 'finished', text: 'Finished' }, + { id: 'error', text: 'Error' } + ]; return <> - Status - setComponent({ - ...selectedComponent, - status: event - })}> - - - - - + item.id === selectedComponent.status)} + itemToString={(item: any) => (item ? item.text : '')} + onChange={(event: any) => setComponent({ + ...selectedComponent, + status: event.selectedItem.id + })} /> - setComponent({ - ...selectedComponent, - activeIconDescription: event.currentTarget.value - })} /> - setComponent({ - ...selectedComponent, - errorIconDescription: event.currentTarget.value - })} /> - setComponent({ - ...selectedComponent, - finishedIconDescription: event.currentTarget.value - })} /> - setComponent({ - ...selectedComponent, - inactiveIconDescription: event.currentTarget.value - })} /> + + + setComponent({ + ...selectedComponent, + activeIconDescription: event.currentTarget.value + })} /> + + + + setComponent({ + ...selectedComponent, + errorIconDescription: event.currentTarget.value + })} /> + + + + setComponent({ + ...selectedComponent, + finishedIconDescription: event.currentTarget.value + })} /> + + + + setComponent({ + ...selectedComponent, + inactiveIconDescription: event.currentTarget.value + })} /> + + ; }; From feeb2ba85baa7e316b0762a6c73d0e46e53c1118 Mon Sep 17 00:00:00 2001 From: Moiz Masud Date: Tue, 3 Jan 2023 13:50:29 -0500 Subject: [PATCH 18/18] Lint alittle Signed-off-by: Moiz Masud --- src/fragment-components/a-inline-loading.tsx | 27 +++----------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/src/fragment-components/a-inline-loading.tsx b/src/fragment-components/a-inline-loading.tsx index 4d4cc2e8a..bf4045ffc 100644 --- a/src/fragment-components/a-inline-loading.tsx +++ b/src/fragment-components/a-inline-loading.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import { Accordion, AccordionItem, @@ -18,17 +18,6 @@ import { } from '../utils/fragment-tools'; export const AInlineLoadingSettingsUI = ({ selectedComponent, setComponent }: any) => { - const [isAccordionOpen, setIsAccordionOpen] = useState({} as any); - - useEffect(() => { - setIsAccordionOpen({ - active: selectedComponent.activeIconDescription, - error: selectedComponent.errorIconDescription, - finished: selectedComponent.finishedIconDescription, - inactive: selectedComponent.inactiveIconDescription, - }); - }, [selectedComponent]); - const statusItems = [ { id: 'inactive', text: 'Inactive' }, { id: 'active', text: 'Active' }, @@ -87,7 +76,7 @@ export const AInlineLoadingSettingsUI = ({ selectedComponent, setComponent }: an successDelay: Number(event.imaginaryTarget.value) })} /> - + - - - - - - - - - `@Output() ${nameStringToVariableString(json.codeContext?.name)}OnSuccess = new EventEmitter();`, imports: ['InlineLoadingModule'], code: ({ json }) => {