Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit ec0e3b6

Browse files
maxceemmaxceem
authored
Merge pull request #79 from dashu-baba/feature/job-rb-management
fixed styles for job-rb
2 parents 7c9a7be + 0470460 commit ec0e3b6

File tree

14 files changed

+160
-81
lines changed

14 files changed

+160
-81
lines changed

‎src/components/DataItem/styles.module.scss

+1
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,5 @@
3030
font-weight: 500;
3131
margin-top: 2px;
3232
text-align: left;
33+
word-break: break-all;
3334
}

‎src/components/DateInput/index.jsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@ import PT from "prop-types";
88
import DatePicker from "react-datepicker";
99
import "./styles.module.scss";
1010

11-
const DateInput = ({ value, onChange, placeholder }) => {
11+
const DateInput = (props) => {
1212
return (
1313
<div styleName="datepicker-wrapper">
1414
<DatePicker
1515
dateFormat="MM/dd/yyyy"
16-
placeholderText={placeholder}
17-
selected={value}
18-
onChange={onChange}
16+
placeholderText={props.placeholder}
17+
selected={props.value}
18+
onChange={props.onChange}
19+
onBlur={props.onBlur}
20+
onFocus={props.onFocus}
1921
/>
2022
</div>
2123
);
@@ -25,6 +27,8 @@ DateInput.propTypes = {
2527
value: PT.string,
2628
onChange: PT.func.isRequired,
2729
placeholder: PT.string,
30+
onBlur: PT.func,
31+
onFocus: PT.func,
2832
};
2933

3034
export default DateInput;

‎src/components/FormField/index.jsx

+28-22
Original file line numberDiff line numberDiff line change
@@ -18,26 +18,28 @@ const FormField = ({ field, isGroupField }) => {
1818
<Field name={field.name}>
1919
{({ input, meta }) => (
2020
<div styleName={isGroupField ? "field-group-field" : ""}>
21-
<label
22-
styleName={
23-
input.value
24-
? "job-field-label"
25-
: "job-field-label job-field-no-label"
26-
}
27-
>
28-
{field.label}
29-
</label>
21+
{ !field.readonly && (
22+
<label
23+
styleName={
24+
(input.value != "undefined" && input.value !== null && input.value !== "") || meta.active
25+
? "job-field-label"
26+
: "job-field-label job-field-no-label"
27+
}
28+
>
29+
{field.label}
30+
</label>
31+
)}
3032
{field.type === FORM_FIELD_TYPE.TEXT && (
3133
<TextInput
3234
maxLength={field.maxLength}
3335
placeholder={field.placeholder}
3436
value={input.value ?? ""}
3537
type="text"
36-
onChange={(v) => {
37-
input.onChange(v);
38-
}}
39-
className={meta.error ? "error" : ""}
38+
className={meta.error && meta.touched ? "error" : ""}
4039
readonly={field.readonly}
40+
onChange={input.onChange}
41+
onBlur={input.onBlur}
42+
onFocus={input.onFocus}
4143
/>
4244
)}
4345
{field.type === FORM_FIELD_TYPE.NUMBER && (
@@ -47,37 +49,41 @@ const FormField = ({ field, isGroupField }) => {
4749
type="number"
4850
minValue={field.minValue}
4951
onChange={input.onChange}
50-
className={meta.error ? "error" : ""}
52+
onBlur={input.onBlur}
53+
onFocus={input.onFocus}
54+
className={meta.error && meta.touched ? "error" : ""}
5155
/>
5256
)}
5357
{field.type === FORM_FIELD_TYPE.TEXTAREA && (
5458
<TextArea
5559
placeholder={field.placeholder}
5660
value={input?.value ?? ""}
5761
onChange={input.onChange}
58-
className={meta.error ? "error" : ""}
62+
onBlur={input.onBlur}
63+
onFocus={input.onFocus}
64+
className={meta.error && meta.touched ? "error" : ""}
5965
/>
6066
)}
6167
{field.type === FORM_FIELD_TYPE.DATE && (
6268
<DateInput
6369
placeholder={field.placeholder}
6470
value={input?.value ?? ""}
65-
onChange={(date) => {
66-
input.onChange(date);
67-
}}
71+
onChange={input.onChange}
72+
onBlur={input.onBlur}
73+
onFocus={input.onFocus}
6874
/>
6975
)}
7076
{field.type === FORM_FIELD_TYPE.SELECT && (
7177
<ReactSelect
7278
value={input?.value ?? ""}
73-
onChange={(val) => {
74-
input.onChange(val);
75-
}}
7679
options={field.selectOptions}
7780
isMulti={field.isMulti}
81+
onChange={input.onChange}
82+
onBlur={input.onBlur}
83+
onFocus={input.onFocus}
7884
/>
7985
)}
80-
{field.isRequired && meta.error && (
86+
{field.isRequired && meta.error && meta.touched && (
8187
<div styleName="field-error">{meta.error}</div>
8288
)}
8389
</div>

‎src/components/FormField/styles.module.scss

+10
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
top: 12px;
1313
background: white;
1414
z-index: 1;
15+
padding: 0 3px;
1516
}
1617

1718
.job-field-no-label {
@@ -21,6 +22,15 @@
2122
input:not([type="checkbox"]),
2223
textarea {
2324
margin-bottom: 0px;
25+
&::placeholder {
26+
color: #AAAAAA;
27+
font-family: Roboto;
28+
font-size: 14px;
29+
font-weight: 400;
30+
line-height: 22px;
31+
text-align: left;
32+
text-transform: none;
33+
}
2434
}
2535

2636
input:read-only {

‎src/components/ReactSelect/index.jsx

+48-25
Original file line numberDiff line numberDiff line change
@@ -8,53 +8,74 @@ import PT from "prop-types";
88
import Select from "react-select";
99
import "./styles.module.scss";
1010

11-
const ReactSelect = ({
12-
value,
13-
onChange,
14-
placeholder,
15-
error,
16-
isMulti,
17-
options,
18-
}) => {
11+
const ReactSelect = (props) => {
1912
const customStyles = {
2013
control: (provided, state) => ({
2114
...provided,
22-
minHeight: "36px",
15+
minHeight: "40px",
16+
border: "1px solid #aaaaab",
17+
borderColor: state.isFocused ? "#55a5ff" : "#aaaaab",
18+
boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow
2319
}),
24-
menu: (provided, state) => ({
20+
menu: (provided) => ({
2521
...provided,
26-
minHeight: "36px",
22+
minHeight: "40px",
2723
zIndex: 10,
2824
}),
29-
valueContainer: (provided, state) => ({
25+
valueContainer: (provided) => ({
3026
...provided,
31-
padding: "0 6px",
27+
padding: "2px 6px",
3228
}),
33-
input: (provided, state) => ({
29+
input: (provided) => ({
3430
...provided,
3531
margin: "0px",
36-
height: "36px",
32+
height: "auto",
33+
padding: "0",
34+
3735
}),
38-
indicatorSeparator: (state) => ({
36+
indicatorSeparator: () => ({
3937
display: "none",
4038
}),
41-
indicatorsContainer: (provided, state) => ({
39+
indicatorsContainer: (provided) => ({
4240
...provided,
43-
height: "40px",
41+
height: "auto",
4442
}),
43+
option: (provided) => ({
44+
...provided,
45+
minHeight: "32px"
46+
}),
47+
placeholder: (provided) => ({
48+
...provided,
49+
color: "#AAAAAA",
50+
fontFamily: "Roboto",
51+
fontSize: "14px",
52+
lineHeight: "22px",
53+
textAlign: "left",
54+
fontWeight: "400"
55+
}),
56+
multiValue: (provided) => ({
57+
...provided,
58+
margin: "3px 3px",
59+
color: "#AAAAAA",
60+
fontFamily: "Roboto",
61+
fontSize: "14px",
62+
lineHeight: "22px",
63+
textAlign: "left",
64+
borderRadius: "5px"
65+
})
4566
};
4667

4768
return (
4869
<div styleName="select-wrapper">
4970
<Select
50-
value={value}
71+
value={props.value}
5172
styles={customStyles}
52-
onChange={(val) => {
53-
onChange(val);
54-
}}
55-
options={options}
56-
styleName={error ? "error" : ""}
57-
isMulti={isMulti}
73+
onChange={props.onChange}
74+
options={props.options}
75+
styleName={props.error ? "error" : ""}
76+
isMulti={props.isMulti}
77+
onBlur={props.onBlur}
78+
onFocus={props.onFocus}
5879
/>
5980
</div>
6081
);
@@ -66,6 +87,8 @@ ReactSelect.propTypes = {
6687
placeholder: PT.string,
6788
error: PT.string,
6889
isMulti: PT.bool,
90+
onBlur: PT.func,
91+
onFocus: PT.func,
6992
options: PT.arrayOf(
7093
PT.shape({
7194
value: PT.string.isRequired,

‎src/components/ReactSelect/styles.module.scss

+6
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,11 @@
88
input {
99
border: none !important;
1010
box-shadow: none !important;
11+
transition: none !important;
12+
height: 28px;
1113
}
1214
}
15+
16+
.react-select__option{
17+
min-height: 32px;
18+
}

‎src/components/TCForm/index.jsx

+24-22
Original file line numberDiff line numberDiff line change
@@ -49,29 +49,31 @@ const TCForm = ({
4949
validate={getValidator(configuration.fields)}
5050
render={({ handleSubmit, invalid, dirty }) => (
5151
<form onSubmit={handleSubmit} styleName="tc-form">
52-
<div styleName="job-form-fields">
53-
{configuration.rows.map((row) => {
54-
return (
55-
<>
56-
{row.type === FORM_ROW_TYPE.GROUP && (
57-
<div styleName="field-group">
58-
{row.fields.map((field) => {
59-
return (
60-
<FormField
61-
field={fields[field]}
62-
isGroupField={true}
63-
/>
64-
);
52+
<div styleName="job-form-fields-container">
53+
<div styleName="job-form-fields-wrapper">
54+
{configuration.rows.map((row) => {
55+
return (
56+
<>
57+
{row.type === FORM_ROW_TYPE.GROUP && (
58+
<div styleName="field-group">
59+
{row.fields.map((field) => {
60+
return (
61+
<FormField
62+
field={fields[field]}
63+
isGroupField={true}
64+
/>
65+
);
66+
})}
67+
</div>
68+
)}
69+
{row.type === FORM_ROW_TYPE.SINGLE &&
70+
row.fields.map((field) => {
71+
return <FormField field={fields[field]} />;
6572
})}
66-
</div>
67-
)}
68-
{row.type === FORM_ROW_TYPE.SINGLE &&
69-
row.fields.map((field) => {
70-
return <FormField field={fields[field]} />;
71-
})}
72-
</>
73-
);
74-
})}
73+
</>
74+
);
75+
})}
76+
</div>
7577
</div>
7678
<div styleName="form-actions">
7779
<Button

‎src/components/TCForm/styles.module.scss

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
@import "styles/include";
22
@import "~react-datepicker/dist/react-datepicker.css";
33

4+
5+
46
.tc-form {
57
width: 100%;
68

7-
.job-form-fields {
8-
padding: 40px 19% 20px;
9+
.job-form-fields-container {
10+
padding: 40px 0px 20px;
11+
12+
.job-form-fields-wrapper{
13+
width: 100%;
14+
max-width: 640px;
15+
margin: 0 auto;
16+
text-align: left;
17+
}
918

1019
input:not([type="checkbox"]),
1120
textarea {
@@ -49,4 +58,4 @@
4958

5059
.datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {
5160
z-index: 100;
52-
}
61+
}

‎src/components/TextArea/index.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ function TextArea(props) {
1616
placeholder={props.placeholder}
1717
value={props.value}
1818
autoFocus={props.autoFocus}
19+
onBlur={props.onBlur}
20+
onFocus={props.onFocus}
1921
/>
2022
);
2123
}
@@ -31,6 +33,8 @@ TextArea.propTypes = {
3133
onChange: PT.func,
3234
placeholder: PT.string,
3335
value: PT.string.isRequired,
36+
onBlur: PT.func,
37+
onFocus: PT.func,
3438
};
3539

3640
export default TextArea;

‎src/components/TextInput/index.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ function TextInput(props) {
3131
value={props.value}
3232
autoFocus={props.autoFocus}
3333
readOnly={props.readonly ?? false}
34+
onBlur={props.onBlur}
35+
onFocus={props.onFocus}
3436
/>
3537
);
3638
}
@@ -46,6 +48,8 @@ TextInput.propTypes = {
4648
className: PT.string,
4749
maxLength: PT.number,
4850
onChange: PT.func,
51+
onBlur: PT.func,
52+
onFocus: PT.func,
4953
placeholder: PT.string,
5054
value: PT.string.isRequired,
5155
type: PT.string.isRequired,

0 commit comments

Comments
 (0)