From 1f0acef844203eac826d6db391a907b9277d986e Mon Sep 17 00:00:00 2001 From: mabashian Date: Mon, 2 Mar 2020 11:22:18 -0500 Subject: [PATCH] Changes Toggle to MultiButtonToggle in an attempt to differentiate it from an upstream PF component. Altered props to be a bit more concise as well as support more than two buttons. --- .../CodeMirrorInput/VariablesDetail.jsx | 11 ++-- .../CodeMirrorInput/VariablesDetail.test.jsx | 8 +-- .../CodeMirrorInput/VariablesField.jsx | 11 ++-- .../CodeMirrorInput/VariablesInput.jsx | 11 ++-- .../ButtonGroup.jsx | 0 .../MultiButtonToggle/MultiButtonToggle.jsx | 66 +++++++++++++++++++ .../src/components/MultiButtonToggle/index.js | 1 + awx/ui_next/src/components/Toggle/Toggle.jsx | 52 --------------- awx/ui_next/src/components/Toggle/index.js | 1 - 9 files changed, 83 insertions(+), 78 deletions(-) rename awx/ui_next/src/components/{Toggle => MultiButtonToggle}/ButtonGroup.jsx (100%) create mode 100644 awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx create mode 100644 awx/ui_next/src/components/MultiButtonToggle/index.js delete mode 100644 awx/ui_next/src/components/Toggle/Toggle.jsx delete mode 100644 awx/ui_next/src/components/Toggle/index.js diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx index 97634975b4..768b85b14b 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import { string, node, number } from 'prop-types'; import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core'; import { DetailName, DetailValue } from '@components/DetailList'; -import Toggle from '@components/Toggle'; +import MultiButtonToggle from '@components/MultiButtonToggle'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; import CodeMirrorInput from './CodeMirrorInput'; import { JSON_MODE, YAML_MODE } from './constants'; @@ -50,12 +50,9 @@ function VariablesDetail({ value, label, rows }) { - { try { setCurrentValue(getValueAsMode(currentValue, newMode)); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx index 455b47b04b..5ffdaeb1e7 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx @@ -31,12 +31,12 @@ describe('', () => { const wrapper = shallow( ); - wrapper.find('Toggle').invoke('onChange')('javascript'); + wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); const input = wrapper.find('Styled(CodeMirrorInput)'); expect(input.prop('mode')).toEqual('javascript'); expect(input.prop('value')).toEqual('{\n "foo": "bar"\n}'); - wrapper.find('Toggle').invoke('onChange')('yaml'); + wrapper.find('MultiButtonToggle').invoke('onChange')('yaml'); const input2 = wrapper.find('Styled(CodeMirrorInput)'); expect(input2.prop('mode')).toEqual('yaml'); expect(input2.prop('value')).toEqual('foo: bar\n'); @@ -53,7 +53,7 @@ describe('', () => { ); act(() => { - wrapper.find('Toggle').invoke('onChange')('javascript'); + wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); }); wrapper.setProps({ value: '---bar: baz', @@ -73,7 +73,7 @@ describe('', () => { test('should default empty json to "{}"', () => { const wrapper = mount(); act(() => { - wrapper.find('Toggle').invoke('onChange')('javascript'); + wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); }); wrapper.setProps({ value: '' }); const input = wrapper.find('Styled(CodeMirrorInput)'); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx index 4ea07052ec..c231a23db4 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx @@ -6,7 +6,7 @@ import { useField } from 'formik'; import styled from 'styled-components'; import { Split, SplitItem } from '@patternfly/react-core'; import { CheckboxField } from '@components/FormField'; -import Toggle from '@components/Toggle'; +import MultiButtonToggle from '@components/MultiButtonToggle'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; import CodeMirrorInput from './CodeMirrorInput'; import { JSON_MODE, YAML_MODE } from './constants'; @@ -34,12 +34,9 @@ function VariablesField({ i18n, id, name, label, readOnly, promptId }) { - { try { const newVal = diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx index 785b05df6c..2e4560d720 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx @@ -3,7 +3,7 @@ import { string, func, bool, number } from 'prop-types'; import { Split, SplitItem } from '@patternfly/react-core'; import styled from 'styled-components'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; -import Toggle from '@components/Toggle'; +import MultiButtonToggle from '@components/MultiButtonToggle'; import CodeMirrorInput from './CodeMirrorInput'; import { JSON_MODE, YAML_MODE } from './constants'; @@ -42,12 +42,9 @@ function VariablesInput(props) { - { try { if (mode === JSON_MODE) { diff --git a/awx/ui_next/src/components/Toggle/ButtonGroup.jsx b/awx/ui_next/src/components/MultiButtonToggle/ButtonGroup.jsx similarity index 100% rename from awx/ui_next/src/components/Toggle/ButtonGroup.jsx rename to awx/ui_next/src/components/MultiButtonToggle/ButtonGroup.jsx diff --git a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx new file mode 100644 index 0000000000..460313bbca --- /dev/null +++ b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { func, string } from 'prop-types'; +import styled from 'styled-components'; +import { Button } from '@patternfly/react-core'; +import ButtonGroup from './ButtonGroup'; + +const SmallButton = styled(Button)` + padding: 3px 8px; + font-size: var(--pf-global--FontSize--xs); +`; + +function MultiButtonToggle({ buttons, currentValue, onChange }) { + const setValue = newValue => { + if (currentValue !== newValue) { + onChange(newValue); + } + }; + + return ( + + {buttons.map(([value, label]) => ( + setValue(value)} + variant={currentValue === value ? 'primary' : 'secondary'} + > + {label} + + ))} + + ); +} + +const buttonsPropType = { + isRequired: ({ buttons }) => { + if (!buttons) { + return new Error( + `The prop buttons is marked as required in MultiButtonToggle, but its value is '${buttons}'` + ); + } + // We expect this data structure to look like: + // [[value(unrestricted type), label(string)], [value(unrestricted type), label(string)], ...] + if ( + !Array.isArray(buttons) || + buttons.length < 2 || + buttons.reduce( + (prevVal, button) => prevVal || typeof button[1] !== 'string', + false + ) + ) { + return new Error( + `Invalid prop buttons supplied to MultiButtonToggle. Validation failed.` + ); + } + + return null; + }, +}; + +MultiButtonToggle.propTypes = { + buttons: buttonsPropType.isRequired, + currentValue: string.isRequired, + onChange: func.isRequired, +}; + +export default MultiButtonToggle; diff --git a/awx/ui_next/src/components/MultiButtonToggle/index.js b/awx/ui_next/src/components/MultiButtonToggle/index.js new file mode 100644 index 0000000000..9332082446 --- /dev/null +++ b/awx/ui_next/src/components/MultiButtonToggle/index.js @@ -0,0 +1 @@ +export { default } from './MultiButtonToggle'; diff --git a/awx/ui_next/src/components/Toggle/Toggle.jsx b/awx/ui_next/src/components/Toggle/Toggle.jsx deleted file mode 100644 index db0d796000..0000000000 --- a/awx/ui_next/src/components/Toggle/Toggle.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import { func, string } from 'prop-types'; -import styled from 'styled-components'; -import { Button } from '@patternfly/react-core'; -import ButtonGroup from './ButtonGroup'; - -const SmallButton = styled(Button)` - padding: 3px 8px; - font-size: var(--pf-global--FontSize--xs); -`; - -function Toggle({ - leftLabel, - leftMode, - rightLabel, - rightMode, - currentMode, - onChange, -}) { - const setValue = newValue => { - if (currentMode !== newValue) { - onChange(newValue); - } - }; - - return ( - - setValue(leftMode)} - variant={currentMode === leftMode ? 'primary' : 'secondary'} - > - {leftLabel} - - setValue(rightMode)} - variant={currentMode === rightMode ? 'primary' : 'secondary'} - > - {rightLabel} - - - ); -} -Toggle.propTypes = { - leftLabel: string.isRequired, - leftMode: string.isRequired, - rightLabel: string.isRequired, - rightMode: string.isRequired, - currentMode: string.isRequired, - onChange: func.isRequired, -}; - -export default Toggle; diff --git a/awx/ui_next/src/components/Toggle/index.js b/awx/ui_next/src/components/Toggle/index.js deleted file mode 100644 index c2ec545530..0000000000 --- a/awx/ui_next/src/components/Toggle/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Toggle';