@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 7.3 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/input-control/input-field.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport { useDrag } from '@use-gesture/react';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\n\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n disabled = false,\n dragDirection = 'n',\n dragThreshold = 10,\n id,\n isDragEnabled = false,\n isPressEnterToChange = false,\n onBlur = noop,\n onChange = noop,\n onDrag = noop,\n onDragEnd = noop,\n onDragStart = noop,\n onKeyDown = noop,\n onValidate = noop,\n size = 'default',\n stateReducer = state => state,\n value: valueProp,\n type,\n ...props\n}, ref) {\n const {\n // State.\n state,\n // Actions.\n change,\n commit,\n drag,\n dragEnd,\n dragStart,\n invalidate,\n pressDown,\n pressEnter,\n pressUp,\n reset\n } = useInputControlStateReducer(stateReducer, {\n isDragEnabled,\n value: valueProp,\n isPressEnterToChange\n }, onChange);\n const {\n value,\n isDragging,\n isDirty\n } = state;\n const wasDirtyOnBlur = useRef(false);\n const dragCursor = useDragCursor(isDragging, dragDirection);\n const handleOnBlur = event => {\n onBlur(event);\n\n /**\n * If isPressEnterToChange is set, this commits the value to\n * the onChange callback.\n */\n if (isDirty || !event.target.validity.valid) {\n wasDirtyOnBlur.current = true;\n handleOnCommit(event);\n }\n };\n const handleOnChange = event => {\n const nextValue = event.target.value;\n change(nextValue, event);\n };\n const handleOnCommit = event => {\n const nextValue = event.currentTarget.value;\n try {\n onValidate(nextValue);\n commit(nextValue, event);\n } catch (err) {\n invalidate(err, event);\n }\n };\n const handleOnKeyDown = event => {\n const {\n key\n } = event;\n onKeyDown(event);\n switch (key) {\n case 'ArrowUp':\n pressUp(event);\n break;\n case 'ArrowDown':\n pressDown(event);\n break;\n case 'Enter':\n pressEnter(event);\n if (isPressEnterToChange) {\n event.preventDefault();\n handleOnCommit(event);\n }\n break;\n case 'Escape':\n if (isPressEnterToChange && isDirty) {\n event.preventDefault();\n reset(valueProp, event);\n }\n break;\n }\n };\n const dragGestureProps = useDrag(dragProps => {\n const {\n distance,\n dragging,\n event,\n target\n } = dragProps;\n\n // The `target` prop always references the `input` element while, by\n // default, the `dragProps.event.target` property would reference the real\n // event target (i.e. any DOM element that the pointer is hovering while\n // dragging). Ensuring that the `target` is always the `input` element\n // allows consumers of `InputControl` (or any higher-level control) to\n // check the input's validity by accessing `event.target.validity.valid`.\n dragProps.event = {\n ...dragProps.event,\n target\n };\n if (!distance) {\n return;\n }\n event.stopPropagation();\n\n /**\n * Quick return if no longer dragging.\n * This prevents unnecessary value calculations.\n */\n if (!dragging) {\n onDragEnd(dragProps);\n dragEnd(dragProps);\n return;\n }\n onDrag(dragProps);\n drag(dragProps);\n if (!isDragging) {\n onDragStart(dragProps);\n dragStart(dragProps);\n }\n }, {\n axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n threshold: dragThreshold,\n enabled: isDragEnabled,\n pointer: {\n capture: false\n }\n });\n const dragProps = isDragEnabled ? dragGestureProps() : {};\n return /*#__PURE__*/_jsx(Input, {\n ...props,\n ...dragProps,\n className: \"components-input-control__input\",\n disabled: disabled,\n dragCursor: dragCursor,\n isDragging: isDragging,\n id: id,\n onBlur: handleOnBlur,\n onChange: handleOnChange,\n onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n ref: ref,\n inputSize: size\n // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n ,\n value: value ?? '',\n type: type\n });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
"mappings": "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",
"names": ["dragProps", "_jsx"]
}