@true-engineering/true-react-common-ui-kit 3.41.0 → 3.42.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/LICENSE +201 -201
- package/README.md +7 -0
- package/dist/components/FiltersPane/FiltersPane.stories.d.ts +2 -1
- package/dist/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.d.ts +1 -1
- package/dist/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.d.ts +1 -1
- package/dist/components/FiltersPane/types.d.ts +1 -0
- package/dist/components/Input/Input.styles.d.ts +1 -1
- package/dist/components/SearchInput/SearchInput.stories.d.ts +1 -1
- package/dist/components/Select/Select.styles.d.ts +3 -3
- package/dist/true-react-common-ui-kit.js +74 -59
- package/dist/true-react-common-ui-kit.js.map +1 -1
- package/dist/true-react-common-ui-kit.umd.cjs +74 -59
- package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
- package/package.json +99 -98
- package/src/components/AccountInfo/AccountInfo.stories.tsx +32 -32
- package/src/components/AccountInfo/AccountInfo.tsx +80 -80
- package/src/components/AddButton/AddButton.stories.tsx +21 -21
- package/src/components/AddButton/AddButton.tsx +52 -52
- package/src/components/Colors/Colors.stories.tsx +7 -7
- package/src/components/DateInput/DateInput.tsx +90 -90
- package/src/components/DateInput/constants.ts +2 -2
- package/src/components/Description/Description.stories.tsx +27 -27
- package/src/components/Description/Description.tsx +61 -61
- package/src/components/FiltersPane/FiltersPane.stories.tsx +12 -0
- package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx +166 -166
- package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx +210 -210
- package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx +177 -177
- package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.ts +4 -0
- package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx +20 -2
- package/src/components/FiltersPane/types.ts +1 -0
- package/src/components/Flag/Flag.stories.tsx +29 -29
- package/src/components/Flag/Flag.tsx +26 -26
- package/src/components/Flag/augment.d.ts +1 -1
- package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.styles.ts +25 -25
- package/src/components/Icon/Icon.stories.tsx +86 -86
- package/src/components/Icon/complexIcons/augment.d.ts +1 -1
- package/src/components/Icon/complexIcons/avatarGreen.svg +57 -57
- package/src/components/Icon/complexIcons/index.ts +1 -1
- package/src/components/IncrementInput/IncrementInput.tsx +105 -105
- package/src/components/Input/types.ts +32 -32
- package/src/components/Modal/Modal.stories.tsx +105 -105
- package/src/components/MoreMenu/MoreMenu.tsx +93 -93
- package/src/components/MultiSelect/MultiSelect.stories.tsx +46 -46
- package/src/components/MultiSelect/MultiSelect.tsx +106 -106
- package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx +53 -53
- package/src/components/Notification/Notification.stories.tsx +55 -55
- package/src/components/Notification/Notification.styles.ts +57 -57
- package/src/components/Notification/Notification.tsx +77 -77
- package/src/components/Notification/types.ts +1 -1
- package/src/components/NumberInput/NumberInput.tsx +137 -137
- package/src/components/NumberInput/index.ts +1 -1
- package/src/components/PhoneInput/PhoneInput.tsx +214 -214
- package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx +155 -155
- package/src/components/PhoneInput/types.ts +16 -16
- package/src/components/RadioButton/RadioButton.stories.tsx +46 -46
- package/src/components/RadioButton/RadioButton.tsx +57 -57
- package/src/components/ScrollIntoViewIfNeeded/index.ts +1 -1
- package/src/components/Select/constants.ts +2 -2
- package/src/components/Select/types.ts +1 -1
- package/src/components/Selector/Selector.stories.tsx +62 -62
- package/src/components/Selector/Selector.tsx +115 -115
- package/src/components/Selector/index.ts +2 -2
- package/src/components/Selector/types.ts +12 -12
- package/src/components/Skeleton/Skeleton.stories.tsx +19 -19
- package/src/components/SmartInput/SmartInput.stories.tsx +52 -52
- package/src/components/SmartInput/SmartInput.tsx +116 -116
- package/src/components/SmartInput/constants.ts +91 -91
- package/src/components/SmartInput/helpers.ts +26 -26
- package/src/components/SmartInput/types.ts +18 -18
- package/src/components/Status/Status.stories.tsx +73 -73
- package/src/components/Status/Status.styles.ts +143 -143
- package/src/components/Status/Status.tsx +49 -49
- package/src/components/Status/constants.ts +11 -11
- package/src/components/Status/index.ts +3 -3
- package/src/components/Status/types.ts +5 -5
- package/src/components/Switch/Switch.stories.tsx +40 -40
- package/src/components/Switch/Switch.tsx +75 -75
- package/src/components/TextWithInfo/TextWithInfo.stories.tsx +53 -53
- package/src/components/TextWithInfo/TextWithInfo.tsx +62 -62
- package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx +58 -58
- package/src/components/TextWithTooltip/TextWithTooltip.tsx +156 -156
- package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx +41 -41
- package/src/components/ThemedPreloader/ThemedPreloader.tsx +54 -54
- package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts +1 -1
- package/src/components/Toaster/Toaster.stories.tsx +30 -30
- package/src/components/Tooltip/Tooltip.stories.tsx +19 -19
- package/src/components/Tooltip/Tooltip.tsx +35 -35
- package/src/components/Tooltip/types.ts +1 -1
- package/src/components/WithPopup/WithPopup.styles.ts +45 -45
- package/src/components/WithPopup/WithPopup.tsx +184 -184
- package/src/components/WithTooltip/WithTooltip.stories.tsx +56 -56
- package/src/components/WithTooltip/WithTooltip.styles.ts +7 -7
- package/src/components/WithTooltip/WithTooltip.tsx +67 -67
- package/src/components/WithTooltip/index.ts +2 -2
- package/src/components/index.ts +46 -46
- package/src/helpers/popper-helpers.ts +17 -17
- package/src/hooks/use-dropdown.ts +84 -84
- package/src/hooks/use-is-mounted.ts +15 -15
- package/src/theme/helpers.ts +76 -76
- package/src/theme/types.ts +158 -158
- package/src/vite-env.d.ts +1 -1
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { colors } from '../../theme';
|
|
4
|
-
import { IThemedPreloaderProps, ThemedPreloader } from './ThemedPreloader';
|
|
5
|
-
|
|
6
|
-
interface IThemedPreloaderWithCustomProps extends IThemedPreloaderProps {
|
|
7
|
-
currentColor: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
const ThemedPreloaderWithCustomProps: FC<IThemedPreloaderWithCustomProps> = ({
|
|
11
|
-
currentColor,
|
|
12
|
-
...args
|
|
13
|
-
}) => (
|
|
14
|
-
<div style={{ color: currentColor }}>
|
|
15
|
-
<ThemedPreloader {...args} />
|
|
16
|
-
</div>
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
export default {
|
|
20
|
-
title: 'Feedback/ThemedPreloader',
|
|
21
|
-
component: ThemedPreloaderWithCustomProps,
|
|
22
|
-
argTypes: {
|
|
23
|
-
type: { options: ['default', 'logo', 'dots'], control: 'inline-radio' },
|
|
24
|
-
},
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
const Template: ComponentStory<typeof ThemedPreloaderWithCustomProps> = (args) => (
|
|
28
|
-
<ThemedPreloaderWithCustomProps {...args} />
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
export const Default = Template.bind({});
|
|
32
|
-
Default.args = {
|
|
33
|
-
type: 'dots',
|
|
34
|
-
useCurrentColor: false,
|
|
35
|
-
currentColor: colors.GREEN_FOCUS,
|
|
36
|
-
};
|
|
37
|
-
Default.parameters = {
|
|
38
|
-
controls: {
|
|
39
|
-
exclude: ['data'],
|
|
40
|
-
},
|
|
41
|
-
};
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { ComponentStory } from '@storybook/react';
|
|
3
|
+
import { colors } from '../../theme';
|
|
4
|
+
import { IThemedPreloaderProps, ThemedPreloader } from './ThemedPreloader';
|
|
5
|
+
|
|
6
|
+
interface IThemedPreloaderWithCustomProps extends IThemedPreloaderProps {
|
|
7
|
+
currentColor: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const ThemedPreloaderWithCustomProps: FC<IThemedPreloaderWithCustomProps> = ({
|
|
11
|
+
currentColor,
|
|
12
|
+
...args
|
|
13
|
+
}) => (
|
|
14
|
+
<div style={{ color: currentColor }}>
|
|
15
|
+
<ThemedPreloader {...args} />
|
|
16
|
+
</div>
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
export default {
|
|
20
|
+
title: 'Feedback/ThemedPreloader',
|
|
21
|
+
component: ThemedPreloaderWithCustomProps,
|
|
22
|
+
argTypes: {
|
|
23
|
+
type: { options: ['default', 'logo', 'dots'], control: 'inline-radio' },
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const Template: ComponentStory<typeof ThemedPreloaderWithCustomProps> = (args) => (
|
|
28
|
+
<ThemedPreloaderWithCustomProps {...args} />
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
export const Default = Template.bind({});
|
|
32
|
+
Default.args = {
|
|
33
|
+
type: 'dots',
|
|
34
|
+
useCurrentColor: false,
|
|
35
|
+
currentColor: colors.GREEN_FOCUS,
|
|
36
|
+
};
|
|
37
|
+
Default.parameters = {
|
|
38
|
+
controls: {
|
|
39
|
+
exclude: ['data'],
|
|
40
|
+
},
|
|
41
|
+
};
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
|
|
4
|
-
import { addDataAttributes } from '../../helpers';
|
|
5
|
-
import { useTweakStyles } from '../../hooks';
|
|
6
|
-
import { ICommonProps } from '../../types';
|
|
7
|
-
import { SvgPreloader, DotsPreloader } from './components';
|
|
8
|
-
import { IPreloaderSvgType } from './types';
|
|
9
|
-
import { useStyles, IThemedPreloaderStyles } from './ThemedPreloader.styles';
|
|
10
|
-
|
|
11
|
-
export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
|
|
12
|
-
/** @default 'default' */
|
|
13
|
-
type?: 'dots' | IPreloaderSvgType;
|
|
14
|
-
/** @default false */
|
|
15
|
-
useCurrentColor?: boolean;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
|
|
19
|
-
type = 'default',
|
|
20
|
-
useCurrentColor = false,
|
|
21
|
-
data,
|
|
22
|
-
testId,
|
|
23
|
-
tweakStyles,
|
|
24
|
-
}) => {
|
|
25
|
-
const classes = useStyles({ theme: tweakStyles });
|
|
26
|
-
|
|
27
|
-
const tweakDotsPreloaderStyles = useTweakStyles({
|
|
28
|
-
tweakStyles,
|
|
29
|
-
className: 'tweakDotsPreloader',
|
|
30
|
-
currentComponentName: 'ThemedPreloader',
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
const tweakSvgPreloaderStyles = useTweakStyles({
|
|
34
|
-
tweakStyles,
|
|
35
|
-
className: 'tweakSvgPreloader',
|
|
36
|
-
currentComponentName: 'ThemedPreloader',
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<div
|
|
41
|
-
className={clsx(classes.root, classes[type], {
|
|
42
|
-
[classes.currentColor]: useCurrentColor,
|
|
43
|
-
})}
|
|
44
|
-
{...addDataTestId(testId)}
|
|
45
|
-
{...addDataAttributes(data)}
|
|
46
|
-
>
|
|
47
|
-
{type === 'dots' ? (
|
|
48
|
-
<DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />
|
|
49
|
-
) : (
|
|
50
|
-
<SvgPreloader type={type} tweakStyles={tweakSvgPreloaderStyles} />
|
|
51
|
-
)}
|
|
52
|
-
</div>
|
|
53
|
-
);
|
|
54
|
-
};
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
|
|
4
|
+
import { addDataAttributes } from '../../helpers';
|
|
5
|
+
import { useTweakStyles } from '../../hooks';
|
|
6
|
+
import { ICommonProps } from '../../types';
|
|
7
|
+
import { SvgPreloader, DotsPreloader } from './components';
|
|
8
|
+
import { IPreloaderSvgType } from './types';
|
|
9
|
+
import { useStyles, IThemedPreloaderStyles } from './ThemedPreloader.styles';
|
|
10
|
+
|
|
11
|
+
export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
|
|
12
|
+
/** @default 'default' */
|
|
13
|
+
type?: 'dots' | IPreloaderSvgType;
|
|
14
|
+
/** @default false */
|
|
15
|
+
useCurrentColor?: boolean;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
|
|
19
|
+
type = 'default',
|
|
20
|
+
useCurrentColor = false,
|
|
21
|
+
data,
|
|
22
|
+
testId,
|
|
23
|
+
tweakStyles,
|
|
24
|
+
}) => {
|
|
25
|
+
const classes = useStyles({ theme: tweakStyles });
|
|
26
|
+
|
|
27
|
+
const tweakDotsPreloaderStyles = useTweakStyles({
|
|
28
|
+
tweakStyles,
|
|
29
|
+
className: 'tweakDotsPreloader',
|
|
30
|
+
currentComponentName: 'ThemedPreloader',
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
const tweakSvgPreloaderStyles = useTweakStyles({
|
|
34
|
+
tweakStyles,
|
|
35
|
+
className: 'tweakSvgPreloader',
|
|
36
|
+
currentComponentName: 'ThemedPreloader',
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<div
|
|
41
|
+
className={clsx(classes.root, classes[type], {
|
|
42
|
+
[classes.currentColor]: useCurrentColor,
|
|
43
|
+
})}
|
|
44
|
+
{...addDataTestId(testId)}
|
|
45
|
+
{...addDataAttributes(data)}
|
|
46
|
+
>
|
|
47
|
+
{type === 'dots' ? (
|
|
48
|
+
<DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />
|
|
49
|
+
) : (
|
|
50
|
+
<SvgPreloader type={type} tweakStyles={tweakSvgPreloaderStyles} />
|
|
51
|
+
)}
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './DefaultPreloader';
|
|
1
|
+
export * from './DefaultPreloader';
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
2
|
-
import { Button } from '../Button';
|
|
3
|
-
import { Toaster } from './Toaster';
|
|
4
|
-
|
|
5
|
-
const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
|
|
6
|
-
|
|
7
|
-
export default {
|
|
8
|
-
title: 'Feedback/Toaster',
|
|
9
|
-
component: Toaster,
|
|
10
|
-
args: {
|
|
11
|
-
title: 'Произошла очень страшная ошибка',
|
|
12
|
-
text: 'Мы даже не знаем, чем вам помочь!',
|
|
13
|
-
type: types[0],
|
|
14
|
-
timeout: 7000,
|
|
15
|
-
hasCloseButton: false,
|
|
16
|
-
shouldCloseOnClick: false,
|
|
17
|
-
},
|
|
18
|
-
argTypes: {
|
|
19
|
-
type: { control: 'inline-radio', options: types },
|
|
20
|
-
},
|
|
21
|
-
parameters: {
|
|
22
|
-
controls: { exclude: ['onTimeEnd', 'onClose', 'data', 'tweakStyles'] },
|
|
23
|
-
},
|
|
24
|
-
} as ComponentMeta<typeof Toaster>;
|
|
25
|
-
|
|
26
|
-
export const Default: ComponentStory<typeof Toaster> = (args) => (
|
|
27
|
-
<Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
|
|
28
|
-
<Button size="m">Нажмите</Button>
|
|
29
|
-
</Toaster>
|
|
30
|
-
);
|
|
1
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
2
|
+
import { Button } from '../Button';
|
|
3
|
+
import { Toaster } from './Toaster';
|
|
4
|
+
|
|
5
|
+
const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: 'Feedback/Toaster',
|
|
9
|
+
component: Toaster,
|
|
10
|
+
args: {
|
|
11
|
+
title: 'Произошла очень страшная ошибка',
|
|
12
|
+
text: 'Мы даже не знаем, чем вам помочь!',
|
|
13
|
+
type: types[0],
|
|
14
|
+
timeout: 7000,
|
|
15
|
+
hasCloseButton: false,
|
|
16
|
+
shouldCloseOnClick: false,
|
|
17
|
+
},
|
|
18
|
+
argTypes: {
|
|
19
|
+
type: { control: 'inline-radio', options: types },
|
|
20
|
+
},
|
|
21
|
+
parameters: {
|
|
22
|
+
controls: { exclude: ['onTimeEnd', 'onClose', 'data', 'tweakStyles'] },
|
|
23
|
+
},
|
|
24
|
+
} as ComponentMeta<typeof Toaster>;
|
|
25
|
+
|
|
26
|
+
export const Default: ComponentStory<typeof Toaster> = (args) => (
|
|
27
|
+
<Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
|
|
28
|
+
<Button size="m">Нажмите</Button>
|
|
29
|
+
</Toaster>
|
|
30
|
+
);
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
2
|
-
import { Tooltip } from './Tooltip';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Data Display/Tooltip',
|
|
6
|
-
component: Tooltip,
|
|
7
|
-
args: {
|
|
8
|
-
text: 'Tooltip Text',
|
|
9
|
-
view: 'tooltip',
|
|
10
|
-
type: 'info',
|
|
11
|
-
},
|
|
12
|
-
argTypes: {
|
|
13
|
-
text: { control: 'text' },
|
|
14
|
-
view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
|
|
15
|
-
type: { control: 'inline-radio', options: ['info', 'error'] },
|
|
16
|
-
},
|
|
17
|
-
} as ComponentMeta<typeof Tooltip>;
|
|
18
|
-
|
|
19
|
-
export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;
|
|
1
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
2
|
+
import { Tooltip } from './Tooltip';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Data Display/Tooltip',
|
|
6
|
+
component: Tooltip,
|
|
7
|
+
args: {
|
|
8
|
+
text: 'Tooltip Text',
|
|
9
|
+
view: 'tooltip',
|
|
10
|
+
type: 'info',
|
|
11
|
+
},
|
|
12
|
+
argTypes: {
|
|
13
|
+
text: { control: 'text' },
|
|
14
|
+
view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
|
|
15
|
+
type: { control: 'inline-radio', options: ['info', 'error'] },
|
|
16
|
+
},
|
|
17
|
+
} as ComponentMeta<typeof Tooltip>;
|
|
18
|
+
|
|
19
|
+
export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import { FC, ReactNode } from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
|
|
4
|
-
import { addDataAttributes } from '../../helpers';
|
|
5
|
-
import { ICommonProps } from '../../types';
|
|
6
|
-
import { useStyles, ITooltipStyles } from './Tooltip.styles';
|
|
7
|
-
|
|
8
|
-
export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
|
|
9
|
-
text: ReactNode;
|
|
10
|
-
/** @default 'tooltip' */
|
|
11
|
-
view?: 'tooltip' | 'hint';
|
|
12
|
-
/** @default 'info' */
|
|
13
|
-
type?: 'info' | 'error';
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export const Tooltip: FC<ITooltipProps> = ({
|
|
17
|
-
text,
|
|
18
|
-
view = 'tooltip',
|
|
19
|
-
type = 'info',
|
|
20
|
-
data,
|
|
21
|
-
testId,
|
|
22
|
-
tweakStyles,
|
|
23
|
-
}) => {
|
|
24
|
-
const classes = useStyles({ theme: tweakStyles });
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<div
|
|
28
|
-
className={clsx(classes.root, classes[view], classes[type])}
|
|
29
|
-
{...addDataTestId(testId)}
|
|
30
|
-
{...addDataAttributes(data)}
|
|
31
|
-
>
|
|
32
|
-
{text}
|
|
33
|
-
</div>
|
|
34
|
-
);
|
|
35
|
-
};
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
|
|
4
|
+
import { addDataAttributes } from '../../helpers';
|
|
5
|
+
import { ICommonProps } from '../../types';
|
|
6
|
+
import { useStyles, ITooltipStyles } from './Tooltip.styles';
|
|
7
|
+
|
|
8
|
+
export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
|
|
9
|
+
text: ReactNode;
|
|
10
|
+
/** @default 'tooltip' */
|
|
11
|
+
view?: 'tooltip' | 'hint';
|
|
12
|
+
/** @default 'info' */
|
|
13
|
+
type?: 'info' | 'error';
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export const Tooltip: FC<ITooltipProps> = ({
|
|
17
|
+
text,
|
|
18
|
+
view = 'tooltip',
|
|
19
|
+
type = 'info',
|
|
20
|
+
data,
|
|
21
|
+
testId,
|
|
22
|
+
tweakStyles,
|
|
23
|
+
}) => {
|
|
24
|
+
const classes = useStyles({ theme: tweakStyles });
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<div
|
|
28
|
+
className={clsx(classes.root, classes[view], classes[type])}
|
|
29
|
+
{...addDataTestId(testId)}
|
|
30
|
+
{...addDataAttributes(data)}
|
|
31
|
+
>
|
|
32
|
+
{text}
|
|
33
|
+
</div>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type ITooltipType = 'info' | 'warning';
|
|
1
|
+
export type ITooltipType = 'info' | 'warning';
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import { createThemedStyles, ITweakStyles } from '../../theme';
|
|
2
|
-
|
|
3
|
-
export const useStyles = createThemedStyles('WithPopup', {
|
|
4
|
-
trigger: {
|
|
5
|
-
width: 'fit-content',
|
|
6
|
-
},
|
|
7
|
-
|
|
8
|
-
clickable: {
|
|
9
|
-
cursor: 'pointer',
|
|
10
|
-
},
|
|
11
|
-
|
|
12
|
-
active: {},
|
|
13
|
-
|
|
14
|
-
disabled: {
|
|
15
|
-
cursor: 'auto',
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
-
popup: {
|
|
19
|
-
zIndex: 5,
|
|
20
|
-
outline: 'none',
|
|
21
|
-
},
|
|
22
|
-
|
|
23
|
-
animationEnd: {},
|
|
24
|
-
|
|
25
|
-
animationStart: {},
|
|
26
|
-
|
|
27
|
-
'dropdown-initial': {
|
|
28
|
-
extend: 'animationEnd',
|
|
29
|
-
},
|
|
30
|
-
|
|
31
|
-
'dropdown-open': {
|
|
32
|
-
extend: 'animationStart',
|
|
33
|
-
},
|
|
34
|
-
|
|
35
|
-
'dropdown-close': {
|
|
36
|
-
visibility: 'hidden',
|
|
37
|
-
extend: 'animationEnd',
|
|
38
|
-
},
|
|
39
|
-
|
|
40
|
-
'dropdown-unmounted': {
|
|
41
|
-
extend: 'animationEnd',
|
|
42
|
-
},
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
export type IWithPopupStyles = ITweakStyles<typeof useStyles>;
|
|
1
|
+
import { createThemedStyles, ITweakStyles } from '../../theme';
|
|
2
|
+
|
|
3
|
+
export const useStyles = createThemedStyles('WithPopup', {
|
|
4
|
+
trigger: {
|
|
5
|
+
width: 'fit-content',
|
|
6
|
+
},
|
|
7
|
+
|
|
8
|
+
clickable: {
|
|
9
|
+
cursor: 'pointer',
|
|
10
|
+
},
|
|
11
|
+
|
|
12
|
+
active: {},
|
|
13
|
+
|
|
14
|
+
disabled: {
|
|
15
|
+
cursor: 'auto',
|
|
16
|
+
},
|
|
17
|
+
|
|
18
|
+
popup: {
|
|
19
|
+
zIndex: 5,
|
|
20
|
+
outline: 'none',
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
animationEnd: {},
|
|
24
|
+
|
|
25
|
+
animationStart: {},
|
|
26
|
+
|
|
27
|
+
'dropdown-initial': {
|
|
28
|
+
extend: 'animationEnd',
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
'dropdown-open': {
|
|
32
|
+
extend: 'animationStart',
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
'dropdown-close': {
|
|
36
|
+
visibility: 'hidden',
|
|
37
|
+
extend: 'animationEnd',
|
|
38
|
+
},
|
|
39
|
+
|
|
40
|
+
'dropdown-unmounted': {
|
|
41
|
+
extend: 'animationEnd',
|
|
42
|
+
},
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
export type IWithPopupStyles = ITweakStyles<typeof useStyles>;
|