Skip to content

Commit

Permalink
Create a new dist version 0.0.9 (#23)
Browse files Browse the repository at this point in the history
Collecting:
- Fix [Wizard] remove hasSteps logic (#18)
- add isOpen prop in FormSelect (#19)
- Impl [Models] Add `FormKeyValueTable` component (#20)
- Update form.util.js (#21)
- Fix [FormKeyValue] fix last row (#22)
  • Loading branch information
ilan7empest authored Jun 20, 2022
1 parent 5a545d8 commit 8fe1c6f
Show file tree
Hide file tree
Showing 14 changed files with 724 additions and 240 deletions.
8 changes: 6 additions & 2 deletions commit_message
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@


Create a new dist version 0.0.8
Create a new dist version 0.0.9

Collecting:
- Fix [Form] wizard and form input (#16)
- Fix [Wizard] remove hasSteps logic (#18)
- add isOpen prop in FormSelect (#19)
- Impl [Models] Add `FormKeyValueTable` component (#20)
- Update form.util.js (#21)
- Fix [FormKeyValue] fix last row (#22)
17 changes: 9 additions & 8 deletions dist/components/FormInput/FormInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));

var _ValidationTemplate = _interopRequireDefault(require("../../elements/ValidationTemplate/ValidationTemplate"));

var _validationService = require("../../utils/validationService");
var _validation = require("../../utils/validation.util");

var _useDetectOutsideClick = require("../../hooks/useDetectOutsideClick");

Expand Down Expand Up @@ -145,6 +145,11 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
(0, _react.useEffect)(function () {
setIsInvalid(meta.invalid && (meta.validating || meta.modified || meta.submitFailed && meta.touched));
}, [meta.invalid, meta.modified, meta.submitFailed, meta.touched, meta.validating]);
(0, _react.useEffect)(function () {
if (meta.valid && showValidationRules) {
setShowValidationRules(false);
}
}, [meta.valid, showValidationRules]);
(0, _react.useEffect)(function () {
if (showValidationRules) {
window.addEventListener('scroll', handleScroll, true);
Expand Down Expand Up @@ -227,8 +232,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
var valueToValidate = value !== null && value !== void 0 ? value : '';
var validationError = null;

if (!(0, _lodash.isEmpty)(validationRules) && valueToValidate !== typedValue) {
var _checkPatternsValidit = (0, _validationService.checkPatternsValidity)(rules, valueToValidate),
if (!(0, _lodash.isEmpty)(validationRules)) {
var _checkPatternsValidit = (0, _validation.checkPatternsValidity)(rules, valueToValidate),
_checkPatternsValidit2 = _slicedToArray(_checkPatternsValidit, 2),
newRules = _checkPatternsValidit2[0],
isValidField = _checkPatternsValidit2[1];
Expand All @@ -245,13 +250,9 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
};
});
}

if (isValidField && showValidationRules || required && valueToValidate === '') {
setShowValidationRules(false);
}
}

if (!validationError) {
if ((0, _lodash.isEmpty)(validationError)) {
if (pattern && !validationPattern.test(valueToValidate)) {
validationError = {
name: 'pattern',
Expand Down
5 changes: 3 additions & 2 deletions dist/components/FormInput/formInput.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
@import '../../scss/shadows';
@import '../../scss/mixins';

@include formField;

.form-field {
@include formField;

&__label {
&-icon {
display: inline-flex;
Expand Down Expand Up @@ -34,6 +34,7 @@
input {
border: 0;
color: inherit;
background-color: transparent;
padding: 0;
width: 100%;

Expand Down
353 changes: 353 additions & 0 deletions dist/components/FormKeyValueTable/FormKeyValueTable.js

Large diffs are not rendered by default.

117 changes: 117 additions & 0 deletions dist/components/FormKeyValueTable/formKeyValueTable.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
@import '../../scss/borders';
@import '../../scss/colors';
$actionsBlockWidth: 72px;

.form-key-value-table {
max-height: 280px;
overflow: hidden;
overflow-y: auto;
background-color: $white;

&__btn {
visibility: hidden;
}

&__body {
background-color: inherit;
}

.table-row {
display: flex;
align-items: center;
min-height: 56px;
border-bottom: $primaryBorder;

&:not(.no-hover):hover {
background-color: $alabaster;

.key-value-table__btn {
visibility: visible;
}
}

&__last {
position: sticky;
bottom: 0;
z-index: 3;
background-color: inherit;
border: 0;
}
}

.table-row__header {
position: sticky;
top: 0;
z-index: 3;
font-weight: bold;
font-size: 18px;
background-color: inherit;
border-top: $primaryBorder;
}

.table-cell {
display: flex;
align-items: center;
padding: 8px 5px 8px 10px;
color: $primary;
}

.table-cell__inputs-wrapper {
display: flex;
width: calc(100% - #{$actionsBlockWidth});
}

.table-cell__key {
width: 50%;
}

.table-cell__value {
width: 50%;
}

.table-cell__actions {
justify-content: flex-end;
min-width: $actionsBlockWidth;
padding: 0;

& > * {
margin: 0 5px 0 0;
}
}

.add-new-item-btn {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 44px;
padding: 10px;
color: $cornflowerBlue;
font-size: 15px;
line-height: 18px;

svg {
width: 20px;
height: 20px;

rect {
fill: $cornflowerBlue;
}
}
}

.input-wrapper {
width: 100%;

.input {
width: 100%;

&_edit {
border: $primaryBorder;
}

&_invalid {
border: $errorBorder;
}
}
}
}
1 change: 1 addition & 0 deletions dist/components/FormSelect/FormSelect.js
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,7 @@ var FormSelect = function FormSelect(_ref) {
variant: selectedItemAction.confirm.btnConfirmType
},
header: selectedItemAction.confirm.title,
isOpen: isConfirmDialogOpen,
message: selectedItemAction.confirm.message
}), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
className: "form-field__select__options-list",
Expand Down
4 changes: 2 additions & 2 deletions dist/components/FormSelect/formSelect.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
@import '../../scss/colors';
@import '../../scss/shadows';

@include formField;

.form-field {
@include formField;

&__wrapper {
&-active {
background: $alabaster;
Expand Down
67 changes: 24 additions & 43 deletions dist/components/Wizard/Wizard.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ var Wizard = function Wizard(_ref) {
var children = _ref.children,
className = _ref.className,
confirmClose = _ref.confirmClose,
FormState = _ref.FormState,
formState = _ref.formState,
isWizardOpen = _ref.isWizardOpen,
onWizardResolve = _ref.onWizardResolve,
onWizardSubmit = _ref.onWizardSubmit,
Expand All @@ -79,11 +79,6 @@ var Wizard = function Wizard(_ref) {
var totalSteps = (0, _react.useMemo)(function () {
return _react.default.Children.count(children) - 1 || 0;
}, [children]);
var hasSteps = (0, _react.useMemo)(function () {
return stepsConfig.some(function (step) {
return step.id;
});
}, [stepsConfig]);
var isLastStep = (0, _react.useMemo)(function () {
return activeStepNumber === totalSteps;
}, [activeStepNumber, totalSteps]);
Expand All @@ -95,7 +90,7 @@ var Wizard = function Wizard(_ref) {
};
})) || [];
}, [stepsConfig]);
var wizardClasses = (0, _classnames.default)('wizard-form', className, hasSteps && 'wizard-form__with-steps');
var wizardClasses = (0, _classnames.default)('wizard-form', className);

var goToNextStep = function goToNextStep() {
setActiveStepNumber(function (prevStep) {
Expand All @@ -114,7 +109,7 @@ var Wizard = function Wizard(_ref) {
};

var handleOnClose = function handleOnClose() {
if (confirmClose && FormState && FormState.dirty) {
if (confirmClose && formState && formState.dirty) {
(0, _common.openPopUp)(_ConfirmDialog.default, {
cancelButton: {
label: 'Cancel',
Expand All @@ -134,52 +129,38 @@ var Wizard = function Wizard(_ref) {
};

var handleSubmit = function handleSubmit() {
FormState.handleSubmit();
formState.handleSubmit();

if (FormState.valid) {
if (formState.valid) {
if (isLastStep) {
onWizardSubmit(FormState.values);
onWizardSubmit(formState.values);
} else {
goToNextStep();
}
}
};

var getDefaultActions = function getDefaultActions() {
if (hasSteps) {
return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
onClick: goToPreviousStep,
disabled: activeStepNumber === 0,
label: "Back",
type: "button"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
onClick: handleSubmit,
disabled: FormState.submitting || FormState.invalid && FormState.submitFailed,
label: isLastStep ? submitButtonLabel : 'Next',
type: "button",
variant: _constants.SECONDARY_BUTTON
})];
} else {
return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
onClick: handleOnClose,
label: "Cancel",
type: "button"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
onClick: handleSubmit,
disabled: FormState.submitting || FormState.invalid && FormState.submitFailed,
label: submitButtonLabel,
type: "button",
variant: _constants.SECONDARY_BUTTON
})];
}
return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
onClick: goToPreviousStep,
disabled: activeStepNumber === 0,
label: "Back",
type: "button"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
onClick: handleSubmit,
disabled: formState.submitting || formState.invalid && formState.submitFailed,
label: isLastStep ? submitButtonLabel : 'Next',
type: "button",
variant: _constants.SECONDARY_BUTTON
})];
};

var renderModalActions = function renderModalActions() {
var _stepsConfig$activeSt;

if ((_stepsConfig$activeSt = stepsConfig[activeStepNumber]) !== null && _stepsConfig$activeSt !== void 0 && _stepsConfig$activeSt.getActions) {
return stepsConfig[activeStepNumber].getActions({
FormState: FormState,
formState: formState,
goToNextStep: goToNextStep,
goToPreviousStep: goToPreviousStep,
handleOnClose: handleOnClose,
Expand All @@ -199,7 +180,7 @@ var Wizard = function Wizard(_ref) {
show: isWizardOpen,
size: size,
title: title,
children: [hasSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, {
activeStepNumber: activeStepNumber,
jumpToStep: jumpToStep,
steps: stepsMenu
Expand All @@ -220,10 +201,10 @@ Wizard.defaultProps = {
Wizard.propsTypes = {
className: _propTypes.default.string,
confirmClose: _propTypes.default.bool,
FormState: _propTypes.default.object.isRequired,
isOpen: _propTypes.default.bool.isRequired,
onResolve: _propTypes.default.func.isRequired,
onSubmit: _propTypes.default.func.isRequired,
formState: _propTypes.default.object.isRequired,
isWizardOpen: _propTypes.default.bool.isRequired,
onWizardResolve: _propTypes.default.func.isRequired,
onWizardSubmit: _propTypes.default.func.isRequired,
size: _types.MODAL_SIZES,
title: _propTypes.default.string.isRequired,
stepsConfig: _types.WIZARD_STEPS_CONFIG,
Expand Down
24 changes: 11 additions & 13 deletions dist/components/Wizard/Wizard.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
.wizard-form {
&__with-steps {
.modal__body {
display: flex;
flex-flow: row nowrap;
overflow: hidden;
padding-right: 0;
}
.modal__body {
display: flex;
flex-flow: row nowrap;
overflow: hidden;
padding-right: 0;
}

.wizard-form__content {
overflow-y: auto;
height: 100%;
width: 100%;
padding-right: 2rem;
}
.wizard-form__content {
overflow-y: auto;
height: 100%;
width: 100%;
padding-right: 2rem;
}
}
Loading

0 comments on commit 8fe1c6f

Please sign in to comment.