@steroidsjs/core 2.1.0-beta.3 → 2.1.0-beta.30

package/ui/form/RadioListField/demo/required.js

@@ -26,7 +26,7 @@ var React = __importStar(require("react"));
 var RadioListField_1 = __importDefault(require("../RadioListField"));
 var basic_1 = require("./basic");
 /**
- * Required
+ * Как обязательное поле для заполнения.
  * @order 3
  * @col 6
  */

package/ui/form/RateField/RateField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * RateField
@@ -33,7 +32,7 @@ export interface IRateFieldProps extends IFieldWrapperInputProps {
      * Дополнительный CSS-класс для элемента отображения
      */
     className?: CssClassName;
-    inputProps: {
+    inputProps?: {
         [key: string]: any;
     };
 }
@@ -44,10 +43,5 @@ export interface IRateFieldViewProps extends IRateFieldProps, IFieldWrapperOutpu
     value: number;
     onItemClick: (item: IRateFieldItem) => void;
 }
-declare const _default: {
-    (props: IFieldWrapperInputProps): JSX.Element;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-};
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IRateFieldProps>;
 export default _default;

package/ui/form/RateField/demo/allow-clear.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Clear value with twice click on the last active star
+ * При двойном нажатии значение обнуляется.
  * @order 5
  * @col 6
  */

package/ui/form/RateField/demo/allow-clear.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var RateField_1 = __importDefault(require("../RateField"));
 /**
- * Clear value with twice click on the last active star
+ * При двойном нажатии значение обнуляется.
  * @order 5
  * @col 6
  */

package/ui/form/RateField/demo/basic.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Basic
+ * Обычный пример использования RateField.
  * @order 1
  * @col 6
  */

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

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var RateField_1 = __importDefault(require("../RateField"));
 /**
- * Basic
+ * Обычный пример использования RateField.
  * @order 1
  * @col 6
  */

package/ui/form/RateField/demo/default-value.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Default value is equal 3
+ * По-умолчанию выставленное значение
  * @order 6
  * @col 6
  */

package/ui/form/RateField/demo/default-value.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var RateField_1 = __importDefault(require("../RateField"));
 /**
- * Default value is equal 3
+ * По-умолчанию выставленное значение
  * @order 6
  * @col 6
  */

package/ui/form/RateField/demo/disabled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Disabled
+ * Выключенный или недоступный для использования.
  * @order 2
  * @col 6
  */

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

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var RateField_1 = __importDefault(require("../RateField"));
 /**
- * Disabled
+ * Выключенный или недоступный для использования.
  * @order 2
  * @col 6
  */

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Errors
+ * Обработка ошибок.
  * @order 4
  * @col 6
  */

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

@@ -25,9 +25,9 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var RateField_1 = __importDefault(require("../RateField"));
 /**
- * Errors
+ * Обработка ошибок.
  * @order 4
  * @col 6
  */
 exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(RateField_1["default"], { errors: ['Error 1 text', 'Error 2 text'] }))); });
+    React.createElement(RateField_1["default"], { errors: ['Error 1 text', 'Error 2 text'], layout: true }))); });

package/ui/form/RateField/demo/items-count.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Max count of items is equal 3
+ * Максимальное выставляемое значение RateField
  * @order 7
  * @col 6
  */

package/ui/form/RateField/demo/items-count.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var RateField_1 = __importDefault(require("../RateField"));
 /**
- * Max count of items is equal 3
+ * Максимальное выставляемое значение RateField
  * @order 7
  * @col 6
  */

package/ui/form/RateField/demo/required.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Required
+ * Как обязательное поле для заполнения.
  * @order 3
  * @col 6
  */

package/ui/form/RateField/demo/required.js

@@ -25,7 +25,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var RateField_1 = __importDefault(require("../RateField"));
 /**
- * Required
+ * Как обязательное поле для заполнения.
  * @order 3
  * @col 6
  */

package/ui/form/ReCaptchaField/ReCaptchaField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * ReCaptchaField
@@ -21,10 +20,5 @@ export interface IReCaptchaFieldProps extends IFieldWrapperInputProps {
 }
 export interface IReCaptchaFieldViewProps extends IReCaptchaFieldProps, IFieldWrapperOutputProps {
 }
-declare const _default: {
-    (props: IFieldWrapperInputProps): JSX.Element;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-};
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IReCaptchaFieldProps>;
 export default _default;

package/ui/form/ReCaptchaField/demo/basic.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Basic
+ * Обычный пример использования ReCaptchaField в Form.
  * @order 1
  * @col 4
  */

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

@@ -28,7 +28,7 @@ var Form_1 = __importDefault(require("../../Form"));
 var Button_1 = __importDefault(require("../../Button"));
 var ReCaptchaField_1 = __importDefault(require("../ReCaptchaField"));
 /**
- * Basic
+ * Обычный пример использования ReCaptchaField в Form.
  * @order 1
  * @col 4
  */

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,22 +28,49 @@ 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?: Record<string, {
+        string: {
+            style: any;
+            label: any;
+        };
+    } | React.ReactNode | string>;
+    /**
+     * Функция, вызываемая после отпускания 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;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-};
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<ISliderFieldProps>;
 export default _default;

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.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Basic
+ * Обычный пример использования SliderField.
  * @order 1
  * @col 4
  */

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

@@ -25,9 +25,9 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var SliderField_1 = __importDefault(require("../SliderField"));
 /**
- * Basic
+ * Обычный пример использования SliderField.
  * @order 1
  * @col 4
  */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+exports["default"] = (function () { return (React.createElement("div", { style: { padding: '20px 30px' } },
     React.createElement(SliderField_1["default"], { label: 'Basic' }))); });

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Disabled
+ * Выключенный или недоступный для использования.
  * @order 2
  * @col 4
  */

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

@@ -25,9 +25,9 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var SliderField_1 = __importDefault(require("../SliderField"));
 /**
- * Disabled
+ * Выключенный или недоступный для использования.
  * @order 2
  * @col 4
  */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+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;
 /**
- * Errors
- * @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"));
 /**
- * Errors
- * @order 4
+ * Обработка ошибок c лейблом.
+ * @order 5
  * @col 4
  */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
-    React.createElement(SliderField_1["default"], { label: 'Errors', errors: ['Error 1 text', 'Error 2 text'] }))); });
+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/marks.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

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

@@ -0,0 +1,45 @@
+"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 SliderField_1 = __importDefault(require("../SliderField"));
+/**
+ * Обычный пример задания отметок со описанием по всей длине слайдера.
+ * @order 7
+ * @col 4
+ */
+var marks = {
+    0: React.createElement("strong", null, "0\u00B0C"),
+    26: '26°C',
+    37: '37°C',
+    50: '50°C',
+    80: {
+        style: {
+            color: 'red'
+        },
+        label: React.createElement("strong", null, "80\u00B0C")
+    }
+};
+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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 declare const _default: () => JSX.Element;
 /**
- * Set min and max values
- * @order 6
+ * Установлены рамки минамльного и максимального значения.
+ * @order 4
  * @col 4
  */
 export default _default;

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

@@ -25,9 +25,9 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var SliderField_1 = __importDefault(require("../SliderField"));
 /**
- * Set min and max values
- * @order 6
+ * Установлены рамки минамльного и максимального значения.
+ * @order 4
  * @col 4
  */
-exports["default"] = (function () { return (React.createElement(React.Fragment, null,
+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;

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

@@ -24,15 +24,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var SliderField_1 = __importDefault(require("../SliderField"));
-var sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large'
-};
 /**
- * Sizes
- * @order 5
- * @col 12
+ * Обычный пример использования с заданным свойством isRange={true}, для задания промежутка значений.
+ * @order 7
+ * @col 4
  */
-exports["default"] = (function () { return (React.createElement("div", { className: 'row' }, Object.keys(sizes).map(function (size) { return (React.createElement("div", { className: 'col', key: size },
-    React.createElement(SliderField_1["default"], { label: sizes[size], size: size }))); }))); });
+exports["default"] = (function () { return (React.createElement("div", { style: { padding: '20px 30px' } },
+    React.createElement(SliderField_1["default"], { isRange: true }))); });

package/ui/form/SwitcherField/SwitcherField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 import { IDataProviderConfig } from '../../../hooks/useDataProvider';
 import { IDataSelectConfig } from '../../../hooks/useDataSelect';
@@ -30,10 +29,5 @@ export interface ISwitcherFieldViewProps extends IFieldWrapperOutputProps, Omit<
     onItemHover: (id: PrimaryKey | any) => void;
     buttonProps?: any;
 }
-declare const _default: {
-    (props: IFieldWrapperInputProps): JSX.Element;
-    WrappedComponent: any;
-    displayName: any;
-    defaultProps: any;
-};
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<ISwitcherFieldProps>;
 export default _default;