From 646baf542e1d7b320c0a29f054bc6aaa5e6e15ff Mon Sep 17 00:00:00 2001 From: Max You Date: Thu, 31 Aug 2023 09:53:42 -0400 Subject: [PATCH 01/41] date picker Signed-off-by: Max You --- .../assets/component-icons/date-picker.svg | 15 + .../src/fragment-components/a-date-picker.tsx | 278 ++++++++++++++++++ src/sdk/src/fragment-components/index.ts | 3 + .../src/components/ui-date-picker.tsx | 53 ++++ src/ui-fragment/src/utils.tsx | 6 +- 5 files changed, 354 insertions(+), 1 deletion(-) create mode 100644 src/sdk/src/assets/component-icons/date-picker.svg create mode 100644 src/sdk/src/fragment-components/a-date-picker.tsx create mode 100644 src/ui-fragment/src/components/ui-date-picker.tsx diff --git a/src/sdk/src/assets/component-icons/date-picker.svg b/src/sdk/src/assets/component-icons/date-picker.svg new file mode 100644 index 000000000..f06ba1887 --- /dev/null +++ b/src/sdk/src/assets/component-icons/date-picker.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx new file mode 100644 index 000000000..97c30616b --- /dev/null +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -0,0 +1,278 @@ +import React from 'react'; +import { + DatePicker, + DatePickerInput, + Dropdown, + Checkbox, + TextInput +} from 'carbon-components-react'; +import { AComponent, ComponentInfo } from './a-component'; +import image from './../assets/component-icons/date-picker.svg'; +import { + angularClassNamesFromComponentObj, + nameStringToVariableString, + reactClassNamesFromComponentObj +} from '../tools'; + +export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) => { + const size = [ + { id: 'sm', text: 'Small' }, + { id: 'md', text: 'Medium' }, + { id: 'xl', text: 'Extra large' } + ]; + + const datePickerType = [ + { id: 'simple', text: 'Simple' }, + { id: 'single', text: 'Single with calender' }, + { id: 'range', text: 'Range with calender' } + ]; + + return <> + item.id === selectedComponent.datePickerType)} + itemToString={(item: any) => (item ? item.text : '')} + onChange={(event: any) => setComponent({ + ...selectedComponent, + datePickerType: event.selectedItem.id + })} /> + setComponent({ + ...selectedComponent, + dateFormat: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + placeholder: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + light: checked + })} /> + item.id === selectedComponent.size)} + itemToString={(item: any) => (item ? item.text : '')} + onChange={(event: any) => setComponent({ + ...selectedComponent, + size: event.selectedItem.id + })} /> + setComponent({ + ...selectedComponent, + disabled: checked + })} /> + setComponent({ + ...selectedComponent, + invalid: checked + })} /> + setComponent({ + ...selectedComponent, + rangeStartLabel: event.currentTarget.value + })} /> + setComponent({ + ...selectedComponent, + invalidText: event.currentTarget.value + })} /> + { + selectedComponent.datePickerType === 'range' + && setComponent({ + ...selectedComponent, + rangeEndLabel: event.currentTarget.value + })} /> + } + ; +}; + +export const ADatePickerCodeUI = ({ selectedComponent, setComponent }: any) => setComponent({ + ...selectedComponent, + codeContext: { + ...selectedComponent.codeContext, + name: event.currentTarget.value + } + })} +/>; + +export const ADatePicker = ({ + componentObj, + ...rest +}: any) => { + return ( + + { + + + { + componentObj.datePickerType === 'range' && + + } + + } + + ); +}; + +export const componentInfo: ComponentInfo = { + component: ADatePicker, + settingsUI: ADatePickerSettingsUI, + codeUI: ADatePickerCodeUI, + keywords: ['datepicker', 'date', 'picker'], + name: 'Date Picker', + type: 'date-picker', + defaultComponentObj: { + type: 'date-picker', + placeholder: 'mm/dd/yyyy', + disabled: false, + invalid: false, + invalidText: 'A valid value is required', + light: false, + size: 'md', + datePickerType: 'simple', + dateFormat: 'm/d/Y', + value: '', + rangeStartLabel: 'Date picker label', + rangeEndLabel: 'Date picker label' + }, + image, + codeExport: { + angular: { + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value}";`, + outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, + imports: ['DatePickerModule'], + code: ({ json }) => { + return `${json.datePickerType === 'simple' + ? ` + ` + : json.datePickerType === 'single' + ? ` + ` + : ` + ` + }`; + } + }, + react: { + imports: ['DatePicker', 'DatePickerInput'], + code: ({ json }) => { + return ` + + ${json.datePickerType === 'range' + ? `` + : '' + } + `; + } + } + } +}; \ No newline at end of file diff --git a/src/sdk/src/fragment-components/index.ts b/src/sdk/src/fragment-components/index.ts index e4308a3fe..74d120da8 100644 --- a/src/sdk/src/fragment-components/index.ts +++ b/src/sdk/src/fragment-components/index.ts @@ -8,6 +8,7 @@ import * as codeSnippet from './a-code-snippet'; import * as column from './a-column'; import * as combobox from './a-combobox'; import * as contentSwitcher from './a-content-switcher'; +import * as datepicker from './a-date-picker'; import * as dropdown from './a-dropdown'; import * as fragment from './a-fragment'; import * as grid from './a-grid'; @@ -45,6 +46,7 @@ export { ACheckbox, ACheckboxSettingsUI, ACheckboxCodeUI } from './a-checkbox'; export { AColumn, AColumnCodeUI, AColumnSettingsUI } from './a-column'; export { AComboBox, AComboBoxSettingsUI, AComboBoxCodeUI } from './a-combobox'; export { AContentSwitcher, AContentSwitcherSettingsUI, AContentSwitcherCodeUI } from './a-content-switcher'; +export { ADatePicker, ADatePickerSettingsUI, ADatePickerCodeUI } from './a-date-picker'; export { ADropdown, ADropdownSettingsUI, ADropdownCodeUI } from './a-dropdown'; export * from './a-component'; export { AFragment, AFragmentSettingsUI, AFragmentCodeUI } from './a-fragment'; @@ -85,6 +87,7 @@ export const allComponents = { combobox, contentSwitcher, column, + datepicker, dropdown, fragment, grid, diff --git a/src/ui-fragment/src/components/ui-date-picker.tsx b/src/ui-fragment/src/components/ui-date-picker.tsx new file mode 100644 index 000000000..bcbe74a64 --- /dev/null +++ b/src/ui-fragment/src/components/ui-date-picker.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { + DatePicker, + DatePickerInput +} from 'carbon-components-react'; + +export interface DatePickerState { + type: string; + placeholder: string; + disabled?: boolean; + invalid?: boolean; + invalidText?: string; + light?: boolean; + size?: string; + datePickerType?: string; + dateFormat?: string; + value?: string; + rangeStartLabel?: string; + rangeEndLabel?: string; +} + +export const UIDatePicker = ({ state }: { + state: DatePickerState; + setState: (state: any) => void; + setGlobalState: (state: any) => void; +}) => { + if (state.type !== 'date-picker') { + // eslint-disable-next-line react/jsx-no-useless-fragment + return <>; + } + return + + { + state.datePickerType === 'range' && + + } + ; +}; \ No newline at end of file diff --git a/src/ui-fragment/src/utils.tsx b/src/ui-fragment/src/utils.tsx index f6b84779d..6f624e598 100644 --- a/src/ui-fragment/src/utils.tsx +++ b/src/ui-fragment/src/utils.tsx @@ -10,6 +10,7 @@ import { UICodeSnippet } from './components/ui-code-snippet'; import { UIColumn } from './components/ui-column'; import { UIComboBox } from './components/ui-combobox'; import { UIContentSwitcher } from './components/ui-content-switcher'; +import { UIDatePicker } from './components/ui-date-picker'; import { UIDropdown } from './components/ui-dropdown'; import { UIExpandableTile } from './components/ui-expandable-tile'; import { UIGrid } from './components/ui-grid'; @@ -232,7 +233,10 @@ export const renderComponents = ( case 'content-switcher': return ; - + + case 'date-picker': + return ; + case 'dropdown': return ; From 6cb5cff322b0dc8713b607fe214f100f982524ad Mon Sep 17 00:00:00 2001 From: Max You Date: Thu, 31 Aug 2023 16:11:30 -0400 Subject: [PATCH 02/41] clean Signed-off-by: Max You --- src/sdk/src/fragment-components/a-date-picker.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index 97c30616b..ceda169c3 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -172,16 +172,9 @@ export const componentInfo: ComponentInfo = { defaultComponentObj: { type: 'date-picker', placeholder: 'mm/dd/yyyy', - disabled: false, - invalid: false, - invalidText: 'A valid value is required', - light: false, size: 'md', datePickerType: 'simple', dateFormat: 'm/d/Y', - value: '', - rangeStartLabel: 'Date picker label', - rangeEndLabel: 'Date picker label' }, image, codeExport: { From 0219acf37ed5f30087a535bd015411d6564e089d Mon Sep 17 00:00:00 2001 From: Max You Date: Wed, 6 Sep 2023 16:24:56 -0400 Subject: [PATCH 03/41] lint Signed-off-by: Max You --- src/sdk/src/fragment-components/a-date-picker.tsx | 4 ++-- src/ui-fragment/src/components/ui-date-picker.tsx | 2 +- src/ui-fragment/src/utils.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index ceda169c3..28c54b52d 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -174,7 +174,7 @@ export const componentInfo: ComponentInfo = { placeholder: 'mm/dd/yyyy', size: 'md', datePickerType: 'simple', - dateFormat: 'm/d/Y', + dateFormat: 'm/d/Y' }, image, codeExport: { @@ -268,4 +268,4 @@ export const componentInfo: ComponentInfo = { } } } -}; \ No newline at end of file +}; diff --git a/src/ui-fragment/src/components/ui-date-picker.tsx b/src/ui-fragment/src/components/ui-date-picker.tsx index bcbe74a64..9975cb180 100644 --- a/src/ui-fragment/src/components/ui-date-picker.tsx +++ b/src/ui-fragment/src/components/ui-date-picker.tsx @@ -50,4 +50,4 @@ export const UIDatePicker = ({ state }: { invalidText={state.invalidText} /> } ; -}; \ No newline at end of file +}; diff --git a/src/ui-fragment/src/utils.tsx b/src/ui-fragment/src/utils.tsx index 6f624e598..103dfa5cf 100644 --- a/src/ui-fragment/src/utils.tsx +++ b/src/ui-fragment/src/utils.tsx @@ -233,10 +233,10 @@ export const renderComponents = ( case 'content-switcher': return ; - + case 'date-picker': return ; - + case 'dropdown': return ; From 63ca1b4ddfc49d797fe8a2528dfee4f562a8a69c Mon Sep 17 00:00:00 2001 From: Max You Date: Thu, 14 Sep 2023 23:24:53 -0400 Subject: [PATCH 04/41] focus and datepicker input bottom alignment Signed-off-by: Max You --- .../src/fragment-components/a-date-picker.tsx | 57 +++++++++++-------- 1 file changed, 34 insertions(+), 23 deletions(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index 28c54b52d..cd49c8ac1 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -13,6 +13,16 @@ import { nameStringToVariableString, reactClassNamesFromComponentObj } from '../tools'; +import { css, cx } from 'emotion'; + +const preventCheckEventStyle = css` + pointer-events: none; +`; + +const pickerInputAlignment = css ` + display: flex; + align-items: flex-end; +` export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) => { const size = [ @@ -88,11 +98,11 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) })} /> setComponent({ ...selectedComponent, rangeStartLabel: event.currentTarget.value - })} /> + })} /> setComponent({ ...selectedComponent, rangeEndLabel: event.currentTarget.value @@ -136,26 +146,27 @@ export const ADatePicker = ({ {...rest}> { - - { - componentObj.datePickerType === 'range' && - - } + className={cx(preventCheckEventStyle, pickerInputAlignment, componentObj.cssClasses?.map((cc: any) => cc.id).join(' '))} + dateFormat={componentObj.dateFormat} + datePickerType={componentObj.datePickerType} + light={componentObj.light}> + + { + componentObj.datePickerType === 'range' && + + } } From 404c8a5bb8bcddaab2a43044f1c4e2960a026318 Mon Sep 17 00:00:00 2001 From: Max You Date: Thu, 14 Sep 2023 23:43:19 -0400 Subject: [PATCH 05/41] angular date picker export Signed-off-by: Max You --- .../src/fragment-components/a-date-picker.tsx | 43 ++++++++----------- 1 file changed, 17 insertions(+), 26 deletions(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index cd49c8ac1..f25f31cfb 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -197,49 +197,40 @@ export const componentInfo: ComponentInfo = { return `${json.datePickerType === 'simple' ? ` [placeholder]="'${json.placeholder}'" - [disabled]="${json.disabled}" [size]="${json.size}" - [invalid]="${json.invalid}" - [invalidText]="'${json.invalidText}'" - (valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event.value)"> ` : json.datePickerType === 'single' ? ` ` : ` From e6a3cf90f9dde462b0375bb61a0f8f94732dc8c6 Mon Sep 17 00:00:00 2001 From: Max You Date: Thu, 14 Sep 2023 23:50:39 -0400 Subject: [PATCH 06/41] react date picker export Signed-off-by: Max You --- .../src/fragment-components/a-date-picker.tsx | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index f25f31cfb..1532fe024 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -242,30 +242,30 @@ export const componentInfo: ComponentInfo = { imports: ['DatePicker', 'DatePickerInput'], code: ({ json }) => { return ` - - ${json.datePickerType === 'range' - ? `` - : '' - } + ${reactClassNamesFromComponentObj(json)} + dateFormat="${json.dateFormat}" + datePickerType="${json.datePickerType}" + ${json.light ? 'light="true"' : ''}> + + ${json.datePickerType === 'range' + ? `` + : '' + } `; } } From 668ba8f7b72173fb0cc783b29f664b9c4085dd68 Mon Sep 17 00:00:00 2001 From: Max You Date: Thu, 21 Sep 2023 22:50:55 -0400 Subject: [PATCH 07/41] fixed Signed-off-by: Max You --- src/sdk/src/fragment-components/a-date-picker.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index 1532fe024..81fd37646 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -190,7 +190,7 @@ export const componentInfo: ComponentInfo = { image, codeExport: { angular: { - inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value}";`, + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value ? json.value : ''}";`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { @@ -202,9 +202,9 @@ export const componentInfo: ComponentInfo = { ${json.disabled ? `[disabled]='${json.disabled}'` : ''} ${json.invalid ? `[invalid]='${json.invalid}'` : ''} ${json.invalidText ? `[invalidText]='${json.invalidText}'` : ''} - (valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event.value)"> + (valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event.value)" [placeholder]="'${json.placeholder}'" - [size]="${json.size}" + [size]="${json.size}"> ` : json.datePickerType === 'single' ? ` ${json.datePickerType === 'range' @@ -262,7 +261,6 @@ export const componentInfo: ComponentInfo = { ${json.invalid ? `invalid='${json.invalid}'` : ''} ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} placeholder="${json.placeholder}" - type="text" size="${json.size}" />` : '' } From 4157f0e5914b0e59ef526343c0a4c262efb19334 Mon Sep 17 00:00:00 2001 From: Max You Date: Thu, 21 Sep 2023 23:06:16 -0400 Subject: [PATCH 08/41] react has type = text Signed-off-by: Max You --- src/sdk/src/fragment-components/a-date-picker.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index 81fd37646..c75e5f41b 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -203,6 +203,7 @@ export const componentInfo: ComponentInfo = { ${json.invalid ? `[invalid]='${json.invalid}'` : ''} ${json.invalidText ? `[invalidText]='${json.invalidText}'` : ''} (valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event.value)" + [value]="'${nameStringToVariableString(json.codeContext?.name)}Value'" [placeholder]="'${json.placeholder}'" [size]="${json.size}"> ` @@ -253,15 +254,17 @@ export const componentInfo: ComponentInfo = { ${json.invalid ? `invalid='${json.invalid}'` : ''} ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} size="${json.size}" + type='text' /> ${json.datePickerType === 'range' ? `` + ${json.rangeEndLabel ? `labelText='${json.rangeEndLabel}'` : ''} + ${json.disabled ? `disabled='${json.disabled}'` : ''} + ${json.invalid ? `invalid='${json.invalid}'` : ''} + ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} + placeholder="${json.placeholder}" + size="${json.size}" + type='text' />` : '' } `; From a381f4e4406c5fd93391b8d33f86677ba1568726 Mon Sep 17 00:00:00 2001 From: Max You Date: Wed, 4 Oct 2023 21:30:32 -0400 Subject: [PATCH 09/41] progress Signed-off-by: Max You --- .../src/fragment-components/a-date-picker.tsx | 249 ++++++++++++------ src/ui-fragment/src/components/index.ts | 2 + .../src/components/ui-date-picker.tsx | 46 +++- src/ui-fragment/src/utils.tsx | 2 +- 4 files changed, 213 insertions(+), 86 deletions(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index c75e5f41b..089a8a073 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -5,7 +5,7 @@ import { Dropdown, Checkbox, TextInput -} from 'carbon-components-react'; +} from '@carbon/react'; import { AComponent, ComponentInfo } from './a-component'; import image from './../assets/component-icons/date-picker.svg'; import { @@ -20,9 +20,11 @@ const preventCheckEventStyle = css` `; const pickerInputAlignment = css ` - display: flex; - align-items: flex-end; -` + .cds--date-picker { + display: flex; + align-items: flex-end !important; + } +`; export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) => { const size = [ @@ -66,9 +68,9 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) labelText='Light' id='light' checked={selectedComponent.light} - onChange={(checked: boolean) => setComponent({ + onChange={(_: any) => setComponent({ ...selectedComponent, - light: checked + light: !selectedComponent.light })} /> setComponent({ + onChange={(_: any) => setComponent({ ...selectedComponent, - disabled: checked + disabled: !selectedComponent.disabled })} /> setComponent({ + onChange={(_: any) => setComponent({ ...selectedComponent, - invalid: checked + invalid: !selectedComponent.invalid })} /> `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value ? json.value : ''}";`, - outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, - imports: ['DatePickerModule'], - code: ({ json }) => { - return `${json.datePickerType === 'simple' - ? ` - ` - : json.datePickerType === 'single' - ? ` - ` - : ` - ` - }`; + latest: { + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value ? json.value : ''}";`, + outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, + imports: ['DatePickerModule'], + code: ({ json }) => { + return `${json.datePickerType === 'simple' + ? ` + ` + : json.datePickerType === 'single' + ? ` + ` + : ` + ` + }`; + } + }, + v10: { + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value ? json.value : ''}";`, + outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, + imports: ['DatePickerModule'], + code: ({ json }) => { + return `${json.datePickerType === 'simple' + ? ` + ` + : json.datePickerType === 'single' + ? ` + ` + : ` + ` + }`; + } } }, react: { - imports: ['DatePicker', 'DatePickerInput'], - code: ({ json }) => { - return ` - - ${json.datePickerType === 'range' - ? ` { + return ` + + ${json.datePickerType === 'range' + ? `` + : '' + } + `; + } + }, + v10: { + imports: ['DatePicker', 'DatePickerInput'], + code: ({ json }) => { + return ` + ` - : '' - } - `; + type='text' + /> + ${json.datePickerType === 'range' + ? `` + : '' + } + `; + } } } } diff --git a/src/ui-fragment/src/components/index.ts b/src/ui-fragment/src/components/index.ts index a94397b61..6966f954e 100644 --- a/src/ui-fragment/src/components/index.ts +++ b/src/ui-fragment/src/components/index.ts @@ -9,6 +9,7 @@ import * as column from './ui-column'; import * as combobox from './ui-combobox'; import * as contentSwitcher from './ui-content-switcher'; import * as dropdown from './ui-dropdown'; +import * as datePicker from './ui-date-picker'; import * as grid from './ui-grid'; import * as numberinput from './ui-number-input'; import * as radio from './ui-radio'; @@ -45,6 +46,7 @@ export const allComponents = { contentSwitcher, column, dropdown, + datePicker, grid, loading, inlineLoading, diff --git a/src/ui-fragment/src/components/ui-date-picker.tsx b/src/ui-fragment/src/components/ui-date-picker.tsx index 9975cb180..2907ca19e 100644 --- a/src/ui-fragment/src/components/ui-date-picker.tsx +++ b/src/ui-fragment/src/components/ui-date-picker.tsx @@ -2,12 +2,15 @@ import React from 'react'; import { DatePicker, DatePickerInput -} from 'carbon-components-react'; +} from '@carbon/react'; +import { commonSlots, slotsDisabled } from '../common-slots'; +import { SendSignal } from '../types'; export interface DatePickerState { type: string; placeholder: string; disabled?: boolean; + id: string; invalid?: boolean; invalidText?: string; light?: boolean; @@ -19,26 +22,61 @@ export interface DatePickerState { rangeEndLabel?: string; } -export const UIDatePicker = ({ state }: { +export const type = 'datepicker'; + +export const slots = { + ...commonSlots, + ...slotsDisabled, + dateFormat: 'string', + datePickerType: 'string', + placeholder: 'string', + labelText: 'string', + size: 'string', + invalidText: 'string', + invalid: 'boolean', + setInvalid: (state: DatePickerState) => ({ + ...state, + invalid: true + }), + setValid: (state: DatePickerState) => ({ + ...state, + invalid: false + }), + toggleValid: (state: DatePickerState) => ({ + ...state, + invalid: !state.invalid + }) +}; + +export const signals = ['valueChange', 'click']; + +export const UIDatePicker = ({ state, sendSignal }: { state: DatePickerState; setState: (state: any) => void; setGlobalState: (state: any) => void; + sendSignal: SendSignal; }) => { if (state.type !== 'date-picker') { // eslint-disable-next-line react/jsx-no-useless-fragment return <>; } return + light={state.light} + onClick={() => sendSignal(state.id, 'click')} + onChange={(event: any) => { + debugger + sendSignal(state.id, 'valueChange', [event.value], { ...state, value: event.value }); + }}> + invalidText={state.invalidText}/> { state.datePickerType === 'range' && ; case 'date-picker': - return ; + return ; case 'dropdown': return ; From a3125bdae2b0dcffd23fbf6dc100639d5e920324 Mon Sep 17 00:00:00 2001 From: Max You Date: Wed, 4 Oct 2023 22:07:41 -0400 Subject: [PATCH 10/41] progress Signed-off-by: Max You --- .../src/fragment-components/a-date-picker.tsx | 5 ++- .../src/components/ui-date-picker.tsx | 31 ++++++++++++++++--- 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index 089a8a073..81d562e96 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -29,8 +29,7 @@ const pickerInputAlignment = css ` export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) => { const size = [ { id: 'sm', text: 'Small' }, - { id: 'md', text: 'Medium' }, - { id: 'xl', text: 'Extra large' } + { id: 'md', text: 'Medium' } ]; const datePickerType = [ @@ -81,7 +80,7 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) onChange={(event: any) => setComponent({ ...selectedComponent, size: event.selectedItem.id - })} /> + })} /> ({ ...state, @@ -45,7 +55,20 @@ export const slots = { toggleValid: (state: DatePickerState) => ({ ...state, invalid: !state.invalid - }) + }), + light: 'boolean', + setLight: (state: DatePickerState) => ({ + ...state, + light: true + }), + setDark: (state: DatePickerState) => ({ + ...state, + light: false + }), + toggleLight: (state: DatePickerState) => ({ + ...state, + light: !state.light + }), }; export const signals = ['valueChange', 'click']; @@ -61,13 +84,13 @@ export const UIDatePicker = ({ state, sendSignal }: { return <>; } return sendSignal(state.id, 'click')} onChange={(event: any) => { - debugger sendSignal(state.id, 'valueChange', [event.value], { ...state, value: event.value }); }}> Date: Wed, 4 Oct 2023 22:30:13 -0400 Subject: [PATCH 11/41] lint Signed-off-by: Max You --- src/sdk/src/fragment-components/a-date-picker.tsx | 2 +- src/ui-fragment/src/components/ui-date-picker.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index 81d562e96..8187fb86f 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -323,7 +323,7 @@ export const componentInfo: ComponentInfo = { } `; } - }, + }, v10: { imports: ['DatePicker', 'DatePickerInput'], code: ({ json }) => { diff --git a/src/ui-fragment/src/components/ui-date-picker.tsx b/src/ui-fragment/src/components/ui-date-picker.tsx index b8f33bf23..a756fe5a6 100644 --- a/src/ui-fragment/src/components/ui-date-picker.tsx +++ b/src/ui-fragment/src/components/ui-date-picker.tsx @@ -5,7 +5,7 @@ import { } from '@carbon/react'; import { commonSlots, slotsDisabled } from '../common-slots'; import { SendSignal } from '../types'; -import { css, cx } from 'emotion'; +import { css } from 'emotion'; const pickerInputAlignment = css ` .cds--date-picker { @@ -68,7 +68,7 @@ export const slots = { toggleLight: (state: DatePickerState) => ({ ...state, light: !state.light - }), + }) }; export const signals = ['valueChange', 'click']; From 65a863c00c7f1b9acaa97b242c7c2c2dddf1279c Mon Sep 17 00:00:00 2001 From: Max You Date: Thu, 5 Oct 2023 10:20:42 -0400 Subject: [PATCH 12/41] value change Signed-off-by: Max You --- src/ui-fragment/src/components/ui-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui-fragment/src/components/ui-date-picker.tsx b/src/ui-fragment/src/components/ui-date-picker.tsx index a756fe5a6..62034bf3b 100644 --- a/src/ui-fragment/src/components/ui-date-picker.tsx +++ b/src/ui-fragment/src/components/ui-date-picker.tsx @@ -91,7 +91,7 @@ export const UIDatePicker = ({ state, sendSignal }: { light={state.light} onClick={() => sendSignal(state.id, 'click')} onChange={(event: any) => { - sendSignal(state.id, 'valueChange', [event.value], { ...state, value: event.value }); + sendSignal(state.id, 'valueChange', [event[0]], { ...state, value: event[0] }); }}> Date: Thu, 5 Oct 2023 11:55:18 -0400 Subject: [PATCH 13/41] value change Signed-off-by: Max You --- src/ui-fragment/src/components/ui-date-picker.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui-fragment/src/components/ui-date-picker.tsx b/src/ui-fragment/src/components/ui-date-picker.tsx index 62034bf3b..777c40d0e 100644 --- a/src/ui-fragment/src/components/ui-date-picker.tsx +++ b/src/ui-fragment/src/components/ui-date-picker.tsx @@ -88,10 +88,11 @@ export const UIDatePicker = ({ state, sendSignal }: { id={state.id} dateFormat={state.dateFormat} datePickerType={state.datePickerType} + value={state.value} light={state.light} onClick={() => sendSignal(state.id, 'click')} onChange={(event: any) => { - sendSignal(state.id, 'valueChange', [event[0]], { ...state, value: event[0] }); + sendSignal(state.id, 'valueChange', [event[0].toISOString()], { ...state, value: event[0].toISOString() }) }}> Date: Thu, 5 Oct 2023 12:38:05 -0400 Subject: [PATCH 14/41] lint Signed-off-by: Max You --- src/ui-fragment/src/components/ui-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui-fragment/src/components/ui-date-picker.tsx b/src/ui-fragment/src/components/ui-date-picker.tsx index 777c40d0e..a94d4d093 100644 --- a/src/ui-fragment/src/components/ui-date-picker.tsx +++ b/src/ui-fragment/src/components/ui-date-picker.tsx @@ -92,7 +92,7 @@ export const UIDatePicker = ({ state, sendSignal }: { light={state.light} onClick={() => sendSignal(state.id, 'click')} onChange={(event: any) => { - sendSignal(state.id, 'valueChange', [event[0].toISOString()], { ...state, value: event[0].toISOString() }) + sendSignal(state.id, 'valueChange', [event[0].toISOString()], { ...state, value: event[0].toISOString() }); }}> Date: Thu, 5 Oct 2023 13:39:26 -0400 Subject: [PATCH 15/41] console log error fix Signed-off-by: Max You --- src/sdk/src/fragment-components/a-date-picker.tsx | 6 +++++- src/ui-fragment/src/components/ui-date-picker.tsx | 2 ++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/sdk/src/fragment-components/a-date-picker.tsx b/src/sdk/src/fragment-components/a-date-picker.tsx index 8187fb86f..f477f394b 100644 --- a/src/sdk/src/fragment-components/a-date-picker.tsx +++ b/src/sdk/src/fragment-components/a-date-picker.tsx @@ -147,11 +147,13 @@ export const ADatePicker = ({ {...rest}> { cc.id).join(' '))} dateFormat={componentObj.dateFormat} datePickerType={componentObj.datePickerType} light={componentObj.light}> Date: Wed, 3 Jan 2024 22:13:17 -0500 Subject: [PATCH 16/41] checkin changes Signed-off-by: Max You --- .../src/lib/fragment-components/a-date-picker.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 29c8bc776..29612e52b 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -221,7 +221,7 @@ export const componentInfo: ComponentInfo = { ${json.disabled ? `[disabled]='${json.disabled}'` : ''} ${json.invalid ? `[invalid]='${json.invalid}'` : ''} ${json.invalidText ? `[invalidText]='${json.invalidText}'` : ''} - [placeholder]="'${json.placeholder}'" + [placeholder]="${json.placeholder}" [size]="${json.size}" [value]="${nameStringToVariableString(json.codeContext?.name)}Value" [dateFormat]="${json.dateFormat}" @@ -237,7 +237,7 @@ export const componentInfo: ComponentInfo = { ${json.invalidText ? `[invalidText]='${json.invalidText}'` : ''} [size]="${json.size}" range="true" - [placeholder]="'${json.placeholder}'" + [placeholder]="${json.placeholder}" [dateFormat]="${json.dateFormat}" [value]="${nameStringToVariableString(json.codeContext?.name)}Value" (valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event.value)"> @@ -259,8 +259,8 @@ export const componentInfo: ComponentInfo = { ${json.invalid ? `[invalid]='${json.invalid}'` : ''} ${json.invalidText ? `[invalidText]='${json.invalidText}'` : ''} (valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event.value)" - [value]="'${nameStringToVariableString(json.codeContext?.name)}Value'" - [placeholder]="'${json.placeholder}'" + [value]="${nameStringToVariableString(json.codeContext?.name)}Value" + [placeholder]="${json.placeholder}" [size]="${json.size}"> ` : json.datePickerType === 'single' @@ -271,7 +271,7 @@ export const componentInfo: ComponentInfo = { ${json.disabled ? `[disabled]='${json.disabled}'` : ''} ${json.invalid ? `[invalid]='${json.invalid}'` : ''} ${json.invalidText ? `[invalidText]='${json.invalidText}'` : ''} - [placeholder]="'${json.placeholder}'" + [placeholder]="${json.placeholder}" [size]="${json.size}" [value]="${nameStringToVariableString(json.codeContext?.name)}Value" [dateFormat]="${json.dateFormat}" @@ -287,7 +287,7 @@ export const componentInfo: ComponentInfo = { ${json.invalidText ? `[invalidText]='${json.invalidText}'` : ''} [size]="${json.size}" range="true" - [placeholder]="'${json.placeholder}'" + [placeholder]="${json.placeholder}" [dateFormat]="${json.dateFormat}" [value]="${nameStringToVariableString(json.codeContext?.name)}Value" (valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event.value)"> From 251e7bbfab8488438abbc728905799d4c01b32b1 Mon Sep 17 00:00:00 2001 From: Max You Date: Wed, 10 Jan 2024 16:15:45 -0500 Subject: [PATCH 17/41] checkin review changes Signed-off-by: Max You --- .../lib/fragment-components/a-date-picker.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 29612e52b..527e500d7 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -22,7 +22,7 @@ const preventCheckEventStyle = css` const pickerInputAlignment = css ` .cds--date-picker { display: flex; - align-items: flex-end !important; + align-items: flex-end; } `; @@ -48,21 +48,21 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) onChange={(event: any) => setComponent({ ...selectedComponent, datePickerType: event.selectedItem.id - })} /> + })} /> setComponent({ ...selectedComponent, dateFormat: event.currentTarget.value - })} /> + })} /> setComponent({ ...selectedComponent, placeholder: event.currentTarget.value - })} /> + })} /> setComponent({ ...selectedComponent, light: !selectedComponent.light - })} /> + })} /> setComponent({ ...selectedComponent, disabled: !selectedComponent.disabled - })} /> + })} /> setComponent({ ...selectedComponent, invalid: !selectedComponent.invalid - })} /> + })} /> setComponent({ ...selectedComponent, invalidText: event.currentTarget.value - })} /> + })} /> { selectedComponent.datePickerType === 'range' && Date: Wed, 17 Apr 2024 21:15:16 -0400 Subject: [PATCH 18/41] in progress Signed-off-by: Max You --- .../lib/fragment-components/a-date-picker.tsx | 106 ++++++++++-------- 1 file changed, 62 insertions(+), 44 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 527e500d7..2d643e804 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -196,7 +196,16 @@ export const componentInfo: ComponentInfo = { codeExport: { angular: { latest: { - inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value ? json.value : ''}";`, + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: any = "${json.value ? json.value : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = "${json.light ? json.light : false}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel ? json.rangeStartLabel : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ? json.rangeEndLabel : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = "${json.disabled ? json.disabled : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = "${json.invalid ? json.invalid : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ? json.invalidText : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ? json.placeholder : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Size: any = "${json.size ? json.size : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat ? json.dateFormat : ''}";`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { @@ -204,41 +213,41 @@ export const componentInfo: ComponentInfo = { ? ` + [placeholder]="${nameStringToVariableString(json.codeContext?.name)}Placeholder" + [size]="${nameStringToVariableString(json.codeContext?.name)}Size"> ` : json.datePickerType === 'single' ? ` ` : ` ` @@ -246,7 +255,16 @@ export const componentInfo: ComponentInfo = { } }, v10: { - inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value ? json.value : ''}";`, + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: any = "${json.value ? json.value : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = "${json.light ? json.light : false}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel ? json.rangeStartLabel : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ? json.rangeEndLabel : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = "${json.disabled ? json.disabled : false}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = "${json.invalid ? json.invalid : false}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ? json.invalidText : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ? json.placeholder : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Size: any = "${json.size ? json.size : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat ? json.dateFormat : ''}";`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { @@ -254,41 +272,41 @@ export const componentInfo: ComponentInfo = { ? ` + [placeholder]="${nameStringToVariableString(json.codeContext?.name)}Placeholder" + [size]="${nameStringToVariableString(json.codeContext?.name)}Size"> ` : json.datePickerType === 'single' ? ` ` : ` ` From dbb87df9d1601fa455c26477349c3cb17d0dfd35 Mon Sep 17 00:00:00 2001 From: Max You Date: Thu, 18 Apr 2024 11:15:00 -0400 Subject: [PATCH 19/41] fixed Signed-off-by: Max You --- .../src/lib/fragment-components/a-date-picker.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 2d643e804..b38022bb6 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -212,7 +212,7 @@ export const componentInfo: ComponentInfo = { return `${json.datePickerType === 'simple' ? `` : `` : ` Date: Fri, 10 May 2024 09:54:58 -0400 Subject: [PATCH 20/41] lint Signed-off-by: Max You --- .../src/lib/fragment-components/a-date-picker.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index b38022bb6..5247db111 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -198,7 +198,8 @@ export const componentInfo: ComponentInfo = { latest: { inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: any = "${json.value ? json.value : ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = "${json.light ? json.light : false}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel ? json.rangeStartLabel : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${ + json.rangeStartLabel ? json.rangeStartLabel : ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ? json.rangeEndLabel : ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = "${json.disabled ? json.disabled : ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = "${json.invalid ? json.invalid : ''}"; @@ -257,7 +258,8 @@ export const componentInfo: ComponentInfo = { v10: { inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: any = "${json.value ? json.value : ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = "${json.light ? json.light : false}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel ? json.rangeStartLabel : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${ + json.rangeStartLabel ? json.rangeStartLabel : ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ? json.rangeEndLabel : ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = "${json.disabled ? json.disabled : false}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = "${json.invalid ? json.invalid : false}"; @@ -337,7 +339,7 @@ export const componentInfo: ComponentInfo = { ${json.rangeEndLabel ? `labelText='${json.rangeEndLabel}'` : ''} ${json.disabled ? `disabled='${json.disabled}'` : ''} ${json.invalid ? `invalid='${json.invalid}'` : ''} - ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} + ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} placeholder="${json.placeholder}" size="${json.size}" type='text' />` @@ -368,7 +370,7 @@ export const componentInfo: ComponentInfo = { ${json.rangeEndLabel ? `labelText='${json.rangeEndLabel}'` : ''} ${json.disabled ? `disabled='${json.disabled}'` : ''} ${json.invalid ? `invalid='${json.invalid}'` : ''} - ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} + ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} placeholder="${json.placeholder}" size="${json.size}" type='text' />` From 8ebec46542dd824e833256d27c18443c279d6b9a Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Wed, 22 May 2024 19:17:21 -0400 Subject: [PATCH 21/41] fix: update date picker exports add missing attributes Signed-off-by: Akshat Patel --- .../src/lib/components/ui-date-picker.tsx | 4 +- .../lib/fragment-components/a-date-picker.tsx | 419 +++++++++--------- 2 files changed, 204 insertions(+), 219 deletions(-) diff --git a/player/react/src/lib/components/ui-date-picker.tsx b/player/react/src/lib/components/ui-date-picker.tsx index f2b8a0939..7d5824b19 100644 --- a/player/react/src/lib/components/ui-date-picker.tsx +++ b/player/react/src/lib/components/ui-date-picker.tsx @@ -21,6 +21,7 @@ export interface DatePickerState { id: string; invalid?: boolean; invalidText?: string; + rangeInvalidText?: string; light?: boolean; size?: string; datePickerType?: string; @@ -42,6 +43,7 @@ export const slots = { invalidText: 'string', rangeStartLabel: 'string', rangeEndLabel: 'string', + rangeInvalidText: 'string', value: 'string', invalid: 'boolean', setInvalid: (state: DatePickerState) => ({ @@ -111,7 +113,7 @@ export const UIDatePicker = ({ state, sendSignal }: { size={state.size} disabled={state.disabled} invalid={state.invalid} - invalidText={state.invalidText} /> + invalidText={state.rangeInvalidText} /> } ; }; diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 5247db111..5747cb07c 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -19,17 +19,11 @@ const preventCheckEventStyle = css` pointer-events: none; `; -const pickerInputAlignment = css ` - .cds--date-picker { - display: flex; - align-items: flex-end; - } -`; - export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) => { const size = [ { id: 'sm', text: 'Small' }, - { id: 'md', text: 'Medium' } + { id: 'md', text: 'Medium' }, + { id: 'lg', text: 'Large' } ]; const datePickerType = [ @@ -39,7 +33,24 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) ]; return <> + setComponent({ + ...selectedComponent, + light: !selectedComponent.light + })} /> + setComponent({ + ...selectedComponent, + disabled: !selectedComponent.disabled + })} /> - setComponent({ - ...selectedComponent, - dateFormat: event.currentTarget.value - })} /> + { + (selectedComponent.datePickerType === 'simple' || selectedComponent.datePickerType === 'range') && + setComponent({ + ...selectedComponent, + dateFormat: event.currentTarget.value + })} /> + } - setComponent({ - ...selectedComponent, - light: !selectedComponent.light - })} /> - setComponent({ + setComponent({ ...selectedComponent, - disabled: !selectedComponent.disabled + rangeStartLabel: event.currentTarget.value })} /> + { + selectedComponent.datePickerType === 'range' + && setComponent({ + ...selectedComponent, + rangeEndLabel: event.currentTarget.value + })} /> + } setComponent({ - ...selectedComponent, - rangeStartLabel: event.currentTarget.value - })} /> - setComponent({ ...selectedComponent, invalidText: event.currentTarget.value })} /> { selectedComponent.datePickerType === 'range' - && setComponent({ ...selectedComponent, - rangeEndLabel: event.currentTarget.value + rangeInvalidText: event.currentTarget.value })} /> } ; @@ -142,35 +156,35 @@ export const ADatePicker = ({ }: any) => { return ( + componentObj={componentObj} + rejectDrop={true} + {...rest}> { cc.id).join(' '))} + className={cx(preventCheckEventStyle, componentObj.cssClasses?.map((cc: any) => cc.id).join(' '))} dateFormat={componentObj.dateFormat} datePickerType={componentObj.datePickerType} light={componentObj.light}> + + { + componentObj.datePickerType === 'range' && - { - componentObj.datePickerType === 'range' && - - } + invalidText={componentObj.rangeInvalidText} /> + } } @@ -190,129 +204,76 @@ export const componentInfo: ComponentInfo = { size: 'md', datePickerType: 'simple', dateFormat: 'm/d/Y', - rangeStartLabel: 'Start Label' + rangeStartLabel: 'Start', + rangeEndLabel: 'End' }, image, codeExport: { angular: { latest: { - inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: any = "${json.value ? json.value : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = "${json.light ? json.light : false}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${ - json.rangeStartLabel ? json.rangeStartLabel : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ? json.rangeEndLabel : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = "${json.disabled ? json.disabled : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = "${json.invalid ? json.invalid : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ? json.invalidText : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ? json.placeholder : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}Size: any = "${json.size ? json.size : ''}"; + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value ? json.value : ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = ${json.light}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${json.disabled ?? false }; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${json.invalid ?? false}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Size = "${json.size ?? ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat ? json.dateFormat : ''}";`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { - return `${json.datePickerType === 'simple' - ? ` - ` - : json.datePickerType === 'single' - ? ` - ` - : ` - ` - }`; + return `${json.datePickerType === 'simple' ? ' + ${json.datePickerType === 'simple' ? '' : ''} + `; } }, v10: { - inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: any = "${json.value ? json.value : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = "${json.light ? json.light : false}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${ - json.rangeStartLabel ? json.rangeStartLabel : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ? json.rangeEndLabel : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = "${json.disabled ? json.disabled : false}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = "${json.invalid ? json.invalid : false}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ? json.invalidText : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ? json.placeholder : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}Size: any = "${json.size ? json.size : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat ? json.dateFormat : ''}";`, + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: any = "${json.value}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = ${json.light}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${json.disabled ?? false }; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${json.invalid ?? false}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Size = "${json.size}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat ?? ''}";`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { - return `${json.datePickerType === 'simple' - ? ` - ` - : json.datePickerType === 'single' - ? ` - ` - : ` - ` - }`; + return `${json.datePickerType === 'simple' ? ' + ${json.datePickerType === 'simple' ? '' : ''} + `; } } }, @@ -321,62 +282,84 @@ export const componentInfo: ComponentInfo = { imports: ['DatePicker', 'DatePickerInput'], code: ({ json }) => { return ` - - ${json.datePickerType === 'range' - ? `` - : '' - } - `; + ${reactClassNamesFromComponentObj(json)} + dateFormat="${json.dateFormat}" + datePickerType="${json.datePickerType}" + ${json.light ? 'light={true}' : ''} + ${json.datePickerType !== 'simple' ? `onChange={(dates) => handleInputChange({ + target: { + name: "${json.codeContext?.name}", + value: dates + } + })}`: ''}> + handleInputChange({ + target: { + name: "${json.codeContext?.name}", + value: dates + } + })}` : ''} + /> + ${json.datePickerType === 'range' ? `` + : ''} + `; } }, v10: { imports: ['DatePicker', 'DatePickerInput'], code: ({ json }) => { return ` - - ${json.datePickerType === 'range' - ? `` - : '' - } - `; + ${reactClassNamesFromComponentObj(json)} + dateFormat="${json.dateFormat}" + datePickerType="${json.datePickerType}" + ${json.light ? 'light={true}' : ''} + ${json.datePickerType !== 'simple' ? `onChange={(dates) => handleInputChange({ + target: { + name: "${json.codeContext?.name}", + value: dates + } + })}`: ''}> + handleInputChange({ + target: { + name: "${json.codeContext?.name}", + value: dates + } + })}` : ''} + /> + ${json.datePickerType === 'range' ? `` + : ''} + `; } } } From 2f862e0b5941ddce51cc5f8ef0be971f3ed4d651 Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Wed, 22 May 2024 19:17:55 -0400 Subject: [PATCH 22/41] fix: prevent checkbox inline style from leaking Signed-off-by: Akshat Patel --- sdk/react/src/lib/components/settings-context-pane.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sdk/react/src/lib/components/settings-context-pane.tsx b/sdk/react/src/lib/components/settings-context-pane.tsx index c099bfa18..f31a569d4 100644 --- a/sdk/react/src/lib/components/settings-context-pane.tsx +++ b/sdk/react/src/lib/components/settings-context-pane.tsx @@ -211,7 +211,7 @@ export const SettingsContextPane = ({ }, [settings]); return ( -
+
{ selectedComponent && } { - !selectedComponent && <> + !selectedComponent &&
micro layout - +
}
} From 38142f7a118abf956a099fa5841f0cf31cf5ba2b Mon Sep 17 00:00:00 2001 From: Akshat Patel Date: Tue, 28 May 2024 13:02:38 -0400 Subject: [PATCH 23/41] fix: show date format input only for 'single' or 'range' Signed-off-by: Akshat Patel --- sdk/react/src/lib/fragment-components/a-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 5747cb07c..674e5d7d2 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -61,7 +61,7 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) datePickerType: event.selectedItem.id })} /> { - (selectedComponent.datePickerType === 'simple' || selectedComponent.datePickerType === 'range') && + (selectedComponent.datePickerType === 'single' || selectedComponent.datePickerType === 'range') && Date: Tue, 28 May 2024 14:26:42 -0400 Subject: [PATCH 24/41] style removal Signed-off-by: Max You --- player/react/src/lib/components/ui-date-picker.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/player/react/src/lib/components/ui-date-picker.tsx b/player/react/src/lib/components/ui-date-picker.tsx index 7d5824b19..2a7ff4869 100644 --- a/player/react/src/lib/components/ui-date-picker.tsx +++ b/player/react/src/lib/components/ui-date-picker.tsx @@ -5,14 +5,6 @@ import { } from '@carbon/react'; import { commonSlots, slotsDisabled } from '../common-slots'; import { SendSignal } from '../types'; -import { css } from 'emotion'; - -const pickerInputAlignment = css ` - .cds--date-picker { - display: flex; - align-items: flex-end !important; - } -`; export interface DatePickerState { type: string; @@ -86,7 +78,6 @@ export const UIDatePicker = ({ state, sendSignal }: { return <>; } return Date: Wed, 29 May 2024 09:33:32 -0400 Subject: [PATCH 25/41] quick fix Signed-off-by: Max You --- .../src/lib/fragment-components/a-date-picker.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 674e5d7d2..b48b5ba91 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -201,11 +201,7 @@ export const componentInfo: ComponentInfo = { defaultComponentObj: { type: 'date-picker', placeholder: 'mm/dd/yyyy', - size: 'md', - datePickerType: 'simple', - dateFormat: 'm/d/Y', - rangeStartLabel: 'Start', - rangeEndLabel: 'End' + rangeStartLabel: 'Date' }, image, codeExport: { @@ -299,7 +295,7 @@ export const componentInfo: ComponentInfo = { ${json.disabled ? `disabled='${json.disabled}'` : ''} ${json.invalid ? `invalid='${json.invalid}'` : ''} ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} - size="${json.size}" + ${json.size ? `size='${json.size}'` : ''} ${json.datePickerType === 'simple' ? `onChange={(dates) => handleInputChange({ target: { name: "${json.codeContext?.name}", @@ -341,7 +337,7 @@ export const componentInfo: ComponentInfo = { ${json.disabled ? `disabled='${json.disabled}'` : ''} ${json.invalid ? `invalid='${json.invalid}'` : ''} ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} - size="${json.size}" + ${json.size ? `size='${json.size}'` : ''} ${json.datePickerType === 'simple' ? `onChange={(dates) => handleInputChange({ target: { name: "${json.codeContext?.name}", From 076953b1e2c66985afa80f6af0ac994db7a09fbd Mon Sep 17 00:00:00 2001 From: "Jianzhong(Max) You" Date: Wed, 29 May 2024 14:43:22 -0400 Subject: [PATCH 26/41] Update player/react/src/lib/components/ui-date-picker.tsx --- player/react/src/lib/components/ui-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/player/react/src/lib/components/ui-date-picker.tsx b/player/react/src/lib/components/ui-date-picker.tsx index 2a7ff4869..390069f03 100644 --- a/player/react/src/lib/components/ui-date-picker.tsx +++ b/player/react/src/lib/components/ui-date-picker.tsx @@ -98,7 +98,7 @@ export const UIDatePicker = ({ state, sendSignal }: { { state.datePickerType === 'range' && Date: Wed, 29 May 2024 14:43:27 -0400 Subject: [PATCH 27/41] Update player/react/src/lib/components/ui-date-picker.tsx --- player/react/src/lib/components/ui-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/player/react/src/lib/components/ui-date-picker.tsx b/player/react/src/lib/components/ui-date-picker.tsx index 390069f03..5d65c9749 100644 --- a/player/react/src/lib/components/ui-date-picker.tsx +++ b/player/react/src/lib/components/ui-date-picker.tsx @@ -88,7 +88,7 @@ export const UIDatePicker = ({ state, sendSignal }: { sendSignal(state.id, 'valueChange', [event[0].toISOString()], { ...state, value: event[0].toISOString() }); }}> Date: Wed, 29 May 2024 14:43:32 -0400 Subject: [PATCH 28/41] Update sdk/react/src/lib/fragment-components/a-date-picker.tsx --- sdk/react/src/lib/fragment-components/a-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index b48b5ba91..4cfa20c63 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -167,7 +167,7 @@ export const ADatePicker = ({ datePickerType={componentObj.datePickerType} light={componentObj.light}> Date: Wed, 29 May 2024 14:43:38 -0400 Subject: [PATCH 29/41] Update sdk/react/src/lib/fragment-components/a-date-picker.tsx --- sdk/react/src/lib/fragment-components/a-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 4cfa20c63..c95e751ba 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -177,7 +177,7 @@ export const ADatePicker = ({ { componentObj.datePickerType === 'range' && Date: Wed, 29 May 2024 14:43:43 -0400 Subject: [PATCH 30/41] Update sdk/react/src/lib/fragment-components/a-date-picker.tsx --- sdk/react/src/lib/fragment-components/a-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index c95e751ba..fa098462e 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -289,7 +289,7 @@ export const componentInfo: ComponentInfo = { } })}`: ''}> Date: Wed, 29 May 2024 14:43:47 -0400 Subject: [PATCH 31/41] Update sdk/react/src/lib/fragment-components/a-date-picker.tsx --- sdk/react/src/lib/fragment-components/a-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index fa098462e..bc1514edc 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -331,7 +331,7 @@ export const componentInfo: ComponentInfo = { } })}`: ''}> Date: Wed, 29 May 2024 18:52:01 -0400 Subject: [PATCH 32/41] fix: replace 'datePickerType' with 'kind' and remove unused styles Signed-off-by: Akshat Patel --- .../src/lib/components/ui-date-picker.tsx | 27 +++++++++--- .../lib/fragment-components/a-date-picker.tsx | 44 +++++++++---------- 2 files changed, 44 insertions(+), 27 deletions(-) diff --git a/player/react/src/lib/components/ui-date-picker.tsx b/player/react/src/lib/components/ui-date-picker.tsx index 5d65c9749..94dbe5fd4 100644 --- a/player/react/src/lib/components/ui-date-picker.tsx +++ b/player/react/src/lib/components/ui-date-picker.tsx @@ -4,7 +4,8 @@ import { DatePickerInput } from '@carbon/react'; import { commonSlots, slotsDisabled } from '../common-slots'; -import { SendSignal } from '../types'; +import { SendSignal, CssClasses } from '../types'; +import { stringToCssClassName } from '../utils'; export interface DatePickerState { type: string; @@ -16,11 +17,16 @@ export interface DatePickerState { rangeInvalidText?: string; light?: boolean; size?: string; - datePickerType?: string; + kind?: string; dateFormat?: string; value?: string; rangeStartLabel?: string; rangeEndLabel?: string; + cssClasses?: CssClasses[]; + codeContext: { + name: string; + }; + style?: any; } export const type = 'date-picker'; @@ -29,7 +35,7 @@ export const slots = { ...commonSlots, ...slotsDisabled, dateFormat: 'string', - datePickerType: 'string', + kind: 'string', placeholder: 'string', size: 'string', invalidText: 'string', @@ -77,10 +83,21 @@ export const UIDatePicker = ({ state, sendSignal }: { // eslint-disable-next-line react/jsx-no-useless-fragment return <>; } + + let cssClasses = state.cssClasses?.map((cc: any) => cc.id).join(' ') || ''; + + if (state.style) { + if (cssClasses.length > 0) { + cssClasses += ' '; + } + cssClasses += stringToCssClassName(state.codeContext.name); + } + return sendSignal(state.id, 'click')} @@ -96,7 +113,7 @@ export const UIDatePicker = ({ state, sendSignal }: { invalid={state.invalid} invalidText={state.invalidText}/> { - state.datePickerType === 'range' && + state.kind === 'range' && item.id === selectedComponent.datePickerType)} + selectedItem={datePickerType.find(item => item.id === selectedComponent.kind)} itemToString={(item: any) => (item ? item.text : '')} onChange={(event: any) => setComponent({ ...selectedComponent, - datePickerType: event.selectedItem.id + kind: event.selectedItem.id })} /> { - (selectedComponent.datePickerType === 'single' || selectedComponent.datePickerType === 'range') && + (selectedComponent.kind === 'single' || selectedComponent.kind === 'range') && setComponent({ ...selectedComponent, rangeStartLabel: event.currentTarget.value })} /> { - selectedComponent.datePickerType === 'range' + selectedComponent.kind === 'range' && { - selectedComponent.datePickerType === 'range' + selectedComponent.kind === 'range' && cc.id).join(' '))} dateFormat={componentObj.dateFormat} - datePickerType={componentObj.datePickerType} + datePickerType={componentObj.kind} light={componentObj.light}> { - componentObj.datePickerType === 'range' && + componentObj.kind === 'range' && `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { - return `${json.datePickerType === 'simple' ? ' - ${json.datePickerType === 'simple' ? '' : ''} + ${json.kind === 'simple' ? '' : ''} `; } }, @@ -253,7 +253,7 @@ export const componentInfo: ComponentInfo = { outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { - return `${json.datePickerType === 'simple' ? ' - ${json.datePickerType === 'simple' ? '' : ''} + ${json.kind === 'simple' ? '' : ''} `; } } @@ -280,9 +280,9 @@ export const componentInfo: ComponentInfo = { return ` handleInputChange({ + ${json.kind !== 'simple' ? `onChange={(dates) => handleInputChange({ target: { name: "${json.codeContext?.name}", value: dates @@ -296,14 +296,14 @@ export const componentInfo: ComponentInfo = { ${json.invalid ? `invalid='${json.invalid}'` : ''} ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} ${json.size ? `size='${json.size}'` : ''} - ${json.datePickerType === 'simple' ? `onChange={(dates) => handleInputChange({ + ${json.kind === 'simple' ? `onChange={(dates) => handleInputChange({ target: { name: "${json.codeContext?.name}", value: dates } })}` : ''} /> - ${json.datePickerType === 'range' ? ` handleInputChange({ + ${json.kind !== 'simple' ? `onChange={(dates) => handleInputChange({ target: { name: "${json.codeContext?.name}", value: dates @@ -338,14 +338,14 @@ export const componentInfo: ComponentInfo = { ${json.invalid ? `invalid='${json.invalid}'` : ''} ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} ${json.size ? `size='${json.size}'` : ''} - ${json.datePickerType === 'simple' ? `onChange={(dates) => handleInputChange({ + ${json.kind === 'simple' ? `onChange={(dates) => handleInputChange({ target: { name: "${json.codeContext?.name}", value: dates } })}` : ''} /> - ${json.datePickerType === 'range' ? ` Date: Wed, 29 May 2024 23:01:12 -0400 Subject: [PATCH 33/41] fix: remove redundant id Signed-off-by: Akshat Patel --- player/react/src/lib/components/ui-date-picker.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/player/react/src/lib/components/ui-date-picker.tsx b/player/react/src/lib/components/ui-date-picker.tsx index 94dbe5fd4..576a22e4d 100644 --- a/player/react/src/lib/components/ui-date-picker.tsx +++ b/player/react/src/lib/components/ui-date-picker.tsx @@ -95,7 +95,6 @@ export const UIDatePicker = ({ state, sendSignal }: { return Date: Wed, 29 May 2024 23:22:55 -0400 Subject: [PATCH 34/41] fix: clean up date picker component Signed-off-by: Akshat Patel --- .../lib/fragment-components/a-date-picker.tsx | 118 ++++++++++++------ 1 file changed, 82 insertions(+), 36 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 495dccd3f..ae83b47ae 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { DatePicker, DatePickerInput, @@ -19,7 +19,14 @@ const preventCheckEventStyle = css` pointer-events: none; `; +const checkboxStyle = css` + padding-top: 0.5rem; +`; + export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) => { + const [showRangePlaceholder, setShowRangePlaceholder] = useState(false); + const [rangePlaceholder, setRangePlaceholder] = useState('Range placeholder'); + const size = [ { id: 'sm', text: 'Small' }, { id: 'md', text: 'Medium' }, @@ -58,7 +65,8 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) itemToString={(item: any) => (item ? item.text : '')} onChange={(event: any) => setComponent({ ...selectedComponent, - kind: event.selectedItem.id + kind: event.selectedItem.id, + ...(event.selectedItem.id === 'range' && selectedComponent.rangeEndLabel === undefined) ? { rangeEndLabel: 'Range end' } : {} })} /> { (selectedComponent.kind === 'single' || selectedComponent.kind === 'range') && @@ -72,12 +80,50 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) })} /> } setComponent({ ...selectedComponent, placeholder: event.currentTarget.value })} /> + {selectedComponent.kind === 'range' && + { + setShowRangePlaceholder(checked); + const componentAttributes = selectedComponent; + + if (!checked) { + // Deleting the attributes from the model + delete componentAttributes.rangePlaceholder; + } else { + // Restore user set range placeholder + componentAttributes.rangePlaceholder = rangePlaceholder; + } + + setComponent({ + ...componentAttributes + }); + }} /> + } + { + showRangePlaceholder && + { + setRangePlaceholder(event.currentTarget.value); + setComponent({ + ...selectedComponent, + rangePlaceholder: event.currentTarget.value + }); + }} /> + } setComponent({ @@ -109,6 +155,7 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) })} /> } `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value ? json.value : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = ${json.light}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = ${json.light ?? false}; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ?? ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${json.disabled ?? false }; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${json.disabled ?? false}; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${json.invalid ?? false}; @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ?? ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}Size = "${json.size ?? ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat ? json.dateFormat : ''}";`, + @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? 'mm/dd/yyyy'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangePlaceholder = "${json.rangePlaceholder ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Size = "${json.size || 'md'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat || 'm/d/Y'}";`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { @@ -240,16 +287,16 @@ export const componentInfo: ComponentInfo = { } }, v10: { - inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: any = "${json.value}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = ${json.light}; + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = ${json.light ?? false}; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ?? ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${json.disabled ?? false }; + @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${json.disabled ?? false}; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${json.invalid ?? false}; @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ?? ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}Size = "${json.size}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat ?? ''}";`, + @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? 'mm/dd/yyyy'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Size = "${json.size || 'md'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat || 'm/d/Y'}";`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { @@ -279,8 +326,8 @@ export const componentInfo: ComponentInfo = { code: ({ json }) => { return ` handleInputChange({ target: { @@ -289,13 +336,13 @@ export const componentInfo: ComponentInfo = { } })}`: ''}> handleInputChange({ target: { name: "${json.codeContext?.name}", @@ -304,15 +351,14 @@ export const componentInfo: ComponentInfo = { })}` : ''} /> ${json.kind === 'range' ? `` - : ''} + ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} + />` : ''} `; } }, @@ -321,8 +367,8 @@ export const componentInfo: ComponentInfo = { code: ({ json }) => { return ` handleInputChange({ target: { @@ -331,13 +377,13 @@ export const componentInfo: ComponentInfo = { } })}`: ''}> handleInputChange({ target: { name: "${json.codeContext?.name}", @@ -346,15 +392,15 @@ export const componentInfo: ComponentInfo = { })}` : ''} /> ${json.kind === 'range' ? `` - : ''} + : ''} `; } } From 931269702763e580de9179291f8ad02740b57200 Mon Sep 17 00:00:00 2001 From: Max You Date: Fri, 31 May 2024 14:57:07 -0400 Subject: [PATCH 35/41] react export fix Signed-off-by: Max You --- .../lib/fragment-components/a-date-picker.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index ae83b47ae..471e2b4e6 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -339,8 +339,8 @@ export const componentInfo: ComponentInfo = { id="${nameStringToVariableString(json.codeContext?.name)}" ${json.placeholder ? `placeholder='${json.placeholder}'` : ''} ${json.rangeStartLabel ? `labelText='${json.rangeStartLabel}'` : ''} - ${json.disabled ? `disabled='${json.disabled}'` : ''} - ${json.invalid ? `invalid='${json.invalid}'` : ''} + ${json.disabled ? `disabled={${json.disabled}}` : ''} + ${json.invalid ? `invalid={${json.invalid}}` : ''} ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} ${json.kind === 'simple' ? `onChange={(dates) => handleInputChange({ @@ -354,8 +354,8 @@ export const componentInfo: ComponentInfo = { id="${nameStringToVariableString(json.codeContext?.name) + '-end'}" ${json.rangePlaceholder ? `placeholder="${json.rangePlaceholder}"` : `placeholder="${json.placeholder}"`} ${json.rangeEndLabel ? `labelText='${json.rangeEndLabel}'` : ''} - ${json.disabled ? `disabled='${json.disabled}'` : ''} - ${json.invalid ? `invalid='${json.invalid}'` : ''} + ${json.disabled ? `disabled={${json.disabled}}` : ''} + ${json.invalid ? `invalid={${json.invalid}}` : ''} ${json.invalidText ? `invalidText='${json.rangeInvalidText}'` : ''} ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} />` : ''} @@ -380,8 +380,8 @@ export const componentInfo: ComponentInfo = { id="${nameStringToVariableString(json.codeContext?.name)}" ${json.placeholder ? `placeholder='${json.placeholder}'` : ''} ${json.rangeStartLabel ? `labelText='${json.rangeStartLabel}'` : ''} - ${json.disabled ? `disabled='${json.disabled}'` : ''} - ${json.invalid ? `invalid='${json.invalid}'` : ''} + ${json.disabled ? `disabled={${json.disabled}}` : ''} + ${json.invalid ? `invalid={${json.invalid}}` : ''} ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} ${json.kind === 'simple' ? `onChange={(dates) => handleInputChange({ @@ -395,8 +395,8 @@ export const componentInfo: ComponentInfo = { id="${nameStringToVariableString(json.codeContext?.name) + '-end'}" ${json.rangePlaceholder ? `placeholder="${json.rangePlaceholder}"` : `placeholder="${json.placeholder}"`} ${json.rangeEndLabel ? `labelText='${json.rangeEndLabel}'` : ''} - ${json.disabled ? `disabled='${json.disabled}'` : ''} - ${json.invalid ? `invalid='${json.invalid}'` : ''} + ${json.disabled ? `disabled={${json.disabled}}` : ''} + ${json.invalid ? `invalid={${json.invalid}}` : ''} ${json.invalidText ? `invalidText='${json.rangeInvalidText}'` : ''} ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} />` From 211e64109ef8a24407938f66a811b43e4c0d40e1 Mon Sep 17 00:00:00 2001 From: Max You Date: Fri, 31 May 2024 15:25:56 -0400 Subject: [PATCH 36/41] angular export Signed-off-by: Max You --- .../lib/fragment-components/a-date-picker.tsx | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 471e2b4e6..d4d29a4f6 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -253,8 +253,9 @@ export const componentInfo: ComponentInfo = { codeExport: { angular: { latest: { - inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value ? json.value : ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = ${json.light ?? false}; + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: (string | Date)[] + = ${json.value ? json.value : "['']"}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Theme: "light" | "dark" = "${json.light ? 'light' : 'dark'}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ?? ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${json.disabled ?? false}; @@ -262,60 +263,62 @@ export const componentInfo: ComponentInfo = { @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ?? ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? 'mm/dd/yyyy'}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangePlaceholder = "${json.rangePlaceholder ?? ''}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}Size = "${json.size || 'md'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Size: "sm" | "md" | "lg" = "${json.size || 'md'}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat || 'm/d/Y'}";`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { - return `${json.kind === 'simple' ? ' - ${json.kind === 'simple' ? '' : ''} + `; } }, v10: { - inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = "${json.value}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}IsLight = ${json.light ?? false}; + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: (string | Date)[] + = ${json.value ? json.value : "['']"}; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Theme: "light" | "dark" = "${json.light ? 'light' : 'dark'}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ?? ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${json.disabled ?? false}; @Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${json.invalid ?? false}; @Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ?? ''}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? 'mm/dd/yyyy'}"; - @Input() ${nameStringToVariableString(json.codeContext?.name)}Size = "${json.size || 'md'}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}RangePlaceholder = "${json.rangePlaceholder ?? ''}"; + @Input() ${nameStringToVariableString(json.codeContext?.name)}Size: "sm" | "md" | "lg" = "${json.size || 'md'}"; @Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat || 'm/d/Y'}";`, outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`, imports: ['DatePickerModule'], code: ({ json }) => { - return `${json.kind === 'simple' ? ' - ${json.kind === 'simple' ? '' : ''} + `; } } From 2b7fd06b78e7fdc1c68e3541afec56bb80995a2b Mon Sep 17 00:00:00 2001 From: Max You Date: Tue, 23 Jul 2024 11:54:04 -0400 Subject: [PATCH 37/41] revert context pane changes Signed-off-by: Max You --- sdk/react/src/lib/components/settings-context-pane.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sdk/react/src/lib/components/settings-context-pane.tsx b/sdk/react/src/lib/components/settings-context-pane.tsx index f31a569d4..88b7bc0cd 100644 --- a/sdk/react/src/lib/components/settings-context-pane.tsx +++ b/sdk/react/src/lib/components/settings-context-pane.tsx @@ -211,7 +211,7 @@ export const SettingsContextPane = ({ }, [settings]); return ( -
+
{ selectedComponent && Date: Tue, 23 Jul 2024 11:59:11 -0400 Subject: [PATCH 38/41] terneries and indentation Signed-off-by: Max You --- .../lib/fragment-components/a-date-picker.tsx | 97 +++++++++++-------- 1 file changed, 56 insertions(+), 41 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index d4d29a4f6..158dff035 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -222,8 +222,8 @@ export const ADatePicker = ({ labelText={componentObj.rangeStartLabel} size={componentObj.size} /> { - componentObj.kind === 'range' && - + ${ + !json.kind || json.kind === 'simple' + ? `[dateFormat]="${nameStringToVariableString(json.codeContext?.name)}DateFormat"` + : `[range]="true" [rangeLabel]="${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel"` + }> `; } @@ -314,10 +315,11 @@ export const componentInfo: ComponentInfo = { [value]="${nameStringToVariableString(json.codeContext?.name)}Value" [placeholder]="${nameStringToVariableString(json.codeContext?.name)}Placeholder" [size]="${nameStringToVariableString(json.codeContext?.name)}Size" - ${!json.kind || json.kind === 'simple' ? - `[dateFormat]="${nameStringToVariableString(json.codeContext?.name)}DateFormat"` : - `[range]="true" - [rangeLabel]="${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel"`}> + ${ + !json.kind || json.kind === 'simple' + ? `[dateFormat]="${nameStringToVariableString(json.codeContext?.name)}DateFormat"` + : `[range]="true" [rangeLabel]="${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel"` + }> `; } @@ -346,22 +348,29 @@ export const componentInfo: ComponentInfo = { ${json.invalid ? `invalid={${json.invalid}}` : ''} ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} - ${json.kind === 'simple' ? `onChange={(dates) => handleInputChange({ - target: { - name: "${json.codeContext?.name}", - value: dates - } - })}` : ''} + ${ + json.kind === 'simple' + ? `onChange={(dates) => handleInputChange({ + target: { + name: "${json.codeContext?.name}", + value: dates + }})}` + : '' + } /> - ${json.kind === 'range' ? `` : ''} + ${ + json.kind === 'range' + ? `` + : '' + } `; } }, @@ -387,23 +396,29 @@ export const componentInfo: ComponentInfo = { ${json.invalid ? `invalid={${json.invalid}}` : ''} ${json.invalidText ? `invalidText='${json.invalidText}'` : ''} ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} - ${json.kind === 'simple' ? `onChange={(dates) => handleInputChange({ - target: { - name: "${json.codeContext?.name}", - value: dates - } - })}` : ''} + ${ + json.kind === 'simple' + ? `onChange={(dates) => handleInputChange({ + target: { + name: "${json.codeContext?.name}", + value: dates + }})}` + : '' + } /> - ${json.kind === 'range' ? `` - : ''} + ${ + json.kind === 'range' + ? `` + : '' + } `; } } From cf36bd76b2350b5e8de91993ab87fc60107486f7 Mon Sep 17 00:00:00 2001 From: Max You Date: Wed, 24 Jul 2024 17:36:01 -0400 Subject: [PATCH 39/41] rangePlaceHolder Signed-off-by: Max You --- .../lib/fragment-components/a-date-picker.tsx | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index 158dff035..f45bbd0df 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -95,19 +95,17 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) checked={showRangePlaceholder} onChange={(_: any, { checked }: any) => { setShowRangePlaceholder(checked); - const componentAttributes = selectedComponent; - if (!checked) { - // Deleting the attributes from the model - delete componentAttributes.rangePlaceholder; + delete selectedComponent.rangePlaceholder; + setComponent({ + ...selectedComponent + }); } else { - // Restore user set range placeholder - componentAttributes.rangePlaceholder = rangePlaceholder; + setComponent({ + ...selectedComponent, + rangePlaceholder + }); } - - setComponent({ - ...componentAttributes - }); }} /> } { @@ -144,8 +142,8 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) rangeStartLabel: event.currentTarget.value })} /> { - selectedComponent.kind === 'range' - && ` + ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} />` : '' } `; @@ -415,8 +412,7 @@ export const componentInfo: ComponentInfo = { ${json.disabled ? `disabled={${json.disabled}}` : ''} ${json.invalid ? `invalid={${json.invalid}}` : ''} ${json.invalidText ? `invalidText='${json.rangeInvalidText}'` : ''} - ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} - />` + ${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} />` : '' } `; From c2178fafae4fd42dd4aa9ce2be6bc312a32b9beb Mon Sep 17 00:00:00 2001 From: Max You Date: Thu, 25 Jul 2024 14:21:36 -0400 Subject: [PATCH 40/41] revision Signed-off-by: Max You --- .../src/lib/components/ui-date-picker.tsx | 22 +++++++------ .../lib/fragment-components/a-date-picker.tsx | 33 ++++++++----------- 2 files changed, 25 insertions(+), 30 deletions(-) diff --git a/player/react/src/lib/components/ui-date-picker.tsx b/player/react/src/lib/components/ui-date-picker.tsx index 576a22e4d..180b01822 100644 --- a/player/react/src/lib/components/ui-date-picker.tsx +++ b/player/react/src/lib/components/ui-date-picker.tsx @@ -10,8 +10,8 @@ import { stringToCssClassName } from '../utils'; export interface DatePickerState { type: string; placeholder: string; - disabled?: boolean; id: string; + disabled?: boolean; invalid?: boolean; invalidText?: string; rangeInvalidText?: string; @@ -22,6 +22,7 @@ export interface DatePickerState { value?: string; rangeStartLabel?: string; rangeEndLabel?: string; + rangePlaceholder?: string; cssClasses?: CssClasses[]; codeContext: { name: string; @@ -41,6 +42,7 @@ export const slots = { invalidText: 'string', rangeStartLabel: 'string', rangeEndLabel: 'string', + rangePlaceholder: 'string', rangeInvalidText: 'string', value: 'string', invalid: 'boolean', @@ -112,15 +114,15 @@ export const UIDatePicker = ({ state, sendSignal }: { invalid={state.invalid} invalidText={state.invalidText}/> { - state.kind === 'range' && - + state.kind === 'range' + && } ; }; diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx index f45bbd0df..b11f8c630 100644 --- a/sdk/react/src/lib/fragment-components/a-date-picker.tsx +++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx @@ -66,7 +66,7 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) onChange={(event: any) => setComponent({ ...selectedComponent, kind: event.selectedItem.id, - ...(event.selectedItem.id === 'range' && selectedComponent.rangeEndLabel === undefined) ? { rangeEndLabel: 'Range end' } : {} + rangeEndLabel: event.selectedItem.id === 'range' ? 'Range end' : undefined })} /> { (selectedComponent.kind === 'single' || selectedComponent.kind === 'range') && @@ -95,22 +95,15 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) checked={showRangePlaceholder} onChange={(_: any, { checked }: any) => { setShowRangePlaceholder(checked); - if (!checked) { - delete selectedComponent.rangePlaceholder; - setComponent({ - ...selectedComponent - }); - } else { - setComponent({ - ...selectedComponent, - rangePlaceholder - }); - } + setComponent({ + ...selectedComponent, + rangePlaceholder: checked ? rangePlaceholder : undefined + }); }} /> } { - showRangePlaceholder && - { - selectedComponent.kind === 'range' && - Date: Thu, 25 Jul 2024 14:28:53 -0400 Subject: [PATCH 41/41] revision Signed-off-by: Max You --- player/react/src/lib/components/ui-date-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/player/react/src/lib/components/ui-date-picker.tsx b/player/react/src/lib/components/ui-date-picker.tsx index 180b01822..f722e13f7 100644 --- a/player/react/src/lib/components/ui-date-picker.tsx +++ b/player/react/src/lib/components/ui-date-picker.tsx @@ -9,8 +9,8 @@ import { stringToCssClassName } from '../utils'; export interface DatePickerState { type: string; - placeholder: string; id: string; + placeholder?: string; disabled?: boolean; invalid?: boolean; invalidText?: string;