jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
32 lines • 1.34 kB
JavaScript
import React, { useState, useEffect } from 'react';
import { usePrefix } from 'jjb-lc-designable/react';
import cls from 'classnames';
import './styles.less';
export const PositionInput = props => {
const prefix = usePrefix('position-input');
const [current, setCurrent] = useState(props.value);
useEffect(() => {
if (!props.value) {
setCurrent('center');
}
}, [props.value]);
const createCellProps = type => ({
className: cls(prefix + '-cell', {
active: current === type
}),
onClick() {
setCurrent(type);
props.onChange?.(type);
}
});
return /*#__PURE__*/React.createElement("div", {
className: cls(prefix, props.className),
style: props.style
}, /*#__PURE__*/React.createElement("div", {
className: prefix + '-row'
}, /*#__PURE__*/React.createElement("div", createCellProps('top'), "\u2533")), /*#__PURE__*/React.createElement("div", {
className: prefix + '-row'
}, /*#__PURE__*/React.createElement("div", createCellProps('left'), "\u2523"), /*#__PURE__*/React.createElement("div", createCellProps('center'), "\u254B"), /*#__PURE__*/React.createElement("div", createCellProps('right'), "\u252B")), /*#__PURE__*/React.createElement("div", {
className: prefix + '-row'
}, /*#__PURE__*/React.createElement("div", createCellProps('bottom'), "\u253B")));
};