Time Picker

import React from 'react';

import { TimePicker } from 'react-magma-dom';

export function Example() {
  return <TimePicker labelText="Time Due" />;
}

import React from 'react';

import { TimePicker } from 'react-magma-dom';

export function Example() {
  return <TimePicker value="01:15 PM" labelText="Time Due" />;
}

import React from 'react';

import { TimePicker } from 'react-magma-dom';

export function Example() {
  return <TimePicker labelText="Time Due" minutesStep={15} />;
}

import React from 'react';

import { TimePicker } from 'react-magma-dom';

export function Example() {
  return <TimePicker errorMessage="Invalid time" labelText="Time Due" />;
}

import React from 'react';

import { TimePicker } from 'react-magma-dom';

export function Example() {
  return <TimePicker helperMessage="Helper text" labelText="Time Due" />;
}

import React from 'react';

import { Card, CardBody, TimePicker, magma } from 'react-magma-dom';

export function Example() {
  return (
    <Card background={magma.colors.neutral1100} isInverse>
      <CardBody>
        <TimePicker isInverse labelText="Time Due" />
      </CardBody>
    </Card>
  );
}

import React from 'react';

import { Card, CardBody, Paragraph, TimePicker } from 'react-magma-dom';

export function Example() {
  const [timeValue, setTimeValue] = React.useState('');
  const [onChangeCalledTimes, setOnChangeCalledTimes] = React.useState(0);

  function handleOnChange(value) {
    setTimeValue(value);
    setOnChangeCalledTimes(onChangeCalledTimes + 1);
  }

  return (
    <Card>
      <CardBody>
        <Paragraph>
          <strong>Time Value:</strong> {timeValue}
        </Paragraph>
        <Paragraph>onChange called {onChangeCalledTimes} times</Paragraph>
        <TimePicker labelText="Time Due" onChange={handleOnChange} />
      </CardBody>
    </Card>
  );
}

import React from 'react';

import { Button, TimePicker, Announce, VisuallyHidden } from 'react-magma-dom';

export function Example() {
  const [timeValue, setTimeValue] = React.useState<string | undefined>('');
  const [announcement, setAnnouncement] = React.useState('');
  const [isCleared, setIsCleared] = React.useState(false);
  const clearedText = 'Time has been cleared';

  function handleOnChange(value) {
    setAnnouncement(isCleared ? clearedText : '');
    setTimeValue(value);
    setIsCleared(false);
  }

  function onButtonClick() {
    setIsCleared(timeValue ? true : false);
    setTimeValue(undefined);
  }

  return (
    <>
      <TimePicker
        labelText="Time Due"
        onChange={handleOnChange}
        value={timeValue}
      />
      <br />
      <Button onClick={onButtonClick}>Clear Time</Button>
      <Announce>
        <VisuallyHidden>{announcement}</VisuallyHidden>
      </Announce>
    </>
  );
}

import React from 'react';

import { TimePicker } from 'react-magma-dom';

export function Example() {
  return (
    <TimePicker
      containerStyle={{ border: '1px solid gray' }}
      labelStyle={{ fontStyle: 'italic' }}
      helperMessage="Helper text"
      messageStyle={{ background: '#0000C7', color: '#FFFFFF' }}
      inputStyle={{ border: '2px dotted black', width: '100%' }}
      labelText="Time Due"
    />
  );
}

import React from 'react';

import { zhCN } from 'date-fns/locale';
import { I18nContext, defaultI18n, TimePicker } from 'react-magma-dom';

export function Example() {
  return (
    <I18nContext.Provider
      value={{
        ...defaultI18n,
        locale: zhCN,
        timePicker: {
          hoursAriaLabel: '小时',
          minutesAriaLabel: '分钟',
          amButtonAriaLabel: '上午已选中。要切换到下午，请按 p 或回车键。',
          pmButtonAriaLabel: '下午已选中。要切换到上午，请按 a 或回车键。',
          amSelectedAnnounce: '现在选择上午',
          pmSelectedAnnounce: '现在选择下午',
        },
      }}
    >
      <TimePicker labelText="到期时间" />
      <TimePicker
        labelText="International Time with Passed in Value"
        value="01:30 下午"
      />
    </I18nContext.Provider>
  );
}