commit 5a48bd07c637f25e98814b0bb1de3b5f28ee9e24
parent 955b03a413d8c6fd0e8749b7ffe33a2e1d28a90b
Author: Sebastian <sebasjm@gmail.com>
Date: Mon, 6 Dec 2021 11:05:23 -0300
-formatted with prettier
Diffstat:
1 file changed, 115 insertions(+), 60 deletions(-)
diff --git a/packages/merchant-backoffice/src/components/form/InputDate.tsx b/packages/merchant-backoffice/src/components/form/InputDate.tsx
@@ -15,9 +15,9 @@
*/
/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
import { format } from "date-fns";
import { h, VNode } from "preact";
import { useState } from "preact/hooks";
@@ -32,73 +32,128 @@ export interface Props<T> extends InputProps<T> {
withTimestampSupport?: boolean;
}
-export function InputDate<T>({ name, readonly, label, placeholder, help, tooltip, expand, withTimestampSupport }: Props<keyof T>): VNode {
- const [opened, setOpened] = useState(false)
- const i18n = useTranslator()
+export function InputDate<T>({
+ name,
+ readonly,
+ label,
+ placeholder,
+ help,
+ tooltip,
+ expand,
+ withTimestampSupport,
+}: Props<keyof T>): VNode {
+ const [opened, setOpened] = useState(false);
+ const i18n = useTranslator();
const { error, required, value, onChange } = useField<T>(name);
- let strValue = ''
+ let strValue = "";
if (!value) {
- strValue = withTimestampSupport ? 'unknown' : ''
+ strValue = withTimestampSupport ? "unknown" : "";
} else if (value instanceof Date) {
- strValue = format(value, 'yyyy/MM/dd HH:mm:ss')
+ strValue = format(value, "yyyy/MM/dd HH:mm:ss");
} else if (value.t_ms) {
- strValue = value.t_ms === 'never' ?
- (withTimestampSupport ? 'never' : '') :
- format(new Date(value.t_ms), 'yyyy/MM/dd HH:mm:ss')
+ strValue =
+ value.t_ms === "never"
+ ? withTimestampSupport
+ ? "never"
+ : ""
+ : format(new Date(value.t_ms), "yyyy/MM/dd HH:mm:ss");
}
- return <div class="field is-horizontal">
- <div class="field-label is-normal">
- <label class="label">
- {label}
- {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
- <i class="mdi mdi-information" />
- </span>}
- </label>
- </div>
- <div class="field-body is-flex-grow-3">
- <div class="field">
- <div class="field has-addons">
- <p class={expand ? "control is-expanded has-icons-right" : "control has-icons-right"}>
- <input class="input" type="text"
- readonly value={strValue}
- placeholder={placeholder}
- onClick={() => { if (!readonly) setOpened(true) }}
- />
- { required && <span class="icon has-text-danger is-right">
- <i class="mdi mdi-alert" />
- </span> }
- {help}
- </p>
- <div class="control" onClick={() => { if (!readonly) setOpened(true) }}>
- <a class="button is-static" >
- <span class="icon"><i class="mdi mdi-calendar" /></span>
- </a>
+ return (
+ <div class="field is-horizontal">
+ <div class="field-label is-normal">
+ <label class="label">
+ {label}
+ {tooltip && (
+ <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+ <i class="mdi mdi-information" />
+ </span>
+ )}
+ </label>
+ </div>
+ <div class="field-body is-flex-grow-3">
+ <div class="field">
+ <div class="field has-addons">
+ <p
+ class={
+ expand
+ ? "control is-expanded has-icons-right"
+ : "control has-icons-right"
+ }
+ >
+ <input
+ class="input"
+ type="text"
+ readonly
+ value={strValue}
+ placeholder={placeholder}
+ onClick={() => {
+ if (!readonly) setOpened(true);
+ }}
+ />
+ {required && (
+ <span class="icon has-text-danger is-right">
+ <i class="mdi mdi-alert" />
+ </span>
+ )}
+ {help}
+ </p>
+ <div
+ class="control"
+ onClick={() => {
+ if (!readonly) setOpened(true);
+ }}
+ >
+ <a class="button is-static">
+ <span class="icon">
+ <i class="mdi mdi-calendar" />
+ </span>
+ </a>
+ </div>
</div>
+ {error && <p class="help is-danger">{error}</p>}
</div>
- {error && <p class="help is-danger">{error}</p>}
- </div>
- {!readonly && <span data-tooltip={withTimestampSupport ? i18n`change value to unknown date` : i18n`change value to empty`}>
- <button class="button is-info mr-3" onClick={() => onChange(undefined as any)} ><Translate>clear</Translate></button>
- </span>}
- {withTimestampSupport && <span data-tooltip={i18n`change value to never`}>
- <button class="button is-info" onClick={() => onChange({ t_ms: 'never' } as any)}><Translate>never</Translate></button>
- </span>}
+ {!readonly && (
+ <span
+ data-tooltip={
+ withTimestampSupport
+ ? i18n`change value to unknown date`
+ : i18n`change value to empty`
+ }
+ >
+ <button
+ class="button is-info mr-3"
+ onClick={() => onChange(undefined as any)}
+ >
+ <Translate>clear</Translate>
+ </button>
+ </span>
+ )}
+ {withTimestampSupport && (
+ <span data-tooltip={i18n`change value to never`}>
+ <button
+ class="button is-info"
+ onClick={() => onChange({ t_ms: "never" } as any)}
+ >
+ <Translate>never</Translate>
+ </button>
+ </span>
+ )}
+ </div>
+ <DatePicker
+ opened={opened}
+ closeFunction={() => setOpened(false)}
+ dateReceiver={(d) => {
+ if (withTimestampSupport) {
+ onChange({ t_ms: d.getTime() } as any);
+ } else {
+ onChange(d as any);
+ }
+ }}
+ />
</div>
- <DatePicker
- opened={opened}
- closeFunction={() => setOpened(false)}
- dateReceiver={(d) => {
- if (withTimestampSupport) {
- onChange({ t_ms: d.getTime() } as any)
- } else {
- onChange(d as any)
- }
- }}
- />
- </div>;
+ );
}
-
