@steroidsjs/bootstrap 3.0.0-beta.97 → 3.0.0-beta.99

package/content/Calendar/CalendarView.js

@@ -46,6 +46,8 @@ var CaptionElement_1 = __importDefault(require("./CaptionElement"));
 function CalendarView(props) {
     var bem = (0, hooks_1.useBem)('CalendarView');
     var localeComponent = (0, hooks_1.useComponents)().locale;
+    //TODO Исправить тип, связано с yarn tsc в action publish.yml
+    var DayPicker = react_day_picker_1["default"];
     var month = props.month, toYear = props.toYear, fromYear = props.fromYear, showFooter = props.showFooter, onDaySelect = props.onDaySelect, selectedDates = props.selectedDates, onMonthSelect = props.onMonthSelect, numberOfMonths = props.numberOfMonths, toggleCaptionPanel = props.toggleCaptionPanel, isCaptionPanelVisible = props.isCaptionPanelVisible;
     var isRange = !!selectedDates[0] && !!selectedDates[1];
     var _a = (0, react_1.useMemo)(function () {
@@ -66,7 +68,7 @@ function CalendarView(props) {
                 : undefined
         };
     }, [isRange, selectedDates]), selectedDays = _a.selectedDays, modifiers = _a.modifiers;
-    return (React.createElement(react_day_picker_1["default"], __assign({}, props, { className: bem(bem.block({ ranged: isRange }), props.className), captionElement: (0, react_1.useCallback)(function (_a) {
+    return (React.createElement(DayPicker, __assign({}, props, { className: bem(bem.block({ ranged: isRange }), props.className), captionElement: (0, react_1.useCallback)(function (_a) {
             var classNames = _a.classNames, date = _a.date, localeUtils = _a.localeUtils, locale = _a.locale;
             return (React.createElement(CaptionElement_1["default"], { date: date, locale: locale, toYear: toYear, fromYear: fromYear, classNames: classNames, onChange: onMonthSelect, localeUtils: localeUtils, showCalendarFooter: showFooter, toggleCaptionPanel: toggleCaptionPanel, isCaptionPanelVisible: isCaptionPanelVisible }));
         }, [fromYear, isCaptionPanelVisible, onMonthSelect, showFooter, toYear, toggleCaptionPanel]), renderDay: function (day) {

package/content/Chart/ChartView.d.ts

@@ -0,0 +1,2 @@
+import { IChartViewProps } from '@steroidsjs/core/ui/content/Chart/Chart';
+export default function ChartView(props: IChartViewProps): JSX.Element;

package/content/Chart/ChartView.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var DEFAULT_AXIS_PARAMS = {
+    tickSize: 5,
+    tickPadding: 5,
+    tickRotation: 0,
+    legend: '',
+    legendPosition: 'middle'
+};
+var DEFAULT_LINE_CHART_CONFIG = {
+    yScale: {
+        type: 'linear',
+        min: 'auto',
+        max: 'auto',
+        stacked: true,
+        reverse: false
+    },
+    xScale: { type: 'point' },
+    axisBottom: __assign(__assign({}, DEFAULT_AXIS_PARAMS), { legendOffset: 36 }),
+    axisLeft: __assign(__assign({}, DEFAULT_AXIS_PARAMS), { legendOffset: -40 }),
+    pointSize: 8,
+    useMesh: true
+};
+function ChartView(props) {
+    var bem = (0, hooks_1.useBem)('ChartView');
+    var ChartComponent = props.chartComponent;
+    var defaultChartConfig = (props.useDefaultLineChartConfig && DEFAULT_LINE_CHART_CONFIG) || {};
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: __assign({ height: "".concat(props.height, "px") }, props.style) },
+        react_1["default"].createElement(ChartComponent, __assign({ data: props.data }, defaultChartConfig, props.config))));
+}
+exports["default"] = ChartView;

package/content/Chart/ChartView.scss

@@ -0,0 +1,8 @@
+@use "../../scss/variables";
+
+.ChartView {
+
+  text {
+    fill: variables.$text-color !important;
+  }
+}

package/content/Slider/SliderView.js

@@ -11,9 +11,11 @@ require("@splidejs/splide/dist/css/splide.min.css");
 function SliderView(props) {
     var _a;
     var bem = (0, useBem_1["default"])('Slider');
+    //TODO Исправить тип, связано с yarn tsc в action publish.yml
+    var Splide = react_splide_1.Splide;
     var ItemView = props.itemView;
     return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
-        react_1["default"].createElement(react_splide_1.Splide, { options: props.sliderOptions, extensions: props.extensions, hasTrack: props.hasTrack, tag: props.tag, transition: props.transition }, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item, itemIndex) { return (react_1["default"].createElement(react_splide_1.SplideSlide, { key: itemIndex },
+        react_1["default"].createElement(Splide, { options: props.sliderOptions, extensions: props.extensions, hasTrack: props.hasTrack, tag: props.tag, transition: props.transition }, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item, itemIndex) { return (react_1["default"].createElement(react_splide_1.SplideSlide, { key: itemIndex },
             react_1["default"].createElement(ItemView, { item: item }))); }))));
 }
 exports["default"] = SliderView;

package/form/CheckboxListField/CheckboxListFieldView.js

@@ -36,19 +36,19 @@ function CheckboxListFieldView(props) {
     return (React.createElement("div", { className: bem(bem.block((_a = {},
             _a["".concat(props.orientation)] = !!props.orientation,
             _a))) }, props.items.map(function (checkbox, checkboxIndex) { return props.renderCheckbox({
+        key: checkboxIndex,
+        id: "".concat(prefix, "_").concat(checkbox.id),
+        label: checkbox.label,
         inputProps: {
             name: "".concat(prefix, "_").concat(checkbox.id),
-            checked: null,
             type: 'checkbox',
-            disabled: false,
+            checked: props.selectedIds.includes(checkbox.id),
             onChange: function () {
                 props.onItemSelect(checkbox.id);
-            }
+            },
+            disabled: props.disabled
         },
-        disabled: props.disabled,
-        label: checkbox.label,
-        id: "".concat(prefix, "_").concat(checkbox.id),
-        key: checkboxIndex
+        size: props.size
     }); })));
 }
 exports["default"] = CheckboxListFieldView;

package/form/ImageField/ImageFieldModalView.js

@@ -45,6 +45,8 @@ var Modal_1 = __importDefault(require("@steroidsjs/core/ui/modal/Modal"));
 require("react-image-crop/dist/ReactCrop.css");
 function ImageFieldModalView(props) {
     var bem = (0, hooks_1.useBem)('ImageFieldModalView');
+    //TODO Исправить тип, связано с yarn tsc в action publish.yml
+    var ReactCrop = react_image_crop_1["default"];
     var _a = (0, react_1.useState)(props.crop.initialValues), crop = _a[0], setCrop = _a[1];
     return (React.createElement(Modal_1["default"], { className: bem.block(), title: props.title || __('Выберите область изображения'), onClose: props.onClose, controls: [{
                 label: __(('Сохранить')),
@@ -54,6 +56,6 @@ function ImageFieldModalView(props) {
                 }
             }] },
         React.createElement("div", { className: 'mb-3' },
-            React.createElement(react_image_crop_1["default"], __assign({}, props.crop.reactImageCropProps, { className: bem.element('crop'), src: props.image && props.image.url, crop: crop, onChange: setCrop })))));
+            React.createElement(ReactCrop, __assign({}, props.crop.reactImageCropProps, { className: bem.element('crop'), src: props.image && props.image.url, crop: crop, onChange: setCrop })))));
 }
 exports["default"] = ImageFieldModalView;

package/form/InputField/InputFieldView.js

@@ -69,10 +69,10 @@ function InputFieldView(props) {
             props.maskOptions
                 ? (React.createElement("input", __assign({ onBlur: props.onBlur, onFocus: props.onFocus, onMouseDown: props.onMouseDown, className: bem(bem.element('input', {
                         size: props.size
-                    })) }, props.inputProps, { onInput: function (e) { return props.inputProps.onChange(e.currentTarget.value); }, type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.maskedInputRef })))
+                    })) }, props.inputProps, { type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef })))
                 : (React.createElement("input", __assign({ className: bem(bem.element('input', {
                         size: props.size
-                    })) }, props.inputProps, { onChange: function (e) { return props.inputProps.onChange(e.target.value); }, type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id }))),
+                    })) }, props.inputProps, { type: props.type, placeholder: props.placeholder, disabled: props.disabled, required: props.required, id: props.id, ref: props.inputRef }))),
             !props.disabled && props.showClear && !props.maskProps && (React.createElement(Icon_1["default"], { name: "cross_8x8", className: bem.element('icon-clear'), tabIndex: -1, onClick: props.onClear }))),
         props.textAfter && (React.createElement("span", { className: bem.element('text-after') }, props.textAfter)),
         props.addonAfter && (React.createElement("span", { className: bem.element('addon-after') }, props.addonAfter))));

package/form/NumberField/NumberFieldView.js

@@ -38,38 +38,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var react_1 = require("react");
 var isNumber_1 = __importDefault(require("lodash-es/isNumber"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 function NumberFieldView(props) {
-    var _a;
-    // Input ref
-    var inputRef = (0, react_1.useRef)(null);
-    var onStepUp = (0, react_1.useCallback)(function () {
-        inputRef.current.stepUp();
-        props.inputProps.onChange(inputRef.current.value);
-    }, [props.inputProps]);
-    var onStepDown = (0, react_1.useCallback)(function () {
-        inputRef.current.stepDown();
-        props.inputProps.onChange(inputRef.current.value);
-    }, [props.inputProps]);
+    var _a, _b;
     var bem = (0, hooks_1.useBem)('NumberFieldView');
     return (React.createElement("div", { className: bem(bem.block({
             disabled: props.inputProps.disabled,
             size: props.size,
             hasErrors: !!props.errors,
-            filled: !!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)
+            filled: !!((_b = (_a = props.inputRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.value)
         }), props.className) },
-        React.createElement("input", __assign({ ref: inputRef, className: bem(bem.element('input')) }, props.inputProps, { onChange: function (e) { return props.input.onChange(e.target.value); }, onWheel: function (event) { return event.currentTarget.blur(); }, id: props.id })),
+        React.createElement("input", __assign({ ref: props.inputRef, className: bem(bem.element('input')) }, props.inputProps, { onWheel: function (event) { return event.currentTarget.blur(); }, id: props.id })),
         !props.disabled && !props.errors && (React.createElement("div", { className: bem.element('arrows-container') },
             React.createElement("button", { className: bem.element('arrow', {
                     disabled: (0, isNumber_1["default"])(props.inputProps.max) && props.inputProps.value >= props.inputProps.max
-                }), type: 'button', onClick: onStepUp },
+                }), type: 'button', onClick: props.onStepUp },
                 React.createElement(Icon_1["default"], { name: 'expand_up', tabIndex: -1 })),
             React.createElement("button", { className: bem.element('arrow', {
                     disabled: (0, isNumber_1["default"])(props.inputProps.min) && props.inputProps.value <= props.inputProps.min
-                }), type: 'button', onClick: onStepDown },
+                }), type: 'button', onClick: props.onStepDown },
                 React.createElement(Icon_1["default"], { name: 'expand_up', tabIndex: -1 })))),
         React.createElement("span", { className: bem.element('input-effects') })));
 }

package/form/RadioField/RadioFieldView.js

@@ -49,7 +49,7 @@ function RadioFieldView(props) {
         }), props.className), onClick: props.onChange },
         React.createElement("input", __assign({ className: bem(bem.element('input', {
                 checked: props.checked
-            })), id: props.id || id }, props.inputProps, { checked: props.checked, disabled: props.disabled, required: props.required })),
+            })), id: props.id || id }, props.inputProps, { disabled: props.disabled, required: props.required })),
         React.createElement("label", { className: bem.element('label'), htmlFor: props.id || id },
             React.createElement("span", { className: bem.element('ellipse') }),
             props.label)));

package/form/RadioListField/RadioListFieldView.js

@@ -36,20 +36,18 @@ function RadioListFieldView(props) {
     return (React.createElement("div", { className: bem(bem.block((_a = {},
             _a["".concat(props.orientation)] = !!props.orientation,
             _a)), props.className) }, props.items.map(function (radio, radioIndex) { return props.renderRadio({
+        key: radioIndex,
+        id: "".concat(prefix, "_").concat(radio.id),
+        label: radio.label,
         inputProps: {
             name: "".concat(prefix, "_").concat(radio.id),
-            checked: null,
             type: 'radio',
-            disabled: false,
+            checked: props.selectedIds.includes(radio.id),
             onChange: function () {
                 props.onItemSelect(radio.id);
-            }
+            },
+            disabled: props.disabled
         },
-        disabled: props.disabled,
-        checked: props.selectedIds.includes(radio.id),
-        label: radio.label,
-        id: "".concat(prefix, "_").concat(radio.id),
-        key: radioIndex,
         size: props.size
     }); })));
 }

package/form/SliderField/SliderFieldView.js

@@ -43,10 +43,12 @@ var RangeComponent = createRangeWithTooltip(rc_slider_1.Range);
 var SliderComponent = createSliderWithTooltip(rc_slider_1["default"]);
 function SliderFieldView(props) {
     var bem = (0, hooks_1.useBem)('SliderFieldView');
+    //TODO Исправить тип, связано с yarn tsc в action publish.yml
+    var Handle = rc_slider_1.Handle;
     var handle = function (prevProps) {
         var value = prevProps.value;
         return (React.createElement(rc_slider_1.SliderTooltip, { prefixCls: 'rc-slider-tooltip', placement: 'top', overlay: "".concat(value) },
-            React.createElement(rc_slider_1.Handle, { value: value })));
+            React.createElement(Handle, { value: value })));
     };
     var commonProps = {
         slider: props.slider,

package/index.d.ts

@@ -35,6 +35,9 @@ declare const _default: {
     'content.CopyToClipboardView': {
         lazy: () => any;
     };
+    'content.ChartView': {
+        lazy: () => any;
+    };
     'content.SliderView': {
         lazy: () => any;
     };

package/index.js

@@ -38,6 +38,9 @@ exports["default"] = {
     'content.CopyToClipboardView': {
         lazy: function () { return require('./content/CopyToClipboard/CopyToClipboardView')["default"]; }
     },
+    'content.ChartView': {
+        lazy: function () { return require('./content/Chart/ChartView')["default"]; }
+    },
     'content.SliderView': {
         lazy: function () { return require('./content/Slider/SliderView')["default"]; }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.97",
+    "version": "3.0.0-beta.99",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -37,7 +37,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.77",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.84",
         "@steroidsjs/eslint-config": "^2.1.4",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",