@performant-software/semantic-components 0.5.20-beta.0 → 0.5.20-beta.1
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@performant-software/semantic-components",
|
|
3
|
-
"version": "0.5.20-beta.
|
|
3
|
+
"version": "0.5.20-beta.1",
|
|
4
4
|
"description": "A package of shared components based on the Semantic UI Framework.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./build/index.js",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"build": "webpack --mode production && flow-copy-source -v src types"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@performant-software/shared-components": "^0.5.20-beta.
|
|
15
|
+
"@performant-software/shared-components": "^0.5.20-beta.1",
|
|
16
16
|
"@react-google-maps/api": "^2.8.1",
|
|
17
17
|
"axios": "^0.26.1",
|
|
18
18
|
"i18next": "^19.4.4",
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import React, {
|
|
4
4
|
useCallback,
|
|
5
5
|
useEffect,
|
|
6
|
+
useMemo,
|
|
6
7
|
useRef,
|
|
7
8
|
useState
|
|
8
9
|
} from 'react';
|
|
@@ -36,6 +37,15 @@ const HorizontalCards = (props: Props) => {
|
|
|
36
37
|
|
|
37
38
|
const ref = useRef();
|
|
38
39
|
|
|
40
|
+
/**
|
|
41
|
+
* Sets the flex-box style based on the page width.
|
|
42
|
+
*
|
|
43
|
+
* @type {function(): {flex: string}}
|
|
44
|
+
*/
|
|
45
|
+
const cardStyle = useMemo(() => ({
|
|
46
|
+
flex: `0 0 ${(pageWidth / props.perPage) - marginWidth}px`
|
|
47
|
+
}), [pageWidth, marginWidth, props.perPage]);
|
|
48
|
+
|
|
39
49
|
/**
|
|
40
50
|
* Sets the number of pages and total page width on the state.
|
|
41
51
|
*/
|
|
@@ -57,7 +67,7 @@ const HorizontalCards = (props: Props) => {
|
|
|
57
67
|
setMarginWidth(leftMargin + rightMargin);
|
|
58
68
|
}
|
|
59
69
|
}
|
|
60
|
-
}, []);
|
|
70
|
+
}, [props.items]);
|
|
61
71
|
|
|
62
72
|
/**
|
|
63
73
|
* Sets the total number of pages on the state.
|
|
@@ -99,15 +109,6 @@ const HorizontalCards = (props: Props) => {
|
|
|
99
109
|
setScrollPage(nextPage);
|
|
100
110
|
}, [scrollPage, scrollPages]);
|
|
101
111
|
|
|
102
|
-
/**
|
|
103
|
-
* Returns the flex-box style based on the page width.
|
|
104
|
-
*
|
|
105
|
-
* @type {function(): {flex: string}}
|
|
106
|
-
*/
|
|
107
|
-
const getCardStyle = useCallback(() => ({
|
|
108
|
-
flex: `0 0 ${(pageWidth / props.perPage) - marginWidth}px`
|
|
109
|
-
}), [pageWidth, marginWidth, props.perPage]);
|
|
110
|
-
|
|
111
112
|
/**
|
|
112
113
|
* Renders the card component. If a "route" prop is passed, the component is wrapped in a Link.
|
|
113
114
|
*
|
|
@@ -119,35 +120,33 @@ const HorizontalCards = (props: Props) => {
|
|
|
119
120
|
const renderCard = (item, index) => (
|
|
120
121
|
<Card
|
|
121
122
|
link
|
|
122
|
-
onClick={()
|
|
123
|
-
|
|
124
|
-
props.onClick(item, index);
|
|
125
|
-
}
|
|
126
|
-
}}
|
|
127
|
-
style={getCardStyle()}
|
|
123
|
+
onClick={props.onClick && props.onClick(item, index)}
|
|
124
|
+
style={cardStyle}
|
|
128
125
|
>
|
|
129
126
|
{ !props.inlineImage && renderImage(item) }
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
127
|
+
{ (props.renderHeader || props.renderMeta || props.renderDescription) && (
|
|
128
|
+
<Card.Content>
|
|
129
|
+
{ props.inlineImage && renderImage(item) }
|
|
130
|
+
{ props.renderHeader && (
|
|
131
|
+
<Card.Header
|
|
132
|
+
as={Header}
|
|
133
|
+
size='small'
|
|
134
|
+
>
|
|
135
|
+
{ props.renderHeader(item) }
|
|
136
|
+
</Card.Header>
|
|
137
|
+
)}
|
|
138
|
+
{ props.renderMeta && (
|
|
139
|
+
<Card.Meta>
|
|
140
|
+
{ props.renderMeta(item) }
|
|
141
|
+
</Card.Meta>
|
|
142
|
+
)}
|
|
143
|
+
{ props.renderDescription && (
|
|
144
|
+
<Card.Description>
|
|
145
|
+
{ props.renderDescription(item) }
|
|
146
|
+
</Card.Description>
|
|
147
|
+
)}
|
|
148
|
+
</Card.Content>
|
|
149
|
+
)}
|
|
151
150
|
{ props.renderExtra && (
|
|
152
151
|
<Card.Content
|
|
153
152
|
extra
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import React, {
|
|
4
4
|
useCallback,
|
|
5
5
|
useEffect,
|
|
6
|
+
useMemo,
|
|
6
7
|
useRef,
|
|
7
8
|
useState
|
|
8
9
|
} from 'react';
|
|
@@ -36,6 +37,15 @@ const HorizontalCards = (props: Props) => {
|
|
|
36
37
|
|
|
37
38
|
const ref = useRef();
|
|
38
39
|
|
|
40
|
+
/**
|
|
41
|
+
* Sets the flex-box style based on the page width.
|
|
42
|
+
*
|
|
43
|
+
* @type {function(): {flex: string}}
|
|
44
|
+
*/
|
|
45
|
+
const cardStyle = useMemo(() => ({
|
|
46
|
+
flex: `0 0 ${(pageWidth / props.perPage) - marginWidth}px`
|
|
47
|
+
}), [pageWidth, marginWidth, props.perPage]);
|
|
48
|
+
|
|
39
49
|
/**
|
|
40
50
|
* Sets the number of pages and total page width on the state.
|
|
41
51
|
*/
|
|
@@ -57,7 +67,7 @@ const HorizontalCards = (props: Props) => {
|
|
|
57
67
|
setMarginWidth(leftMargin + rightMargin);
|
|
58
68
|
}
|
|
59
69
|
}
|
|
60
|
-
}, []);
|
|
70
|
+
}, [props.items]);
|
|
61
71
|
|
|
62
72
|
/**
|
|
63
73
|
* Sets the total number of pages on the state.
|
|
@@ -99,15 +109,6 @@ const HorizontalCards = (props: Props) => {
|
|
|
99
109
|
setScrollPage(nextPage);
|
|
100
110
|
}, [scrollPage, scrollPages]);
|
|
101
111
|
|
|
102
|
-
/**
|
|
103
|
-
* Returns the flex-box style based on the page width.
|
|
104
|
-
*
|
|
105
|
-
* @type {function(): {flex: string}}
|
|
106
|
-
*/
|
|
107
|
-
const getCardStyle = useCallback(() => ({
|
|
108
|
-
flex: `0 0 ${(pageWidth / props.perPage) - marginWidth}px`
|
|
109
|
-
}), [pageWidth, marginWidth, props.perPage]);
|
|
110
|
-
|
|
111
112
|
/**
|
|
112
113
|
* Renders the card component. If a "route" prop is passed, the component is wrapped in a Link.
|
|
113
114
|
*
|
|
@@ -119,35 +120,33 @@ const HorizontalCards = (props: Props) => {
|
|
|
119
120
|
const renderCard = (item, index) => (
|
|
120
121
|
<Card
|
|
121
122
|
link
|
|
122
|
-
onClick={()
|
|
123
|
-
|
|
124
|
-
props.onClick(item, index);
|
|
125
|
-
}
|
|
126
|
-
}}
|
|
127
|
-
style={getCardStyle()}
|
|
123
|
+
onClick={props.onClick && props.onClick(item, index)}
|
|
124
|
+
style={cardStyle}
|
|
128
125
|
>
|
|
129
126
|
{ !props.inlineImage && renderImage(item) }
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
127
|
+
{ (props.renderHeader || props.renderMeta || props.renderDescription) && (
|
|
128
|
+
<Card.Content>
|
|
129
|
+
{ props.inlineImage && renderImage(item) }
|
|
130
|
+
{ props.renderHeader && (
|
|
131
|
+
<Card.Header
|
|
132
|
+
as={Header}
|
|
133
|
+
size='small'
|
|
134
|
+
>
|
|
135
|
+
{ props.renderHeader(item) }
|
|
136
|
+
</Card.Header>
|
|
137
|
+
)}
|
|
138
|
+
{ props.renderMeta && (
|
|
139
|
+
<Card.Meta>
|
|
140
|
+
{ props.renderMeta(item) }
|
|
141
|
+
</Card.Meta>
|
|
142
|
+
)}
|
|
143
|
+
{ props.renderDescription && (
|
|
144
|
+
<Card.Description>
|
|
145
|
+
{ props.renderDescription(item) }
|
|
146
|
+
</Card.Description>
|
|
147
|
+
)}
|
|
148
|
+
</Card.Content>
|
|
149
|
+
)}
|
|
151
150
|
{ props.renderExtra && (
|
|
152
151
|
<Card.Content
|
|
153
152
|
extra
|