Change Snippet to accept pulldownOptions and allow selecting the payload

line · Aug 13, 2024 · 72a5063 · 72a5063
1 parent ead8198
commit 72a5063
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 68 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,6 +6,7 @@ import Snippet from './components/Snippet'
 import Input from './components/Input'
 import { FilterContext, FilterTypes } from './Context'
 import qrCode from './qr-code.png'
+import { SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST } from './constants'
 
 const isMINI = new URLSearchParams(location.search).has('mini')
 const filter = isMINI ? FilterTypes.MINI : FilterTypes.LIFF
@@ -225,16 +226,8 @@ function App() {
           docUrl="https://developers.line.biz/en/reference/liff/#share-target-picker"
           needRequestPayload={true}
           hideResponse={true}
-          defaultRequestPayload={JSON.stringify(
-            [
-              {
-                type: 'text',
-                text: 'Hello, World!',
-              },
-            ],
-            null,
-            4
-          )}
+          defaultRequestPayload={SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST[0].value}
+          pulldownOptions={SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST}
           skipAutoRun={true}
           runner={async (options) => {
             return await liff.shareTargetPicker(JSON.parse(options))

diff --git a/src/components/Snippet.tsx b/src/components/Snippet.tsx
@@ -5,13 +5,15 @@ import styles from './Snippet.module.css'
 import Tag from './Tag'
 import TextArea from './TextArea'
 import { FilterContext, FilterTypes } from '../Context'
+import Pulldown from './Pulldown'
 
 interface SippetProps {
   apiName: string
   version: string
   docUrl: string
   needRequestPayload?: boolean
   defaultRequestPayload?: string
+  pulldownOptions?: { label: string; value: string }[]
   useTextareaForResponse?: boolean
   skipAutoRun?: boolean
   hideResponse?: boolean
@@ -26,9 +28,9 @@ interface RunnerError extends Error {
   message: string
 }
 
-const primaryRed = '#eb4e3d';
-const primaryBlue = '#6fedd6';
-const primaryOrange = '#ff9551';
+const primaryRed = '#eb4e3d'
+const primaryBlue = '#6fedd6'
+const primaryOrange = '#ff9551'
 
 export default function Snippet({
   apiName,
@@ -40,10 +42,11 @@ export default function Snippet({
   needRequestPayload,
   useTextareaForResponse,
   defaultRequestPayload,
+  pulldownOptions,
   loginRequired,
   inClientOnly,
   isInLIFF = true,
-  isInMINI = true
+  isInMINI = true,
 }: SippetProps) {
   const [response, setResponse] = useState('')
   const [payload, setPayload] = useState(defaultRequestPayload || '')
@@ -71,64 +74,84 @@ export default function Snippet({
 
   return (
     <FilterContext.Consumer>
-      {
-        (filter) => 
-          ((filter === FilterTypes.LIFF && isInLIFF) || (filter === FilterTypes.MINI && isInMINI))
-          && <div className={styles.snippet}>
-          <div className={styles.head}>
-            <h2 className={styles.title}>
-              <span className={styles.text}>{apiName}</span>
-              <Tag>≥{version}</Tag>
-              {loginRequired && <Tag backgroundColor={primaryRed}>Login Required</Tag>} {inClientOnly && <Tag backgroundColor={primaryRed}>LINE Client only</Tag>}
-              {isInLIFF && <Tag backgroundColor={primaryBlue}>LIFF</Tag>}
-              {isInMINI && <Tag backgroundColor={primaryOrange}>MINI</Tag>}
-            </h2>
-            <div className={styles.action}>
-              <Button
-                appearance="outlined"
-                variant="primary"
-                size="S"
-                aria-disabled="false"
-                onClick={openDoc}>
-                DOCUMENT
-              </Button>{' '}
-              <Button
-                variant="primary"
-                size="S"
-                onClick={() => {
-                  callRunner()
-                }}>
-                RUN
-              </Button>
+      {(filter) =>
+        ((filter === FilterTypes.LIFF && isInLIFF) ||
+          (filter === FilterTypes.MINI && isInMINI)) && (
+          <div className={styles.snippet}>
+            <div className={styles.head}>
+              <h2 className={styles.title}>
+                <span className={styles.text}>{apiName}</span>
+                <Tag>≥{version}</Tag>
+                {loginRequired && (
+                  <Tag backgroundColor={primaryRed}>Login Required</Tag>
+                )}{' '}
+                {inClientOnly && (
+                  <Tag backgroundColor={primaryRed}>LINE Client only</Tag>
+                )}
+                {isInLIFF && <Tag backgroundColor={primaryBlue}>LIFF</Tag>}
+                {isInMINI && <Tag backgroundColor={primaryOrange}>MINI</Tag>}
+              </h2>
+              <div className={styles.action}>
+                <Button
+                  appearance="outlined"
+                  variant="primary"
+                  size="S"
+                  aria-disabled="false"
+                  onClick={openDoc}>
+                  DOCUMENT
+                </Button>{' '}
+                <Button
+                  variant="primary"
+                  size="S"
+                  onClick={() => {
+                    callRunner()
+                  }}>
+                  RUN
+                </Button>
+              </div>
             </div>
-          </div>
-          {needRequestPayload && (
-            <TextArea
-              label="Arguments"
-              helpText="Enter the request payload for API request"
-              value={payload}
-              onChange={(e) => setPayload(e?.currentTarget?.value)}
-              rows={4}
-            />
-          )}
-          {!hideResponse &&
-            (useTextareaForResponse ? (
+            {needRequestPayload && pulldownOptions ? (
+              <>
+                <Pulldown
+                  label="Arguments"
+                  helpText="Choose the request payload for API request"
+                  value={payload}
+                  onChange={(e) => setPayload(e.currentTarget.value)}
+                  options={pulldownOptions.map(({ label, value }) => ({
+                    label,
+                    value,
+                  }))}
+                />
+                <TextArea value={payload} readonly={true} rows={4} />
+              </>
+            ) : (
               <TextArea
-                label="Response"
-                helpText="Run this API to get the response"
-                value={response}
+                label="Arguments"
+                helpText="Enter the request payload for API request"
+                value={payload}
+                onChange={(e) => setPayload(e?.currentTarget?.value)}
                 rows={4}
-                readonly={true}
               />
-            ) : (
-              <Input
-                label="Response"
-                helpText="Run this API to get the response"
-                readonly={true}
-                value={response}
-              />
-            ))}
-        </div>
+            )}
+            {!hideResponse &&
+              (useTextareaForResponse ? (
+                <TextArea
+                  label="Response"
+                  helpText="Run this API to get the response"
+                  value={response}
+                  rows={4}
+                  readonly={true}
+                />
+              ) : (
+                <Input
+                  label="Response"
+                  helpText="Run this API to get the response"
+                  readonly={true}
+                  value={response}
+                />
+              ))}
+          </div>
+        )
       }
     </FilterContext.Consumer>
   )