antd-color-editor
Version:
An open-source color editor for designing color system
59 lines • 2.48 kB
JavaScript
import { Center, Environment, OrbitControls } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';
import { useTheme, useThemeMode } from 'antd-style';
import { Suspense, memo, useRef } from 'react';
import { GenColor3D } from "../..";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var cube = ['https://gw.alipayobjects.com/zos/antfincdn/A2UP6WYMLw/px.png', 'https://gw.alipayobjects.com/zos/antfincdn/YrnP3LArEC/nx.png', 'https://gw.alipayobjects.com/zos/antfincdn/TFxGCynnr3/py.png', 'https://gw.alipayobjects.com/zos/antfincdn/0xv2XBW3oq/ny.png', 'https://gw.alipayobjects.com/zos/antfincdn/wbdSuRHSRo/pz.png', 'https://gw.alipayobjects.com/zos/antfincdn/pzB8izsxKd/nz.png'];
var ThreeView = /*#__PURE__*/memo(function (_ref) {
var config = _ref.config,
data = _ref.data;
var _useThemeMode = useThemeMode(),
isDarkMode = _useThemeMode.isDarkMode;
var theme = useTheme();
var ref = useRef();
var colorType = config.colorType,
threeZoom = config.threeZoom,
autoRotate = config.autoRotate,
showFloor = config.showFloor,
hueZoom = config.hueZoom;
return /*#__PURE__*/_jsxs(Canvas, {
style: {
background: isDarkMode ? '#222' : '#f1f1f1',
height: '100%',
width: '100%'
},
children: [/*#__PURE__*/_jsxs(Suspense, {
fallback: null,
children: [/*#__PURE__*/_jsx(Environment, {
files: cube
}), /*#__PURE__*/_jsx("ambientLight", {}), /*#__PURE__*/_jsx(Center, {
scale: 0.02,
children: data.map(function (item) {
return /*#__PURE__*/_jsx(GenColor3D, {
colorType: colorType,
hueZoom: hueZoom,
name: item.name,
scale: isDarkMode ? item.scales.dark : item.scales.light,
zoom: threeZoom
}, item.name);
})
})]
}), showFloor && /*#__PURE__*/_jsx("gridHelper", {
/* eslint-disable-next-line react/no-unknown-property */
args: [25, 100, theme.colorBorderSecondary, theme.colorBorder]
/* eslint-disable-next-line react/no-unknown-property */,
castShadow: false
/* eslint-disable-next-line react/no-unknown-property */,
position: [0, -1, 0]
/* eslint-disable-next-line react/no-unknown-property */,
receiveShadow: false
}), /*#__PURE__*/_jsx(OrbitControls, {
autoRotate: autoRotate,
makeDefault: true,
ref: ref
})]
});
});
export default ThreeView;