@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
281 lines • 20.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var UpInput_1 = require("./UpInput");
var stories_1 = require("../../../Common/stories");
var addon_knobs_1 = require("@storybook/addon-knobs");
var Label_1 = require("../../Display/Label");
var Grid_1 = require("../../Containers/Grid");
var UpForm_1 = require("../../Containers/Form/UpForm");
var formik_1 = require("formik");
var Yup = require("yup");
var Password_1 = require("../Password");
var typestyle_1 = require("typestyle");
var Select_1 = require("../../Inputs/Select");
var Text_1 = require("../../Inputs/Text");
var UpNumber_1 = require("../../Inputs/Number/UpNumber");
var UpDate_1 = require("../../Inputs/Date/UpDate");
exports.default = {
title: 'Components/Inputs/UpInput',
decorators: [addon_knobs_1.withKnobs, stories_1.getRootContainer('UpInput')],
component: UpInput_1.UpInput,
};
var EmailForm = function (props) {
var _a = React.useState({}), onBlurState = _a[0], setOnBlurState = _a[1];
var HelpMessageDisplayStyle = function (error) {
return typestyle_1.style({
position: 'relative',
cursor: 'help',
height: '100%',
$nest: {
'& .up-wrapper-help-message-inline': {
display: 'inline-block',
color: error ? 'red' : 'black',
fontSize: '8pt',
},
},
});
};
var values = props.values, touched = props.touched, errors = props.errors, dirty = props.dirty, isSubmitting = props.isSubmitting, handleChange = props.handleChange, handleBlur = props.handleBlur, handleSubmit = props.handleSubmit, handleReset = props.handleReset;
return (React.createElement("form", { onSubmit: handleSubmit },
React.createElement(UpInput_1.default, { name: 'email', type: 'email', onBlur: function (e) {
handleBlur(e);
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { email: true }));
}, floatingLabel: 'Email', errorDisplayMode: 'inline', showError: dirty && onBlurState.email, showSuccess: dirty && onBlurState.email, error: errors.email === undefined ? null : errors.email, hasError: errors.email != null, value: values.email, onChange: handleChange, hasClearOption: true, onFocus: function (e) {
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { email: false }));
}, autocomplete: 'off', iconPosition: 'right', placeholder: 'Renseignez votre email', helpMessage: function (children) { return (React.createElement("div", { className: HelpMessageDisplayStyle(errors.email) },
children,
React.createElement("div", { className: 'up-wrapper-help-message-inline' }, "Vous devez renseigner un email valide"))); } }),
React.createElement(Password_1.default, { name: 'password', floatingLabel: 'Password', onBlur: function (e) {
handleBlur(e);
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { password: true }));
}, iconPosition: 'right', autocomplete: 'off', onFocus: function (e) {
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { password: false }));
}, showSuccess: dirty && onBlurState.password, value: values.password, onChange: handleChange }),
React.createElement(UpInput_1.default, { name: 'firstName', floatingLabel: 'First Name', onBlur: function (e) {
handleBlur(e);
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { firstName: true }));
}, onFocus: function (e) {
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { firstName: false }));
}, value: values.firstName, showSuccess: dirty && onBlurState.firstName, autocomplete: 'off', onChange: handleChange }),
React.createElement(UpInput_1.default, { name: 'lastName', floatingLabel: 'Last Name', onBlur: function (e) {
handleBlur(e);
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { lastName: true }));
}, onFocus: function (e) {
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { lastName: false }));
}, value: values.lastName, showSuccess: dirty && onBlurState.lastName, autocomplete: 'off', onChange: handleChange })));
};
var ComplexForImpl = function (props) {
var _a = React.useState({}), onBlurState = _a[0], setOnBlurState = _a[1];
var HelpMessageDisplayStyle = function (error) {
return typestyle_1.style({
position: 'relative',
cursor: 'help',
height: '100%',
$nest: {
'& .up-wrapper-help-message-inline': {
display: 'inline-block',
color: error ? 'red' : 'black',
fontSize: '8pt',
},
},
});
};
var values = props.values, touched = props.touched, errors = props.errors, dirty = props.dirty, isSubmitting = props.isSubmitting, handleChange = props.handleChange, handleBlur = props.handleBlur, handleSubmit = props.handleSubmit, handleReset = props.handleReset;
return (React.createElement("form", { onSubmit: handleSubmit },
React.createElement(Grid_1.UpGrid, { gutter: 12, rowSpacing: 12 },
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(UpInput_1.default, { name: 'email', type: 'email', onBlur: function (e) {
handleBlur(e);
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { email: true }));
}, floatingLabel: 'Email', errorDisplayMode: 'inline', showError: dirty && onBlurState.email, showSuccess: dirty && onBlurState.email, error: errors.email === undefined ? null : errors.email, hasError: errors.email != null, value: values.email, onChange: handleChange, onFocus: function (e) {
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { email: false }));
}, autocomplete: 'off', iconPosition: 'right', placeholder: 'Renseignez votre email', helpMessage: function (children) { return (React.createElement("div", { className: HelpMessageDisplayStyle(errors.email) },
children,
React.createElement("div", { className: 'up-wrapper-help-message-inline' }, "Vous devez renseigner un email valide"))); } })),
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(Password_1.default, { name: 'password', floatingLabel: 'Password', onBlur: function (e) {
handleBlur(e);
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { password: true }));
}, iconPosition: 'right', autocomplete: 'off', onFocus: function (e) {
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { password: false }));
}, showSuccess: dirty && onBlurState.password, value: values.password, onChange: handleChange })),
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(UpInput_1.default, { name: 'firstName', floatingLabel: 'First Name', onBlur: function (e) {
handleBlur(e);
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { firstName: true }));
}, onFocus: function (e) {
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { firstName: false }));
}, validation: [
{
pattern: /sdqs/,
errorMessage: 'Veuillez renseigner...',
},
], value: values.firstName, showSuccess: dirty && onBlurState.firstName, autocomplete: 'off', onChange: handleChange })),
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(UpInput_1.default, { name: 'lastName', floatingLabel: 'Last Name', onBlur: function (e) {
handleBlur(e);
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { lastName: true }));
}, onFocus: function (e) {
setOnBlurState(tslib_1.__assign(tslib_1.__assign({}, onBlurState), { lastName: false }));
}, value: values.lastName, showSuccess: dirty && onBlurState.lastName, autocomplete: 'off', onChange: handleChange })),
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(Select_1.default, { floatingLabel: 'Civilité', name: 'civility', isRequired: true, default: null, data: [
{ id: 1, text: 'M.' },
{ id: 2, text: 'Mme' },
{ id: 3, text: 'Mlle' },
{ id: 4, text: 'Dr' },
], value: values.civility, onChange: handleChange })),
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(UpNumber_1.default, { floatingLabel: 'Age', name: 'age', isRequired: true, value: values.age, onChange: handleChange })),
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 6, lg: 6 },
React.createElement(UpDate_1.default, { floatingLabel: 'Né(e) le', name: 'birthdate', isRequired: true, value: values.date, onChange: handleChange })),
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 6, lg: 6 },
React.createElement(UpInput_1.default, { floatingLabel: 'Profession', name: 'function', value: values.function, onChange: handleChange })),
React.createElement(Grid_1.UpCol, { xs: 24, sm: 24, md: 24, lg: 24 },
React.createElement(Text_1.default, { name: 'note', value: values.note, onChange: handleChange, width: 'fill', placeholder: 'Mes notes' }))))));
};
exports.General = function () {
var _a = React.useState(null), selectedValue = _a[0], setValue = _a[1];
var onChange = function (event, value) {
setValue(value);
};
return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 6 },
React.createElement(Label_1.default, { text: 'Nom :', required: true, inline: true },
React.createElement(UpInput_1.default, { value: selectedValue, showValidationStatus: false, onChange: onChange, type: 'text', hasClearOption: true }))))));
};
exports.IsReadOnlyInput = function () { return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 6 },
React.createElement(UpInput_1.default, { floatingLabel: addon_knobs_1.text('Floating Label', 'Floating Name'), readonly: addon_knobs_1.boolean('Floating ReadOnly', true), defaultValue: "read only" }),
React.createElement(Label_1.default, { text: addon_knobs_1.text('Label', 'Label') },
React.createElement(UpInput_1.default, { readonly: addon_knobs_1.boolean('ReadOnly', true), defaultValue: "read only" })))))); };
exports.ControlledSearchInput = function () {
var _a = React.useState(''), value = _a[0], setValue = _a[1];
var _b = React.useState(false), isLoading = _b[0], setIsLoading = _b[1];
return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 12 },
React.createElement(Label_1.default, { text: 'Controlled Recherche :', required: true, inline: true },
React.createElement(UpInput_1.default, { type: "search", value: value, onChange: function (event, value) {
setIsLoading(true);
setValue(value);
setTimeout(function () {
setIsLoading(false);
}, 2000);
}, onClear: function () { return setValue(''); }, placeholder: "placeholder ...", iconPosition: 'left', hasClearOption: true, isLoading: isLoading }))))));
};
exports.TimeInput = function () {
var _a = React.useState(''), value = _a[0], setValue = _a[1];
return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 12 },
React.createElement(Label_1.default, { text: 'Input time :' },
React.createElement(UpInput_1.default, { type: "time", value: value, onChange: function (event, value) { return setValue(value); }, onClear: function () { return setValue(''); }, hasClearOption: true }))))));
};
exports.UnControlledSearchInput = function () { return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 12 },
React.createElement(Label_1.default, { text: 'Uncontrolled Recherche :', required: true, inline: true },
React.createElement(UpInput_1.default, { type: "search", iconPosition: 'left', hasClearOption: true, isLoading: true })))))); };
exports.Email = function () { return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 6 },
React.createElement(Label_1.default, { text: 'Email :', required: true, inline: true },
React.createElement(UpInput_1.default, { type: 'email', validation: [
{
pattern: /^(([^<>()\[\]\\.,;:\s@']+(\.[^<>()\[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
errorMessage: 'Le champ doit être un courriel',
},
], iconPosition: 'left' })))))); };
exports.Phone = function () {
var _a = React.useState(''), phoneValue = _a[0], setPhoneValue = _a[1];
var _b = React.useState(''), error = _b[0], setError = _b[1];
var validation = [
{
pattern: /^0[67][\d]+$/,
errorMessage: 'Phone erroné',
},
];
return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 6 },
React.createElement(Label_1.default, { text: 'Phone :', required: true, inline: true },
React.createElement(UpInput_1.default, { type: 'phone', error: error, onChange: function (e, v, error) {
setPhoneValue(v);
setError(error);
}, value: phoneValue, validation: validation, errorDisplayMode: 'inline' }))))));
};
exports.IsRequired = function () { return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 6 },
React.createElement(UpInput_1.default, { floatingLabel: 'Email', isRequired: true, type: 'email' }),
React.createElement(Label_1.default, { text: 'Email :', required: true, inline: true },
React.createElement(UpInput_1.default, { isRequired: true, type: 'email' })))))); };
exports.IntegrationInForm = function () { return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 12 },
React.createElement(formik_1.Formik, { initialValues: { email: '', password: '' }, onSubmit: function (values, _a) {
var setSubmitting = _a.setSubmitting;
setTimeout(function () {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 500);
}, validateOnBlur: true, validationSchema: Yup.object().shape({
email: Yup.string()
.email('Vous devez renseigner un email valide')
.required("L'email est requis"),
}) }, function (props) { return React.createElement(EmailForm, tslib_1.__assign({}, props)); }))))); };
exports.InputWithAutoFocus = function () { return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 6 },
React.createElement(Label_1.default, { text: 'Adresse :' },
React.createElement(UpInput_1.default, { autoFocus: true, isRequired: true })),
React.createElement(Label_1.default, { text: 'Adresse 2 :' },
React.createElement(UpInput_1.default, { isRequired: true })),
React.createElement(Label_1.default, { text: 'Adresse 3 :' },
React.createElement(UpInput_1.default, { isRequired: true })))))); };
exports.ComplexForm = function () { return (React.createElement(Grid_1.UpGrid, null,
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { span: 24 },
React.createElement(formik_1.Formik, { initialValues: { email: '', password: '' }, onSubmit: function (values, _a) {
var setSubmitting = _a.setSubmitting;
setTimeout(function () {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 500);
}, validateOnBlur: true, validationSchema: Yup.object().shape({
email: Yup.string()
.email('Vous devez renseigner un email valide')
.required("L'email est requis"),
}) }, function (props) { return React.createElement(ComplexForImpl, tslib_1.__assign({}, props)); }))))); };
exports.InputWithClearOption = function () {
var _a = React.useState(''), value = _a[0], setValue = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement(UpInput_1.default, { floatingLabel: "ControlledInput", hasClearOption: addon_knobs_1.boolean('hasClearOption', true), iconPosition: "right", value: value, onChange: function (e, value) { return setValue(value); }, onClear: function () { return setValue(''); } }),
React.createElement(UpInput_1.default, { floatingLabel: "UnControlledInput", hasClearOption: addon_knobs_1.boolean('hasClearOption', true), iconPosition: "right" })));
};
exports.FormikForm = function () {
return (React.createElement(UpForm_1.default, { style: {
flexDirection: 'column',
justifyContent: 'space-between',
flexWrap: 'wrap',
}, initialValues: {
email: '',
password: '',
} }, function (formikBag) {
var errors = formikBag.errors, values = formikBag.values, handleChange = formikBag.handleChange;
return (React.createElement(React.Fragment, null,
React.createElement(Label_1.default, { text: 'Adresse :' },
React.createElement(UpInput_1.default, { tabIndex: 2, onChange: handleChange, name: 'email', autoFocus: true, isRequired: true })),
React.createElement(Label_1.default, { text: 'Password :' },
React.createElement(Password_1.default, { onChange: handleChange, name: 'password', tabIndex: 1 })),
React.createElement(Label_1.default, { text: 'Adresse 3 :' },
React.createElement(UpInput_1.default, { isRequired: true, tabIndex: 0 }))));
}));
};
//# sourceMappingURL=index.stories.js.map