@majoo-ui/react 2.0.1 → 2.1.0-rc.1

package/components/datePicker/timePicker/TimePicker.esm.js

@@ -0,0 +1,481 @@
+import React__default, { useState } from 'react';
+import { styled } from '../../../config/stitches.config.esm.js';
+import { ChevronUpOutline, ChevronDownOutline } from '@majoo-ui/icons';
+import Box from '../../../layout/box/Box.esm.js';
+import Flex from '../../../layout/flex/Flex.esm.js';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Input = styled('input', {
+  display: 'none'
+});
+const InputTime = styled('input', {
+  width: 48,
+  border: 'none',
+  outline: 'none',
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontSize: 28,
+  color: '$textPrimary',
+  letterSpacing: 2,
+  backgroundColor: '$bgWhite',
+  '&:read-only': {
+    backgroundColor: '$bgWhite'
+  },
+  '&:disabled': {
+    backgroundColor: '$gray100'
+  },
+  variants: {
+    size: {
+      sm: {
+        fontSize: 28
+      },
+      lg: {
+        fontSize: 32
+      }
+    }
+  }
+});
+const Time = styled('p', {
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontSize: 28,
+  color: '$textPrimary',
+  margin: 0,
+  letterSpacing: 2,
+  userSelect: 'none',
+  variants: {
+    size: {
+      sm: {
+        fontSize: 28
+      },
+      lg: {
+        fontSize: 32
+      }
+    }
+  }
+});
+const Container = styled(Flex, {
+  borderRadius: 8,
+  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12);',
+  width: 200,
+  height: 130,
+  backgroundColor: '$bgWhite',
+  variants: {
+    size: {
+      sm: {
+        width: 200,
+        height: 130
+      },
+      lg: {
+        width: 219,
+        height: 146
+      }
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$formDisable'
+      }
+    }
+  }
+});
+const IconUp = styled(ChevronUpOutline, {
+  cursor: 'pointer',
+  borderRadius: 6,
+  '&:hover': {
+    background: '$bgSelectedLight'
+  },
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        backgroundColor: '$btnDisable',
+        '&:hover': {
+          background: '$btnDisable'
+        }
+      }
+    }
+  }
+});
+const IconDown = styled(ChevronDownOutline, {
+  cursor: 'pointer',
+  borderRadius: 6,
+  '&:hover': {
+    background: '$bgSelectedLight'
+  },
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        backgroundColor: '$btnDisable',
+        '&:hover': {
+          background: '$btnDisable'
+        }
+      }
+    }
+  }
+});
+const IconStateFull = props => {
+  const [isHover, setIsHover] = useState(false);
+  function handleEnter() {
+    setIsHover(true);
+  }
+  function handleLeave() {
+    setIsHover(false);
+  }
+  return /*#__PURE__*/jsx(Box, {
+    css: {
+      margin: 'auto',
+      color: isHover && !props.disabled ? '$primary500' : '$iconPrimary'
+    },
+    children: props.type === 'up' ? /*#__PURE__*/jsx(IconUp, {
+      css: {
+        userSelect: 'none'
+      },
+      ...props,
+      color: "currentColor",
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave
+    }) : /*#__PURE__*/jsx(IconDown, {
+      css: {
+        userSelect: 'none'
+      },
+      ...props,
+      color: "currentColor",
+      onMouseEnter: handleEnter,
+      onMouseLeave: handleLeave
+    })
+  });
+};
+const NativeTimePicker = ({
+  size,
+  onChange,
+  defaultValue,
+  value,
+  disabled,
+  disabledHour,
+  disabledHourIncrease,
+  disabledHourDecrease,
+  disabledMinute,
+  disabledMinuteIncrease,
+  disabledMinuteDecrease,
+  minDate,
+  maxDate
+}) => {
+  const [date, setDate] = useState(value ? value : defaultValue ? defaultValue : moment());
+  const format = 'HH:mm';
+  const inputRef = React__default.useRef(false);
+  function handleChange(e) {
+    onChange(e, moment(e).format(format));
+  }
+  function setNewDate(newDate) {
+    setDate(newDate);
+    onChange && handleChange(newDate);
+  }
+  function handleUp(type) {
+    if (!disabled) {
+      if (type === 'hour') {
+        if ((!maxDate || moment(date).add(1, 'hours') <= moment(maxDate)) && !disabledHour && !disabledHourIncrease) {
+          setNewDate(moment(date).add(1, 'hours'));
+        }
+      } else {
+        if ((!maxDate || moment(date).add(1, 'minutes') <= moment(maxDate)) && !disabledMinute && !disabledMinuteIncrease) {
+          setNewDate(moment(date).add(1, 'minutes'));
+        }
+      }
+    }
+  }
+  function handleDown(type) {
+    if (!disabled) {
+      if (type === 'hour') {
+        if ((!minDate || moment(date).subtract(1, 'hours') >= moment(minDate)) && !disabledHour && !disabledHourDecrease) {
+          setNewDate(moment(date).subtract(1, 'hours'));
+        }
+      } else {
+        if ((!minDate || moment(date).subtract(1, 'minutes') >= moment(minDate)) && !disabledMinute && !disabledMinuteDecrease) {
+          setNewDate(moment(date).subtract(1, 'minutes'));
+        }
+      }
+    }
+  }
+  function handleInputChange(type, e) {
+    const value = e?.target?.value;
+    const format = 'DD:MM:YYYY:HH:mm';
+    const minLength = value?.length > 1;
+    const hourValue = params => moment(moment(`${moment(date).format('DD:MM:YYYY:mm')}:${params}`, 'DD:MM:YYYY:mm:HH').toDate());
+    const minuteValue = params => moment(moment(`${moment(date).format('DD:MM:YYYY:HH')}:${params}`, 'DD:MM:YYYY:HH:mm').toDate());
+    if (!disabled) {
+      if (type === 'hour') {
+        if (value < 0 && minLength) {
+          setNewDate(minDate || hourValue(0));
+          inputRef.current = false;
+          return;
+        }
+        if (value > 23 && minLength) {
+          setNewDate(maxDate || hourValue(23));
+          inputRef.current = false;
+          return;
+        }
+        if (minDate && hourValue(value) < moment(minDate) && minLength) {
+          setNewDate(minDate);
+          inputRef.current = false;
+          return;
+        }
+        if (maxDate && hourValue(value) > moment(maxDate) && minLength) {
+          setNewDate(maxDate);
+          inputRef.current = false;
+          return;
+        }
+        setNewDate(moment(moment(`${moment(date).format('DD:MM:YYYY')}:${value}:${moment(date).format('mm')}`, format).toDate()));
+        inputRef.current = true;
+      } else {
+        if (value < 0 && minLength) {
+          setNewDate(minuteValue(0));
+          inputRef.current = false;
+          return;
+        }
+        if (value > 59 && minLength) {
+          setNewDate(minuteValue(59));
+          inputRef.current = false;
+          return;
+        }
+        if (minDate && minuteValue(value) < moment(minDate) && minLength) {
+          setNewDate(minDate);
+          inputRef.current = false;
+          return;
+        }
+        if (maxDate && minuteValue(value) > moment(maxDate) && minLength) {
+          setNewDate(maxDate);
+          inputRef.current = false;
+          return;
+        }
+        setNewDate(moment(moment(`${moment(date).format('DD:MM:YYYY:HH')}:${value}`, format).toDate()));
+        inputRef.current = true;
+      }
+    }
+  }
+  const hourValue = moment(date).format('HH');
+  const minuteValue = moment(date).format('mm');
+  return /*#__PURE__*/jsxs(Flex, {
+    direction: "column",
+    align: "center",
+    justify: "center",
+    css: {
+      width: 'fit-content',
+      gap: size === 'sm' ? 14 : 18
+    },
+    children: [/*#__PURE__*/jsxs(Flex, {
+      direction: "row",
+      gap: 6,
+      children: [/*#__PURE__*/jsx(IconStateFull, {
+        type: "up",
+        disabled: disabled || disabledHour || disabledHourIncrease,
+        onClick: () => handleUp('hour')
+      }), /*#__PURE__*/jsx(IconStateFull, {
+        type: "up",
+        disabled: disabled || disabledMinute || disabledMinuteIncrease,
+        onClick: () => handleUp('minutes')
+      })]
+    }), /*#__PURE__*/jsx(Input, {
+      type: "time",
+      defaultValue: moment(date).format(format),
+      value: value,
+      onChange: handleChange
+    }), /*#__PURE__*/jsxs(Flex, {
+      gap: 1,
+      children: [/*#__PURE__*/jsx(InputTime, {
+        size: size,
+        maxLength: 2,
+        disabled: disabled,
+        readOnly: disabledHourIncrease || disabledHourDecrease || disabledHour,
+        defaultValue: hourValue,
+        value: !inputRef.current ? hourValue : undefined,
+        onChange: e => handleInputChange('hour', e),
+        onFocus: () => inputRef.current = true,
+        onBlur: () => inputRef.current = false
+      }), /*#__PURE__*/jsx(Time, {
+        size: size,
+        children: ":"
+      }), /*#__PURE__*/jsx(InputTime, {
+        size: size,
+        maxLength: 2,
+        disabled: disabled,
+        readOnly: disabledMinuteIncrease || disabledMinuteDecrease || disabledMinute,
+        defaultValue: minuteValue,
+        value: !inputRef.current ? minuteValue : undefined,
+        onChange: e => handleInputChange('minute', e),
+        onFocus: () => inputRef.current = true,
+        onBlur: () => inputRef.current = false
+      })]
+    }), /*#__PURE__*/jsxs(Flex, {
+      direction: "row",
+      gap: 6,
+      children: [/*#__PURE__*/jsx(IconStateFull, {
+        type: "down",
+        disabled: disabled || disabledHour || disabledHourDecrease,
+        onClick: () => handleDown('hour')
+      }), /*#__PURE__*/jsx(IconStateFull, {
+        type: "down",
+        disabled: disabled || disabledMinute || disabledMinuteDecrease,
+        onClick: () => handleDown('minutes')
+      })]
+    })]
+  });
+};
+NativeTimePicker.propTypes = {
+  /**
+   Resize time picker.
+  */
+  size: PropTypes.oneOf(['sm', 'lg']),
+  /**
+   Change handler.
+  */
+  onChange: PropTypes.func,
+  /**
+   Time picker default value, support moment format.
+  */
+  defaultValue: PropTypes.instanceOf(Date),
+  /**
+   Time picker value, support moment format.
+  */
+  value: PropTypes.instanceOf(Date),
+  /**
+   Disabled state.
+  */
+  disabled: PropTypes.bool,
+  /**
+    Disabled hour state.
+   */
+  disabledHour: PropTypes.bool,
+  /**
+    Disabled increase hour state.
+   */
+  disabledHourIncrease: PropTypes.bool,
+  /**
+    Disabled decrease hour state.
+   */
+  disabledHourDecrease: PropTypes.bool,
+  /**
+    Disabled minute state.
+   */
+  disabledMinute: PropTypes.bool,
+  /**
+    Disabled increase minute state.
+   */
+  disabledMinuteIncrease: PropTypes.bool,
+  /**
+    Disabled decrease minute state.
+   */
+  disabledMinuteDecrease: PropTypes.bool,
+  /**
+    Specify the minimum date.
+   */
+  minDate: PropTypes.instanceOf(Date),
+  /**
+       Specify the maximum date.
+      */
+  maxDate: PropTypes.instanceOf(Date)
+};
+const TimePicker = ({
+  size,
+  onChange,
+  defaultValue,
+  value,
+  disabled,
+  disabledHour,
+  disabledHourIncrease,
+  disabledHourDecrease,
+  disabledMinute,
+  disabledMinuteIncrease,
+  disabledMinuteDecrease,
+  css,
+  minDate,
+  maxDate
+}) => {
+  return /*#__PURE__*/jsx(Container, {
+    size: size,
+    disabled: disabled,
+    direction: "column",
+    justify: "center",
+    align: "center",
+    css: css,
+    children: /*#__PURE__*/jsx(NativeTimePicker, {
+      size: size,
+      disabled: disabled,
+      disabledHour: disabledHour,
+      disabledHourIncrease: disabledHourIncrease,
+      disabledHourDecrease: disabledHourDecrease,
+      disabledMinute: disabledMinute,
+      disabledMinuteIncrease: disabledMinuteIncrease,
+      disabledMinuteDecrease: disabledMinuteDecrease,
+      onChange: onChange,
+      defaultValue: defaultValue,
+      value: value,
+      minDate: minDate,
+      maxDate: maxDate
+    })
+  });
+};
+TimePicker.displayName = 'TimePicker';
+TimePicker.propTypes = {
+  /**
+   Additional styles.
+  */
+  css: PropTypes.object,
+  /**
+   Resize time picker.
+  */
+  size: PropTypes.oneOf(['sm', 'lg']),
+  /**
+   Change handler.
+  */
+  onChange: PropTypes.func,
+  /**
+   Time picker default value, support moment format.
+  */
+  defaultValue: PropTypes.instanceOf(Date),
+  /**
+   Time picker value, support moment format.
+  */
+  value: PropTypes.instanceOf(Date),
+  /**
+   Disabled state.
+  */
+  disabled: PropTypes.bool,
+  /**
+   Disabled hour state.
+  */
+  disabledHour: PropTypes.bool,
+  /**
+    Disabled increase hour state.
+   */
+  disabledHourIncrease: PropTypes.bool,
+  /**
+      Disabled decrease hour state.
+     */
+  disabledHourDecrease: PropTypes.bool,
+  /**
+   Disabled minute state.
+  */
+  disabledMinute: PropTypes.bool,
+  /**
+    Disabled increase minute state.
+   */
+  disabledMinuteIncrease: PropTypes.bool,
+  /**
+      Disabled decrease minute state.
+     */
+  disabledMinuteDecrease: PropTypes.bool,
+  /**
+    Specify the minimum date.
+   */
+  minDate: PropTypes.instanceOf(Date),
+  /**
+     Specify the maximum date.
+    */
+  maxDate: PropTypes.instanceOf(Date)
+};
+NativeTimePicker.displayName = 'NativeTimePicker';
+
+export { NativeTimePicker, TimePicker, NativeTimePicker as default };