@servicetitan/marketing-ui 5.1.0 → 5.3.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/ui/date-range-picker/date-range-picker.d.ts +11 -2
- 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 -1
- 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/package.json +5 -5
- 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
|
@@ -1,9 +1,18 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { DateRangePickerProps } from '@servicetitan/design-system';
|
|
1
3
|
import { DateRangePickerOptionsStateType } from '../../../utils/date';
|
|
2
|
-
|
|
4
|
+
interface TriggerProps {
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
}
|
|
7
|
+
export interface CustomDateRangePickerProps<OptionKeys extends string> {
|
|
3
8
|
state: DateRangePickerOptionsStateType<OptionKeys>;
|
|
4
9
|
onChange?: DateRangePickerOptionsStateType<OptionKeys>['onChange'];
|
|
5
10
|
compare?: boolean;
|
|
6
11
|
disabled?: boolean;
|
|
12
|
+
input?: (textValue: string) => {
|
|
13
|
+
element: (value: DateRangePickerProps['value'], triggerProp: TriggerProps, open: DateRangePickerProps['open'], error: DateRangePickerProps['error']) => ReactElement;
|
|
14
|
+
};
|
|
7
15
|
}
|
|
8
|
-
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 {};
|
|
9
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,9 +1,10 @@
|
|
|
1
1
|
declare const _default: {
|
|
2
2
|
title: string;
|
|
3
|
-
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;
|
|
4
4
|
parameters: {};
|
|
5
5
|
};
|
|
6
6
|
export default _default;
|
|
7
7
|
export declare const dateRangePicker: () => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export declare const dateRangePickerCompare: () => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const dateRangePickerCustomInput: () => import("react/jsx-runtime").JSX.Element;
|
|
9
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/marketing-ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
4
4
|
"description": "Marketing UI component and utils",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@servicetitan/tokens": ">=12.2.1",
|
|
24
24
|
"accounting": "~0.4.1",
|
|
25
25
|
"axios": ">=0.20.0",
|
|
26
|
-
"mobx": "
|
|
26
|
+
"mobx": ">=6.3.2",
|
|
27
27
|
"mobx-react": ">=7.5.1",
|
|
28
28
|
"moment": "~2.29.1",
|
|
29
29
|
"react": ">=17.0.2"
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"@types/react-router-dom": "^5.1.8",
|
|
41
41
|
"accounting": "~0.4.1",
|
|
42
42
|
"axios": ">=0.20.0",
|
|
43
|
-
"mobx": "~6.
|
|
44
|
-
"mobx-react": "~
|
|
43
|
+
"mobx": "~6.10.2",
|
|
44
|
+
"mobx-react": "~9.0.2",
|
|
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": "f2d53e9b8f0a73cfc2c9286dac5ba6c0d7c41332"
|
|
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 && (
|