UNPKG

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.

1,102 lines (1,031 loc) 37.5 kB
System.register(["@beyond-js/kernel/bundle", "react", "pragmate-ui/base", "pragmate-ui/icons", "@beyond-js/kernel/styles"], function (_export, _context2) { "use strict"; var dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, __Bundle, __pkg, ims, CheckboxGroup, Checkbox, Form, Error, Label, Input, Radio, Select, OptionSelect, Switch, Textarea, __beyond_pkg, hmr; _export({ CheckboxGroup: void 0, Checkbox: void 0, Form: void 0, Error: void 0, Label: void 0, Input: void 0, Radio: void 0, Select: void 0, OptionSelect: void 0, Switch: void 0, Textarea: void 0 }); return { setters: [function (_beyondJsKernelBundle) { dependency_0 = _beyondJsKernelBundle; }, function (_react2) { dependency_1 = _react2; }, function (_pragmateUiBase) { dependency_2 = _pragmateUiBase; }, function (_pragmateUiIcons) { dependency_3 = _pragmateUiIcons; }, function (_beyondJsKernelStyles) { dependency_4 = _beyondJsKernelStyles; }], execute: function () { ({ Bundle: __Bundle } = dependency_0); __pkg = new __Bundle({ "module": { "vspecifier": "pragmate-ui@1.0.1/form" }, "type": "code", "name": "form" }, _context2.meta.url).package(); ; __pkg.dependencies.update([['react', dependency_1], ['pragmate-ui/base', dependency_2], ['pragmate-ui/icons', dependency_3], ['@beyond-js/kernel/styles', dependency_4]]); brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/form'); ims = new Map(); /******************************** INTERNAL MODULE: ./checkbox/group ********************************/ ims.set('./checkbox/group', { hash: 4232336252, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.CheckboxGroup = CheckboxGroup; var _react = require("react"); var _index = require("./index"); /*bundle*/ function CheckboxGroup(props) { const { options } = props; const output = options.map((option, index) => { const key = `${option.name}-${index}`; const { label, ...rest } = option; return _react.default.createElement(_index.Checkbox, { key: key, label: label, ...rest }); }); const directions = { column: 'column', row: 'row' }; const direction = props.direction ?? `row`; const cls = `pui-checkbox-group pui-checkbox-group--${directions[direction]}`; // `pui-checkbox-group $; return _react.default.createElement("div", { className: cls }, props.label && _react.default.createElement("span", { className: 'pui-label' }, props.label), _react.default.createElement("div", { className: 'pui-group__items-container' }, output)); } } }); /******************************** INTERNAL MODULE: ./checkbox/index ********************************/ ims.set('./checkbox/index', { hash: 599928777, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Checkbox = void 0; var _react = require("react"); /*bundle*/ const Checkbox = exports.Checkbox = (0, _react.forwardRef)(function (props, ref) { const { checked, disabled, className, onChange, label } = props; const handleChange = event => { event.stopPropagation(); onChange && onChange(event); }; let cls = `pui-checkbox ${className ? className : ''}`; cls += disabled ? ' disabled' : ''; const properties = Object.assign({}, props); ['className', 'checked', 'name', 'onChange'].forEach(prop => { delete properties[prop]; }); const ramdon = Math.floor(Math.random() * (100 - 1 + 1)) + 1; const name = props.name ?? 'pui-checkbox--name'; const id = props.id ?? `${name}-${performance.now()}.${ramdon}`; return _react.default.createElement("div", { className: cls, onClick: handleChange }, _react.default.createElement("input", { ref: ref, type: 'checkbox', className: 'pui-checkbox--input', id: id, name: name, checked: checked, onChange: handleChange, ...properties }), _react.default.createElement("label", { className: 'pui-checkbox--label', htmlFor: id }, _react.default.createElement("span", null, _react.default.createElement("svg", { viewBox: '0 0 12 9' }, _react.default.createElement("polyline", { points: '1 5 4 8 11 1' }))), _react.default.createElement("span", null, label))); }); } }); /********************** INTERNAL MODULE: ./form **********************/ ims.set('./form', { hash: 99719699, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Form = Form; var _react = require("react"); /*bundle*/ function Form(props) { const { onSubmit, ...restProps } = props; const handleSubmit = event => { event.preventDefault(); event.stopPropagation(); props.onSubmit(event); }; return _react.default.createElement("form", { onSubmit: handleSubmit, ...restProps }, props.children); } } }); /*************************************** INTERNAL MODULE: ./input/components/date ***************************************/ ims.set('./input/components/date', { hash: 4016619854, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Date = Date; var _react = require("react"); var _icons = require("pragmate-ui/icons"); var _context = require("../context"); function Date() { const { input, props, icon, isDate } = (0, _context.useInputContext)(); if (!isDate) return null; const iconValue = icon ? icon : 'calendar'; const showPicker = () => { if (props.disabled) return; input.current.showPicker(); }; return _react.default.createElement(_icons.Icon, { key: 'icon', icon: iconValue, className: 'pui-input__icon', onClick: showPicker }); } } }); /**************************************** INTERNAL MODULE: ./input/components/error ****************************************/ ims.set('./input/components/error', { hash: 534355326, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Error = Error; var _react = require("react"); /*bundle*/ function Error({ show, message, className, children }) { if (!show) return null; const cls = `pui-input-error-label${className ? ` ${className}` : ''}`; return _react.default.createElement("span", { className: cls }, message, " ", children); } } }); /************************************************* INTERNAL MODULE: ./input/components/icon-container *************************************************/ ims.set('./input/components/icon-container', { hash: 168038464, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.IconContainer = IconContainer; var _react = require("react"); var _password = require("./password"); var _context = require("../context"); var _date = require("./date"); var _icon = require("./icon"); function IconContainer() { const { props } = (0, _context.useInputContext)(); const types = { password: _password.Password, date: _date.Date, default: null, month: _date.Date, week: _date.Date, 'datetime-local': _date.Date }; const output = []; if (!!types[props.type]) { const Control = types[props.type]; output.push(_react.default.createElement(Control, { key: "control" })); } ; if (!!props.icon) { output.push(_react.default.createElement(_icon.Icon, { key: "icon" })); } return _react.default.createElement(_react.default.Fragment, null, output); } ; } }); /*************************************** INTERNAL MODULE: ./input/components/icon ***************************************/ ims.set('./input/components/icon', { hash: 2806631327, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Icon = Icon; var _react = require("react"); var _icons = require("pragmate-ui/icons"); var _context = require("../context"); function Icon() { const { props: { icon }, isDate } = (0, _context.useInputContext)(); if (!icon || isDate) return null; return _react.default.createElement(_icons.Icon, { icon: icon, className: "input-icon" }); } } }); /**************************************** INTERNAL MODULE: ./input/components/label ****************************************/ ims.set('./input/components/label', { hash: 1837895848, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Label = Label; var _react = require("react"); var _context = require("../context"); /*bundle */ function Label({ required, position, children } = {}) { const { name, id } = (0, _context.useInputContext)(); const variants = { floating: 'floating-label', right: 'pui-input__label--right', bottom: 'pui-input__label--bottom', 'bottom-right': 'pui-input__label--bottom-right' }; let cls = `pui-input__label ${variants[position] ? ` ${variants[position]}` : ''}`; if (required) cls += ' is-required'; return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("label", { htmlFor: id ?? name, className: cls }, _react.default.createElement("span", { className: 'label-content' }, " ", children))); } } }); /******************************************* INTERNAL MODULE: ./input/components/password *******************************************/ ims.set('./input/components/password', { hash: 1440208605, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Password = Password; var _react = require("react"); var _context = require("../context"); var _icons = require("pragmate-ui/icons"); function Password() { const { state, setState } = (0, _context.useInputContext)(); const changeType = event => { event.stopPropagation(); setState({ ...state, type: state.type === "password" ? "text" : "password" }); }; const attrs = { className: "icon-eye", onClick: changeType, icon: state.type === "password" ? "eye" : "eye-slash" }; return _react.default.createElement(_icons.IconButton, { ...attrs }); } } }); /******************************* INTERNAL MODULE: ./input/context *******************************/ ims.set('./input/context', { hash: 902539138, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.useInputContext = exports.InputContext = void 0; var React = require("react"); const InputContext = exports.InputContext = React.createContext({}); const useInputContext = () => React.useContext(InputContext); exports.useInputContext = useInputContext; } }); /******************************* INTERNAL MODULE: ./input/control *******************************/ ims.set('./input/control', { hash: 765945223, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.ControlSelector = ControlSelector; var _react = require("react"); var _context = require("./context"); var _internalProps = require("./internal-props"); var _iconContainer = require("./components/icon-container"); function ControlSelector() { const { setState, state, value, setValue, props: { name, id, placeholder }, props, input } = (0, _context.useInputContext)(); let properties = { ...props }; _internalProps.internalProps.forEach(prop => delete properties[prop]); const handleChange = event => { if (!!props.onChange && typeof props.onChange === 'function') props.onChange(event); const currentValue = event.currentTarget.value; setValue(currentValue); setState({ ...state, _hasError: false, value: currentValue }); }; const attrs = { id: id ?? name, placeholder: placeholder ?? '', value: value ?? '' }; return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("input", { ref: input, ...properties, name: name, onChange: handleChange, type: state.type, ...attrs }), _react.default.createElement(_iconContainer.IconContainer, null)); } } }); /***************************** INTERNAL MODULE: ./input/index *****************************/ ims.set('./input/index', { hash: 1920991899, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Input = Input; var _react = require("react"); var _context = require("./context"); var _label = require("./components/label"); var _control = require("./control"); var _error = require("./components/error"); /*bundle*/ /** * * @param props * * 1. pattern property + existing error. * 2. Controlled Input where the implementer defines the error. * 3. Automated Input with multiple validations and error management. * * @returns */ function Input(props) { const { hasError, errorMessage, variant, className, label, children, icon, type } = props; const [value, setValue] = _react.default.useState(props.value ?? ''); const [state, setState] = (0, _react.useState)({ type }); const input = (0, _react.useRef)(null); let cls = `pui-input${className ? ` ${className}` : ''}`; const dates = ['date', 'week', 'month', 'time', 'datetime-local']; const isDate = dates.includes(props.type); if (isDate) cls += ' pui-input--date'; if (!!icon) cls += ' pui-input--icon'; if (!!icon && variant === 'floating') cls += ' icon__floating'; if (props.type === 'password') cls += ' pui-input--password'; const variants = { unstyled: 'pui-input--unstyled', floating: 'pui-input--floating' }; if (props.variant && variants[props.variant]) cls += ` ${variants[props.variant]}`; const providerValue = { props, state, setState, value: props.value ?? value, setValue, input, icon, isDate }; const labelSpecs = { required: props.required }; const attrs = {}; /** * todo: review it. */ if (variant === 'floating') labelSpecs.position = variant; if (variant !== 'unstyled') attrs.className = cls; return _react.default.createElement(_context.InputContext.Provider, { value: providerValue }, _react.default.createElement("div", { className: cls }, _react.default.createElement(_control.ControlSelector, null), children, label && _react.default.createElement(_label.Label, { ...labelSpecs }, label), errorMessage && _react.default.createElement(_error.Error, { show: !!hasError, message: errorMessage }))); } } }); /**************************************** INTERNAL MODULE: ./input/interfaces/index ****************************************/ ims.set('./input/interfaces/index', { hash: 3145852206, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); ; ; ; ; } }); /************************************** INTERNAL MODULE: ./input/internal-props **************************************/ ims.set('./input/internal-props', { hash: 240084044, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.internalProps = void 0; /** * Internal props of the input component. * This array is used to filter the props passed to the input component. */ const internalProps = exports.internalProps = ['className', 'hasError', 'errorMessage', 'children', 'icon', 'label', 'password', 'loading', 'variant', 'type', 'size', 'loading', 'error', 'sources', 'onError']; function generateAttributes(attrs, toRemove = []) { const propsToRemove = [...internalProps, ...toRemove]; const properties = { ...attrs }; propsToRemove.forEach(prop => delete properties[prop]); return properties; } } }); /******************************* INTERNAL MODULE: ./model/manager *******************************/ ims.set('./model/manager', { hash: 3171752923, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.SelectorManager = void 0; class SelectorManager { static #instance; #selector; get selector() { return this.#selector; } constructor(selector) {} validate() {} static get(selector) { if (!this.#instance) { this.#instance = new SelectorManager(selector); } return this.#instance; } } exports.SelectorManager = SelectorManager; } }); /*********************** INTERNAL MODULE: ./radio ***********************/ ims.set('./radio', { hash: 1700275994, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Radio = Radio; var _react = require("react"); /*bundle*/ function Radio(props) { const input = (0, _react.useRef)(null); const onClick = event => { event.stopPropagation(); input.current.checked = true; if (!!props.onChange) props.onChange(event); }; const properties = { ...props }; delete properties.onChange; const cls = `pragmate-element-radio ${properties.className ? properties.className : ''}`; return _react.default.createElement("label", { className: cls, onClick: onClick }, _react.default.createElement("input", { ref: input, ...properties, type: 'radio', onChange: onClick }), properties.label && _react.default.createElement("span", null, properties.label)); } } }); /****************************** INTERNAL MODULE: ./select/index ******************************/ ims.set('./select/index', { hash: 912006739, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Select = Select; var _react = require("react"); var _option = require("./option"); /*bundle */ function Select(props) { const { children } = props; const attributes = { ...props }; delete attributes.children; delete attributes.options; const value = ![undefined, null].includes(props.value) ?? ''; let output = []; if (props.options) { props.options.forEach((item, key) => { output.push(_react.default.createElement(_option.OptionSelect, { ...item, key: key })); }); } const ramdon = Math.floor(Math.random() * (100 - 1 + 1)) + 1; const id = props.id ?? `${name}-${performance.now()}.${ramdon}`; const cls = `pui-input-select`; return _react.default.createElement("div", { className: cls }, _react.default.createElement("label", { htmlFor: id }, props.label), _react.default.createElement("select", { className: cls, ...attributes }, output, children)); } } }); /******************************* INTERNAL MODULE: ./select/option *******************************/ ims.set('./select/option', { hash: 2324332836, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.OptionSelect = OptionSelect; var _react = require("react"); /*bundle */ function OptionSelect(props) { const { children } = props; const attributes = { ...props }; delete attributes.children; return _react.default.createElement("option", { ...attributes }, children); } } }); /************************ INTERNAL MODULE: ./switch ************************/ ims.set('./switch', { hash: 872227154, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Switch = Switch; var _react = require("react"); /* bundle */ function Switch(props) { const { checked, onChange, variant = 'primary', disabled, sizing = 'md', className } = props; const [isChecked, setIsChecked] = _react.default.useState(!!checked); _react.default.useEffect(() => { if (isChecked === checked) return; setIsChecked(checked); }, [checked]); const handleChange = event => { event.stopPropagation(); setIsChecked(event.currentTarget.checked); onChange && onChange(event); }; let classNameSwitch = `pui-element-switch ${className ? className : ''}`; classNameSwitch += disabled ? ' disabled' : ''; let cls = isChecked ? `pui-element-switch__label active` : 'pui-element-switch__label'; cls += variant ? ` ${variant}` : ''; cls += sizing ? ` ${sizing}` : ''; const properties = { ...props }; ['className', 'checked', 'onChange', 'variant', 'sizing', 'id'].forEach(prop => { delete properties[prop]; }); const id = props.id ?? props.name ?? 'pui-element-switch'; return _react.default.createElement("div", { className: classNameSwitch }, _react.default.createElement("input", { className: 'pui-element-switch__checkbox', id: id, type: 'checkbox', checked: isChecked, onChange: handleChange, ...properties }), _react.default.createElement("label", { className: cls, htmlFor: id }, _react.default.createElement("span", { className: `label__btn--slider` }))); } } }); /********************************** INTERNAL MODULE: ./textarea/counter **********************************/ ims.set('./textarea/counter', { hash: 1510952168, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.TextareaCounter = TextareaCounter; var _react = require("react"); function TextareaCounter({ counter, length, maxlength }) { if (!counter) return null; let cls = 'pui-textarea-counter'; if (maxlength && length > maxlength - 15) { cls += length > maxlength - 5 ? ' pui-textarea-counter--danger' : ' pui-textarea-counter--warning'; } return _react.default.createElement("span", { className: cls }, length ?? 0); } } }); /******************************** INTERNAL MODULE: ./textarea/error ********************************/ ims.set('./textarea/error', { hash: 2150596302, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.TextareaError = TextareaError; var _react = require("react"); function TextareaError({ state, hasError, errorMessage, value }) { if (!state._hasError && !hasError) return null; if (hasError || value !== '') errorMessage = errorMessage ? errorMessage : state.errorMessage; return _react.default.createElement("span", { className: 'pui-element-input-error' }, errorMessage); } } }); /******************************** INTERNAL MODULE: ./textarea/index ********************************/ ims.set('./textarea/index', { hash: 1666522646, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Textarea = Textarea; var _react = require("react"); var _error = require("./error"); var _counter = require("./counter"); let previousHeight = 0; /*bundle*/ function Textarea(props) { const input = props.ref ?? (0, _react.useRef)(); const { counter, errorMessage, autoresize = true, value = '' } = props; const [state, setState] = (0, _react.useState)({ value, errorMessage }); _react.default.useEffect(() => { const textarea = input.current; textarea.style.height = 'auto'; // Set new height based on scrollHeight textarea.style.height = `${textarea.scrollHeight}px`; }, [value]); const handleChange = event => { if (!!props.onChange && typeof props.onChange === 'function') props.onChange(event); // const value = cleanExtraNewlines(event.target.value); const value = event.target.value; setState({ ...state, _hasError: false, value }); }; let properties = { ...props }; let cls = props.className ? `${props.className} pui-textarea` : 'pui-textarea'; cls += props.disabled ? ' disabled' : ''; cls += props.hasError ? ' error' : ''; ['className', 'hasError', 'counter', 'errorMessage', 'children', 'label', 'floating'].forEach(prop => delete properties[prop]); const variants = { unstyled: 'pui-textarea--unstyled', floating: 'pui-textarea--floating' }; if (props.variant && variants[props.variant]) cls += ` ${variants[props.variant]}`; let clsLabel = ''; if (props.required) cls += ' is-required'; return _react.default.createElement("div", { className: cls }, _react.default.createElement("textarea", { ref: input, ...properties, name: props.name, onChange: handleChange, value: value, placeholder: props.placeholder ?? ' ' }), props.children, _react.default.createElement(_error.TextareaError, { state: state, hasError: props.hasError, value: value, errorMessage: props.errorMessage }), props.label && _react.default.createElement("label", { className: clsLabel, htmlFor: props.id }, props.label), _react.default.createElement(_counter.TextareaCounter, { length: input?.current?.value.length, maxlength: props.maxLength, counter: counter })); } } }); /******************************** INTERNAL MODULE: ./textarea/types ********************************/ ims.set('./textarea/types', { hash: 1171268489, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); } }); /***************************** INTERNAL MODULE: ./types/index *****************************/ ims.set('./types/index', { hash: 4163527322, creator: function (require, exports) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); } }); __pkg.exports.descriptor = [{ "im": "./checkbox/group", "from": "CheckboxGroup", "name": "CheckboxGroup" }, { "im": "./checkbox/index", "from": "Checkbox", "name": "Checkbox" }, { "im": "./form", "from": "Form", "name": "Form" }, { "im": "./input/components/error", "from": "Error", "name": "Error" }, { "im": "./input/components/label", "from": "Label", "name": "Label" }, { "im": "./input/index", "from": "Input", "name": "Input" }, { "im": "./radio", "from": "Radio", "name": "Radio" }, { "im": "./select/index", "from": "Select", "name": "Select" }, { "im": "./select/option", "from": "OptionSelect", "name": "OptionSelect" }, { "im": "./switch", "from": "Switch", "name": "Switch" }, { "im": "./textarea/index", "from": "Textarea", "name": "Textarea" }]; // Module exports __pkg.exports.process = function ({ require, prop, value }) { (require || prop === 'CheckboxGroup') && _export("CheckboxGroup", CheckboxGroup = require ? require('./checkbox/group').CheckboxGroup : value); (require || prop === 'Checkbox') && _export("Checkbox", Checkbox = require ? require('./checkbox/index').Checkbox : value); (require || prop === 'Form') && _export("Form", Form = require ? require('./form').Form : value); (require || prop === 'Error') && _export("Error", Error = require ? require('./input/components/error').Error : value); (require || prop === 'Label') && _export("Label", Label = require ? require('./input/components/label').Label : value); (require || prop === 'Input') && _export("Input", Input = require ? require('./input/index').Input : value); (require || prop === 'Radio') && _export("Radio", Radio = require ? require('./radio').Radio : value); (require || prop === 'Select') && _export("Select", Select = require ? require('./select/index').Select : value); (require || prop === 'OptionSelect') && _export("OptionSelect", OptionSelect = require ? require('./select/option').OptionSelect : value); (require || prop === 'Switch') && _export("Switch", Switch = require ? require('./switch').Switch : value); (require || prop === 'Textarea') && _export("Textarea", Textarea = require ? require('./textarea/index').Textarea : 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=form.sjs.js.map