Skip to content

Commit 4d52692

Browse files
dleadbetterdleadbetter
authored
Merge pull request #165 from performant-software/feature/udcsl57_projects_metadata
UDCSL #57 - Projects metadata
2 parents ae7f2db + ed45a85 commit 4d52692

File tree

13 files changed

+416
-85
lines changed

13 files changed

+416
-85
lines changed

‎packages/semantic-ui/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/semantic-components",
3-
"version": "0.5.19",
3+
"version": "0.5.20-beta.4",
44
"description": "A package of shared components based on the Semantic UI Framework.",
55
"license": "MIT",
66
"main": "./build/index.js",
@@ -12,7 +12,7 @@
1212
"build": "webpack --mode production && flow-copy-source -v src types"
1313
},
1414
"dependencies": {
15-
"@performant-software/shared-components": "^0.5.19",
15+
"@performant-software/shared-components": "^0.5.20-beta.4",
1616
"@react-google-maps/api": "^2.8.1",
1717
"axios": "^0.26.1",
1818
"i18next": "^19.4.4",

‎packages/semantic-ui/src/components/GoogleMap.js‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import {
55
GoogleMap as MapComponent,
66
Marker
77
} from '@react-google-maps/api';
8-
import React, { useCallback, useEffect, useState } from 'react';
8+
import React, {
9+
useCallback,
10+
useEffect,
11+
useMemo,
12+
useState
13+
} from 'react';
914

1015
type LatLng = {
1116
lat: () => number,
@@ -37,28 +42,44 @@ const GoogleMap = (props: Props) => {
3742
const [center, setCenter] = useState(position || props.defaultCenter);
3843
const [map, setMap] = useState();
3944

40-
// If no default zoom is provided and a position is provided, set the default zoom to 12.
41-
let { defaultZoom } = props;
45+
/**
46+
* Set the zoom value based on the position and defaultZoom prop.
47+
*
48+
* @type {*}
49+
*/
50+
const zoom = useMemo(() => {
51+
let value;
4252

43-
if (!defaultZoom) {
4453
if (position) {
45-
defaultZoom = DEFAULT_ZOOM_MARKER;
54+
value = DEFAULT_ZOOM_MARKER;
55+
} else if (props.defaultZoom) {
56+
value = props.defaultZoom;
4657
} else {
47-
defaultZoom = DEFAULT_ZOOM;
58+
value = DEFAULT_ZOOM;
4859
}
49-
}
5060

51-
// Call the onDragEnd prop, passing the new location.
52-
const onDragEnd = ({ latLng }) => {
61+
return value;
62+
}, [position, props.defaultZoom]);
63+
64+
/**
65+
* Call the onDragEnd prop, passing the new location.
66+
*
67+
* @type {(function({latLng: *}): void)|*}
68+
*/
69+
const onDragEnd = useCallback(({ latLng }) => {
5370
if (props.onDragEnd) {
54-
// $FlowFixMe - Not actually fixing, we're checking for presence here.
5571
props.onDragEnd({
5672
lat: latLng.lat(),
5773
lng: latLng.lng()
5874
});
5975
}
60-
};
76+
}, [props.onDragEnd]);
6177

78+
/**
79+
* Sets the map object when the component mounts.
80+
*
81+
* @type {function(*): void}
82+
*/
6283
const onLoad = useCallback((m) => setMap(m), []);
6384

6485
// If the position is changed manually and the new location is outside of the current bounds, re-center the map.
@@ -78,7 +99,7 @@ const GoogleMap = (props: Props) => {
7899
mapContainerStyle={props.containerStyle}
79100
onClick={onDragEnd}
80101
onLoad={onLoad}
81-
zoom={defaultZoom}
102+
zoom={zoom}
82103
>
83104
{ position && (
84105
<Marker

‎packages/semantic-ui/src/components/HorizontalCards.js‎

Lines changed: 74 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import React, {
44
useCallback,
55
useEffect,
6+
useMemo,
67
useRef,
78
useState
89
} from 'react';
@@ -37,9 +38,20 @@ const HorizontalCards = (props: Props) => {
3738
const ref = useRef();
3839

3940
/**
40-
* Sets the number of pages and total page width on the state.
41+
* Sets the flex-box style based on the page width.
42+
*
43+
* @type {function(): {flex: string}}
4144
*/
42-
useEffect(() => {
45+
const cardStyle = useMemo(() => ({
46+
flex: `0 0 ${(pageWidth / props.perPage) - marginWidth}px`
47+
}), [pageWidth, marginWidth, props.perPage]);
48+
49+
/**
50+
* Initializes the page width and scroll pages on the sate.
51+
*
52+
* @type {(function(*=): void)|*}
53+
*/
54+
const initialize = useCallback((event) => {
4355
const instance = ref.current;
4456

4557
if (instance) {
@@ -48,6 +60,10 @@ const HorizontalCards = (props: Props) => {
4860
setPageWidth(clientWidth);
4961
setScrollPages(Math.ceil(scrollWidth / clientWidth));
5062

63+
if (!event) {
64+
setScrollPage(0);
65+
}
66+
5167
const child = instance.firstChild;
5268
if (child) {
5369
const style = window.getComputedStyle(child);
@@ -57,8 +73,39 @@ const HorizontalCards = (props: Props) => {
5773
setMarginWidth(leftMargin + rightMargin);
5874
}
5975
}
76+
}, [ref, props.items]);
77+
78+
/**
79+
* Sets the current page number on the state.
80+
*
81+
* @type {function(*): void}
82+
*/
83+
const onPageChange = useCallback((increment) => {
84+
let nextPage = scrollPage + increment;
85+
86+
if (nextPage < 0) {
87+
nextPage = scrollPages;
88+
} else if (nextPage >= scrollPages) {
89+
nextPage = 0;
90+
}
91+
92+
setScrollPage(nextPage);
93+
}, [scrollPage, scrollPages]);
94+
95+
/**
96+
* Sets the window resize event listener.
97+
*/
98+
useEffect(() => {
99+
window.addEventListener('resize', initialize);
100+
101+
return () => window.removeEventListener('resize', initialize);
60102
}, []);
61103

104+
/**
105+
* Re-initialize the component if the items change.
106+
*/
107+
useEffect(() => initialize(), [initialize, props.items]);
108+
62109
/**
63110
* Sets the total number of pages on the state.
64111
*/
@@ -82,32 +129,6 @@ const HorizontalCards = (props: Props) => {
82129
}
83130
}, [scrollPage, pageWidth]);
84131

85-
/**
86-
* Sets the current page number on the state.
87-
*
88-
* @type {function(*): void}
89-
*/
90-
const onPageChange = useCallback((increment) => {
91-
let nextPage = scrollPage + increment;
92-
93-
if (nextPage < 0) {
94-
nextPage = scrollPages;
95-
} else if (nextPage >= scrollPages) {
96-
nextPage = 0;
97-
}
98-
99-
setScrollPage(nextPage);
100-
}, [scrollPage, scrollPages]);
101-
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-
111132
/**
112133
* Renders the card component. If a "route" prop is passed, the component is wrapped in a Link.
113134
*
@@ -119,35 +140,33 @@ const HorizontalCards = (props: Props) => {
119140
const renderCard = (item, index) => (
120141
<Card
121142
link
122-
onClick={() => {
123-
if (props.onClick) {
124-
props.onClick(item, index);
125-
}
126-
}}
127-
style={getCardStyle()}
143+
onClick={props.onClick && props.onClick.bind(this, item, index)}
144+
style={cardStyle}
128145
>
129146
{ !props.inlineImage && renderImage(item) }
130-
<Card.Content>
131-
{ props.inlineImage && renderImage(item) }
132-
{ props.renderHeader && (
133-
<Card.Header
134-
as={Header}
135-
size='small'
136-
>
137-
{ props.renderHeader(item) }
138-
</Card.Header>
139-
)}
140-
{ props.renderMeta && (
141-
<Card.Meta>
142-
{ props.renderMeta(item) }
143-
</Card.Meta>
144-
)}
145-
{ props.renderDescription && (
146-
<Card.Description>
147-
{ props.renderDescription(item) }
148-
</Card.Description>
149-
)}
150-
</Card.Content>
147+
{ (props.renderHeader || props.renderMeta || props.renderDescription) && (
148+
<Card.Content>
149+
{ props.inlineImage && renderImage(item) }
150+
{ props.renderHeader && (
151+
<Card.Header
152+
as={Header}
153+
size='small'
154+
>
155+
{ props.renderHeader(item) }
156+
</Card.Header>
157+
)}
158+
{ props.renderMeta && (
159+
<Card.Meta>
160+
{ props.renderMeta(item) }
161+
</Card.Meta>
162+
)}
163+
{ props.renderDescription && (
164+
<Card.Description>
165+
{ props.renderDescription(item) }
166+
</Card.Description>
167+
)}
168+
</Card.Content>
169+
)}
151170
{ props.renderExtra && (
152171
<Card.Content
153172
extra

‎packages/shared/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/shared-components",
3-
"version": "0.5.19",
3+
"version": "0.5.20-beta.4",
44
"description": "A package of shared, framework agnostic, components.",
55
"license": "MIT",
66
"main": "./build/index.js",
@@ -20,6 +20,7 @@
2020
"react-fast-compare": "^3.2.0",
2121
"react-ga4": "^1.4.1",
2222
"react-i18next": "^11.4.0",
23+
"react-quill": "^2.0.0",
2324
"simple-keyboard": "^3.0.0",
2425
"simple-keyboard-layouts": "^3.0.0",
2526
"underscore": "^1.13.2"

‎packages/shared/src/components/RichTextArea.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.rich-text-area.quill {
2+
width: 100%;
3+
}
4+
5+
.rich-text-area.quill .ql-container,
6+
.rich-text-area.quill .ql-editor {
7+
height: auto;
8+
min-height: 7em;
9+
}
10+
11+
.rich-text-area.quill .ql-container,
12+
.rich-text-area.quill .ql-toolbar {
13+
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
14+
margin: 0em;
15+
outline: none;
16+
-webkit-appearance: none;
17+
tap-highlight-color: rgba(255, 255, 255, 0);
18+
line-height: 1.21428571em;
19+
font-size: 1em;
20+
background: #FFFFFF;
21+
border: 1px solid rgba(34, 36, 38, 0.15);
22+
color: rgba(0, 0, 0, 0.87);
23+
border-radius: 0.28571429rem;
24+
box-shadow: 0em 0em 0em 0em transparent inset;
25+
transition: color 0.1s ease, border-color 0.1s ease;
26+
}

0 commit comments

Comments
 (0)