@unicef/material-ui 0.12.0 → 0.12.1

package/lib/dev.js

@@ -53983,6 +53983,168 @@ ActiveAutoComplete.defaultProps = {
   usedItemIds: []
 };
 
+var styles$1a = {
+  labelRoot: {
+    pointerEvents: 'auto',
+    display: 'flex',
+    alignItems: 'center'
+  }
+};
+
+var useStyles$A = makeStyles$1(function (theme) {
+  return {
+    textField: {
+      marginTop: theme.spacing(0.25),
+      marginBottom: theme.spacing(0.25)
+    },
+    notchedOutline: {
+      borderRadius: 2,
+      borderColor: 'transparent'
+    },
+    inputPaddingWithoutLabel: function inputPaddingWithoutLabel(props) {
+      return {
+        padding: props.inputPadding ? props.inputPadding : '2px 2px 2px 2px',
+        height: 'auto'
+      };
+    },
+    inputPaddingWithLabel: function inputPaddingWithLabel(props) {
+      return {
+        padding: props.inputPadding ? props.inputPadding : '18.5px 14px',
+        height: 'auto'
+      };
+    },
+    input: function input(props) {
+      return _extends$1({}, theme.typography[props.typographyVariant]);
+    },
+    inputHover: {
+      '&:hover $notchedOutline': {
+        borderColor: 'transparent'
+      }
+    },
+    icon: {
+      display: 'none'
+    },
+    showIcon: {
+      display: 'block'
+    }
+  };
+});
+
+/**
+ * ActiveKeyboardDateTimePicker is a customized [Material Ui KeyboardDateTimePicker]('https://material-ui-pickers.dev/api/KeyboardDateTimePicker') for more details
+ */
+function ActiveKeyboardDateTimePicker(props) {
+  var classes = useStyles$A(props);
+  var autoOk = props.autoOk,
+      variant = props.variant,
+      inputVariant = props.inputVariant,
+      readOnly = props.readOnly,
+      interactiveMode = props.interactiveMode,
+      InputLabelProps = props.InputLabelProps,
+      className = props.className,
+      inputProps = props.inputProps,
+      InputProps = props.InputProps,
+      placeholder = props.placeholder,
+      showLabelHelp = props.showLabelHelp,
+      InputLabelHelpProps = props.InputLabelHelpProps,
+      label = props.label,
+      others = objectWithoutProperties(props, ['autoOk', 'variant', 'inputVariant', 'readOnly', 'interactiveMode', 'InputLabelProps', 'className', 'inputProps', 'InputProps', 'placeholder', 'showLabelHelp', 'InputLabelHelpProps', 'label']);
+
+  var _React$useState = React__default.useState(classes.icon),
+      _React$useState2 = slicedToArray(_React$useState, 2),
+      hideIcon = _React$useState2[0],
+      setHideIcon = _React$useState2[1];
+
+  var inputPaddingClass = props.label ? classes.inputPaddingWithLabel : classes.inputPaddingWithoutLabel;
+  var finalPlaceholder = readOnly ? null : placeholder;
+
+  var onMouseOver = function onMouseOver() {
+    if (!readOnly) {
+      setHideIcon(classes.showIcon);
+    }
+    return props.onMouseOver && props.onMouseOver;
+  };
+
+  var handleBlur = function handleBlur(event) {
+    event.preventDefault();
+    setHideIcon(classes.icon);
+    return props.onBlur && props.onBlur;
+  };
+
+  return React__default.createElement(
+    MuiPickersUtilsProvider,
+    { utils: DateFnsUtils },
+    React__default.createElement(KeyboardDateTimePicker, _extends$1({
+      autoOk: autoOk,
+      variant: variant,
+      inputVariant: inputVariant,
+      placeholder: finalPlaceholder,
+      className: classes.textField + ' ' + (className && className),
+      InputLabelProps: _extends$1({
+        shrink: true,
+        style: _extends$1({}, styles$1a.labelRoot)
+      }, InputLabelProps),
+      inputProps: _extends$1({
+        readOnly: Boolean(readOnly),
+        disabled: Boolean(readOnly)
+      }, inputProps),
+      readOnly: readOnly,
+      KeyboardButtonProps: {
+        classes: {
+          root: '' + (!interactiveMode && !readOnly ? '' : hideIcon)
+        }
+      },
+      InputProps: _extends$1({
+        classes: {
+          root: classes.input + ' ' + (readOnly && classes.inputHover),
+          notchedOutline: '' + (!interactiveMode && !readOnly ? '' : classes.notchedOutline),
+          input: inputPaddingClass
+        }
+      }, InputProps),
+      label: showLabelHelp ? React__default.createElement(InputLabelHelp, _extends$1({ inputLabel: label }, InputLabelHelpProps)) : label,
+      onMouseOver: onMouseOver,
+      onMouseLeave: handleBlur,
+      onBlur: handleBlur
+    }, others))
+  );
+}
+
+ActiveKeyboardDateTimePicker.propTypes = {
+  /** AutoOk on date select */
+  autoOk: PropTypes__default.bool,
+  /** Picker container option variant : 'dialog' | 'inline' | 'static' */
+  variant: PropTypes__default.string,
+  /** Material ui textfield variant */
+  inputVariant: PropTypes__default.string,
+  /** Date format */
+  format: PropTypes__default.string,
+  /** To make the content readOnly */
+  readOnly: PropTypes__default.bool,
+  /** Change to write mode by hiding text field border and displays border on hover*/
+  interactiveMode: PropTypes__default.bool,
+  /** Props applied to the InputLabel element.*/
+  InputLabelProps: PropTypes__default.object,
+  /** Attributes applied to the input element. */
+  inputProps: PropTypes__default.object,
+  /** Props applied to the Input element. */
+  InputProps: PropTypes__default.object,
+  /** Placeholder text*/
+  placeholder: PropTypes__default.string,
+  /** Label text */
+  label: PropTypes__default.string,
+  /** Show label help */
+  showLabelHelp: PropTypes__default.bool,
+  /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes__default.object
+};
+
+ActiveKeyboardDateTimePicker.defaultProps = {
+  inputVariant: 'outlined',
+  autoOk: true,
+  variant: 'inline',
+  format: 'dd/MM/yyyy hh:mm a'
+};
+
 exports.ActiveAutoComplete = ActiveAutoComplete;
 exports.ActiveCurrencyField = ActiveCurrencyField;
 exports.ActiveDatePicker = ActiveDatePicker;
@@ -53991,6 +54153,7 @@ exports.ActiveFormPositiveInteger = ActiveFormPositiveInteger;
 exports.ActiveFormSelect = ActiveFormSelect;
 exports.ActiveFormTextField = ActiveFormTextField;
 exports.ActiveKeyboardDatePicker = ActiveKeyboardDatePicker;
+exports.ActiveKeyboardDateTimePicker = ActiveKeyboardDateTimePicker;
 exports.ActiveKeyboardTimePicker = ActiveKeyboardTimePicker;
 exports.ActiveTimePicker = ActiveTimePicker;
 exports.UAsyncBadge = UAsyncBadge;