zent
Version:
一套前端设计语言和基于React的实现
126 lines (125 loc) • 5.61 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PureComponent } from 'react';
import reactCSS from './helpers/reactcss';
import color from './helpers/color';
import { EditableInput } from './common';
var SketchFileds = (function (_super) {
__extends(SketchFileds, _super);
function SketchFileds() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
hexColor: _this.props.hex.replace('#', ''),
};
_this.confirmHexChange = function (e) {
var onChange = _this.props.onChange;
var hexColor = _this.state.hexColor;
color.isValidHex(hexColor) &&
onChange({
hex: hexColor,
source: 'hex',
}, e);
};
_this.handleHexChange = function (data) {
_this.setState({
hexColor: data.hex,
});
};
_this.handleChange = function (data, e) {
var _a = _this.props, rgb = _a.rgb, hsl = _a.hsl, onChange = _a.onChange;
if (data.r || data.g || data.b) {
onChange({
r: data.r || rgb.r,
g: data.g || rgb.g,
b: data.b || rgb.b,
a: rgb.a,
source: 'rgb',
}, e);
}
else if (data.a) {
if (data.a < 0) {
data.a = 0;
}
else if (data.a > 100) {
data.a = 100;
}
data.a = data.a / 100;
onChange({
h: hsl.h,
s: hsl.s,
l: hsl.l,
a: data.a,
source: 'rgb',
}, e);
}
};
return _this;
}
Object.defineProperty(SketchFileds.prototype, "styles", {
get: function () {
var showAlpha = this.props.showAlpha;
return reactCSS({
default: {
fields: {
display: 'flex',
paddingTop: '4px',
},
single: {
flex: '1',
paddingLeft: '6px',
},
alpha: {
flex: '1',
paddingLeft: '6px',
},
double: {
flex: '2',
},
input: {
width: '80%',
padding: '4px 10% 3px',
border: 'none',
boxShadow: 'inset 0 0 0 1px #ccc',
fontSize: '11px',
},
label: {
display: 'block',
textAlign: 'center',
fontSize: '11px',
color: '#222',
paddingTop: '3px',
paddingBottom: '4px',
textTransform: 'capitalize',
},
},
showAlpha: {
alpha: {
display: 'none',
},
},
}, { showAlpha: !showAlpha });
},
enumerable: false,
configurable: true
});
SketchFileds.getDerivedStateFromProps = function (props, state) {
var hex = props.hex;
var derivedState = {
preHex: hex,
hexColor: state.hexColor,
};
if (hex !== state.preHex) {
var hexFormat = hex.replace('#', '');
derivedState.hexColor = hexFormat;
}
return derivedState;
};
SketchFileds.prototype.render = function () {
var rgb = this.props.rgb;
var hexColor = this.state.hexColor;
var styles = this.styles;
return (_jsxs("div", __assign({ style: styles.fields, "data-zv": '10.0.17' }, { children: [_jsx("div", __assign({ style: styles.double, "data-zv": '10.0.17' }, { children: _jsx(EditableInput, { style: { input: styles.input, label: styles.label }, label: "hex", value: hexColor, onBlur: this.confirmHexChange, onPressEnter: this.confirmHexChange, onChange: this.handleHexChange }, void 0) }), void 0), _jsx("div", __assign({ style: styles.single, "data-zv": '10.0.17' }, { children: _jsx(EditableInput, { style: { input: styles.input, label: styles.label }, label: "r", value: rgb.r, onChange: this.handleChange, dragMax: "255" }, void 0) }), void 0), _jsx("div", __assign({ style: styles.single, "data-zv": '10.0.17' }, { children: _jsx(EditableInput, { style: { input: styles.input, label: styles.label }, label: "g", value: rgb.g, onChange: this.handleChange, dragMax: "255" }, void 0) }), void 0), _jsx("div", __assign({ style: styles.single, "data-zv": '10.0.17' }, { children: _jsx(EditableInput, { style: { input: styles.input, label: styles.label }, label: "b", value: rgb.b, onChange: this.handleChange, dragMax: "255" }, void 0) }), void 0), _jsx("div", __assign({ style: styles.alpha, "data-zv": '10.0.17' }, { children: _jsx(EditableInput, { style: { input: styles.input, label: styles.label }, label: "a", value: Math.round(rgb.a * 100), onChange: this.handleChange, dragMax: "100" }, void 0) }), void 0)] }), void 0));
};
return SketchFileds;
}(PureComponent));
export default SketchFileds;