(
-
- {option.name}
-
- )}
- />
+ setFocused(true)}
+ onBlurCapture={() => setFocused(false)}
+ className="dropdownContainer"
+ styleName={`container ${sizeStyle} ${selectedOption ? 'haveValue' : ''} ${
+ errorMsg ? 'haveError' : ''
+ } ${focused ? 'isFocused' : ''}`}
+ >
+
+
({ value: o.label, label: o.label }))}
+ value={selectedOption ? selectedOption.label : null}
+ onChange={(value) => {
+ if (value) {
+ const newOptions = internalOptions.map(o => ({
+ selected: value.label === o.label,
+ label: o.label,
+ }));
+ setInternalOptions(newOptions);
+ delayedOnChange(
+ _.cloneDeep(newOptions),
+ onChange,
+ );
+ }
+ }}
+ placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
+ clearable={false}
+ />
+ 
+
+ {label ? (
+
+ {label}
+ {required ? * : null}
+
+ ) : null}
+ {errorMsg ? (
{errorMsg}) : null}
+
+
setFocused(true)}
+ onClose={() => setFocused(false)}
+ autosize={false}
+ optionComponent={CustomReactSelectRow}
+ options={internalTerms
+ .map(o => ({ value: o.label, label: o.label }))
+ }
+ value={selectedOption}
+ onInputKeyDown={(e) => {
+ switch (e.keyCode) {
+ case 13: // ENTER
+ if (inputField && inputField && inputField[0]) {
+ const { value } = inputField[0];
+ if (
+ !value
+ || !value.trim()
+ || _.find(selectedOption, { label: value })
+ || _.find(internalTerms, { label: value })
+ ) {
+ e.preventDefault();
+ }
+ }
+ break;
+ default:
+ }
+ }}
+ onChange={(value) => {
+ const newValues = _.filter(
+ value,
+ o => o.label && o.label.trim() && !_.find(internalTerms, { label: o.label }),
+ ).map(o => ({ selected: true, label: o.label }));
+ const newTerms = internalTerms
+ .map(o => ({
+ selected: !!_.find(value, { label: o.label }),
+ label: o.label,
+ }))
+ .concat(newValues);
+ setInternalTerms(newTerms);
+ delayedOnChange(
+ _.cloneDeep(newTerms),
+ onChange,
+ );
+ }}
+ placeholder={focused ? '' : `${placeholder}${placeholder && required ? ' *' : ''}`}
+ clearable={false}
+ backspaceRemoves={false}
+ multi
+ promptTextCreator={() => null}
+ filterOptions={() => _.filter(
+ internalTerms, t => !_.find(selectedOption, { label: t.label }),
+ ).map(o => ({ value: o.label, label: o.label }))}
+ />
+
+
+ {label ? (
+
+ {label}
+ {required ? * : null}
+
+ ) : null}
+ {errorMsg ?
{errorMsg} : null}
+
+ {optionsWithKey.map(o => (
+
+
+ {o.label ? ({o.label}) : null}
+
+ ))}
+
+ {
+ delayedOnChange(e.target.value, onChange);
+ setVal(e.target.value);
+ }}
+ />
+ {label ? (
+
+ ) : null}
+ {errorMsg ? ({errorMsg}) : null}
+
+ );
+}
+
+TextInput.defaultProps = {
+ placeholder: '',
+ label: '',
+ errorMsg: '',
+ value: '',
+ onChange: () => {},
+ required: false,
+ size: 'lg',
+};
+
+TextInput.propTypes = {
+ placeholder: PT.string,
+ label: PT.string,
+ errorMsg: PT.string,
+ value: PT.string,
+ onChange: PT.func,
+ required: PT.bool,
+ size: PT.oneOf(['xs', 'lg']),
+};
+
+export default TextInput;
diff --git a/src/shared/components/GUIKit/TextInput/style.scss b/src/shared/components/GUIKit/TextInput/style.scss
new file mode 100644
index 0000000000..b71c2b8184
--- /dev/null
+++ b/src/shared/components/GUIKit/TextInput/style.scss
@@ -0,0 +1,63 @@
+@import '~components/GUIKit/Assets/Styles/default';
+
+.errorMessage {
+ @include errorMessage;
+}
+
+.container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+
+ label {
+ @include textInputLabel;
+ }
+
+ input:not([type='checkbox']) {
+ @include textInput;
+
+ height: 52px;
+ }
+
+ // lg size
+ &.lgSize {
+ input:not([type='checkbox']) {
+ height: 52px;
+ }
+ }
+
+ // xs size
+ &.xsSize {
+ input:not([type='checkbox']) {
+ @include textInputXs;
+
+ height: 40px;
+ padding: 0 15px;
+ }
+
+ .errorMessage {
+ @include errorMessageXs;
+ }
+ }
+
+ input:not([type='checkbox']).haveValue + label,
+ input:not([type='checkbox']):focus + label {
+ display: flex;
+ }
+
+ input:not([type='checkbox']):focus + label {
+ color: $gui-kit-level-2;
+ }
+
+ input:not([type='checkbox']).haveError + label,
+ input:not([type='checkbox']).haveError:focus + label {
+ color: $tc-level-5;
+ }
+
+ input:not([type='checkbox']).haveError,
+ input:not([type='checkbox']).haveError:active,
+ input:not([type='checkbox']).haveError:focus,
+ input:not([type='checkbox']).haveError:hover {
+ border: 2px solid $tc-level-5;
+ }
+}
diff --git a/src/shared/components/GUIKit/Textarea/index.jsx b/src/shared/components/GUIKit/Textarea/index.jsx
new file mode 100644
index 0000000000..f78ac4d75b
--- /dev/null
+++ b/src/shared/components/GUIKit/Textarea/index.jsx
@@ -0,0 +1,68 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/**
+ * Textarea component.
+ */
+import React, { useState, useRef } from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import './style.scss';
+
+import { config } from 'topcoder-react-utils';
+
+function Textarea({
+ placeholder,
+ label,
+ errorMsg,
+ value,
+ onChange,
+ required,
+}) {
+ const [val, setVal] = useState(value);
+ const delayedOnChange = useRef(
+ _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME),
+ ).current;
+
+ return (
+
+
+