@megafon/ui-core 7.5.0 → 7.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/components/Badges/NotificationBadge/NotificationBadge.css +1 -1
- package/dist/es/components/Checkbox/Checkbox.css +1 -1
- package/dist/es/components/Checkbox/Checkbox.d.ts +3 -1
- package/dist/es/components/Checkbox/Checkbox.js +5 -1
- package/dist/es/components/Modal/_ModalContent/ModalContent.css +1 -1
- package/dist/es/components/Row/Row.css +1 -1
- package/dist/es/components/Row/Row.d.ts +2 -0
- package/dist/es/components/Row/Row.js +6 -2
- package/dist/es/components/ValueField/ValueField.css +1 -0
- package/dist/es/components/ValueField/ValueField.d.ts +40 -0
- package/dist/es/components/ValueField/ValueField.js +107 -0
- package/dist/es/index.d.ts +1 -0
- package/dist/es/index.js +2 -1
- package/dist/lib/components/Badges/NotificationBadge/NotificationBadge.css +1 -1
- package/dist/lib/components/Checkbox/Checkbox.css +1 -1
- package/dist/lib/components/Checkbox/Checkbox.d.ts +3 -1
- package/dist/lib/components/Checkbox/Checkbox.js +5 -1
- package/dist/lib/components/Modal/_ModalContent/ModalContent.css +1 -1
- package/dist/lib/components/Row/Row.css +1 -1
- package/dist/lib/components/Row/Row.d.ts +2 -0
- package/dist/lib/components/Row/Row.js +6 -2
- package/dist/lib/components/ValueField/ValueField.css +1 -0
- package/dist/lib/components/ValueField/ValueField.d.ts +40 -0
- package/dist/lib/components/ValueField/ValueField.js +116 -0
- package/dist/lib/index.d.ts +1 -0
- package/dist/lib/index.js +7 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium .mfui-notification-badge__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-checkbox_bottom-margin{margin-bottom:12px}.mfui-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-checkbox_single .mfui-checkbox__inner{padding-left:32px}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding-top:3px}.mfui-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding-top:6px}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
|
|
@@ -32,7 +32,9 @@ export interface ICheckboxProps {
|
|
|
32
32
|
error?: boolean;
|
|
33
33
|
/** Дополнительный контент справа */
|
|
34
34
|
extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
|
|
35
|
-
|
|
35
|
+
/** Отключить нижний отступ */
|
|
36
|
+
disableBottomMargin?: boolean;
|
|
37
|
+
children?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
|
|
36
38
|
/** Обработчик изменения значения */
|
|
37
39
|
onChange?: (checked: boolean) => void;
|
|
38
40
|
}
|
|
@@ -29,6 +29,8 @@ var Checkbox = function Checkbox(_ref) {
|
|
|
29
29
|
extraContent = _ref.extraContent,
|
|
30
30
|
dataAttrs = _ref.dataAttrs,
|
|
31
31
|
classes = _ref.classes,
|
|
32
|
+
_ref$disableBottomMar = _ref.disableBottomMargin,
|
|
33
|
+
disableBottomMargin = _ref$disableBottomMar === void 0 ? false : _ref$disableBottomMar,
|
|
32
34
|
onChange = _ref.onChange;
|
|
33
35
|
var isTouch = detectTouch();
|
|
34
36
|
var _React$useState = React.useState(checked),
|
|
@@ -50,7 +52,9 @@ var Checkbox = function Checkbox(_ref) {
|
|
|
50
52
|
color: color,
|
|
51
53
|
checked: isChecked,
|
|
52
54
|
disabled: disabled,
|
|
53
|
-
error: error
|
|
55
|
+
error: error,
|
|
56
|
+
'bottom-margin': !disableBottomMargin,
|
|
57
|
+
single: !children && !extraContent
|
|
54
58
|
}, className)
|
|
55
59
|
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", _extends({
|
|
56
60
|
className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row:hover{text-decoration:none}.mfui-row__wrapper{width:100%}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}
|
|
@@ -23,6 +23,8 @@ export interface IRowProps {
|
|
|
23
23
|
target?: '_self' | '_blank';
|
|
24
24
|
/** rel - аргумент тега <a> */
|
|
25
25
|
rel?: string;
|
|
26
|
+
/** Автоматическая высота */
|
|
27
|
+
autoHeight?: boolean;
|
|
26
28
|
/** Обработчик клика */
|
|
27
29
|
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
|
28
30
|
/** Дочерние элементы: Badges, Switcher, Selector */
|
|
@@ -30,6 +30,8 @@ var Row = function Row(_ref) {
|
|
|
30
30
|
_ref$target = _ref.target,
|
|
31
31
|
target = _ref$target === void 0 ? '_self' : _ref$target,
|
|
32
32
|
rel = _ref.rel,
|
|
33
|
+
_ref$autoHeight = _ref.autoHeight,
|
|
34
|
+
autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
|
|
33
35
|
onClick = _ref.onClick,
|
|
34
36
|
children = _ref.children,
|
|
35
37
|
className = _ref.className,
|
|
@@ -47,7 +49,8 @@ var Row = function Row(_ref) {
|
|
|
47
49
|
size: size,
|
|
48
50
|
view: backgroundView,
|
|
49
51
|
pointer: isActive,
|
|
50
|
-
'has-arrow': showArrow && !showLoader
|
|
52
|
+
'has-arrow': showArrow && !showLoader,
|
|
53
|
+
'auto-height': autoHeight
|
|
51
54
|
}, [className, classes.root]),
|
|
52
55
|
href: href,
|
|
53
56
|
target: href ? target : undefined,
|
|
@@ -65,7 +68,8 @@ var Row = function Row(_ref) {
|
|
|
65
68
|
className: cn('header')
|
|
66
69
|
}, /*#__PURE__*/React.createElement(Header, {
|
|
67
70
|
className: cn('title', [classes.title]),
|
|
68
|
-
as: isSmallSize ? 'h5' : 'h3'
|
|
71
|
+
as: isSmallSize ? 'h5' : 'h3',
|
|
72
|
+
space: isSmallSize ? 'tight' : 'wide'
|
|
69
73
|
}, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
|
|
70
74
|
className: cn('sub-title', [classes.subtitle])
|
|
71
75
|
}, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-value-field{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-value-field_position_left{margin-right:auto}.mfui-value-field_position_right{margin-left:auto}.mfui-value-field_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.mfui-value-field_interactive.mfui-value-field:hover,.mfui-value-field_interactive.mfui-value-field_focus{border-color:var(--content)}.mfui-value-field_disabled{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default}.mfui-value-field_disabled,.mfui-value-field_disabled.mfui-value-field_interactive:hover{border-color:var(--spbSky0)}.mfui-value-field__box{overflow:hidden}.mfui-value-field__line{font-weight:500}.mfui-value-field__unit{margin-left:4px}.mfui-value-field_interactive .mfui-value-field__line{height:0;opacity:0;visibility:hidden}.mfui-value-field_interactive:not(.mfui-value-field_disabled) .mfui-value-field__input{cursor:text}.mfui-value-field__prefix{color:var(--spbSky3);margin-right:4px}.mfui-value-field__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-value-field__input::-webkit-inner-spin-button,.mfui-value-field__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-value-field__input[type=number]{-moz-appearance:textfield}.mfui-value-field_theme_gray.mfui-value-field_interactive{background-color:transparent;border-color:var(--spbSky3)}.mfui-value-field_theme_gray.mfui-value-field_disabled{background-color:var(--base);border:none;color:var(--spbSky2)}.mfui-value-field_theme_gray.mfui-value-field_disabled .mfui-value-field__prefix{color:var(--spbSky2)}.mfui-value-field_theme_color.mfui-value-field_interactive{border-color:var(--base)}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import './ValueField.scss';
|
|
3
|
+
export declare const Field: {
|
|
4
|
+
readonly LINE: "line";
|
|
5
|
+
readonly INPUT: "input";
|
|
6
|
+
};
|
|
7
|
+
export type FieldType = (typeof Field)[keyof typeof Field];
|
|
8
|
+
export interface IValueField {
|
|
9
|
+
/** Дополнительный класс корневого элемента */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** Значение */
|
|
12
|
+
value?: string | number;
|
|
13
|
+
/** Отображаемый текст при отсутствии значения */
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
/** Префикс для значения */
|
|
16
|
+
valuePrefix?: string;
|
|
17
|
+
/** Единица измерения значения */
|
|
18
|
+
valueUnit?: string;
|
|
19
|
+
/** Позиционирование */
|
|
20
|
+
position?: 'left' | 'right';
|
|
21
|
+
/** Цветовая тема */
|
|
22
|
+
theme?: 'default' | 'gray' | 'color';
|
|
23
|
+
/** Тип поля */
|
|
24
|
+
fieldType?: FieldType;
|
|
25
|
+
/** Отключение поля ввода */
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/** Переводит компонент в контролируемое состояние */
|
|
28
|
+
isControlled?: boolean;
|
|
29
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
|
30
|
+
dataAttrs?: {
|
|
31
|
+
root?: Record<string, string>;
|
|
32
|
+
input?: Record<string, string>;
|
|
33
|
+
};
|
|
34
|
+
/** Обработчик изменения значения */
|
|
35
|
+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
36
|
+
/** Обработчик потери фокуса */
|
|
37
|
+
onBlur?: () => void;
|
|
38
|
+
}
|
|
39
|
+
declare const ValueField: React.FC<IValueField>;
|
|
40
|
+
export default ValueField;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
import "core-js/modules/es.array.includes.js";
|
|
4
|
+
import "core-js/modules/es.string.trim.js";
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import { useEffect, useState } from 'react';
|
|
7
|
+
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
8
|
+
import "./ValueField.css";
|
|
9
|
+
export var Field = {
|
|
10
|
+
LINE: 'line',
|
|
11
|
+
INPUT: 'input'
|
|
12
|
+
};
|
|
13
|
+
var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
|
|
14
|
+
var sanitizeValue = function sanitizeValue(value) {
|
|
15
|
+
if (typeof value === 'string' && value.trim() === '') {
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
return value;
|
|
19
|
+
};
|
|
20
|
+
var cn = cnCreate('mfui-value-field');
|
|
21
|
+
var ValueField = function ValueField(_ref) {
|
|
22
|
+
var className = _ref.className,
|
|
23
|
+
value = _ref.value,
|
|
24
|
+
placeholder = _ref.placeholder,
|
|
25
|
+
valuePrefix = _ref.valuePrefix,
|
|
26
|
+
valueUnit = _ref.valueUnit,
|
|
27
|
+
_ref$position = _ref.position,
|
|
28
|
+
position = _ref$position === void 0 ? 'left' : _ref$position,
|
|
29
|
+
_ref$theme = _ref.theme,
|
|
30
|
+
theme = _ref$theme === void 0 ? 'default' : _ref$theme,
|
|
31
|
+
_ref$fieldType = _ref.fieldType,
|
|
32
|
+
fieldType = _ref$fieldType === void 0 ? 'input' : _ref$fieldType,
|
|
33
|
+
disabled = _ref.disabled,
|
|
34
|
+
_ref$isControlled = _ref.isControlled,
|
|
35
|
+
isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
|
|
36
|
+
dataAttrs = _ref.dataAttrs,
|
|
37
|
+
onChange = _ref.onChange,
|
|
38
|
+
onBlur = _ref.onBlur;
|
|
39
|
+
var _a;
|
|
40
|
+
var _useState = useState(value !== null && value !== void 0 ? value : ''),
|
|
41
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
42
|
+
inputValue = _useState2[0],
|
|
43
|
+
setInputValue = _useState2[1];
|
|
44
|
+
var currentValue = isControlled ? value : inputValue;
|
|
45
|
+
var inputRef = React.useRef(null);
|
|
46
|
+
var _React$useState = React.useState(false),
|
|
47
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
48
|
+
isFocused = _React$useState2[0],
|
|
49
|
+
setIsFocused = _React$useState2[1];
|
|
50
|
+
var isFieldInput = fieldType === Field.INPUT;
|
|
51
|
+
var RootElement = isFieldInput ? 'label' : 'div';
|
|
52
|
+
var handleInputBlur = function handleInputBlur() {
|
|
53
|
+
setIsFocused(false);
|
|
54
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur();
|
|
55
|
+
};
|
|
56
|
+
var handleInputFocus = function handleInputFocus() {
|
|
57
|
+
setIsFocused(true);
|
|
58
|
+
};
|
|
59
|
+
var handleInputChange = function handleInputChange(e) {
|
|
60
|
+
!isControlled && setInputValue(e.target.value);
|
|
61
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
62
|
+
};
|
|
63
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
64
|
+
var _a;
|
|
65
|
+
if (e.key === 'Enter') {
|
|
66
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
67
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur();
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
if (charsAllowedByNumberInput.includes(e.key)) {
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
useEffect(function () {
|
|
75
|
+
!isControlled && setInputValue(value !== null && value !== void 0 ? value : '');
|
|
76
|
+
}, [isControlled, value]);
|
|
77
|
+
return /*#__PURE__*/React.createElement(RootElement, _extends({
|
|
78
|
+
className: cn({
|
|
79
|
+
interactive: isFieldInput,
|
|
80
|
+
theme: theme,
|
|
81
|
+
position: position,
|
|
82
|
+
focus: isFocused,
|
|
83
|
+
disabled: disabled
|
|
84
|
+
}, [className])
|
|
85
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!valuePrefix && /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
className: cn('prefix')
|
|
87
|
+
}, valuePrefix), /*#__PURE__*/React.createElement("div", {
|
|
88
|
+
className: cn('box')
|
|
89
|
+
}, isFieldInput && /*#__PURE__*/React.createElement("input", _extends({
|
|
90
|
+
className: cn('input'),
|
|
91
|
+
type: "number",
|
|
92
|
+
value: currentValue,
|
|
93
|
+
placeholder: placeholder,
|
|
94
|
+
onChange: handleInputChange,
|
|
95
|
+
onBlur: handleInputBlur,
|
|
96
|
+
onFocus: handleInputFocus,
|
|
97
|
+
onKeyDown: handleKeyDown,
|
|
98
|
+
disabled: disabled
|
|
99
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
|
|
100
|
+
ref: inputRef
|
|
101
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
102
|
+
className: cn('line')
|
|
103
|
+
}, (_a = sanitizeValue(currentValue)) !== null && _a !== void 0 ? _a : placeholder)), !!valueUnit && /*#__PURE__*/React.createElement("div", {
|
|
104
|
+
className: cn('unit')
|
|
105
|
+
}, valueUnit));
|
|
106
|
+
};
|
|
107
|
+
export default ValueField;
|
package/dist/es/index.d.ts
CHANGED
|
@@ -77,3 +77,4 @@ export { default as useDragAndDrop } from './components/UploadForm/UploadField/c
|
|
|
77
77
|
export { default as useGradient } from './components/Carousel/useGradient';
|
|
78
78
|
export { default as usePagination } from './components/Pagination/usePagination';
|
|
79
79
|
export { default as utils } from './components/Modal/utils/utils';
|
|
80
|
+
export { default as ValueField } from './components/ValueField/ValueField';
|
package/dist/es/index.js
CHANGED
|
@@ -76,4 +76,5 @@ export { default as UploadFileItemIcon } from "./components/UploadForm/UploadFil
|
|
|
76
76
|
export { default as useDragAndDrop } from "./components/UploadForm/UploadField/components/useDragAndDrop";
|
|
77
77
|
export { default as useGradient } from "./components/Carousel/useGradient";
|
|
78
78
|
export { default as usePagination } from "./components/Pagination/usePagination";
|
|
79
|
-
export { default as utils } from "./components/Modal/utils/utils";
|
|
79
|
+
export { default as utils } from "./components/Modal/utils/utils";
|
|
80
|
+
export { default as ValueField } from "./components/ValueField/ValueField";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-notification-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;color:var(--stcWhite);height:24px;justify-content:center;overflow:hidden;width:24px}.mfui-notification-badge_theme_green{background-color:var(--brandGreen);-webkit-box-shadow:0 2px 4px 0 rgba(0,185,86,.5);box-shadow:0 2px 4px 0 rgba(0,185,86,.5)}.mfui-notification-badge_theme_red{background-color:var(--warmRedC);-webkit-box-shadow:0 2px 4px 0 rgba(235,90,64,.5);box-shadow:0 2px 4px 0 rgba(235,90,64,.5)}.mfui-notification-badge_auto-width{border-radius:12px;min-width:24px;padding:5px 8px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-notification-badge_size_small{border-radius:50%;height:8px;padding:0;width:8px}.mfui-notification-badge_size_small .mfui-notification-badge__text{display:none}.mfui-notification-badge_size_medium{border-radius:50%;height:16px;width:16px}.mfui-notification-badge_size_medium .mfui-notification-badge__text{font-size:10px;line-height:12px}.mfui-notification-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:14px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-checkbox_bottom-margin{margin-bottom:12px}.mfui-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-checkbox_single .mfui-checkbox__inner{padding-left:32px}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding-top:3px}.mfui-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding-top:6px}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
|
|
@@ -32,7 +32,9 @@ export interface ICheckboxProps {
|
|
|
32
32
|
error?: boolean;
|
|
33
33
|
/** Дополнительный контент справа */
|
|
34
34
|
extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
|
|
35
|
-
|
|
35
|
+
/** Отключить нижний отступ */
|
|
36
|
+
disableBottomMargin?: boolean;
|
|
37
|
+
children?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
|
|
36
38
|
/** Обработчик изменения значения */
|
|
37
39
|
onChange?: (checked: boolean) => void;
|
|
38
40
|
}
|
|
@@ -38,6 +38,8 @@ var Checkbox = function Checkbox(_ref) {
|
|
|
38
38
|
extraContent = _ref.extraContent,
|
|
39
39
|
dataAttrs = _ref.dataAttrs,
|
|
40
40
|
classes = _ref.classes,
|
|
41
|
+
_ref$disableBottomMar = _ref.disableBottomMargin,
|
|
42
|
+
disableBottomMargin = _ref$disableBottomMar === void 0 ? false : _ref$disableBottomMar,
|
|
41
43
|
onChange = _ref.onChange;
|
|
42
44
|
var isTouch = (0, _uiHelpers.detectTouch)();
|
|
43
45
|
var _React$useState = React.useState(checked),
|
|
@@ -59,7 +61,9 @@ var Checkbox = function Checkbox(_ref) {
|
|
|
59
61
|
color: color,
|
|
60
62
|
checked: isChecked,
|
|
61
63
|
disabled: disabled,
|
|
62
|
-
error: error
|
|
64
|
+
error: error,
|
|
65
|
+
'bottom-margin': !disableBottomMargin,
|
|
66
|
+
single: !children && !extraContent
|
|
63
67
|
}, className)
|
|
64
68
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
65
69
|
className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-row{background-color:var(--base);border:none;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-row{padding:24px 32px}}.mfui-row:hover{text-decoration:none}.mfui-row__wrapper{width:100%}.mfui-row__icon-container,.mfui-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px){.mfui-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px){.mfui-row__icon-container{height:56px;margin-right:16px;width:56px}}.mfui-row__icon-container svg{fill:var(--content)}.mfui-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:50%}.mfui-row__icon-container_colored svg{fill:var(--brandGreen)}.mfui-row__icon,.mfui-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (min-width:1024px){.mfui-row__icon,.mfui-row__icon svg{height:40px;min-width:40px;width:40px}}.mfui-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-row__sub-title:not(.mfui-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (min-width:768px){.mfui-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-row__arrow{margin-left:12px}}.mfui-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-row__children{font-size:20px;line-height:28px}}.mfui-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-row_pointer{cursor:pointer}.mfui-row_pointer.mfui-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-row_pointer.mfui-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-row_pointer.mfui-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-row_has-arrow{padding-right:8px}@media screen and (min-width:768px){.mfui-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-row_has-arrow{padding-right:20px}.mfui-row_has-arrow.mfui-row_size_small{padding-right:16px}}@media screen and (min-width:768px){.mfui-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-row_size_small{padding:20px 24px}.mfui-row_size_small .mfui-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-row_size_small .mfui-row__icon-container{height:40px;width:40px}.mfui-row_size_small .mfui-row__arrow{margin-right:-4px}}.mfui-row_size_small .mfui-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}
|
|
@@ -23,6 +23,8 @@ export interface IRowProps {
|
|
|
23
23
|
target?: '_self' | '_blank';
|
|
24
24
|
/** rel - аргумент тега <a> */
|
|
25
25
|
rel?: string;
|
|
26
|
+
/** Автоматическая высота */
|
|
27
|
+
autoHeight?: boolean;
|
|
26
28
|
/** Обработчик клика */
|
|
27
29
|
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
|
28
30
|
/** Дочерние элементы: Badges, Switcher, Selector */
|
|
@@ -39,6 +39,8 @@ var Row = function Row(_ref) {
|
|
|
39
39
|
_ref$target = _ref.target,
|
|
40
40
|
target = _ref$target === void 0 ? '_self' : _ref$target,
|
|
41
41
|
rel = _ref.rel,
|
|
42
|
+
_ref$autoHeight = _ref.autoHeight,
|
|
43
|
+
autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
|
|
42
44
|
onClick = _ref.onClick,
|
|
43
45
|
children = _ref.children,
|
|
44
46
|
className = _ref.className,
|
|
@@ -56,7 +58,8 @@ var Row = function Row(_ref) {
|
|
|
56
58
|
size: size,
|
|
57
59
|
view: backgroundView,
|
|
58
60
|
pointer: isActive,
|
|
59
|
-
'has-arrow': showArrow && !showLoader
|
|
61
|
+
'has-arrow': showArrow && !showLoader,
|
|
62
|
+
'auto-height': autoHeight
|
|
60
63
|
}, [className, classes.root]),
|
|
61
64
|
href: href,
|
|
62
65
|
target: href ? target : undefined,
|
|
@@ -74,7 +77,8 @@ var Row = function Row(_ref) {
|
|
|
74
77
|
className: cn('header')
|
|
75
78
|
}, /*#__PURE__*/React.createElement(_Header["default"], {
|
|
76
79
|
className: cn('title', [classes.title]),
|
|
77
|
-
as: isSmallSize ? 'h5' : 'h3'
|
|
80
|
+
as: isSmallSize ? 'h5' : 'h3',
|
|
81
|
+
space: isSmallSize ? 'tight' : 'wide'
|
|
78
82
|
}, title), !!subTitle && /*#__PURE__*/React.createElement("div", {
|
|
79
83
|
className: cn('sub-title', [classes.subtitle])
|
|
80
84
|
}, subTitle)), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-value-field{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-value-field_position_left{margin-right:auto}.mfui-value-field_position_right{margin-left:auto}.mfui-value-field_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.mfui-value-field_interactive.mfui-value-field:hover,.mfui-value-field_interactive.mfui-value-field_focus{border-color:var(--content)}.mfui-value-field_disabled{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default}.mfui-value-field_disabled,.mfui-value-field_disabled.mfui-value-field_interactive:hover{border-color:var(--spbSky0)}.mfui-value-field__box{overflow:hidden}.mfui-value-field__line{font-weight:500}.mfui-value-field__unit{margin-left:4px}.mfui-value-field_interactive .mfui-value-field__line{height:0;opacity:0;visibility:hidden}.mfui-value-field_interactive:not(.mfui-value-field_disabled) .mfui-value-field__input{cursor:text}.mfui-value-field__prefix{color:var(--spbSky3);margin-right:4px}.mfui-value-field__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-value-field__input::-webkit-inner-spin-button,.mfui-value-field__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-value-field__input[type=number]{-moz-appearance:textfield}.mfui-value-field_theme_gray.mfui-value-field_interactive{background-color:transparent;border-color:var(--spbSky3)}.mfui-value-field_theme_gray.mfui-value-field_disabled{background-color:var(--base);border:none;color:var(--spbSky2)}.mfui-value-field_theme_gray.mfui-value-field_disabled .mfui-value-field__prefix{color:var(--spbSky2)}.mfui-value-field_theme_color.mfui-value-field_interactive{border-color:var(--base)}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import './ValueField.scss';
|
|
3
|
+
export declare const Field: {
|
|
4
|
+
readonly LINE: "line";
|
|
5
|
+
readonly INPUT: "input";
|
|
6
|
+
};
|
|
7
|
+
export type FieldType = (typeof Field)[keyof typeof Field];
|
|
8
|
+
export interface IValueField {
|
|
9
|
+
/** Дополнительный класс корневого элемента */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** Значение */
|
|
12
|
+
value?: string | number;
|
|
13
|
+
/** Отображаемый текст при отсутствии значения */
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
/** Префикс для значения */
|
|
16
|
+
valuePrefix?: string;
|
|
17
|
+
/** Единица измерения значения */
|
|
18
|
+
valueUnit?: string;
|
|
19
|
+
/** Позиционирование */
|
|
20
|
+
position?: 'left' | 'right';
|
|
21
|
+
/** Цветовая тема */
|
|
22
|
+
theme?: 'default' | 'gray' | 'color';
|
|
23
|
+
/** Тип поля */
|
|
24
|
+
fieldType?: FieldType;
|
|
25
|
+
/** Отключение поля ввода */
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/** Переводит компонент в контролируемое состояние */
|
|
28
|
+
isControlled?: boolean;
|
|
29
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
|
30
|
+
dataAttrs?: {
|
|
31
|
+
root?: Record<string, string>;
|
|
32
|
+
input?: Record<string, string>;
|
|
33
|
+
};
|
|
34
|
+
/** Обработчик изменения значения */
|
|
35
|
+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
36
|
+
/** Обработчик потери фокуса */
|
|
37
|
+
onBlur?: () => void;
|
|
38
|
+
}
|
|
39
|
+
declare const ValueField: React.FC<IValueField>;
|
|
40
|
+
export default ValueField;
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = exports.Field = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
require("core-js/modules/es.array.includes.js");
|
|
11
|
+
require("core-js/modules/es.string.trim.js");
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
var React = _react;
|
|
14
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
17
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
18
|
+
var Field = exports.Field = {
|
|
19
|
+
LINE: 'line',
|
|
20
|
+
INPUT: 'input'
|
|
21
|
+
};
|
|
22
|
+
var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
|
|
23
|
+
var sanitizeValue = function sanitizeValue(value) {
|
|
24
|
+
if (typeof value === 'string' && value.trim() === '') {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
return value;
|
|
28
|
+
};
|
|
29
|
+
var cn = (0, _uiHelpers.cnCreate)('mfui-value-field');
|
|
30
|
+
var ValueField = function ValueField(_ref) {
|
|
31
|
+
var className = _ref.className,
|
|
32
|
+
value = _ref.value,
|
|
33
|
+
placeholder = _ref.placeholder,
|
|
34
|
+
valuePrefix = _ref.valuePrefix,
|
|
35
|
+
valueUnit = _ref.valueUnit,
|
|
36
|
+
_ref$position = _ref.position,
|
|
37
|
+
position = _ref$position === void 0 ? 'left' : _ref$position,
|
|
38
|
+
_ref$theme = _ref.theme,
|
|
39
|
+
theme = _ref$theme === void 0 ? 'default' : _ref$theme,
|
|
40
|
+
_ref$fieldType = _ref.fieldType,
|
|
41
|
+
fieldType = _ref$fieldType === void 0 ? 'input' : _ref$fieldType,
|
|
42
|
+
disabled = _ref.disabled,
|
|
43
|
+
_ref$isControlled = _ref.isControlled,
|
|
44
|
+
isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
|
|
45
|
+
dataAttrs = _ref.dataAttrs,
|
|
46
|
+
onChange = _ref.onChange,
|
|
47
|
+
onBlur = _ref.onBlur;
|
|
48
|
+
var _a;
|
|
49
|
+
var _useState = (0, _react.useState)(value !== null && value !== void 0 ? value : ''),
|
|
50
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
51
|
+
inputValue = _useState2[0],
|
|
52
|
+
setInputValue = _useState2[1];
|
|
53
|
+
var currentValue = isControlled ? value : inputValue;
|
|
54
|
+
var inputRef = React.useRef(null);
|
|
55
|
+
var _React$useState = React.useState(false),
|
|
56
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
57
|
+
isFocused = _React$useState2[0],
|
|
58
|
+
setIsFocused = _React$useState2[1];
|
|
59
|
+
var isFieldInput = fieldType === Field.INPUT;
|
|
60
|
+
var RootElement = isFieldInput ? 'label' : 'div';
|
|
61
|
+
var handleInputBlur = function handleInputBlur() {
|
|
62
|
+
setIsFocused(false);
|
|
63
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur();
|
|
64
|
+
};
|
|
65
|
+
var handleInputFocus = function handleInputFocus() {
|
|
66
|
+
setIsFocused(true);
|
|
67
|
+
};
|
|
68
|
+
var handleInputChange = function handleInputChange(e) {
|
|
69
|
+
!isControlled && setInputValue(e.target.value);
|
|
70
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
71
|
+
};
|
|
72
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
73
|
+
var _a;
|
|
74
|
+
if (e.key === 'Enter') {
|
|
75
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
76
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur();
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
if (charsAllowedByNumberInput.includes(e.key)) {
|
|
80
|
+
e.preventDefault();
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
(0, _react.useEffect)(function () {
|
|
84
|
+
!isControlled && setInputValue(value !== null && value !== void 0 ? value : '');
|
|
85
|
+
}, [isControlled, value]);
|
|
86
|
+
return /*#__PURE__*/React.createElement(RootElement, (0, _extends2["default"])({
|
|
87
|
+
className: cn({
|
|
88
|
+
interactive: isFieldInput,
|
|
89
|
+
theme: theme,
|
|
90
|
+
position: position,
|
|
91
|
+
focus: isFocused,
|
|
92
|
+
disabled: disabled
|
|
93
|
+
}, [className])
|
|
94
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!valuePrefix && /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
className: cn('prefix')
|
|
96
|
+
}, valuePrefix), /*#__PURE__*/React.createElement("div", {
|
|
97
|
+
className: cn('box')
|
|
98
|
+
}, isFieldInput && /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
|
|
99
|
+
className: cn('input'),
|
|
100
|
+
type: "number",
|
|
101
|
+
value: currentValue,
|
|
102
|
+
placeholder: placeholder,
|
|
103
|
+
onChange: handleInputChange,
|
|
104
|
+
onBlur: handleInputBlur,
|
|
105
|
+
onFocus: handleInputFocus,
|
|
106
|
+
onKeyDown: handleKeyDown,
|
|
107
|
+
disabled: disabled
|
|
108
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
|
|
109
|
+
ref: inputRef
|
|
110
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
111
|
+
className: cn('line')
|
|
112
|
+
}, (_a = sanitizeValue(currentValue)) !== null && _a !== void 0 ? _a : placeholder)), !!valueUnit && /*#__PURE__*/React.createElement("div", {
|
|
113
|
+
className: cn('unit')
|
|
114
|
+
}, valueUnit));
|
|
115
|
+
};
|
|
116
|
+
var _default = exports["default"] = ValueField;
|
package/dist/lib/index.d.ts
CHANGED
|
@@ -77,3 +77,4 @@ export { default as useDragAndDrop } from './components/UploadForm/UploadField/c
|
|
|
77
77
|
export { default as useGradient } from './components/Carousel/useGradient';
|
|
78
78
|
export { default as usePagination } from './components/Pagination/usePagination';
|
|
79
79
|
export { default as utils } from './components/Modal/utils/utils';
|
|
80
|
+
export { default as ValueField } from './components/ValueField/ValueField';
|
package/dist/lib/index.js
CHANGED
|
@@ -429,6 +429,12 @@ Object.defineProperty(exports, "UploadFileItemIcon", {
|
|
|
429
429
|
return _UploadFileItemIcon["default"];
|
|
430
430
|
}
|
|
431
431
|
});
|
|
432
|
+
Object.defineProperty(exports, "ValueField", {
|
|
433
|
+
enumerable: true,
|
|
434
|
+
get: function get() {
|
|
435
|
+
return _ValueField["default"];
|
|
436
|
+
}
|
|
437
|
+
});
|
|
432
438
|
Object.defineProperty(exports, "checkBreakpointsPropTypes", {
|
|
433
439
|
enumerable: true,
|
|
434
440
|
get: function get() {
|
|
@@ -556,4 +562,5 @@ var _useDragAndDrop = _interopRequireDefault(require("./components/UploadForm/Up
|
|
|
556
562
|
var _useGradient = _interopRequireDefault(require("./components/Carousel/useGradient"));
|
|
557
563
|
var _usePagination = _interopRequireDefault(require("./components/Pagination/usePagination"));
|
|
558
564
|
var _utils = _interopRequireDefault(require("./components/Modal/utils/utils"));
|
|
565
|
+
var _ValueField = _interopRequireDefault(require("./components/ValueField/ValueField"));
|
|
559
566
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.6.1",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -104,5 +104,5 @@
|
|
|
104
104
|
"simplebar-react": "^3.2.5",
|
|
105
105
|
"swiper": "^11.1.1"
|
|
106
106
|
},
|
|
107
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "2590ce49ccafa95751c3121f9168eccd8b12eaf8"
|
|
108
108
|
}
|