linkmore-design/es/crop-img/body/Operate.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["value", "onChange", "leftIcon", "rightIcon"];
import React from 'react';
import IconFont from "../../icon-font";
import Slider from "../../slider";
var ResetSlider = function ResetSlider(_ref) {
  var value = _ref.value,
    _onChange = _ref.onChange,
    leftIcon = _ref.leftIcon,
    rightIcon = _ref.rightIcon,
    props = _objectWithoutProperties(_ref, _excluded);
  // 减
  var decrement = function decrement() {
    if (!(value > props.min)) return;
    var nValue = Math.round(value * 100 - props.step * 100) / 100;
    _onChange === null || _onChange === void 0 ? void 0 : _onChange(nValue);
  };

  // 增
  var increment = function increment() {
    if (!(value < props.max)) return;
    var nValue = Math.round(value * 100 + props.step * 100) / 100;
    _onChange === null || _onChange === void 0 ? void 0 : _onChange(nValue);
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconFont, {
    type: leftIcon,
    onClick: decrement
  }), /*#__PURE__*/React.createElement(Slider, _extends({}, props, {
    value: value,
    onChange: function onChange(val) {
      return _onChange(val);
    }
  })), /*#__PURE__*/React.createElement(IconFont, {
    type: rightIcon,
    onClick: increment
  }));
};

// 图片调整
var Operate = function Operate(_ref2) {
  var instance = _ref2.instance;
  var state = instance.state,
    setTransform = instance.setTransform;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "img_crop_control"
  }, /*#__PURE__*/React.createElement(ResetSlider, {
    value: state.zoom,
    onChange: function onChange(zoom) {
      return setTransform({
        zoom: zoom
      });
    },
    defaultValue: 1,
    leftIcon: "lmweb-minus",
    rightIcon: "lmweb-plus",
    step: 0.1,
    min: 0.1,
    max: 3
  })), /*#__PURE__*/React.createElement("div", {
    className: "img_crop_control"
  }, /*#__PURE__*/React.createElement(ResetSlider, {
    value: state.rotation,
    onChange: function onChange(rotation) {
      return setTransform({
        rotation: rotation
      });
    },
    defaultValue: 0,
    leftIcon: "lmweb-rotate-left",
    rightIcon: "lmweb-rotate-right",
    step: 1,
    min: -180,
    max: 180
  })));
};
export default /*#__PURE__*/React.memo(Operate);