@servicetitan/marketing-ui 5.0.0 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/image-cropper/image-cropper.d.ts +1 -1
- package/dist/components/image-cropper/image-cropper.d.ts.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.d.ts +11 -3
- package/dist/components/ui/date-range-picker/date-range-picker.d.ts.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.js +2 -2
- package/dist/components/ui/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.stories.d.ts +2 -2
- package/dist/components/ui/date-range-picker/date-range-picker.stories.d.ts.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.stories.js +4 -0
- package/dist/components/ui/date-range-picker/date-range-picker.stories.js.map +1 -1
- package/dist/components/ui/title-popover/title-popover.d.ts +2 -2
- package/dist/components/ui/title-popover/title-popover.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/components/image-cropper/image-cropper.tsx +1 -1
- package/src/components/ui/date-range-picker/date-range-picker.stories.tsx +9 -0
- package/src/components/ui/date-range-picker/date-range-picker.tsx +28 -12
- package/src/components/ui/title-popover/title-popover.tsx +2 -2
|
@@ -15,7 +15,7 @@ export declare class ImageCropper extends Component<ImageCropperProps> {
|
|
|
15
15
|
getCroppedImg: (type: string, fileName: string) => Promise<File | undefined>;
|
|
16
16
|
componentDidMount: () => string;
|
|
17
17
|
componentWillUnmount: () => void;
|
|
18
|
-
render(): JSX.Element | null;
|
|
18
|
+
render(): import("react/jsx-runtime").JSX.Element | null;
|
|
19
19
|
private handleChange;
|
|
20
20
|
private handleImageLoaded;
|
|
21
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-cropper.d.ts","sourceRoot":"","sources":["../../../src/components/image-cropper/image-cropper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,OAAO,qCAAqC,CAAC;AAE7C,UAAU,iBAAiB;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE;QACF,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB,CAAC;CACL;AAED,qBACa,YAAa,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9C,OAAO,CAAC,GAAG,CAAC,CAAS;IACrB,OAAO,CAAC,IAAI,CAAC,CAAO;IACpB,OAAO,CAAC,KAAK,CAAC,CAAmB;gBAEjC,KAAK,EAAE,iBAAiB;IAKpC,aAAa,SAAU,MAAM,YAAY,MAAM,+BA2CxC;IAGP,iBAAiB,eAA2D;IAE5E,oBAAoB,aAIlB;IAEF,MAAM
|
|
1
|
+
{"version":3,"file":"image-cropper.d.ts","sourceRoot":"","sources":["../../../src/components/image-cropper/image-cropper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,OAAO,qCAAqC,CAAC;AAE7C,UAAU,iBAAiB;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE;QACF,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB,CAAC;CACL;AAED,qBACa,YAAa,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9C,OAAO,CAAC,GAAG,CAAC,CAAS;IACrB,OAAO,CAAC,IAAI,CAAC,CAAO;IACpB,OAAO,CAAC,KAAK,CAAC,CAAmB;gBAEjC,KAAK,EAAE,iBAAiB;IAKpC,aAAa,SAAU,MAAM,YAAY,MAAM,+BA2CxC;IAGP,iBAAiB,eAA2D;IAE5E,oBAAoB,aAIlB;IAEF,MAAM;IAaN,OAAO,CAAC,YAAY,CAAsC;IAG1D,OAAO,CAAC,iBAAiB,CAWvB;CACL"}
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { DateRangePickerProps } from '@servicetitan/design-system';
|
|
2
3
|
import { DateRangePickerOptionsStateType } from '../../../utils/date';
|
|
3
|
-
|
|
4
|
+
interface TriggerProps {
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
}
|
|
7
|
+
export interface CustomDateRangePickerProps<OptionKeys extends string> {
|
|
4
8
|
state: DateRangePickerOptionsStateType<OptionKeys>;
|
|
5
9
|
onChange?: DateRangePickerOptionsStateType<OptionKeys>['onChange'];
|
|
6
10
|
compare?: boolean;
|
|
7
11
|
disabled?: boolean;
|
|
12
|
+
input?: (textValue: string) => {
|
|
13
|
+
element: (value: DateRangePickerProps['value'], triggerProp: TriggerProps, open: DateRangePickerProps['open'], error: DateRangePickerProps['error']) => ReactElement;
|
|
14
|
+
};
|
|
8
15
|
}
|
|
9
|
-
export declare const DateRangePicker: <OptionKeys extends string>({ compare, disabled, state, onChange, }:
|
|
16
|
+
export declare const DateRangePicker: <OptionKeys extends string>({ compare, disabled, state, onChange, input, }: CustomDateRangePickerProps<OptionKeys>) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
10
18
|
//# sourceMappingURL=date-range-picker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAY,oBAAoB,EAAe,MAAM,6BAA6B,CAAC;AAC1F,OAAO,EAAa,+BAA+B,EAAE,MAAM,qBAAqB,CAAC;AAGjF,UAAU,YAAY;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B,CAAC,UAAU,SAAS,MAAM;IACjE,KAAK,EAAE,+BAA+B,CAAC,UAAU,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,+BAA+B,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK;QAC3B,OAAO,EAAE,CACL,KAAK,EAAE,oBAAoB,CAAC,OAAO,CAAC,EACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,EAClC,KAAK,EAAE,oBAAoB,CAAC,OAAO,CAAC,KACnC,YAAY,CAAC;KACrB,CAAC;CACL;AAwBD,eAAO,MAAM,eAAe,gKAqF3B,CAAC"}
|
|
@@ -16,7 +16,7 @@ const formatDate = (dt) => dt.toLocaleString('en-US', {
|
|
|
16
16
|
month: 'short',
|
|
17
17
|
});
|
|
18
18
|
const formatDateRange = (range) => `${formatDate(range.start)} - ${formatDate(range.end)}`;
|
|
19
|
-
export const DateRangePicker = observer(({ compare, disabled, state, onChange, }) => {
|
|
19
|
+
export const DateRangePicker = observer(({ compare, disabled, state, onChange, input, }) => {
|
|
20
20
|
const selectedOption = state.selectedOption;
|
|
21
21
|
/*
|
|
22
22
|
* DateRangePickerOptions uses exclusive date ranges for end date (start >= dt > end)
|
|
@@ -47,6 +47,6 @@ export const DateRangePicker = observer(({ compare, disabled, state, onChange, }
|
|
|
47
47
|
: compare || !value
|
|
48
48
|
? 'Custom Date Range'
|
|
49
49
|
: formatDateRange(value);
|
|
50
|
-
return (_jsxs(Stack, { children: [_jsx(Stack.Item, Object.assign({ className: Styles.pickerContainer }, { children: _jsx(Form.DateRangePicker, { onChange: onPickerChange, options: options, value: value, required: true, disabled: disabled, label: _jsx("div", Object.assign({ className: classNames(Styles.pickerValue, 'd-f flex-column justify-content-center t-truncate cursor-pointer') }, { children: textValue })) }) })), !!compare && (_jsxs(Stack, Object.assign({ direction: "column", justifyContent: "center", className: "m-l-2" }, { children: [_jsx(BodyText, { children: value ? formatDateRange(value) : '' }), !!compareValue && (_jsxs(BodyText, Object.assign({ size: "xsmall", subdued: true }, { children: ["vs. ", formatDateRange(compareValue)] })))] })))] }));
|
|
50
|
+
return (_jsxs(Stack, { children: [_jsx(Stack.Item, Object.assign({ className: Styles.pickerContainer }, { children: _jsx(Form.DateRangePicker, { onChange: onPickerChange, options: options, value: value, required: true, disabled: disabled, label: !input && (_jsx("div", Object.assign({ className: classNames(Styles.pickerValue, 'd-f flex-column justify-content-center t-truncate cursor-pointer') }, { children: textValue }))), input: input === null || input === void 0 ? void 0 : input(textValue) }) })), !!compare && (_jsxs(Stack, Object.assign({ direction: "column", justifyContent: "center", className: "m-l-2" }, { children: [_jsx(BodyText, { children: value ? formatDateRange(value) : '' }), !!compareValue && (_jsxs(BodyText, Object.assign({ size: "xsmall", subdued: true }, { children: ["vs. ", formatDateRange(compareValue)] })))] })))] }));
|
|
51
51
|
});
|
|
52
52
|
//# sourceMappingURL=date-range-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-range-picker.js","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"date-range-picker.js","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
declare const _default: {
|
|
3
2
|
title: string;
|
|
4
|
-
component: <OptionKeys extends string>({ compare, disabled, state, onChange, }: import("./date-range-picker").
|
|
3
|
+
component: <OptionKeys extends string>({ compare, disabled, state, onChange, input, }: import("./date-range-picker").CustomDateRangePickerProps<OptionKeys>) => import("react/jsx-runtime").JSX.Element;
|
|
5
4
|
parameters: {};
|
|
6
5
|
};
|
|
7
6
|
export default _default;
|
|
8
7
|
export declare const dateRangePicker: () => import("react/jsx-runtime").JSX.Element;
|
|
9
8
|
export declare const dateRangePickerCompare: () => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const dateRangePickerCustomInput: () => import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
//# sourceMappingURL=date-range-picker.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-range-picker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"date-range-picker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.stories.tsx"],"names":[],"mappings":";;;;;AAKA,wBAIE;AAYF,eAAO,MAAM,eAAe,+CAAiD,CAAC;AAC9E,eAAO,MAAM,sBAAsB,+CAAyD,CAAC;AAC7F,eAAO,MAAM,0BAA0B,+CAOrC,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { DateRangePicker } from './date-range-picker';
|
|
3
3
|
import { DateRangePickerState, DateRangePickerOptionsTenantAds } from '../../../utils/date';
|
|
4
|
+
import { Tag } from '@servicetitan/design-system';
|
|
4
5
|
export default {
|
|
5
6
|
title: 'Marketing UI/ui/date-range-picker/DateRangePicker',
|
|
6
7
|
component: DateRangePicker,
|
|
@@ -11,4 +12,7 @@ const state = DateRangePickerState.createWithOptions(DateRangePickerOptionsTenan
|
|
|
11
12
|
const w = (style, Component) => () => (_jsx("div", Object.assign({ style: style }, { children: _jsx(Component, {}) })));
|
|
12
13
|
export const dateRangePicker = w({}, () => _jsx(DateRangePicker, { state: state }));
|
|
13
14
|
export const dateRangePickerCompare = w({}, () => _jsx(DateRangePicker, { state: state, compare: true }));
|
|
15
|
+
export const dateRangePickerCustomInput = w({}, () => (_jsx(DateRangePicker, { state: state, input: (textValue) => ({
|
|
16
|
+
element: (_, { onClick }) => _jsx(Tag, Object.assign({ onClick: onClick }, { children: textValue })),
|
|
17
|
+
}) })));
|
|
14
18
|
//# sourceMappingURL=date-range-picker.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-range-picker.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,+BAA+B,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"date-range-picker.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,+BAA+B,EAAE,MAAM,qBAAqB,CAAC;AAC5F,OAAO,EAAE,GAAG,EAAE,MAAM,6BAA6B,CAAC;AAElD,eAAe;IACX,KAAK,EAAE,mDAAmD;IAC1D,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC;AAC5B,MAAM,KAAK,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;AAEjG,MAAM,CAAC,GAAG,CAAC,KAA0C,EAAE,SAAa,EAAE,EAAE,CAAC,GAAG,EAAE,CAC1E,CACI,4BAAK,KAAK,EAAE,KAAK,gBACb,KAAC,SAAS,KAAG,IACX,CACT,CAAC;AAEN,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,SAAG,CAAC,CAAC;AAC7F,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAClD,KAAC,eAAe,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,CAAC,SAAiB,EAAE,EAAE,CAAC,CAAC;QAC3B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,KAAC,GAAG,kBAAC,OAAO,EAAE,OAAO,gBAAG,SAAS,IAAO;KACxE,CAAC,GACJ,CACL,CAAC,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Component, PropsWithChildren } from 'react';
|
|
2
|
-
interface TitlePopoverProps extends PropsWithChildren {
|
|
2
|
+
interface TitlePopoverProps extends PropsWithChildren<{}> {
|
|
3
3
|
text?: string;
|
|
4
4
|
}
|
|
5
5
|
export declare class TitlePopover extends Component<TitlePopoverProps> {
|
|
@@ -11,7 +11,7 @@ export declare class TitlePopover extends Component<TitlePopoverProps> {
|
|
|
11
11
|
handleClick: (event: MouseEvent) => void;
|
|
12
12
|
componentDidMount(): void;
|
|
13
13
|
componentWillUnmount(): void;
|
|
14
|
-
render(): JSX.Element;
|
|
14
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
}
|
|
16
16
|
export {};
|
|
17
17
|
//# sourceMappingURL=title-popover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"title-popover.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/title-popover/title-popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKhE,UAAU,iBAAkB,SAAQ,iBAAiB;
|
|
1
|
+
{"version":3,"file":"title-popover.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/title-popover/title-popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKhE,UAAU,iBAAkB,SAAQ,iBAAiB,CAAC,EAAE,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,YAAa,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9C,MAAM,UAAS;IAE3B,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,iBAAiB;IAMpC,MAAM,aAEJ;IAGF,KAAK,aAEH;IAGF,WAAW,UAAW,UAAU,UAU9B;IAEF,iBAAiB;IAIjB,oBAAoB;IAIpB,MAAM;CAgCT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/marketing-ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.0",
|
|
4
4
|
"description": "Marketing UI component and utils",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"accounting": "~0.4.1",
|
|
25
25
|
"axios": ">=0.20.0",
|
|
26
26
|
"mobx": "~6.3.2",
|
|
27
|
-
"mobx-react": "
|
|
27
|
+
"mobx-react": ">=7.5.1",
|
|
28
28
|
"moment": "~2.29.1",
|
|
29
29
|
"react": ">=17.0.2"
|
|
30
30
|
},
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"accounting": "~0.4.1",
|
|
42
42
|
"axios": ">=0.20.0",
|
|
43
43
|
"mobx": "~6.3.2",
|
|
44
|
-
"mobx-react": "~7.
|
|
44
|
+
"mobx-react": "~7.5.1",
|
|
45
45
|
"moment": "~2.29.1",
|
|
46
46
|
"react": "~18.2.0"
|
|
47
47
|
},
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"less": true,
|
|
53
53
|
"webpack": false
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "e3417417b8fa48d8a38e2af46589ecc67640f21f"
|
|
56
56
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { DateRangePicker } from './date-range-picker';
|
|
3
3
|
import { DateRangePickerState, DateRangePickerOptionsTenantAds } from '../../../utils/date';
|
|
4
|
+
import { Tag } from '@servicetitan/design-system';
|
|
4
5
|
|
|
5
6
|
export default {
|
|
6
7
|
title: 'Marketing UI/ui/date-range-picker/DateRangePicker',
|
|
@@ -20,3 +21,11 @@ const w = (style: { width?: string; height?: string }, Component: FC) => () =>
|
|
|
20
21
|
|
|
21
22
|
export const dateRangePicker = w({}, () => <DateRangePicker state={state} />);
|
|
22
23
|
export const dateRangePickerCompare = w({}, () => <DateRangePicker state={state} compare />);
|
|
24
|
+
export const dateRangePickerCustomInput = w({}, () => (
|
|
25
|
+
<DateRangePicker
|
|
26
|
+
state={state}
|
|
27
|
+
input={(textValue: string) => ({
|
|
28
|
+
element: (_, { onClick }) => <Tag onClick={onClick}>{textValue}</Tag>,
|
|
29
|
+
})}
|
|
30
|
+
/>
|
|
31
|
+
));
|
|
@@ -1,15 +1,27 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
1
|
+
import { ReactElement, useMemo } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { observer } from 'mobx-react';
|
|
4
|
-
import { BodyText, Form, Stack } from '@servicetitan/design-system';
|
|
4
|
+
import { BodyText, DateRangePickerProps, Form, Stack } from '@servicetitan/design-system';
|
|
5
5
|
import { DateRange, DateRangePickerOptionsStateType } from '../../../utils/date';
|
|
6
6
|
import * as Styles from './date-range-picker.module.less';
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
interface TriggerProps {
|
|
9
|
+
onClick?: () => void;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export interface CustomDateRangePickerProps<OptionKeys extends string> {
|
|
9
13
|
state: DateRangePickerOptionsStateType<OptionKeys>;
|
|
10
14
|
onChange?: DateRangePickerOptionsStateType<OptionKeys>['onChange'];
|
|
11
15
|
compare?: boolean;
|
|
12
16
|
disabled?: boolean;
|
|
17
|
+
input?: (textValue: string) => {
|
|
18
|
+
element: (
|
|
19
|
+
value: DateRangePickerProps['value'],
|
|
20
|
+
triggerProp: TriggerProps,
|
|
21
|
+
open: DateRangePickerProps['open'],
|
|
22
|
+
error: DateRangePickerProps['error']
|
|
23
|
+
) => ReactElement;
|
|
24
|
+
};
|
|
13
25
|
}
|
|
14
26
|
|
|
15
27
|
const convertDateRange = (val?: DateRange, backward?: boolean): DateRange | undefined =>
|
|
@@ -40,7 +52,8 @@ export const DateRangePicker = observer(
|
|
|
40
52
|
disabled,
|
|
41
53
|
state,
|
|
42
54
|
onChange,
|
|
43
|
-
|
|
55
|
+
input,
|
|
56
|
+
}: CustomDateRangePickerProps<OptionKeys>) => {
|
|
44
57
|
const selectedOption = state.selectedOption;
|
|
45
58
|
|
|
46
59
|
/*
|
|
@@ -91,15 +104,18 @@ export const DateRangePicker = observer(
|
|
|
91
104
|
required
|
|
92
105
|
disabled={disabled}
|
|
93
106
|
label={
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
107
|
+
!input && (
|
|
108
|
+
<div
|
|
109
|
+
className={classNames(
|
|
110
|
+
Styles.pickerValue,
|
|
111
|
+
'd-f flex-column justify-content-center t-truncate cursor-pointer'
|
|
112
|
+
)}
|
|
113
|
+
>
|
|
114
|
+
{textValue}
|
|
115
|
+
</div>
|
|
116
|
+
)
|
|
102
117
|
}
|
|
118
|
+
input={input?.(textValue)}
|
|
103
119
|
/>
|
|
104
120
|
</Stack.Item>
|
|
105
121
|
{!!compare && (
|
|
@@ -5,7 +5,7 @@ import { observable, action, makeObservable } from 'mobx';
|
|
|
5
5
|
import { Popover, Stack, BodyText, Icon } from '@servicetitan/design-system';
|
|
6
6
|
import * as Styles from './title-popover.module.less';
|
|
7
7
|
|
|
8
|
-
interface TitlePopoverProps extends PropsWithChildren {
|
|
8
|
+
interface TitlePopoverProps extends PropsWithChildren<{}> {
|
|
9
9
|
text?: string;
|
|
10
10
|
}
|
|
11
11
|
|
|
@@ -51,7 +51,7 @@ export class TitlePopover extends Component<TitlePopoverProps> {
|
|
|
51
51
|
window.removeEventListener('click', this.handleClick);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
render()
|
|
54
|
+
render() {
|
|
55
55
|
const { text, children } = this.props;
|
|
56
56
|
|
|
57
57
|
return (
|