@salutejs/plasma-new-hope 0.130.1-canary.1386.10521399972.0 → 0.130.1-canary.1386.10522873469.0

package/emotion/cjs/components/Slider/Slider.template-doc.mdx

@@ -0,0 +1,78 @@
+---
+id: slider
+title: Slider
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Slider
+
+<Description name="Slider" />
+<PropsTable name="Slider" />
+
+## Использование
+
+```tsx live
+import React from 'react';
+import { Slider  } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <section>
+            <Slider onChangeCommitted={() => {}} min={0} max={100} value={30} />
+        </section>
+    );
+}
+```
+
+Можно использовать диапазон значений.
+
+```tsx live
+import React, { useState } from 'react';
+import { Slider  } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [value, setValue] = useState([10, 80]);
+    const sortValues = (values) => {
+        return values
+            .map((val) => {
+                if (val < 0) {
+                    return 0;
+                }
+                if (val > 100) {
+                    return 100;
+                }
+                return val;
+            })
+            .sort((a, b) => a - b);
+    };
+
+    const onChangeHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onChangeCommitedHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onBlurTextField = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onKeyDownTextField = (values, event) => {
+        if (event.key === 'Enter') {
+            setValue(sortValues(values));
+        }
+    };
+
+    return (
+        <section>
+            <Slider value={value}
+                onKeyDownTextField={onKeyDownTextField}
+                onBlurTextField={onBlurTextField}
+                onChangeCommitted={onChangeCommitedHandle}
+                onChange={onChangeHandle} min={0} max={100} />
+        </section>
+    );
+}
+```

package/emotion/es/components/Slider/Slider.template-doc.mdx

@@ -0,0 +1,78 @@
+---
+id: slider
+title: Slider
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Slider
+
+<Description name="Slider" />
+<PropsTable name="Slider" />
+
+## Использование
+
+```tsx live
+import React from 'react';
+import { Slider  } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <section>
+            <Slider onChangeCommitted={() => {}} min={0} max={100} value={30} />
+        </section>
+    );
+}
+```
+
+Можно использовать диапазон значений.
+
+```tsx live
+import React, { useState } from 'react';
+import { Slider  } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [value, setValue] = useState([10, 80]);
+    const sortValues = (values) => {
+        return values
+            .map((val) => {
+                if (val < 0) {
+                    return 0;
+                }
+                if (val > 100) {
+                    return 100;
+                }
+                return val;
+            })
+            .sort((a, b) => a - b);
+    };
+
+    const onChangeHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onChangeCommitedHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onBlurTextField = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onKeyDownTextField = (values, event) => {
+        if (event.key === 'Enter') {
+            setValue(sortValues(values));
+        }
+    };
+
+    return (
+        <section>
+            <Slider value={value}
+                onKeyDownTextField={onKeyDownTextField}
+                onBlurTextField={onBlurTextField}
+                onChangeCommitted={onChangeCommitedHandle}
+                onChange={onChangeHandle} min={0} max={100} />
+        </section>
+    );
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.130.1-canary.1386.10521399972.0",
+  "version": "0.130.1-canary.1386.10522873469.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -118,5 +118,5 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "fd4ee138832eba117e21ae73a0784ac5653a0c6f"
+  "gitHead": "4c6372b877ce87874bd300900f132f744e8b7df3"
 }

package/styled-components/cjs/components/Slider/Slider.template-doc.mdx

@@ -0,0 +1,78 @@
+---
+id: slider
+title: Slider
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Slider
+
+<Description name="Slider" />
+<PropsTable name="Slider" />
+
+## Использование
+
+```tsx live
+import React from 'react';
+import { Slider  } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <section>
+            <Slider onChangeCommitted={() => {}} min={0} max={100} value={30} />
+        </section>
+    );
+}
+```
+
+Можно использовать диапазон значений.
+
+```tsx live
+import React, { useState } from 'react';
+import { Slider  } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [value, setValue] = useState([10, 80]);
+    const sortValues = (values) => {
+        return values
+            .map((val) => {
+                if (val < 0) {
+                    return 0;
+                }
+                if (val > 100) {
+                    return 100;
+                }
+                return val;
+            })
+            .sort((a, b) => a - b);
+    };
+
+    const onChangeHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onChangeCommitedHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onBlurTextField = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onKeyDownTextField = (values, event) => {
+        if (event.key === 'Enter') {
+            setValue(sortValues(values));
+        }
+    };
+
+    return (
+        <section>
+            <Slider value={value}
+                onKeyDownTextField={onKeyDownTextField}
+                onBlurTextField={onBlurTextField}
+                onChangeCommitted={onChangeCommitedHandle}
+                onChange={onChangeHandle} min={0} max={100} />
+        </section>
+    );
+}
+```

package/styled-components/es/components/Slider/Slider.template-doc.mdx

@@ -0,0 +1,78 @@
+---
+id: slider
+title: Slider
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Slider
+
+<Description name="Slider" />
+<PropsTable name="Slider" />
+
+## Использование
+
+```tsx live
+import React from 'react';
+import { Slider  } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <section>
+            <Slider onChangeCommitted={() => {}} min={0} max={100} value={30} />
+        </section>
+    );
+}
+```
+
+Можно использовать диапазон значений.
+
+```tsx live
+import React, { useState } from 'react';
+import { Slider  } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [value, setValue] = useState([10, 80]);
+    const sortValues = (values) => {
+        return values
+            .map((val) => {
+                if (val < 0) {
+                    return 0;
+                }
+                if (val > 100) {
+                    return 100;
+                }
+                return val;
+            })
+            .sort((a, b) => a - b);
+    };
+
+    const onChangeHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onChangeCommitedHandle = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onBlurTextField = (values) => {
+        setValue(sortValues(values));
+    };
+
+    const onKeyDownTextField = (values, event) => {
+        if (event.key === 'Enter') {
+            setValue(sortValues(values));
+        }
+    };
+
+    return (
+        <section>
+            <Slider value={value}
+                onKeyDownTextField={onKeyDownTextField}
+                onBlurTextField={onBlurTextField}
+                onChangeCommitted={onChangeCommitedHandle}
+                onChange={onChangeHandle} min={0} max={100} />
+        </section>
+    );
+}
+```