Handle Visible state

albanian-xrm · Feb 27, 2022 · 4761d08 · 4761d08
1 parent 621274e
commit 4761d08
Show file tree

Hide file tree

Showing 12 changed files with 189 additions and 148 deletions.
diff --git a/App.controller.ts b/App.controller.ts
@@ -1,19 +1,23 @@
 import { useState, useEffect, useMemo } from 'react';
 import { IAppProps } from '@albanian-xrm/styled-switch/App.types';
+import useSwitchStyle from '@albanian-xrm/styled-switch/hooks/useSwitchStyle';
 
 const useAppController = ({
   disabled: disabledProp,
   disabledNotifier,
   initialValue,
   notifier,
   onValueChanged,
-  styles,
+  initialStyles,
+  initialVisible,
   stylesNotifier,
+  visibleNotifier,
 }: IAppProps) => {
   const [value, setValue] = useState(initialValue);
   const [disabled, setDisabled] = useState(disabledProp);
-  const [context, setContext] = useState(styles);
-  const [handlerId, disabledHandlerId, stylesHandlerId] = useMemo(() => {
+  const [visible, setVisible] = useState(initialVisible);
+  const [stylesState, setStyles] = useState(initialStyles);
+  const [handlerId, disabledHandlerId, stylesHandlerId, visibleHandlerId] = useMemo(() => {
     return [
       notifier.subscribe((updatedValue) => {
         setValue(updatedValue);
@@ -22,10 +26,13 @@ const useAppController = ({
         setDisabled(updatedValue);
       }),
       stylesNotifier.subscribe((updatedValue) => {
-        setContext(updatedValue);
+        setStyles(updatedValue);
+      }),
+      visibleNotifier.subscribe((updatedValue) => {
+        setVisible(updatedValue);
       }),
     ];
-  }, [notifier, disabledNotifier, stylesNotifier]);
+  }, [notifier, disabledNotifier, stylesNotifier, visibleNotifier]);
   const onChecked = (checked: boolean) => {
     setValue((oldValue) => {
       onValueChanged(checked);
@@ -37,14 +44,27 @@ const useAppController = ({
       notifier.unsubscribe(handlerId);
       disabledNotifier.unsubscribe(disabledHandlerId);
       stylesNotifier.unsubscribe(stylesHandlerId);
+      visibleNotifier.unsubscribe(visibleHandlerId);
     };
   }, [handlerId, disabledHandlerId, stylesHandlerId]);
 
+  const { FalseHandleImage, TrueHandleImage, iconWidth, Height, Width } = useSwitchStyle(stylesState);
+
+  const styles = {
+    ...stylesState,
+    FalseHandleImage,
+    Height,
+    iconWidth,
+    TrueHandleImage,
+    Width,
+  };
+
   return {
     disabled,
     onChecked,
     value,
-    context,
+    styles,
+    visible,
   };
 };
 

diff --git a/App.tsx b/App.tsx
@@ -3,14 +3,13 @@ import React from 'react';
 import { IAppProps } from '@albanian-xrm/styled-switch/App.types';
 import useAppController from '@albanian-xrm/styled-switch/App.controller';
 import UISwitch from '@albanian-xrm/styled-switch/UISwitch';
-import StyleContext from './StyleContext';
 
 const App = (props: IAppProps) => {
-  const { context, disabled, onChecked, value } = useAppController(props);
-  return (
-    <StyleContext.Provider value={context}>
-      <UISwitch checked={value} disabled={disabled} onChange={(event, checked) => onChecked(checked)} />
-    </StyleContext.Provider>
+  const { styles, disabled, onChecked, value, visible } = useAppController(props);
+  return visible ? (
+    <UISwitch styles={styles} checked={value} disabled={disabled} onChange={(event, checked) => onChecked(checked)} />
+  ) : (
+    <></>
   );
 };
 

diff --git a/App.types.ts b/App.types.ts
@@ -1,20 +1,22 @@
-import { IHandler, ISubscriber, SwitchValue } from "@albanian-xrm/styled-switch/notifier";
-import { IInputs } from "@albanian-xrm/styled-switch/generated/ManifestTypes";
+import { IHandler, ISubscriber, SwitchValue } from '@albanian-xrm/styled-switch/notifier';
+import { IInputs } from '@albanian-xrm/styled-switch/generated/ManifestTypes';
 
-type IRawInputs = Omit<{[P in keyof IInputs]: IInputs[P]['raw']},'Value'>;
+type IRawInputs = Omit<{ [P in keyof IInputs]: IInputs[P]['raw'] }, 'Value'>;
 
 export interface IStyledSwitchProps extends IRawInputs {
-    Height?: number;
-    Width?: number;
+  Height?: number;
+  Width?: number;
+  iconWidth?: number;
 }
 
 export interface IAppProps {
-    styles: IStyledSwitchProps;   
-    initialValue: SwitchValue;
-    disabled?: boolean;
-    onValueChanged: IHandler<SwitchValue>;
-    notifier: ISubscriber<SwitchValue>;
-    disabledNotifier: ISubscriber<boolean>;
-    stylesNotifier: ISubscriber<IStyledSwitchProps>;
+  initialStyles: IStyledSwitchProps;
+  initialValue: SwitchValue;
+  initialVisible: boolean;
+  disabled?: boolean;
+  onValueChanged: IHandler<SwitchValue>;
+  notifier: ISubscriber<SwitchValue>;
+  disabledNotifier: ISubscriber<boolean>;
+  stylesNotifier: ISubscriber<IStyledSwitchProps>;
+  visibleNotifier: ISubscriber<boolean>;
 }
-
diff --git a/ControlManifest.Input.xml b/ControlManifest.Input.xml
@@ -7,7 +7,7 @@
     display-name-key="Control_Display_Name_Key"
     namespace="AlbanianXrm"
     preview-image="img\preview-image.png"
-    version="1.0.0"
+    version="1.0.1"
   >
     <external-service-usage enabled="false" />
     <property
@@ -29,8 +29,8 @@
     />
     <property
       name="FalseHandleImage"
-      display-name-key="False_Image_Display_Key"
-      description-key="False_Image_Desc_Key"
+      display-name-key="False_Handle_Image_Display_Key"
+      description-key="False_Handle_Image_Desc_Key"
       of-type="SingleLine.Text"
       usage="input"
       required="false"
@@ -56,8 +56,8 @@
     />
     <property
       name="TrueHandleImage"
-      display-name-key="True_Image_Display_Key"
-      description-key="True_Image_Desc_Key"
+      display-name-key="True_Handle_Image_Display_Key"
+      description-key="True_Handle_Image_Desc_Key"
       of-type="SingleLine.Text"
       usage="input"
       required="false"

diff --git a/README.md b/README.md
@@ -7,4 +7,22 @@ To use the component follow these steps:
 3. The component is compatible with Canvas apps too
 4. Enjoy!
 
+You can find some sample configurations on the wiki!
+
+![image](https://user-images.githubusercontent.com/11160171/151673588-c9ee5137-137c-4203-9ac0-df1a79167b18.png)
+
+## Canvas App
+We can configure a control as follows:
+
+![image](https://user-images.githubusercontent.com/11160171/151232654-c9269bc1-3995-41be-82c3-5d9ba909e6d7.png)
+![image](https://user-images.githubusercontent.com/11160171/151233133-7746a35f-0d51-400c-8f49-0823aeaa9b54.png)
+
+## Model Driven Form
+The component can be used to customize TwoOption fields in a model driven form too.
+
+![image](https://user-images.githubusercontent.com/11160171/151233297-d3285c82-0ffb-4918-97ce-c11e18f0315f.png)
+
+## What does the solution contain?
+![image](https://user-images.githubusercontent.com/11160171/151513756-0f4a0db0-a401-480c-a44f-00cf3b957a37.jpg)
+
 If you would like to build components with this kind of quality, get in touch with us.
diff --git a/StyleContext.ts b/StyleContext.ts
@@ -1,13 +1,13 @@
-import {createContext} from 'react';
+import { createContext } from 'react';
 import { IStyledSwitchProps } from '@albanian-xrm/styled-switch/App.types';
 
 const StyleContext = createContext<IStyledSwitchProps>({
-    FalseHandleFill: null,
-    FalseHandleImage: null,
-    FalseTrackFill: null,
-    TrueHandleFill: null,
-    TrueHandleImage: null,
-    TrueTrackFill: null
+  FalseHandleFill: null,
+  FalseHandleImage: null,
+  FalseTrackFill: null,
+  TrueHandleFill: null,
+  TrueHandleImage: null,
+  TrueTrackFill: null,
 });
 
-export default StyleContext;
+export default StyleContext;
diff --git a/UISwitch.tsx b/UISwitch.tsx
@@ -1,13 +1,11 @@
-import { useContext, useMemo } from 'react';
-
 import Switch from '@mui/material/Switch/Switch';
 import styled from '@mui/material/styles/styled';
 
-import StyleContext from '@albanian-xrm/styled-switch/StyleContext';
-
-const ASPECT_RATIO = 2.5;
+import { IStyledSwitchProps } from '@albanian-xrm/styled-switch/App.types';
 
-const UISwitch = styled(Switch)(() => {
+const UISwitch = styled(Switch, {
+  shouldForwardProp: (prop) => prop != 'styles',
+})(({ styles }: { styles: IStyledSwitchProps }) => {
   let {
     FalseHandleFill,
     FalseHandleImage,
@@ -17,14 +15,8 @@ const UISwitch = styled(Switch)(() => {
     TrueTrackFill,
     TrueHandleImage,
     Width: width = 62,
-  } = useContext(StyleContext);
-
-  if (width < height * ASPECT_RATIO && width > 0) {
-    height = Math.floor(width / ASPECT_RATIO);
-  }
-  if (height > 0) {
-    width = height * ASPECT_RATIO;
-  }
+    iconWidth = 0,
+  } = styles;
 
   if (!FalseHandleFill || FalseHandleFill[0] !== '#') {
     FalseHandleFill = '#1d00a3';
@@ -40,36 +32,6 @@ const UISwitch = styled(Switch)(() => {
   }
 
   const padding = Math.floor((height - 4) / 4);
-  const iconWidth = height - 2 * padding;
-
-  const falseHandleImage = useMemo(() => {
-    const parser = new DOMParser();
-    let svg = parser.parseFromString(FalseHandleImage || '', 'image/svg+xml');
-    if (svg.documentElement.tagName !== 'svg') {
-      svg = parser.parseFromString(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#ff0" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>',
-        'image/svg+xml',
-      );
-    }
-    svg.documentElement.setAttribute('height', '' + iconWidth);
-    svg.documentElement.setAttribute('width', '' + iconWidth);
-    return `url('data:image/svg+xml;utf8,${encodeURIComponent(svg.documentElement.outerHTML || '')}')`;
-  }, [FalseHandleImage, height, padding, iconWidth]);
-
-  const trueHandleImage = useMemo(() => {
-    const parser = new DOMParser();
-    let svg = parser.parseFromString(TrueHandleImage || '', 'image/svg+xml');
-
-    if (svg.documentElement.tagName !== 'svg') {
-      svg = parser.parseFromString(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#fff" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>',
-        'image/svg+xml',
-      );
-    }
-    svg.documentElement.setAttribute('height', '' + iconWidth);
-    svg.documentElement.setAttribute('width', '' + iconWidth);
-    return `url('data:image/svg+xml;utf8,${encodeURIComponent(svg.documentElement.outerHTML || '')}')`;
-  }, [TrueHandleImage, height, padding, iconWidth]);
 
   return {
     width,
@@ -85,7 +47,7 @@ const UISwitch = styled(Switch)(() => {
           backgroundColor: TrueHandleFill,
         },
         '& .MuiSwitch-thumb:before': {
-          backgroundImage: trueHandleImage,
+          backgroundImage: TrueHandleImage,
         },
         '& + .MuiSwitch-track': {
           opacity: 1,
@@ -106,7 +68,7 @@ const UISwitch = styled(Switch)(() => {
         top: 0,
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
-        backgroundImage: falseHandleImage,
+        backgroundImage: FalseHandleImage,
       },
     },
     '& .MuiSwitch-track': {

diff --git a/banner.ts b/banner.ts