diff --git a/packages/controlled-vocabulary/src/components/ReferenceCodeDropdown.js b/packages/controlled-vocabulary/src/components/ReferenceCodeDropdown.js index 45b44e52a..e7cf6da24 100644 --- a/packages/controlled-vocabulary/src/components/ReferenceCodeDropdown.js +++ b/packages/controlled-vocabulary/src/components/ReferenceCodeDropdown.js @@ -25,7 +25,7 @@ type Props = { value: Item | Array }; -const ReferenceCodeDropdown = (props: Props) => { +const ReferenceCodeDropdown = ({disabled = false, fluid = true, multiple = false, placeholder = undefined, ...props}: Props) => { const [loading, setLoading] = useState(false); const [options, setOptions] = useState([]); @@ -34,8 +34,8 @@ const ReferenceCodeDropdown = (props: Props) => { */ const value = useMemo(() => { const v = _.pluck(_.filter(props.value, (x) => !x._destroy), 'reference_code_id'); - return props.multiple ? v : _.first(v); - }, [props.multiple, props.value]); + return multiple ? v : _.first(v); + }, [multiple, props.value]); /** * Converts the passed ID to a reference code item. @@ -73,7 +73,7 @@ const ReferenceCodeDropdown = (props: Props) => { const onChange = useCallback((e, data) => { let referenceCodeIds; - if (props.multiple) { + if (multiple) { referenceCodeIds = data.value; } else { referenceCodeIds = _.compact([data.value]); @@ -100,7 +100,7 @@ const ReferenceCodeDropdown = (props: Props) => { }); props.onChange(items); - }, [toItem, props.multiple, props.onChange, props.value]); + }, [toItem, multiple, props.onChange, props.value]); /** * Loads the list of reference codes from the server. @@ -123,13 +123,13 @@ const ReferenceCodeDropdown = (props: Props) => { return ( { ); }; -ReferenceCodeDropdown.defaultProps = { - disabled: false, - fluid: true, - multiple: false, - placeholder: undefined -}; - export default ReferenceCodeDropdown; diff --git a/packages/core-data/src/components/EventsList.js b/packages/core-data/src/components/EventsList.js index 1b01c0887..6529ee4f4 100644 --- a/packages/core-data/src/components/EventsList.js +++ b/packages/core-data/src/components/EventsList.js @@ -33,7 +33,7 @@ type Props = { onClick?: (event: EventType) => void }; -const EventsList = (props: Props) => ( +const EventsList = ({isSelected = () => false, onClick = () => {}, ...props}: Props) => ( ); -EventsList.defaultProps = { - isSelected: () => false, - onClick: () => {} -}; - export default EventsList; diff --git a/packages/core-data/src/components/FacetSlider.js b/packages/core-data/src/components/FacetSlider.js index 2b0010687..e89153b95 100644 --- a/packages/core-data/src/components/FacetSlider.js +++ b/packages/core-data/src/components/FacetSlider.js @@ -16,7 +16,7 @@ type MarkerProps = { value: number }; -const SliderMarker = (props: MarkerProps) => { +const SliderMarker = ({position = 'top', ...props}: MarkerProps) => { const [initialized, setInitialized] = useState(false); const [open, setOpen] = useState(false); @@ -70,7 +70,7 @@ const SliderMarker = (props: MarkerProps) => { />
{ ); }; -SliderMarker.defaultProps = { - position: 'top' -}; - type Action = { /** * Class name to apply to the button element. @@ -200,7 +196,7 @@ type Props = { value: [number, number] }; -const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => { +const FacetSlider = forwardRef(({classNames = {}, step = 1, value = [], ...props}) => { const { clearTimer, setTimer } = useTimer(); /** @@ -209,9 +205,9 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => { * @type {(function(): void)|*} */ const onLeft = useCallback(() => { - const [start, end] = props.value; + const [start, end] = value; - let newStart = start - props.step; + let newStart = start - step; if (newStart < props.min) { newStart = props.min; } @@ -223,7 +219,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => { clearTimer(); setTimer(() => props.onValueCommit([newStart, end])); } - }, [props.min, props.onValueChange, props.onValueCommit, props.step, props.value]); + }, [props.min, props.onValueChange, props.onValueCommit, step, value]); /** * Callback fired when the right button is clicked. This function increments the max range value by the "step" prop. @@ -231,9 +227,9 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => { * @type {(function(): void)|*} */ const onRight = useCallback(() => { - const [start, end] = props.value; + const [start, end] = value; - let newEnd = end + props.step; + let newEnd = end + step; if (newEnd > props.max) { newEnd = props.max; } @@ -245,7 +241,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => { clearTimer(); setTimer(() => props.onValueCommit([start, newEnd])); } - }, [props.max, props.onValueChange, props.onValueCommit, props.step, props.value]); + }, [props.max, props.onValueChange, props.onValueCommit, step, value]); /** * Filtered actions by position. @@ -277,7 +273,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => { 'py-3', 'disabled:opacity-50', 'disabled:hover:bg-transparent', - props.classNames.button + classNames.button )} onClick={onLeft} type='button' @@ -288,7 +284,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => { { onValueCommit={props.onValueCommit} ref={ref} step={1} - value={props.value} + value={value} > @@ -345,14 +341,14 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => { )} {!props.hideStepButtons && ( @@ -363,7 +359,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => { 'py-3', 'disabled:opacity-50', 'disabled:hover:bg-transparent', - props.classNames.button + classNames.button )} onClick={onRight} type='button' @@ -375,7 +371,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
{ _.map(rightActions, (action, index) => ( @@ -408,7 +404,7 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => {
{ _.map(bottomActions, (action, index) => ( @@ -435,12 +431,6 @@ const FacetSlider = forwardRef((props: Props, ref: HTMLElement) => { ); }); -FacetSlider.defaultProps = { - classNames: {}, - step: 1, - value: [] -}; - export default FacetSlider; export type { diff --git a/packages/core-data/src/components/RelatedEvents.js b/packages/core-data/src/components/RelatedEvents.js index 111693d49..78e5136d6 100644 --- a/packages/core-data/src/components/RelatedEvents.js +++ b/packages/core-data/src/components/RelatedEvents.js @@ -33,7 +33,7 @@ type Props = { selected?: EventType }; -const RelatedEvents = (props: Props) => { +const RelatedEvents = ({description = true, defaultPage = 1, onClick = () => {}, ...props}: Props) => { const { data: { events } = {}, isNextDisabled, @@ -62,10 +62,10 @@ const RelatedEvents = (props: Props) => { return (
{ pages > 1 && (
{ ); }; -RelatedEvents.defaultProps = { - description: true, - defaultPage: 1, - onClick: () => {} -}; - export default RelatedEvents; diff --git a/packages/core-data/src/components/RelatedList.js b/packages/core-data/src/components/RelatedList.js index 0a222b51e..efadb1162 100644 --- a/packages/core-data/src/components/RelatedList.js +++ b/packages/core-data/src/components/RelatedList.js @@ -50,7 +50,7 @@ type Props = { /** * This component is a helper component used to structure the lists for the other `Related*` components. */ -const RelatedList = (props: Props) => { +const RelatedList = ({itemsPerRow = 1, ...props}: Props) => { const [items, setItems] = useState([]); const { @@ -93,12 +93,12 @@ const RelatedList = (props: Props) => { className={clsx( 'grid', 'gap-2', - { 'grid-cols-1': props.itemsPerRow === 1 }, - { 'grid-cols-2': props.itemsPerRow === 2 }, - { 'grid-cols-3': props.itemsPerRow === 3 }, - { 'grid-cols-4': props.itemsPerRow === 4 }, - { 'grid-cols-5': props.itemsPerRow === 5 }, - { 'grid-cols-6': props.itemsPerRow === 6 }, + { 'grid-cols-1': itemsPerRow === 1 }, + { 'grid-cols-2': itemsPerRow === 2 }, + { 'grid-cols-3': itemsPerRow === 3 }, + { 'grid-cols-4': itemsPerRow === 4 }, + { 'grid-cols-5': itemsPerRow === 5 }, + { 'grid-cols-6': itemsPerRow === 6 }, props.className )} > @@ -131,8 +131,4 @@ const RelatedList = (props: Props) => { ); }; -RelatedList.defaultProps = { - itemsPerRow: 1 -}; - export default RelatedList; diff --git a/packages/core-data/src/components/RelatedMedia.js b/packages/core-data/src/components/RelatedMedia.js index 20b19333f..26caf1db9 100644 --- a/packages/core-data/src/components/RelatedMedia.js +++ b/packages/core-data/src/components/RelatedMedia.js @@ -49,7 +49,7 @@ const DEFAULT_THUMBNAIL_WIDTH = 80; /** * This component renders the related Core Data media records as well as a gallery viewer. */ -const RelatedMedia = (props: Props) => { +const RelatedMedia = ({thumbnailHeight = DEFAULT_THUMBNAIL_HEIGHT, thumbnailWidth = DEFAULT_THUMBNAIL_WIDTH, ...props}: Props) => { const [manifestUrl, setManifestUrl] = useState(); /** @@ -67,8 +67,8 @@ const RelatedMedia = (props: Props) => { onClick={() => setManifestUrl(id)} thumbnail={_.map(thumbnail, (t) => ({ ...t, - width: props.thumbnailWidth, - height: props.thumbnailHeight + width: thumbnailWidth, + height: thumbnailHeight }))} />
{ { label }
- ), [props.thumbnailHeight, props.thumbnailWidth]); + ), [thumbnailHeight, thumbnailWidth]); return ( <> @@ -100,9 +100,4 @@ const RelatedMedia = (props: Props) => { ); }; -RelatedMedia.defaultProps = { - thumbnailHeight: DEFAULT_THUMBNAIL_HEIGHT, - thumbnailWidth: DEFAULT_THUMBNAIL_WIDTH -}; - export default RelatedMedia; diff --git a/packages/core-data/src/components/SearchResultsLayer.js b/packages/core-data/src/components/SearchResultsLayer.js index 758c9915a..7b5d4229f 100644 --- a/packages/core-data/src/components/SearchResultsLayer.js +++ b/packages/core-data/src/components/SearchResultsLayer.js @@ -44,7 +44,7 @@ type Props = { /** * This component renders a map layer for the search results from a Typesense search index. */ -const SearchResultsLayer = (props: Props) => { +const SearchResultsLayer = ({fitBoundingBox = true, ...props}: Props) => { const [mapLoaded, setMapLoaded] = useState(false); const map = useMap(); @@ -59,12 +59,12 @@ const SearchResultsLayer = (props: Props) => { props.boundingBoxOptions, props.buffer, props.data, - props.fitBoundingBox, + fitBoundingBox, props.searching ]; useEffect(() => { - if (props.fitBoundingBox && props.data && mapLoaded && !props.searching) { + if (fitBoundingBox && props.data && mapLoaded && !props.searching) { // Set the bounding box on the map const bbox = MapUtils.getBoundingBox(props.data, props.buffer); @@ -103,8 +103,4 @@ const SearchResultsLayer = (props: Props) => { ); }; -SearchResultsLayer.defaultProps = { - fitBoundingBox: true -}; - export default SearchResultsLayer; diff --git a/packages/core-data/src/components/SearchResultsList.js b/packages/core-data/src/components/SearchResultsList.js index 783b55481..3d84c31ab 100644 --- a/packages/core-data/src/components/SearchResultsList.js +++ b/packages/core-data/src/components/SearchResultsList.js @@ -49,7 +49,7 @@ type RowProps = { /** * This component renders a list of search results returned from a Core Data Typesense index. */ -const SearchResultsList = (props: Props) => { +const SearchResultsList = ({itemSize = 88, ...props}: Props) => { const { hits, hover, @@ -119,7 +119,7 @@ const SearchResultsList = (props: Props) => { height={height} itemCount={hits.length} width={width} - itemSize={props.itemSize} + itemSize={itemSize} > { Row } @@ -128,8 +128,4 @@ const SearchResultsList = (props: Props) => { ); }; -SearchResultsList.defaultProps = { - itemSize: 88 -}; - export default SearchResultsList; diff --git a/packages/core-data/src/components/Slider.js b/packages/core-data/src/components/Slider.js index 23a06d2a1..da3b3b4ff 100644 --- a/packages/core-data/src/components/Slider.js +++ b/packages/core-data/src/components/Slider.js @@ -15,7 +15,7 @@ type MarkerProps = { value: number }; -const SliderMarker = (props: MarkerProps) => { +const SliderMarker = ({position = 'top', ...props}: MarkerProps) => { const [initialized, setInitialized] = useState(false); const [open, setOpen] = useState(false); @@ -37,7 +37,7 @@ const SliderMarker = (props: MarkerProps) => { // Set a new timer setTimer(() => setOpen(false)); - }, [props.value]); + }, [value]); /** * Sets the initialized state. @@ -46,7 +46,7 @@ const SliderMarker = (props: MarkerProps) => { if (!initialized) { setInitialized(true); } - }, [props.value]); + }, [value]); return ( @@ -69,13 +69,13 @@ const SliderMarker = (props: MarkerProps) => { />
- { props.value } + { value }
{ ); }; -SliderMarker.defaultProps = { - position: 'top' -}; - type Action = { /** * Class name to apply to the button element. @@ -168,7 +164,7 @@ type Props = { value: [number, number] }; -const Slider = (props: Props) => { +const Slider = ({classNames = {}, value = [], ...props}: Props) => { /** * Adjusts the values entered by the user based on range * and step constraints. @@ -207,7 +203,7 @@ const Slider = (props: Props) => { }, [props.onValueCommit, props.onValueChange, props.min, props.max]); return ( -
+
{(props.icon || props.label) && (
{ { onValueChange={props.onValueChange} onValueCommit={props.onValueCommit} step={1} - value={props.value} + value={value} >
@@ -276,34 +272,29 @@ const Slider = (props: Props) => { ariaLabel={i18n.t('Slider.start')} className={clsx( 'rounded-md !w-20', - props.classNames.input + classNames.input )} clearable={false} - onBlur={(val) => onInputCommit([parseInt(val, 10), props.value[1]])} - onChange={(val) => props.onValueChange([parseInt(val, 10), props.value[1]])} - value={props.value[0]} + onBlur={(val) => onInputCommit([parseInt(val, 10), value[1]])} + onChange={(val) => props.onValueChange([parseInt(val, 10), value[1]])} + value={value[0]} /> onInputCommit([props.value[0], parseInt(val, 10)])} - onChange={(val) => props.onValueChange([props.value[0], parseInt(val, 10)])} - value={props.value[1]} + onBlur={(val) => onInputCommit([value[0], parseInt(val, 10)])} + onChange={(val) => props.onValueChange([value[0], parseInt(val, 10)])} + value={value[1]} />
); }; -Slider.defaultProps = { - classNames: {}, - value: [] -}; - export default Slider; export type { diff --git a/packages/geospatial/src/components/GeoJsonLayer.js b/packages/geospatial/src/components/GeoJsonLayer.js index 9e38481a4..1eb36549d 100644 --- a/packages/geospatial/src/components/GeoJsonLayer.js +++ b/packages/geospatial/src/components/GeoJsonLayer.js @@ -12,14 +12,14 @@ type Props = { url?: string }; -const GeoJsonLayer = (props: Props) => ( +const GeoJsonLayer = ({fillStyle = MapStyles.fill.paint, pointStyle = MapStyles.point.paint, strokeStyle = MapStyles.stroke.paint, ...props}: Props) => ( ( /> ); -GeoJsonLayer.defaultProps = { - fillStyle: MapStyles.fill.paint, - pointStyle: MapStyles.point.paint, - strokeStyle: MapStyles.stroke.paint -}; - export default GeoJsonLayer; diff --git a/packages/geospatial/src/components/LayerMenu.js b/packages/geospatial/src/components/LayerMenu.js index 519bd09e1..772a5387c 100644 --- a/packages/geospatial/src/components/LayerMenu.js +++ b/packages/geospatial/src/components/LayerMenu.js @@ -23,7 +23,7 @@ type Props = { const MENU_PADDING = 30; -const LayerMenu = (props: Props) => { +const LayerMenu = ({position = 'top-left', ...props}: Props) => { const [canvasHeight, setCanvasHeight] = useState(0); const [visible, setVisible] = useState(); const [menuOpen, setMenuOpen] = useState(false); @@ -102,7 +102,7 @@ const LayerMenu = (props: Props) => { <>