groundfloor-react-ui 1.0.10 → 1.0.13
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.
- package/README.md +6 -1
- package/assets/icons/default.svg +1 -0
- package/components/Form/FormComponent.js +6 -1
- package/components/Form/HeaderComponent.js +3 -3
- package/components/GroupButtons/ButtonPopup.js +0 -1
- package/components/Icon/Icon.js +2 -0
- package/components/Inputs/CheckBoxInput.js +27 -7
- package/components/Inputs/DateSelect.js +212 -213
- package/components/Inputs/DropdownSelect.js +2 -0
- package/components/Inputs/PasswordInput.js +6 -3
- package/components/Inputs/TextInput.js +12 -0
- package/components/Overlay/Overlay.js +0 -1
- package/components/Tooltip/Tooltip.js +0 -1
- package/dist/index.es.js +76 -70
- package/dist/index.js +68 -62
- package/package.json +1 -1
|
@@ -7,7 +7,6 @@ import getDefaultStyles from '../constants/utils';
|
|
|
7
7
|
import { Label } from '../Label';
|
|
8
8
|
import { Icon } from '../Icon';
|
|
9
9
|
import { useState } from 'react';
|
|
10
|
-
import { useEffect } from 'react';
|
|
11
10
|
|
|
12
11
|
const TextWrapper = styled.div`
|
|
13
12
|
//Set the styles from the default styles object
|
|
@@ -42,6 +41,8 @@ const TextWrapper = styled.div`
|
|
|
42
41
|
|
|
43
42
|
const Input = styled.input`
|
|
44
43
|
width: inherit;
|
|
44
|
+
-webkit-text-security: ${({ showEye }) => showEye ? 'none' : 'disc'} ;
|
|
45
|
+
|
|
45
46
|
//Set the styles from the default styles object
|
|
46
47
|
${({ theme, defaultInputStyle }) => {
|
|
47
48
|
return getDefaultStyles(theme, defaultInputStyle);
|
|
@@ -53,6 +54,7 @@ const Input = styled.input`
|
|
|
53
54
|
.sc-furwcr bxRAoq {
|
|
54
55
|
color: ${defaultThemeColor.variant['neutral-3']};
|
|
55
56
|
}
|
|
57
|
+
|
|
56
58
|
`;
|
|
57
59
|
|
|
58
60
|
const inline = css`
|
|
@@ -120,7 +122,7 @@ export const PasswordInput = ({
|
|
|
120
122
|
<div
|
|
121
123
|
style={{
|
|
122
124
|
display: 'flex',
|
|
123
|
-
justifyContent: '
|
|
125
|
+
justifyContent: 'start',
|
|
124
126
|
alignItems: 'start',
|
|
125
127
|
}}
|
|
126
128
|
>
|
|
@@ -135,7 +137,8 @@ export const PasswordInput = ({
|
|
|
135
137
|
>
|
|
136
138
|
<Input
|
|
137
139
|
inputStyle={inputStyle}
|
|
138
|
-
type={
|
|
140
|
+
type={'text'}
|
|
141
|
+
showEye={showEye}
|
|
139
142
|
defaultInputStyle={'input-wrapper'}
|
|
140
143
|
{...props}
|
|
141
144
|
/>
|
|
@@ -32,6 +32,8 @@ const TextWrapper = styled.div`
|
|
|
32
32
|
|
|
33
33
|
// custom styles
|
|
34
34
|
${({ textBoxStyle }) => textBoxStyle}
|
|
35
|
+
|
|
36
|
+
background-color: ${({ isDisabled }) => isDisabled ? defaultThemeColor.variant['neutral-5'] : defaultThemeColor.bgColor}
|
|
35
37
|
`;
|
|
36
38
|
|
|
37
39
|
const Input = styled.input`
|
|
@@ -47,6 +49,7 @@ const Input = styled.input`
|
|
|
47
49
|
.sc-furwcr bxRAoq {
|
|
48
50
|
color: ${defaultThemeColor.variant['neutral-3']};
|
|
49
51
|
}
|
|
52
|
+
background-color: ${({ isDisabled }) => isDisabled ? defaultThemeColor.variant['neutral-5'] : defaultThemeColor.bgColor}
|
|
50
53
|
`;
|
|
51
54
|
|
|
52
55
|
const inline = css`
|
|
@@ -81,6 +84,7 @@ export const TextInput = ({
|
|
|
81
84
|
iconAfter,
|
|
82
85
|
isValid,
|
|
83
86
|
type,
|
|
87
|
+
isDisabled,
|
|
84
88
|
...props
|
|
85
89
|
}) => {
|
|
86
90
|
return (
|
|
@@ -113,6 +117,7 @@ export const TextInput = ({
|
|
|
113
117
|
<TextWrapper
|
|
114
118
|
required={required}
|
|
115
119
|
themeColor={defaultThemeColor}
|
|
120
|
+
isDisabled={isDisabled}
|
|
116
121
|
textBoxStyle={textBoxStyle}
|
|
117
122
|
isValid={isValid}
|
|
118
123
|
theme={defaultStyles}
|
|
@@ -124,6 +129,8 @@ export const TextInput = ({
|
|
|
124
129
|
inputStyle={inputStyle}
|
|
125
130
|
type={type}
|
|
126
131
|
defaultInputStyle={'input-wrapper'}
|
|
132
|
+
isDisabled={isDisabled}
|
|
133
|
+
disabled={isDisabled}
|
|
127
134
|
{...props}
|
|
128
135
|
/>
|
|
129
136
|
<div className='input-icon'>{iconAfter}</div>
|
|
@@ -182,6 +189,10 @@ TextInput.propTypes = {
|
|
|
182
189
|
* input type i.e:- text, password
|
|
183
190
|
*/
|
|
184
191
|
type: PropTypes.string,
|
|
192
|
+
/**
|
|
193
|
+
* input field disabled or not
|
|
194
|
+
*/
|
|
195
|
+
isDisabled: PropTypes.bool,
|
|
185
196
|
};
|
|
186
197
|
|
|
187
198
|
TextInput.defaultProps = {
|
|
@@ -198,4 +209,5 @@ TextInput.defaultProps = {
|
|
|
198
209
|
labelStyle: {},
|
|
199
210
|
inputStyle: {},
|
|
200
211
|
type: 'text',
|
|
212
|
+
isDisabled: false
|
|
201
213
|
};
|
|
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import defaultStyles from '../constants/defaultStyle';
|
|
5
5
|
import { usePopperTooltip } from 'react-popper-tooltip';
|
|
6
|
-
// import 'react-popper-tooltip/dist/styles.css';
|
|
7
6
|
|
|
8
7
|
/**
|
|
9
8
|
* Primary UI component for user interaction
|
|
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import defaultStyles from '../constants/defaultStyle';
|
|
5
5
|
import { usePopperTooltip } from 'react-popper-tooltip';
|
|
6
|
-
// import 'react-popper-tooltip/dist/styles.css';
|
|
7
6
|
|
|
8
7
|
/**
|
|
9
8
|
* Primary UI component for user interaction
|