@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
238 lines • 17.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var _1 = require("./");
var stories_1 = require("../../../Common/stories");
var addon_knobs_1 = require("@storybook/addon-knobs");
var Grid_1 = require("../../Containers/Grid");
var formik_1 = require("formik");
var Yup = require("yup");
var typestyle_1 = require("typestyle");
var Input_1 = require("../Input");
var Password_1 = require("../Password");
var Date_1 = require("../Date");
var randomSentence = require("random-sentence");
exports.default = {
title: 'Components/Inputs/UpSelect',
decorators: [
addon_knobs_1.withKnobs,
stories_1.getRootContainer('UpSelect'),
function (UpSelect) { return (React.createElement("div", { style: { height: "350px" } },
React.createElement(UpSelect, null))); }
],
component: _1.default
};
var data = [];
for (var i = 1; i < 1000; i++) {
data.push({
id: i,
title: randomSentence({ words: 5 })
});
}
;
var UserCreationForm = 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, { className: 'up-form', gutter: 16 },
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { className: 'up-form-field', xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(_1.default, { autoload: false, isRequired: false, allowClear: true, allowCreate: true, default: null, multiple: false, floatingLabel: "Civilit\u00E9", tooltip: "Votre civilit\u00E9", minimumInputLength: 3, createOptionPosition: 'first', data: [
{ id: 1, text: 'M.' },
{ id: 2, text: 'Mme' },
{ id: 3, text: 'Mlle' },
{ id: 4, text: 'Dr' },
], onChange: console.log })),
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(Input_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(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(Input_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.UpRow, null,
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(Input_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 }));
}, showPasswordOnClick: true, showSuccess: dirty && onBlurState.password, value: values.password, onChange: handleChange }))),
React.createElement(Grid_1.UpRow, null,
React.createElement(Grid_1.UpCol, { className: 'up-form-field', xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(_1.default, { autoload: false, isRequired: false, allowClear: true, allowCreate: true, default: null, multiple: false, floatingLabel: "Civilit\u00E9", tooltip: "Votre civilit\u00E9", minimumInputLength: 3, createOptionPosition: 'first', data: [
{ id: 1, text: 'M.' },
{ id: 2, text: 'Mme' },
{ id: 3, text: 'Mlle' },
{ id: 4, text: 'Dr' },
], onChange: console.log })),
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(Input_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(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(Input_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.UpRow, null,
React.createElement(Grid_1.UpCol, { xs: 24, sm: 12, md: 8, lg: 6 },
React.createElement(Date_1.default, { name: "birthdate", floatingLabel: "Date de naissance", 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, placeholder: "Date de naissance", helpMessage: function (children) { return (React.createElement("div", { className: HelpMessageDisplayStyle(errors.email) },
children,
React.createElement("div", { className: "up-wrapper-help-message-inline" }, "Vous devez renseigner votre date de naissance"))); } })),
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 }));
}, showPasswordOnClick: true, showSuccess: dirty && onBlurState.password, value: values.password, onChange: handleChange }))))));
};
exports.General = function () {
var _a = React.useState({ id: 1, text: 'M.' }), selectedValue = _a[0], setValue = _a[1];
var onChange = function (event, value) {
setValue(value);
};
return (React.createElement(_1.default, { tooltip: "Civilité", isRequired: true, default: null, name: "user", dataTestId: 'UpSelect', data: [
{ id: 1, text: 'M.' },
{ id: 2, text: 'Mme' },
{ id: 3, text: 'Mlle' },
{ id: 4, text: 'Dr' },
], value: selectedValue, floatingLabel: "Floating Label", onChange: onChange }));
};
exports.FetchingDataWithQuery = function () { return (React.createElement(_1.default, { autoload: false, isRequired: false, allowClear: true, default: null, multiple: false, tooltip: "Votre ville de naissance", minimumInputLength: 3, returnType: "id", labelKey: "title", dataSource: {
query: "https://jsonplaceholder.typicode.com/todos",
text: "title"
}, onChange: console.log })); };
exports.FetchingDataWithFucntion = function () {
var _a = React.useState(null), selectedValue = _a[0], setValue = _a[1];
var onChange = function (event, value) {
setValue(value);
};
return (React.createElement(_1.default, { isRequired: false, allowClear: true, default: null, multiple: false, tooltip: "Votre ville de naissance", minimumInputLength: 3, returnType: "id", labelKey: "title", dataSource: {
fetchData: function (input, defaultParameters) {
return Promise.resolve(data.filter(function (item) { return item.title.indexOf(input) != -1; }));
},
text: "title"
}, autoload: false, value: selectedValue, floatingLabel: "Rechercher", onChange: onChange }));
};
exports.FetchingDataWithFunctionAndAutoload = function () {
var _a = React.useState(null), selectedValue = _a[0], setValue = _a[1];
var onChange = function (event, value) {
setValue(value);
};
return (React.createElement(_1.default, { isRequired: false, allowClear: true, default: null, multiple: false, tooltip: "Votre ville de naissance", minimumInputLength: 3, returnType: "id", labelKey: "title", dataSource: {
fetchData: function (input, defaultParameters) {
return Promise.resolve(data.filter(function (item) { return item.title.indexOf(input) != -1; }));
},
text: "title"
}, autoload: true, value: selectedValue, floatingLabel: "Rechercher", onChange: onChange }));
};
exports.FetchingDataWithFunctionAndAutoloadAndOneItem = function () {
var _a = React.useState(null), selectedValue = _a[0], setValue = _a[1];
var onChange = function (event, value) {
setValue(value);
};
return (React.createElement(_1.default, { isRequired: false, allowClear: true, default: null, multiple: false, tooltip: "Votre ville de naissance", minimumInputLength: 3, returnType: "id", labelKey: "title", dataSource: {
fetchData: function (input, defaultParameters) {
return Promise.resolve([{ title: 'Auto-selected item', id: 1 }]);
},
text: "title"
}, autoload: true, value: selectedValue, floatingLabel: "Rechercher", onChange: onChange }));
};
exports.FetchingDataWithProxy = function () { return (React.createElement(_1.default, { autoload: false, isRequired: false, allowClear: true, default: null, multiple: false, tooltip: "Votre ville de naissance", minimumInputLength: 3, dataSource: {
query: "https://jsonplaceholder.typicode.com/todos",
text: "title",
handleResponse: function (response) {
return response && response.map(function getItem(item) { return { id: 100, title: item.title + "-" + item.id }; });
}
}, onChange: console.log })); };
exports.IsRequired = function () { return (React.createElement("div", { style: { margin: "30px" } },
React.createElement(_1.default, { isRequired: true, allowClear: true, default: null, multiple: false, tooltip: "Votre civilit\u00E9", filterOptions: function (option, filter) {
var filterMatched = !filter
|| (option.label != null && ("" + option.label).toLowerCase().includes(filter.toLowerCase()))
|| (option.value.code != null && ("" + option.value.code).toLowerCase().includes(filter.toLowerCase()));
return filterMatched;
}, data: [
{ id: 1, text: 'M.', code: '01' },
{ id: 2, text: 'Mme', code: '02' },
{ id: 3, text: 'Mlle', code: '03' },
{ id: 4, text: 'Dr', code: '04' },
], onChange: console.log }))); };
exports.ReturnId = function () { return (React.createElement("div", { style: { margin: "30px" } },
React.createElement(_1.default, { isRequired: true, allowClear: true, default: 2, multiple: false, returnType: "id", valueKey: "id", tooltip: "Votre ville de naissance", data: [
{ id: 1, text: 'M.' },
{ id: 2, text: 'Mme' },
{ id: 3, text: 'Mlle' },
{ id: 4, text: 'Dr' },
], onChange: console.log }))); };
exports.Creatable = function () { return (React.createElement("div", { style: { margin: "30px" } },
React.createElement(_1.default, { autoload: false, isRequired: false, allowClear: true, allowCreate: true, default: null, multiple: false, tooltip: "Votre civilit\u00E9", minimumInputLength: 3, createOptionPosition: 'first', data: [
{ id: 1, text: 'M.' },
{ id: 2, text: 'Mme' },
{ id: 3, text: 'Mlle' },
{ id: 4, text: 'Dr' },
], onChange: console.log }))); };
exports.AsyncCreatable = function () { return (React.createElement("div", { style: { margin: "30px" } },
React.createElement(_1.default, { autoload: false, isRequired: false, allowClear: true, allowCreate: true, default: null, multiple: false, tooltip: "Votre ville de naissance", minimumInputLength: 3, createOptionPosition: 'first', dataSource: {
query: "https://jsonplaceholder.typicode.com/todos",
text: "title"
}, onChange: console.log }))); };
exports.MultiCreatable = function () { return (React.createElement("div", { style: { margin: "30px" } },
React.createElement(_1.default, { autoload: false, isRequired: false, allowClear: true, allowCreate: true, default: null, multiple: true, tooltip: "Vos couleurs pr\u00E9f\u00E9r\u00E9es", minimumInputLength: 3, createOptionPosition: 'first', data: [
{ id: 1, text: 'Rouge' },
{ id: 2, text: 'Bleu' },
{ id: 3, text: 'Vert' },
{ id: 4, text: 'Orange' },
], onChange: console.log }))); };
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(UserCreationForm, tslib_1.__assign({}, props)); }))))); };
//# sourceMappingURL=index.stories.js.map