Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add datepicker as a fragment component #262

Open
wants to merge 44 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
646baf5
date picker
jz5426 Aug 31, 2023
6cb5cff
clean
jz5426 Aug 31, 2023
0219acf
lint
jz5426 Sep 6, 2023
63ca1b4
focus and datepicker input bottom alignment
jz5426 Sep 15, 2023
404c8a5
angular date picker export
jz5426 Sep 15, 2023
e6a3cf9
react date picker export
jz5426 Sep 15, 2023
668ba8f
fixed
jz5426 Sep 22, 2023
4157f0e
react has type = text
jz5426 Sep 22, 2023
5ed4b0b
Merge branch 'main' of https://github.com/IBM/carbon-ui-builder into …
jz5426 Oct 5, 2023
a381f4e
progress
jz5426 Oct 5, 2023
a3125bd
progress
jz5426 Oct 5, 2023
201484a
lint
jz5426 Oct 5, 2023
65a863c
value change
jz5426 Oct 5, 2023
a4b5655
value change
jz5426 Oct 5, 2023
c8fad9d
lint
jz5426 Oct 5, 2023
3bf5c40
console log error fix
jz5426 Oct 5, 2023
933e7ef
checkin changes
jz5426 Jan 4, 2024
7c3b89e
checkin changes
jz5426 Jan 4, 2024
251e7bb
checkin review changes
jz5426 Jan 10, 2024
a9eb7f7
in progress
Apr 18, 2024
dbb87df
fixed
Apr 18, 2024
a9dd65e
Merge branch 'main' of https://github.com/IBM/carbon-ui-builder into …
May 10, 2024
693d844
lint
May 10, 2024
8ebec46
fix: update date picker exports add missing attributes
Akshat55 May 22, 2024
2f862e0
fix: prevent checkbox inline style from leaking
Akshat55 May 22, 2024
38142f7
fix: show date format input only for 'single' or 'range'
Akshat55 May 28, 2024
ffe362d
style removal
May 28, 2024
81ed09e
quick fix
May 29, 2024
076953b
Update player/react/src/lib/components/ui-date-picker.tsx
jz5426 May 29, 2024
b37fd9f
Update player/react/src/lib/components/ui-date-picker.tsx
jz5426 May 29, 2024
6b82184
Update sdk/react/src/lib/fragment-components/a-date-picker.tsx
jz5426 May 29, 2024
7e92ac5
Update sdk/react/src/lib/fragment-components/a-date-picker.tsx
jz5426 May 29, 2024
acf664f
Update sdk/react/src/lib/fragment-components/a-date-picker.tsx
jz5426 May 29, 2024
ecef193
Update sdk/react/src/lib/fragment-components/a-date-picker.tsx
jz5426 May 29, 2024
4d65d81
fix: replace 'datePickerType' with 'kind' and remove unused styles
Akshat55 May 29, 2024
bc3c30b
fix: remove redundant id
Akshat55 May 30, 2024
9d18919
fix: clean up date picker component
Akshat55 May 30, 2024
9312697
react export fix
May 31, 2024
211e641
angular export
May 31, 2024
2b7fd06
revert context pane changes
Jul 23, 2024
749688e
terneries and indentation
Jul 23, 2024
cf36bd7
rangePlaceHolder
Jul 24, 2024
c2178fa
revision
Jul 25, 2024
8a15d63
revision
Jul 25, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
revision
Signed-off-by: Max You <[email protected]>
  • Loading branch information
Max You authored and Max You committed Jul 25, 2024
commit c2178fafae4fd42dd4aa9ce2be6bc312a32b9beb
22 changes: 12 additions & 10 deletions player/react/src/lib/components/ui-date-picker.tsx
Original file line number Diff line number Diff line change
@@ -10,8 +10,8 @@ import { stringToCssClassName } from '../utils';
export interface DatePickerState {
type: string;
placeholder: string;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

optional

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' &&
<DatePickerInput
id={`${state.id}-end`}
placeholder={state.placeholder}
labelText={state.rangeEndLabel}
size={state.size}
disabled={state.disabled}
invalid={state.invalid}
invalidText={state.rangeInvalidText} />
state.kind === 'range'
&& <DatePickerInput
id={`${state.id}-end`}
placeholder={state.placeholder}
labelText={state.rangePlaceholder}
size={state.size}
disabled={state.disabled}
invalid={state.invalid}
invalidText={state.rangeInvalidText} />
}
</DatePicker>;
};
33 changes: 13 additions & 20 deletions sdk/react/src/lib/fragment-components/a-date-picker.tsx
Original file line number Diff line number Diff line change
@@ -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 &&
<TextInput
showRangePlaceholder
&& <TextInput
id='range-placeholder'
value={selectedComponent.rangePlaceholder}
labelText='Range placeholder'
@@ -142,8 +135,8 @@ export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any)
rangeStartLabel: event.currentTarget.value
})} />
{
selectedComponent.kind === 'range' &&
<TextInput
selectedComponent.kind === 'range'
&& <TextInput
id='range-end-label'
value={selectedComponent.rangeEndLabel}
labelText='Date picker range end label'
@@ -256,8 +249,8 @@ export const componentInfo: ComponentInfo = {
@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)}IsDisabled = ${!!json.disabled};
@Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${!!json.invalid};
@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 ?? ''}";
@@ -292,8 +285,8 @@ export const componentInfo: ComponentInfo = {
@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)}IsDisabled = ${!!json.disabled};
@Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${!!json.invalid};
@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 ?? ''}";
Loading