Merge pull request #38 from szhsin/feat/controlled

feat: controlled accordion
szhsin · Jul 22, 2022 · 781f607 · 781f607
2 parents 1665e84 + 4aed443
commit 781f607
Show file tree

Hide file tree

Showing 22 changed files with 310 additions and 186 deletions.
diff --git a/dist/cjs/index.js b/dist/cjs/index.js
@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var react = require('react');
 var reactTransitionState = require('react-transition-state');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _extends() {
@@ -38,6 +38,33 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var _excluded$3 = ["allowMultiple", "transition", "transitionTimeout"];
+
+var getTransition = function getTransition(transition, name) {
+  return transition === true || !!(transition && transition[name]);
+};
+
+var useAccordionProvider = function useAccordionProvider(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      allowMultiple = _ref.allowMultiple,
+      transition = _ref.transition,
+      transitionTimeout = _ref.transitionTimeout,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+  var transitionMap = reactTransitionState.useTransitionMap(_extends({
+    singleEnter: !allowMultiple,
+    timeout: transitionTimeout,
+    enter: getTransition(transition, 'enter'),
+    exit: getTransition(transition, 'exit'),
+    preEnter: getTransition(transition, 'preEnter'),
+    preExit: getTransition(transition, 'preExit')
+  }, rest));
+  return _extends({
+    mountOnEnter: !!rest.mountOnEnter,
+    initialEntered: !!rest.initialEntered
+  }, transitionMap);
+};
+
 var ACCORDION_BLOCK = 'szh-accordion';
 var ACCORDION_PREFIX = 'szh-adn';
 var ACCORDION_ATTR = "data-" + ACCORDION_PREFIX;
@@ -62,34 +89,8 @@ var bem = function bem(block, element, modifiers, className, addModifier) {
   return classString;
 };
 
-var _excluded$2 = ["allowMultiple", "transition", "transitionTimeout", "children"];
-
-var getTransition = function getTransition(transition, name) {
-  return transition === true || !!(transition && transition[name]);
-};
-
-var AccordionProvider = function AccordionProvider(_ref) {
-  var allowMultiple = _ref.allowMultiple,
-      transition = _ref.transition,
-      transitionTimeout = _ref.transitionTimeout,
-      children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
-  var transitionMap = reactTransitionState.useTransitionMap(_extends({
-    singleEnter: !allowMultiple,
-    timeout: transitionTimeout,
-    enter: getTransition(transition, 'enter'),
-    exit: getTransition(transition, 'exit'),
-    preEnter: getTransition(transition, 'preEnter'),
-    preExit: getTransition(transition, 'preExit')
-  }, rest));
-  return /*#__PURE__*/jsxRuntime.jsx(AccordionContext.Provider, {
-    value: _extends({
-      mountOnEnter: rest.mountOnEnter,
-      initialEntered: rest.initialEntered
-    }, transitionMap),
-    children: children
-  });
+var AccordionProvider = function AccordionProvider(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(AccordionContext.Provider, _extends({}, props));
 };
 
 var getAccordion = function getAccordion(node) {
@@ -140,11 +141,28 @@ var useAccordion = function useAccordion() {
   };
 };
 
-var _excluded$1 = ["className", "allowMultiple", "initialEntered", "mountOnEnter", "unmountOnExit", "transition", "transitionTimeout", "onStateChange"];
+var _excluded$2 = ["providerValue", "className"];
+
+var ControlledAccordion = function ControlledAccordion(_ref) {
+  var providerValue = _ref.providerValue,
+      className = _ref.className,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  var _useAccordion = useAccordion(),
+      accordionProps = _useAccordion.accordionProps;
+
+  return /*#__PURE__*/jsxRuntime.jsx(AccordionProvider, {
+    value: providerValue,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", _extends({}, rest, accordionProps, {
+      className: bem(ACCORDION_BLOCK, undefined, undefined, className)
+    }))
+  });
+};
+
+var _excluded$1 = ["allowMultiple", "initialEntered", "mountOnEnter", "unmountOnExit", "transition", "transitionTimeout", "onStateChange"];
 
 var Accordion = function Accordion(_ref) {
-  var className = _ref.className,
-      allowMultiple = _ref.allowMultiple,
+  var allowMultiple = _ref.allowMultiple,
       initialEntered = _ref.initialEntered,
       mountOnEnter = _ref.mountOnEnter,
       unmountOnExit = _ref.unmountOnExit,
@@ -153,21 +171,18 @@ var Accordion = function Accordion(_ref) {
       onStateChange = _ref.onStateChange,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-  var _useAccordion = useAccordion(),
-      accordionProps = _useAccordion.accordionProps;
-
-  return /*#__PURE__*/jsxRuntime.jsx(AccordionProvider, {
+  var providerValue = useAccordionProvider({
     allowMultiple: allowMultiple,
     initialEntered: initialEntered,
     mountOnEnter: mountOnEnter,
     unmountOnExit: unmountOnExit,
     transition: transition,
     transitionTimeout: transitionTimeout,
-    onStateChange: onStateChange,
-    children: /*#__PURE__*/jsxRuntime.jsx("div", _extends({}, rest, accordionProps, {
-      className: bem(ACCORDION_BLOCK, undefined, undefined, className)
-    }))
+    onStateChange: onStateChange
   });
+  return /*#__PURE__*/jsxRuntime.jsx(ControlledAccordion, _extends({}, rest, {
+    providerValue: providerValue
+  }));
 };
 
 var current = 0;
@@ -362,4 +377,5 @@ var AccordionItem = function AccordionItem(_ref) {
 
 exports.Accordion = Accordion;
 exports.AccordionItem = AccordionItem;
-exports.useAccordionItem = useAccordionItem;
+exports.ControlledAccordion = ControlledAccordion;
+exports.useAccordionProvider = useAccordionProvider;
diff --git a/dist/es/components/Accordion.js b/dist/es/components/Accordion.js
@@ -1,15 +1,12 @@
 import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { ACCORDION_BLOCK } from '../utils/constants.js';
-import { bem } from '../utils/bem.js';
-import { AccordionProvider } from './AccordionProvider.js';
-import { useAccordion } from '../hooks/useAccordion.js';
+import { useAccordionProvider } from '../hooks/useAccordionProvider.js';
+import { ControlledAccordion } from './ControlledAccordion.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["className", "allowMultiple", "initialEntered", "mountOnEnter", "unmountOnExit", "transition", "transitionTimeout", "onStateChange"];
+var _excluded = ["allowMultiple", "initialEntered", "mountOnEnter", "unmountOnExit", "transition", "transitionTimeout", "onStateChange"];
 
 var Accordion = function Accordion(_ref) {
-  var className = _ref.className,
-      allowMultiple = _ref.allowMultiple,
+  var allowMultiple = _ref.allowMultiple,
       initialEntered = _ref.initialEntered,
       mountOnEnter = _ref.mountOnEnter,
       unmountOnExit = _ref.unmountOnExit,
@@ -18,21 +15,18 @@ var Accordion = function Accordion(_ref) {
       onStateChange = _ref.onStateChange,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var _useAccordion = useAccordion(),
-      accordionProps = _useAccordion.accordionProps;
-
-  return /*#__PURE__*/jsx(AccordionProvider, {
+  var providerValue = useAccordionProvider({
     allowMultiple: allowMultiple,
     initialEntered: initialEntered,
     mountOnEnter: mountOnEnter,
     unmountOnExit: unmountOnExit,
     transition: transition,
     transitionTimeout: transitionTimeout,
-    onStateChange: onStateChange,
-    children: /*#__PURE__*/jsx("div", _extends({}, rest, accordionProps, {
-      className: bem(ACCORDION_BLOCK, undefined, undefined, className)
-    }))
+    onStateChange: onStateChange
   });
+  return /*#__PURE__*/jsx(ControlledAccordion, _extends({}, rest, {
+    providerValue: providerValue
+  }));
 };
 
 export { Accordion };
diff --git a/dist/es/components/AccordionProvider.js b/dist/es/components/AccordionProvider.js
@@ -1,36 +1,9 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { useTransitionMap } from 'react-transition-state';
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { AccordionContext } from '../utils/constants.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["allowMultiple", "transition", "transitionTimeout", "children"];
-
-var getTransition = function getTransition(transition, name) {
-  return transition === true || !!(transition && transition[name]);
-};
-
-var AccordionProvider = function AccordionProvider(_ref) {
-  var allowMultiple = _ref.allowMultiple,
-      transition = _ref.transition,
-      transitionTimeout = _ref.transitionTimeout,
-      children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var transitionMap = useTransitionMap(_extends({
-    singleEnter: !allowMultiple,
-    timeout: transitionTimeout,
-    enter: getTransition(transition, 'enter'),
-    exit: getTransition(transition, 'exit'),
-    preEnter: getTransition(transition, 'preEnter'),
-    preExit: getTransition(transition, 'preExit')
-  }, rest));
-  return /*#__PURE__*/jsx(AccordionContext.Provider, {
-    value: _extends({
-      mountOnEnter: rest.mountOnEnter,
-      initialEntered: rest.initialEntered
-    }, transitionMap),
-    children: children
-  });
+var AccordionProvider = function AccordionProvider(props) {
+  return /*#__PURE__*/jsx(AccordionContext.Provider, _extends({}, props));
 };
 
 export { AccordionProvider };
diff --git a/dist/es/components/ControlledAccordion.js b/dist/es/components/ControlledAccordion.js
@@ -0,0 +1,26 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { ACCORDION_BLOCK } from '../utils/constants.js';
+import { bem } from '../utils/bem.js';
+import { AccordionProvider } from './AccordionProvider.js';
+import { useAccordion } from '../hooks/useAccordion.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["providerValue", "className"];
+
+var ControlledAccordion = function ControlledAccordion(_ref) {
+  var providerValue = _ref.providerValue,
+      className = _ref.className,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useAccordion = useAccordion(),
+      accordionProps = _useAccordion.accordionProps;
+
+  return /*#__PURE__*/jsx(AccordionProvider, {
+    value: providerValue,
+    children: /*#__PURE__*/jsx("div", _extends({}, rest, accordionProps, {
+      className: bem(ACCORDION_BLOCK, undefined, undefined, className)
+    }))
+  });
+};
+
+export { ControlledAccordion };
diff --git a/dist/es/hooks/useAccordionProvider.js b/dist/es/hooks/useAccordionProvider.js
@@ -0,0 +1,31 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useTransitionMap } from 'react-transition-state';
+
+var _excluded = ["allowMultiple", "transition", "transitionTimeout"];
+
+var getTransition = function getTransition(transition, name) {
+  return transition === true || !!(transition && transition[name]);
+};
+
+var useAccordionProvider = function useAccordionProvider(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      allowMultiple = _ref.allowMultiple,
+      transition = _ref.transition,
+      transitionTimeout = _ref.transitionTimeout,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var transitionMap = useTransitionMap(_extends({
+    singleEnter: !allowMultiple,
+    timeout: transitionTimeout,
+    enter: getTransition(transition, 'enter'),
+    exit: getTransition(transition, 'exit'),
+    preEnter: getTransition(transition, 'preEnter'),
+    preExit: getTransition(transition, 'preExit')
+  }, rest));
+  return _extends({
+    mountOnEnter: !!rest.mountOnEnter,
+    initialEntered: !!rest.initialEntered
+  }, transitionMap);
+};
+
+export { useAccordionProvider };
diff --git a/dist/es/hooks/useAccordionState.js b/dist/es/hooks/useAccordionState.js
@@ -0,0 +1,31 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useTransitionMap } from 'react-transition-state';
+
+var _excluded = ["allowMultiple", "transition", "transitionTimeout"];
+
+var getTransition = function getTransition(transition, name) {
+  return transition === true || !!(transition && transition[name]);
+};
+
+var useAccordionState = function useAccordionState(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      allowMultiple = _ref.allowMultiple,
+      transition = _ref.transition,
+      transitionTimeout = _ref.transitionTimeout,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var transitionMap = useTransitionMap(_extends({
+    singleEnter: !allowMultiple,
+    timeout: transitionTimeout,
+    enter: getTransition(transition, 'enter'),
+    exit: getTransition(transition, 'exit'),
+    preEnter: getTransition(transition, 'preEnter'),
+    preExit: getTransition(transition, 'preExit')
+  }, rest));
+  return _extends({
+    mountOnEnter: !!rest.mountOnEnter,
+    initialEntered: !!rest.initialEntered
+  }, transitionMap);
+};
+
+export { useAccordionState };
diff --git a/dist/es/index.js b/dist/es/index.js
@@ -1,3 +1,4 @@
 export { Accordion } from './components/Accordion.js';
+export { ControlledAccordion } from './components/ControlledAccordion.js';
 export { AccordionItem } from './components/AccordionItem.js';
-export { useAccordionItem } from './hooks/useAccordionItem.js';
+export { useAccordionProvider } from './hooks/useAccordionProvider.js';
diff --git a/example/pages/index.tsx b/example/pages/index.tsx
@@ -1,7 +1,13 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import { useRef, useEffect } from 'react';
-import { Accordion, AccordionItem as Item, AccordionItemProps } from '@szhsin/react-accordion';
+import {
+  Accordion,
+  AccordionItem as Item,
+  AccordionItemProps,
+  ControlledAccordion,
+  useAccordionProvider
+} from '@szhsin/react-accordion';
 import styles from '../styles/Home.module.css';
 
 const AccordionItem = (props: AccordionItemProps) => (
@@ -13,6 +19,13 @@ const AccordionItem = (props: AccordionItemProps) => (
 );
 
 const Home: NextPage = () => {
+  const providerValue = useAccordionProvider({
+    transition: true,
+    transitionTimeout: 300,
+    onStateChange: (e) =>
+      e.key === 'key1' && e.current.isResolved && console.log('state changed:', e.current.state)
+  });
+  const { toggle } = providerValue;
   const ref = useRef<HTMLHeadingElement>(null);
   useEffect(() => {
     console.log('ref', ref);
@@ -26,16 +39,15 @@ const Home: NextPage = () => {
       </Head>
 
       <main className={styles.main}>
-        <Accordion
-          transition
-          transitionTimeout={300}
+        <div style={{ marginBottom: '2rem' }}>
+          <button onClick={() => toggle('key1')}>Toggle 1</button>
+          <button onClick={() => toggle(3, true)}>Open 3</button>
+          <button onClick={() => toggle(3, false)}>Close 3</button>
+        </div>
+        <ControlledAccordion
+          providerValue={providerValue}
           id="ac1"
           onMouseLeave={() => console.log('mouse leave accordion')}
-          onStateChange={(e) =>
-            e.key === 'key1' &&
-            e.current.isResolved &&
-            console.log('state changed:', e.current.state)
-          }
         >
           <AccordionItem
             headerProps={{
@@ -73,7 +85,7 @@ const Home: NextPage = () => {
             </Accordion>
             <button>more</button>
           </AccordionItem>
-        </Accordion>
+        </ControlledAccordion>
       </main>
 
       <footer className={styles.footer}></footer>