function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { PisellPercent } from "./PisellPercent";
import { useState } from 'react';
import { Form } from 'antd';

/**
 * PisellPercent 组件 Storybook
 */
var meta = {
  title: '表单/表单组件/PisellPercent',
  component: PisellPercent,
  tags: ['autodocs']
};
export default meta;
/**
 * 基础示例 - Text 变体
 */
export var Basic = {
  args: {
    value: 85.5
  },
  render: function render(args) {
    var _useState = useState(args.value),
      _useState2 = _slicedToArray(_useState, 2),
      value = _useState2[0],
      setValue = _useState2[1];
    return /*#__PURE__*/React.createElement(PisellPercent, _extends({}, args, {
      value: value,
      onChange: setValue
    }));
  }
};

/**
 * 只读态 - Text
 */
export var ReadOnlyText = {
  args: {
    mode: 'read',
    value: 85.5,
    variant: 'text'
  }
};

/**
 * 只读态 - Progress 进度条
 */
export var ReadOnlyProgress = {
  args: {
    mode: 'read',
    value: 75,
    variant: 'progress',
    style: {
      width: 300
    }
  }
};

/**
 * 只读态 - Circle 环形进度
 */
export var ReadOnlyCircle = {
  args: {
    mode: 'read',
    value: 80,
    variant: 'circle'
  }
};

/**
 * 进度条 - 不同状态
 */
export var ProgressStates = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: 16,
        width: 300
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 8
      }
    }, "\u6B63\u5E38\uFF08\u84DD\u8272\uFF09"), /*#__PURE__*/React.createElement(PisellPercent, {
      mode: "read",
      value: 50,
      variant: "progress",
      progressProps: {
        strokeColor: '#1890ff'
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 8
      }
    }, "\u6210\u529F\uFF08\u7EFF\u8272\uFF09"), /*#__PURE__*/React.createElement(PisellPercent, {
      mode: "read",
      value: 100,
      variant: "progress",
      progressProps: {
        strokeColor: '#52c41a',
        status: 'success'
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 8
      }
    }, "\u5F02\u5E38\uFF08\u7EA2\u8272\uFF09"), /*#__PURE__*/React.createElement(PisellPercent, {
      mode: "read",
      value: 30,
      variant: "progress",
      progressProps: {
        strokeColor: '#ff4d4f',
        status: 'exception'
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 8
      }
    }, "\u52A8\u753B\u6548\u679C"), /*#__PURE__*/React.createElement(PisellPercent, {
      mode: "read",
      value: 65,
      variant: "progress",
      progressProps: {
        status: 'active'
      }
    })));
  }
};

/**
 * 环形进度 - 不同配置
 */
export var CircleVariants = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        gap: 32
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 8,
        textAlign: 'center'
      }
    }, "\u9ED8\u8BA4"), /*#__PURE__*/React.createElement(PisellPercent, {
      mode: "read",
      value: 75,
      variant: "circle"
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 8,
        textAlign: 'center'
      }
    }, "\u5927\u5C3A\u5BF8"), /*#__PURE__*/React.createElement(PisellPercent, {
      mode: "read",
      value: 80,
      variant: "circle",
      circleProps: {
        width: 150
      }
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      style: {
        marginBottom: 8,
        textAlign: 'center'
      }
    }, "\u81EA\u5B9A\u4E49\u989C\u8272"), /*#__PURE__*/React.createElement(PisellPercent, {
      mode: "read",
      value: 90,
      variant: "circle",
      circleProps: {
        strokeColor: '#52c41a'
      }
    })));
  }
};

/**
 * 范围转换
 */
export var RangeConversion = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: 16
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8
      }
    }, "[0, 100] \u8303\u56F4\uFF0C\u503C 85.5\uFF1A"), /*#__PURE__*/React.createElement(PisellPercent, {
      mode: "read",
      value: 85.5,
      range: [0, 100]
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8
      }
    }, "[0, 1] \u8303\u56F4\uFF0C\u503C 0.855\uFF1A"), /*#__PURE__*/React.createElement(PisellPercent, {
      mode: "read",
      value: 0.855,
      range: [0, 1]
    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
      style: {
        marginRight: 8
      }
    }, "[0, 1000] \u8303\u56F4\uFF0C\u503C 855\uFF1A"), /*#__PURE__*/React.createElement(PisellPercent, {
      mode: "read",
      value: 855,
      range: [0, 1000]
    })));
  }
};

/**
 * 编辑态 - 仅输入框
 */
export var EditWithInput = {
  render: function render() {
    var _useState3 = useState(65.5),
      _useState4 = _slicedToArray(_useState3, 2),
      value = _useState4[0],
      setValue = _useState4[1];
    return /*#__PURE__*/React.createElement(Form.Item, {
      label: "\u5B8C\u6210\u5EA6"
    }, /*#__PURE__*/React.createElement(PisellPercent, {
      value: value,
      onChange: setValue,
      min: 0,
      max: 100,
      step: 0.1,
      placeholder: "\u8BF7\u8F93\u5165\u767E\u5206\u6BD4"
    }));
  }
};

/**
 * 编辑态 - 滑块 + 输入框
 */
export var EditWithSlider = {
  render: function render() {
    var _useState5 = useState(65),
      _useState6 = _slicedToArray(_useState5, 2),
      value = _useState6[0],
      setValue = _useState6[1];
    return /*#__PURE__*/React.createElement(Form.Item, {
      label: "\u9879\u76EE\u8FDB\u5EA6"
    }, /*#__PURE__*/React.createElement(PisellPercent, {
      value: value,
      onChange: setValue,
      showSlider: true,
      sliderProps: {
        marks: {
          0: '0%',
          25: '25%',
          50: '50%',
          75: '75%',
          100: '100%'
        }
      }
    }));
  }
};

/**
 * 项目进度看板
 */
export var ProjectDashboard = {
  render: function render() {
    var tasks = [{
      name: '前端开发',
      completion: 85.5
    }, {
      name: '后端开发',
      completion: 72
    }, {
      name: '测试',
      completion: 45
    }, {
      name: '部署',
      completion: 0
    }];
    return /*#__PURE__*/React.createElement("div", {
      style: {
        padding: 24
      }
    }, tasks.map(function (task) {
      return /*#__PURE__*/React.createElement("div", {
        key: task.name,
        style: {
          marginBottom: 24
        }
      }, /*#__PURE__*/React.createElement("div", {
        style: {
          display: 'flex',
          justifyContent: 'space-between',
          marginBottom: 8
        }
      }, /*#__PURE__*/React.createElement("span", null, task.name), /*#__PURE__*/React.createElement(PisellPercent, {
        mode: "read",
        value: task.completion,
        variant: "text"
      })), /*#__PURE__*/React.createElement(PisellPercent, {
        mode: "read",
        value: task.completion,
        variant: "progress",
        progressProps: {
          strokeColor: task.completion === 100 ? '#52c41a' : '#1890ff'
        }
      }));
    }));
  }
};

/**
 * 禁用态
 */
export var Disabled = {
  args: {
    disabled: true,
    value: 60
  }
};