react-life-design
Version:
Life Design UI components
38 lines • 4.07 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var styled_components_1 = require("styled-components");
var Colors_1 = require("../Colors");
var styles_1 = require("../utils/styles");
exports.Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid ", ";\n display: inline-block;\n text-align: center;\n padding: 16px;\n cursor: pointer;\n width: 100%;\n ", "\n\n .label__title {\n font-size: 16px;\n color: ", ";\n margin: 16px 0 10px;\n }\n\n .label__description {\n font-size: 10px;\n color: ", ";\n margin: 0;\n &:last-of-type {\n margin-bottom: 6px;\n }\n }\n\n svg {\n position: relative;\n top: 3px;\n height: 16px;\n fill:none;\n stroke: ", ";\n stroke-miterlimit: 10;\n stroke-width: 2px;\n margin-left: 6px;\n }\n\n .link-arrow-elements {\n fill: none;\n transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;\n }\n\n &:hover .link-arrow-elements {\n stroke: ", ";\n transform: translateX(3px);\n }\n"], ["\n border: 1px solid ", ";\n display: inline-block;\n text-align: center;\n padding: 16px;\n cursor: pointer;\n width: 100%;\n ", "\n\n .label__title {\n font-size: 16px;\n color: ", ";\n margin: 16px 0 10px;\n }\n\n .label__description {\n font-size: 10px;\n color: ", ";\n margin: 0;\n &:last-of-type {\n margin-bottom: 6px;\n }\n }\n\n svg {\n position: relative;\n top: 3px;\n height: 16px;\n fill:none;\n stroke: ", ";\n stroke-miterlimit: 10;\n stroke-width: 2px;\n margin-left: 6px;\n }\n\n .link-arrow-elements {\n fill: none;\n transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;\n }\n\n &:hover .link-arrow-elements {\n stroke: ", ";\n transform: translateX(3px);\n }\n"])), Colors_1.default.line, styles_1.styledByMediaQuery("width: 308px;"), Colors_1.default.mongeral, Colors_1.default.support, Colors_1.default.mongeral, Colors_1.default.regalBlue);
exports.Input = styled_components_1.default.input.attrs({
type: 'file',
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n opacity: 0;\n"], ["\n opacity: 0;\n"])));
var Fragment = React.Fragment;
exports.default = (function (_a) {
var onChange = _a.onChange, formats = _a.formats, maxSize = _a.maxSize, id = _a.id;
return (React.createElement(Fragment, null,
React.createElement(exports.Label, { htmlFor: id },
React.createElement("svg", { className: 'svg', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 30 20', transform: 'rotate(270)' },
React.createElement("polyline", { className: 'link-arrow-elements', points: '12.35 19.71 22 10.22 12.35 0.71' }),
React.createElement("line", { className: 'link-arrow-elements', x1: '22', y1: '10.22', y2: '10.22' }),
React.createElement("line", { className: 'link-arrow-elements', x1: '24', x2: '24', y1: '24', y: '10' })),
React.createElement("h5", { className: 'label__title' }, "ARRASTE O ARQUIVO OU CLIQUE"),
React.createElement("p", { className: 'label__description' },
"Formato ",
formats),
React.createElement("p", { className: 'label__description' },
"Tamano m\u00E1ximo ",
maxSize),
React.createElement("p", { className: 'label__description' }, "Dimens\u00E3o padr\u00E3o 220x60")),
React.createElement(exports.Input, { id: id, onChange: function (_a) {
var target = _a.target;
return onChange(target.files);
} })));
});
var templateObject_1, templateObject_2;
//# sourceMappingURL=Upload.js.map