react-admin-component/lib/cropper/Controller.js

react library

import * as tslib_1 from "tslib";
import React, { useState, useEffect } from 'react';
import { Input, Select } from 'antd';
import { usePrevious } from 'react-use';
var OPTIONS = [
    { key: '1/1', name: '1:1' },
    { key: '4/3', name: '4:3' },
    { key: '1/2', name: '1:2' },
    { key: '16/9', name: '16:9' },
    { key: '9/16', name: '9:16' },
];
var Controller = function (_a) {
    var imgData = _a.imgData, IMG_SPECTRATIO = _a.IMG_SPECTRATIO, initialValue = _a.initialValue, onSelectChange = _a.onSelectChange, resetInputValue = _a.resetInputValue, cropperIns = _a.cropperIns;
    var _b = useState(initialValue), inputValue = _b[0], setInputValue = _b[1];
    var _c = useState('1/1'), selectAspectRatio = _c[0], setSelectAspectRatio = _c[1];
    var prevInitialValue = usePrevious(initialValue);
    useEffect(function () {
        if (JSON.stringify(prevInitialValue) !== JSON.stringify(initialValue)) {
            setInputValue(initialValue);
        }
    }, [initialValue, prevInitialValue, setInputValue]);
    function renderCropperInput(sizeName, sizeKey) {
        var onChange = function (_a) {
            var target = _a.target;
            var value = target && target.value;
            if (!value && !value.match(/\d*/g))
                return '';
            value = +(value.match(/\d*/g) || [''])[0];
            value = (value > imgData[sizeKey] ? imgData[sizeKey] : value) + '';
            var numberValue = +value;
            var calculateStyle = function (value, IMG_SPECTRATIO) {
                return +(value / IMG_SPECTRATIO).toFixed(0);
            };
            var aspectRatio = selectAspectRatio
                ? +selectAspectRatio.split('/')[0] / +selectAspectRatio.split('/')[1]
                : 0;
            var calculateResult = function (IMG_SPECTRATIO) {
                var calculateAnother = function (keys) {
                    var _a, _b;
                    return (tslib_1.__assign((_a = {}, _a[keys[0]] = calculateStyle(numberValue, IMG_SPECTRATIO), _a), (aspectRatio && (_b = {},
                        _b[keys[1]] = calculateStyle(keys[0] === 'width'
                            ? numberValue / aspectRatio
                            : numberValue * aspectRatio, IMG_SPECTRATIO),
                        _b))));
                };
                return tslib_1.__assign({}, inputValue, calculateAnother(sizeKey === 'width' ? ['width', 'height'] : ['height', 'width']));
            };
            var finalInputStyle = calculateResult(1);
            setInputValue(finalInputStyle);
            if (cropperIns) {
                cropperIns.setAspectRatio(aspectRatio);
                cropperIns.setCropBoxData(Object.keys(finalInputStyle).reduce(function (prev, curr) {
                    prev[curr] = calculateStyle(finalInputStyle[curr], IMG_SPECTRATIO);
                    return prev;
                }, {}));
            }
        };
        return (React.createElement(Input, { placeholder: sizeName, value: inputValue[sizeKey], style: { width: 70 }, onChange: onChange }));
    }
    function onChange(value) {
        setSelectAspectRatio(value);
        if (!value && cropperIns) {
            var cropperBox = cropperIns.getCropBoxData();
            cropperIns.setAspectRatio(0);
            cropperIns.setCropBoxData(cropperBox);
            return;
        }
        var cropperStyle = onSelectChange &&
            onSelectChange({
                width: Number(value.split('/')[0]),
                height: Number(value.split('/')[1]),
            });
        setInputValue(resetInputValue(cropperStyle));
    }
    return (React.createElement("div", { className: "rac_cropper_controller", style: { marginTop: 20, display: 'flex', justifyContent: 'space-around' } },
        React.createElement("div", null,
            React.createElement("span", null, "\u88C1\u526A\uFF1A"),
            renderCropperInput('宽', 'width'),
            React.createElement("span", { style: { margin: '0 10px' } }, "X"),
            renderCropperInput('高', 'height')),
        React.createElement("div", null,
            React.createElement("span", null, "\u50CF\u7D20\u6BD4\uFF1A"),
            React.createElement(Select, { onChange: onChange, style: { width: 150 }, allowClear: true, value: selectAspectRatio }, OPTIONS.map(function (op) { return (React.createElement(Select.Option, { key: op.key }, op.name)); })))));
};
export default Controller;
//# sourceMappingURL=Controller.js.map