@steroidsjs/core 2.1.0-beta.24 → 2.1.0-beta.28

package/ui/crud/Crud/CrudContent.js

@@ -68,23 +68,23 @@ function CrudContent(props) {
                 ItemComponent = Grid_1["default"];
             }
             return (React.createElement(ItemComponent // Grid
-            , { key: props.crudId, listId: props.crudId, action: props.restApi ? props.restApi.index : props.restUrl, scope: ['model', 'permission'], primaryKey: props.primaryKey, model: props.model, 
+            , __assign({ key: props.crudId, listId: props.crudId, action: props.restApi ? props.restApi.index : props.restUrl, scope: ['model', 'permission'], primaryKey: props.primaryKey, model: props.model, 
                 //searchModel={props.searchModel}
                 controls: controlsGetter, columns: [props.primaryKey], pagination: {
                     loadMore: false
-                } }));
+                } }, props.grid)));
         case utils_1.CRUD_ACTION_CREATE:
         case utils_1.CRUD_ACTION_UPDATE:
             if (!ItemComponent) {
                 ItemComponent = Form_1["default"];
             }
-            if (props.action === utils_1.CRUD_ACTION_UPDATE && !props.record) {
+            if (props.action === utils_1.CRUD_ACTION_UPDATE && (props.restUrl || props.restApi) && !props.record) {
                 return null;
             }
             return (React.createElement(ItemComponent // Form
-            , { key: formId, formId: formId, action: props.restApi
+            , __assign({ key: formId, formId: formId, action: props.restApi
                     ? (props.recordId ? props.restApi.update : props.restApi.create)
-                    : [props.restUrl, props.recordId].filter(Boolean).join('/'), model: props.model, autoFocus: true, submitLabel: props.recordId ? __('Сохранить') : __('Добавить'), layout: 'horizontal', onComplete: onFormComplete, initialValues: formInitialValues }));
+                    : [props.restUrl, props.recordId].filter(Boolean).join('/'), model: props.model, autoFocus: true, submitLabel: props.recordId ? __('Сохранить') : __('Добавить'), layout: 'horizontal', onComplete: onFormComplete }, props.form, { initialValues: formInitialValues })));
         default:
             if (ItemComponent) {
                 return (React.createElement(ItemComponent, __assign({ key: props.crudId + '_' + props.action }, props, crudItem.componentProps)));

package/ui/crud/index.d.ts

@@ -26,6 +26,7 @@ export declare const generateCrud: (routeId: string, props: ICrudGeneratorProps)
     isNavVisible?: boolean;
     models: string | string[];
     enums: string | string[];
+    role?: string;
     roles?: string[];
     fetch?: import("../../hoc/fetch").IFetchHocConfigFunc;
     items?: IRouteItem[] | {

package/ui/form/DropDownField/DropDownField.js

@@ -67,6 +67,7 @@ function DropDownField(props) {
     // Outside click -> close
     var forwardedRef = react_1.useRef(null);
     if (process.env.PLATFORM !== 'mobile') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         react_use_1.useClickAway(forwardedRef, onClose);
     }
     // Search input props
@@ -79,19 +80,21 @@ function DropDownField(props) {
     // Sync with form
     var prevSelectedIds = react_use_1.usePrevious(selectedIds);
     react_1.useEffect(function () {
-        var _a;
-        if (!isEqual_1["default"](prevSelectedIds, selectedIds)) {
-            var newValues = props.multiple ? selectedIds : ((_a = selectedIds[0]) !== null && _a !== void 0 ? _a : null);
+        if (!isEqual_1["default"](prevSelectedIds || [], selectedIds)) {
+            var newValues = props.multiple ? selectedIds : (selectedIds[0] || null);
             props.input.onChange.call(null, newValues);
             if (props.onChange) {
-                props.onChange(newValues);
+                props.onChange.call(null, newValues);
             }
         }
+    }, [prevSelectedIds, props.input.onChange, props.multiple, props.onChange, selectedIds]);
+    // form reset
+    react_1.useEffect(function () {
         //if form reset
         if (props.input.value === undefined && selectedIds.length > 0) {
             onReset();
         }
-    }, [selectedIds, props.input.onChange, props.multiple, prevSelectedIds, props.attribute, props, onReset]);
+    }, [onReset, props.input.value, selectedIds.length]);
     return components.ui.renderView(props.view || 'form.DropDownFieldView', __assign(__assign({}, props), { isAutoComplete: isAutoComplete,
         items: items,
         hoveredId: hoveredId,

package/ui/form/Form/Form.d.ts

@@ -137,6 +137,11 @@ export interface IFormProps {
      * @example 'addComment'
      */
     captchaActionName?: string;
+    /**
+     * Включает рамки и тень.
+     * @example true
+     */
+    isBordered?: boolean;
     [key: string]: any;
 }
 export interface IFormViewProps {
@@ -144,6 +149,7 @@ export interface IFormViewProps {
     fields?: (string | IFieldProps)[];
     onSubmit: any;
     className?: CssClassName;
+    isBordered?: boolean;
     style?: any;
     layout?: {
         layout: FormLayoutName | boolean;

package/ui/form/Form/Form.js

@@ -306,7 +306,7 @@ function Form(props) {
         ? components.ui.renderView(props.view || 'form.FormView', __assign(__assign({}, props.viewProps), { isInvalid: isInvalid,
             isSubmitting: isSubmitting,
             layout: layout,
-            onSubmit: onSubmit, children: props.children, submitLabel: props.submitLabel, fields: props.fields, className: props.className }))
+            onSubmit: onSubmit, submitLabel: props.submitLabel, fields: props.fields, children: props.children, isBordered: props.isBordered, className: props.className }))
         : props.children));
 }
 Form.defaultProps = {

package/ui/form/Form/demo/basic.js

@@ -34,7 +34,7 @@ var InputField_1 = __importDefault(require("../../InputField"));
  * @col 12
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Form_1["default"], { formId: 'TestForm', useRedux: true, syncWithAddressBar: true, autoFocus: true, fields: [
+    React.createElement(Form_1["default"], { formId: 'TestForm', useRedux: true, syncWithAddressBar: true, autoFocus: true, layout: 'default', size: 'large', fields: [
             {
                 component: InputField_1["default"],
                 attribute: 'email',

package/ui/form/Form/demo/border.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обычный пример включения рамок у компонента Form.
+ * @order 4
+ * @col 12
+ */
+export default _default;

package/ui/form/Form/demo/border.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Form_1 = __importDefault(require("../Form"));
+var DateField_1 = __importDefault(require("../../DateField"));
+var DateTimeField_1 = __importDefault(require("../../DateTimeField"));
+var TextField_1 = __importDefault(require("../../TextField"));
+var InputField_1 = __importDefault(require("../../InputField"));
+/**
+ * Обычный пример включения рамок у компонента Form.
+ * @order 4
+ * @col 12
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Form_1["default"], { isBordered: true, formId: 'TestForm', useRedux: true, syncWithAddressBar: true, autoFocus: true, layout: 'default', size: 'large', fields: [
+            {
+                component: InputField_1["default"],
+                attribute: 'email',
+                label: 'Email'
+            },
+            {
+                component: TextField_1["default"],
+                attribute: 'message',
+                label: 'Message'
+            },
+            {
+                component: DateField_1["default"],
+                attribute: 'date',
+                label: 'Date'
+            },
+            {
+                component: DateTimeField_1["default"],
+                attribute: 'startTime',
+                label: 'Start time'
+            },
+        ], submitLabel: 'Submit', validators: [['Email', 'required']] }))); });

package/ui/form/Form/demo/horizontal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обычный пример использования с прокидыванием свойства layout='horizontal'.
+ * @order 2
+ * @col 12
+ */
+export default _default;

package/ui/form/Form/demo/horizontal.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Form_1 = __importDefault(require("../Form"));
+var DateField_1 = __importDefault(require("../../DateField"));
+var InputField_1 = __importDefault(require("../../InputField"));
+/**
+ * Обычный пример использования с прокидыванием свойства layout='horizontal'.
+ * @order 2
+ * @col 12
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Form_1["default"], { formId: 'TestForm', useRedux: true, syncWithAddressBar: true, autoFocus: true, layout: 'horizontal', size: 'large', fields: [
+            {
+                component: InputField_1["default"],
+                attribute: 'email',
+                label: 'Email'
+            },
+            {
+                component: function () { return React.createElement(InputField_1["default"], null); },
+                attribute: 'message',
+                label: 'Message'
+            },
+            {
+                component: DateField_1["default"],
+                attribute: 'date',
+                label: 'Date'
+            },
+        ], submitLabel: 'Submit', validators: [['Email', 'required']] }))); });

package/ui/form/Form/demo/inline.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обычный пример использования с Form в одну строку с использованием layout='inline'.
+ * @order 3
+ * @col 12
+ */
+export default _default;

package/ui/form/Form/demo/inline.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var form_1 = require("@steroidsjs/core/ui/form");
+var Form_1 = __importDefault(require("../Form"));
+var DateField_1 = __importDefault(require("../../DateField"));
+var InputField_1 = __importDefault(require("../../InputField"));
+/**
+ * Обычный пример использования с Form в одну строку с использованием layout='inline'.
+ * @order 3
+ * @col 12
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+    React.createElement(Form_1["default"], { formId: 'TestForm', useRedux: true, syncWithAddressBar: true, autoFocus: true, layout: 'inline', size: 'large', fields: [
+            {
+                component: form_1.DropDownField,
+                attribute: 'email'
+            },
+            {
+                component: InputField_1["default"],
+                attribute: 'message'
+            },
+            {
+                component: DateField_1["default"],
+                attribute: 'date'
+            },
+        ], submitLabel: 'Submit', validators: [['Email', 'required']] }))); });

package/ui/form/SliderField/SliderField.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * SliderField
@@ -28,17 +28,51 @@ export interface ISliderFieldProps extends IFieldWrapperInputProps {
      * @example 100
      */
     max?: number;
+    /**
+     * Делает слайдер с двумя значениями
+     * @example true
+     */
+    isRange?: boolean;
+    /**
+     * Длина шага слайдера
+     * @example 10
+     */
+    step?: null | number;
+    /**
+     * Значение по-умолчанию при первом рендере. Для isRange=false исполуется number, для isRange=true - number[]
+     * @example 1
+     */
+    defaultValue?: number | number[];
+    /**
+     * Любое строкове значение после значения состояния слайдера в всплывающем окошке.
+     * @example '%'
+     */
+    valuePostfix?: string;
+    /**
+     * Метки на ползунке. В объекте ({key: value}) key определяет положение, а value определяет, что будет отображаться.
+     * Если вы хотите задать стиль определенной точки метки, значением должен быть объект,
+     * содержащий свойства style и label.
+     * @example { min: 20, 40: 40, max: 100 }
+     */
+    marks?: {
+        number: React.ReactNode;
+    } | {
+        number: {
+            style: any;
+            label: any;
+        };
+    };
+    /**
+     * Функция, вызываемая после отпускания tip'а у слайдера (при событии onmouseup)
+     * @see https://github.com/schrodinger/rc-slider
+     * @example {() => console.log('Slider handler is released')}
+     */
+    onAfterChange?: (value: any) => void;
     [key: string]: any;
 }
 export interface ISliderFieldViewProps extends ISliderFieldProps, IFieldWrapperOutputProps {
-    slider: {
-        min: number;
-        max: number;
-        defaultValue: number;
-        value: number;
-        onChange: (value: any) => void;
-        onAfterChange: (value: any) => void;
-    };
+    sliderDefaultValue?: number;
+    rangeDefaultValue?: number[];
 }
 declare const _default: {
     (props: IFieldWrapperInputProps): JSX.Element;

package/ui/form/SliderField/SliderField.js

@@ -21,25 +21,34 @@ var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var normalizeValue = function (value) { return toInteger_1["default"](String(value).replace(/[0-9]g/, '')) || 0; };
 function SliderField(props) {
     var components = hooks_1.useComponents();
-    var slider = react_1.useMemo(function () { return ({
+    var sliderProps = react_1.useMemo(function () { return ({
         min: props.min,
         max: props.max,
-        defaultValue: 0,
+        step: props.step,
+        marks: props.marks,
+        isRange: props.isRange,
+        disabled: props.disabled,
+        isVertical: props.isVertical,
         value: props.input.value || 0,
+        valuePostfix: props.valuePostfix,
+        defaultValue: props.defaultValue,
+        tooltipIsVisible: props.tooltipIsVisible,
         onChange: function (range) { return props.input.onChange.call(null, range); },
         onAfterChange: function (value) {
             value = normalizeValue(value);
             props.input.onChange.call(null, value);
         }
-    }); }, [props.min, props.max, props.input.value, props.input.onChange]);
-    return components.ui.renderView('form.SliderFieldView', __assign(__assign({}, props), { slider: slider }));
+    }); }, [props.min, props.max, props.step, props.marks, props.isRange, props.disabled, props.isVertical, props.input.value, props.input.onChange, props.valuePostfix, props.defaultValue, props.tooltipIsVisible]);
+    return components.ui.renderView('form.SliderFieldView', __assign(__assign({}, props), { sliderProps: sliderProps }));
 }
 SliderField.defaultProps = {
-    disabled: false,
-    required: false,
-    className: '',
-    errors: null,
+    step: 1,
     min: 0,
-    max: 100
+    max: 100,
+    errors: null,
+    className: '',
+    valuePostfix: '',
+    sliderDefaultValue: 5,
+    rangeDefaultValue: [0, 10]
 };
 exports["default"] = fieldWrapper_1["default"]('SliderField', SliderField);

package/ui/form/SliderField/demo/basic.js

@@ -29,5 +29,5 @@ var SliderField_1 = __importDefault(require("../SliderField"));
  * @order 1
  * @col 4
  */
-exports["default"] = (function () { return (React.createElement("div", { style: { padding: '0 20px' } },
-    React.createElement(SliderField_1["default"], { label: 'Basic', style: { padding: '0 10px' } }))); });
+exports["default"] = (function () { return (React.createElement("div", { style: { padding: '20px 30px' } },
+    React.createElement(SliderField_1["default"], { label: 'Basic' }))); });

package/ui/form/SliderField/demo/disabled.js

@@ -29,5 +29,5 @@ var SliderField_1 = __importDefault(require("../SliderField"));
  * @order 2
  * @col 4
  */
-exports["default"] = (function () { return (React.createElement("div", { style: { padding: '0 20px' } },
+exports["default"] = (function () { return (React.createElement("div", { style: { padding: '20px 30px' } },
     React.createElement(SliderField_1["default"], { label: 'Disabled', disabled: true }))); });

package/ui/form/SliderField/demo/errors.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Обработка ошибок.
- * @order 4
+ * Обработка ошибок c лейблом.
+ * @order 5
  * @col 4
  */
 export default _default;

package/ui/form/SliderField/demo/errors.js

@@ -25,9 +25,9 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var SliderField_1 = __importDefault(require("../SliderField"));
 /**
- * Обработка ошибок.
- * @order 4
+ * Обработка ошибок c лейблом.
+ * @order 5
  * @col 4
  */
-exports["default"] = (function () { return (React.createElement("div", { style: { padding: '0 20px' } },
+exports["default"] = (function () { return (React.createElement("div", { style: { padding: '20px 30px 10px' } },
     React.createElement(SliderField_1["default"], { label: 'Errors', errors: ['Error 1 text', 'Error 2 text'], layout: true }))); });

package/ui/form/SliderField/demo/{size.js → marks.js}

@@ -21,18 +21,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+var _a;
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var SliderField_1 = __importDefault(require("../SliderField"));
 /**
- * По-умлочанию SliderField имеет 3 заданных размера.
- * @order 6
- * @col 12
+ * Обычный пример задания отметок со описанием по всей длине слайдера.
+ * @order 7
+ * @col 4
  */
-var sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large'
-};
-exports["default"] = (function () { return (React.createElement("div", { className: 'row', style: { padding: '0 10px' } }, Object.keys(sizes).map(function (size) { return (React.createElement("div", { className: 'col', key: size },
-    React.createElement(SliderField_1["default"], { label: sizes[size], size: size }))); }))); });
+var marks = (_a = {},
+    _a[-10] = '-10°C',
+    _a[0] = React.createElement("strong", null, "0\u00B0C"),
+    _a[26] = '26°C',
+    _a[37] = '37°C',
+    _a[50] = '50°C',
+    _a[80] = {
+        style: {
+            color: 'red'
+        },
+        label: React.createElement("strong", null, "80\u00B0C")
+    },
+    _a);
+exports["default"] = (function () { return (React.createElement("div", { style: { padding: '20px 30px' } },
+    React.createElement(SliderField_1["default"], { min: -10, max: 80, marks: marks }))); });

package/ui/form/SliderField/demo/min-max.d.ts

@@ -2,7 +2,7 @@
 declare const _default: () => JSX.Element;
 /**
  * Установлены рамки минамльного и максимального значения.
- * @order 5
+ * @order 4
  * @col 4
  */
 export default _default;

package/ui/form/SliderField/demo/min-max.js

@@ -26,8 +26,8 @@ var React = __importStar(require("react"));
 var SliderField_1 = __importDefault(require("../SliderField"));
 /**
  * Установлены рамки минамльного и максимального значения.
- * @order 5
+ * @order 4
  * @col 4
  */
-exports["default"] = (function () { return (React.createElement("div", { style: { padding: '0 20px' } },
+exports["default"] = (function () { return (React.createElement("div", { style: { padding: '20px 30px' } },
     React.createElement(SliderField_1["default"], { label: 'With min and max values', min: 10, max: 30 }))); });

package/ui/form/SliderField/demo/onAfterChange.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Использования свойства onAfterChange для изминения значения счетчика после отпускания tip'а у слайдера.
+ * @order 9
+ * @col 6
+ */
+export default _default;

package/ui/form/SliderField/demo/onAfterChange.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var layout_1 = require("@steroidsjs/core/ui/layout");
+var SliderField_1 = __importDefault(require("../SliderField"));
+/**
+ * Использования свойства onAfterChange для изминения значения счетчика после отпускания tip'а у слайдера.
+ * @order 9
+ * @col 6
+ */
+exports["default"] = (function () {
+    var _a = React.useState('0'), counter = _a[0], setCounter = _a[1];
+    return (React.createElement("div", { style: { padding: '20px 30px' } },
+        React.createElement(SliderField_1["default"], { onAfterChange: function (value) { return setCounter(value); } }),
+        React.createElement("div", null,
+            React.createElement(layout_1.Header, null, __('Значение слайдера: {counter}', { counter: counter })))));
+});

package/ui/form/SliderField/demo/onChange.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Использования свойства onChange для изминения значения счетчика.
+ * @order 8
+ * @col 6
+ */
+export default _default;

package/ui/form/SliderField/demo/onChange.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var layout_1 = require("@steroidsjs/core/ui/layout");
+var SliderField_1 = __importDefault(require("../SliderField"));
+/**
+ * Использования свойства onChange для изминения значения счетчика.
+ * @order 8
+ * @col 6
+ */
+exports["default"] = (function () {
+    var _a = React.useState('0'), counter = _a[0], setCounter = _a[1];
+    return (React.createElement("div", { style: { padding: '20px 30px' } },
+        React.createElement(SliderField_1["default"], { onChange: function (value) { return setCounter(value); } }),
+        React.createElement("div", null,
+            React.createElement(layout_1.Header, null, __('Значение меняется при изменения значения слайдера в реальном времени: {counter}', { counter: counter })))));
+});

package/ui/form/SliderField/demo/range.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+/**
+ * Обычный пример использования с заданным свойством isRange={true}, для задания промежутка значений.
+ * @order 7
+ * @col 4
+ */
+export default _default;