import { BfExpandableCard } from '@bud-fe/react-taro-ui';
import { View } from '@tarojs/components';
import React, { useState } from 'react';

export default () => {
  const [h, setH] = useState<string | number>('auto');
  // const cardRef = useRef<IBfExpandableCardInstance>(null);

  return (
    <>
      <View>基本用法 </View>
      <BfExpandableCard
        // ref={cardRef}
        collapsedHeight={40}
        expandedHeightOffset={200}
        onClick={() => {
          console.log('outer onClick');
        }}
        onExpand={(expanded) => {
          console.log('onExpand', expanded);
        }}
      >
        <View>AAAAAAAAAAAA</View>
        <View>AAAAAAAAAAAA</View>
        <View
          style={{ height: h }}
          onClick={() => {
            // cardRef.current?.measureChildHeight();
            setH(200);
          }}
        >
          BBBBBBBBBBBB
        </View>
        <View>BBBBBBBBBBBB</View>
        <View>CCCCCCCCCCCC</View>
        <View>CCCCCCCCCCCC</View>
      </BfExpandableCard>

      <View>不显示收起按钮 </View>
      <BfExpandableCard collapsible={false}>
        <View>AAAAAAAAAAAA</View>
        <View>AAAAAAAAAAAA</View>
        <View>BBBBBBBBBBBB</View>
        <View>BBBBBBBBBBBB</View>
        <View>CCCCCCCCCCCC</View>
        <View>CCCCCCCCCCCC</View>
      </BfExpandableCard>
    </>
  );
};