diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx | 82 |
1 files changed, 51 insertions, 31 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx b/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx index 26d0292d6..b5e0bd52b 100644 --- a/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx +++ b/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx @@ -15,9 +15,9 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ import { ComponentChildren, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { useGroupField } from "./useGroupField.js"; @@ -32,35 +32,55 @@ export interface Props<T> { initialActive?: boolean; } -export function InputGroup<T>({ name, label, children, tooltip, alternative, fixed, initialActive }: Props<keyof T>): VNode { +export function InputGroup<T>({ + name, + label, + children, + tooltip, + alternative, + fixed, + initialActive, +}: Props<keyof T>): VNode { const [active, setActive] = useState(initialActive || fixed); const group = useGroupField<T>(name); - return <div class="card"> - <header class="card-header"> - <p class="card-header-title"> - {label} - {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}> - <i class="mdi mdi-information" /> - </span>} - {group?.hasError && <span class="icon has-text-danger" data-tooltip={tooltip}> - <i class="mdi mdi-alert" /> - </span>} - </p> - { !fixed && <button class="card-header-icon" aria-label="more options" onClick={(): void => setActive(!active)}> - <span class="icon"> - {active ? - <i class="mdi mdi-arrow-up" /> : - <i class="mdi mdi-arrow-down" />} - </span> - </button> } - </header> - {active ? <div class="card-content"> - {children} - </div> : ( - alternative ? <div class="card-content"> - {alternative} - </div> : undefined - )} - </div>; + return ( + <div class="card"> + <header class="card-header"> + <p class="card-header-title"> + {label} + {tooltip && ( + <span class="icon has-tooltip-right" data-tooltip={tooltip}> + <i class="mdi mdi-information" /> + </span> + )} + {group?.hasError && ( + <span class="icon has-text-danger" data-tooltip={tooltip}> + <i class="mdi mdi-alert" /> + </span> + )} + </p> + {!fixed && ( + <button + class="card-header-icon" + aria-label="more options" + onClick={(): void => setActive(!active)} + > + <span class="icon"> + {active ? ( + <i class="mdi mdi-arrow-up" /> + ) : ( + <i class="mdi mdi-arrow-down" /> + )} + </span> + </button> + )} + </header> + {active ? ( + <div class="card-content">{children}</div> + ) : alternative ? ( + <div class="card-content">{alternative}</div> + ) : undefined} + </div> + ); } |