@hhgtech/hhg-components
Version:
Hello Health Group common components
263 lines (231 loc) • 8.78 kB
JavaScript
import { _ as __rest } from './tslib.es6-ea4dfe68.js';
import React__default, { useState } from 'react';
import styled from '@emotion/styled';
import { M as MediaQueries } from './utils-cb7242c7.js';
import { theme } from './miscTheme.js';
import { L as Label, S as StyledDisplayIcon, a as StyledActionIcon, b as StyledErrorLabel } from './index-cf3c860d.js';
const StyledInput = styled.div `
position: relative;
width: 100%;
&[data-has-error] {
input {
border-color: ${theme.colors.red700};
}
}
input {
width: 100%;
padding: 12px 16px;
border: solid 1px ${theme.colors.gray200};
border-radius: ${theme.borderRadius};
&:active,
&:focus,
.focused & {
border-color: ${theme.colors.primaryBase};
box-shadow: 0px 0px 2px 2px ${theme.colors.primary200};
}
&:disabled {
background-color: ${theme.colors.gray100};
cursor: not-allowed;
}
}
&[data-has-action-icon] {
input {
padding: 12px 48px 12px 16px;
}
}
&[data-has-display-icon] {
input {
padding: 12px 16px 12px 48px;
}
}
&[data-has-action-icon][data-has-display-icon] {
input {
padding: 12px 48px;
}
}
&[data-size='lg'] {
input {
font-size: 16px;
font-weight: ${theme.sizes.fwRegular};
${MediaQueries.mbDown} {
font-size: 22px;
line-height: 1.2;
}
${MediaQueries.mbUp} {
font-size: 26px;
line-height: 1.2;
}
}
}
&[data-size='md'] {
input {
font-weight: ${theme.sizes.fwRegular};
${MediaQueries.mbDown} {
font-size: 14px;
line-height: 1.2;
}
${MediaQueries.mbUp} {
font-size: 16px;
line-height: 1.2;
}
}
}
&[data-size='sm'] {
input {
font-weight: ${theme.sizes.fwRegular};
${MediaQueries.mbDown} {
font-size: 13px;
line-height: 1.5;
}
${MediaQueries.mbUp} {
font-size: 13px;
line-height: 1.5;
}
}
}
`;
/**
* @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
*/
const PureInput = React__default.forwardRef((_a, ref) => {
var { name, errorMessage, autoComplete = 'off', defaultValue, actionIcon: ActionIcon, displayIcon: DisplayIcon, isDeleteAction, onActionClick, label, placeholder, className, onChange, onKeyPress, isDisabled, CustomInput, size, style, autoFocus, type = 'text', isNumerousKeyboard = false, onFocus, enterKeyHint, nativeOnChange } = _a, other = __rest(_a, ["name", "errorMessage", "autoComplete", "defaultValue", "actionIcon", "displayIcon", "isDeleteAction", "onActionClick", "label", "placeholder", "className", "onChange", "onKeyPress", "isDisabled", "CustomInput", "size", "style", "autoFocus", "type", "isNumerousKeyboard", "onFocus", "enterKeyHint", "nativeOnChange"]);
const [localValue, setLocalValue] = useState(defaultValue);
const handleOnChange = (v) => {
setLocalValue(v);
onChange(v);
};
const handleOnActionClick = () => {
var _a;
if (isDeleteAction) {
setLocalValue('');
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
}
onActionClick && onActionClick();
};
return (React__default.createElement(StyledInput, { "data-size": size, className: className, "data-has-action-icon": !!ActionIcon || undefined, "data-has-display-icon": !!DisplayIcon || undefined, "data-has-error": (errorMessage && errorMessage.length > 0) || undefined, style: style },
label && (React__default.createElement(Label, { size: "label2", htmlFor: name, className: "inputLabel" }, label)),
React__default.createElement("div", { style: { position: 'relative' } },
CustomInput ? (CustomInput) : (React__default.createElement("input", Object.assign({ id: name, name: name, placeholder: placeholder, onChange: nativeOnChange !== null && nativeOnChange !== void 0 ? nativeOnChange : ((e) => handleOnChange(e.target.value)), onKeyPress: onKeyPress, type: type, "aria-label": type, disabled: isDisabled, value: localValue, autoComplete: autoComplete, ref: ref, autoFocus: autoFocus, inputMode: isNumerousKeyboard || type === 'number' ? 'numeric' : type, pattern: isNumerousKeyboard ? '[0-9]*' : '.*', onFocus: onFocus, enterKeyHint: enterKeyHint }, other))),
DisplayIcon && (React__default.createElement(StyledDisplayIcon, { className: "displayIcon" }, DisplayIcon)),
ActionIcon && (React__default.createElement(StyledActionIcon, { className: "actionIcon", onClick: handleOnActionClick }, ActionIcon))),
errorMessage && errorMessage.length > 0 && (React__default.createElement(StyledErrorLabel, { className: "errorLabel" }, errorMessage))));
});
PureInput.displayName = 'PureInput';
const StyledCheckbox = styled.div `
display: flex;
cursor: pointer;
&[data-theme='marryBaby'] {
input {
width: 20px;
height: 20px;
border: 1.3px solid ${theme.mbColors.midGray};
border-radius: 9px;
cursor: inherit;
transition: border-color 0.4s, box-shadow 0.4s;
&:hover,
&:active {
border-color: ${theme.mbColors.cobalt};
box-shadow: 0 0 2px 2px ${theme.mbColors.cobalt};
}
&:focus-visible {
border: 2px solid ${theme.mbColors.cobalt};
}
&:checked {
border: 0;
background: ${theme.mbColors.cobalt}
url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4L3.45455 6L8 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
no-repeat center center;
}
}
label {
max-width: 15rem;
margin-left: 8px;
width: calc(100% - 24px);
cursor: inherit;
font-weight: 600;
font-size: 12px;
line-height: 20px;
letter-spacing: -0.2px;
color: ${theme.mbColors.gray};
}
}
input {
width: 20px;
height: 20px;
border: solid 1px ${theme.colors.gray500};
border-radius: 2px;
cursor: inherit;
transition: border-color 0.4s, box-shadow 0.4s;
&:hover,
&:active {
border-color: ${theme.colors.primaryBase};
box-shadow: 0 0 2px 2px ${theme.colors.primary200};
}
&:focus-visible {
border: 2px solid ${theme.colors.primaryActive};
}
&:checked {
border: 0;
background: ${theme.colors.primaryBase}
url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L4.125 8L1 4.81819' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
no-repeat center center;
}
}
label {
max-width: 15rem;
margin-left: 8px;
font-weight: ${theme.sizes.fwRegular};
width: calc(100% - 24px);
cursor: inherit;
${MediaQueries.mbDown} {
font-size: 14px;
line-height: 24px;
}
${MediaQueries.mbUp} {
font-size: 16px;
line-height: 22px;
}
}
&[data-is-rectangle] > input {
position: relative;
width: unset;
height: unset;
padding: 5px 12px;
border: 1px solid ${theme.colors.neutral100};
border-radius: 32px;
&::after {
color: ${theme.colors.gray800};
content: attr(data-label-text);
font-size: 13px;
}
&:checked {
border-color: ${theme.colors.primary50};
&::after {
color: ${theme.colors.primaryBase};
}
}
&:checked {
background: ${theme.colors.primary50};
}
}
&[data-disabled] {
color: ${theme.colors.gray300};
cursor: not-allowed;
input {
border-color: ${theme.colors.gray300};
&:hover {
border-color: ${theme.colors.gray300};
box-shadow: none;
}
}
}
`;
/**
* @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
*/
const Checkbox = ({ label, name, checked, className, isDisabled, onChange, value, isRectangle, inputDataTestId, siteType, }) => {
return (React__default.createElement(StyledCheckbox, { className: className, "data-disabled": isDisabled || undefined, "data-is-rectangle": isRectangle || undefined, "data-label-text": label, "data-theme": siteType },
React__default.createElement("input", { type: "checkbox", checked: checked, name: name, onChange: () => onChange(value, !checked), disabled: isDisabled, value: value, id: `${name}-${value}`, "data-label-text": label, "data-testid": inputDataTestId }),
!isRectangle && React__default.createElement("label", { htmlFor: `${name}-${value}` }, label)));
};
export { Checkbox as C, PureInput as P };