diff --git a/src/App.tsx b/src/App.tsx index 0de28fa..4193902 100644 --- 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/Pulldown.module.css b/src/components/Pulldown.module.css new file mode 100644 index 0000000..a04fd96 --- /dev/null +++ b/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; +} diff --git a/src/components/Pulldown.tsx b/src/components/Pulldown.tsx new file mode 100644 index 0000000..009a52c --- /dev/null +++ b/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) => void + options: { label: string; value: string | number }[] +} + +export default function Pulldown({ + label, + helpText, + value, + onChange, + options, +}: PulldownProps) { + return ( + <> + + {helpText &&
{helpText}
} + + ) +} diff --git a/src/components/Snippet.tsx b/src/components/Snippet.tsx index 7c5b61a..4b8b347 100644 --- a/src/components/Snippet.tsx +++ b/src/components/Snippet.tsx @@ -5,6 +5,7 @@ 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 @@ -12,6 +13,7 @@ interface SippetProps { 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 ( - { - (filter) => - ((filter === FilterTypes.LIFF && isInLIFF) || (filter === FilterTypes.MINI && isInMINI)) - &&
-
-

- {apiName} - ≥{version} - {loginRequired && Login Required} {inClientOnly && LINE Client only} - {isInLIFF && LIFF} - {isInMINI && MINI} -

-
- {' '} - + {(filter) => + ((filter === FilterTypes.LIFF && isInLIFF) || + (filter === FilterTypes.MINI && isInMINI)) && ( +
+
+

+ {apiName} + ≥{version} + {loginRequired && ( + Login Required + )}{' '} + {inClientOnly && ( + LINE Client only + )} + {isInLIFF && LIFF} + {isInMINI && MINI} +

+
+ {' '} + +
-
- {needRequestPayload && ( -