Merge pull request #2650 from oskariorg/antd-update

Initial AntD 4.x -> 5.x update
oskariorg · Sep 2, 2024 · 40520c9 · 40520c9
2 parents f2daf59 + 59da57d
commit 40520c9
Show file tree

Hide file tree

Showing 64 changed files with 666 additions and 566 deletions.
diff --git a/...ereditor/view/AdminLayerForm/AdditionalTabPane/VectorLayerAttributes/PropertiesFormat.jsx b/...ereditor/view/AdminLayerForm/AdditionalTabPane/VectorLayerAttributes/PropertiesFormat.jsx
@@ -1,7 +1,7 @@
 import React, { useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Message, Select, Collapse, CollapsePanel, Checkbox, TextInput, Switch } from 'oskari-ui';
+import { Message, Select, Collapse, Checkbox, TextInput, Switch } from 'oskari-ui';
 import { IconButton } from 'oskari-ui/components/buttons';
 
 const BUNDLE_NAME = 'admin-layereditor';
@@ -68,6 +68,11 @@ const PanelExtra = ({ noValues, onRemove}) => {
     );
 };
 
+PanelExtra.propTypes = {
+    noValues: PropTypes.any,
+    onRemove: PropTypes.func
+};
+
 const CollapseContent = ({values = {}, onChange }) => {
     const { type, noLabel, skipEmpty, params = {} } = values;
 
@@ -97,15 +102,20 @@ const CollapseContent = ({values = {}, onChange }) => {
     );
 };
 
+CollapseContent.propTypes = {
+    values: PropTypes.any,
+    onChange: PropTypes.func
+};
+
 export const PropertiesFormat = ({ format = {}, properties, selected, labels, update }) => {
     const allSelected = selected.length === 0 || properties.length === selected.length;
     const [showAll, setShowAll] = useState(allSelected);
     const propNames = showAll ? properties : selected;
 
     const onChange = (name, key, value) => {
         const values = format[name] || {};
-        const updated = { ...values, [key]:  value };
-        update({...format, [name]: updated });
+        const updated = { ...values, [key]: value };
+        update({ ...format, [name]: updated });
     };
 
     const onRemove = (name) => {
@@ -114,22 +124,21 @@ export const PropertiesFormat = ({ format = {}, properties, selected, labels, up
         update(updated);
     };
 
+    const items = propNames.map(name => {
+        return {
+            key: name,
+            label: labels[name] ? `${name} (${labels[name]})` : name,
+            extra: <PanelExtra onRemove={() => onRemove(name)} noValues={!format[name]}/>,
+            children: <CollapseContent key={name} values={format[name]} onChange={(key, value) => onChange(name, key, value)} />
+        };
+    });
+
     return (
         <Fragment>
             { !allSelected &&
                 <StyledSwitch checked={showAll} onChange={setShowAll} label={<Message messageKey='attributes.showAll'/>}/>
             }
-            <Collapse>
-                { propNames.map(name => {
-                    return (
-                        <CollapsePanel key={name}
-                            header={labels[name] ? `${name} (${labels[name]})` : name}
-                            extra={<PanelExtra onRemove={() => onRemove(name)} noValues={!format[name]}/>}>
-                            <CollapseContent key={name} values={format[name]} onChange={(key, value) => onChange(name, key, value)} />
-                        </CollapsePanel>
-                    )})
-                }
-            </Collapse>
+            <Collapse items={items}/>
         </Fragment>
     );
 };

diff --git a/bundles/admin/admin-layereditor/view/AdminLayerForm/GeneralTabPane/Groups.jsx b/bundles/admin/admin-layereditor/view/AdminLayerForm/GeneralTabPane/Groups.jsx
@@ -15,44 +15,52 @@ const StyledListItem = styled(ListItem)`
 // add subgroups on the list recursively and hierarchically
 const SubGroupsListItem = ({ group, layer, controller }) => {
     return (
-        <List dataSource={group.getGroups().map(subgroup => 
-            <StyledDiv>
-        <StyledListItem>
-            <Checkbox key={subgroup.id}
-                onChange={evt => controller.setGroup(evt.target.checked, subgroup)}
-                checked={!!layer.groups.find(cur => cur === subgroup.id)}
-            >
-                {subgroup.getName()}
-            </Checkbox>
-        </StyledListItem>
-        {subgroup.groups.length > 0 && <SubGroupsListItem group={subgroup} layer={layer} controller={controller}/>}
-        </StyledDiv>)} renderItem={item => item} />
+        <List dataSource={group.getGroups().map(subgroup =>
+            <StyledDiv key={subgroup.id}>
+                <StyledListItem>
+                    <Checkbox key={subgroup.id}
+                        onChange={evt => controller.setGroup(evt.target.checked, subgroup)}
+                        checked={!!layer.groups.find(cur => cur === subgroup.id)}
+                    >
+                        {subgroup.getName()}
+                    </Checkbox>
+                </StyledListItem>
+                {subgroup.groups.length > 0 && <SubGroupsListItem group={subgroup} layer={layer} controller={controller}/>}
+            </StyledDiv>
+        )}/>
     );
 };
 
+SubGroupsListItem.propTypes = {
+    group: PropTypes.object,
+    layer: PropTypes.object,
+    controller: PropTypes.object
+};
+
 export const Groups = ({ layer, groups, controller }) => {
     const dataSource = groups.map(group =>
-        <div>
+        <div key={group.id}>
             <StyledListItem>
                 <Checkbox key={group.id}
                     onChange={evt => controller.setGroup(evt.target.checked, group)}
                     checked={!!layer.groups.find(cur => cur === group.id)}
                 >
                     {group.getName()}
                 </Checkbox>
-            </StyledListItem> 
+            </StyledListItem>
             {group.groups.length > 0 && <SubGroupsListItem group={group} layer={layer} controller={controller}/>}
         </div>
     );
+    const groupPanelItems = [{
+        key: 'groupPanel',
+        label: <Message messageKey='selectMapLayerGroupsButton'/>,
+        children: <List dataSource={dataSource} renderItem={item => item} />
+    }];
     return (
         <Fragment>
             <Message messageKey='fields.groups' />
             <StyledFormField>
-                <Collapse>
-                    <CollapsePanel header={<Message messageKey='selectMapLayerGroupsButton'/>}>
-                        <List dataSource={dataSource} renderItem={item => item} />
-                    </CollapsePanel>
-                </Collapse>
+                <Collapse items={groupPanelItems}/>
             </StyledFormField>
         </Fragment>
     );

diff --git a/bundles/admin/admin-layereditor/view/AdminLayerForm/JsonTabPane/JsonTabPane.jsx b/bundles/admin/admin-layereditor/view/AdminLayerForm/JsonTabPane/JsonTabPane.jsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Message, TextAreaInput, TextInput, Collapse, CollapsePanel } from 'oskari-ui';
+import { Message, TextAreaInput, TextInput, Collapse } from 'oskari-ui';
 import { Controller } from 'oskari-ui/util';
 import { StyledFormField } from '../styled';
 import { IconButton } from 'oskari-ui/components/buttons';
@@ -102,14 +102,17 @@ const ParsedCollapse = ({ json = {}, jsonKey, controller }) => {
         }
         setEdit();
     };
+    const items = [{
+        key: 'collapse_' + jsonKey,
+        label: <Message messageKey={`jsonTab.fields.${jsonKey}`}/>,
+        extra: <PanelExtra setEdit={setEdit} skipEdit={!controller} />,
+        children: <>
+            { edit && <EditBlock edit={edit} onUpdate={onUpdate}/> }
+            <TextAreaInput value={prettier} autoSize={textAreaSize} />
+        </>
+    }];
     return (
-        <Collapse>
-            <CollapsePanel header={<Message messageKey={`jsonTab.fields.${jsonKey}`}/>}
-                extra={<PanelExtra setEdit={setEdit} skipEdit={!controller} />}>
-                { edit && <EditBlock edit={edit} onUpdate={onUpdate}/> }
-                <TextAreaInput value={prettier} autoSize={textAreaSize} />
-            </CollapsePanel>
-        </Collapse>
+        <Collapse items={items}/>
     );
 };
 ParsedCollapse.propTypes = {
@@ -125,16 +128,14 @@ export const JsonTabPane = ({ layer, propertyFields, controller }) => {
                 <Message messageKey='jsonTab.info'/>
             </StyledFormField>
             <StyledFormField>
-                <Collapse>
-                    { propertyFields.includes(ATTRIBUTES) &&
-                        <ParsedCollapse json={layer.attributes} jsonKey='attributes' controller={controller}/>
-                    }
-                    { propertyFields.includes(CAPABILITIES) &&
-                        <ParsedCollapse skipEdit json={layer.capabilities} jsonKey='capabilities'/>
-                    }
-                    <ParsedCollapse json={layer.options} jsonKey='options' controller={controller}/>
-                    <ParsedCollapse json={layer.params} jsonKey='params' controller={controller}/>
-                </Collapse>
+                { propertyFields.includes(ATTRIBUTES) &&
+                    <ParsedCollapse json={layer.attributes} jsonKey='attributes' controller={controller}/>
+                }
+                { propertyFields.includes(CAPABILITIES) &&
+                    <ParsedCollapse skipEdit json={layer.capabilities} jsonKey='capabilities'/>
+                }
+                <ParsedCollapse json={layer.options} jsonKey='options' controller={controller}/>
+                <ParsedCollapse json={layer.params} jsonKey='params' controller={controller}/>
             </StyledFormField>
         </Fragment>
     );
@@ -143,4 +144,4 @@ JsonTabPane.propTypes = {
     layer: PropTypes.object.isRequired,
     propertyFields: PropTypes.arrayOf(PropTypes.string).isRequired,
     controller: PropTypes.instanceOf(Controller).isRequired
-};
+};
diff --git a/...n-layereditor/view/AdminLayerForm/VisualizationTabPane/VectorStyle/OptionalStyleModal.jsx b/...n-layereditor/view/AdminLayerForm/VisualizationTabPane/VectorStyle/OptionalStyleModal.jsx
@@ -77,6 +77,25 @@ export const OptionalStyleModal = ({ vectorStyle, geometryType, controller, onCl
     };
     const add = () => setStyles([...styles, {}]);
     const propertyNames = properties.map(p => p.name);
+    const items = styles.map((optStyle, i) => {
+        const { property, AND, OR, ...styleDef } = optStyle;
+        const filterDef = { property, AND, OR }; // TODO: sets undefined values, ok??
+
+        return {
+            key: `style_${i}`,
+            label: getDescription(filterDef),
+            extra: <PanelExtra onRemove={() => remove(i)}/>,
+            children: <>
+                <Divider><Message messageKey='styles.vector.optionalStylesFilter' /></Divider>
+                <FeatureFilter filter={filterDef} types={properties} properties={propertyNames}
+                    onChange={ updated => update({ ...styleDef, ...updated }, i)}/>
+                <Divider><Message messageKey='styles.vector.featureStyle' /></Divider>
+                <StyleEditor geometryType={geometryType}
+                    oskariStyle={ Object.keys(styleDef).length ? styleDef : featureStyle }
+                    onChange={updated => update({ ...filterDef, ...updated }, i)}/>
+            </>
+        };
+    });
     return (
         <Modal
             destroyOnClose
@@ -90,24 +109,7 @@ export const OptionalStyleModal = ({ vectorStyle, geometryType, controller, onCl
             title={<Header onAdd={add} />}
             closeIcon={<Hidden onClick={e => e.stopPropagation()}/>}
             width={ 800 }>
-            <Collapse accordion>
-                { styles.map((optStyle, i) => {
-                    const { property, AND, OR, ...styleDef } = optStyle;
-                    const filterDef = { property, AND, OR }; // TODO: sets undefined values, ok??
-                    return (
-                        <CollapsePanel key={`style_${i}`}
-                            header={getDescription(filterDef)}
-                            extra={<PanelExtra onRemove={() => remove(i)}/>}>
-                            <Divider><Message messageKey='styles.vector.optionalStylesFilter' /></Divider>
-                            <FeatureFilter filter={filterDef} types={properties} properties={propertyNames}
-                                onChange={ updated => update({ ...styleDef, ...updated }, i)}/>
-                            <Divider><Message messageKey='styles.vector.featureStyle' /></Divider>
-                            <StyleEditor geometryType={geometryType}
-                                oskariStyle={ Object.keys(styleDef).length ? styleDef : featureStyle }
-                                onChange={updated => update({ ...filterDef, ...updated }, i)}/>
-                        </CollapsePanel>
-                    )})
-                }
+            <Collapse items={items}>
             </Collapse>
         </Modal>
     );

diff --git a/bundles/admin/admin-layereditor/view/ServiceEndPoint/CesiumIon.jsx b/bundles/admin/admin-layereditor/view/ServiceEndPoint/CesiumIon.jsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Message, Collapse, CollapsePanel } from 'oskari-ui';
+import { Message, Collapse } from 'oskari-ui';
 import { Controller } from 'oskari-ui/util';
 import { OptionInput } from './OptionInput';
 import { StyledFormField } from '../styled';
 
-export const CesiumIon = ({ layer, controller, defaultOpen = false }) => (
-    <Collapse defaultActiveKey={(layer.options.assetId || defaultOpen) ? 'open' : 'closed'}>
-        <CollapsePanel key='open' header={<Message messageKey='ion.title'/>} defaultOpen>
+export const CesiumIon = ({ layer, controller, defaultOpen = false }) => {
+    // defaultOpoen ?
+    const items = [{
+        key: 'open',
+        label: <Message messageKey='ion.title'/>,
+        children: <>
             <Message messageKey='ion.assetId' />
             <StyledFormField>
                 <OptionInput layer={layer} controller={controller} propKey='ionAssetId'/>
@@ -20,9 +23,10 @@ export const CesiumIon = ({ layer, controller, defaultOpen = false }) => (
             <StyledFormField>
                 <OptionInput layer={layer} controller={controller} propKey='ionAssetServer'/>
             </StyledFormField>
-        </CollapsePanel>
-    </Collapse>
-);
+        </>
+    }];
+    return <Collapse defaultActiveKey={(layer.options.assetId || defaultOpen) ? 'open' : 'closed'} items={items}/>;
+};
 CesiumIon.propTypes = {
     layer: PropTypes.object.isRequired,
     controller: PropTypes.instanceOf(Controller).isRequired,

diff --git a/bundles/framework/announcements/view/flyout/FlyoutCollapse.jsx b/bundles/framework/announcements/view/flyout/FlyoutCollapse.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Message, Collapse, CollapsePanel, Divider } from 'oskari-ui';
+import { Message, Collapse, Divider } from 'oskari-ui';
 import { AnnouncementsContent, CollapseTools } from '../';
 import { getDateRange } from '../../service/util';
 
@@ -13,23 +13,26 @@ export const FlyoutCollapse = ({
             <Message messageKey={'flyout.noAnnouncements'}/>
         );
     }
+    const items = announcements.map((announcement) => {
+        const { locale, id } = announcement;
+        const { title } = Oskari.getLocalized(locale);
+        const dateRange = getDateRange(announcement);
+
+        return {
+            key: announcement.id,
+            label: title,
+            extra: <CollapseTools toolController={toolController} announcementId={id}/>,
+            children: <>
+                <AnnouncementsContent announcement={announcement}/>
+                <Divider />
+                <b><Message messageKey={'valid'} /></b>
+                <p>{dateRange}</p>
+            </>
+        };
+    });
+
     return (
-        <Collapse accordion>
-            { announcements.map((announcement) => {
-                const { locale, id } = announcement;
-                const { title } = Oskari.getLocalized(locale);
-                const dateRange = getDateRange(announcement);
-                return (
-                    <CollapsePanel header={title} key={announcement.id}
-                        extra={<CollapseTools toolController={toolController} announcementId={id}/>}>
-                        <AnnouncementsContent announcement={announcement}/>
-                        <Divider />
-                        <b><Message messageKey={'valid'} /></b>
-                        <p>{dateRange}</p>
-                    </CollapsePanel>
-                );
-            })}
-        </Collapse>
+        <Collapse accordion items={items}/>
     );
 };
 

diff --git a/bundles/framework/featuredata/view/FilterVisibleColumns.jsx b/bundles/framework/featuredata/view/FilterVisibleColumns.jsx
@@ -57,7 +57,6 @@ export const FilterVisibleColumns = (props) => {
             options={options}
             defaultValue={visibleColumns}
             value={visibleColumns}
-            showArrow='true'
             tagRender={() => null}
             maxTagCount={0}
             maxTagPlaceholder={() => focused ? null : <BlurredMessage allColumns={allColumns} visibleColumns={visibleColumns} /> }