Skip to content
This repository was archived by the owner on May 16, 2023. It is now read-only.
This repository was archived by the owner on May 16, 2023. It is now read-only.

Exposing width and height properties #31

@codeandcats

Description

@codeandcats

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-ios-switch@0.1.19 for the project I'm working on.

Basically I just wanted to shrink down the size of the switch. Originally I was applying a class with transform: scale(0.8); transform-origin: top left but I found that shrunk the border width to sub-pixel width, which I wanted to keep at 1px. So instead I modified the source using patch-package to expose width and height properties. This was very simple because of how clean the original code is.

Here is the diff that solved my problem:

diff --git a/node_modules/react-ios-switch/lib/Switch.js b/node_modules/react-ios-switch/lib/Switch.js
index 10d82bd..2977652 100644
--- a/node_modules/react-ios-switch/lib/Switch.js
+++ b/node_modules/react-ios-switch/lib/Switch.js
@@ -98,7 +98,7 @@ var Switch = function (_React$Component) {
   }, {
     key: 'getHeight',
     value: function getHeight() {
-      return 30;
+      return this.props.height;
     }
   }, {
     key: 'getOffColor',
@@ -162,7 +162,7 @@ var Switch = function (_React$Component) {
   }, {
     key: 'getWidth',
     value: function getWidth() {
-      return 50;
+      return this.props.width;
     }
   }, {
     key: 'handleChange',
@@ -320,6 +320,7 @@ Switch.propTypes = {
   className: _propTypes2.default.string,
   disabled: _propTypes2.default.bool,
   handleColor: _propTypes2.default.string,
+  height: _propTypes2.default.number,
   name: _propTypes2.default.string,
   offColor: _propTypes2.default.string,
   onChange: _propTypes2.default.func,
@@ -327,12 +328,15 @@ Switch.propTypes = {
   pendingOffColor: _propTypes2.default.string,
   pendingOnColor: _propTypes2.default.string,
   readOnly: _propTypes2.default.bool,
-  style: _propTypes2.default.object
+  style: _propTypes2.default.object,
+  width: _propTypes2.default.number,
 };
 Switch.defaultProps = {
   handleColor: 'white',
+  height: 30,
   offColor: 'white',
   onChange: function onChange() {},
-  onColor: 'rgb(76, 217, 100)'
+  onColor: 'rgb(76, 217, 100)',
+  width: 50
 };
 exports.default = Switch;
\ No newline at end of file

This issue body was partially generated by patch-package.

If you'd be willing to accept a PR I'd be happy to create one.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions