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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _slider = _interopRequireDefault(require("../../slider"));
const ResetSlider = ({
  value,
  onChange,
  leftIcon,
  rightIcon,
  ...props
}) => {
  // 减
  const decrement = () => {
    if (!(value > props.min)) return;
    const nValue = Math.round(value * 100 - props.step * 100) / 100;
    onChange?.(nValue);
  };

  // 增
  const increment = () => {
    if (!(value < props.max)) return;
    const nValue = Math.round(value * 100 + props.step * 100) / 100;
    onChange?.(nValue);
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: leftIcon,
    onClick: decrement
  }), /*#__PURE__*/_react.default.createElement(_slider.default, (0, _extends2.default)({}, props, {
    value: value,
    onChange: val => onChange(val)
  })), /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: rightIcon,
    onClick: increment
  }));
};

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