|
| 1 | +import React from 'react'; |
| 2 | +import PropTypes from 'prop-types'; |
| 3 | +import base32Encode from 'base32-encode'; |
| 4 | +import hexToArrayBuffer from 'hex-to-array-buffer'; |
| 5 | + |
| 6 | +export default class UuidControl extends React.Component { |
| 7 | + static propTypes = { |
| 8 | + onChange: PropTypes.func.isRequired, |
| 9 | + forID: PropTypes.string, |
| 10 | + value: PropTypes.node, |
| 11 | + classNameWrapper: PropTypes.string.isRequired, |
| 12 | + setActiveStyle: PropTypes.func.isRequired, |
| 13 | + setInactiveStyle: PropTypes.func.isRequired, |
| 14 | + }; |
| 15 | + |
| 16 | + // The selection to maintain for the input element |
| 17 | + _sel = 0; |
| 18 | + |
| 19 | + // The input element ref |
| 20 | + _el = null; |
| 21 | + |
| 22 | + // NOTE: This prevents the cursor from jumping to the end of the text for |
| 23 | + // nested inputs. In other words, this is not an issue on top-level text |
| 24 | + // fields such as the `title` of a collection post. However, it becomes an |
| 25 | + // issue on fields nested within other components, namely widgets nested |
| 26 | + // within a `markdown` widget. For example, the alt text on a block image |
| 27 | + // within markdown. |
| 28 | + // SEE: https://github.com/decaporg/decap-cms/issues/4539 |
| 29 | + // SEE: https://github.com/decaporg/decap-cms/issues/3578 |
| 30 | + componentDidUpdate() { |
| 31 | + if (this._el && this._el.selectionStart !== this._sel) { |
| 32 | + this._el.setSelectionRange(this._sel, this._sel); |
| 33 | + } |
| 34 | + } |
| 35 | + |
| 36 | + // componentDidMount is used for generate a UUID when the page loads for the first time |
| 37 | + componentDidMount() { |
| 38 | + const { value, field, onChange, collection, locale } = this.props; |
| 39 | + const defaultLocale = collection?.getIn(['i18n', 'default_locale']); |
| 40 | + const isTranslatable = field.get('i18n') === 'translate'; |
| 41 | + const shouldGenerate = !locale || !defaultLocale || locale === defaultLocale || isTranslatable; |
| 42 | + |
| 43 | + if (!value && shouldGenerate) { |
| 44 | + const prefix = field.get('prefix', ''); |
| 45 | + const useB32Encoding = field.get('use_b32_encoding', false); |
| 46 | + const uuid = crypto.randomUUID(); |
| 47 | + const uuidFormatted = useB32Encoding ? this.uuidToB32(uuid) : uuid; |
| 48 | + onChange(prefix + uuidFormatted); |
| 49 | + } |
| 50 | + } |
| 51 | + |
| 52 | + uuidToB32 = uuid => { |
| 53 | + const bytes = hexToArrayBuffer(uuid.replace(/-/g, '') || ''); |
| 54 | + const encodedUUID = base32Encode(bytes, 'RFC4648', { padding: false }); |
| 55 | + return encodedUUID.toLowerCase(); |
| 56 | + }; |
| 57 | + |
| 58 | + handleChange = e => { |
| 59 | + this._sel = e.target.selectionStart; |
| 60 | + this.props.onChange(e.target.value); |
| 61 | + }; |
| 62 | + |
| 63 | + render() { |
| 64 | + const { field, forID, value, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props; |
| 65 | + const readOnly = field.get('read_only', true); |
| 66 | + |
| 67 | + return ( |
| 68 | + <input |
| 69 | + ref={el => { |
| 70 | + this._el = el; |
| 71 | + }} |
| 72 | + type="text" |
| 73 | + id={forID} |
| 74 | + readOnly={readOnly} |
| 75 | + style={{ fontFamily: 'monospace', opacity: readOnly ? '0.5' : '1.0' }} |
| 76 | + className={classNameWrapper} |
| 77 | + value={value || ''} |
| 78 | + onChange={this.handleChange} |
| 79 | + onFocus={setActiveStyle} |
| 80 | + onBlur={setInactiveStyle} |
| 81 | + /> |
| 82 | + ); |
| 83 | + } |
| 84 | +} |
0 commit comments