diff --git a/README.md b/README.md
index ff65f92..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
-
-
+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/).
+{:height="40px"}
+
+
+
## 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
@@ -34,11 +37,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 +94,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..3f77b66 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,22 +1,24 @@
-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 = [
{
- displayName: "Single",
+ displayName: 'Undecided',
value: 1,
isDisabled: true
},
{
- displayName: "Couple",
+ displayName: 'Deny',
+ selectedDisplayName: 'Denied',
value: 2
},
{
- displayName: "Family",
+ displayName: 'Accept',
+ selectedDisplayName: 'Accepted',
value: 4
}
];
@@ -49,4 +51,4 @@ class Example extends Component {
};
}
-render(, document.getElementById("app"));
+render(, document.getElementById('app'));
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
);
};
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": {