oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
56 lines (52 loc) • 2.47 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const prop_types_1 = __importDefault(require("prop-types"));
const lodash_1 = require("lodash");
const LabelComponent = (props) => {
const { className, children, title } = props;
return (react_1.default.createElement("div", { className: `oneframe-field-label ${className}` },
react_1.default.createElement("div", { className: "oneframe-field-label-title" }, title),
children && react_1.default.createElement("div", { className: "oneframe-field-label-children" }, children)));
};
LabelComponent.propTypes = {
position: prop_types_1.default.oneOf(['left', 'top', 'right']),
className: prop_types_1.default.string,
children: prop_types_1.default.any,
title: prop_types_1.default.node.isRequired,
width: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
};
const Label = styled_components_1.default(LabelComponent) `
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
flex-direction: ${props => props.position === 'left' ? 'row' : props.position === 'right' ? 'row-reverse' : 'column'};
.oneframe-field-label-title {
display: flex;
padding: ${props => props.position !== 'right' ? (props.position === 'top' ? '0 0 5px 0' : '0 5px 0 0') : '0 0 5px 5px'};
width: ${props => (props.position !== 'top' ? props.width || 'fit-content' : '100%')};
font-size: 13px;
font-weight: 600;
color: #000;
a {
font-weight: 500;
}
}
.oneframe-field-label-children {
display: flex;
flex-grow: 1;
flex-direction: column;
width: ${props => (props.position === 'left' ? 'auto' : props.position === 'right' ? 'fit-content' : '100%')};
padding: ${props => (props.position === 'left' ? 0 : '0 0 5px 0')};
}
`;
exports.FieldLabelTmp = LabelComponent;
exports.default = react_1.default.memo(Label, (p, n) => lodash_1.isEqual(p.title, n.title) &&
lodash_1.isEqual(p.width, n.width) &&
lodash_1.isEqual(p.position, n.position) &&
lodash_1.isEqual(p.children, n.children));