@clayui/time-picker 3.104.0 → 3.105.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/index.d.ts +0 -0
  2. package/lib/index.js +5 -13
  3. package/lib/index.js.map +1 -0
  4. package/package.json +7 -8
  5. package/src/__tests__/__snapshots__/index.tsx.snap +0 -13
  6. package/src/__tests__/index.tsx +0 -495
  7. package/src/index.tsx +0 -606
package/lib/index.d.ts CHANGED
File without changes
package/lib/index.js CHANGED
@@ -135,21 +135,16 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
135
135
  actionVisible = _useState2[0],
136
136
  setActionVisible = _useState2[1];
137
137
 
138
- var _useState3 = (0, _react.useState)(false),
139
- _useState4 = _slicedToArray(_useState3, 2),
140
- isFocused = _useState4[0],
141
- setIsFocused = _useState4[1];
142
-
143
138
  var elementRef = (0, _react.useRef)(null);
144
139
  var defaultFocused = {
145
140
  configName: TimeType.hours,
146
141
  focused: false
147
142
  };
148
143
 
149
- var _useState5 = (0, _react.useState)(defaultFocused),
150
- _useState6 = _slicedToArray(_useState5, 2),
151
- currentInputFocused = _useState6[0],
152
- setCurrentInputFocused = _useState6[1];
144
+ var _useState3 = (0, _react.useState)(defaultFocused),
145
+ _useState4 = _slicedToArray(_useState3, 2),
146
+ currentInputFocused = _useState4[0],
147
+ setCurrentInputFocused = _useState4[1];
153
148
 
154
149
  var handleMaxAndMin = function handleMaxAndMin(value, config) {
155
150
  var newValue = value.substring(value.length - 2, value.length);
@@ -240,7 +235,6 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
240
235
  if (elementRef.current && event.target !== null && !elementRef.current.contains(event.target)) {
241
236
  setActionVisible(false);
242
237
  setCurrentInputFocused(defaultFocused);
243
- setIsFocused(false);
244
238
  }
245
239
  };
246
240
 
@@ -250,7 +244,6 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
250
244
  configName: configName,
251
245
  focused: true
252
246
  });
253
- setIsFocused(true);
254
247
  };
255
248
 
256
249
  (0, _react.useEffect)(function () {
@@ -272,8 +265,7 @@ var ClayTimePicker = function ClayTimePicker(_ref) {
272
265
  arrowKeysUpDown: false
273
266
  }, /*#__PURE__*/_react.default.createElement(_form.ClayInput.GroupItem, null, /*#__PURE__*/_react.default.createElement("div", {
274
267
  className: (0, _classnames.default)('form-control', {
275
- disabled: disabled,
276
- focus: isFocused
268
+ disabled: disabled
277
269
  }),
278
270
  onMouseEnter: function onMouseEnter() {
279
271
  if (!disabled) {
package/lib/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["_button","_interopRequireDefault","require","_form","_icon","_shared","_classnames","_react","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","e","r","t","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","l","iterator","u","a","f","next","done","return","isArray","TimeType","DEFAULT_VALUE","DEFAULT_CONFIG","use12Hours","ampm","am","pm","hours","max","min","minutes","use24Hours","regex","ClayTimePicker","_ref","_ref$ariaLabels","ariaLabels","clear","timeDown","timeUp","_ref$config","config","_ref$disabled","disabled","_ref$defaultValue","defaultValue","_ref$icon","icon","id","onChange","onInputChange","spritemap","timezone","_ref$use12Hours","values","_useControlledState","useControlledState","defaultName","handleName","_useControlledState2","internalValue","setValue","useConfig","_useState","useState","_useState2","actionVisible","setActionVisible","elementRef","useRef","defaultFocused","configName","focused","_useState3","_useState4","currentInputFocused","setCurrentInputFocused","handleMaxAndMin","newValue","substring","intrinsicValue","handleKeyDown","event","onValue","newVal","padStart","preventDefault","stopPropagation","maxSecondDigit","Math","floor","minFirstDigit","keyVal","concat","handleAction","direction","prevValue","handleDocumentClick","current","target","contains","handleInputFocus","useEffect","document","addEventListener","removeEventListener","visibleActionReset","createElement","className","ClayInput","Group","GroupItem","shrink","GroupText","symbol","FocusScope","arrowKeysLeftRight","arrowKeysUpDown","classNames","onMouseEnter","onMouseLeave","ref","focus","maxLength","onFocus","onKeyDown","readOnly","type","style","opacity","pointerEvents","displayType","onClick","role","_default","exports"],"sources":["../src/index.tsx"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport ClayButton from '@clayui/button';\nimport {ClayInput} from '@clayui/form';\nimport ClayIcon from '@clayui/icon';\nimport {FocusScope, InternalDispatch, useControlledState} from '@clayui/shared';\nimport classNames from 'classnames';\nimport React, {useEffect, useRef, useState} from 'react';\n\ntype ConfigMaxMin = {\n\tmax: number;\n\tmin: number;\n};\n\ntype ConfigAmpm = {\n\tam: string;\n\tpm: string;\n};\n\ntype Config = {\n\tampm: ConfigAmpm;\n\thours: ConfigMaxMin;\n\tminutes: ConfigMaxMin;\n};\n\nexport type InputAmPm = '--' | 'AM' | 'PM';\n\nexport type Input = {\n\tampm?: InputAmPm;\n\thours: '--' | string;\n\tminutes: '--' | string;\n};\n\nenum TimeType {\n\tminutes = 'minutes',\n\thours = 'hours',\n\tampm = 'ampm',\n}\n\ninterface IProps\n\textends Omit<\n\t\tReact.HTMLAttributes<HTMLDivElement>,\n\t\t'onChange' | 'defaultValue'\n\t> {\n\t/**\n\t * Add the labels for the input elements and the input clear button,\n\t * use this to provide accessibility and internationalization.\n\t * By default the text is in English.\n\t */\n\tariaLabels?: {\n\t\tampm: string;\n\t\thours: string;\n\t\tminutes: string;\n\t\tclear: string;\n\t\ttimeDown: string;\n\t\ttimeUp: string;\n\t};\n\n\t/**\n\t * Range settings for 12 or 24 hours.\n\t */\n\tconfig?: {\n\t\tuse12Hours: Config;\n\t\tuse24Hours: Config;\n\t};\n\n\t/**\n\t * Flag to disable user interactions on the component.\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Property to set the default value (uncontrolled).\n\t */\n\tdefaultValue?: Input;\n\n\t/**\n\t * Flag to indicate if show time icon or not.\n\t */\n\ticon?: boolean;\n\n\t/**\n\t * Id to be applied to `clay-time-hours` input.\n\t */\n\tid?: string;\n\n\t/**\n\t * Called when input values change hour, minutes or ampm (controlled).\n\t */\n\tonChange?: InternalDispatch<Input>;\n\n\t/**\n\t * Called when input values change hour, minutes or ampm (controlled).\n\t * @deprecated since v3.52.0 - use `onChange` instead.\n\t */\n\tonInputChange?: InternalDispatch<Input>;\n\n\t/**\n\t * Name attribute for the hidden input (used for form submission).\n\t */\n\tname?: string;\n\n\t/**\n\t * The path to the SVG spritemap file containing the icons.\n\t */\n\tspritemap?: string;\n\n\t/**\n\t * Flag to indicate the timezone of the user.\n\t */\n\ttimezone?: string;\n\n\t/**\n\t * Flag to indicate if 12-hour use, when true, should show am/pm input.\n\t */\n\tuse12Hours?: boolean;\n\n\t/**\n\t * Sets the values for the hour, minute, or am/pm input (controlled).\n\t * @deprecated since v3.52.0 - use `value` instead.\n\t */\n\tvalues?: Input;\n\n\t/**\n\t * Sets the values for the hour, minute, or am/pm input (controlled).\n\t */\n\tvalue?: Input;\n}\n\nconst DEFAULT_VALUE = '--';\nconst DEFAULT_CONFIG = {\n\tuse12Hours: {\n\t\tampm: {\n\t\t\tam: 'AM',\n\t\t\tpm: 'PM',\n\t\t},\n\t\thours: {\n\t\t\tmax: 12,\n\t\t\tmin: 1,\n\t\t},\n\t\tminutes: {\n\t\t\tmax: 59,\n\t\t\tmin: 0,\n\t\t},\n\t},\n\tuse24Hours: {\n\t\tampm: {\n\t\t\tam: 'AM',\n\t\t\tpm: 'PM',\n\t\t},\n\t\thours: {\n\t\t\tmax: 23,\n\t\t\tmin: 0,\n\t\t},\n\t\tminutes: {\n\t\t\tmax: 59,\n\t\t\tmin: 0,\n\t\t},\n\t},\n};\n\nconst regex = /^\\d+$/;\n\nconst ClayTimePicker = ({\n\tariaLabels = {\n\t\tampm: 'Select time of day (AM/PM) using up (PM) and down (AM) arrow keys',\n\t\tclear: 'Delete the entered time',\n\t\thours: 'Enter the hour in 00:00 format',\n\t\tminutes: 'Enter the minutes in 00:00 format',\n\t\ttimeDown: 'Time down',\n\t\ttimeUp: 'Time up',\n\t},\n\tconfig = DEFAULT_CONFIG,\n\tdisabled = false,\n\tdefaultValue = {\n\t\thours: DEFAULT_VALUE,\n\t\tminutes: DEFAULT_VALUE,\n\t},\n\ticon = false,\n\tid,\n\tname,\n\tonChange,\n\tonInputChange,\n\tspritemap,\n\ttimezone,\n\tuse12Hours = false,\n\tvalue,\n\tvalues,\n}: IProps) => {\n\tconst [internalValue, setValue] = useControlledState({\n\t\tdefaultName: 'defaultValue',\n\t\tdefaultValue,\n\t\thandleName: 'onChange',\n\t\tname: 'value',\n\t\tonChange: onChange ?? onInputChange,\n\t\tvalue: value ?? values,\n\t});\n\n\tconst useConfig: Config = config[use12Hours ? 'use12Hours' : 'use24Hours'];\n\n\tconst [actionVisible, setActionVisible] = useState(false);\n\tconst elementRef = useRef<null | HTMLDivElement>(null);\n\n\tconst defaultFocused = {\n\t\tconfigName: TimeType.hours,\n\t\tfocused: false,\n\t};\n\n\tconst [currentInputFocused, setCurrentInputFocused] = useState<{\n\t\tconfigName: TimeType;\n\t\tfocused: boolean;\n\t}>(defaultFocused);\n\n\tconst handleMaxAndMin = (value: string, config: ConfigMaxMin) => {\n\t\tconst newValue = value.substring(value.length - 2, value.length);\n\t\tconst intrinsicValue = Number(newValue);\n\n\t\tif (intrinsicValue > config.max) {\n\t\t\treturn String(config.min);\n\t\t} else if (intrinsicValue < config.min) {\n\t\t\treturn String(config.max);\n\t\t}\n\n\t\treturn newValue;\n\t};\n\n\tconst handleKeyDown = (\n\t\tevent: React.KeyboardEvent<HTMLInputElement>,\n\t\tvalue: string,\n\t\tconfigName: TimeType\n\t) => {\n\t\tconst config = useConfig[configName];\n\t\tconst intrinsicValue = Number(value);\n\t\tconst onValue = (newValue: string | number) => {\n\t\t\tconst newVal =\n\t\t\t\tconfigName === TimeType.ampm\n\t\t\t\t\t? newValue\n\t\t\t\t\t: handleMaxAndMin(String(newValue), config as ConfigMaxMin);\n\n\t\t\treturn setValue({\n\t\t\t\t...internalValue,\n\t\t\t\t// eslint-disable-next-line sort-keys\n\t\t\t\t[configName]: String(newVal).padStart(2, '0'),\n\t\t\t});\n\t\t};\n\n\t\tswitch (event.key) {\n\t\t\tcase 'Backspace':\n\t\t\t\tonValue(DEFAULT_VALUE);\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\n\t\t\t\tif (configName === TimeType.ampm) {\n\t\t\t\t\tonValue((config as ConfigAmpm).pm);\n\t\t\t\t} else {\n\t\t\t\t\tonValue(\n\t\t\t\t\t\tvalue !== DEFAULT_VALUE\n\t\t\t\t\t\t\t? intrinsicValue + 1\n\t\t\t\t\t\t\t: (config as ConfigMaxMin).min\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\n\t\t\t\tif (configName === TimeType.ampm) {\n\t\t\t\t\tonValue((config as ConfigAmpm).am);\n\t\t\t\t} else {\n\t\t\t\t\tonValue(\n\t\t\t\t\t\tvalue !== DEFAULT_VALUE\n\t\t\t\t\t\t\t? intrinsicValue - 1\n\t\t\t\t\t\t\t: (config as ConfigMaxMin).max\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tif (regex.test(event.key) && configName !== TimeType.ampm) {\n\t\t\t\t\tconst maxSecondDigit = Math.floor(\n\t\t\t\t\t\t(config as ConfigMaxMin).max / 10\n\t\t\t\t\t);\n\n\t\t\t\t\tconst minFirstDigit = (config as ConfigMaxMin).min;\n\n\t\t\t\t\tconst keyVal =\n\t\t\t\t\t\tintrinsicValue < minFirstDigit\n\t\t\t\t\t\t\t? minFirstDigit\n\t\t\t\t\t\t\t: event.key;\n\n\t\t\t\t\tconst newVal =\n\t\t\t\t\t\tNumber(value) > maxSecondDigit\n\t\t\t\t\t\t\t? `0${keyVal}`\n\t\t\t\t\t\t\t: (value && value !== DEFAULT_VALUE ? value : '') +\n\t\t\t\t\t\t\t keyVal;\n\n\t\t\t\t\tonValue(newVal);\n\t\t\t\t} else if (\n\t\t\t\t\tconfigName === TimeType.ampm &&\n\t\t\t\t\t(event.key === 'a' || event.key === 'p')\n\t\t\t\t) {\n\t\t\t\t\tonValue(\n\t\t\t\t\t\tevent.key === 'a'\n\t\t\t\t\t\t\t? (config as ConfigAmpm).am\n\t\t\t\t\t\t\t: (config as ConfigAmpm).pm\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tconst handleAction = (direction: number) => {\n\t\tconst {configName} = currentInputFocused;\n\t\tconst config = useConfig[configName];\n\t\tconst prevValue = internalValue[configName];\n\t\tlet value;\n\n\t\tif (configName === TimeType.ampm) {\n\t\t\tvalue =\n\t\t\t\tdirection === 1\n\t\t\t\t\t? (config as ConfigAmpm).pm\n\t\t\t\t\t: (config as ConfigAmpm).am;\n\t\t} else {\n\t\t\tvalue = handleMaxAndMin(\n\t\t\t\tString(\n\t\t\t\t\tprevValue !== DEFAULT_VALUE\n\t\t\t\t\t\t? Number(prevValue) + direction\n\t\t\t\t\t\t: direction === -1\n\t\t\t\t\t\t? (config as ConfigMaxMin).max\n\t\t\t\t\t\t: 0\n\t\t\t\t),\n\t\t\t\tconfig as ConfigMaxMin\n\t\t\t);\n\t\t}\n\n\t\tsetCurrentInputFocused({\n\t\t\tconfigName,\n\t\t\tfocused: true,\n\t\t});\n\t\tsetValue({\n\t\t\t...internalValue,\n\t\t\t// eslint-disable-next-line sort-keys\n\t\t\t[configName]: String(value).padStart(2, '0'),\n\t\t});\n\t};\n\n\tconst handleDocumentClick = (event: Event) => {\n\t\tif (\n\t\t\telementRef.current &&\n\t\t\tevent.target !== null &&\n\t\t\t!elementRef.current.contains(event.target as HTMLDivElement)\n\t\t) {\n\t\t\tsetActionVisible(false);\n\t\t\tsetCurrentInputFocused(defaultFocused);\n\t\t}\n\t};\n\n\tconst handleInputFocus = (configName: TimeType) => {\n\t\tsetActionVisible(true);\n\t\tsetCurrentInputFocused({\n\t\t\tconfigName,\n\t\t\tfocused: true,\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('click', handleDocumentClick);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('click', handleDocumentClick);\n\t\t};\n\t}, []);\n\n\tconst visibleActionReset =\n\t\tactionVisible &&\n\t\t((internalValue.ampm !== DEFAULT_VALUE && internalValue.ampm != null) ||\n\t\t\tinternalValue.hours !== DEFAULT_VALUE ||\n\t\t\tinternalValue.minutes !== DEFAULT_VALUE);\n\n\treturn (\n\t\t<div className=\"clay-time\">\n\t\t\t<ClayInput.Group>\n\t\t\t\t{icon && (\n\t\t\t\t\t<ClayInput.GroupItem shrink>\n\t\t\t\t\t\t<ClayInput.GroupText>\n\t\t\t\t\t\t\t<ClayIcon spritemap={spritemap} symbol=\"time\" />\n\t\t\t\t\t\t</ClayInput.GroupText>\n\t\t\t\t\t</ClayInput.GroupItem>\n\t\t\t\t)}\n\t\t\t\t<FocusScope arrowKeysLeftRight arrowKeysUpDown={false}>\n\t\t\t\t\t<ClayInput.GroupItem>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={classNames('form-control', {\n\t\t\t\t\t\t\t\tdisabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\tdata-testid=\"formControl\"\n\t\t\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\t\t\tif (!disabled) {\n\t\t\t\t\t\t\t\t\tsetActionVisible(true);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\t\t\t\tif (!currentInputFocused.focused && !disabled) {\n\t\t\t\t\t\t\t\t\tsetActionVisible(false);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tref={elementRef}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"clay-time-edit\">\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\taria-label={ariaLabels.hours}\n\t\t\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\t\t\t'clay-time-hours form-control-inset',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tfocus:\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentInputFocused.configName ===\n\t\t\t\t\t\t\t\t\t\t\t\t\tTimeType.hours &&\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentInputFocused.focused,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdata-testid=\"hours\"\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tid={id}\n\t\t\t\t\t\t\t\t\tmaxLength={2}\n\t\t\t\t\t\t\t\t\tonFocus={() =>\n\t\t\t\t\t\t\t\t\t\thandleInputFocus(TimeType.hours)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonKeyDown={(event) =>\n\t\t\t\t\t\t\t\t\t\thandleKeyDown(\n\t\t\t\t\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\t\t\t\t\tinternalValue.hours,\n\t\t\t\t\t\t\t\t\t\t\tTimeType.hours\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treadOnly\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\tvalue={internalValue.hours}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<span className=\"clay-time-divider\">:</span>\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\taria-label={ariaLabels.minutes}\n\t\t\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\t\t\t'clay-time-minutes form-control-inset',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tfocus:\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentInputFocused.configName ===\n\t\t\t\t\t\t\t\t\t\t\t\tTimeType.minutes,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdata-testid=\"minutes\"\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tmaxLength={2}\n\t\t\t\t\t\t\t\t\tonFocus={() =>\n\t\t\t\t\t\t\t\t\t\thandleInputFocus(TimeType.minutes)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonKeyDown={(event) =>\n\t\t\t\t\t\t\t\t\t\thandleKeyDown(\n\t\t\t\t\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\t\t\t\t\tinternalValue.minutes,\n\t\t\t\t\t\t\t\t\t\t\tTimeType.minutes\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treadOnly\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\tvalue={internalValue.minutes}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{use12Hours && (\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\taria-label={ariaLabels.ampm}\n\t\t\t\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\t\t\t\t'clay-time-ampm form-control-inset',\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tfocus:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentInputFocused.configName ===\n\t\t\t\t\t\t\t\t\t\t\t\t\tTimeType.ampm,\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"ampm\"\n\t\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\t\tmax-length=\"2\"\n\t\t\t\t\t\t\t\t\t\tonFocus={() =>\n\t\t\t\t\t\t\t\t\t\t\thandleInputFocus(TimeType.ampm)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(event) =>\n\t\t\t\t\t\t\t\t\t\t\thandleKeyDown(\n\t\t\t\t\t\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\t\t\t\t\t\tinternalValue.ampm as InputAmPm,\n\t\t\t\t\t\t\t\t\t\t\t\tTimeType.ampm\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treadOnly\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\t\t\tinternalValue.ampm || DEFAULT_VALUE\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{name && (\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tname={name}\n\t\t\t\t\t\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\t\t\t\t\t\tvalue={`${internalValue.hours}:${internalValue.minutes}`}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"clay-time-action-group\">\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"clay-time-action-group-item\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"containerReset\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\topacity: visibleActionReset ? 1 : 0,\n\t\t\t\t\t\t\t\t\t\tpointerEvents: visibleActionReset\n\t\t\t\t\t\t\t\t\t\t\t? 'auto'\n\t\t\t\t\t\t\t\t\t\t\t: 'none',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ClayButton\n\t\t\t\t\t\t\t\t\t\taria-label={ariaLabels.clear}\n\t\t\t\t\t\t\t\t\t\tclassName=\"clay-time-clear-btn\"\n\t\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\t\tdisplayType=\"unstyled\"\n\t\t\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\t\t\tsetValue(\n\t\t\t\t\t\t\t\t\t\t\t\tuse12Hours\n\t\t\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tampm: DEFAULT_VALUE,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thours: DEFAULT_VALUE,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tminutes:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tDEFAULT_VALUE,\n\t\t\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thours: DEFAULT_VALUE,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tminutes:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tDEFAULT_VALUE,\n\t\t\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ClayIcon\n\t\t\t\t\t\t\t\t\t\t\tspritemap={spritemap}\n\t\t\t\t\t\t\t\t\t\t\tsymbol=\"times-circle\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</ClayButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"clay-time-action-group-item\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"containerSpin\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\topacity: actionVisible ? 1 : 0,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName=\"btn-group-vertical clay-time-inner-spin\"\n\t\t\t\t\t\t\t\t\t\trole=\"group\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ClayButton\n\t\t\t\t\t\t\t\t\t\t\taria-label={ariaLabels.timeUp}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc\"\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"spinInc\"\n\t\t\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\t\t\tdisplayType=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleAction(1)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<ClayIcon\n\t\t\t\t\t\t\t\t\t\t\t\tspritemap={spritemap}\n\t\t\t\t\t\t\t\t\t\t\t\tsymbol=\"angle-up\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</ClayButton>\n\t\t\t\t\t\t\t\t\t\t<ClayButton\n\t\t\t\t\t\t\t\t\t\t\taria-label={ariaLabels.timeDown}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec\"\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"spinDec\"\n\t\t\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\t\t\tdisplayType=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleAction(-1)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<ClayIcon\n\t\t\t\t\t\t\t\t\t\t\t\tspritemap={spritemap}\n\t\t\t\t\t\t\t\t\t\t\t\tsymbol=\"angle-down\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</ClayButton>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ClayInput.GroupItem>\n\t\t\t\t</FocusScope>\n\t\t\t\t{timezone && (\n\t\t\t\t\t<ClayInput.GroupItem shrink>\n\t\t\t\t\t\t<ClayInput.GroupText>{`(${timezone})`}</ClayInput.GroupText>\n\t\t\t\t\t</ClayInput.GroupItem>\n\t\t\t\t)}\n\t\t\t</ClayInput.Group>\n\t\t</div>\n\t);\n};\n\nexport default ClayTimePicker;\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clayui/time-picker",
3
- "version": "3.104.0",
3
+ "version": "3.105.1-alpha.0",
4
4
  "description": "ClayTimePicker component",
5
5
  "license": "BSD-3-Clause",
6
6
  "repository": "https://github.com/liferay/clay",
@@ -8,8 +8,7 @@
8
8
  "types": "lib/index.d.ts",
9
9
  "ts:main": "src/index.tsx",
10
10
  "files": [
11
- "lib",
12
- "src"
11
+ "lib"
13
12
  ],
14
13
  "scripts": {
15
14
  "build": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib --extensions .ts,.tsx",
@@ -22,10 +21,10 @@
22
21
  "react"
23
22
  ],
24
23
  "dependencies": {
25
- "@clayui/button": "^3.100.0",
26
- "@clayui/form": "^3.104.0",
27
- "@clayui/icon": "^3.56.0",
28
- "@clayui/shared": "^3.104.0",
24
+ "@clayui/button": "^3.105.1-alpha.0",
25
+ "@clayui/form": "^3.105.1-alpha.0",
26
+ "@clayui/icon": "^3.105.1-alpha.0",
27
+ "@clayui/shared": "^3.105.1-alpha.0",
29
28
  "classnames": "^2.2.6"
30
29
  },
31
30
  "peerDependencies": {
@@ -36,5 +35,5 @@
36
35
  "browserslist": [
37
36
  "extends browserslist-config-clay"
38
37
  ],
39
- "gitHead": "44f72fac40321954bf46e8f61b163ff71ae04403"
38
+ "gitHead": "0a2003a935bf5c37ffc4c07618552bbebabe13b9"
40
39
  }
package/src/__tests__/__snapshots__/index.tsx.snap DELETED
@@ -1,13 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`BasicRendering renders by default 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item\\"><div class=\\"form-control\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
4
-
5
- exports[`BasicRendering renders time picker with 12 hours 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item\\"><div class=\\"form-control\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><input aria-label=\\"Select time of day (AM/PM) using up (PM) and down (AM) arrow keys\\" class=\\"clay-time-ampm form-control-inset\\" data-testid=\\"ampm\\" max-length=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
6
-
7
- exports[`BasicRendering renders time picker with a hidden input when the name attribute is provided 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item\\"><div class=\\"form-control\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><input name=\\"time-picker\\" type=\\"hidden\\" value=\\"--:--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
8
-
9
- exports[`BasicRendering renders time picker with disabled 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item\\"><div class=\\"form-control disabled\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" disabled=\\"\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" disabled=\\"\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\" disabled=\\"\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\" disabled=\\"\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\" disabled=\\"\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
10
-
11
- exports[`BasicRendering renders time picker with icon 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item input-group-item-shrink\\"><div class=\\"input-group-text\\"><svg class=\\"lexicon-icon lexicon-icon-time\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#time\\"></use></svg></div></div><div class=\\"input-group-item\\"><div class=\\"form-control\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
12
-
13
- exports[`BasicRendering renders time picker with timezone 1`] = `"<div class=\\"clay-time\\"><div class=\\"input-group\\"><div class=\\"input-group-item\\"><div class=\\"form-control\\" data-testid=\\"formControl\\"><div class=\\"clay-time-edit\\"><input aria-label=\\"Enter the hour in 00:00 format\\" class=\\"clay-time-hours form-control-inset\\" data-testid=\\"hours\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"><span class=\\"clay-time-divider\\">:</span><input aria-label=\\"Enter the minutes in 00:00 format\\" class=\\"clay-time-minutes form-control-inset\\" data-testid=\\"minutes\\" maxlength=\\"2\\" readonly=\\"\\" type=\\"text\\" value=\\"--\\"></div><div class=\\"clay-time-action-group\\"><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerReset\\" style=\\"opacity: 0; pointer-events: none;\\"><button class=\\"clay-time-clear-btn btn btn-unstyled\\" type=\\"button\\" aria-label=\\"Delete the entered time\\"><svg class=\\"lexicon-icon lexicon-icon-times-circle\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#times-circle\\"></use></svg></button></div><div class=\\"clay-time-action-group-item\\" data-testid=\\"containerSpin\\" style=\\"opacity: 0;\\"><div class=\\"btn-group-vertical clay-time-inner-spin\\" role=\\"group\\"><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time up\\" data-testid=\\"spinInc\\"><svg class=\\"lexicon-icon lexicon-icon-angle-up\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-up\\"></use></svg></button><button class=\\"clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary\\" type=\\"button\\" aria-label=\\"Time down\\" data-testid=\\"spinDec\\"><svg class=\\"lexicon-icon lexicon-icon-angle-down\\" role=\\"presentation\\"><use xlink:href=\\"icons.svg#angle-down\\"></use></svg></button></div></div></div></div></div></div></div>"`;
package/src/__tests__/index.tsx DELETED
@@ -1,495 +0,0 @@
1
- /**
2
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
3
- * SPDX-License-Identifier: BSD-3-Clause
4
- */
5
-
6
- import ClayTimePicker from '..';
7
- import {cleanup, fireEvent, render} from '@testing-library/react';
8
- import React from 'react';
9
-
10
- const spritemap = 'icons.svg';
11
-
12
- const TimePickerWithState = (props: any) => {
13
- const [state, setState] = React.useState({
14
- ampm: '--',
15
- hours: '--',
16
- minutes: '--',
17
- });
18
-
19
- return (
20
- <ClayTimePicker
21
- {...props}
22
- onInputChange={setState}
23
- spritemap={spritemap}
24
- values={state}
25
- />
26
- );
27
- };
28
-
29
- describe('BasicRendering', () => {
30
- afterEach(cleanup);
31
-
32
- it('renders by default', () => {
33
- const {container} = render(<TimePickerWithState />);
34
-
35
- expect(container.innerHTML).toMatchSnapshot();
36
- });
37
-
38
- it('renders time picker with disabled', () => {
39
- const {container} = render(<TimePickerWithState disabled />);
40
-
41
- expect(container.innerHTML).toMatchSnapshot();
42
- });
43
-
44
- it('renders time picker with icon', () => {
45
- const {container} = render(<TimePickerWithState icon />);
46
-
47
- expect(container.innerHTML).toMatchSnapshot();
48
- });
49
-
50
- it('renders time picker with timezone', () => {
51
- const {container} = render(<TimePickerWithState timezon="GMT+01:00" />);
52
-
53
- expect(container.innerHTML).toMatchSnapshot();
54
- });
55
-
56
- it('renders time picker with 12 hours', () => {
57
- const {container} = render(<TimePickerWithState use12Hours />);
58
-
59
- expect(container.innerHTML).toMatchSnapshot();
60
- });
61
-
62
- it('renders time picker with a hidden input when the name attribute is provided', () => {
63
- const {container} = render(<TimePickerWithState name="time-picker" />);
64
-
65
- expect(container.innerHTML).toMatchSnapshot();
66
- });
67
- });
68
-
69
- describe('IncrementalInteractions', () => {
70
- afterEach(cleanup);
71
-
72
- it('pressing arrow right should move focus to minutes input', async () => {
73
- const {getByTestId} = render(<TimePickerWithState />);
74
-
75
- const hoursEl = getByTestId('hours');
76
- const minutesEl = getByTestId('minutes');
77
-
78
- hoursEl.focus();
79
- fireEvent.keyDown(hoursEl, {key: 'ArrowRight'});
80
-
81
- expect(document.activeElement).toBe(minutesEl);
82
- });
83
-
84
- it('pressing arrow left should move focus to hour input', () => {
85
- const {getByTestId} = render(<TimePickerWithState />);
86
-
87
- const hoursEl = getByTestId('hours');
88
- const minutesEl = getByTestId('minutes');
89
-
90
- minutesEl.focus();
91
- fireEvent.keyDown(minutesEl, {key: 'ArrowLeft'});
92
-
93
- expect(document.activeElement).toBe(hoursEl);
94
- });
95
-
96
- it('clicking on the hour input of the time picker should add the focus', () => {
97
- const {getByTestId} = render(<TimePickerWithState />);
98
-
99
- const hoursEl = getByTestId('hours');
100
- const formControlEl = getByTestId('formControl');
101
-
102
- fireEvent.focus(hoursEl, {});
103
-
104
- expect(formControlEl.classList).toContain('focus');
105
- });
106
-
107
- it('clicking on the minutes input of the time picker should add the focus', () => {
108
- const {getByTestId} = render(<TimePickerWithState />);
109
-
110
- const minutesEl = getByTestId('minutes');
111
- const formControlEl = getByTestId('formControl');
112
-
113
- fireEvent.focus(minutesEl, {});
114
-
115
- expect(formControlEl.classList).toContain('focus');
116
- });
117
-
118
- it('clicking on the amp/pm input of the time picker should add the focus', () => {
119
- const {getByTestId} = render(<TimePickerWithState use12Hours />);
120
-
121
- const ampmEl = getByTestId('ampm');
122
- const formControlEl = getByTestId('formControl');
123
-
124
- fireEvent.focus(ampmEl, {});
125
-
126
- expect(formControlEl.classList).toContain('focus');
127
- });
128
-
129
- it('clicking outside the inputs of the time picker should remove the focus', () => {
130
- const {getByTestId} = render(<TimePickerWithState />);
131
-
132
- const hoursEl = getByTestId('hours');
133
- const formControlEl = getByTestId('formControl');
134
-
135
- fireEvent.focus(hoursEl, {});
136
-
137
- expect(formControlEl.classList).toContain('focus');
138
-
139
- fireEvent.click(document.body, {});
140
-
141
- expect(formControlEl.classList).not.toContain('focus');
142
- });
143
-
144
- describe('with actions', () => {
145
- it('shows the spin action when the mouse is inside the form', () => {
146
- const {getByTestId} = render(<TimePickerWithState />);
147
-
148
- const formControlEl = getByTestId('formControl');
149
- const containerSpinEl = getByTestId('containerSpin');
150
-
151
- expect(containerSpinEl.style.opacity).toBe('0');
152
-
153
- fireEvent.mouseEnter(formControlEl, {});
154
-
155
- expect(containerSpinEl.style.opacity).toBe('1');
156
- });
157
-
158
- it('hides spin action when mouse is out of form', () => {
159
- const {getByTestId} = render(<TimePickerWithState />);
160
-
161
- const formControlEl = getByTestId('formControl');
162
- const containerSpinEl = getByTestId('containerSpin');
163
-
164
- fireEvent.mouseEnter(formControlEl, {});
165
-
166
- expect(containerSpinEl.style.opacity).toBe('1');
167
-
168
- fireEvent.mouseLeave(formControlEl, {});
169
-
170
- expect(containerSpinEl.style.opacity).toBe('0');
171
- });
172
-
173
- it('keep the spin action visible when focus on the inputs', () => {
174
- const {getByTestId} = render(<TimePickerWithState />);
175
-
176
- const formControlEl = getByTestId('formControl');
177
- const containerSpinEl = getByTestId('containerSpin');
178
- const hoursEl = getByTestId('hours');
179
-
180
- fireEvent.mouseEnter(formControlEl, {});
181
-
182
- expect(containerSpinEl.style.opacity).toBe('1');
183
-
184
- fireEvent.focus(hoursEl, {});
185
- fireEvent.mouseLeave(formControlEl, {});
186
-
187
- expect(containerSpinEl.style.opacity).toBe('1');
188
- });
189
-
190
- it('keep the reset action visible when focus on the inputs and have value', () => {
191
- const {getByTestId} = render(<TimePickerWithState />);
192
-
193
- const formControlEl = getByTestId('formControl');
194
- const hoursEl = getByTestId('hours');
195
- const containerResetEl = getByTestId('containerReset');
196
-
197
- fireEvent.mouseEnter(formControlEl, {});
198
- fireEvent.focus(hoursEl, {});
199
-
200
- expect(containerResetEl.style.opacity).toBe('0');
201
- expect(containerResetEl.style.pointerEvents).toBe('none');
202
-
203
- fireEvent.keyDown(hoursEl, {key: '1'});
204
-
205
- expect(containerResetEl.style.opacity).toBe('1');
206
- expect(containerResetEl.style.pointerEvents).toBe('auto');
207
- });
208
-
209
- it('sets the values ​​to the default when clicking on the reset action', () => {
210
- const {getByTestId} = render(<TimePickerWithState use12Hours />);
211
-
212
- const formControlEl = getByTestId('formControl');
213
- const hoursEl = getByTestId('hours') as HTMLInputElement;
214
- const minutesEl = getByTestId('minutes') as HTMLInputElement;
215
- const ampmEl = getByTestId('ampm') as HTMLInputElement;
216
- const defaultValues = '--';
217
- const containerResetEl = getByTestId('containerReset');
218
-
219
- fireEvent.mouseEnter(formControlEl, {});
220
- fireEvent.focus(hoursEl, {});
221
- fireEvent.keyDown(hoursEl, {key: '1'});
222
- fireEvent.keyDown(minutesEl, {key: '1'});
223
- fireEvent.keyDown(ampmEl, {key: 'ArrowUp'});
224
-
225
- expect(hoursEl.value).toBe('01');
226
- expect(minutesEl.value).toBe('01');
227
- expect(ampmEl.value).toBe('PM');
228
-
229
- fireEvent.click(
230
- containerResetEl.querySelector('button') as HTMLButtonElement,
231
- {}
232
- );
233
-
234
- expect(hoursEl.value).toBe(defaultValues);
235
- expect(minutesEl.value).toBe(defaultValues);
236
- expect(ampmEl.value).toBe(defaultValues);
237
- });
238
-
239
- it('increment the value of the hour input with focus by clicking on the increment spin action', () => {
240
- const {getByTestId} = render(<TimePickerWithState />);
241
-
242
- const formControlEl = getByTestId('formControl');
243
- const hoursEl = getByTestId('hours') as HTMLInputElement;
244
- const spinIncEl = getByTestId('spinInc');
245
-
246
- fireEvent.mouseEnter(formControlEl, {});
247
- fireEvent.focus(hoursEl, {});
248
- fireEvent.click(spinIncEl, {});
249
-
250
- expect(hoursEl.value).toBe('00');
251
- });
252
-
253
- it('increment the value of the minutes input with focus by clicking on the increment spin action', () => {
254
- const {getByTestId} = render(<TimePickerWithState />);
255
-
256
- const formControlEl = getByTestId('formControl');
257
- const minutesEl = getByTestId('minutes') as HTMLInputElement;
258
- const spinIncEl = getByTestId('spinInc');
259
-
260
- fireEvent.mouseEnter(formControlEl, {});
261
- fireEvent.focus(minutesEl, {});
262
- fireEvent.click(spinIncEl, {});
263
-
264
- expect(minutesEl.value).toBe('00');
265
- });
266
-
267
- it('increment the value of the am/pm input with focus by clicking on the increment spin action', () => {
268
- const {getByTestId} = render(<TimePickerWithState use12Hours />);
269
-
270
- const formControlEl = getByTestId('formControl');
271
- const ampmEl = getByTestId('ampm') as HTMLInputElement;
272
- const spinIncEl = getByTestId('spinInc');
273
-
274
- fireEvent.mouseEnter(formControlEl, {});
275
- fireEvent.focus(ampmEl, {});
276
- fireEvent.click(spinIncEl, {});
277
-
278
- expect(ampmEl.value).toBe('PM');
279
- });
280
-
281
- it('decrement the value of the hour input with focus by clicking on the decrement spin action', () => {
282
- const {getByTestId} = render(<TimePickerWithState />);
283
-
284
- const formControlEl = getByTestId('formControl');
285
- const hoursEl = getByTestId('hours') as HTMLInputElement;
286
- const spinDecEl = getByTestId('spinDec');
287
-
288
- fireEvent.mouseEnter(formControlEl, {});
289
- fireEvent.focus(hoursEl, {});
290
- fireEvent.click(spinDecEl, {});
291
-
292
- expect(hoursEl.value).toBe('23');
293
- });
294
-
295
- it('decrement the value of the minutes input with focus by clicking on the decrement spin action', () => {
296
- const {getByTestId} = render(<TimePickerWithState />);
297
-
298
- const formControlEl = getByTestId('formControl');
299
- const minutesEl = getByTestId('minutes') as HTMLInputElement;
300
- const spinDecEl = getByTestId('spinDec');
301
-
302
- fireEvent.mouseEnter(formControlEl, {});
303
- fireEvent.focus(minutesEl, {});
304
- fireEvent.click(spinDecEl, {});
305
-
306
- expect(minutesEl.value).toBe('59');
307
- });
308
-
309
- it('decrement the value of the am/pm input with focus by clicking on the decrement spin action', () => {
310
- const {getByTestId} = render(<TimePickerWithState use12Hours />);
311
-
312
- const formControlEl = getByTestId('formControl');
313
- const ampmEl = getByTestId('ampm') as HTMLInputElement;
314
- const spinDecEl = getByTestId('spinDec');
315
-
316
- fireEvent.mouseEnter(formControlEl, {});
317
- fireEvent.focus(ampmEl, {});
318
- fireEvent.click(spinDecEl, {});
319
-
320
- expect(ampmEl.value).toBe('AM');
321
- });
322
-
323
- it('increments or decrements the value of the input hour when there is no focused input when clicking on the spin action', () => {
324
- const {getByTestId} = render(<TimePickerWithState />);
325
-
326
- const formControlEl = getByTestId('formControl');
327
- const hoursEl = getByTestId('hours') as HTMLInputElement;
328
- const spinIncEl = getByTestId('spinInc');
329
- const spinDecEl = getByTestId('spinDec');
330
-
331
- fireEvent.mouseEnter(formControlEl, {});
332
- fireEvent.click(spinIncEl, {});
333
- fireEvent.click(spinDecEl, {});
334
-
335
- expect(hoursEl.value).toBe('23');
336
- });
337
- });
338
-
339
- describe('with values increment', () => {
340
- it('pressing backspace on the hour input should set the default value', () => {
341
- const {getByTestId} = render(<TimePickerWithState />);
342
- const hoursEl = getByTestId('hours') as HTMLInputElement;
343
-
344
- fireEvent.keyDown(hoursEl, {key: '1'});
345
-
346
- expect(hoursEl.value).toBe('01');
347
-
348
- fireEvent.keyDown(hoursEl, {key: 'Backspace'});
349
-
350
- expect(hoursEl.value).toBe('--');
351
- });
352
-
353
- it('pressing backspace on the minutes input should set the default value', () => {
354
- const {getByTestId} = render(<TimePickerWithState />);
355
- const minutesEl = getByTestId('minutes') as HTMLInputElement;
356
-
357
- fireEvent.keyDown(minutesEl, {key: '1'});
358
-
359
- expect(minutesEl.value).toBe('01');
360
-
361
- fireEvent.keyDown(minutesEl, {key: 'Backspace'});
362
-
363
- expect(minutesEl.value).toBe('--');
364
- });
365
-
366
- it('pressing backspace on the am/pm input should set the default value', () => {
367
- const {getByTestId} = render(<TimePickerWithState use12Hours />);
368
- const ampmEl = getByTestId('ampm') as HTMLInputElement;
369
- const spinDecEl = getByTestId('spinDec');
370
-
371
- fireEvent.focus(ampmEl, {});
372
- fireEvent.click(spinDecEl, {});
373
-
374
- expect(ampmEl.value).toBe('AM');
375
-
376
- fireEvent.keyDown(ampmEl, {key: 'Backspace'});
377
-
378
- expect(ampmEl.value).toBe('--');
379
- });
380
-
381
- it('pressing arrow up on the hour input should increase value', () => {
382
- const {getByTestId} = render(<TimePickerWithState />);
383
- const hoursEl = getByTestId('hours') as HTMLInputElement;
384
-
385
- fireEvent.keyDown(hoursEl, {key: 'ArrowUp'});
386
-
387
- expect(hoursEl.value).toBe('00');
388
- });
389
-
390
- it('pressing arrow up on the minutes input should increase value', () => {
391
- const {getByTestId} = render(<TimePickerWithState />);
392
- const minutesEl = getByTestId('minutes') as HTMLInputElement;
393
-
394
- fireEvent.keyDown(minutesEl, {key: 'ArrowUp'});
395
-
396
- expect(minutesEl.value).toBe('00');
397
- });
398
-
399
- it('pressing arrow down on the hour input should decrement value', () => {
400
- const {getByTestId} = render(<TimePickerWithState />);
401
- const hoursEl = getByTestId('hours') as HTMLInputElement;
402
-
403
- fireEvent.keyDown(hoursEl, {key: 'ArrowDown'});
404
-
405
- expect(hoursEl.value).toBe('23');
406
- });
407
-
408
- it('pressing arrow down on the minutes input should decrement value', () => {
409
- const {getByTestId} = render(<TimePickerWithState />);
410
- const minutesEl = getByTestId('minutes') as HTMLInputElement;
411
-
412
- fireEvent.keyDown(minutesEl, {key: 'ArrowDown'});
413
-
414
- expect(minutesEl.value).toBe('59');
415
- });
416
-
417
- it('pressing arrow up on the am/pm input should set the value for PM', () => {
418
- const {getByTestId} = render(<TimePickerWithState use12Hours />);
419
- const ampmEl = getByTestId('ampm') as HTMLInputElement;
420
-
421
- fireEvent.keyDown(ampmEl, {key: 'ArrowUp'});
422
-
423
- expect(ampmEl.value).toBe('PM');
424
- });
425
-
426
- it('pressing arrow down on the am/pm input should set the value for AM', () => {
427
- const {getByTestId} = render(<TimePickerWithState use12Hours />);
428
- const formControlEl = getByTestId('formControl');
429
- const ampmEl = getByTestId('ampm') as HTMLInputElement;
430
-
431
- fireEvent.mouseEnter(formControlEl, {});
432
- fireEvent.keyDown(ampmEl, {key: 'ArrowDown'});
433
-
434
- expect(ampmEl.value).toBe('AM');
435
- });
436
-
437
- it('only allows numbers to be entered in the input hour', () => {
438
- const {getByTestId} = render(<TimePickerWithState />);
439
- const hoursEl = getByTestId('hours') as HTMLInputElement;
440
-
441
- ['A', '!', '@', '(', '^', '9', 'p'].forEach((value) => {
442
- fireEvent.keyDown(hoursEl, {key: value});
443
- });
444
-
445
- expect(hoursEl.value).toBe('09');
446
- });
447
-
448
- it('only allows numbers to be entered in the input minutes', () => {
449
- const {getByTestId} = render(<TimePickerWithState />);
450
- const minutesEl = getByTestId('minutes') as HTMLInputElement;
451
-
452
- ['A', '!', '@', '(', '^', '9', 'p'].forEach((value) => {
453
- fireEvent.keyDown(minutesEl, {key: value});
454
- });
455
-
456
- expect(minutesEl.value).toBe('09');
457
- });
458
-
459
- it('returns to the maximum value when it reaches the minimum value when pressing in the arrow down', () => {
460
- const {getByTestId} = render(<TimePickerWithState />);
461
- const hoursEl = getByTestId('hours') as HTMLInputElement;
462
- const minutesEl = getByTestId('minutes') as HTMLInputElement;
463
-
464
- fireEvent.keyDown(hoursEl, {key: '0'});
465
- fireEvent.keyDown(minutesEl, {key: '0'});
466
-
467
- expect(hoursEl.value).toBe('00');
468
- expect(minutesEl.value).toBe('00');
469
-
470
- fireEvent.keyDown(hoursEl, {key: 'ArrowDown'});
471
- fireEvent.keyDown(minutesEl, {key: 'ArrowDown'});
472
-
473
- expect(hoursEl.value).toBe('23');
474
- expect(minutesEl.value).toBe('59');
475
- });
476
-
477
- it('returns to the minimum value when it reaches the maximum value when pressing in the arrow up', () => {
478
- const {getByTestId} = render(<TimePickerWithState />);
479
- const hoursEl = getByTestId('hours') as HTMLInputElement;
480
- const minutesEl = getByTestId('minutes') as HTMLInputElement;
481
-
482
- fireEvent.keyDown(hoursEl, {key: '23'});
483
- fireEvent.keyDown(minutesEl, {key: '59'});
484
-
485
- expect(hoursEl.value).toBe('23');
486
- expect(minutesEl.value).toBe('59');
487
-
488
- fireEvent.keyDown(hoursEl, {key: 'ArrowUp'});
489
- fireEvent.keyDown(minutesEl, {key: 'ArrowUp'});
490
-
491
- expect(hoursEl.value).toBe('00');
492
- expect(minutesEl.value).toBe('00');
493
- });
494
- });
495
- });
package/src/index.tsx DELETED
@@ -1,606 +0,0 @@
1
- /**
2
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
3
- * SPDX-License-Identifier: BSD-3-Clause
4
- */
5
-
6
- import ClayButton from '@clayui/button';
7
- import {ClayInput} from '@clayui/form';
8
- import ClayIcon from '@clayui/icon';
9
- import {FocusScope, InternalDispatch, useControlledState} from '@clayui/shared';
10
- import classNames from 'classnames';
11
- import React, {useEffect, useRef, useState} from 'react';
12
-
13
- type ConfigMaxMin = {
14
- max: number;
15
- min: number;
16
- };
17
-
18
- type ConfigAmpm = {
19
- am: string;
20
- pm: string;
21
- };
22
-
23
- type Config = {
24
- ampm: ConfigAmpm;
25
- hours: ConfigMaxMin;
26
- minutes: ConfigMaxMin;
27
- };
28
-
29
- export type InputAmPm = '--' | 'AM' | 'PM';
30
-
31
- export type Input = {
32
- ampm?: InputAmPm;
33
- hours: '--' | string;
34
- minutes: '--' | string;
35
- };
36
-
37
- enum TimeType {
38
- minutes = 'minutes',
39
- hours = 'hours',
40
- ampm = 'ampm',
41
- }
42
-
43
- interface IProps
44
- extends Omit<
45
- React.HTMLAttributes<HTMLDivElement>,
46
- 'onChange' | 'defaultValue'
47
- > {
48
- /**
49
- * Add the labels for the input elements and the input clear button,
50
- * use this to provide accessibility and internationalization.
51
- * By default the text is in English.
52
- */
53
- ariaLabels?: {
54
- ampm: string;
55
- hours: string;
56
- minutes: string;
57
- clear: string;
58
- timeDown: string;
59
- timeUp: string;
60
- };
61
-
62
- /**
63
- * Range settings for 12 or 24 hours.
64
- */
65
- config?: {
66
- use12Hours: Config;
67
- use24Hours: Config;
68
- };
69
-
70
- /**
71
- * Flag to disable user interactions on the component.
72
- */
73
- disabled?: boolean;
74
-
75
- /**
76
- * Property to set the default value (uncontrolled).
77
- */
78
- defaultValue?: Input;
79
-
80
- /**
81
- * Flag to indicate if show time icon or not.
82
- */
83
- icon?: boolean;
84
-
85
- /**
86
- * Id to be applied to `clay-time-hours` input.
87
- */
88
- id?: string;
89
-
90
- /**
91
- * Called when input values change hour, minutes or ampm (controlled).
92
- */
93
- onChange?: InternalDispatch<Input>;
94
-
95
- /**
96
- * Called when input values change hour, minutes or ampm (controlled).
97
- * @deprecated since v3.52.0 - use `onChange` instead.
98
- */
99
- onInputChange?: InternalDispatch<Input>;
100
-
101
- /**
102
- * Name attribute for the hidden input (used for form submission).
103
- */
104
- name?: string;
105
-
106
- /**
107
- * The path to the SVG spritemap file containing the icons.
108
- */
109
- spritemap?: string;
110
-
111
- /**
112
- * Flag to indicate the timezone of the user.
113
- */
114
- timezone?: string;
115
-
116
- /**
117
- * Flag to indicate if 12-hour use, when true, should show am/pm input.
118
- */
119
- use12Hours?: boolean;
120
-
121
- /**
122
- * Sets the values for the hour, minute, or am/pm input (controlled).
123
- * @deprecated since v3.52.0 - use `value` instead.
124
- */
125
- values?: Input;
126
-
127
- /**
128
- * Sets the values for the hour, minute, or am/pm input (controlled).
129
- */
130
- value?: Input;
131
- }
132
-
133
- const DEFAULT_VALUE = '--';
134
- const DEFAULT_CONFIG = {
135
- use12Hours: {
136
- ampm: {
137
- am: 'AM',
138
- pm: 'PM',
139
- },
140
- hours: {
141
- max: 12,
142
- min: 1,
143
- },
144
- minutes: {
145
- max: 59,
146
- min: 0,
147
- },
148
- },
149
- use24Hours: {
150
- ampm: {
151
- am: 'AM',
152
- pm: 'PM',
153
- },
154
- hours: {
155
- max: 23,
156
- min: 0,
157
- },
158
- minutes: {
159
- max: 59,
160
- min: 0,
161
- },
162
- },
163
- };
164
-
165
- const regex = /^\d+$/;
166
-
167
- const ClayTimePicker = ({
168
- ariaLabels = {
169
- ampm: 'Select time of day (AM/PM) using up (PM) and down (AM) arrow keys',
170
- clear: 'Delete the entered time',
171
- hours: 'Enter the hour in 00:00 format',
172
- minutes: 'Enter the minutes in 00:00 format',
173
- timeDown: 'Time down',
174
- timeUp: 'Time up',
175
- },
176
- config = DEFAULT_CONFIG,
177
- disabled = false,
178
- defaultValue = {
179
- hours: DEFAULT_VALUE,
180
- minutes: DEFAULT_VALUE,
181
- },
182
- icon = false,
183
- id,
184
- name,
185
- onChange,
186
- onInputChange,
187
- spritemap,
188
- timezone,
189
- use12Hours = false,
190
- value,
191
- values,
192
- }: IProps) => {
193
- const [internalValue, setValue] = useControlledState({
194
- defaultName: 'defaultValue',
195
- defaultValue,
196
- handleName: 'onChange',
197
- name: 'value',
198
- onChange: onChange ?? onInputChange,
199
- value: value ?? values,
200
- });
201
-
202
- const useConfig: Config = config[use12Hours ? 'use12Hours' : 'use24Hours'];
203
-
204
- const [actionVisible, setActionVisible] = useState(false);
205
- const [isFocused, setIsFocused] = useState(false);
206
- const elementRef = useRef<null | HTMLDivElement>(null);
207
-
208
- const defaultFocused = {
209
- configName: TimeType.hours,
210
- focused: false,
211
- };
212
-
213
- const [currentInputFocused, setCurrentInputFocused] = useState<{
214
- configName: TimeType;
215
- focused: boolean;
216
- }>(defaultFocused);
217
-
218
- const handleMaxAndMin = (value: string, config: ConfigMaxMin) => {
219
- const newValue = value.substring(value.length - 2, value.length);
220
- const intrinsicValue = Number(newValue);
221
-
222
- if (intrinsicValue > config.max) {
223
- return String(config.min);
224
- } else if (intrinsicValue < config.min) {
225
- return String(config.max);
226
- }
227
-
228
- return newValue;
229
- };
230
-
231
- const handleKeyDown = (
232
- event: React.KeyboardEvent<HTMLInputElement>,
233
- value: string,
234
- configName: TimeType
235
- ) => {
236
- const config = useConfig[configName];
237
- const intrinsicValue = Number(value);
238
- const onValue = (newValue: string | number) => {
239
- const newVal =
240
- configName === TimeType.ampm
241
- ? newValue
242
- : handleMaxAndMin(String(newValue), config as ConfigMaxMin);
243
-
244
- return setValue({
245
- ...internalValue,
246
- // eslint-disable-next-line sort-keys
247
- [configName]: String(newVal).padStart(2, '0'),
248
- });
249
- };
250
-
251
- switch (event.key) {
252
- case 'Backspace':
253
- onValue(DEFAULT_VALUE);
254
- break;
255
- case 'ArrowUp':
256
- event.preventDefault();
257
- event.stopPropagation();
258
-
259
- if (configName === TimeType.ampm) {
260
- onValue((config as ConfigAmpm).pm);
261
- } else {
262
- onValue(
263
- value !== DEFAULT_VALUE
264
- ? intrinsicValue + 1
265
- : (config as ConfigMaxMin).min
266
- );
267
- }
268
- break;
269
- case 'ArrowDown':
270
- event.preventDefault();
271
- event.stopPropagation();
272
-
273
- if (configName === TimeType.ampm) {
274
- onValue((config as ConfigAmpm).am);
275
- } else {
276
- onValue(
277
- value !== DEFAULT_VALUE
278
- ? intrinsicValue - 1
279
- : (config as ConfigMaxMin).max
280
- );
281
- }
282
- break;
283
- default:
284
- if (regex.test(event.key) && configName !== TimeType.ampm) {
285
- const maxSecondDigit = Math.floor(
286
- (config as ConfigMaxMin).max / 10
287
- );
288
-
289
- const minFirstDigit = (config as ConfigMaxMin).min;
290
-
291
- const keyVal =
292
- intrinsicValue < minFirstDigit
293
- ? minFirstDigit
294
- : event.key;
295
-
296
- const newVal =
297
- Number(value) > maxSecondDigit
298
- ? `0${keyVal}`
299
- : (value && value !== DEFAULT_VALUE ? value : '') +
300
- keyVal;
301
-
302
- onValue(newVal);
303
- } else if (
304
- configName === TimeType.ampm &&
305
- (event.key === 'a' || event.key === 'p')
306
- ) {
307
- onValue(
308
- event.key === 'a'
309
- ? (config as ConfigAmpm).am
310
- : (config as ConfigAmpm).pm
311
- );
312
- }
313
- break;
314
- }
315
- };
316
-
317
- const handleAction = (direction: number) => {
318
- const {configName} = currentInputFocused;
319
- const config = useConfig[configName];
320
- const prevValue = internalValue[configName];
321
- let value;
322
-
323
- if (configName === TimeType.ampm) {
324
- value =
325
- direction === 1
326
- ? (config as ConfigAmpm).pm
327
- : (config as ConfigAmpm).am;
328
- } else {
329
- value = handleMaxAndMin(
330
- String(
331
- prevValue !== DEFAULT_VALUE
332
- ? Number(prevValue) + direction
333
- : direction === -1
334
- ? (config as ConfigMaxMin).max
335
- : 0
336
- ),
337
- config as ConfigMaxMin
338
- );
339
- }
340
-
341
- setCurrentInputFocused({
342
- configName,
343
- focused: true,
344
- });
345
- setValue({
346
- ...internalValue,
347
- // eslint-disable-next-line sort-keys
348
- [configName]: String(value).padStart(2, '0'),
349
- });
350
- };
351
-
352
- const handleDocumentClick = (event: Event) => {
353
- if (
354
- elementRef.current &&
355
- event.target !== null &&
356
- !elementRef.current.contains(event.target as HTMLDivElement)
357
- ) {
358
- setActionVisible(false);
359
- setCurrentInputFocused(defaultFocused);
360
- setIsFocused(false);
361
- }
362
- };
363
-
364
- const handleInputFocus = (configName: TimeType) => {
365
- setActionVisible(true);
366
- setCurrentInputFocused({
367
- configName,
368
- focused: true,
369
- });
370
- setIsFocused(true);
371
- };
372
-
373
- useEffect(() => {
374
- document.addEventListener('click', handleDocumentClick);
375
-
376
- return () => {
377
- document.removeEventListener('click', handleDocumentClick);
378
- };
379
- }, []);
380
-
381
- const visibleActionReset =
382
- actionVisible &&
383
- ((internalValue.ampm !== DEFAULT_VALUE && internalValue.ampm != null) ||
384
- internalValue.hours !== DEFAULT_VALUE ||
385
- internalValue.minutes !== DEFAULT_VALUE);
386
-
387
- return (
388
- <div className="clay-time">
389
- <ClayInput.Group>
390
- {icon && (
391
- <ClayInput.GroupItem shrink>
392
- <ClayInput.GroupText>
393
- <ClayIcon spritemap={spritemap} symbol="time" />
394
- </ClayInput.GroupText>
395
- </ClayInput.GroupItem>
396
- )}
397
- <FocusScope arrowKeysLeftRight arrowKeysUpDown={false}>
398
- <ClayInput.GroupItem>
399
- <div
400
- className={classNames('form-control', {
401
- disabled,
402
- focus: isFocused,
403
- })}
404
- data-testid="formControl"
405
- onMouseEnter={() => {
406
- if (!disabled) {
407
- setActionVisible(true);
408
- }
409
- }}
410
- onMouseLeave={() => {
411
- if (!currentInputFocused.focused && !disabled) {
412
- setActionVisible(false);
413
- }
414
- }}
415
- ref={elementRef}
416
- >
417
- <div className="clay-time-edit">
418
- <input
419
- aria-label={ariaLabels.hours}
420
- className={classNames(
421
- 'clay-time-hours form-control-inset',
422
- {
423
- focus:
424
- currentInputFocused.configName ===
425
- TimeType.hours &&
426
- currentInputFocused.focused,
427
- }
428
- )}
429
- data-testid="hours"
430
- disabled={disabled}
431
- id={id}
432
- maxLength={2}
433
- onFocus={() =>
434
- handleInputFocus(TimeType.hours)
435
- }
436
- onKeyDown={(event) =>
437
- handleKeyDown(
438
- event,
439
- internalValue.hours,
440
- TimeType.hours
441
- )
442
- }
443
- readOnly
444
- type="text"
445
- value={internalValue.hours}
446
- />
447
- <span className="clay-time-divider">:</span>
448
- <input
449
- aria-label={ariaLabels.minutes}
450
- className={classNames(
451
- 'clay-time-minutes form-control-inset',
452
- {
453
- focus:
454
- currentInputFocused.configName ===
455
- TimeType.minutes,
456
- }
457
- )}
458
- data-testid="minutes"
459
- disabled={disabled}
460
- maxLength={2}
461
- onFocus={() =>
462
- handleInputFocus(TimeType.minutes)
463
- }
464
- onKeyDown={(event) =>
465
- handleKeyDown(
466
- event,
467
- internalValue.minutes,
468
- TimeType.minutes
469
- )
470
- }
471
- readOnly
472
- type="text"
473
- value={internalValue.minutes}
474
- />
475
- {use12Hours && (
476
- <input
477
- aria-label={ariaLabels.ampm}
478
- className={classNames(
479
- 'clay-time-ampm form-control-inset',
480
- {
481
- focus:
482
- currentInputFocused.configName ===
483
- TimeType.ampm,
484
- }
485
- )}
486
- data-testid="ampm"
487
- disabled={disabled}
488
- max-length="2"
489
- onFocus={() =>
490
- handleInputFocus(TimeType.ampm)
491
- }
492
- onKeyDown={(event) =>
493
- handleKeyDown(
494
- event,
495
- internalValue.ampm as InputAmPm,
496
- TimeType.ampm
497
- )
498
- }
499
- readOnly
500
- type="text"
501
- value={
502
- internalValue.ampm || DEFAULT_VALUE
503
- }
504
- />
505
- )}
506
- {name && (
507
- <input
508
- name={name}
509
- type="hidden"
510
- value={`${internalValue.hours}:${internalValue.minutes}`}
511
- />
512
- )}
513
- </div>
514
- <div className="clay-time-action-group">
515
- <div
516
- className="clay-time-action-group-item"
517
- data-testid="containerReset"
518
- style={{
519
- opacity: visibleActionReset ? 1 : 0,
520
- pointerEvents: visibleActionReset
521
- ? 'auto'
522
- : 'none',
523
- }}
524
- >
525
- <ClayButton
526
- aria-label={ariaLabels.clear}
527
- className="clay-time-clear-btn"
528
- disabled={disabled}
529
- displayType="unstyled"
530
- onClick={() =>
531
- setValue(
532
- use12Hours
533
- ? {
534
- ampm: DEFAULT_VALUE,
535
- hours: DEFAULT_VALUE,
536
- minutes:
537
- DEFAULT_VALUE,
538
- }
539
- : {
540
- hours: DEFAULT_VALUE,
541
- minutes:
542
- DEFAULT_VALUE,
543
- }
544
- )
545
- }
546
- >
547
- <ClayIcon
548
- spritemap={spritemap}
549
- symbol="times-circle"
550
- />
551
- </ClayButton>
552
- </div>
553
- <div
554
- className="clay-time-action-group-item"
555
- data-testid="containerSpin"
556
- style={{
557
- opacity: actionVisible ? 1 : 0,
558
- }}
559
- >
560
- <div
561
- className="btn-group-vertical clay-time-inner-spin"
562
- role="group"
563
- >
564
- <ClayButton
565
- aria-label={ariaLabels.timeUp}
566
- className="clay-time-inner-spin-btn clay-time-inner-spin-btn-inc"
567
- data-testid="spinInc"
568
- disabled={disabled}
569
- displayType="secondary"
570
- onClick={() => handleAction(1)}
571
- >
572
- <ClayIcon
573
- spritemap={spritemap}
574
- symbol="angle-up"
575
- />
576
- </ClayButton>
577
- <ClayButton
578
- aria-label={ariaLabels.timeDown}
579
- className="clay-time-inner-spin-btn clay-time-inner-spin-btn-dec"
580
- data-testid="spinDec"
581
- disabled={disabled}
582
- displayType="secondary"
583
- onClick={() => handleAction(-1)}
584
- >
585
- <ClayIcon
586
- spritemap={spritemap}
587
- symbol="angle-down"
588
- />
589
- </ClayButton>
590
- </div>
591
- </div>
592
- </div>
593
- </div>
594
- </ClayInput.GroupItem>
595
- </FocusScope>
596
- {timezone && (
597
- <ClayInput.GroupItem shrink>
598
- <ClayInput.GroupText>{`(${timezone})`}</ClayInput.GroupText>
599
- </ClayInput.GroupItem>
600
- )}
601
- </ClayInput.Group>
602
- </div>
603
- );
604
- };
605
-
606
- export default ClayTimePicker;