@antscorp/antsomi-ui 1.3.5-beta.729 → 1.3.5-beta.730

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.
Files changed (11) hide show
  1. package/es/components/organism/ActivityTimeline/ActivityTimeline.js +11 -8
  2. package/es/components/organism/ActivityTimeline/components/ItemEvent/ItemEvent.js +2 -2
  3. package/es/components/organism/ActivityTimeline/components/ItemGroupEvent/ItemGroupEvent.js +2 -2
  4. package/es/components/organism/ActivityTimeline/components/ListItem/styled.d.ts +3 -2
  5. package/es/components/organism/ActivityTimeline/components/ListItem/styled.js +6 -4
  6. package/es/components/organism/ActivityTimeline/components/ProductCard/styled.d.ts +2 -1
  7. package/es/components/organism/ActivityTimeline/components/ProductCard/styled.js +2 -1
  8. package/es/components/organism/ActivityTimeline/styled.d.ts +1 -1
  9. package/es/components/organism/ActivityTimeline/styled.js +2 -8
  10. package/es/components/organism/ActivityTimeline/types.d.ts +1 -0
  11. package/package.json +1 -1
package/es/components/organism/ActivityTimeline/ActivityTimeline.js CHANGED
@@ -1,14 +1,14 @@
1
1
  /* eslint-disable no-underscore-dangle */
2
2
  import React, { useMemo } from 'react';
3
3
  import { StyledNoData, StyldTitle, StyledRoot, TimelineBottom } from './styled';
4
- import { Spin } from '../../atoms';
4
+ import { Empty, Flex, Spin } from '../../atoms';
5
5
  import { ItemEvent, TimeLineTitle, ItemGroupEvent } from './components';
6
6
  import { useInView } from 'react-intersection-observer';
7
7
  import { getTranslateMessage, translations } from '@antscorp/antsomi-ui/es/locales/translations';
8
8
  import { isEmpty } from 'lodash';
9
9
  import { differenceInMonths, formatDateTZ, startOfMonth, subMonths, } from '@antscorp/antsomi-ui/es/utils/date';
10
10
  export const ActivityTimeline = (props) => {
11
- const { timelines = [], isLoading = false, title = 'Time line', timezone = Intl.DateTimeFormat().resolvedOptions().timeZone, objectName = '_THIS_PERSON_UPPERCASE', onFetchMore, eventTracking: eventTrackingProp = [], header, } = props;
11
+ const { timelines = [], isLoading = false, title = 'Time line', timezone = Intl.DateTimeFormat().resolvedOptions().timeZone, objectName = '_THIS_PERSON_UPPERCASE', onFetchMore, eventTracking: eventTrackingProp = [], header, className, } = props;
12
12
  let { timelineAvailable } = props;
13
13
  timelineAvailable = (timelines.length > 0 && !!timelineAvailable) || false;
14
14
  const eventTracking = useMemo(() => {
@@ -19,15 +19,16 @@ export const ActivityTimeline = (props) => {
19
19
  const [bottomRef] = useInView({
20
20
  threshold: 1,
21
21
  onChange: inView => {
22
- if (inView || !timelineAvailable || !onFetchMore)
22
+ if (!inView || isLoading || !timelineAvailable || !onFetchMore)
23
23
  return;
24
24
  onFetchMore();
25
25
  },
26
26
  });
27
27
  const showBottomComponent = () => {
28
- if (isEmpty(timelines))
28
+ if (isEmpty(timelines) || isLoading)
29
29
  return null;
30
- return (React.createElement(TimelineBottom, { ref: bottomRef, align: "center", justify: "center" }, timelineAvailable ? (React.createElement(Spin, { indicatorSize: 24 })) : (getTranslateMessage(translations._INFO_NO_MORE_ACTIVITY, 'No more activities!'))));
30
+ return (React.createElement(TimelineBottom, { align: "center", justify: "center" }, timelineAvailable && onFetchMore ? (React.createElement(Flex, { ref: bottomRef },
31
+ React.createElement(Spin, { indicatorSize: 24 }))) : (getTranslateMessage(translations._INFO_NO_MORE_ACTIVITY, 'No more activities!'))));
31
32
  };
32
33
  const showMainContent = (timelines, customerName) => {
33
34
  const result = [];
@@ -86,17 +87,19 @@ export const ActivityTimeline = (props) => {
86
87
  };
87
88
  const renderContent = () => {
88
89
  if (isLoading) {
89
- return React.createElement(Spin, null);
90
+ return (React.createElement(Flex, { align: "center", justify: "center" },
91
+ React.createElement(Spin, { indicatorSize: 24 })));
90
92
  }
91
93
  if (!isLoading && !timelines.length) {
92
- return React.createElement(StyledNoData, null, "No data");
94
+ return (React.createElement(StyledNoData, { align: "center", justify: "center" },
95
+ React.createElement(Empty, { style: { height: 240 } })));
93
96
  }
94
97
  return (React.createElement(React.Fragment, null,
95
98
  header,
96
99
  showMainContent(timelines, objectName),
97
100
  showBottomComponent()));
98
101
  };
99
- return (React.createElement(StyledRoot, null,
102
+ return (React.createElement(StyledRoot, { className: className },
100
103
  React.createElement(StyldTitle, null, title),
101
104
  renderContent()));
102
105
  };
package/es/components/organism/ActivityTimeline/components/ItemEvent/ItemEvent.js CHANGED
@@ -25,8 +25,8 @@ export const ItemEvent = (props) => {
25
25
  React.createElement(List, { type: "timeline" },
26
26
  React.createElement(ListItem, null,
27
27
  React.createElement(ListItemTimeLine, null,
28
- React.createElement(ListItemTitle, null, htmlParse(fullContentEvent)),
29
- React.createElement(ListItemTime, null, formatDateHeader(dataActivity[0].trackedDateTimeUTC))))),
28
+ React.createElement(ListItemTitle, { ellipsis: { tooltip: true } }, htmlParse(fullContentEvent))),
29
+ React.createElement(ListItemTime, { ellipsis: { tooltip: true } }, formatDateHeader(dataActivity[0].trackedDateTimeUTC)))),
30
30
  infoEvent.showRedeem && validateExtra.loyalty_card ? (React.createElement(WrapperContainerRedeem, null,
31
31
  React.createElement(CardMember, { info: validateExtra.loyalty_card }),
32
32
  checkShowRedeem(validateExtra) && (React.createElement(Redeem, { point: safeParse(validateExtra.point, 'N/A'), redeemType: safeParse(validateExtra.point_type, 'N/A') })))) : (infoEvent.showRedeem &&
package/es/components/organism/ActivityTimeline/components/ItemGroupEvent/ItemGroupEvent.js CHANGED
@@ -54,8 +54,8 @@ export const ItemGroupEvent = (props) => {
54
54
  return (React.createElement(React.Fragment, { key: `${titleEvent}-${fullContentEvent}-${index.toString()}` },
55
55
  React.createElement(ListItem, null,
56
56
  React.createElement(ListItemTimeLine, null,
57
- React.createElement(ListItemTitle, null, htmlParse(fullContentEvent))),
58
- React.createElement(ListItemTime, null, formatDateHeader(itemEvent.trackedDateTimeUTC))),
57
+ React.createElement(ListItemTitle, { ellipsis: { tooltip: true } }, htmlParse(fullContentEvent))),
58
+ React.createElement(ListItemTime, { ellipsis: { tooltip: true } }, formatDateHeader(itemEvent.trackedDateTimeUTC))),
59
59
  infoEvent.showRedeem && validateExtra.loyalty_card ? (React.createElement(WrapperContainerRedeem, null,
60
60
  React.createElement(CardMember, { info: validateExtra.loyalty_card }),
61
61
  checkShowRedeem(validateExtra) && (React.createElement(Redeem, { point: safeParse(validateExtra.point, 'N/A'), redeemType: safeParse(validateExtra.point_type, 'N/A') })))) : (infoEvent.showRedeem &&
package/es/components/organism/ActivityTimeline/components/ListItem/styled.d.ts CHANGED
@@ -1,7 +1,8 @@
1
+ /// <reference types="react" />
1
2
  export declare const ListItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
2
3
  export declare const StyledListItem: import("styled-components").StyledComponent<"div", any, {
3
4
  type: 'timeline' | 'underline';
4
5
  }, never>;
5
6
  export declare const ListItemTimeLine: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const ListItemTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
7
- export declare const ListItemTime: import("styled-components").StyledComponent<"span", any, {}, never>;
7
+ export declare const ListItemTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
8
+ export declare const ListItemTime: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
package/es/components/organism/ActivityTimeline/components/ListItem/styled.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { Typography } from 'antd';
1
2
  import styled, { css } from 'styled-components';
2
3
  export const ListItemContent = styled.div `
3
4
  flex: 0 0 100%;
@@ -14,6 +15,7 @@ export const StyledListItem = styled.div `
14
15
  line-height: 1rem;
15
16
  max-width: 100%;
16
17
  font-size: 0.75rem;
18
+ overflow: hidden;
17
19
 
18
20
  ${props => {
19
21
  switch (props.type) {
@@ -31,13 +33,13 @@ export const StyledListItem = styled.div `
31
33
  }}
32
34
  `;
33
35
  export const ListItemTimeLine = styled.div `
34
- line-height: 1.0625rem;
35
36
  margin-right: 1.5rem;
37
+ min-width: 0;
38
+ flex: 1;
36
39
  `;
37
- export const ListItemTitle = styled.span `
40
+ export const ListItemTitle = styled(Typography.Text) `
38
41
  flex: 0 0 calc(190 / 408 * 100%);
39
42
  `;
40
- export const ListItemTime = styled.span `
43
+ export const ListItemTime = styled(Typography.Text) `
41
44
  font-size: 0.75rem;
42
- flex-shrink: 0;
43
45
  `;
package/es/components/organism/ActivityTimeline/components/ProductCard/styled.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ /// <reference types="react" />
1
2
  export declare const WrapCard: import("styled-components").StyledComponent<"div", any, {}, never>;
2
3
  export declare const ImgPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
3
4
  export declare const InfoPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const LinkExtendTitle: import("styled-components").StyledComponent<"a", any, {}, never>;
5
+ export declare const LinkExtendTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Link").LinkProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
5
6
  export declare const PlainCard: import("styled-components").StyledComponent<"div", any, {}, never>;
package/es/components/organism/ActivityTimeline/components/ProductCard/styled.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { globalToken } from '@antscorp/antsomi-ui/es/constants';
2
+ import { Typography } from 'antd';
2
3
  import styled from 'styled-components';
3
4
  export const WrapCard = styled.div `
4
5
  display: flex;
@@ -57,7 +58,7 @@ export const InfoPanel = styled.div `
57
58
  flex-direction: column;
58
59
  justify-content: space-between;
59
60
  `;
60
- export const LinkExtendTitle = styled.a `
61
+ export const LinkExtendTitle = styled(Typography.Link) `
61
62
  font-size: 0.75rem;
62
63
  font-family: Roboto-Bold, sans-serif;
63
64
  margin-bottom: 0.5rem;
package/es/components/organism/ActivityTimeline/styled.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  export declare const StyledRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
3
3
  export declare const StyldTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const StyledNoData: import("styled-components").StyledComponent<"div", any, {}, never>;
4
+ export declare const StyledNoData: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
5
5
  export declare const WrapperContainerRedeem: import("styled-components").StyledComponent<"div", any, {}, never>;
6
6
  export declare const TimelineContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
7
7
  export declare const TimelineBottom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
package/es/components/organism/ActivityTimeline/styled.js CHANGED
@@ -5,13 +5,7 @@ export const StyldTitle = styled.div `
5
5
  font-size: 16px;
6
6
  font-weight: bold;
7
7
  `;
8
- export const StyledNoData = styled.div `
9
- width: 100%;
10
- height: 100px;
11
- display: flex;
12
- justify-content: center;
13
- align-items: center;
14
- `;
8
+ export const StyledNoData = styled(Flex) ``;
15
9
  export const WrapperContainerRedeem = styled.div `
16
10
  display: flex;
17
11
  justify-content: space-between;
@@ -34,5 +28,5 @@ export const TimelineContainer = styled.div `
34
28
  }
35
29
  `;
36
30
  export const TimelineBottom = styled(Flex) `
37
- margin-top: 4px;
31
+ margin-top: 10px;
38
32
  `;
package/es/components/organism/ActivityTimeline/types.d.ts CHANGED
@@ -16,4 +16,5 @@ export type ActivityTimeLineProps = Partial<{
16
16
  onFetchMore: () => void;
17
17
  longDateTimeFormat: string;
18
18
  header: React.ReactNode;
19
+ className: string;
19
20
  }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.729",
3
+ "version": "1.3.5-beta.730",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",