Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(toggles): add checked control what toggles's status change #581

Merged
merged 19 commits into from
Dec 16, 2020
Merged

fix(toggles): add checked control what toggles's status change #581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
3ef2a9d
Merge pull request #1 from growingio/master
Aug 12, 2020
d8231ea
Merge pull request #2 from growingio/master
Aug 21, 2020
b348ef0
Merge pull request #3 from growingio/master
Sep 24, 2020
2be98c9
Merge pull request #4 from growingio/master
Sep 25, 2020
7845a71
Merge pull request #5 from growingio/master
Dec 2, 2020
69dec42
[toggle]fix: 当toggledisable为true时,依然可以触发onChange事件
Dec 2, 2020
47ab4d9
fix: toggle通过checked指示当前是否选中,以及修改toggle样式,垂直水平居中
Dec 3, 2020
2cc5576
fix: 添加toggles 部分props参数默认值
Dec 4, 2020
c29cbef
Merge pull request #6 from growingio/master
Dec 4, 2020
3d135fe
Merge branch 'master' of github.com:growingio/gio-design
Dec 4, 2020
663125a
fix: toggles 添加checked默认值
Dec 4, 2020
c74e105
fix: modify test
Dec 4, 2020
617e76a
Merge branch 'master' of github.com:Danny548326/gio-design
Dec 4, 2020
976e79d
Merge branch 'master' into master
jack0pan Dec 7, 2020
a76bfeb
Merge branch 'master' into master
jack0pan Dec 7, 2020
9f06021
fix: fix: styleLint fix
Dec 7, 2020
851c59a
Merge branch 'master' of github.com:Danny548326/gio-design
Dec 7, 2020
217cacd
fix: style lint error
Dec 15, 2020
0c0c4e2
Merge branch 'master' into master
jack0pan Dec 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/src/components/toggles/__test__/toggles.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,6 @@ describe('Testing Toggles', () => {
const wrapper = mount(<Toggles defaultChecked suffixContent />);
// expect(wrapper.find('.suffixContent').text()).to.equals('开');
expect(wrapper.exists('.gio-toggles-suffixContent')).toBe(true);
expect(wrapper.find('.gio-toggles-suffixContent').text()).toEqual('开');
expect(wrapper.find('.gio-toggles-suffixContent').text()).toEqual('关');
});
});
4 changes: 4 additions & 0 deletions packages/components/src/components/toggles/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,8 @@ export interface TogglesProps {
`switch` 关闭时的背景色
*/
inactiveColor?: string;
/**
Toggles控制字段
*/
checked?: boolean;
}
89 changes: 46 additions & 43 deletions packages/components/src/components/toggles/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,55 +2,58 @@

@toggles-prefix-cls: ~'@{component-prefix}-toggles';

.@{toggles-prefix-cls} {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
background-color: @color-background-toggles-off-normal;
border: @color-border-toggles-normal-default;
border-radius: 10px;
box-shadow: @shadow-toggles-normal-unchecked-rectangle;
cursor: pointer;
transition: all ease 0.4s;

.@{toggles-prefix-cls}-handle {
position: absolute;
left: 0;
width: 14px;
height: 14px;
margin: 2px;
background-color: @color-background-toggles-knob-off-normal;
border-radius: @radius-border-pill;
box-shadow: @shadow-toggles-normal-unchecked-knob;
.@{toggles-prefix-cls}-normal {
vertical-align: middle;
.@{toggles-prefix-cls} {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
vertical-align: middle;
background-color: @color-background-toggles-off-normal;
border: @color-border-toggles-normal-default;
border-radius: 10px;
box-shadow: @shadow-toggles-normal-unchecked-rectangle;
cursor: pointer;
transition: all ease 0.4s;

.@{toggles-prefix-cls}-handle {
position: absolute;
left: 0;
width: 14px;
height: 14px;
margin: 2px;
background-color: @color-background-toggles-knob-off-normal;
border-radius: @radius-border-pill;
box-shadow: @shadow-toggles-normal-unchecked-knob;
transition: all ease 0.4s;
}
}
}

.@{toggles-prefix-cls}-checked {
background-color: @color-background-toggles-on-normal;
border: @color-border-toggles-normal-checked;
box-shadow: none;
.@{toggles-prefix-cls}-handle {
left: 100%;
margin-left: -16px;
background-color: @color-background-toggles-knob-on-normal;
box-shadow: @shadow-toggles-normal-checked-knob;
.@{toggles-prefix-cls}-checked {
background-color: @color-background-toggles-on-normal;
border: @color-border-toggles-normal-checked;
box-shadow: none;
.@{toggles-prefix-cls}-handle {
left: 100%;
margin-left: -16px;
background-color: @color-background-toggles-knob-on-normal;
box-shadow: @shadow-toggles-normal-checked-knob;
}
}
}

.@{toggles-prefix-cls}-suffixContent {
display: inline-block;
height: 20px;
margin-left: 8px;
color: @color-text-toggles-normal;
font-size: @size-font-14;
font-family: @font-family-primary;
line-height: 20px;
vertical-align: top;
user-select: none;
.@{toggles-prefix-cls}-suffixContent {
display: inline-block;
height: 20px;
margin-left: 8px;
color: @color-text-toggles-normal;
font-size: @size-font-14;
font-family: @font-family-primary;
line-height: 20px;
vertical-align: top;
user-select: none;
}
}

.@{toggles-prefix-cls}-disabled {
.@{toggles-prefix-cls} {
background-color: @color-background-toggles-off-disable;
Expand Down
29 changes: 18 additions & 11 deletions packages/components/src/components/toggles/toggles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,41 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import classnames from 'classnames';
import usePrefixCls from '../../utils/hooks/use-prefix-cls';
import { TogglesProps } from './interface';

const Toggles: React.FC<TogglesProps> = (props) => {
const {
activeColor,
inactiveValue,
inactiveValue = false,
inactiveColor,
activeValue,
defaultChecked,
activeValue = true,
defaultChecked = false,
checked = false,
disabled,
className,
suffixContent,
} = props;
const prefixCls = usePrefixCls('toggles');

const inactiveValues = inactiveValue || false;
const activeValues = activeValue || true;
const inactiveValues = inactiveValue;
const activeValues = activeValue;

const [status, setStatus] = useState(defaultChecked || false);
const [status, setStatus] = useState(defaultChecked);

useEffect(() => {
setStatus(checked)
}, [checked])

const changeStatus = () => {
!props.disabled && setStatus(!status);
props.onChange && props.onChange(status ? inactiveValues : activeValues);
props.onClick && props.onClick(status ? inactiveValues : activeValues);
if (!disabled) {
setStatus(!status);
props.onChange && props.onChange(status ? inactiveValues : activeValues);
props.onClick && props.onClick(status ? inactiveValues : activeValues);
}
};

return (
<div className={classnames({ [`${prefixCls}-disabled`]: disabled })}>
<div className={classnames({ [`${prefixCls}-disabled`]: disabled },`${prefixCls}-normal`)}>
<div
className={classnames(prefixCls, { [`${prefixCls}-checked`]: status }, className)}
style={{ background: status ? activeColor : inactiveColor, borderColor: activeColor }}
Expand Down
2 changes: 1 addition & 1 deletion packages/website/src/components/basic/toggles/demo/toggles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@ export default () => {
console.log('change-test', val);
console.log('fhsihfisd', status);
};
return <Toggles onChange={change} checked={status.a} />;
return <Toggles onChange={change} defaultChecked={status.a} />;
};
1 change: 1 addition & 0 deletions packages/website/src/components/basic/toggles/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ group:
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | --------------------- | ---------------- | ------- |
| defaultChecked | 初始是否选中 | boolean | false |
| checked | 指定当前是否选中 | boolean | false |
| disabled | 失效状态 | boolean | false |
| className | 自定义 className | string | - |
| activeColor | switch 打开时的背景色 | string | #3867f4 |
Expand Down