antd-color-editor
Version:
An open-source color editor for designing color system
170 lines (167 loc) • 8.17 kB
JavaScript
var _templateObject, _templateObject2;
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; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { DeleteOutlined, DownloadOutlined, ReloadOutlined, SaveOutlined, UploadOutlined } from '@ant-design/icons';
import { DataPreviewer } from '@ant-design/pro-editor';
import { useLocalStorageState } from 'ahooks';
import { Button, Popconfirm, Space, Upload, message } from 'antd';
import dayjs from 'dayjs';
import { useControls, useCreateStore } from 'leva';
import { memo, useCallback } from 'react';
import styled from 'styled-components';
import { LevaPanel, PanelGroup, useDownload } from "../..";
/******************************************************
*********************** Style *************************
******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var Btn = styled(Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: 12px !important;\n border-radius: 4px;\n"])));
var Flex = styled(Space)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n padding: 0 12px;\n\n > div {\n flex: 1;\n }\n\n .ant-upload.ant-upload-select {\n width: 100%;\n }\n"])));
/******************************************************
************************* Dom *************************
******************************************************/
var ExportPanel = /*#__PURE__*/memo(function (_ref) {
var config = _ref.config;
var _useLocalStorageState = useLocalStorageState('antd-color-config', {
defaultValue: undefined
}),
_useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 2),
localData = _useLocalStorageState2[0],
setLocalData = _useLocalStorageState2[1];
var exportStore = useCreateStore();
var _useDownload = useDownload(),
setContent = _useDownload.setContent,
startDownload = _useDownload.startDownload;
var _useControls = useControls({
name: {
label: '配置名称',
value: '未命名'
}
}, {
store: exportStore
}),
name = _useControls.name;
var genConfgFile = function genConfgFile() {
return {
data: config,
name: name,
time: Date.now()
};
};
var handleSave = function handleSave() {
var data = genConfgFile();
setLocalData(data);
message.success('保存成功');
};
var handleDownload = function handleDownload() {
var data = genConfgFile();
var fileName = name ? name + '.json' : 'config.json';
setContent(JSON.stringify(data), fileName);
startDownload();
};
var handleUpload = useCallback(function (info) {
// if (info.file.status !== 'done') return;
var reader = new FileReader();
//@ts-ignore file 类型不明确
reader.readAsText(info.file.originFileObj, 'utf8');
//读取完文件之后的回调函数
reader.addEventListener('load', function (evt) {
var _evt$target;
var fileString = (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.result;
var fileJson = fileString;
var uploadConfig = JSON.parse(fileJson);
if (uploadConfig !== null && uploadConfig !== void 0 && uploadConfig.time && uploadConfig !== null && uploadConfig !== void 0 && uploadConfig.data && uploadConfig !== null && uploadConfig !== void 0 && uploadConfig.name) {
setLocalData(uploadConfig);
message.success('上传并覆盖成功');
location.reload();
} else {
message.error('配置文件不正确');
}
});
}, [setLocalData]);
var handleClean = function handleClean() {
setLocalData();
location.reload();
};
var exportPanelGroup = [{
header: '配置存储',
panel: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(LevaPanel, {
store: exportStore
}), /*#__PURE__*/_jsxs(Flex, {
direction: "vertical",
children: [/*#__PURE__*/_jsx(Btn, {
block: true,
icon: /*#__PURE__*/_jsx(SaveOutlined, {}),
onClick: handleSave,
size: "small",
type: "primary",
children: "\u4FDD\u5B58\u914D\u7F6E"
}), /*#__PURE__*/_jsx(Btn, {
block: true,
icon: /*#__PURE__*/_jsx(DownloadOutlined, {}),
onClick: handleDownload,
size: "small",
children: "\u4E0B\u8F7D\u914D\u7F6E"
})]
})]
})
}, {
header: '读取/还原',
panel: /*#__PURE__*/_jsxs(Flex, {
direction: "vertical",
children: [/*#__PURE__*/_jsx(Upload, {
listType: "picture",
maxCount: 1,
onChange: handleUpload,
children: /*#__PURE__*/_jsx(Btn, {
block: true,
icon: /*#__PURE__*/_jsx(UploadOutlined, {}),
size: "small",
type: "primary",
children: "\u4E0A\u4F20\u5E76\u8BFB\u53D6\u914D\u7F6E\u6587\u4EF6"
})
}), /*#__PURE__*/_jsx(Popconfirm, {
cancelText: "\u53D6\u6D88",
okText: "\u786E\u8BA4",
onConfirm: function onConfirm() {
return location.reload();
},
title: "\u786E\u5B9A\u8981\u6062\u590D\u4E3A\u4FDD\u5B58\u914D\u7F6E\uFF1F",
children: /*#__PURE__*/_jsx(Btn, {
block: true,
icon: /*#__PURE__*/_jsx(ReloadOutlined, {}),
size: "small",
children: "\u6062\u590D\u4E3A\u4FDD\u5B58\u914D\u7F6E"
})
}), /*#__PURE__*/_jsx(Popconfirm, {
cancelText: "\u53D6\u6D88",
okText: "\u786E\u8BA4",
onConfirm: handleClean,
title: "\u786E\u5B9A\u8981\u6E05\u7A7A\u5E76\u6062\u590D\u521D\u59CB\u5316\uFF1F",
children: /*#__PURE__*/_jsx(Btn, {
block: true,
danger: true,
icon: /*#__PURE__*/_jsx(DeleteOutlined, {}),
size: "small",
children: "\u6E05\u7A7A\u5386\u53F2\u914D\u7F6E\u5E76\u521D\u59CB\u5316"
})
})]
})
}, {
header: localData ? ['本地配置:', localData.name, dayjs(localData === null || localData === void 0 ? void 0 : localData.time).format('YYYY-MM-DD HH:mm:ss')].join(' ') : '无本地配置',
panel: localData && /*#__PURE__*/_jsx(DataPreviewer, {
data: [localData === null || localData === void 0 ? void 0 : localData.data]
})
}];
return /*#__PURE__*/_jsx(PanelGroup, {
panels: exportPanelGroup
});
});
export default ExportPanel;