@uiw/react-slider - npm Package Compare versions

Comparing version 4.21.23 to 5.0.0-bate.2.0

cjs/Dots.d.ts

 import React from 'react';
 import { HTMLDivProps } from '@uiw/utils';
-import { SliderProps, SliderMarks } from './index';
+import { SliderProps, SliderStyleMarks } from './index';
 interface TooltipProps extends HTMLDivProps {
@@ -11,5 +11,7 @@ prefixCls: string;
     marks: SliderProps['marks'];
-    markRender: (stepValue: number, mark?: SliderMarks) => React.ReactNode;
+    markRender: (stepValue: number, mark?: SliderStyleMarks) => React.ReactNode;
+    disabled?: boolean;
 }
 export default function Dots(props: TooltipProps): JSX.Element;
 export {};
+//# sourceMappingURL=Dots.d.ts.map

cjs/Dots.js

@@ -10,2 +10,3 @@ "use strict";
 var _react = _interopRequireDefault(require("react"));
+var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,9 +20,18 @@ function Dots(props) {
     marks = props.marks,
-    markRender = props.markRender;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    markRender = props.markRender,
+    disabled = props.disabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.SliderStyleDot, {
+    params: {
+      vertical: vertical
+    },
     className: "".concat(prefixCls, "-dots"),
     children: data.map(function (val, idx) {
       var stepValue = idx * step + min;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.SliderStyleMark, {
         style: (0, _defineProperty2["default"])({}, vertical ? 'top' : 'left', "".concat(val, "%")),
+        params: {
+          vertical: vertical,
+          noMarks: marks && marks !== true && !marks[stepValue],
+          disabled: disabled
+        },
         className: ["".concat(prefixCls, "-mark"), marks && marks !== true && !marks[stepValue] ? 'no-marks' : null].filter(Boolean).join(' ').trim(),
@@ -28,0 +38,0 @@ children: [marks === true && markRender && markRender(stepValue), marks !== true && marks && marks[stepValue] && markRender && markRender(stepValue, marks[stepValue])]

cjs/index.d.ts

 import React from 'react';
 import { IProps, HTMLDivProps } from '@uiw/utils';
-import './style/index.less';
-export declare type SliderMarks = {
+export * from './style';
+export declare type SliderStyleMarks = {
     style?: React.CSSProperties;
@@ -12,3 +12,3 @@ label?: React.ReactNode;
     max?: number;
-    marks?: boolean | Record<number, SliderMarks>;
+    marks?: boolean | Record<number, SliderStyleMarks>;
     dots?: boolean;
@@ -26,1 +26,2 @@ range?: boolean;
 export default function Slider(props: SliderProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

cjs/index.js

@@ -8,2 +8,3 @@ "use strict";
 });
+var _exportNames = {};
 exports["default"] = Slider;
@@ -18,2 +19,14 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _Dots = _interopRequireDefault(require("./Dots"));
+var _style = require("./style");
+Object.keys(_style).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _style[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _style[key];
+    }
+  });
+});
 var _jsxRuntime = require("react/jsx-runtime");
@@ -208,7 +221,16 @@ var _excluded = ["prefixCls", "value", "min", "max", "dots", "step", "disabled", "progress", "tooltip", "className", "marks", "renderMarks", "vertical", "onChange"];
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread3["default"])((0, _objectSpread3["default"])({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_style.SliderStyleWarp, (0, _objectSpread3["default"])((0, _objectSpread3["default"])({
     ref: slider,
     className: [prefixCls, className, disabled ? 'disabled' : null, marks ? "".concat(prefixCls, "-with-marks") : null, vertical ? "".concat(prefixCls, "-vertical") : null].filter(Boolean).join(' ').trim()
   }, other), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    params: {
+      disabled: disabled,
+      marks: !!marks,
+      vertical: vertical
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.SliderStyleBar, {
+      params: {
+        disabled: disabled,
+        vertical: vertical
+      },
       ref: bar,
@@ -221,3 +243,7 @@ className: "".concat(prefixCls, "-bar"),
       var lleftPostion = getValueToPercent(item);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.SliderStyleHandle, {
+        params: {
+          disabled: disabled,
+          vertical: vertical
+        },
         className: "".concat(prefixCls, "-handle"),
@@ -228,3 +254,7 @@ onMouseDown: function onMouseDown(evn) {
         style: (0, _defineProperty2["default"])({}, vertical ? 'top' : 'left', "".concat(lleftPostion, "%")),
-        children: (tooltip || tooltip === false) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: (tooltip || tooltip === false) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.SliderStyleTooltip, {
+          params: {
+            disabled: disabled,
+            open: tooltip
+          },
           className: ["".concat(prefixCls, "-tooltip"), tooltip ? 'open' : null].filter(Boolean).join(' ').trim(),
@@ -235,2 +265,3 @@ children: getLabelValue(item)
     }), dots && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dots["default"], {
+      disabled: disabled,
       prefixCls: prefixCls,
@@ -258,3 +289,2 @@ min: min,
 }
-module.exports = exports.default;
 //# sourceMappingURL=index.js.map

esm/Dots.d.ts

 import React from 'react';
 import { HTMLDivProps } from '@uiw/utils';
-import { SliderProps, SliderMarks } from './index';
+import { SliderProps, SliderStyleMarks } from './index';
 interface TooltipProps extends HTMLDivProps {
@@ -11,5 +11,7 @@ prefixCls: string;
     marks: SliderProps['marks'];
-    markRender: (stepValue: number, mark?: SliderMarks) => React.ReactNode;
+    markRender: (stepValue: number, mark?: SliderStyleMarks) => React.ReactNode;
+    disabled?: boolean;
 }
 export default function Dots(props: TooltipProps): JSX.Element;
 export {};
+//# sourceMappingURL=Dots.d.ts.map

esm/Dots.js

 import React from 'react';
+import { SliderStyleMark, SliderStyleDot } from './style';
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -12,12 +13,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
     marks,
-    markRender
+    markRender,
+    disabled
   } = props;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(SliderStyleDot, {
+    params: {
+      vertical
+    },
     className: prefixCls + "-dots",
     children: data.map((val, idx) => {
       var stepValue = idx * step + min;
-      return /*#__PURE__*/_jsxs("div", {
+      return /*#__PURE__*/_jsxs(SliderStyleMark, {
         style: {
           [vertical ? 'top' : 'left']: val + "%"
         },
+        params: {
+          vertical,
+          noMarks: marks && marks !== true && !marks[stepValue],
+          disabled
+        },
         className: [prefixCls + "-mark", marks && marks !== true && !marks[stepValue] ? 'no-marks' : null].filter(Boolean).join(' ').trim(),
@@ -24,0 +34,0 @@ children: [marks === true && markRender && markRender(stepValue), marks !== true && marks && marks[stepValue] && markRender && markRender(stepValue, marks[stepValue])]

esm/index.d.ts

 import React from 'react';
 import { IProps, HTMLDivProps } from '@uiw/utils';
-import './style/index.less';
-export declare type SliderMarks = {
+export * from './style';
+export declare type SliderStyleMarks = {
     style?: React.CSSProperties;
@@ -12,3 +12,3 @@ label?: React.ReactNode;
     max?: number;
-    marks?: boolean | Record<number, SliderMarks>;
+    marks?: boolean | Record<number, SliderStyleMarks>;
     dots?: boolean;
@@ -26,1 +26,2 @@ range?: boolean;
 export default function Slider(props: SliderProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -6,5 +6,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import Dots from './Dots';
-import "./style/index.css";
+import { SliderStyleWarp, SliderStyleBar, SliderStyleHandle, SliderStyleTooltip } from './style';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export * from './style';
 export default function Slider(props) {
@@ -184,7 +185,16 @@ var {
   }
-  return /*#__PURE__*/_jsxs("div", _extends({
+  return /*#__PURE__*/_jsxs(SliderStyleWarp, _extends({
     ref: slider,
     className: [prefixCls, className, disabled ? 'disabled' : null, marks ? prefixCls + "-with-marks" : null, vertical ? prefixCls + "-vertical" : null].filter(Boolean).join(' ').trim()
   }, other, {
-    children: [/*#__PURE__*/_jsx("div", {
+    params: {
+      disabled,
+      marks: !!marks,
+      vertical
+    },
+    children: [/*#__PURE__*/_jsx(SliderStyleBar, {
+      params: {
+        disabled,
+        vertical
+      },
       ref: bar,
@@ -200,3 +210,7 @@ className: prefixCls + "-bar",
       var lleftPostion = getValueToPercent(item);
-      return /*#__PURE__*/_jsx("div", {
+      return /*#__PURE__*/_jsx(SliderStyleHandle, {
+        params: {
+          disabled,
+          vertical
+        },
         className: prefixCls + "-handle",
@@ -207,3 +221,7 @@ onMouseDown: evn => onHandleBtnDown(idx, evn),
         },
-        children: (tooltip || tooltip === false) && /*#__PURE__*/_jsx("div", {
+        children: (tooltip || tooltip === false) && /*#__PURE__*/_jsx(SliderStyleTooltip, {
+          params: {
+            disabled,
+            open: tooltip
+          },
           className: [prefixCls + "-tooltip", tooltip ? 'open' : null].filter(Boolean).join(' ').trim(),
@@ -214,2 +232,3 @@ children: getLabelValue(item)
     }), dots && /*#__PURE__*/_jsx(Dots, {
+      disabled: disabled,
       prefixCls: prefixCls,
@@ -216,0 +235,0 @@ min: min,

package.json

 {
   "name": "@uiw/react-slider",
-  "version": "4.21.23",
+  "version": "5.0.0-bate.2.0",
   "description": "Slider component",
@@ -44,7 +44,8 @@ "author": "Kenny Wong <[e-mail]>",
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "styled-components": ">=5.3.5"
   },
   "dependencies": {
-    "@uiw/utils": "^4.21.23"
+    "@uiw/utils": "^5.0.0-bate.2.0"
   }
 }

README.md

@@ -20,7 +20,7 @@ Slider 滑块输入条
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Slider, Divider } from 'uiw';
 
-export default function Demo() {
+function Demo() {
   const [value, setValue] = React.useState(20);
@@ -69,2 +69,4 @@ const [value2, setValue2] = React.useState(-5);
 }
+
+export default Demo
 ```
@@ -76,61 +78,60 @@
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Form, Row, Col, Slider, Button, Notify } from 'uiw';
 
-export default function Demo() {
-  return (
-    <div>
-      <Form
-        onSubmit={({initial, current}) => {
-          if(current.age === initial.age) {
-            Notify.error({
-              title: '提交失败！',
-              description: `表单提交年龄失败，年龄为：${current.age}，与初始化值是一样滴！`,
-            });
-          } else {
-            Notify.success({
-              title: '提交成功！',
-              description: `表单提交年龄成功，年龄为：${current.age}，将自动填充初始化值！`,
-            });
-          }
-        }}
-        fields={{
-          age: {
-            initialValue: 0,
-            inline: true,
-            label: '年龄',
-            help: '值必须大于 10',
-            validator: (value) => value < 10 ? '必填选项！' : null,
-            children: <Slider />
-          },
-        }}
-      >
-        {({ fields, state, canSubmit }) => {
-          console.log('state:', state)
-          return (
-            <div>
-              <Row gutter={10}>
-                <Col style={{ maxWidth: 300 }}>{fields.age}</Col>
-                <Col>{state.current.age}</Col>
-              </Row>
-              <Row>
-                <Col fixed>
-                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
-                </Col>
-              </Row>
-              <Row>
-                <Col>
-                  <pre style={{ padding: 10, marginTop: 10 }}>
-                    {JSON.stringify(state.current, null, 2)}
-                  </pre>
-                </Col>
-              </Row>
-            </div>
-          )
-        }}
-      </Form>
-    </div>
-  )
-}
+const Demo = () => (
+  <div>
+    <Form
+      onSubmit={({initial, current}) => {
+        if(current.age === initial.age) {
+          Notify.error({
+            title: '提交失败！',
+            description: `表单提交年龄失败，年龄为：${current.age}，与初始化值是一样滴！`,
+          });
+        } else {
+          Notify.success({
+            title: '提交成功！',
+            description: `表单提交年龄成功，年龄为：${current.age}，将自动填充初始化值！`,
+          });
+        }
+      }}
+      fields={{
+        age: {
+          initialValue: 0,
+          inline: true,
+          label: '年龄',
+          help: '值必须大于 10',
+          validator: (value) => value < 10 ? '必填选项！' : null,
+          children: <Slider />
+        },
+      }}
+    >
+      {({ fields, state, canSubmit }) => {
+        console.log('state:', state)
+        return (
+          <div>
+            <Row gutter={10}>
+              <Col style={{ maxWidth: 300 }}>{fields.age}</Col>
+              <Col>{state.current.age}</Col>
+            </Row>
+            <Row>
+              <Col fixed>
+                <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                <pre style={{ padding: 10, marginTop: 10 }}>
+                  {JSON.stringify(state.current, null, 2)}
+                </pre>
+              </Col>
+            </Row>
+          </div>
+        )
+      }}
+    </Form>
+  </div>
+)
+export default Demo
 ```
@@ -142,7 +143,7 @@
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Slider, Divider } from 'uiw';
 
-export default function Demo() {
+function Demo() {
   return (
@@ -161,2 +162,3 @@ <div>
 }
+export default Demo
 ```
@@ -168,3 +170,3 @@
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
@@ -234,3 +236,3 @@ import { Slider, Divider} from 'uiw';
 }
-export default Demo;
+export default Demo
 ```
@@ -240,3 +242,3 @@
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
@@ -312,3 +314,3 @@ import { Slider, Divider} from 'uiw';
 }
-export default Demo;
+export default Demo
 ```
@@ -318,23 +320,26 @@
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Slider, Divider} from 'uiw';
 
-export default function Demo() {
-  return (
-    <div>
-      <Slider value={25} disabled style={{ maxWidth: 260 }} />
-      <Divider />
-      <Slider
-        step={10}
-        disabled
-        dots
-        value={50}
-        style={{ maxWidth: 260 }}
-      />
-      <Divider />
-      <Slider disabled step={2} value={26} min={20} max={44} dots marks />
-    </div>
-  )
+class Demo extends React.Component {
+  render() {
+    return (
+      <div>
+        <Slider value={25} disabled style={{ maxWidth: 260 }} />
+        <Divider />
+        <Slider
+          step={10}
+          disabled
+          dots
+          value={50}
+          style={{ maxWidth: 260 }}
+        />
+        <Divider />
+        <Slider disabled step={2} value={26} min={20} max={44} dots marks />
+      </div>
+    )
+  }
 }
+export default Demo
 ```
@@ -344,48 +349,51 @@
 
-```jsx mdx:preview&bg=#fff
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Row, Col, Slider } from 'uiw';
 
-export default function Demo() {
-  return (
-    <Row>
-      <Col fixed style={{ width: 70 }}>
-        <Slider
-          vertical
-          min={-10}
-          max={30}
-          step={2}
-          dots
-          value={20}
-          marks={{
-            [-10]: '-10°C',
-            [-2]: '-2°C',
-            0: ' ',
-            2: {
-              style: { color: '#af00ff' },
-            },
-            30: {
-              style: { color: '#ff7c00' },
-              label: <strong>30°C</strong>,
-            }
-          }}
-          style={{ height: 260 }}
-          renderMarks={(mark) => `${mark}°C`}
-        />
-      </Col>
-      <Col fixed>
-        <Slider vertical value={25} style={{ height: 260 }} />
-      </Col>
-      <Col fixed>
-        <Slider vertical value={62} progress={false} tooltip style={{ height: 260 }} />
-      </Col>
-      <Col fixed>
-        <Slider vertical value={50} step={10} dots style={{ height: 260 }} />
-      </Col>
-      <Col fixed>
-        <Slider vertical step={2} value={[26, 40]} min={20} max={44} dots marks style={{ height: 260 }} />
-      </Col>
-    </Row>
-  );
+class Demo extends React.Component {
+  render() {
+    return (
+      <Row>
+        <Col fixed style={{ width: 70 }}>
+          <Slider
+            vertical
+            min={-10}
+            max={30}
+            step={2}
+            dots
+            value={20}
+            marks={{
+              [-10]: '-10°C',
+              [-2]: '-2°C',
+              0: ' ',
+              2: {
+                style: { color: '#af00ff' },
+              },
+              30: {
+                style: { color: '#ff7c00' },
+                label: <strong>30°C</strong>,
+              }
+            }}
+            style={{ height: 260 }}
+            renderMarks={(mark) => `${mark}°C`}
+          />
+        </Col>
+        <Col fixed>
+          <Slider vertical value={25} style={{ height: 260 }} />
+        </Col>
+        <Col fixed>
+          <Slider vertical value={62} progress={false} tooltip style={{ height: 260 }} />
+        </Col>
+        <Col fixed>
+          <Slider vertical value={50} step={10} dots style={{ height: 260 }} />
+        </Col>
+        <Col fixed>
+          <Slider vertical step={2} value={[26, 40]} min={20} max={44} dots marks style={{ height: 260 }} />
+        </Col>
+      </Row>
+    );
+  }
 }
+export default Demo
 ```
@@ -392,0 +400,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

166448

increased by62.67%

Number of package files

23

increased by9.52%

Lines of code

1683

increased by44.22%

Number of lines in readme file

406

increased by2.01%

Worsened metrics

Dependency count

4

increased by33.33%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Added@uiw/utils@5.0.0-bate-9(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.13(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removed@uiw/utils@4.22.3(transitive)

• Updated@uiw/utils@^5.0.0-bate.2.0