@dtdot/lego 2.0.0-26 → 2.0.0-29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/components/Input/Input.component.d.ts +2 -0
  2. package/build/components/Input/Input.component.js +15 -2
  3. package/build/components/Loader/Loader.component.d.ts +7 -2
  4. package/build/components/Loader/Loader.component.js +28 -8
  5. package/package.json +1 -1
package/build/components/Input/Input.component.d.ts CHANGED
@@ -15,6 +15,8 @@ export interface IInputProps {
15
15
  'onBlur'?: () => void;
16
16
  'data-testid'?: string;
17
17
  'suggestions'?: SelectOption[];
18
+ 'loading'?: boolean;
19
+ 'loadingVariant'?: 'default' | 'background';
18
20
  }
19
21
  declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;
20
22
  export default Input;
package/build/components/Input/Input.component.js CHANGED
@@ -9,6 +9,7 @@ import ControlLabel from '../../shared/ControlLabel';
9
9
  import { ControlStyles } from '../../shared/ControlStyles';
10
10
  import useFormNode, { getValue } from '../Form/useFormNode.hook';
11
11
  import { OptionsPopper } from '../common/Options.component';
12
+ import Loader from '../Loader/Loader.component';
12
13
  const InputContainer = styled.div `
13
14
  position: relative;
14
15
  border-radius: 2px;
@@ -52,6 +53,16 @@ const ErrorInner = styled.div `
52
53
  align-items: center;
53
54
  cursor: pointer;
54
55
  `;
56
+ const LoadingContainer = styled.div `
57
+ position: absolute;
58
+ top: 0;
59
+ right: 0;
60
+ height: 100%;
61
+ width: 40px;
62
+ display: flex;
63
+ justify-content: center;
64
+ align-items: center;
65
+ `;
55
66
  const errorVariants = {
56
67
  show: { opacity: 1, x: 10 },
57
68
  };
@@ -63,7 +74,7 @@ const messageVariants = {
63
74
  errorFocus: { opacity: 1, y: -4 },
64
75
  };
65
76
  const Input = React.forwardRef(function ForwardRefInput(props, ref) {
66
- const { label, name, description, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-testid': dataTestId, suggestions, } = props;
77
+ const { label, name, description, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-testid': dataTestId, suggestions, loading, loadingVariant, } = props;
67
78
  const [isOpen, setIsOpen] = useState(false);
68
79
  const [isFocused, setIsFocused] = useState(false);
69
80
  const [referenceElement, setReferenceElement] = useState();
@@ -111,7 +122,9 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
111
122
  React.createElement(ErrorContainer, { animate: error ? 'show' : undefined, style: { opacity: 0 }, variants: errorVariants, transition: { type: 'spring', duration: 0.3 }, "data-testid": 'error-indicator' },
112
123
  React.createElement(ErrorInner, null,
113
124
  React.createElement(FontAwesomeIcon, { icon: faExclamationCircle }))),
114
- error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-testid": 'error-message' }, error))),
125
+ error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-testid": 'error-message' }, error)),
126
+ loading && (React.createElement(LoadingContainer, null,
127
+ React.createElement(Loader, { size: 'sm', variant: loadingVariant })))),
115
128
  splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement("span", { key: index },
116
129
  index !== 0 && React.createElement("br", null),
117
130
  line))))),
package/build/components/Loader/Loader.component.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  /// <reference types="react" />
2
+ export interface BaseLoaderProps {
3
+ variant?: 'default' | 'background';
4
+ size: 'sm' | 'md';
5
+ }
2
6
  export interface LoaderProps {
3
- variant?: 'page-loader' | 'default';
7
+ variant?: 'page-loader' | 'default' | 'background';
8
+ size?: 'sm' | 'md';
4
9
  }
5
- declare const Loader: ({ variant }: LoaderProps) => JSX.Element;
10
+ declare const Loader: ({ variant, size }: LoaderProps) => JSX.Element;
6
11
  export default Loader;
package/build/components/Loader/Loader.component.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useMemo } from 'react';
2
2
  import { motion } from 'framer-motion';
3
3
  import styled from 'styled-components';
4
4
  import colours from '../../colours/colours';
@@ -47,15 +47,35 @@ const loadingCircleTransition = {
47
47
  repeatType: 'reverse',
48
48
  ease: 'easeInOut',
49
49
  }; // Framer motion isn't accepting 'repeatType' but animation breaks without it
50
- const BaseLoader = () => (React.createElement(motion.div, { style: loadingContainer, variants: loadingContainerVariants, initial: 'start', animate: 'end', "data-testid": 'loader' },
51
- React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
52
- React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition }),
53
- React.createElement(motion.span, { style: loadingCircle, variants: loadingCircleVariants, transition: loadingCircleTransition })));
54
- const Loader = ({ variant = 'default' }) => {
50
+ const BaseLoader = ({ size, variant }) => {
51
+ const loadingCircleWithSize = useMemo(() => {
52
+ const sizePx = size === 'md' ? '10px' : '5px';
53
+ return {
54
+ ...loadingCircle,
55
+ width: sizePx,
56
+ height: sizePx,
57
+ backgroundColor: variant === 'default' ? colours.grey30 : colours.grey50,
58
+ };
59
+ }, [size, variant]);
60
+ const loadingContainerWithSize = useMemo(() => {
61
+ const widthPx = size === 'md' ? '40px' : '20px';
62
+ const heightPx = size === 'md' ? '26px' : '13px';
63
+ return {
64
+ ...loadingContainer,
65
+ width: widthPx,
66
+ height: heightPx,
67
+ };
68
+ }, [size]);
69
+ return (React.createElement(motion.div, { style: loadingContainerWithSize, variants: loadingContainerVariants, initial: 'start', animate: 'end', "data-testid": 'loader' },
70
+ React.createElement(motion.span, { style: loadingCircleWithSize, variants: loadingCircleVariants, transition: loadingCircleTransition }),
71
+ React.createElement(motion.span, { style: loadingCircleWithSize, variants: loadingCircleVariants, transition: loadingCircleTransition }),
72
+ React.createElement(motion.span, { style: loadingCircleWithSize, variants: loadingCircleVariants, transition: loadingCircleTransition })));
73
+ };
74
+ const Loader = ({ variant = 'default', size = 'md' }) => {
55
75
  if (variant === 'page-loader') {
56
76
  return (React.createElement(PageLoaderContainer, null,
57
- React.createElement(BaseLoader, null)));
77
+ React.createElement(BaseLoader, { size: size })));
58
78
  }
59
- return React.createElement(BaseLoader, null);
79
+ return React.createElement(BaseLoader, { size: size, variant: variant });
60
80
  };
61
81
  export default Loader;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dtdot/lego",
3
- "version": "2.0.0-26",
3
+ "version": "2.0.0-29",
4
4
  "description": "Some reusable components for building my applications",
5
5
  "main": "build/index.js",
6
6
  "scripts": {