pragmate-ui
Version:
An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.
202 lines (184 loc) • 6.53 kB
JavaScript
import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/code-verification"},"type":"code","name":"code-verification"}, import.meta.url).package();;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2]]);
brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/code-verification')
const ims = new Map();
/****************************
INTERNAL MODULE: ./code-input
****************************/
ims.set('./code-input', {hash: 3163548358, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.InputCode = InputCode;
var _react = require("react");
var _input = require("./input");
const defaultOnCodeFull = () => null;
/**
* It's a React component that takes a length prop and an onCodeFull prop. It renders an array of
* inputs, each of which is limited to one character. When the user enters a character, the component
* updates the state with the character and focuses the next input. When the user presses backspace,
* the component removes the last character from the state and focuses the previous input. When the
* user enters the last character, the component calls the onCodeFull prop with the code as a string.
* @param {props} - props
*/
let copied = false;
/*bundle*/function InputCode({
length,
onCodeFull,
className,
onlyNumber,
reset,
value = ''
}) {
// Initializes the code state only once based on the value and length props.
// This operation will be carried out when the component mounts and will not react to prop changes afterward.
const initializeCode = (value, length) => {
const codeArray = new Array(length).fill('');
for (let i = 0; i < length && i < value.length; i++) {
codeArray[i] = value[i];
}
return codeArray;
};
const [code, setCode] = (0, _react.useState)(initializeCode(value, length));
const [finalValue, setFinalValue] = _react.default.useState(value ?? '');
const [isFull, setIsFull] = (0, _react.useState)(false);
const [position, setPosition] = (0, _react.useState)();
const refs = (0, _react.useRef)(Array(length));
const onClean = event => {
const {
index
} = event.currentTarget.dataset;
globalThis.setTimeout(() => {
if (event.which === 8 || event.key?.toLowerCase() === 'backspace') {
const current = [...code];
current[index] = '';
setCode(current);
setPosition(Number(index) - 1);
}
}, 0);
};
const preventDefault = event => {
const {
index
} = event.currentTarget.dataset;
const newValue = event.currentTarget.value;
const current = [...code];
if (newValue !== '') {
setPosition(Number(index) + 1);
}
current[index] = event.currentTarget.value;
setCode(value => {
const i = [...value];
i[index] = newValue;
setFinalValue(i.join(''));
return i;
});
const ready = current.every(item => item !== '');
setIsFull(ready);
/**
* If the code is full, and then the user presses backspace, the code will be cleared.
* so we call when the code is full and the user presses backspace to let the parent component know that the code is not full anymore.
*/
if (ready || !ready && isFull) onCodeFull(current.join(''));
};
(0, _react.useEffect)(() => {
if (finalValue.length === length) {
setIsFull(true);
onCodeFull(finalValue);
return;
}
if (isFull && finalValue.length < length) {
setIsFull(false);
onCodeFull('');
}
}, [finalValue]);
(0, _react.useEffect)(() => {
setTimeout(() => refs.current[position]?.focus(), 100);
}, [position]);
const setFocus = () => {
let empty = code.findIndex(item => item === '');
if (empty === -1) empty = code.length - 1;
refs.current[empty]?.focus();
};
const cls = className ? `${className} code-inputs` : 'code-inputs';
(0, _react.useEffect)(() => {
const onCopy = event => {
event.stopPropagation();
const pastedData = event.clipboardData.getData('text');
const value = pastedData.substring(0, length).split('');
setFinalValue(value.join(''));
setCode(value);
};
refs.current[0]?.addEventListener('paste', onCopy);
return () => {
refs.current[0]?.removeEventListener('paste', onCopy);
};
}, []);
const getItem = (_, i) => {
const getRef = el => {
refs.current[i] = el;
};
return _react.default.createElement(_input.default, {
value: code[i] ?? '',
index: i,
key: i.toString(),
ref: getRef,
onKeyDown: onClean,
onChange: preventDefault
});
};
const output = [...Array(length)].map(getItem);
return _react.default.createElement("div", {
className: cls
}, output);
}
InputCode.defaultPros = {
onCodeFull: defaultOnCodeFull,
length: 6
};
}});
/***********************
INTERNAL MODULE: ./input
***********************/
ims.set('./input', {hash: 3296864983, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _default = exports.default = _react.default.forwardRef(function Input(props, ref) {
const className = _react.default.useMemo(() => {
const propsClassName = props.className ?? '';
const filledClassName = Boolean(String(props.value ?? '').length) ? 'filled' : '';
return `box ${propsClassName} ${filledClassName}`;
}, [props.value, props.className]);
return _react.default.createElement("input", {
...props,
maxLength: 1,
"data-index": props.index,
type: 'text',
// inputMode='numeric'
className: className,
ref: ref
});
});
}});
__pkg.exports.descriptor = [{"im":"./code-input","from":"InputCode","name":"InputCode"}];
export let InputCode;
// Module exports
__pkg.exports.process = function({require, prop, value}) {
(require || prop === 'InputCode') && (InputCode = require ? require('./code-input').InputCode : value);
};
export const __beyond_pkg = __pkg;
export const hmr = new (function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
});
__pkg.initialise(ims);
//# sourceMappingURL=code-verification.browser.mjs.map