@essential-js/ui
Version:
EssentialJS UI
243 lines (213 loc) • 7.86 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';
import * as dependency_3 from 'iconsax-react';
const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"@essential-js/ui@1.0.0/form"},"type":"code"}, import.meta.url).package();;
__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['iconsax-react', dependency_3]]);
brequire('@beyond-js/kernel/styles').styles.register('@essential-js/ui@1.0.0/form')
const ims = new Map();
/**********************************
INTERNAL MODULE: ./controller/index
**********************************/
ims.set('./controller/index', {hash: 3867061899, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Controller = Controller;
var React = require("react");
var _model = require("./model");
/*bundle*/function Controller({
template
}) {
const isTemplateAnArray = Array.isArray(template);
const SingleInput = (!isTemplateAnArray && _model.formController[template.type]) ?? _model.formController.default;
const inputs = isTemplateAnArray && template.map(input => {
const Element = _model.formController[input.type] ?? _model.formController.default;
return React.createElement(Element, {
key: input.name,
...input,
_components: _model.formController
});
});
const output = isTemplateAnArray ? inputs : React.createElement(SingleInput, {
...template
});
return React.createElement(React.Fragment, null, output);
}
}});
/**********************************
INTERNAL MODULE: ./controller/model
**********************************/
ims.set('./controller/model', {hash: 2137315958, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.formController = void 0;
var _input = require("../input");
var _textarea = require("../textarea");
class FormController {
textarea = _textarea.Textarea;
radioItem = _input.Input;
checkItem = _input.Input;
default = _input.Input;
setComponent(type, component) {
this[type] = component;
}
}
/*bundle*/const formController = new FormController();
exports.formController = formController;
}});
/***********************
INTERNAL MODULE: ./input
***********************/
ims.set('./input', {hash: 3982942507, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Input = Input;
var _react = require("react");
var _iconsaxReact = require("iconsax-react");
const PASSWORD_TYPE = 'password';
const TEXT_TYPE = 'text';
/*bundle*/function Input({
label,
after = null,
before = null,
inputClassName,
...props
}) {
const [customType, setCustomType] = _react.default.useState(props.type);
const [showPassword, setShowPassword] = _react.default.useState(false);
const isPasswordType = props.type === PASSWORD_TYPE;
function toggleDisplayPassword() {
setShowPassword(!showPassword);
const newType = customType === PASSWORD_TYPE ? TEXT_TYPE : PASSWORD_TYPE;
setCustomType(newType);
}
const Icon = isPasswordType && (showPassword ? _iconsaxReact.EyeSlash : _iconsaxReact.Eye);
return _react.default.createElement("div", {
className: `essential__input ${props.className}`
}, before && _react.default.createElement("div", {
className: "before has-icon"
}, before), _react.default.createElement("div", {
className: "input__container"
}, _react.default.createElement("input", {
...props,
type: customType,
className: inputClassName
}), Icon && _react.default.createElement(Icon, {
className: "password__icon",
onClick: toggleDisplayPassword
}), _react.default.createElement("label", {
htmlFor: props.id
}, label)), after && _react.default.createElement("div", {
className: "after has-icon"
}, after));
}
}});
/************************
INTERNAL MODULE: ./swtich
************************/
ims.set('./swtich', {hash: 1560921659, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Switch = Switch;
var _react = require("react");
/*bundle*/function Switch({
checked,
...props
}) {
const cls = checked ? 'checked' : 'unchecked';
return _react.default.createElement("button", {
className: `essential__switch ${cls} ${props.className}`,
...props
}, _react.default.createElement("div", {
className: "indicator"
}));
}
}});
/**************************
INTERNAL MODULE: ./textarea
**************************/
ims.set('./textarea', {hash: 2155008208, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Textarea = Textarea;
var _react = require("react");
/*bundle*/function Textarea({
label,
inputClassName,
...props
}) {
return _react.default.createElement("div", {
className: `essential__textarea ${props.className}`
}, _react.default.createElement("textarea", {
id: "textarea",
...props,
className: inputClassName
}), _react.default.createElement("label", {
htmlFor: "textarea"
}, label));
}
}});
/********************************
INTERNAL MODULE: ./validate-input
********************************/
ims.set('./validate-input', {hash: 2535927001, creator: function (require, exports) {
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ValidateInput = ValidateInput;
var _react = require("react");
var _input = require("./input");
/*bundle*/function ValidateInput({
isOk,
label,
errorMessage,
successMessage,
inputClassName,
...props
}) {
const displayMessage = props.value;
const cls = !isOk ? 'wrong' : 'ok';
const messageCls = !isOk ? 'error' : 'success';
const messageToDisplay = isOk ? successMessage : errorMessage;
const displayMessageCls = displayMessage ? 'display-message' : '';
return _react.default.createElement("div", {
className: `essential__validate-input ${cls} ${displayMessageCls}`
}, _react.default.createElement(_input.Input, {
...props,
inputClassName: inputClassName,
label: label
}), _react.default.createElement("span", {
className: `message ${messageCls}`
}, messageToDisplay));
}
}});
__pkg.exports.descriptor = [{"im":"./controller/index","from":"Controller","name":"Controller"},{"im":"./controller/model","from":"formController","name":"formController"},{"im":"./input","from":"Input","name":"Input"},{"im":"./swtich","from":"Switch","name":"Switch"},{"im":"./textarea","from":"Textarea","name":"Textarea"},{"im":"./validate-input","from":"ValidateInput","name":"ValidateInput"}];
export let Controller, formController, Input, Switch, Textarea, ValidateInput;
// Module exports
__pkg.exports.process = function({require, prop, value}) {
(require || prop === 'Controller') && (Controller = require ? require('./controller/index').Controller : value);
(require || prop === 'formController') && (formController = require ? require('./controller/model').formController : value);
(require || prop === 'Input') && (Input = require ? require('./input').Input : value);
(require || prop === 'Switch') && (Switch = require ? require('./swtich').Switch : value);
(require || prop === 'Textarea') && (Textarea = require ? require('./textarea').Textarea : value);
(require || prop === 'ValidateInput') && (ValidateInput = require ? require('./validate-input').ValidateInput : 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=form.browser.mjs.map