@leveluptuts/fresh
Version:
They're dope, they're fresh.
794 lines (694 loc) • 28 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var create = _interopDefault(require('zustand'));
var produce = _interopDefault(require('immer'));
var PropTypes = _interopDefault(require('prop-types'));
var TagsInput = _interopDefault(require('react-tagsinput'));
var Markdown = _interopDefault(require('markdown-to-jsx'));
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
var immer = function immer(config) {
return function (set, get) {
return config(function (fn) {
return set(produce(fn));
}, get);
};
};
// TODO fix these types
var store = function store(set) {
return {
data: {},
isReady: {},
defaultValues: {},
setForm: function setForm(formData, formId) {
return set(function (state) {
state.data[formId] = _extends({}, formData);
});
},
setField: function setField(id, value, formId) {
return set(function (state) {
state.data[formId][id] = value;
});
},
setDefaults: function setDefaults(formData, formId) {
return set(function (state) {
state.defaultValues[formId] = _extends({}, formData);
});
},
register: function register(formData, formId) {
return set(function (state) {
state.data[formId] = _extends({}, formData);
state.defaultValues[formId] = _extends({}, formData);
state.isReady[formId] = true;
});
},
unregister: function unregister(formId) {
return set(function (state) {
state.isReady[formId] = false;
});
},
registerField: function registerField(fieldId, defaultValue, formId) {
return set(function (state) {
state.data[formId][fieldId] = defaultValue;
});
},
resetForm: function resetForm(formId) {
return set(function (state) {
state.data[formId] = state.defaultValues[formId];
});
}
};
};
var useForm =
/*#__PURE__*/
create(
/*#__PURE__*/
immer(store));
var FormContext =
/*#__PURE__*/
React__default.createContext(null);
var CancelButton = function CancelButton(_ref) {
var cancelAction = _ref.cancelAction,
_ref$cancelText = _ref.cancelText,
cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
formId = _ref.formId;
var _useForm = useForm(),
resetForm = _useForm.resetForm;
return React__default.createElement("button", {
id: "fresh-cancel",
className: "fresh-button fresh-cancel",
onClick: function onClick() {
cancelAction(formId);
resetForm(formId);
},
type: "reset"
}, cancelText);
};
var Tooltip = function Tooltip(_ref) {
var tooltip = _ref.tooltip,
tooltipBackground = _ref.tooltipBackground,
tooltipColor = _ref.tooltipColor,
tooltipIconColor = _ref.tooltipIconColor;
var tooltipStyle = {
'--fresh-tooltip-background': tooltipBackground,
'--fresh-tooltip-color': tooltipColor,
'--fresh-tooltip-icon-color': tooltipIconColor
};
return React__default.createElement("span", {
className: "fresh-tooltip",
"data-tooltip": tooltip,
style: tooltipStyle
}, React__default.createElement("svg", {
className: "fresh-tooltip-icon",
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, React__default.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM9.02539 5.91797H5.84668V7.79102H6.91309V11.127H5.84668V13H10.0098V11.127H9.02539V5.91797ZM6.89258 3.16309C6.83333 3.30892 6.80371 3.46615 6.80371 3.63477C6.80371 3.80339 6.83333 3.96289 6.89258 4.11328C6.95638 4.25911 7.04297 4.38672 7.15234 4.49609C7.26172 4.60547 7.38932 4.69206 7.53516 4.75586C7.68555 4.81966 7.84733 4.85156 8.02051 4.85156C8.18457 4.85156 8.33952 4.81966 8.48535 4.75586C8.63118 4.69206 8.75879 4.60547 8.86816 4.49609C8.97754 4.38672 9.06413 4.25911 9.12793 4.11328C9.19173 3.96289 9.22363 3.80339 9.22363 3.63477C9.22363 3.46615 9.19173 3.30892 9.12793 3.16309C9.06413 3.0127 8.97754 2.88281 8.86816 2.77344C8.75879 2.66406 8.63118 2.57747 8.48535 2.51367C8.33952 2.44987 8.18457 2.41797 8.02051 2.41797C7.84733 2.41797 7.68555 2.44987 7.53516 2.51367C7.38932 2.57747 7.26172 2.66406 7.15234 2.77344C7.04297 2.88281 6.95638 3.0127 6.89258 3.16309Z",
fill: tooltipIconColor
})));
};
Tooltip.propTypes = {
tooltip: PropTypes.string,
tooltipBackground: PropTypes.string,
tooltipColor: PropTypes.string,
tooltipIconColor: PropTypes.string
};
Tooltip.defaultProps = {
tooltip: '',
tooltipBackground: '#eee',
tooltipColor: '#000',
tooltipIconColor: '#000'
};
var Select = function Select(_ref) {
var options = _ref.options,
fieldId = _ref.fieldId,
formId = _ref.formId,
_ref$displayProperty = _ref.displayProperty,
displayProperty = _ref$displayProperty === void 0 ? '' : _ref$displayProperty,
_ref$valueProperty = _ref.valueProperty,
valueProperty = _ref$valueProperty === void 0 ? '' : _ref$valueProperty,
_ref$className = _ref.className,
className = _ref$className === void 0 ? '' : _ref$className;
var _useForm = useForm(),
data = _useForm.data,
setField = _useForm.setField,
registerField = _useForm.registerField,
defaultValues = _useForm.defaultValues;
React.useEffect(function () {
var _defaultValues$formId, _defaultValues$formId2, _defaultValues$formId3, _defaultValues$formId4;
var defaultValue = (defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId = defaultValues[formId]) === null || _defaultValues$formId === void 0 ? void 0 : _defaultValues$formId[fieldId]) ? (defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId2 = defaultValues[formId]) === null || _defaultValues$formId2 === void 0 ? void 0 : (_defaultValues$formId3 = _defaultValues$formId2[fieldId]) === null || _defaultValues$formId3 === void 0 ? void 0 : _defaultValues$formId3[valueProperty]) || (defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId4 = defaultValues[formId]) === null || _defaultValues$formId4 === void 0 ? void 0 : _defaultValues$formId4[fieldId]) : options[0];
registerField(fieldId, defaultValue, formId);
}, []);
if (!(fieldId in data[formId])) return null;
return React__default.createElement("select", {
id: "fresh-" + fieldId + "-" + formId,
className: "fresh-input fresh-input-select " + className,
onChange: function onChange(e) {
return setField(fieldId, e.target.value, formId);
},
value: data[formId][fieldId]
}, options.map(function (option, i) {
return React__default.createElement("option", {
value: (option === null || option === void 0 ? void 0 : option[valueProperty]) || option,
key: "fresh-" + fieldId + "-" + formId + "-" + i,
className: "fresh-option"
}, (option === null || option === void 0 ? void 0 : option[displayProperty]) || option);
}));
};
var Reference = function Reference(_ref) {
var options = _ref.options,
fieldId = _ref.fieldId,
_ref$keyProperty = _ref.keyProperty,
keyProperty = _ref$keyProperty === void 0 ? 'id' : _ref$keyProperty,
displayProperty = _ref.displayProperty,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
_ref$className = _ref.className,
className = _ref$className === void 0 ? '' : _ref$className,
formId = _ref.formId;
var _useForm = useForm(),
data = _useForm.data,
setField = _useForm.setField,
isReady = _useForm.isReady,
defaultValues = _useForm.defaultValues,
registerField = _useForm.registerField;
var _useState = React.useState(''),
inputValue = _useState[0],
setInputValue = _useState[1];
var _useState2 = React.useState(false),
isFocused = _useState2[0],
setIsFocused = _useState2[1];
React.useEffect(function () {
var _ref2, _defaultValues$formId;
var defaultValue = (_ref2 = defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId = defaultValues[formId]) === null || _defaultValues$formId === void 0 ? void 0 : _defaultValues$formId[fieldId]) !== null && _ref2 !== void 0 ? _ref2 : '';
registerField(fieldId, defaultValue, formId);
}, []);
if (!(fieldId in data[formId])) return null; // If the form is not registered or there is not data object
if (!isReady) return null;
return React__default.createElement(React__default.Fragment, null, React__default.createElement("input", {
id: "fresh-" + fieldId + "-" + formId,
onChange: function onChange(e) {
return setInputValue(e.target.value);
},
value: inputValue,
onFocus: function onFocus() {
return setIsFocused(true);
},
onBlur: function onBlur() {
return setIsFocused(false);
},
placeholder: placeholder,
type: "text",
className: "fresh-input fresh-input-reference " + className
}), isFocused && React__default.createElement("div", {
className: "fresh-focused"
}, options.filter(function (option) {
return option[displayProperty].toLowerCase().includes(inputValue.toLowerCase());
}).map(function (option) {
return React__default.createElement("div", {
key: option[keyProperty],
style: {
padding: '0.75em'
},
onMouseDown: function onMouseDown() {
setField(fieldId, option, formId);
setInputValue(option[displayProperty]);
}
}, option[displayProperty]);
})));
};
var Password = function Password(_ref) {
var _data$formId$fieldId;
var placeholder = _ref.placeholder,
_ref$className = _ref.className,
className = _ref$className === void 0 ? '' : _ref$className,
required = _ref.required,
fieldId = _ref.fieldId,
_ref$strength = _ref.strength,
strength = _ref$strength === void 0 ? true : _ref$strength,
type = _ref.type,
formId = _ref.formId;
var _useForm = useForm(),
data = _useForm.data,
setField = _useForm.setField,
defaultValues = _useForm.defaultValues,
registerField = _useForm.registerField; // If the form is not registered or there is not data object
React.useEffect(function () {
var _ref2, _defaultValues$formId;
var defaultValue = (_ref2 = defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId = defaultValues[formId]) === null || _defaultValues$formId === void 0 ? void 0 : _defaultValues$formId[fieldId]) !== null && _ref2 !== void 0 ? _ref2 : '';
registerField(fieldId, defaultValue, formId);
}, []);
if (!(fieldId in data[formId])) return null;
var strengthValue = calculateScore((_data$formId$fieldId = data[formId][fieldId]) !== null && _data$formId$fieldId !== void 0 ? _data$formId$fieldId : '');
var strengthMeter = {
background: '#ccc',
width: 'calc(193px * 0.25)'
};
if (strengthValue >= 2 && strengthValue < 3) {
strengthMeter = {
width: 'calc(193px * 0.5)',
background: 'red'
};
} else if (strengthValue >= 3 && strengthValue < 4) {
strengthMeter = {
width: 'calc(193px * 0.75)',
background: 'red'
};
} else if (strengthValue >= 4) {
strengthMeter = {
width: 'calc(193px * 1)',
background: 'green'
};
}
return React__default.createElement(React__default.Fragment, null, React__default.createElement("input", {
className: "fresh-input fresh-input-password " + className,
placeholder: placeholder,
type: type,
required: required,
id: "fresh-" + fieldId + "-" + formId,
value: data[formId][fieldId],
onChange: function onChange(e) {
return setField(fieldId, e.target.value, formId);
}
}), strength && React__default.createElement("div", {
style: _extends({
height: '4px',
marginBottom: '1rem',
transition: '0.3s ease all'
}, strengthMeter)
}));
};
var options = {
showText: true,
fieldPartialMatch: true,
minimumLength: 4
};
function calculateScore(password) {
var score = 0; // password < options.minimumLength
if (password.length < options.minimumLength) {
return -1;
} // password length
score += password.length * 4; // password has 3 numbers
if (password.match(/(.*[0-9].*[0-9].*[0-9])/)) {
score += 5;
} // password has at least 2 sybols
var symbols = '.*[!,@,#,$,%,^,&,*,?,_,~]';
symbols = new RegExp('(' + symbols + symbols + ')');
if (password.match(symbols)) {
score += 5;
} // password has Upper and Lower chars
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
score += 10;
} // password has number and chars
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) {
score += 15;
} // password has number and symbol
if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/)) {
score += 15;
} // password has char and symbol
if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/)) {
score += 15;
} // password is just numbers or chars
if (password.match(/^\w+$/) || password.match(/^\d+$/)) {
score -= 10;
}
if (score > 100) {
score = 100;
}
if (score < 0) {
score = 0;
}
return score * 0.04;
}
var Tags = function Tags(_ref) {
var fieldId = _ref.fieldId,
_ref$className = _ref.className,
className = _ref$className === void 0 ? '' : _ref$className,
formId = _ref.formId;
var _useForm = useForm(),
data = _useForm.data,
setField = _useForm.setField,
defaultValues = _useForm.defaultValues,
registerField = _useForm.registerField;
React.useEffect(function () {
var _ref2, _defaultValues$formId;
var defaultValue = (_ref2 = defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId = defaultValues[formId]) === null || _defaultValues$formId === void 0 ? void 0 : _defaultValues$formId[fieldId]) !== null && _ref2 !== void 0 ? _ref2 : [];
registerField(fieldId, defaultValue, formId);
}, []);
if (!(fieldId in data[formId])) return null;
return React__default.createElement(TagsInput, {
value: data[formId][fieldId] || [],
onChange: function onChange(value) {
return setField(fieldId, value, formId);
},
className: "fresh-input-tags " + className,
id: "fresh-" + fieldId + "-" + formId,
style: {
marginTop: '1rem'
}
});
};
var TextArea = function TextArea(_ref) {
var className = _ref.className,
fieldId = _ref.fieldId,
formId = _ref.formId,
placeholder = _ref.placeholder;
var _useForm = useForm(),
data = _useForm.data,
setField = _useForm.setField,
registerField = _useForm.registerField,
defaultValues = _useForm.defaultValues;
React.useEffect(function () {
var _ref2, _defaultValues$formId;
var defaultValue = (_ref2 = defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId = defaultValues[formId]) === null || _defaultValues$formId === void 0 ? void 0 : _defaultValues$formId[fieldId]) !== null && _ref2 !== void 0 ? _ref2 : '';
registerField(fieldId, defaultValue, formId);
}, []);
if (!(fieldId in data[formId])) return null;
return React__default.createElement("textarea", {
id: "fresh-" + fieldId + "-" + formId,
placeholder: placeholder,
value: data[formId][fieldId],
className: "fresh-input fresh-input-textarea " + className,
onChange: function onChange(e) {
return setField(fieldId, e.target.value, formId);
}
});
};
var NumberField = function NumberField(_ref) {
var fieldId = _ref.fieldId,
placeholder = _ref.placeholder,
required = _ref.required,
formId = _ref.formId,
className = _ref.className;
var _useForm = useForm(),
data = _useForm.data,
setField = _useForm.setField,
defaultValues = _useForm.defaultValues,
registerField = _useForm.registerField;
React.useEffect(function () {
var _ref2, _defaultValues$formId;
var defaultValue = (_ref2 = defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId = defaultValues[formId]) === null || _defaultValues$formId === void 0 ? void 0 : _defaultValues$formId[fieldId]) !== null && _ref2 !== void 0 ? _ref2 : '';
registerField(fieldId, defaultValue, formId);
}, []);
if (!(fieldId in data[formId])) return null;
return React__default.createElement("input", {
required: required,
className: "fresh-input fresh-input-number " + className,
placeholder: placeholder,
id: "fresh-" + fieldId + "-" + formId,
type: "number",
value: data[formId][fieldId],
onChange: function onChange(e) {
var value = e.target.value ? parseInt(e.target.value) : null;
setField(fieldId, value, formId);
}
});
};
var MarkdownTextArea = function MarkdownTextArea(_ref) {
var fieldId = _ref.fieldId,
placeholder = _ref.placeholder,
formId = _ref.formId;
var _useForm = useForm(),
data = _useForm.data,
setField = _useForm.setField,
defaultValues = _useForm.defaultValues,
registerField = _useForm.registerField;
React.useEffect(function () {
var _ref2, _defaultValues$formId;
var defaultValue = (_ref2 = defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId = defaultValues[formId]) === null || _defaultValues$formId === void 0 ? void 0 : _defaultValues$formId[fieldId]) !== null && _ref2 !== void 0 ? _ref2 : '';
registerField(fieldId, defaultValue, formId);
}, []);
if (!(fieldId in data[formId])) return null;
return React__default.createElement("div", {
className: "fresh-markdown-wrapper"
}, React__default.createElement("textarea", {
id: "fresh-" + fieldId,
placeholder: placeholder,
value: data[formId][fieldId],
className: "fresh-input fresh-input-textarea",
onChange: function onChange(e) {
return setField(fieldId, e.target.value, formId);
}
}), React__default.createElement("div", {
className: "fresh-input fresh-input-markdown"
}, React__default.createElement(Markdown, {
children: data[formId][fieldId] || ''
})));
};
var Text = function Text(_ref) {
var className = _ref.className,
fieldId = _ref.fieldId,
placeholder = _ref.placeholder,
required = _ref.required,
type = _ref.type,
formId = _ref.formId;
var _useForm = useForm(),
data = _useForm.data,
setField = _useForm.setField,
registerField = _useForm.registerField,
defaultValues = _useForm.defaultValues;
React.useEffect(function () {
var _ref2, _defaultValues$formId;
var defaultValue = (_ref2 = defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId = defaultValues[formId]) === null || _defaultValues$formId === void 0 ? void 0 : _defaultValues$formId[fieldId]) !== null && _ref2 !== void 0 ? _ref2 : '';
registerField(fieldId, defaultValue, formId);
}, []);
if (!(fieldId in data[formId])) return null;
return React__default.createElement("input", {
required: required,
className: "fresh-input fresh-input-" + type + " " + className,
placeholder: placeholder,
id: "fresh-" + fieldId + "-" + formId,
type: type,
value: data[formId][fieldId],
onChange: function onChange(e) {
return setField(fieldId, e.target.value, formId);
}
});
};
var Toggle = function Toggle(_ref) {
var fieldId = _ref.fieldId,
_ref$className = _ref.className,
className = _ref$className === void 0 ? '' : _ref$className,
formId = _ref.formId;
var _useForm = useForm(),
data = _useForm.data,
setField = _useForm.setField,
defaultValues = _useForm.defaultValues,
registerField = _useForm.registerField;
React.useEffect(function () {
var _ref2, _defaultValues$formId;
var defaultValue = (_ref2 = defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$formId = defaultValues[formId]) === null || _defaultValues$formId === void 0 ? void 0 : _defaultValues$formId[fieldId]) !== null && _ref2 !== void 0 ? _ref2 : false;
registerField(fieldId, defaultValue, formId);
}, []);
if (!(fieldId in data[formId])) return null;
return React__default.createElement("div", {
className: className + " fresh-switch"
}, React__default.createElement("input", {
checked: data[formId][fieldId] || false,
type: "checkbox",
id: "fresh-" + fieldId,
className: "fresh-input-toggle",
onChange: function onChange(_) {
return setField(fieldId, !data[formId][fieldId], formId);
}
}), React__default.createElement("span", {
className: "fresh-slider " + (data[formId][fieldId] ? "on" : ''),
onChange: function onChange(_) {
return setField(fieldId, !data[formId][fieldId], formId);
}
}));
};
var camelCase = function camelCase(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
if (+match === 0) return '';
return index == 0 ? match.toLowerCase() : match.toUpperCase();
});
};
var Field = function Field(_ref) {
var _ref$required = _ref.required,
required = _ref$required === void 0 ? false : _ref$required,
children = _ref.children,
_ref$name = _ref.name,
name = _ref$name === void 0 ? '' : _ref$name,
_ref$type = _ref.type,
type = _ref$type === void 0 ? 'text' : _ref$type,
_ref$label = _ref.label,
label = _ref$label === void 0 ? true : _ref$label,
error = _ref.error,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
options = _ref.options,
strength = _ref.strength,
_ref$className = _ref.className,
className = _ref$className === void 0 ? '' : _ref$className,
_ref$defaultValue = _ref.defaultValue,
defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
_ref$displayProperty = _ref.displayProperty,
displayProperty = _ref$displayProperty === void 0 ? '' : _ref$displayProperty,
_ref$valueProperty = _ref.valueProperty,
valueProperty = _ref$valueProperty === void 0 ? '' : _ref$valueProperty,
_ref$keyProperty = _ref.keyProperty,
keyProperty = _ref$keyProperty === void 0 ? 'id' : _ref$keyProperty,
tooltip = _ref.tooltip,
_ref$readOnly = _ref.readOnly,
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
_ref$wrapperStyle = _ref.wrapperStyle,
wrapperStyle = _ref$wrapperStyle === void 0 ? {} : _ref$wrapperStyle;
var fieldId = name || camelCase(children);
var _useContext = React.useContext(FormContext),
formId = _useContext.formId;
var standardProps = {
children: children,
required: required,
name: name,
type: type,
label: label,
error: error,
placeholder: placeholder,
options: options,
className: className,
defaultValue: defaultValue,
displayProperty: displayProperty,
readOnly: readOnly,
formId: formId
};
return React__default.createElement("div", {
className: "fresh-field-wrapper " + fieldId,
style: wrapperStyle
}, React__default.createElement("label", {
className: "fresh-label",
htmlFor: "fresh-" + fieldId
}, React__default.createElement("span", {
className: "fresh-title"
}, required && '*', " ", label && children, "\xA0", tooltip && React__default.createElement(Tooltip, {
tooltip: tooltip
})), function () {
switch (type) {
case 'select':
return React__default.createElement(Select, Object.assign({
fieldId: fieldId,
valueProperty: valueProperty
}, standardProps));
case 'reference':
return React__default.createElement(Reference, Object.assign({
fieldId: fieldId,
keyProperty: keyProperty
}, standardProps));
case 'password':
return React__default.createElement(Password, Object.assign({
strength: strength,
fieldId: fieldId
}, standardProps));
case 'tags':
return React__default.createElement(Tags, Object.assign({
fieldId: fieldId
}, standardProps));
case 'textarea':
return React__default.createElement(TextArea, Object.assign({
fieldId: fieldId
}, standardProps));
case 'number':
return React__default.createElement(NumberField, Object.assign({
fieldId: fieldId
}, standardProps));
case 'markdown':
return React__default.createElement(MarkdownTextArea, Object.assign({
fieldId: fieldId
}, standardProps));
case 'toggle':
return React__default.createElement(Toggle, Object.assign({
fieldId: fieldId
}, standardProps));
default:
return React__default.createElement(Text, Object.assign({
fieldId: fieldId
}, standardProps));
}
}()), error && React__default.createElement("div", {
className: "fresh-error"
}, error));
};
Field.defaultProps = {
defaultValue: null,
options: [],
tooltip: ''
};
var Form = function Form(_ref) {
var _ref$cancelAction = _ref.cancelAction,
cancelAction = _ref$cancelAction === void 0 ? function () {
return null;
} : _ref$cancelAction,
_ref$onChange = _ref.onChange,
_onChange = _ref$onChange === void 0 ? null : _ref$onChange,
_ref$cancelButton = _ref.cancelButton,
cancelButton = _ref$cancelButton === void 0 ? true : _ref$cancelButton,
_ref$cancelText = _ref.cancelText,
cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
children = _ref.children,
formId = _ref.formId,
_onSubmit = _ref.onSubmit,
_ref$submitText = _ref.submitText,
submitText = _ref$submitText === void 0 ? 'Submit' : _ref$submitText,
_ref$className = _ref.className,
className = _ref$className === void 0 ? '' : _ref$className,
_ref$defaultValues = _ref.defaultValues,
defaultValues = _ref$defaultValues === void 0 ? {} : _ref$defaultValues;
var _useForm = useForm(),
data = _useForm.data,
register = _useForm.register,
isReady = _useForm.isReady,
unregister = _useForm.unregister;
React.useEffect(function () {
register(defaultValues, formId);
return function () {
unregister(formId);
};
}, []);
if (!isReady[formId]) return null;
return React__default.createElement(FormContext.Provider, {
value: {
formId: formId
}
}, React__default.createElement("form", {
className: className + " fresh-form",
onSubmit: function onSubmit(e) {
e.preventDefault();
_onSubmit(data[formId]);
},
onChange: function onChange() {
if (_onChange) _onChange(data[formId]);
}
}, children, React__default.createElement("div", null, React__default.createElement("button", {
id: "fresh-submit",
className: "fresh-button fresh-submit",
type: "submit"
}, submitText), cancelButton && React__default.createElement(CancelButton, {
formId: formId,
cancelAction: cancelAction,
cancelText: cancelText
}))));
}; // TODO
exports.Field = Field;
exports.Form = Form;
exports.useForm = useForm;
//# sourceMappingURL=fresh.cjs.development.js.map