Commit 16cbb684 authored by XieZhiXiong's avatar XieZhiXiong

feat: 添加 ButtonSwitch 按钮切换组件

parent fc0a216f
.button-switch {
:global {
.ant-radio-button-wrapper:hover {
color: #6B778C;
}
.ant-radio-group-solid {
.ant-radio-button-wrapper-checked {
background: #6B778C;
border-color: #6B778C;
&:hover {
background: #6B778C;
border-color: #6B778C;
}
}
}
}
}
\ No newline at end of file
/*
* @Author: XieZhiXiong
* @Date: 2021-05-12 11:04:26
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-05-12 11:21:04
* @Description: 按钮切换器
*/
import React, { useState, useEffect } from 'react';
import { Radio } from 'antd';
import { RadioChangeEvent } from 'antd/lib/radio';
import styles from './index.less';
export interface OptionItem {
/**
* 名称
*/
label: string,
/**
* 值
*/
value: any,
}
interface IProps {
/**
* 数据
*/
options: OptionItem[],
/**
* 按钮切换触发事件
*/
onChange?: (value: any) => void,
/**
* 值
*/
value?: any,
}
const ButtonSwitch: React.FC<IProps> = (props: IProps) => {
const {
options,
onChange,
value,
} = props;
const first = options.length ? options[0].value : '';
const [radioValue, setRadioValue] = useState(first);
useEffect(() => {
if ('value' in props) {
setRadioValue(value);
}
}, [value]);
const triggerChange = (next: any) => {
if (onChange) {
onChange(next);
}
};
const handleRadioChange = (e: RadioChangeEvent) => {
if (!('value' in props)) {
setRadioValue(e.target.value);
return;
}
triggerChange(e.target.value);
};
return (
<div className={styles['button-switch']}>
<Radio.Group
options={options}
onChange={handleRadioChange}
value={radioValue}
optionType="button"
buttonStyle="solid"
size="small"
/>
</div>
);
};
ButtonSwitch.defaultProps = {
onChange: undefined,
};
export default ButtonSwitch;
.flow-records {
:global {
.ant-radio-button-wrapper:hover {
color: #6B778C;
}
.ant-radio-group-solid {
.ant-radio-button-wrapper-checked {
background: #6B778C;
border-color: #6B778C;
&:hover {
background: #6B778C;
border-color: #6B778C;
}
}
}
}
}
\ No newline at end of file
import React, { useEffect, useState } from 'react';
import {
Tabs,
Badge,
Radio,
} from 'antd';
import { RadioChangeEvent } from 'antd/lib/radio';
import PolymericTable from '@/components/PolymericTable';
import { EditableColumns } from '@/components/PolymericTable/interface';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import StatusTag from '@/components/StatusTag';
import ButtonSwitch from '@/components/ButtonSwitch';
import styles from './index.less';
export interface InnerHistoryItem {
......@@ -219,8 +217,7 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
});
};
const handleRadioChange = (e: RadioChangeEvent) => {
const { value } = e.target;
const handleRadioChange = (value: ('inner' | 'outer')) => {
setRadioValue(value);
};
......@@ -245,16 +242,12 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
<MellowCard
title="流转记录"
extra={(
<Radio.Group
<ButtonSwitch
options={options}
onChange={handleRadioChange}
value={radioValue}
optionType="button"
buttonStyle="solid"
size="small"
/>
)}
className={styles['flow-records']}
{...rest}
>
{outerData.data && outerData.data.length > 0 ? (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment