blockstack-ui
Version:
Blockstack UI components built with css-in-js and styled-system.
219 lines (193 loc) • 7.35 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.StaticField = exports.Label = exports.Field = void 0;
require("core-js/modules/es6.string.link");
require("core-js/modules/es6.object.assign");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
require("core-js/modules/es6.function.bind");
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireDefault(require("react"));
var _index = require("../../index");
var _copy = require("../copy");
var _OpenInNewIcon = _interopRequireDefault(require("mdi-react/OpenInNewIcon"));
var _reactPowerplug = require("react-powerplug");
var Link = function Link(_ref) {
var value = _ref.value,
_ref$text = _ref.text,
text = _ref$text === void 0 ? 'View in Explorer' : _ref$text,
rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["value", "text"]);
return _react.default.createElement(_reactPowerplug.Hover, null, function (_ref2) {
var hovered = _ref2.hovered,
bind = _ref2.bind;
return _react.default.createElement(_index.Flex, (0, _extends2.default)({
color: "blue.medium",
opacity: hovered ? 1 : 0.5,
target: "_blank",
alignItems: "center",
justifyContent: "center",
transition: 1,
cursor: "pointer"
}, rest, bind), _react.default.createElement(_index.Tooltip, {
text: text
}, _react.default.createElement(_index.Flex, {
p: 1
}, _react.default.createElement(_OpenInNewIcon.default, {
size: 20
}))));
});
};
var Label = function Label(_ref3) {
var rest = Object.assign({}, _ref3);
return _react.default.createElement(_index.Type, (0, _extends2.default)({
pb: 2,
fontWeight: 600,
fontSize: 1,
is: "label"
}, rest));
};
exports.Label = Label;
var Message = function Message(_ref4) {
var children = _ref4.children,
rest = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["children"]);
return _react.default.createElement(_index.Box, (0, _extends2.default)({
pb: 3
}, rest), _react.default.createElement(_index.Type, {
fontSize: 1,
color: "blue.medium" // TODO: allow to be changed
}, children));
};
var LabelComponent = function LabelComponent(_ref5) {
var hint = _ref5.hint,
required = _ref5.required,
error = _ref5.error,
label = _ref5.label,
message = _ref5.message,
_ref5$errorProps = _ref5.errorProps,
errorProps = _ref5$errorProps === void 0 ? {} : _ref5$errorProps,
_ref5$messageProps = _ref5.messageProps,
messageProps = _ref5$messageProps === void 0 ? {} : _ref5$messageProps,
_ref5$labelProps = _ref5.labelProps,
labelProps = _ref5$labelProps === void 0 ? {} : _ref5$labelProps,
rest = (0, _objectWithoutPropertiesLoose2.default)(_ref5, ["hint", "required", "error", "label", "message", "errorProps", "messageProps", "labelProps"]);
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_index.Flex, (0, _extends2.default)({
justifyContent: ['flex-start', 'space-between'],
alignItems: ['flex-start', 'center'],
flexDirection: ['column', 'row'],
width: 1
}, rest), _react.default.createElement(Label, labelProps, label, hint ? _react.default.createElement(_index.Type, {
pl: 1,
fontSize: 1,
fontWeight: 400,
color: "blue.medium" // TODO: allow to be changed
}, "(", hint, ")") : null, required ? _react.default.createElement(_index.Type, {
is: "em",
pl: 1,
color: "blue.medium" // TODO: allow to be changed
,
fontSize: 1,
fontWeight: 400
}, "(required)") : null), error ? _react.default.createElement(_index.Type, (0, _extends2.default)({
color: "#F27D66" // TODO: allow to be changed
,
textAlign: "right",
pb: 2,
fontWeight: 500,
fontSize: 0
}, errorProps), error) : null), message ? _react.default.createElement(Message, messageProps, message) : null);
};
/**
* Field
* @param {any} label - The label (typically a string)
* @param {any} overlay - Text to overlay input eg STX
* @param {string} value - text value
* @param {string} link - a related url to expose on hover
* @param {string} error - an error message
* @param {boolean} disabled
* @param {boolean} copy - to enable copy and paste
* @param {object} inputProps - the spread of the remaining props to pass to the input component
* @param {string} variant - to enable copy and paste
*/
var Field = function Field(_ref6) {
var label = _ref6.label,
overlay = _ref6.overlay,
_ref6$disabled = _ref6.disabled,
disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
copy = _ref6.copy,
value = _ref6.value,
variant = _ref6.variant,
link = _ref6.link,
error = _ref6.error,
required = _ref6.required,
hint = _ref6.hint,
message = _ref6.message,
inputProps = (0, _objectWithoutPropertiesLoose2.default)(_ref6, ["label", "overlay", "disabled", "copy", "value", "variant", "link", "error", "required", "hint", "message"]);
var disabledProps = disabled ? {
disabled: disabled,
bg: 'blue.light' // TODO: allow to be changed
} : {};
var errorProps = error ? {
borderColor: '#F27D66',
// TODO: allow to be changed
boxShadow: 'focused.error'
} : {};
return _react.default.createElement(_reactPowerplug.Hover, null, function (_ref7) {
var hovered = _ref7.hovered,
bind = _ref7.bind;
return _react.default.createElement(_index.Flex, (0, _extends2.default)({}, bind, {
flexDirection: 'column',
pb: 5,
width: 1,
flexGrow: 1,
flexShrink: 0
}), _react.default.createElement(LabelComponent, {
label: label,
error: error,
hint: hint,
required: required,
message: message
}), _react.default.createElement(_index.Flex, {
position: "relative",
width: "100%"
}, copy && hovered ? _react.default.createElement(_copy.Copy, {
position: "absolute",
height: "100%",
value: value,
right: 0
}) : null, link && hovered ? _react.default.createElement(Link, {
position: "absolute",
height: "100%",
value: link,
right: 40
}) : null, overlay ? _react.default.createElement(_index.Type, {
pr: 4,
position: "absolute",
height: '100%',
display: "inline-flex",
alignItems: "center",
top: "0",
right: 0,
color: "blue.medium" // TODO: allow to be changed
}, overlay) : null, _react.default.createElement(_index.Input, (0, _extends2.default)({
width: "100%",
flexGrow: 1,
value: value,
pr: copy && link && hovered ? 80 : (copy || link) && hovered ? 38 : 4,
variant: variant
}, disabledProps, errorProps, inputProps))));
});
};
exports.Field = Field;
var StaticField = function StaticField(_ref8) {
var rest = Object.assign({}, _ref8);
return _react.default.createElement(Field, (0, _extends2.default)({
width: 1,
disabled: true,
copy: true
}, rest));
};
exports.StaticField = StaticField;
Field.Label = Label;
Field.LabelAdvanced = LabelComponent;
Field.Message = Message;
Field.Link = Link;