From 46b1a7f8eb2d9d89c65b223d233c1ba73f1f783b Mon Sep 17 00:00:00 2001 From: willhlaw Date: Sat, 9 Jun 2018 08:27:02 -0400 Subject: [PATCH 1/3] Add selectedDisplayName so a selected option can changes its appearance when selected --- README.md | 19 +++++++++++-------- example/index.js | 8 +++++--- index.es6.js | 14 ++++++++++---- index.js | 11 ++++++++--- 4 files changed, 34 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index ff65f92..a8a4a25 100644 --- a/README.md +++ b/README.md @@ -34,11 +34,13 @@ import MultiToggle from `react-multi-toggle`; const groupOptions = [ { - displayName: 'Couple', + displayName: 'Deny', + selectedDisplayName: 'Denied', value: 2 }, { - displayName: 'Family', + displayName: 'Accept', + selectedDisplayName: 'Accepted', value: 4 }, ]; @@ -89,12 +91,13 @@ Include the component's [CSS](./style.css) through [style-loader](https://www.np Toggle prop `options` is any array of objects with keys: -| Key | Type | Required | Description | -| :---------- | :-------------------------- | :------- | :------------------------------------------------------------------------ | -| value | `Any` | Yes | Value passed by prop `onSelectOption`. | -| displayName | `String` or `React Element` | No | Label rendered on toggle for each option. If omitted, value will be used. | -| optionClass | `String` | No | Optional class to apply to toggle when option is selected. | -| isDisabled | `Boolean` | No | Viewable but not selectable. | +| Key | Type | Required | Description | +| :------------------ | :-------------------------- | :------- | :----------------------------------------------------------------------------------------------- | +| value | `Any` | Yes | Value passed by prop `onSelectOption`. | +| displayName | `String` or `React Element` | No | Label rendered on toggle for each option. If omitted, value will be used. | +| selectedDisplayName | `String` or `React Element` | No | Label rendered on toggle for a selected option. If omitted, displayName then value will be used. | +| optionClass | `String` | No | Optional class to apply to toggle when option is selected. | +| isDisabled | `Boolean` | No | Viewable but not selectable. | ## License diff --git a/example/index.js b/example/index.js index 602c4e3..322b312 100644 --- a/example/index.js +++ b/example/index.js @@ -7,16 +7,18 @@ import "../style.css"; const groupOptions = [ { - displayName: "Single", + displayName: 'Undecided', value: 1, isDisabled: true }, { - displayName: "Couple", + displayName: 'Deny', + selectedDisplayName: 'Denied', value: 2 }, { - displayName: "Family", + displayName: 'Accept', + selectedDisplayName: 'Accepted', value: 4 } ]; diff --git a/index.es6.js b/index.es6.js index 37060f7..b5000ab 100644 --- a/index.es6.js +++ b/index.es6.js @@ -24,12 +24,18 @@ const MultiToggle = ({ }; const createToggleOption = (...args) => { - const { value, displayName, isDisabled } = args[0]; + const { value, displayName, selectedDisplayName, isDisabled } = args[0]; + + const isSelected = isSelectedOption(args[0]); + + const derivedDisplayName = !isSelected + ? displayName + : selectedDisplayName || displayName; const selectOption = () => onSelectOption(value); - const optionClass = classNames("toggleOption", { - selected: isSelectedOption(args[0]), + const optionClass = classNames('toggleOption', { + selected: isSelected, optionDisabled: isDisabled }); @@ -44,7 +50,7 @@ const MultiToggle = ({ className={optionClass} style={optionStyle} > - {displayName || value} + {derivedDisplayName || value} ); }; diff --git a/index.js b/index.js index bbadee6..1d9dd58 100644 --- a/index.js +++ b/index.js @@ -49,14 +49,19 @@ var MultiToggle = function MultiToggle(_ref) { var _ref2 = arguments.length <= 0 ? undefined : arguments[0], value = _ref2.value, displayName = _ref2.displayName, + selectedDisplayName = _ref2.selectedDisplayName, isDisabled = _ref2.isDisabled; + var isSelected = isSelectedOption(arguments.length <= 0 ? undefined : arguments[0]); + + var derivedDisplayName = !isSelected ? displayName : selectedDisplayName || displayName; + var selectOption = function selectOption() { return onSelectOption(value); }; - var optionClass = (0, _classnames2.default)("toggleOption", { - selected: isSelectedOption(arguments.length <= 0 ? undefined : arguments[0]), + var optionClass = (0, _classnames2.default)('toggleOption', { + selected: isSelected, optionDisabled: isDisabled }); @@ -72,7 +77,7 @@ var MultiToggle = function MultiToggle(_ref) { className: optionClass, style: optionStyle }, - displayName || value + derivedDisplayName || value ); }; From 24e9d8d19c69278b9df60522ec6e3c11b776b97f Mon Sep 17 00:00:00 2001 From: willhlaw Date: Sat, 9 Jun 2018 08:30:36 -0400 Subject: [PATCH 2/3] Change forked package to react-multi-toggle-extra for selectedDisplayOption - Created PR in upstream project, but updating project name to be able to publish to npm and use in the meantime: https://github.com/danielarias123/react-multi-toggle/pull/11 --- README.md | 15 +++++++++------ package-lock.json | 2 +- package.json | 8 ++++---- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index a8a4a25..94c46eb 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,24 @@ -# react-multi-toggle +# react-multi-toggle-extra React-Multi-Toggle is a stylish & lightweight toggle component that extends the functionality of a checkbox or a radio button -![alt text](https://github.com/danielarias123/react-multi-toggle/blob/master/example/images/react-multi-toggle-example.gif "Toggle Gif") -![alt text](https://github.com/danielarias123/react-multi-toggle/blob/master/example/images/react-multi-toggle-example-2.gif "Toggle Gif 2") +This project was forked from https://github.com/danielarias123/react-multi-toggle and extended. This project will stay in sync with its updates by monitoring it with [Backstroke](https://backstroke.co/). +![Backstroke logo](https://backstroke.co/assets/img/logo.png){:height="40px"} + +![alt text](https://github.com/willhlaw/react-multi-toggle-extra/blob/master/example/images/react-multi-toggle-example.gif 'Toggle Gif') +![alt text](https://github.com/willhlaw/react-multi-toggle-extra/blob/master/example/images/react-multi-toggle-example-2.gif 'Toggle Gif 2') ## Installation -Can be installed as an [npm package](https://www.npmjs.com/package/react-multi-toggle) +Can be installed as an [npm package](https://www.npmjs.com/package/react-multi-toggl-extra) ``` -npm install react-multi-toggle +npm install react-multi-toggle-extra ``` ## Development -Example can be found [here](https://github.com/danielarias123/react-multi-toggle/blob/master/example). +Example can be found [here](https://github.com/willhlaw/react-multi-toggle-extra/blob/master/example). ```shell npm i diff --git a/package-lock.json b/package-lock.json index d3d035a..646d974 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "react-multi-toggle", + "name": "react-multi-toggle-extra", "version": "1.1.0", "lockfileVersion": 1, "requires": true, diff --git a/package.json b/package.json index f2e0a5c..2c38b46 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-multi-toggle", + "name": "react-multi-toggle-extra", "version": "1.1.0", "description": "Multi use toggle component for react", "main": "index.js", @@ -16,11 +16,11 @@ "react-component", "radio" ], - "author": "Daniel Arias ", - "homepage": "https://github.com/danielarias123/react-multi-toggle", + "author": "Will Lawrence ", + "homepage": "https://github.com/willhlaw/react-multi-toggle-extra", "repository": { "type": "git", - "url": "git@github.com:danielarias123/react-multi-toggle.git" + "url": "git@github.com:willhlaw/react-multi-toggle-extra.git" }, "license": "MIT", "devDependencies": { From 74c88367dc4cb8b212742039b5f79d382c68521c Mon Sep 17 00:00:00 2001 From: willhlaw Date: Sun, 10 Jun 2018 10:52:30 -0400 Subject: [PATCH 3/3] Prettify file --- example/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/example/index.js b/example/index.js index 322b312..3f77b66 100644 --- a/example/index.js +++ b/example/index.js @@ -1,9 +1,9 @@ -import React, { Component } from "react"; -import { render } from "react-dom"; +import React, { Component } from 'react'; +import { render } from 'react-dom'; -import MultiToggle from "../index.es6"; +import MultiToggle from '../index.es6'; -import "../style.css"; +import '../style.css'; const groupOptions = [ { @@ -51,4 +51,4 @@ class Example extends Component { }; } -render(, document.getElementById("app")); +render(, document.getElementById('app'));