chore: context randomize and reset

ccontrols · Aug 9, 2020 · 0fd3542 · 0fd3542
1 parent f9f997d
commit 0fd3542
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 11 deletions.
diff --git a/core/core/src/controls-randomize.ts b/core/core/src/controls-randomize.ts
@@ -34,12 +34,19 @@ interface RandomizedData {
   [key: string]: any;
 }
 
+export const canRandomizeControl = (control: ComponentControl): boolean => {
+  const { data } = control;
+  return (
+    data !== false && data !== null && control.type !== ControlTypes.BUTTON
+  );
+};
+
 export const randomizeData = (controls: ComponentControls): RandomizedData => {
   return Object.keys(controls)
     .map(name => {
       const control = controls[name];
       const { data } = control;
-      if (data === false || data === null) {
+      if (!canRandomizeControl(control)) {
         return null;
       }
       // check if control has custom settings for generating data

diff --git a/core/core/src/controls-utils.ts b/core/core/src/controls-utils.ts
@@ -68,6 +68,9 @@ export const resetControlValues = (
       );
 };
 
+export const canResetControl = (control: ComponentControl) => {
+  return control.defaultValue !== control.value;
+};
 export interface ControlValues {
   [name: string]: any;
 }

diff --git a/core/core/src/index.ts b/core/core/src/index.ts
@@ -7,7 +7,7 @@ export * from './propsInfo';
 export * from './document';
 export * from './document-utils';
 export * from './utility';
-export { randomizeData } from './controls-randomize';
+export { randomizeData, canRandomizeControl } from './controls-randomize';
 export * from './controls-smart';
 export * from './source';
 export * from './faker';

diff --git a/ui/blocks/src/PropsTable/controlsActions.ts b/ui/blocks/src/PropsTable/controlsActions.ts
@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { useMemo, MouseEvent } from 'react';
 import { window } from 'global';
 import copy from 'copy-to-clipboard';
 import {
@@ -7,6 +7,8 @@ import {
   randomizeData,
   ComponentControls,
   SetControlValueFn,
+  canRandomizeControl,
+  canResetControl,
 } from '@component-controls/core';
 
 export interface UseControlsActionsProps {
@@ -17,12 +19,28 @@ export interface UseControlsActionsProps {
 export const useControlsActions = (props: UseControlsActionsProps) => {
   const { controls, setControlValue, storyId } = props;
   const [copied, setCopied] = React.useState(false);
-  if (!controls || !Object.keys(controls).length) {
+  const { hasControls, canReset, canRandomize } = useMemo(() => {
+    const keys = controls ? Object.keys(controls) : [];
+    const canRandomize =
+      controls &&
+      keys.some(key => {
+        const control = controls[key];
+        return canRandomizeControl(control);
+      });
+    const canReset =
+      controls &&
+      keys.some(key => {
+        const control = controls[key];
+        return canResetControl(control);
+      });
+    return { hasControls: keys.length, canRandomize, canReset };
+  }, [controls]);
+  if (!hasControls) {
     return [];
   }
   const onReset = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    if (setControlValue && storyId) {
+    if (setControlValue && storyId && controls) {
       const values = resetControlValues(controls);
       setControlValue(storyId, undefined, values);
     }
@@ -38,22 +56,26 @@ export const useControlsActions = (props: UseControlsActionsProps) => {
       window.setTimeout(() => setCopied(false), 1500);
     }
   };
-  return [
+  const actions = [
     {
       node: copied ? 'values copied' : 'copy values',
       onClick: onCopy,
       group: 'controls',
       id: 'copy_controls',
       'aria-label': 'copy control values',
     },
-    {
+  ];
+  if (canReset) {
+    actions.push({
       node: 'reset',
       onClick: onReset,
       group: 'controls',
       id: 'reset',
       'aria-label': 'reset control values to their initial value',
-    },
-    {
+    });
+  }
+  if (canRandomize) {
+    actions.push({
       node: 'randomize',
       group: 'controls',
       onClick: () => {
@@ -63,6 +85,7 @@ export const useControlsActions = (props: UseControlsActionsProps) => {
       },
       id: 'randomize',
       'aria-label': 'generate random values for the component controls',
-    },
-  ];
+    });
+  }
+  return actions;
 };