@amaui/ui-react/esm/Clock/Clock.js

UI for React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["tonal", "color", "size", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "format", "dayTime", "hour", "minute", "second", "autoNext", "min", "max", "validate", "readOnly", "disabled", "valid", "renderValue", "onDoneSelecting", "onClick", "className", "BackgroundProps"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { classNames, style, useAmauiTheme } from '@amaui/style-react';
import { clamp, getLeadingZerosNumber, is, isEnvironment, unique } from '@amaui/utils';
import { AmauiDate, is as isAmauiDate, set } from '@amaui/date';
import RoundMeterElement from '../RoundMeter';
import PathElement from '../Path';
import { staticClassName } from '../utils';
const useStyle = style(theme => ({
  root: {
    userSelect: 'none',
    touchAction: 'none',
    '& .amaui-RoundMeter-children, & .amaui-RoundMeter-labels': {
      pointerEvents: 'none'
    },
    '& svg > *': {
      cursor: 'grab'
    }
  },
  mouseDown: {
    '& svg > *': {
      cursor: 'grabbing'
    }
  }
}), {
  name: 'amaui-Clock'
});
const Clock = /*#__PURE__*/React.forwardRef((props__, ref) => {
  const theme = useAmauiTheme();
  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiClock?.props?.default), props__), [props__]);
  const RoundMeter = React.useMemo(() => theme?.elements?.RoundMeter || RoundMeterElement, [theme]);
  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
  const {
      tonal = true,
      color = 'primary',
      size = 'regular',
      value: value_,
      valueDefault,
      onChange,
      selecting: selecting_,
      selectingDefault,
      onChangeSelecting,
      format = '12',
      dayTime = 'am',
      hour = true,
      minute = true,
      second = false,
      autoNext,
      min,
      max,
      validate,
      readOnly,
      disabled,
      valid: valid_,
      renderValue,
      onDoneSelecting,
      onClick: onClick_,
      className,
      BackgroundProps
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const {
    classes
  } = useStyle();
  const [value, setValue] = React.useState((valueDefault !== undefined ? valueDefault : value_) || new AmauiDate());
  const [selecting, setSelecting] = React.useState((selectingDefault !== undefined ? selectingDefault : selecting_) || 'hour');
  const [mouseDown, setMouseDown] = React.useState(false);
  const refs = {
    root: React.useRef(undefined),
    middle: React.useRef(undefined),
    mouseDown: React.useRef(undefined),
    value: React.useRef(),
    selecting: React.useRef(),
    autoNext: React.useRef(),
    hour: React.useRef(),
    minute: React.useRef(),
    second: React.useRef(),
    format: React.useRef(),
    dayTime: React.useRef(undefined),
    previous: React.useRef(selecting)
  };
  refs.mouseDown.current = mouseDown;
  refs.value.current = value;
  refs.hour.current = hour;
  refs.minute.current = minute;
  refs.second.current = second;
  refs.selecting.current = selecting;
  refs.autoNext.current = autoNext;
  refs.format.current = format;
  refs.dayTime.current = dayTime;
  const resolve = React.useCallback(function () {
    let valueNew = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : refs.value.current;
    let dayTimeValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : refs.dayTime.current;
    // Resolve the range value
    const valueHour = valueNew.hour;
    if (format === '12') {
      if (dayTimeValue === 'am' && valueHour > 12) return set(valueHour - 12, 'hour', valueNew);
      if (dayTimeValue === 'pm' && valueHour < 12) return set(valueHour + 12, 'hour', valueNew);
    }
    return valueNew;
  }, [value, dayTime, format]);
  const inputToValue = React.useCallback(function (valueNew) {
    let unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : refs.selecting.current;
    let amauiDate = new AmauiDate(refs.value.current);
    let valueTime = valueNew;
    if (is('string', valueTime) && valueTime.startsWith('0')) valueTime = valueTime.slice(1);
    valueTime = +valueTime;
    if (unit === 'hour') amauiDate = set(format === '12' && dayTime === 'pm' ? valueTime + 12 : valueTime, 'hour', amauiDate);else amauiDate = set(valueTime, unit, amauiDate);
    return resolve(amauiDate);
  }, [value, format, dayTime, hour, minute, second]);
  const onMove = React.useCallback((x_, y_) => {
    const rectMiddle = refs.middle.current.getBoundingClientRect();
    const x = x_ - rectMiddle.x;
    const y = y_ - rectMiddle.y;
    const radians = Math.atan2(x, y);
    const degrees = radians * 180 / Math.PI;
    const angle = 180 - degrees;

    // Make array of values
    // for hours, minutes and seconds
    // with +- 50% around the value

    // Find item in that array that this angle fits within
    let valuesAll = [];
    if (refs.selecting.current === 'hour') {
      const part = 360 / 12;
      valuesAll = Array.from({
        length: 12
      }).map((item, index_) => [part * index_ - part / 2, part * index_ + part / 2]);
      let index = valuesAll.findIndex(item => angle >= item[0] && angle <= item[1]);
      if (index === -1 || index === 0) index = refs.format.current === '24' ? 0 : 12;
      if (refs.format.current === '24') {
        let within = false;
        const labelElements = refs.root.current.querySelectorAll('.amaui-RoundMeter-labels');
        const elements = {
          outer: labelElements[0],
          inner: labelElements[1]
        };
        const rects = {
          outer: elements.outer.getBoundingClientRect(),
          inner: elements.inner.getBoundingClientRect()
        };
        const part_ = Math.abs(Math.abs(rects.outer.x) - Math.abs(rects.inner.x));
        const valueMoved = Math.sqrt(x ** 2 + y ** 2);
        const middleInner = Math.abs(Math.abs(rectMiddle.x) - Math.abs(rects.inner.x));
        if (valueMoved <= middleInner + part_ / 2) within = true;
        if (within) index += 12;
        index = clamp(index, 0, 23);
      }

      // Validate
      if (!valid(inputToValue(index, 'hour'), 'hour')) return;

      // Update values
      onUpdate(inputToValue(index, 'hour'));
    } else if (['minute', 'second'].includes(refs.selecting.current)) {
      const part = 360 / 60;
      valuesAll = Array.from({
        length: 60
      }).map((item, index_) => [part * index_ - part / 2, part * index_ + part / 2]);
      let index = valuesAll.findIndex(item => angle >= item[0] && angle <= item[1]);
      if (index === -1 || index === 0) index = 0;

      // Validate
      if (!valid(inputToValue(index), refs.selecting.current)) return;

      // Update values
      onUpdate(inputToValue(index));
    }
  }, []);
  React.useEffect(() => {
    const onMouseUp = () => {
      if (refs.mouseDown.current) {
        setMouseDown(false);

        // Auto next
        if (refs.autoNext.current) {
          if (['hour', 'minute', 'second'].includes(refs.selecting.current)) {
            let valueSelecting;
            if (refs.selecting.current === 'second') valueSelecting = 'hour';
            if (refs.selecting.current === 'minute') valueSelecting = refs.second.current ? 'second' : 'hour';
            if (refs.selecting.current === 'hour' && refs.minute.current) valueSelecting = 'minute';
            onUpdateSelecting(valueSelecting);
          }
        }
        if (is('function', onDoneSelecting)) onDoneSelecting(refs.value.current, refs.selecting.current);
      }
    };

    // Mouse move
    const onMouseMove = event => {
      if (refs.mouseDown.current) {
        const {
          clientY,
          clientX
        } = event;
        onMove(clientX, clientY);
      }
    };

    // Touch move
    const onTouchMove = event => {
      if (refs.mouseDown.current) {
        const {
          clientY,
          clientX
        } = event.touches[0];
        onMove(clientX, clientY);
      }
    };
    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
    rootDocument.addEventListener('mouseup', onMouseUp);
    rootDocument.addEventListener('mousemove', onMouseMove);
    rootDocument.addEventListener('touchend', onMouseUp);
    rootDocument.addEventListener('touchmove', onTouchMove, {
      passive: true
    });
    return () => {
      rootDocument.removeEventListener('mousemove', onMouseMove);
      rootDocument.removeEventListener('mouseup', onMouseUp);
      rootDocument.removeEventListener('touchmove', onTouchMove);
      rootDocument.removeEventListener('touchend', onMouseUp);
    };
  }, []);
  React.useEffect(() => {
    if (value_ !== undefined && value_ !== value) setValue(value_);
  }, [value_]);
  const updateTransitions = React.useCallback(() => {
    // Add momentary transition to the AmauiRoundMeter-children > *
    // if selecting value updates
    if (refs.root.current) {
      let elementChildren = refs.root.current.getElementsByClassName('amaui-RoundMeter-children')[0];
      let elementLabels = refs.root.current.getElementsByClassName('amaui-RoundMeter-labels')[0];
      if (elementChildren && elementLabels) {
        elementChildren = Array.from(elementChildren.children);
        elementLabels = Array.from(elementLabels.children);
        elementChildren.forEach(item => item.style.transition = 'transform .3s');
        elementLabels.forEach(item => item.style.transition = 'fill .3s');
        setTimeout(() => {
          [...elementChildren, ...elementLabels].forEach(item => item.style.removeProperty('transition'));
        }, 300);
      }
    }
  }, []);
  React.useEffect(() => {
    if (selecting_ !== undefined && selecting_ !== selecting) {
      setSelecting(selecting_);
      refs.previous.current = selecting_;
      updateTransitions();
    }
  }, [selecting_]);
  React.useEffect(() => {
    if (selecting !== refs.previous.current) {
      refs.previous.current = selecting;
      updateTransitions();
    }
  }, [selecting]);
  const onUpdate = React.useCallback(valueNew => {
    const newValue = valueNew.milliseconds;
    const previousValue = refs.value.current.milliseconds;
    if (newValue === previousValue) return;
    if (!(readOnly || disabled)) {
      // Inner controlled value
      if (!props.hasOwnProperty('value')) setValue(valueNew);
      if (is('function', onChange)) onChange(valueNew);
    }
  }, [readOnly, disabled]);
  const onUpdateSelecting = React.useCallback(valueNew => {
    if (!(readOnly || disabled)) {
      // Inner controlled selecting
      if (!props.hasOwnProperty('selecting')) setSelecting(valueNew);
      if (is('function', onChangeSelecting)) onChangeSelecting(valueNew);
    }
  }, [readOnly, disabled]);
  const valid = React.useCallback(function () {
    if (is('function', valid_)) return valid_(...arguments);
    const amauiDate = arguments.length <= 0 ? undefined : arguments[0];
    if (min || max || validate) {
      let response = true;
      if (is('function', validate)) response = validate(amauiDate);
      if (min !== undefined) response = response && isAmauiDate(amauiDate, 'after or same', min);
      if (max !== undefined) response = response && isAmauiDate(amauiDate, 'before or same', max);
      return response;
    }
    return true;
  }, [valid_, min, max, validate]);
  const onMouseDown = React.useCallback(() => {
    setMouseDown(true);
  }, []);
  const onClick = React.useCallback(event => {
    const {
      clientX: x,
      clientY: y
    } = event;
    onMove(x, y);
    if (is('function', onClick_)) onClick_(event);
  }, [onClick_]);
  const palette = React.useMemo(() => {
    if (['inherit', 'default'].includes(color)) return theme.methods.color(theme.palette.text.default.primary);
    if (color === 'themed') return theme.methods.color(theme.palette.text.default.secondary);
    if (color === 'inverted') return theme.methods.color(theme.palette.background.default.primary);
    return theme.methods.color(theme.palette.color[color]?.main || color);
  }, [color, theme]);
  let valueClock = '';
  let valueClock24 = 0;
  let valuePosition;
  let labels = [];
  let lowerPointer = false;
  const colors = {
    regular: 'currentColor',
    inverse: theme.methods.palette.color.value(undefined, 90, true, palette)
  };
  if (selecting === 'hour') {
    // Value
    valueClock = valueClock24 = value?.hour;
    if (format === '24' && valueClock > 11) lowerPointer = true;
    if (valueClock > 12) valueClock -= 12;
    valuePosition = 100 / 12 * valueClock;

    // Labels
    if (format === '12') labels = unique([
    // 12 hours
    ...Array.from({
      length: 12
    }).map((item, index) => ({
      value: index === 0 ? 12 : index,
      padding: theme.methods.space.value(2.5, 'px'),
      style: {
        fontSize: 14,
        opacity: valid(inputToValue(index === 0 ? 12 : index, 'hour'), 'hour') ? 1 : 0.27,
        fill: valueClock === 12 && index === 0 || valueClock === index ? colors.inverse : colors.regular
      },
      position: index * (100 / 12)
    }))], 'position');else {
      labels = [unique([
      // 0-11 hours
      ...Array.from({
        length: 12
      }).map((item, index) => ({
        value: index === 0 ? '00' : index,
        padding: theme.methods.space.value(2.5, 'px'),
        style: {
          fontSize: 14,
          opacity: valid(inputToValue(index === 0 ? 0 : index, 'hour'), 'hour') ? 1 : 0.27,
          fill: valueClock24 === index ? colors.inverse : colors.regular
        },
        position: index * (100 / 12)
      }))], 'position'), unique([
      // 12-23 hours
      ...Array.from({
        length: 12
      }).map((item, index) => ({
        value: 12 + index,
        padding: theme.methods.space.value(6, 'px'),
        style: {
          fontSize: 14,
          opacity: valid(inputToValue(12 + index, 'hour'), 'hour') ? 1 : 0.27,
          fill: valueClock24 === 12 + index ? colors.inverse : colors.regular
        },
        position: index * (100 / 12)
      }))], 'position')];
    }
  }
  if (selecting === 'minute') {
    // Value
    valueClock = value?.minute;
    valuePosition = 100 / 60 * valueClock;

    // Labels
    labels = unique([
    // 59 minutes
    ...Array.from({
      length: 12
    }).map((item, index) => ({
      value: index === 0 ? '00' : getLeadingZerosNumber(60 / 12 * index),
      padding: theme.methods.space.value(2.5, 'px'),
      style: {
        fontSize: 14,
        opacity: valid(inputToValue(index === 0 ? 0 : 60 / 12 * index), 'minute') ? 1 : 0.27,
        fill: valueClock === 60 / 12 * index ? colors.inverse : colors.regular
      },
      position: index * (100 / 12)
    }))], 'position');
  }
  if (selecting === 'second') {
    // Value
    valueClock = value?.second;
    valuePosition = 100 / 60 * valueClock;

    // Labels
    labels = unique([
    // 59 seconds
    ...Array.from({
      length: 12
    }).map((item, index) => ({
      value: index === 0 ? '00' : getLeadingZerosNumber(60 / 12 * index),
      padding: theme.methods.space.value(2.5, 'px'),
      style: {
        fontSize: 14,
        opacity: valid(inputToValue(index === 0 ? 0 : 60 / 12 * index, 'second'), 'second') ? 1 : 0.27,
        fill: valueClock === 60 / 12 * index ? colors.inverse : colors.regular
      },
      position: index * (100 / 12)
    }))], 'position');
  }
  return /*#__PURE__*/React.createElement(RoundMeter, _extends({
    ref: item => {
      if (ref) {
        if (is('function', ref)) ref(item);else ref.current = item;
      }
      refs.root.current = item;
    },
    tonal: tonal,
    color: color,
    size: size,
    labels: labels,
    arcsVisible: false,
    childrenPosition: "pre-marks",
    onClick: onClick,
    background: true,
    BackgroundProps: {
      fill: theme.methods.palette.color.value(undefined, 70, true, palette),
      onMouseDown: onMouseDown,
      onTouchStart: onMouseDown
    },
    renderLabel: is('function', renderValue) ? (x, y, valueItem, otherProps) => renderValue(value, selecting, x, y, valueItem, otherProps) : undefined
  }, other, {
    className: classNames([staticClassName('Clock', theme) && ['amaui-Clock-round-meter'], className, classes.root, mouseDown && classes.mouseDown])
  }), /*#__PURE__*/React.createElement(Path, {
    ref: refs.middle,
    Component: "circle",
    r: "4",
    cx: "120",
    cy: "120",
    style: {
      stroke: 'none',
      fill: palette[40]
    }
  }), /*#__PURE__*/React.createElement(Path, {
    d: "M 120 119 L 195 119 A 1 1 0 0 1 195 121 L 120 121 A 1 1 0 0 1 121 119",
    value: valuePosition,
    style: {
      transformOrigin: '50% 50%',
      fill: palette[40],
      stroke: 'none'
    }
  }), /*#__PURE__*/React.createElement(Path, {
    Component: "circle",
    r: "24",
    cx: lowerPointer ? 182 : 212.5,
    cy: "120",
    value: valuePosition,
    style: {
      transformOrigin: 'center',
      fill: palette[40],
      stroke: 'none'
    }
  }));
});
Clock.displayName = 'amaui-Clock';
export default Clock;