WrapperWidgetUI support externally controlled expanded attribute

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- WrapperWidgetUI support externally controlled `expanded` attribute [#375](https://github.com/CartoDB/carto-react/pull/375)
+
 ## 1.3
 
 ### 1.3.0-alpha.2 (2022-04-11)

packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js

@@ -50,6 +50,53 @@ describe('WrapperWidgetUI', () => {
       });
     });
 
+    describe('externally controlled `expanded` state', () => {
+      const onExpandedChange = jest.fn();
+      test('should obey `expanded=false` with `onExpandedChange` set', () => {
+        render(
+          <WrapperWidgetUI
+            expanded={false}
+            title={TITLE}
+            onExpandedChange={onExpandedChange}
+          >
+            <div>CONTENT</div>
+          </WrapperWidgetUI>
+        );
+        expect(screen.queryByText('CONTENT')).not.toBeInTheDocument();
+        expect(onExpandedChange).not.toBeCalled();
+      });
+
+      test('should attempt to close using `onExpandedChange`', async () => {
+        render(
+          <WrapperWidgetUI
+            expanded={true}
+            title={TITLE}
+            onExpandedChange={onExpandedChange}
+          >
+            <div>CONTENT</div>
+          </WrapperWidgetUI>
+        );
+        expect(screen.getByText('CONTENT')).toBeInTheDocument();
+        fireEvent.click(screen.getByText(TITLE));
+        expect(onExpandedChange).toBeCalledWith(false);
+      });
+
+      test('should attempt to open using `onExpandedChange', async () => {
+        render(
+          <WrapperWidgetUI
+            expanded={false}
+            title={TITLE}
+            onExpandedChange={onExpandedChange}
+          >
+            <div>CONTENT</div>
+          </WrapperWidgetUI>
+        );
+        expect(screen.queryByText('CONTENT')).not.toBeInTheDocument();
+        fireEvent.click(screen.getByText(TITLE));
+        expect(onExpandedChange).toBeCalledWith(true);
+      });
+    });
+
     describe('with options', () => {
       const NUMBER_OF_OPTIONS = 3;
       const OPTIONS = [...Array(NUMBER_OF_OPTIONS)].map((_, idx) => ({

packages/react-ui/src/types.d.ts

@@ -4,6 +4,8 @@ export type WrapperWidgetUI = {
   title: string;
   isLoading?: boolean;
   expandable?: boolean;
+  expanded?: boolean;
+  onExpandedChange?: (v: boolean) => void;
   actions?: { id: string; name: string; icon: React.ReactElement; action: Function }[];
   options?: { id: string; name: string; action: Function }[];
   children?: React.ReactNode;

packages/react-ui/src/widgets/WrapperWidgetUI.js

@@ -110,7 +110,14 @@ const useStyles = makeStyles((theme) => ({
 
 function WrapperWidgetUI(props) {
   const wrapper = createRef();
-  const [expanded, setExpanded] = useState(true);
+
+  const [expandedInt, setExpandedInt] = useState(true);
+  const externalExpanded =
+    typeof props.expanded === 'boolean' && typeof props.onExpandedChange === 'function';
+  const expanded =
+    props.expandable !== false ? (externalExpanded ? props.expanded : expandedInt) : true;
+  const setExpanded = externalExpanded ? props.onExpandedChange : setExpandedInt;
+
   const [anchorEl, setAnchorEl] = useState(null);
   const classes = useStyles({ ...props, expanded });
   const open = Boolean(anchorEl);
@@ -244,13 +251,16 @@ function WrapperWidgetUI(props) {
 }
 
 WrapperWidgetUI.defaultProps = {
+  expanded: true,
   expandable: true,
   isLoading: false
 };
 
 WrapperWidgetUI.propTypes = {
   title: PropTypes.string.isRequired,
   expandable: PropTypes.bool,
+  expanded: PropTypes.bool,
+  onExpandedChange: PropTypes.func,
   isLoading: PropTypes.bool,
   actions: PropTypes.arrayOf(
     PropTypes.shape({

packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js

@@ -47,6 +47,10 @@ export const Expandable = Template.bind({});
 const ExpandableProps = { title: 'Expandable', expandable: true };
 Expandable.args = ExpandableProps;
 
+export const NotExpanded = Template.bind({});
+const NotExpandedProps = { title: 'Not expanded/collapsed', expanded: false };
+NotExpanded.args = NotExpandedProps;
+
 export const NotExpandable = Template.bind({});
 const NotExpandableProps = { title: 'Not Expandable', expandable: false };
 NotExpandable.args = NotExpandableProps;