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

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions