various fixes (#113)

* adds support for checkbox and radio themes

* combobox2: fixes bug caused by async updates in react

* add debounce for formik elements

lib/sass/common/sass/components.scss

@@ -1,10 +1,12 @@
 @import '../../components/Accordion/sass/Accordion';
 @import '../../components/Button/sass/Button';
 @import '../../components/ButtonGroup/sass/ButtonGroup';
-@import '../../components/Collapsible/sass/Collapsible';
 @import '../../components/Chart/sass/Chart';
+@import '../../components/Checkbox/sass/Checkbox';
+@import '../../components/Collapsible/sass/Collapsible';
 @import '../../components/Combobox/sass/Combobox';
 @import '../../components/Combobox2/sass/Combobox';
+@import '../../components/CopyToClipboard/sass/CopyToClipboard';
 @import '../../components/Dropdown/sass/Dropdown';
 @import '../../components/EditableList/sass/EditableList';
 @import '../../components/FileInput/sass/FileInput';
@@ -23,13 +25,13 @@
 @import '../../components/Pagination/sass/Pagination';
 @import '../../components/Panel/sass/Panel';
 @import '../../components/Pill/sass/Pill';
+@import '../../components/Radio/sass/Radio';
 @import '../../components/Select/sass/Select';
 @import '../../components/SelectableList/sass/SelectableList';
 @import '../../components/Sidebar/sass/Sidebar';
 @import '../../components/Table/sass/Table';
 @import '../../components/Tabs/sass/Tabs';
 @import '../../components/Textarea/sass/Textarea';
-@import '../../components/Toggle/sass/Toggle';
 @import '../../components/Toast/sass/Toast';
+@import '../../components/Toggle/sass/Toggle';
 @import '../../components/Tooltip/sass/Tooltip.scss';
-@import '../../components/CopyToClipboard/sass/CopyToClipboard';

lib/sass/components/Checkbox/sass/Checkbox.scss

@@ -0,0 +1,29 @@
+@import '../../../common/sass/variables';
+@import '../../../common/sass/mixins';
+@import './variables';
+
+.tyk-checkbox {
+  &--theme-light {
+    label {
+      color: $tyk-checkbox-theme-light-label-color;
+    }
+
+    &.tyk-checkbox--is-disabled {
+      label {
+        color: $tyk-checkbox-theme-light-label-disabled-color;
+      }
+    }
+  }
+
+  &--theme-dark {
+    label {
+      color: $tyk-checkbox-theme-dark-label-color;
+    }
+
+    &.tyk-checkbox--is-disabled {
+      label {
+        color: $tyk-checkbox-theme-dark-label-disabled-color;
+      }
+    }
+  }
+}

lib/sass/components/Checkbox/sass/variables.scss

@@ -0,0 +1,4 @@
+$tyk-checkbox-theme-light-label-color: white !default;
+$tyk-checkbox-theme-light-label-disabled-color: white !default;
+$tyk-checkbox-theme-dark-label-color: $text-color !default;
+$tyk-checkbox-theme-dark-label-disabled-color: $text-color !default;

lib/sass/components/Panel/sass/Panel.scss

@@ -34,6 +34,8 @@
   }
 
   &--primary {
+    background-color: transparent;
+
     .tyk-panel__header {
       @include panel-variant($panel-primary-header-color)
     }
@@ -45,8 +47,10 @@
       border: $panel-primary-border-color;
     }
 
-    & label {
-      color: $panel-primary-label-color;
+    & .tyk-form-group {
+      label {
+        color: $panel-primary-label-color;
+      }
     }
   }
 

lib/sass/components/Radio/sass/Radio.scss

@@ -0,0 +1,29 @@
+@import '../../../common/sass/variables';
+@import '../../../common/sass/mixins';
+@import './variables';
+
+.tyk-radio {
+  &--theme-light {
+    label {
+      color: $tyk-radio-theme-light-label-color;
+    }
+
+    &.tyk-radio--is-disabled {
+      label {
+        color: $tyk-radio-theme-light-label-disabled-color;
+      }
+    }
+  }
+
+  &--theme-dark {
+    label {
+      color: $tyk-radio-theme-dark-label-color;
+    }
+
+    &.tyk-radio--is-disabled {
+      label {
+        color: $tyk-radio-theme-dark-label-disabled-color;
+      }
+    }
+  }
+}

lib/sass/components/Radio/sass/variables.scss

@@ -0,0 +1,4 @@
+$tyk-radio-theme-light-label-color: white !default;
+$tyk-radio-theme-light-label-disabled-color: white !default;
+$tyk-radio-theme-dark-label-color: $text-color !default;
+$tyk-radio-theme-dark-label-disabled-color: $text-color !default;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "1.1.66",
+  "version": "1.1.67",
   "description": "Tyk UI - ui reusable components",
   "main": "lib/index.js",
   "scripts": {

src/common/js/utils/formik.js

@@ -1,34 +1,54 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-const getValueFromPath = (obj, path) => {
+function getValueFromPath(obj, path) {
   // turn 'aaa.qqq[2].bbb[5][3].mmm' into ['aaa', 'qqq', '2', 'bbb', '5', '3', 'mmm']
   const indexes = path.split(/[\][.]/).filter(x => Boolean(x));
   return indexes.reduce((acc, v) => (acc ? acc[v] : acc), obj);
-};
+}
+
+function debounce(f, limit) {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(f, limit, ...args);
+  };
+}
+
+const triggerFieldOnChange = debounce((field, e) => field.onChange(e), 200);
 
 /* eslint-disable react/prop-types */
 const wrapper = (Component, options) => ({ field, form, ...properties }) => {
+  const [myValue, setMyValue] = useState(field.value);
   const opts = {
     ...{
       getOnChangeProps: () => ({}),
     },
     ...options,
   };
 
-  const onChange = (valueOrEvent) => {
-    const getValue = (v) => {
-      if (v && v.target) {
-        if (v.target.nodeName === 'INPUT' && (v.target.type === 'checkbox' || v.target.type === 'radio')) {
-          return v.target.checked;
-        }
-        return v.target.value;
+  const getValue = (v) => {
+    if (v && v.target) {
+      if (v.target.nodeName === 'INPUT' && (v.target.type === 'checkbox' || v.target.type === 'radio')) {
+        return v.target.checked;
       }
-      return v;
-    };
+      return v.target.value;
+    }
+    return v;
+  };
+
+  const onChange = (valueOrEvent) => {
     const value = getValue(valueOrEvent);
     const onChangeProps = opts.getOnChangeProps(value, field, form, properties);
-    field.onChange({ target: { name: field.name, value, ...onChangeProps } });
-    if (typeof properties.onChange === 'function') properties.onChange(onChangeProps.value || properties.value || value);
+
+    const newValue = onChangeProps.value || properties.value || value;
+    if (typeof properties.onChange === 'function') {
+      properties.onChange(newValue);
+    }
+    triggerFieldOnChange(
+      field,
+      { target: { name: field.name, value: newValue, ...onChangeProps } },
+    );
+    setMyValue(newValue);
   };
 
   const formError = (getValueFromPath(form.touched, field.name) || Boolean(form.submitCount))
@@ -42,7 +62,8 @@ const wrapper = (Component, options) => ({ field, form, ...properties }) => {
       {...properties}
       checked={typeof properties.value === 'string' ? field.value === properties.value : field.value}
       onChange={onChange}
-      input={{ value: field.value, onChange }}
+      value={myValue}
+      input={{ value: myValue, onChange }}
     />
   );
 };

src/common/sass/components.scss

@@ -1,10 +1,12 @@
 @import '../../components/Accordion/sass/Accordion';
 @import '../../components/Button/sass/Button';
 @import '../../components/ButtonGroup/sass/ButtonGroup';
-@import '../../components/Collapsible/sass/Collapsible';
 @import '../../components/Chart/sass/Chart';
+@import '../../components/Checkbox/sass/Checkbox';
+@import '../../components/Collapsible/sass/Collapsible';
 @import '../../components/Combobox/sass/Combobox';
 @import '../../components/Combobox2/sass/Combobox';
+@import '../../components/CopyToClipboard/sass/CopyToClipboard';
 @import '../../components/Dropdown/sass/Dropdown';
 @import '../../components/EditableList/sass/EditableList';
 @import '../../components/FileInput/sass/FileInput';
@@ -23,13 +25,13 @@
 @import '../../components/Pagination/sass/Pagination';
 @import '../../components/Panel/sass/Panel';
 @import '../../components/Pill/sass/Pill';
+@import '../../components/Radio/sass/Radio';
 @import '../../components/Select/sass/Select';
 @import '../../components/SelectableList/sass/SelectableList';
 @import '../../components/Sidebar/sass/Sidebar';
 @import '../../components/Table/sass/Table';
 @import '../../components/Tabs/sass/Tabs';
 @import '../../components/Textarea/sass/Textarea';
-@import '../../components/Toggle/sass/Toggle';
 @import '../../components/Toast/sass/Toast';
+@import '../../components/Toggle/sass/Toggle';
 @import '../../components/Tooltip/sass/Tooltip.scss';
-@import '../../components/CopyToClipboard/sass/CopyToClipboard';

src/components/Checkbox/js/Checkbox.js

@@ -7,14 +7,15 @@ export default class Checkbox extends Component {
   static propTypes = {
     disabled: PropTypes.bool,
     inline: PropTypes.bool,
+    theme: PropTypes.string,
     input: PropTypes.instanceOf(Object),
     label: PropTypes.string,
     name: PropTypes.string,
     value: PropTypes.string,
   };
 
   getCssClasses() {
-    const { inline } = this.props;
+    const { inline, disabled, theme = '' } = this.props;
     const cssClasses = [];
 
     cssClasses.push('tyk-checkbox');
@@ -23,6 +24,14 @@ export default class Checkbox extends Component {
       cssClasses.push('tyk-checkbox--inline');
     }
 
+    if (theme.trim()) {
+      cssClasses.push(...theme.split(' ').map(t => `tyk-checkbox--theme-${t}`));
+    }
+
+    if (disabled) {
+      cssClasses.push('tyk-checkbox--is-disabled');
+    }
+
     return cssClasses.join(' ');
   }
 

src/components/Checkbox/sass/Checkbox.scss

@@ -0,0 +1,29 @@
+@import '../../../common/sass/variables';
+@import '../../../common/sass/mixins';
+@import './variables';
+
+.tyk-checkbox {
+  &--theme-light {
+    label {
+      color: $tyk-checkbox-theme-light-label-color;
+    }
+
+    &.tyk-checkbox--is-disabled {
+      label {
+        color: $tyk-checkbox-theme-light-label-disabled-color;
+      }
+    }
+  }
+
+  &--theme-dark {
+    label {
+      color: $tyk-checkbox-theme-dark-label-color;
+    }
+
+    &.tyk-checkbox--is-disabled {
+      label {
+        color: $tyk-checkbox-theme-dark-label-disabled-color;
+      }
+    }
+  }
+}

src/components/Checkbox/sass/variables.scss

@@ -0,0 +1,4 @@
+$tyk-checkbox-theme-light-label-color: white !default;
+$tyk-checkbox-theme-light-label-disabled-color: white !default;
+$tyk-checkbox-theme-dark-label-color: $text-color !default;
+$tyk-checkbox-theme-dark-label-disabled-color: $text-color !default;

src/components/Combobox2/js/Combobox.js

@@ -302,7 +302,7 @@ function Combobox(props) {
         selected: value.some(sv => sv.id === v.id),
       }));
       setValues(newValues);
-      setValue(value.map(v => newValues.find(nv => nv.id === v.id) || v));
+      setValue(val => val.map(v => newValues.find(nv => nv.id === v.id) || v));
     } else if (values.length) {
       setValues([]);
     }
@@ -311,7 +311,7 @@ function Combobox(props) {
   useEffect(() => {
     const newValue = getValueFromProp(propValue, values);
     setValue(newValue);
-    setValues(values.map(v => ({
+    setValues(vals => vals.map(v => ({
       ...normalizeValue(v),
       selected: newValue.some(nv => nv.id === v.id),
     })));

src/components/Panel/sass/Panel.scss

@@ -34,6 +34,8 @@
   }
 
   &--primary {
+    background-color: transparent;
+
     .tyk-panel__header {
       @include panel-variant($panel-primary-header-color)
     }
@@ -45,8 +47,10 @@
       border: $panel-primary-border-color;
     }
 
-    & label {
-      color: $panel-primary-label-color;
+    & .tyk-form-group {
+      label {
+        color: $panel-primary-label-color;
+      }
     }
   }
 

src/components/Radio/js/Radio.js

@@ -5,6 +5,7 @@ export default class Radio extends Component {
   static propTypes = {
     disabled: PropTypes.bool,
     inline: PropTypes.bool,
+    theme: PropTypes.string,
     input: PropTypes.instanceOf(Object),
     label: PropTypes.string,
     name: PropTypes.string,
@@ -13,7 +14,9 @@ export default class Radio extends Component {
   };
 
   getCssClasses() {
-    const { inline, nospace } = this.props;
+    const {
+      inline, nospace, theme = '', disabled,
+    } = this.props;
     const cssClasses = [];
 
     if (inline) {
@@ -26,6 +29,14 @@ export default class Radio extends Component {
       cssClasses.push('no-margin');
     }
 
+    if (theme.trim()) {
+      cssClasses.push(...theme.split(' ').map(t => `tyk-radio--theme-${t}`));
+    }
+
+    if (disabled) {
+      cssClasses.push('tyk-radio--is-disabled');
+    }
+
     return cssClasses.join(' ');
   }