Improve example & add callback note on readme

patelmayankce · Jan 1, 2020 · d60d701 · d60d701
1 parent 5f01fee
commit d60d701
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -50,7 +50,7 @@ class Example extends React.Component {
 |     designProp.scale    |  number  |             1            |        The scale of the button image. The minimum and maximum values are 1 and 6, respectively.       |
 |     designProp.locale    |  string  |             en_US            |        The language used for text on the button.     |
 |     render    |  function  |             -            |        Render prop to use a custom element, use renderProps.onClick   |
-|     callback    |  function  |             -            |      -   |
+|     callback    |  function  |             -            |      callback only work with Response Mode query.   |
 
 
 ## Production Bundle

diff --git a/example/src/App.js b/example/src/App.js
@@ -12,7 +12,7 @@ const App = () => {
   const [settings, setSettings] = useState({
     clientId: 'com.react.apple.login',
     redirectURI: 'https://redirectUrl.com',
-    scope: 'name email',
+    scope: '',
     state: '',
     responseType: 'code',
     responseMode: 'query',
@@ -30,25 +30,25 @@ const App = () => {
   });
 
   useEffect(() => {
+
     const buildDesignProps = (designProps) => {
-      let string = `{`;
+      let string = ` {`;
       Object.keys(designProps).map((prop) => {
         string +=`
-          ${prop}: ${(typeof designProps[prop] === 'string') ? `${ JSON.stringify(designProps[prop])}` : JSON.stringify(designProps[prop])},`;
+           ${prop}: ${(typeof designProps[prop] === 'string') ? `${ JSON.stringify(designProps[prop])}` : JSON.stringify(designProps[prop])},`;
       });
-      string += `}`;
+      string += ` \n         }`;
       return string;
     }
     const buildProps = `${Object.keys(settings).reduce((string, prop) => (
-      `${string}
-       ${prop === 'designProp' ? `${prop}={
-        ${buildDesignProps(settings[prop])}
-        }` : `${prop}={${JSON.stringify(settings[prop])}}`}`
+      `${string} ${(settings[prop] !== '') ? `
+      ${(prop === 'designProp') ? `${prop}={
+       ${buildDesignProps(settings[prop])}
+       }` : `${prop}={${JSON.stringify(settings[prop])}}`}` : ``}`
     ), `
       <AppleLogin `)}
       />`;
-setCodeString(`
-import AppleLogin from 'react-apple-login';
+setCodeString(`import AppleLogin from 'react-apple-login';
 export default class LoginWithApple extends Component {
   render() {
     return (${buildProps}
@@ -68,15 +68,24 @@ export default class LoginWithApple extends Component {
   }
 
   const changeSettings = (key, e, isDesignSetting) => {
+    let value = (key === 'height' || key === 'width' || key === 'border_radius' || key === 'scale') ? Number(e.target.value) : e.target.value
+    if(value === 'true' || value === 'false'){
+      value = JSON.parse(value);
+    }
     if (isDesignSetting) {
       setSettings({
         ...settings, designProp: {
           ...settings.designProp,
-          [key]: (key === 'height' || key === 'width' || key === 'border_radius' || key === 'scale') ? Number(e.target.value) : e.target.value
+          [key]: value
         }
       });
     } else {
-      setSettings({ ...settings, [key]: e.target.value });
+
+      if(key === 'responseMode' && value === 'query'){
+        setSettings({ ...settings, scope: "" , [key]: value });
+      }else{
+        setSettings({ ...settings, [key]: value });
+      }
     }
   }
 
@@ -120,14 +129,6 @@ export default class LoginWithApple extends Component {
                   <label>Redirect URI</label>
                   <input type="text" className="form-control" name="redirectURI" placeholder="Enter Redirect URI" value={settings.redirectURI} onChange={(e) => changeSettings('redirectURI', e)} />
                 </div>
-                <div className="form-group">
-                  <label>Scope</label>
-                  <input type="text" className="form-control" name="scope" placeholder="Enter Scope" value={settings.scope} onChange={(e) => changeSettings('scope', e)} />
-                </div>
-                <div className="form-group">
-                  <label>State</label>
-                  <input type="text" className="form-control" name="state" placeholder="Enter State" value={settings.state} onChange={(e) => changeSettings('state', e)} />
-                </div>
                 <div className="form-group">
                   <label>Response Type</label>
                   <select className="form-control" name="responseType" value={settings.responseType} onChange={(e) => changeSettings('responseType', e)}>
@@ -143,6 +144,14 @@ export default class LoginWithApple extends Component {
                     <option>form_post</option>
                   </select>
                 </div>
+                <div className="form-group">
+                  <label>Scope</label>
+                  <input type="text" disabled={settings.responseMode === 'query'? true : false} className="form-control" name="scope" placeholder="Enter Scope" value={settings.scope} onChange={(e) => changeSettings('scope', e)} />
+                </div>
+                <div className="form-group">
+                  <label>State</label>
+                  <input type="text" className="form-control" name="state" placeholder="Enter State" value={settings.state} onChange={(e) => changeSettings('state', e)} />
+                </div>
                 <div className="form-group">
                   <label>Nonce</label>
                   <input type="text" className="form-control" name="nonce" placeholder="Enter Nonce" value={settings.nonce} onChange={(e) => changeSettings('nonce', e)} />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-apple-login",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A Apple Log-in Component for React",
   "author": "Mayank Patel <patelmayankce@gmail.com>",
   "license": "MIT",