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.
225 lines (220 loc) • 8.81 kB
JavaScript
System.register(["@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react"], function (_export, _context) {
"use strict";
var dependency_0, dependency_1, dependency_2, __Bundle, __pkg, ims, InputCode, __beyond_pkg, hmr;
_export("InputCode", void 0);
return {
setters: [function (_beyondJsKernelBundle) {
dependency_0 = _beyondJsKernelBundle;
}, function (_beyondJsKernelStyles) {
dependency_1 = _beyondJsKernelStyles;
}, function (_react2) {
dependency_2 = _react2;
}],
execute: function () {
({
Bundle: __Bundle
} = dependency_0);
__pkg = new __Bundle({
"module": {
"vspecifier": "pragmate-ui@1.0.1/code-verification"
},
"type": "code",
"name": "code-verification"
}, _context.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');
ims = new Map();
/****************************
INTERNAL MODULE: ./code-input
****************************/
ims.set('./code-input', {
hash: 3163548358,
creator: function (require, exports) {
"use strict";
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) {
"use strict";
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"
}];
// Module exports
__pkg.exports.process = function ({
require,
prop,
value
}) {
(require || prop === 'InputCode') && _export("InputCode", InputCode = require ? require('./code-input').InputCode : value);
};
_export("__beyond_pkg", __beyond_pkg = __pkg);
_export("hmr", hmr = new function () {
this.on = (event, listener) => void 0;
this.off = (event, listener) => void 0;
}());
__pkg.initialise(ims);
}
};
});
//# sourceMappingURL=code-verification.sjs.js.map