Skip to content

Commit

Permalink
Merge branch '6.0.0' into add-border-radius-prop
Browse files Browse the repository at this point in the history
  • Loading branch information
markusenglund committed Dec 13, 2020
2 parents a0d84cb + 8ee85fa commit 78525aa
Show file tree
Hide file tree
Showing 14 changed files with 9,859 additions and 7,903 deletions.
3 changes: 2 additions & 1 deletion .eslintrc
Expand Up @@ -28,6 +28,7 @@
"react/require-default-props": "off",
"react/destructuring-assignment": "off",
"react/no-did-update-set-state": "off",
"import/extensions": "off"
"import/extensions": "off",
"react/jsx-props-no-spreading": "off"
}
}
4 changes: 3 additions & 1 deletion .npmignore
Expand Up @@ -5,9 +5,11 @@ demo
.eslintrc
.gitignore
.prettierignore
.prettierrc
.vscode
stats.json
webpack.config.js
jest.config.js
jest.setup.js
coverage
coverage
rollup.config.js
4 changes: 4 additions & 0 deletions .prettierrc
@@ -0,0 +1,4 @@
{
"trailingComma": "none",
"arrowParens": "avoid"
}
17 changes: 17 additions & 0 deletions CHANGELOG.md
Expand Up @@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## [Unreleased]

### Added

- Add custom handle icons ([@morinted](https://github.com/morinted))
- Add `aria-checked` attribute ([@monicahung](https://github.com/monicahung))

### Fixed

- Prevent setState from being called after component is unmounted ([@smhg](https://github.com/smhg))

### Changed

- When the `checked` state is not changed in the `onChange` callback, the switch will now go back to its previous position instead of getting stuck halfway. This means the switch will move back and forth if the `onChange` callback changes the state after an asynchronous operation.
- Support react and react-dom 17 as peer dependencies
- Update all dev depencies

## [5.0.1 - 2019-07-16]

### Fixed
Expand Down
4 changes: 3 additions & 1 deletion README.md
Expand Up @@ -11,7 +11,7 @@ A draggable toggle-switch component for React.
- **Draggable** with the mouse or with a touch screen.
- **Customizable** - Easy to customize size, color and more.
- **Accessible** to visually impaired users and those who can't use a mouse.
- **Small package size** - 2 kB gzipped.
- **Reasonable package size** - <2.5 kB gzipped.
- **It Just Works** - Sensible default styling. Uses inline styles, so no need to import a separate css file.

## Demo
Expand Down Expand Up @@ -72,6 +72,8 @@ If you don't want to nest the switch inside a label, you can use the `htmlFor` a
| handleDiameter | number | _undefined_ | The diameter of the handle, measured in pixels. By default it will be 2 pixels smaller than the height of the switch. |
| uncheckedIcon | element _or_ bool | [Default value](https://github.com/markusenglund/react-switch/blob/master/src/icons.jsx) | An icon that will be shown on the switch when it is **not** checked. Pass in _false_ if you don't want any icon. |
| checkedIcon | element _or_ bool | [Default value](https://github.com/markusenglund/react-switch/blob/master/src/icons.jsx) | An icon that will be shown on the switch when it is checked. Pass in _false_ if you don't want any icon. |
| uncheckedHandleIcon | element | _undefined_ | An icon that will be shown on **the handle** of the switch when it is **not** checked. |
| checkedHandleIcon | element | _undefined_ | An icon that will be shown on **the handle** of the switch when it is checked. |
| boxShadow | string | _undefined_ | The default box-shadow of the handle. You can read up on the box-shadow syntax [on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=b). |
| activeBoxShadow | string | '0 0 2px 3px #3bf' | The box-shadow of the handle when it is active or focused. Do not set this to null, since it is important for accessibility. |
| height | number | 28 | The height of the background of the switch, measured in pixels. |
Expand Down
2 changes: 2 additions & 0 deletions __tests__/__snapshots__/Switch.test.jsx.snap
Expand Up @@ -40,6 +40,7 @@ exports[`Props matches snapshot with custom props 1`] = `
style="height:9px;width:9px;background:#ffffff;display:inline-block;cursor:default;border-radius:50%;position:absolute;transform:translateX(26px);top:2px;outline:0;box-shadow:0px 1px 5px rgba(0, 0, 0, 0.6);border:0;-webkit-transition:background-color 0.25s, transform 0.25s, box-shadow 0.15s;-moz-transition:background-color 0.25s, transform 0.25s, box-shadow 0.15s;transition:background-color 0.25s, transform 0.25s, box-shadow 0.15s"
/>
<input
aria-checked="true"
aria-label="bar"
aria-labelledby="baz"
checked=""
Expand Down Expand Up @@ -98,6 +99,7 @@ exports[`Props matches snapshot with default props 1`] = `
style="height:26px;width:26px;background:#ffffff;display:inline-block;cursor:pointer;border-radius:50%;position:absolute;transform:translateX(1px);top:1px;outline:0;border:0;-webkit-transition:background-color 0.25s, transform 0.25s, box-shadow 0.15s;-moz-transition:background-color 0.25s, transform 0.25s, box-shadow 0.15s;transition:background-color 0.25s, transform 0.25s, box-shadow 0.15s"
/>
<input
aria-checked="false"
role="switch"
style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px"
type="checkbox"
Expand Down
102 changes: 102 additions & 0 deletions demo/src/HandleIcons.jsx
@@ -0,0 +1,102 @@
import React, { Component } from "react";
import Switch from "../..";

export default class HandleIcon extends Component {
constructor() {
super();
this.state = { checked: false };
this.handleChange = this.handleChange.bind(this);
}

handleChange(checked) {
this.setState({ checked });
}

render() {
return (
<div className="example">
<h2>Handle icons</h2>
<label htmlFor="handle-icons">
<span>Switch with handle icons</span>
<Switch
onChange={this.handleChange}
checked={this.state.checked}
className="react-switch"
uncheckedIcon={false}
checkedIcon={false}
uncheckedHandleIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 20
}}
>
</div>
}
checkedHandleIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
color: "red",
fontSize: 18
}}
>
</div>
}
id="handle-icons"
/>
</label>
<pre>
{`
<label htmlFor="handle-icons">
<span>Switch with handle icons</span>
<Switch
onChange={this.handleChange}
checked={this.state.checked}
className="react-switch"
uncheckedIcon={false}
checkedIcon={false}
uncheckedHandleIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 20
}}
>
</div>
}
checkedHandleIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
color: "red",
fontSize: 18
}}
>
</div>
}
id="handle-icons"
/>
</label>
`}
</pre>
</div>
);
}
}
34 changes: 34 additions & 0 deletions demo/src/OnlyTurnedOn.jsx
@@ -0,0 +1,34 @@
import React, { useState } from "react";
import Switch from "../..";

const OnlyTurnedOn = () => {
const [checked, setChecked] = useState(false);

return (
<div className="example">
<h2>Switch which cannot be turned back off</h2>
<label>
<span>
To illustrate how the switch handles when the state is not changed in
response to user action
</span>
<Switch
onChange={() => setChecked(true)}
checked={checked}
className="react-switch"
/>
</label>
<pre>
{`
<Switch
onChange={() => setChecked(true)}
checked={checked}
className="react-switch"
/>
`}
</pre>
</div>
);
};

export default OnlyTurnedOn;
4 changes: 4 additions & 0 deletions demo/src/index.jsx
Expand Up @@ -9,6 +9,8 @@ import Disabled from "./Disabled";
import AriaLabelledby from "./AriaLabelledby";
import AriaLabel from "./AriaLabel";
import PassThroughProps from "./PassThroughProps";
import HandleIcons from "./HandleIcons";
import OnlyTurnedOn from "./OnlyTurnedOn";

function Examples() {
return (
Expand All @@ -19,7 +21,9 @@ function Examples() {
<SmallRadius />
<CustomIcons />
<Disabled />
<HandleIcons />
<PassThroughProps />
<OnlyTurnedOn />
<AriaLabelledby />
<AriaLabel />
<p>
Expand Down
14 changes: 14 additions & 0 deletions index.d.ts
Expand Up @@ -64,6 +64,20 @@ export interface ReactSwitchProps {
*/
handleDiameter?: number;

/**
* Icon to display on the handle while switch is unchecked.
*
* Defaults to undefined.
*/
uncheckedHandleIcon?: JSX.Element;

/**
* Icon to display on the handle while switch is checked.
*
* Defaults to undefined.
*/
checkedHandleIcon?: JSX.Element;

/**
* An icon that will be shown on the switch when it is **not** checked. Set to false to show no icon.
*
Expand Down

0 comments on commit 78525aa

Please sign in to comment.