zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-22 22:44:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] Switch support for custom colors when disabled

Browse Source 
Close #2164
Fix #1758
This commit is contained in:
meenu
2021-11-09 17:25:52 +05:30
committed by Nicolas Gallagher
parent d21c401620
commit 944b45cd0b
4 changed files with 153 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/examples/pages/switch/index.js
+8
View File
@@ -24,6 +24,14 @@ export default function SwitchPage() {
<Switch disabled={true} value={false} />
<Divider />
<Switch disabled={true} value={true} />
<Divider />
<Switch activeThumbColor="#fff" activeTrackColor="#E0245E" disabled={true} value={true} />
<Divider />
<Switch disabled={true} thumbColor="#fff" trackColor="#E0245E" value={false} />
<Divider />
<Switch disabled={true} trackColor={{ true: '#E0245E', false: '#1DA1F2' }} value={false} />
<Divider />
<Switch disabled={true} trackColor={{ true: '#E0245E', false: '#1DA1F2' }} value={true} />
</View>
<View style={styles.row}>
<Switch value={false} />
packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap
+43
View File
@@ -0,0 +1,43 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided false value of trackColor 1`] = `
<div
class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
style="background-color: rgb(29, 161, 242); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
/>
`;
exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided thumbColor 1`] = `
<div
class="css-view-1dbjc4n r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-1fe0xdi r-transform-1sncvnh r-transitionDuration-13tjlyg"
style="background-color: rgb(255, 255, 255); height: 20px; margin-left: 0px; width: 20px;"
/>
`;
exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided trackColor 1`] = `
<div
class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
style="background-color: rgb(224, 36, 94); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
/>
`;
exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor 1`] = `
<div
class="css-view-1dbjc4n r-alignSelf-k200y r-borderRadius-1j16mh1 r-boxShadow-1ewcgjf r-forcedColorAdjust-1c6unfx r-left-7b7h2f r-transform-1sncvnh r-transitionDuration-13tjlyg"
style="background-color: rgb(255, 255, 255); height: 20px; margin-left: -20px; width: 20px;"
/>
`;
exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeTrackColor 1`] = `
<div
class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
style="background-color: rgb(224, 36, 94); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
/>
`;
exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided true value of trackColor 1`] = `
<div
class="css-view-1dbjc4n r-bottom-1p0dtai r-forcedColorAdjust-1c6unfx r-height-1dernwh r-left-1d2f490 r-margin-ywje51 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-transitionDuration-13tjlyg r-width-13qz1uu"
style="background-color: rgb(224, 36, 94); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"
/>
`;
packages/react-native-web/src/exports/Switch/__tests__/index-test.js
Vendored
+42
View File
@@ -8,6 +8,14 @@ function findCheckbox(container) {
return container.firstChild.querySelector('input');
}
function findSwitchTrack(container) {
return container.firstChild.querySelector('div');
}
function findSwitchThumb(container) {
return container.firstChild.childNodes[1];
}
describe('components/Switch', () => {
test('accessibilityLabel is applied to native checkbox', () => {
const { container } = render(<Switch accessibilityLabel="switch" />);
@@ -24,6 +32,40 @@ describe('components/Switch', () => {
const { container } = render(<Switch disabled />);
expect(findCheckbox(container).disabled).toBe(true);
});
test('when "true" and value="true", a disabled checkbox is rendered with provided activeTrackColor', () => {
const { container } = render(<Switch activeTrackColor="#E0245E" disabled value={true} />);
expect(findSwitchTrack(container)).toMatchSnapshot();
});
test('when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor', () => {
const { container } = render(<Switch activeThumbColor="#fff" disabled value={true} />);
expect(findSwitchThumb(container)).toMatchSnapshot();
});
test('when "true" and value="false", a disabled checkbox is rendered with provided trackColor', () => {
const { container } = render(<Switch disabled trackColor="#E0245E" value={false} />);
expect(findSwitchTrack(container)).toMatchSnapshot();
});
test('when "true" and value="false", a disabled checkbox is rendered with provided thumbColor', () => {
const { container } = render(<Switch disabled thumbColor="#fff" value={false} />);
expect(findSwitchThumb(container)).toMatchSnapshot();
});
test('when "true" and value="true", a disabled checkbox is rendered with provided true value of trackColor', () => {
const { container } = render(
<Switch disabled={true} trackColor={{ true: '#E0245E', false: '#1DA1F2' }} value={true} />
);
expect(findSwitchTrack(container)).toMatchSnapshot();
});
test('when "true" and value="false", a disabled checkbox is rendered with provided false value of trackColor', () => {
const { container } = render(
<Switch disabled={true} trackColor={{ true: '#E0245E', false: '#1DA1F2' }} value={false} />
);
expect(findSwitchTrack(container)).toMatchSnapshot();
});
});
describe('onValueChange', () => {
packages/react-native-web/src/exports/Switch/index.js
Vendored
+60 -9
View File
@@ -31,19 +31,27 @@ const emptyObject = {};
const thumbDefaultBoxShadow = '0px 1px 3px rgba(0,0,0,0.5)';
const thumbFocusedBoxShadow = `${thumbDefaultBoxShadow}, 0 0 0 10px rgba(0,0,0,0.1)`;
const defaultActiveTrackColor = '#A3D3CF';
const defaultTrackColor = '#939393';
const defaultDisabledTrackColor = '#D5D5D5';
const defaultActiveThumbColor = '#009688';
const defaultThumbColor = '#FAFAFA';
const defaultDisabledThumbColor = '#BDBDBD';
const Switch: React.AbstractComponent<
SwitchProps,
React.ElementRef<typeof View>
> = React.forwardRef((props, forwardedRef) => {
const {
accessibilityLabel,
activeThumbColor = '#009688',
activeTrackColor = '#A3D3CF',
activeThumbColor,
activeTrackColor,
disabled = false,
onValueChange,
style = emptyObject,
thumbColor = '#FAFAFA',
trackColor = '#939393',
thumbColor,
trackColor,
value = false,
...other
} = props;
@@ -69,31 +77,74 @@ const Switch: React.AbstractComponent<
const minWidth = multiplyStyleLengthValue(height, 2);
const width = styleWidth > minWidth ? styleWidth : minWidth;
const trackBorderRadius = multiplyStyleLengthValue(height, 0.5);
const trackCurrentColor = (function () {
if (value === true) {
if (trackColor != null && typeof trackColor === 'object') {
return trackColor.true;
} else {
return activeTrackColor;
return activeTrackColor ?? defaultActiveTrackColor;
}
} else {
if (trackColor != null && typeof trackColor === 'object') {
return trackColor.false;
} else {
return trackColor;
return trackColor ?? defaultTrackColor;
}
}
})();
const thumbCurrentColor = value ? activeThumbColor : thumbColor;
const thumbCurrentColor = value
? activeThumbColor ?? defaultActiveThumbColor
: thumbColor ?? defaultThumbColor;
const thumbHeight = height;
const thumbWidth = thumbHeight;
const rootStyle = [styles.root, style, disabled && styles.cursorDefault, { height, width }];
const disabledTrackColor = (function () {
if (value === true) {
if (
(typeof activeTrackColor === 'string' && activeTrackColor != null) ||
(typeof trackColor === 'object' && trackColor?.true)
) {
return trackCurrentColor;
} else {
return defaultDisabledTrackColor;
}
} else {
if (
(typeof trackColor === 'string' && trackColor != null) ||
(typeof trackColor === 'object' && trackColor?.false)
) {
return trackCurrentColor;
} else {
return defaultDisabledTrackColor;
}
}
})();
const disabledThumbColor = (function () {
if (value === true) {
if (activeThumbColor == null) {
return defaultDisabledThumbColor;
} else {
return thumbCurrentColor;
}
} else {
if (thumbColor == null) {
return defaultDisabledThumbColor;
} else {
return thumbCurrentColor;
}
}
})();
const trackStyle = [
styles.track,
{
backgroundColor: disabled ? '#D5D5D5' : trackCurrentColor,
backgroundColor: disabled ? disabledTrackColor : trackCurrentColor,
borderRadius: trackBorderRadius
}
];
@@ -102,7 +153,7 @@ const Switch: React.AbstractComponent<
styles.thumb,
value && styles.thumbActive,
{
backgroundColor: disabled ? '#BDBDBD' : thumbCurrentColor,
backgroundColor: disabled ? disabledThumbColor : thumbCurrentColor,
height: thumbHeight,
marginStart: value ? multiplyStyleLengthValue(thumbWidth, -1) : 0,
width: thumbWidth