design-system-simplefi
Version:
Design System for SimpleFi Applications
55 lines • 5.96 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import styled, { css } from 'styled-components';
import { Inline } from '../../layout';
import { IconButton } from '../../IconButton';
import { getColor, shortenAddress } from '../../../utils';
var InputContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n z-index: 1;\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n input:-webkit-autofill,\n input:-webkit-autofill:hover,\n input:-webkit-autofill:focus,\n input:-webkit-autofill:active {\n transition: background-color 5000s ease-in-out 0s;\n -webkit-text-fill-color: rgba(0, 0, 0, 0);\n }\n"], ["\n z-index: 1;\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n input:-webkit-autofill,\n input:-webkit-autofill:hover,\n input:-webkit-autofill:focus,\n input:-webkit-autofill:active {\n transition: background-color 5000s ease-in-out 0s;\n -webkit-text-fill-color: rgba(0, 0, 0, 0);\n }\n"])));
var DisplayShortened = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n z-index: -1;\n display: flex;\n position: absolute;\n align-items: center;\n font-size: 1rem;\n width: 100%;\n height: 100%;\n padding: 10px 5px;\n"], ["\n z-index: -1;\n display: flex;\n position: absolute;\n align-items: center;\n font-size: 1rem;\n width: 100%;\n height: 100%;\n padding: 10px 5px;\n"])));
var InputSt = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n z-index: 1;\n position: relative;\n background: transparent;\n font-size: 1rem;\n padding: 10px 5px;\n width: 100%;\n height: 100%;\n display: block;\n border: 1px solid ", ";\n border-radius: 5px;\n &:focus {\n outline: none;\n }\n"], ["\n z-index: 1;\n position: relative;\n background: transparent;\n font-size: 1rem;\n padding: 10px 5px;\n width: 100%;\n height: 100%;\n display: block;\n border: 1px solid ", ";\n border-radius: 5px;\n &:focus {\n outline: none;\n }\n"])), getColor('midPurple'));
var focusCSS = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n top: -1rem;\n font-size: 0.8rem;\n color: ", ";\n"], ["\n top: -1rem;\n font-size: 0.8rem;\n color: ", ";\n"])), getColor('lightGrey'));
var LabelSt = styled.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n font-size: 1rem;\n position: absolute;\n pointer-events: none;\n left: 7px;\n top: calc(50% - 10px);\n transition: 0.2s ease all;\n input:focus ~ &,\n input:not(:placeholder-shown).input:not(:focus) ~ .label {\n ", "\n }\n ", "\n"], ["\n color: ", ";\n font-size: 1rem;\n position: absolute;\n pointer-events: none;\n left: 7px;\n top: calc(50% - 10px);\n transition: 0.2s ease all;\n input:focus ~ &,\n input:not(:placeholder-shown).input:not(:focus) ~ .label {\n ", "\n }\n ", "\n"])), getColor('midGrey'), focusCSS, function (_a) {
var focused = _a.focused;
return focused && focusCSS;
});
var ControlsSt = styled(Inline)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n z-index: 501;\n position: absolute;\n right: 4px;\n width: min-content;\n margin: auto 0;\n"], ["\n z-index: 501;\n position: absolute;\n right: 4px;\n width: min-content;\n margin: auto 0;\n"])));
var InputWithLabel = function (_a) {
var label = _a.label, id = _a.id, disabled = _a.disabled, hasControls = _a.hasControls, _b = _a.shortenInput, shortenInput = _b === void 0 ? false : _b, value = _a.value, onConfirm = _a.onConfirm, onCancel = _a.onCancel, rest = __rest(_a, ["label", "id", "disabled", "hasControls", "shortenInput", "value", "onConfirm", "onCancel"]);
var _c = React.useState(false), focused = _c[0], setFocused = _c[1];
return (React.createElement(InputContainer, null,
shortenInput && (React.createElement(DisplayShortened, null,
React.createElement("p", null, shortenAddress(value)))),
React.createElement(InputSt, __assign({ id: id }, rest, { disabled: disabled, style: shortenInput ? { color: 'rgba(0, 0, 0, 0)' } : { color: 'inherit' }, value: value, onFocus: function () { return setFocused(true); } })),
label && React.createElement(LabelSt, { focused: focused }, label),
hasControls && focused && (React.createElement(ControlsSt, null,
React.createElement(IconButton, { color: "neonGreen", iconName: "check", label: "submit", onClick: function () { return onConfirm(); } }),
React.createElement(IconButton, { color: "neonCoral", iconName: "times", label: "cancel", onClick: function () { return onCancel(); } })))));
};
export default InputWithLabel;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=Input.js.map