From 96e67a1ddd2df88e5df4ac7fff7c5ee8bdba91ac Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Fri, 3 Jun 2022 16:23:05 +0800 Subject: [PATCH] Add checkout box input --- packages/web/components/elements/Checkbox.tsx | 22 +++--- .../web/components/elements/FormElements.tsx | 75 +++++++++++++++++++ packages/web/components/elements/Table.tsx | 3 +- .../web/components/patterns/FormModal.tsx | 49 +----------- packages/web/pages/settings/webhooks.tsx | 30 +------- 5 files changed, 96 insertions(+), 83 deletions(-) diff --git a/packages/web/components/elements/Checkbox.tsx b/packages/web/components/elements/Checkbox.tsx index ac7f91d7a..f09997077 100644 --- a/packages/web/components/elements/Checkbox.tsx +++ b/packages/web/components/elements/Checkbox.tsx @@ -19,17 +19,21 @@ const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, { color: '#FFFFFF', }) -export const CheckboxComponent:React.FC<{ - checked: boolean; - setChecked:(arg: boolean) => void; -}> = ({checked, setChecked}) => { - const toggleChecked = () => setChecked(!checked); +export const CheckboxComponent: React.FC<{ + checked: boolean + setChecked: (arg: boolean) => void +}> = ({ checked, setChecked }) => { + const toggleChecked = () => setChecked(!checked) return ( - + diff --git a/packages/web/components/elements/FormElements.tsx b/packages/web/components/elements/FormElements.tsx index 6b9acb5e6..723a7d71d 100644 --- a/packages/web/components/elements/FormElements.tsx +++ b/packages/web/components/elements/FormElements.tsx @@ -1,4 +1,20 @@ import { styled } from '../tokens/stitches.config' +import { useState } from 'react' +import Checkbox from './Checkbox' + +export interface FormInputProps { + name: string + label: string + value?: any + onChange?: (value: any) => void + type?: string + placeholder?: string + disabled?: boolean + hidden?: boolean + required?: boolean + css?: any + labels?: string[] +} export const FormInput = styled('input', { border: 'none', @@ -19,3 +35,62 @@ export const BorderedFormInput = styled(FormInput, { border: `1px solid $grayBorder`, p: '$3', }) + +export function GeneralFormInput(props: FormInputProps): JSX.Element { + const [input, setInput] = useState(props) + + if (props.type === 'checkbox') { + return ( +
+ {input.labels?.map((label, index) => ( + { + return + }) + } + > + {label} + + ))} +
+ ) + } else { + return ( + { + if (input.onChange) { + // input.value = event.target.value + setInput(input) + input.onChange(event.target.value) + } + }} + disabled={input.disabled} + hidden={input.hidden} + required={input.required} + css={{ + border: '1px solid $grayBorder', + borderRadius: '8px', + width: '100%', + bg: 'transparent', + fontSize: '16px', + textIndent: '8px', + marginBottom: '2px', + color: '$grayTextContrast', + '&:focus': { + outline: 'none', + boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)', + }, + }} + name={input.name} + /> + ) + } +} diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx index ede6836cc..c4e79ef36 100644 --- a/packages/web/components/elements/Table.tsx +++ b/packages/web/components/elements/Table.tsx @@ -221,7 +221,8 @@ export function Table(props: TableProps): JSX.Element { style="ctaWhite" css={{ mr: '$1', background: '$labelButtonsBg' }} onClick={() => { - props.onEdit && props.onEdit(props.rows.get(key)) + props.onEdit && + props.onEdit({ ...props.rows.get(key), id: key }) }} > diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx index 14244a4c0..c6a3592c2 100644 --- a/packages/web/components/patterns/FormModal.tsx +++ b/packages/web/components/patterns/FormModal.tsx @@ -7,22 +7,10 @@ import { Box, HStack, VStack } from '../elements/LayoutPrimitives' import { Button } from '../elements/Button' import { StyledText } from '../elements/StyledText' import { useState } from 'react' -import { FormInput } from '../elements/FormElements' +import { FormInputProps, GeneralFormInput } from '../elements/FormElements' import { CrossIcon } from '../elements/images/CrossIcon' import { theme } from '../tokens/stitches.config' -export interface FormInputProps { - name: string - label: string - value?: any - onChange?: (value: any) => void - type?: string - placeholder?: string - disabled?: boolean - hidden?: boolean - required?: boolean -} - export interface FormModalProps { inputs?: FormInputProps[] title: string @@ -89,40 +77,7 @@ export function FormModal(props: FormModalProps): JSX.Element { - { - if (input.onChange) { - inputs[index].value = event.target.value - setInputs(inputs) - input.onChange( - event.target.value || event.target.checked - ) - } - }} - disabled={input.disabled} - hidden={input.hidden} - required={input.required} - checked={input.value} - css={{ - border: '1px solid $grayBorder', - borderRadius: '8px', - width: '100%', - bg: 'transparent', - fontSize: '16px', - textIndent: '8px', - marginBottom: '2px', - color: '$grayTextContrast', - '&:focus': { - outline: 'none', - boxShadow: - '0px 0px 2px 2px rgba(255, 234, 159, 0.56)', - }, - }} - /> + ))} diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 105b25c26..324aefd5c 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -10,8 +10,9 @@ import { useMemo, useState } from 'react' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { deleteWebhookMutation } from '../../lib/networking/mutations/deleteWebhookMutation' -import { FormInputProps, FormModal } from '../../components/patterns/FormModal' +import { FormModal } from '../../components/patterns/FormModal' import { setWebhookMutation } from '../../lib/networking/mutations/setWebhookMutation' +import { FormInputProps } from '../../components/elements/FormElements' interface Webhook { id?: string @@ -34,18 +35,11 @@ export default function Webhooks(): JSX.Element { 'PAGE_CREATED', 'HIGHLIGHT_CREATED', ]) - const [enabled, setEnabled] = useState(true) const [contentType, setContentType] = useState('application/json') const [method, setMethod] = useState('POST') const [formInputs, setFormInputs] = useState([]) - const [headers, setHeaders] = useState([ - 'URL', - 'Event Types', - 'Method', - 'Content Type', - // 'Enabled', - ]) + const headers = ['URL', 'Event Types', 'Method', 'Content Type'] const rows = useMemo(() => { const rows = new Map() webhooks.forEach((webhook) => @@ -54,7 +48,6 @@ export default function Webhooks(): JSX.Element { eventTypes: webhook.eventTypes.join(', '), method: webhook.method, contentType: webhook.contentType, - // enabled: webhook.enabled ? 'Yes' : 'No', }) ) return rows @@ -73,7 +66,7 @@ export default function Webhooks(): JSX.Element { } async function onAdd(): Promise { - const result = await setWebhookMutation({ url, eventTypes, enabled }) + const result = await setWebhookMutation({ url, eventTypes }) if (result) { showSuccessToast('Added', { position: 'bottom-right' }) } else { @@ -87,7 +80,6 @@ export default function Webhooks(): JSX.Element { id: onEditWebhook?.id, url, eventTypes, - enabled, }) if (result) { showSuccessToast('Updated', { position: 'bottom-right' }) @@ -170,13 +162,6 @@ export default function Webhooks(): JSX.Element { value: contentType, disabled: true, }, - // { - // label: 'Enabled', - // name: 'enabled', - // type: 'checkbox', - // onChange: setEnabled, - // value: enabled, - // }, ]) setAddModelOpen(true) }} @@ -208,13 +193,6 @@ export default function Webhooks(): JSX.Element { value: contentType, disabled: true, }, - // { - // label: 'Enabled', - // name: 'enabled', - // type: 'checkbox', - // onChange: setEnabled, - // value: webhook?.enabled === 'Yes', - // }, ]) setOnEditWebhook(webhook) }}