groundfloor-react-ui 1.0.16 → 1.0.19

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 (14) hide show
  1. package/components/Button/PrimaryButton.js +15 -8
  2. package/components/Button/SecondaryButton.js +11 -9
  3. package/components/Inputs/CheckBoxInput.js +34 -18
  4. package/components/Inputs/DateSelect.js +22 -17
  5. package/components/Inputs/DropdownSelect.js +31 -20
  6. package/components/Inputs/NumericInput.js +66 -63
  7. package/components/Inputs/PasswordInput.js +36 -27
  8. package/components/Inputs/TextInput.js +43 -28
  9. package/components/Inputs/TimeInput.js +95 -94
  10. package/components/Modal/ModalComp.js +6 -1
  11. package/components/constants/defaultStyle.js +0 -1
  12. package/dist/index.es.js +223 -216
  13. package/dist/index.js +213 -206
  14. package/package.json +1 -1
package/components/Inputs/NumericInput.js CHANGED
@@ -1,12 +1,12 @@
1
- import React, { useState } from 'react';
2
1
  import PropTypes from 'prop-types';
3
- import styled, { css, useTheme } from 'styled-components';
2
+ import React from 'react';
3
+ import styled, { css } from 'styled-components';
4
4
  import defaultThemeColor from '../constants/defaultThemeColor';
5
5
 
6
6
  const TextBox = styled.div`
7
7
  border: 1px solid
8
8
  ${({ theme }) =>
9
- theme ? defaultThemeColor.border : theme.variant['primary-1']};
9
+ theme.border};
10
10
  border-radius: 4px;
11
11
  padding: 6.5px 12px;
12
12
  display: flex;
@@ -27,7 +27,7 @@ const TextBox = styled.div`
27
27
  `;
28
28
 
29
29
  TextBox.defaultProps = {
30
- theme: defaultThemeColor,
30
+ theme: defaultThemeColor,
31
31
  };
32
32
 
33
33
  const Input = styled.input`
@@ -45,7 +45,7 @@ const Input = styled.input`
45
45
  `;
46
46
 
47
47
  Input.defaultProps = {
48
- theme: defaultThemeColor,
48
+ theme: defaultThemeColor,
49
49
  };
50
50
 
51
51
  const requiredAsterisk = css`
@@ -69,7 +69,7 @@ const Label = styled.label`
69
69
  `;
70
70
 
71
71
  Label.defaultProps = {
72
- theme: defaultThemeColor,
72
+ theme: defaultThemeColor,
73
73
  };
74
74
 
75
75
  const inline = css`
@@ -86,70 +86,73 @@ const Form = styled.div`
86
86
  `;
87
87
 
88
88
  Form.defaultProps = {
89
- theme: defaultThemeColor,
89
+ theme: defaultThemeColor,
90
90
  };
91
91
  export const NumericInput = ({
92
- label,
93
- inputValue,
94
- inputStyle,
95
- iconBefore,
96
- iconAfter,
97
- onChange,
98
- ...props
92
+ label,
93
+ inputValue,
94
+ inputStyle,
95
+ iconBefore,
96
+ iconAfter,
97
+ onChange,
98
+ theme,
99
+ ...props
99
100
  }) => {
100
- const handleChange = (e) => {
101
- const re = /^[0-9\b.-]+$/;
102
- const { value } = e.currentTarget;
103
- if (value === '' || re.test(value)) {
104
- onChange(value);
105
- }
106
- };
107
-
108
- return (
109
- <Form {...props}>
110
- {label.length > 0 && <Label {...props}>{label}</Label>}
111
- <div>
112
- <TextBox {...props}>
113
- <div className='input-icon'>{iconBefore}</div>
114
- <Input
115
- {...props}
116
- inputStyle={inputStyle}
117
- value={inputValue}
118
- onChange={handleChange}
119
- type='number'
120
- />
121
- <div className='input-icon'>{iconAfter}</div>
122
- </TextBox>
123
- </div>
124
- </Form>
125
- );
101
+ const handleChange = (e) => {
102
+ const re = /^[0-9\b.-]+$/;
103
+ const { value } = e.currentTarget;
104
+ if (value === '' || re.test(value)) {
105
+ onChange(value);
106
+ }
107
+ };
108
+
109
+ return (
110
+ <Form {...props}>
111
+ {label.length > 0 && <Label {...props}>{label}</Label>}
112
+ <div>
113
+ <TextBox {...props}>
114
+ <div className='input-icon'>{iconBefore}</div>
115
+ <Input
116
+ {...props}
117
+ inputStyle={inputStyle}
118
+ value={inputValue}
119
+ onChange={handleChange}
120
+ type='number'
121
+ />
122
+ <div className='input-icon'>{iconAfter}</div>
123
+ </TextBox>
124
+ </div>
125
+ </Form>
126
+ );
126
127
  };
127
128
 
128
129
  NumericInput.propTypes = {
129
- /**
130
- * Theme props
131
- */
132
- theme: PropTypes.object,
133
- /**
134
- * Label of Input
135
- */
136
- label: PropTypes.string,
137
- /**
138
- * Should label be inline?
139
- */
140
- labelInline: PropTypes.bool,
141
- /**
142
- * Value Prop
143
- */
144
- inputValue: PropTypes.any,
145
-
146
- inputStyle: PropTypes.object,
130
+ /**
131
+ * Theme props
132
+ */
133
+ theme: PropTypes.object,
134
+ /**
135
+ * Label of Input
136
+ */
137
+ label: PropTypes.string,
138
+ /**
139
+ * Should label be inline?
140
+ */
141
+ labelInline: PropTypes.bool,
142
+ /**
143
+ * Value Prop
144
+ */
145
+ inputValue: PropTypes.any,
146
+ /**
147
+ * custom style of input element
148
+ */
149
+ inputStyle: PropTypes.object,
147
150
  };
148
151
 
149
152
  NumericInput.defaultProps = {
150
- theme: defaultThemeColor,
151
- label: '',
152
- labelInline: false,
153
- inputStyle: {},
154
- inputValue: null,
153
+ theme: defaultThemeColor,
154
+ label: '',
155
+ labelInline: false,
156
+ inputStyle: {},
157
+ inputValue: null,
155
158
  };
package/components/Inputs/PasswordInput.js CHANGED
@@ -1,37 +1,36 @@
1
- import React from 'react';
2
1
  import PropTypes from 'prop-types';
2
+ import React, { useState } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
- import defaultThemeColor from '../constants/defaultThemeColor';
5
4
  import defaultStyles from '../constants/defaultStyle';
5
+ import defaultThemeColor from '../constants/defaultThemeColor';
6
6
  import getDefaultStyles from '../constants/utils';
7
- import { Label } from '../Label';
8
7
  import { Icon } from '../Icon';
9
- import { useState } from 'react';
8
+ import { Label } from '../Label';
10
9
 
11
10
  const TextWrapper = styled.div`
12
11
  //Set the styles from the default styles object
13
- ${({ theme, defaultWrapperStyle }) => {
14
- return getDefaultStyles(theme, defaultWrapperStyle);
12
+ ${({ inBuiltCss, defaultWrapperStyle }) => {
13
+ return getDefaultStyles(inBuiltCss, defaultWrapperStyle);
15
14
  }}
16
15
 
17
- border: ${({ isValid, themeColor }) =>
16
+ border: ${({ isValid, theme }) =>
18
17
  !isValid
19
- ? '1px solid ' + themeColor.variant['error']
20
- : '1px solid ' + defaultThemeColor.border};
18
+ ? '1px solid ' + theme.variant['error']
19
+ : '1px solid ' + theme.border};
21
20
 
22
21
  .input-icon svg path {
23
- fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
22
+ fill: ${({ theme }) => theme.variant['neutral-1']};
24
23
  }
25
24
  .input-icon {
26
25
  cursor: pointer;
27
26
  }
28
27
 
29
28
  &:focus-within {
30
- border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
29
+ border: 1px solid ${({ theme }) => theme.variant['primary-1']};
31
30
  outline: none;
32
31
 
33
32
  .input-icon svg path {
34
- fill: ${({ themeColor }) => themeColor.variant['primary-1']};
33
+ fill: ${({ theme }) => theme.variant['primary-1']};
35
34
  }
36
35
  }
37
36
 
@@ -39,24 +38,30 @@ const TextWrapper = styled.div`
39
38
  ${({ textBoxStyle }) => textBoxStyle}
40
39
  `;
41
40
 
41
+ TextWrapper.defaultProps = {
42
+ theme: defaultThemeColor,
43
+ };
44
+
42
45
  const Input = styled.input`
43
46
  width: inherit;
44
47
  -webkit-text-security: ${({ showEye }) => showEye ? 'none' : 'disc'} ;
45
48
 
46
49
  //Set the styles from the default styles object
47
- ${({ theme, defaultInputStyle }) => {
48
- return getDefaultStyles(theme, defaultInputStyle);
50
+ ${({ inBuiltCss, defaultInputStyle }) => {
51
+ return getDefaultStyles(inBuiltCss, defaultInputStyle);
49
52
  }}
50
53
 
51
54
  // custom styles
52
55
  ${({ inputStyle }) => inputStyle}
53
56
 
54
57
  .sc-furwcr bxRAoq {
55
- color: ${defaultThemeColor.variant['neutral-3']};
58
+ color: ${({ theme }) => theme.variant['neutral-3']};
56
59
  }
57
60
 
58
61
  `;
59
-
62
+ Input.defaultProps = {
63
+ theme: defaultThemeColor,
64
+ };
60
65
  const inline = css`
61
66
  display: flex;
62
67
  gap: 7px;
@@ -66,18 +71,19 @@ const inline = css`
66
71
  const Form = styled.div`
67
72
  ${({ labelInline }) => (labelInline ? inline : null)}
68
73
  .err-text {
69
- color: ${({ themeColor }) => themeColor.variant['error']};
74
+ color: ${({ theme }) => theme.variant['error']};
70
75
  margin-top: 5px;
71
76
  font-size: 10px;
72
77
  }
73
78
  `;
74
79
 
80
+
75
81
  Form.defaultProps = {
76
- themeColor: defaultThemeColor,
82
+ theme: defaultThemeColor,
77
83
  };
78
84
 
79
85
  export const PasswordInput = ({
80
- themeColor,
86
+ theme,
81
87
  passwordRules,
82
88
  textBoxStyle,
83
89
  labelStyle,
@@ -93,7 +99,8 @@ export const PasswordInput = ({
93
99
  const [showEye, setShowEye] = useState(false);
94
100
 
95
101
  return (
96
- <Form labelInline={labelInline} {...props}>
102
+ <Form labelInline={labelInline} inBuiltCss={defaultStyles} {...props}
103
+ >
97
104
  <div style={{ display: 'flex' }}>
98
105
  <Label
99
106
  customStyles={labelStyle}
@@ -112,7 +119,7 @@ export const PasswordInput = ({
112
119
  style={{
113
120
  marginLeft: '4px',
114
121
  marginRight: '5px',
115
- color: `${themeColor.variant['error']}`,
122
+ color: `${theme.variant['error']}`,
116
123
  }}
117
124
  >
118
125
  *
@@ -128,18 +135,20 @@ export const PasswordInput = ({
128
135
  >
129
136
  <TextWrapper
130
137
  required={required}
131
- themeColor={defaultThemeColor}
138
+ theme={theme}
132
139
  textBoxStyle={textBoxStyle}
133
140
  isValid={isValid}
134
- theme={defaultStyles}
135
141
  defaultWrapperStyle={'textbox-wrapper'}
142
+ inBuiltCss={defaultStyles}
136
143
  {...props}
137
144
  >
138
145
  <Input
139
146
  inputStyle={inputStyle}
140
147
  type={'text'}
141
148
  showEye={showEye}
149
+ theme={theme}
142
150
  defaultInputStyle={'input-wrapper'}
151
+ inBuiltCss={defaultStyles}
143
152
  {...props}
144
153
  />
145
154
  <div className='input-icon' onClick={() => setShowEye(!showEye)}>
@@ -157,11 +166,11 @@ PasswordInput.propTypes = {
157
166
  /**
158
167
  * Theme props of default in-built css
159
168
  */
160
- theme: PropTypes.object,
169
+ inBuiltCss: PropTypes.object,
161
170
  /**
162
171
  * Color props of default theme
163
172
  */
164
- themeColor: PropTypes.object,
173
+ theme: PropTypes.object,
165
174
  /**
166
175
  * Label of Input
167
176
  */
@@ -202,8 +211,8 @@ PasswordInput.propTypes = {
202
211
  };
203
212
 
204
213
  PasswordInput.defaultProps = {
205
- themeColor: defaultThemeColor,
206
- theme: defaultStyles,
214
+ theme: defaultThemeColor,
215
+ inBuiltCss: defaultStyles,
207
216
  label: '',
208
217
  required: false,
209
218
  isValid: true,
package/components/Inputs/TextInput.js CHANGED
@@ -1,46 +1,46 @@
1
- import React from 'react';
2
1
  import PropTypes from 'prop-types';
2
+ import React from 'react';
3
3
  import styled, { css } from 'styled-components';
4
- import defaultThemeColor from '../constants/defaultThemeColor';
5
4
  import defaultStyles from '../constants/defaultStyle';
5
+ import defaultThemeColor from '../constants/defaultThemeColor';
6
6
  import getDefaultStyles from '../constants/utils';
7
7
  import { Label } from '../Label';
8
8
 
9
9
  const TextWrapper = styled.div`
10
10
  //Set the styles from the default styles object
11
- ${({ theme, defaultWrapperStyle }) => {
12
- return getDefaultStyles(theme, defaultWrapperStyle);
11
+ ${({ inBuiltCss, defaultWrapperStyle }) => {
12
+ return getDefaultStyles(inBuiltCss, defaultWrapperStyle);
13
13
  }}
14
14
 
15
- border: ${({ isValid, themeColor }) =>
15
+ border: ${({ isValid, theme }) =>
16
16
  !isValid
17
- ? '1px solid ' + themeColor.variant['error']
18
- : '1px solid ' + defaultThemeColor.border};
17
+ ? '1px solid ' + theme.variant['error']
18
+ : '1px solid ' + theme.border};
19
19
 
20
20
  .input-icon svg path {
21
- fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
21
+ fill: ${({ theme }) => theme.variant['neutral-1']};
22
22
  }
23
23
 
24
24
  &:focus-within {
25
- border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
25
+ border: 1px solid ${({ theme }) => theme.variant['primary-1']};
26
26
  outline: none;
27
27
 
28
28
  .input-icon svg path {
29
- fill: ${({ themeColor }) => themeColor.variant['primary-1']};
29
+ fill: ${({ theme }) => theme.variant['primary-1']};
30
30
  }
31
31
  }
32
32
 
33
33
  // custom styles
34
34
  ${({ textBoxStyle }) => textBoxStyle}
35
35
 
36
- background-color: ${({ isDisabled }) => isDisabled ? defaultThemeColor.variant['neutral-5'] : defaultThemeColor.bgColor}
36
+ background-color: ${({ isDisabled, theme }) => isDisabled ? theme.variant['neutral-5'] : theme.bgColor}
37
37
  `;
38
38
 
39
39
  const Input = styled.input`
40
40
  width: inherit;
41
41
  //Set the styles from the default styles object
42
- ${({ theme, defaultInputStyle }) => {
43
- return getDefaultStyles(theme, defaultInputStyle);
42
+ ${({ inBuiltCss, defaultInputStyle }) => {
43
+ return getDefaultStyles(inBuiltCss, defaultInputStyle);
44
44
  }}
45
45
 
46
46
  // custom styles
@@ -49,7 +49,7 @@ const Input = styled.input`
49
49
  .sc-furwcr bxRAoq {
50
50
  color: ${defaultThemeColor.variant['neutral-3']};
51
51
  }
52
- background-color: ${({ isDisabled }) => isDisabled ? defaultThemeColor.variant['neutral-5'] : defaultThemeColor.bgColor}
52
+ background-color: ${({ isDisabled, theme }) => isDisabled ? theme.variant['neutral-5'] : theme.bgColor}
53
53
  `;
54
54
 
55
55
  const inline = css`
@@ -61,18 +61,17 @@ const inline = css`
61
61
  const Form = styled.div`
62
62
  ${({ labelInline }) => (labelInline ? inline : null)}
63
63
  .err-text {
64
- color: ${({ themeColor }) => themeColor.variant['error']};
64
+ color: ${({ theme }) => theme.variant['error']};
65
65
  margin-top: 5px;
66
66
  font-size: 10px;
67
67
  }
68
68
  `;
69
69
 
70
70
  Form.defaultProps = {
71
- themeColor: defaultThemeColor,
71
+ theme: defaultThemeColor,
72
72
  };
73
73
 
74
74
  export const TextInput = ({
75
- themeColor,
76
75
  textBoxStyle,
77
76
  labelStyle,
78
77
  inputStyle,
@@ -84,11 +83,13 @@ export const TextInput = ({
84
83
  iconAfter,
85
84
  isValid,
86
85
  type,
86
+ theme,
87
87
  isDisabled,
88
88
  ...props
89
89
  }) => {
90
+
90
91
  return (
91
- <Form labelInline={labelInline} {...props}>
92
+ <Form labelInline={labelInline} {...props} theme={theme}>
92
93
  <div style={{ display: 'flex' }}>
93
94
  <Label
94
95
  customStyles={labelStyle}
@@ -107,7 +108,7 @@ export const TextInput = ({
107
108
  <div
108
109
  style={{
109
110
  marginLeft: '4px',
110
- color: `${themeColor.variant['error']}`,
111
+ color: `${theme.variant['error']}`,
111
112
  }}
112
113
  >
113
114
  *
@@ -116,11 +117,11 @@ export const TextInput = ({
116
117
  </div>
117
118
  <TextWrapper
118
119
  required={required}
119
- themeColor={defaultThemeColor}
120
120
  isDisabled={isDisabled}
121
+ theme={theme}
121
122
  textBoxStyle={textBoxStyle}
122
123
  isValid={isValid}
123
- theme={defaultStyles}
124
+ inBuiltCss={defaultStyles}
124
125
  defaultWrapperStyle={'textbox-wrapper'}
125
126
  {...props}
126
127
  >
@@ -128,6 +129,7 @@ export const TextInput = ({
128
129
  <Input
129
130
  inputStyle={inputStyle}
130
131
  type={type}
132
+ theme={theme}
131
133
  defaultInputStyle={'input-wrapper'}
132
134
  isDisabled={isDisabled}
133
135
  disabled={isDisabled}
@@ -144,11 +146,7 @@ TextInput.propTypes = {
144
146
  /**
145
147
  * Theme props of default in-built css
146
148
  */
147
- theme: PropTypes.object,
148
- /**
149
- * Color props of default theme
150
- */
151
- themeColor: PropTypes.object,
149
+ inBuiltCss: PropTypes.object,
152
150
  /**
153
151
  * Label of Input
154
152
  */
@@ -193,11 +191,28 @@ TextInput.propTypes = {
193
191
  * input field disabled or not
194
192
  */
195
193
  isDisabled: PropTypes.bool,
194
+ /**
195
+ * receives theme object
196
+ */
197
+ theme: PropTypes.object,
198
+
199
+ };
200
+
201
+ Input.defaultProps = {
202
+ theme: defaultThemeColor,
203
+ };
204
+
205
+ TextWrapper.defaultProps = {
206
+ theme: defaultThemeColor,
207
+ };
208
+
209
+ Form.defaultProps = {
210
+ theme: defaultThemeColor,
196
211
  };
197
212
 
198
213
  TextInput.defaultProps = {
199
- themeColor: defaultThemeColor,
200
- theme: defaultStyles,
214
+ theme: defaultThemeColor,
215
+ inBuiltCss: defaultStyles,
201
216
  label: '',
202
217
  required: false,
203
218
  isValid: true,