feat: 添加 ButtonTabs Radio.Button 选项卡组件

src/components/ButtonTabs/ButtonTabs.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-15 17:13:25
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-15 17:19:58
+ * @Description: Radio.Button 选项卡
+ */
+import React, { useEffect, useState } from 'react';
+import { ButtonTabsProps, KeyType } from './interface';
+import { ButtonTabsContextProvider } from './context';
+import ButtonSwitch from '../ButtonSwitch';
+import MellowCard from '../MellowCard';
+
+const ButtonTabs: React.FC<ButtonTabsProps> = (props) => {
+  const {
+    options = [],
+    onChange = undefined,
+    value,
+    size = 'small',
+    extra,
+    defaultValue,
+    children,
+  } = props;
+  const initValue = 'value' in props ? props.value : defaultValue;
+  const [switchValue, setSwitchValue] = useState<KeyType>(initValue);
+
+  useEffect(() => {
+    if ('value' in props) {
+      setSwitchValue(value);
+    }
+  }, [value]);
+
+  const triggerChange = (next: KeyType) => {
+    if (onChange) {
+      onChange(next);
+    }
+  };
+
+  const handleButtonSwitchChange = (next: KeyType) => {
+    if (!('value' in props)) {
+      setSwitchValue(next);
+    }
+    triggerChange(next);
+  };
+
+  return (
+    <MellowCard
+      title={extra}
+      extra={(
+        <ButtonSwitch
+          options={options}
+          onChange={handleButtonSwitchChange}
+          value={switchValue}
+          size={size}
+        />
+      )}
+    >
+      <ButtonTabsContextProvider
+        value={{
+          current: switchValue,
+        }}
+      >
+        {children}
+      </ButtonTabsContextProvider>
+    </MellowCard>
+  );
+};
+
+export default ButtonTabs;

src/components/ButtonTabs/ButtonTabsItem.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-07-05 17:08:26
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-07-05 18:06:08
+ * @Description: 
+ */
+import React from 'react';
+import { ButtonTabsItemProps } from './interface';
+import ButtonTabsContext from './context';
+
+const ButtonTabsItem: React.FC<ButtonTabsItemProps> = (props) => {
+  const { activeKey, children, style, ...rest } = props;
+  
+  const context = React.useContext(ButtonTabsContext);
+
+  return (
+    <div
+      {...rest}
+      key={activeKey}
+      style={{
+        ...style,
+        display: context.current === activeKey ? 'block' : 'none',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default ButtonTabsItem;

src/components/ButtonTabs/context.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-07-05 17:30:25
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-07-05 17:30:25
+ * @Description: 
+ */
+import * as React from 'react';
+import { ButtonTabsContextProps } from './interface';
+
+const ButtonTabsContext = React.createContext<ButtonTabsContextProps | null>(null);
+
+export const ButtonTabsContextProvider = ButtonTabsContext.Provider;
+
+export default ButtonTabsContext;
\ No newline at end of file

src/components/ButtonTabs/index.tsx

 /*
  * @Author: XieZhiXiong
- * @Date: 2021-06-15 17:13:25
+ * @Date: 2021-07-05 17:10:21
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-15 17:19:58
- * @Description: Radio.Button 选项卡
+ * @LastEditTime: 2021-07-05 17:10:21
+ * @Description: 
  */
-import React from 'react';
-import ButtonSwitch, { ButtonSwitchProps } from '../ButtonSwitch';
-import styles from './index.less';
+import * as React from 'react';
+import InternalButtonTabs from './ButtonTabs';
+import Item from './ButtonTabsItem';
+import {
+  ButtonTabsProps,
+} from './interface';
 
-interface IProps extends ButtonSwitchProps {
-  
+export * from './interface';
+
+interface CompoundedComponent extends React.ForwardRefExoticComponent<ButtonTabsProps> {
+  Item: typeof Item;
 }
 
-const ButtonTabs: React.FC = () => {
-  return (
-    <div className={styles['button-tabs']}>
-      <div className={styles['button-tabs-head']}>
-        <div className={styles['button-tabs-head-extra']}>
-          我是拓展
-        </div>
-        <div className={styles['button-tabs-head-nav']}>
-          我是拓展
-        </div>
-      </div>
-    </div>
-  );
+const ButtonTabs = InternalButtonTabs as CompoundedComponent;
+ButtonTabs.Item = Item;
+export {
+  Item,
 };
-
-export default ButtonTabs;
+export default ButtonTabs;
\ No newline at end of file

src/components/ButtonTabs/interface.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-07-05 17:06:56
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-07-05 17:06:57
+ * @Description: 
+ */
+import { HTMLAttributes } from 'react';
+import { ButtonSwitchProps } from '../ButtonSwitch';
+import { MellowCardProps } from '../MellowCard';
+
+export type KeyType = string | number;
+
+export interface ButtonTabsItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * 标识
+   */
+  activeKey: KeyType,
+
+  children?: React.ReactNode,
+}
+
+export interface ButtonTabsProps extends ButtonSwitchProps, Omit<MellowCardProps, 'extra' | 'onChange' | 'size'> {
+  /**
+   * 头部左侧自定义拓展
+   */
+  extra?: React.ReactNode,
+  /**
+   * 默认值
+   */
+  defaultValue?: KeyType,
+
+  children?: React.ReactNode,
+}
+
+export interface ButtonTabsContextProps {
+  current: KeyType;
+}
\ No newline at end of file