Choose the message to send with ShareTargetPicker from a selection of options

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))

src/components/Pulldown.module.css

@@ -0,0 +1,27 @@
+.label {
+  font-size: 15px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.frame {
+  display: flex;
+  width: 100%;
+}
+
+.helpText {
+  color: rgb(148, 148, 148);
+  font-size: 13px;
+  font-weight: 400;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.select {
+  padding: 4px 12px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 400;
+  border: solid 1px #ddd;
+  border-radius: 5px;
+}

src/components/Pulldown.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import styles from './Pulldown.module.css'
+
+interface PulldownProps {
+  label: string
+  helpText?: string
+  value: number|string
+  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void
+  options: { label: string; value: string | number }[]
+}
+
+export default function Pulldown({
+  label,
+  helpText,
+  value,
+  onChange,
+  options,
+}: PulldownProps) {
+  return (
+    <>
+      <label>
+        {label && <div className={styles.label}>{label}</div>}
+        <div className={styles.frame}>
+          <select className={styles.select} value={value} onChange={onChange}>
+            {options.map((option, i) => (
+              <option key={i} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </label>
+      {helpText && <div className={styles.helpText}>{helpText}</div>}
+    </>
+  )
+}

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>
   )

src/constants.ts

@@ -0,0 +1,55 @@
+export const SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST = [
+  {
+    label: 'text',
+    value: {
+      type: 'text',
+      text: 'Hello, World!',
+    },
+  },
+  {
+    label: 'sticker',
+    value: {
+      type: 'sticker',
+      packageId: '446',
+      stickerId: '1988',
+    },
+  },
+  {
+    label: 'image',
+    value: {
+      type: 'image',
+      originalContentUrl: `${location.href}assets/stp_image.png`,
+      previewImageUrl: `${location.href}assets/stp_image.png`,
+    },
+  },
+  {
+    label: 'video',
+    value: {
+      type: 'video',
+      originalContentUrl: `${location.href}assets/stp_video.mp4`,
+      previewImageUrl: `${location.href}assets/stp_video.mp4`,
+      trackingId: 'track-id',
+    },
+  },
+  {
+    label: 'audio',
+    value: {
+      type: 'audio',
+      originalContentUrl: `${location.href}assets/stp_audio.mp3`,
+      duration: 60000,
+    },
+  },
+  {
+    label: 'location',
+    value: {
+      type: 'location',
+      title: 'my location',
+      address: '〒102-8282 東京都千代田区紀尾井町1番3号',
+      latitude: 35.67966,
+      longitude: 139.73669,
+    },
+  },
+].map(({ label, value }) => ({
+  label,
+  value: JSON.stringify(value, null, 4),
+}))