@thx/controls 15.3.0 → 16.0.0-alpha.23

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 THR Consulting
+Copyright (c) 2021 THR Consulting
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/esm/date/LocalDatePicker/LocalDatePicker.js

@@ -0,0 +1,118 @@
+import { toDate, toLocalDate } from '@thx/date';
+import debug from 'debug';
+import DatePicker from 'react-datepicker';
+import { MaskedDateInput } from './MaskedDateInput.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.date.LocalDatePicker");
+function LocalDatePicker(props) {
+  const _a = props, {
+    minDate,
+    maxDate,
+    value,
+    onChange,
+    onBlur,
+    as,
+    action,
+    actionPosition,
+    className,
+    error,
+    fluid,
+    focus,
+    icon,
+    iconPosition,
+    inverted,
+    label,
+    labelPosition,
+    loading,
+    size,
+    tabIndex,
+    transparent
+  } = _a, rest = __objRest(_a, [
+    "minDate",
+    "maxDate",
+    "value",
+    "onChange",
+    "onBlur",
+    "as",
+    "action",
+    "actionPosition",
+    "className",
+    "error",
+    "fluid",
+    "focus",
+    "icon",
+    "iconPosition",
+    "inverted",
+    "label",
+    "labelPosition",
+    "loading",
+    "size",
+    "tabIndex",
+    "transparent"
+  ]);
+  const selected = value ? toDate(value) : null;
+  const inputProps = {
+    as,
+    action,
+    actionPosition,
+    className,
+    error,
+    fluid,
+    focus,
+    icon,
+    iconPosition,
+    inverted,
+    label,
+    labelPosition,
+    loading,
+    size,
+    tabIndex,
+    transparent
+  };
+  return /* @__PURE__ */ React.createElement(DatePicker, __spreadProps(__spreadValues({}, rest), {
+    selected,
+    onChange: (date) => {
+      if (onChange)
+        onChange(date ? toLocalDate(date) : null);
+    },
+    onBlur,
+    customInput: /* @__PURE__ */ React.createElement(MaskedDateInput, __spreadProps(__spreadValues({}, inputProps), {
+      onBlur
+    })),
+    minDate: minDate ? toDate(minDate) : null,
+    maxDate: maxDate ? toDate(maxDate) : null
+  }));
+}
+
+export { LocalDatePicker };

package/dist/esm/date/LocalDatePicker/MaskedDateInput.js

@@ -0,0 +1,50 @@
+import debug from 'debug';
+import { forwardRef } from 'react';
+import { MaskedInput } from '../../inputs/MaskedInput/MaskedInput.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.date.LocalDatePicker.MaskedDateInput");
+function MaskedDateInputInner(props, ref) {
+  const _a = props, { onChange, name } = _a, rest = __objRest(_a, ["onChange", "name"]);
+  return /* @__PURE__ */ React.createElement(MaskedInput, __spreadProps(__spreadValues({}, rest), {
+    name,
+    mask: { alias: "datetime", inputFormat: "mm/dd/yyyy" },
+    onChange: (value) => {
+      if (onChange)
+        onChange({ target: { value: value || "" } });
+    }
+  }));
+}
+const MaskedDateInput = forwardRef(MaskedDateInputInner);
+
+export { MaskedDateInput };

package/dist/esm/date/LocalMonthSelect/LocalMonthSelect.js

@@ -0,0 +1,68 @@
+import { LocalDate } from '@js-joda/core';
+import debug from 'debug';
+import { Select } from 'semantic-ui-react';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.date.LocalMonthSelect");
+const monthOptions = [
+  { text: "January", value: 1, key: 1 },
+  { text: "February", value: 2, key: 2 },
+  { text: "March", value: 3, key: 3 },
+  { text: "April", value: 4, key: 4 },
+  { text: "May", value: 5, key: 5 },
+  { text: "June", value: 6, key: 6 },
+  { text: "July", value: 7, key: 7 },
+  { text: "August", value: 8, key: 8 },
+  { text: "September", value: 9, key: 9 },
+  { text: "October", value: 10, key: 10 },
+  { text: "November", value: 11, key: 11 },
+  { text: "December", value: 12, key: 12 }
+];
+function LocalMonthSelect(props) {
+  const _a = props, { value, onChange, year, handleBlur } = _a, rest = __objRest(_a, ["value", "onChange", "year", "handleBlur"]);
+  const theYear = year || LocalDate.now().year();
+  return /* @__PURE__ */ React.createElement(Select, __spreadValues({
+    placeholder: "Select Month",
+    options: monthOptions,
+    value: value ? value.monthValue() : "",
+    onChange: (ev, v) => {
+      if (onChange) {
+        if (typeof v.value === "number") {
+          onChange(v ? LocalDate.of(theYear, v.value, 1) : null);
+        } else {
+          onChange(null);
+        }
+      }
+    },
+    onBlur: handleBlur
+  }, rest));
+}
+
+export { LocalMonthSelect };

package/dist/esm/date/LocalTimePicker/LocalTimePicker.js

@@ -0,0 +1,120 @@
+import { LocalTime } from '@js-joda/core';
+import { toDate, toLocalTime } from '@thx/date';
+import debug from 'debug';
+import DatePicker from 'react-datepicker';
+import { MaskedTimeInput } from './MaskedTimeInput.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.date.LocalTimePicker");
+function LocalTimePicker(props) {
+  const _a = props, {
+    value,
+    onChange,
+    as,
+    action,
+    actionPosition,
+    className,
+    disabled,
+    error,
+    fluid,
+    focus,
+    icon,
+    iconPosition,
+    inverted,
+    label,
+    labelPosition,
+    loading,
+    size,
+    tabIndex,
+    transparent
+  } = _a, rest = __objRest(_a, [
+    "value",
+    "onChange",
+    "as",
+    "action",
+    "actionPosition",
+    "className",
+    "disabled",
+    "error",
+    "fluid",
+    "focus",
+    "icon",
+    "iconPosition",
+    "inverted",
+    "label",
+    "labelPosition",
+    "loading",
+    "size",
+    "tabIndex",
+    "transparent"
+  ]);
+  let selected;
+  if (typeof value === "number")
+    selected = toDate(LocalTime.ofSecondOfDay(value));
+  else
+    selected = value ? toDate(value) : null;
+  const inputProps = {
+    as,
+    action,
+    actionPosition,
+    className,
+    disabled,
+    error,
+    fluid,
+    focus,
+    icon,
+    iconPosition,
+    inverted,
+    label,
+    labelPosition,
+    loading,
+    size,
+    tabIndex,
+    transparent
+  };
+  return /* @__PURE__ */ React.createElement(DatePicker, __spreadProps(__spreadValues({}, rest), {
+    selected,
+    onChange: (date) => {
+      if (onChange)
+        onChange(date ? toLocalTime(date) : null);
+    },
+    showTimeSelect: true,
+    showTimeSelectOnly: true,
+    timeIntervals: 15,
+    timeCaption: "Time",
+    dateFormat: "hh:mm aa",
+    customInput: /* @__PURE__ */ React.createElement(MaskedTimeInput, __spreadValues({}, inputProps))
+  }));
+}
+
+export { LocalTimePicker };

package/dist/esm/date/LocalTimePicker/MaskedTimeInput.js

@@ -0,0 +1,46 @@
+import debug from 'debug';
+import { forwardRef } from 'react';
+import { MaskedInput } from '../../inputs/MaskedInput/MaskedInput.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.date.LocalTimePicker.MaskedTimeInput");
+function MaskedTimeInputInner(props, ref) {
+  const _a = props, { onChange } = _a, rest = __objRest(_a, ["onChange"]);
+  return /* @__PURE__ */ React.createElement(MaskedInput, __spreadValues({
+    mask: { alias: "datetime", inputFormat: "hh:MM TT" },
+    onChange: (value) => {
+      if (onChange)
+        onChange({ target: { value: value || "" } });
+    }
+  }, rest));
+}
+const MaskedTimeInput = forwardRef(MaskedTimeInputInner);
+
+export { MaskedTimeInput };

package/dist/esm/date/MonthDayPicker/MonthDayPicker.js

@@ -0,0 +1,130 @@
+import { toDate, toLocalDate } from '@thx/date';
+import debug from 'debug';
+import { Input } from 'semantic-ui-react';
+import DatePicker from 'react-datepicker';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.date.MonthDayPicker");
+const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+function MonthDayHeader(props) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    className: "react-datepicker__current-month"
+  }, months[props.date.getMonth()]), /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: "react-datepicker__navigation react-datepicker__navigation--previous",
+    "aria-label": "Previous Month",
+    onClick: props.decreaseMonth,
+    disabled: props.prevMonthButtonDisabled
+  }, "Previous Month"), /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: "react-datepicker__navigation react-datepicker__navigation--next",
+    "aria-label": "Next Month",
+    onClick: props.increaseMonth,
+    disabled: props.nextMonthButtonDisabled
+  }, "Next Month"));
+}
+function MonthDayPicker(props) {
+  const _a = props, {
+    value,
+    onChange,
+    as,
+    action,
+    actionPosition,
+    className,
+    disabled,
+    error,
+    fluid,
+    focus,
+    icon,
+    iconPosition,
+    inverted,
+    label,
+    labelPosition,
+    loading,
+    size,
+    tabIndex,
+    transparent
+  } = _a, rest = __objRest(_a, [
+    "value",
+    "onChange",
+    "as",
+    "action",
+    "actionPosition",
+    "className",
+    "disabled",
+    "error",
+    "fluid",
+    "focus",
+    "icon",
+    "iconPosition",
+    "inverted",
+    "label",
+    "labelPosition",
+    "loading",
+    "size",
+    "tabIndex",
+    "transparent"
+  ]);
+  const selected = value ? toDate(value) : null;
+  const inputProps = {
+    as,
+    action,
+    actionPosition,
+    className,
+    disabled,
+    error,
+    fluid,
+    focus,
+    icon,
+    iconPosition,
+    inverted,
+    label,
+    labelPosition,
+    loading,
+    size,
+    tabIndex,
+    transparent
+  };
+  return /* @__PURE__ */ React.createElement(DatePicker, __spreadProps(__spreadValues({}, rest), {
+    selected,
+    onChange: (date) => {
+      if (onChange)
+        onChange(date ? toLocalDate(date) : null);
+    },
+    customInput: /* @__PURE__ */ React.createElement(Input, __spreadValues({}, inputProps)),
+    renderCustomHeader: MonthDayHeader,
+    dateFormat: "MMMM d"
+  }));
+}
+
+export { MonthDayPicker };

package/dist/esm/date/MonthYearPicker/MonthYearPicker.js

@@ -0,0 +1,119 @@
+import { LocalDate } from '@js-joda/core';
+import { toDate, toLocalDate } from '@thx/date';
+import debug from 'debug';
+import { Input } from 'semantic-ui-react';
+import DatePicker from 'react-datepicker';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.date.MonthYearPicker");
+function MonthYearPicker(props) {
+  const _a = props, {
+    value,
+    onChange,
+    as,
+    action,
+    actionPosition,
+    className,
+    disabled,
+    error,
+    fluid,
+    focus,
+    icon,
+    iconPosition,
+    inverted,
+    label,
+    labelPosition,
+    loading,
+    size,
+    tabIndex,
+    transparent,
+    minDate,
+    maxDate
+  } = _a, rest = __objRest(_a, [
+    "value",
+    "onChange",
+    "as",
+    "action",
+    "actionPosition",
+    "className",
+    "disabled",
+    "error",
+    "fluid",
+    "focus",
+    "icon",
+    "iconPosition",
+    "inverted",
+    "label",
+    "labelPosition",
+    "loading",
+    "size",
+    "tabIndex",
+    "transparent",
+    "minDate",
+    "maxDate"
+  ]);
+  const selected = value ? toDate(value) : null;
+  const inputProps = {
+    as,
+    action,
+    actionPosition,
+    className,
+    disabled,
+    error,
+    fluid,
+    focus,
+    icon,
+    iconPosition,
+    inverted,
+    label,
+    labelPosition,
+    loading,
+    size,
+    tabIndex,
+    transparent
+  };
+  return /* @__PURE__ */ React.createElement(DatePicker, __spreadProps(__spreadValues({}, rest), {
+    selected,
+    onChange: (date) => {
+      if (onChange)
+        onChange(date ? toLocalDate(date) : void 0);
+    },
+    customInput: /* @__PURE__ */ React.createElement(Input, __spreadValues({}, inputProps)),
+    dateFormat: "MMMM yyyy",
+    showMonthYearPicker: true,
+    minDate: toDate((minDate == null ? void 0 : minDate.withDayOfMonth(1)) || LocalDate.ofEpochDay(0)),
+    maxDate: toDate((maxDate == null ? void 0 : maxDate.plusMonths(1).withDayOfMonth(1).minusDays(1)) || LocalDate.now().plusYears(20))
+  }));
+}
+
+export { MonthYearPicker };