feat(resident-app): DOMA-9506 residents 👨🏻‍👩🏻‍👦🏻‍👦🏻 (#4911)

* chore(ui): DOMA-9506 add onMount prop to Input.Phone * chore(ui): DOMA-9506 fix Input.Phone types * feat(ui): DOMA-9506 added input prefix and changed caret color * feat(resident-app): DOMA-9506 extractSSR * feat(resident-app): DOMA-9506 tmp * feat(ui): DOMA-9506 added ellipsis prop to Select * fix(resident-app): DOMA-9506 fixed AddressSearch ellipsis * fix(ui): DOMA-9506 fixed rtl text alignment * chore(resident-app): DOMA-9506 submodule sync * chore(resident-app): DOMA-9506 fix stylelint error
open-condo-software · Jul 9, 2024 · 4057daa · 4057daa
1 parent 5be0b89
commit 4057daa
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 4 deletions.
diff --git a/apps/dev-portal/domains/miniapp/components/B2CApp/edit/properties/CreatePropertyModal.tsx b/apps/dev-portal/domains/miniapp/components/B2CApp/edit/properties/CreatePropertyModal.tsx
@@ -171,6 +171,7 @@ export const CreatePropertyModal: React.FC<CreatePropertyModalProps> = ({ open,
                                 filterOption={false}
                                 displayMode='fill-parent'
                                 notFoundContentLabel={searchValue.length ? NoDataMessage : EmptySearchNoDataMessage}
+                                ellipsis='start'
                             />
                         </Form.Item>
                     </Col>

diff --git a/apps/resident-app b/apps/resident-app
diff --git a/packages/ui/src/components/Input/input.tsx b/packages/ui/src/components/Input/input.tsx
@@ -18,13 +18,15 @@ export type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'style'
 export type InputProps = BaseInputProps & {
     allowClear?: boolean
     suffix?: string
+    prefix?: string
 }
 
 const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> = React.forwardRef((props, ref) => {
     const {
         allowClear: allowClearProp,
         className: propsClassName,
         suffix,
+        prefix,
         ...restProps
     } = props
 
@@ -37,6 +39,7 @@ const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<In
     }, [allowClearProp])
 
     const className = classNames(propsClassName, {
+        [`${INPUT_CLASS_PREFIX}-with-prefix`]: prefix,
         [`${INPUT_CLASS_PREFIX}-with-suffix`]: suffix,
     })
 
@@ -47,6 +50,7 @@ const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<In
         className={className}
         allowClear={allowClear}
         suffix={suffix}
+        prefix={prefix}
     />
 })
 

diff --git a/packages/ui/src/components/Input/phone.tsx b/packages/ui/src/components/Input/phone.tsx
@@ -9,8 +9,9 @@ import type { PhoneInputProps as DefaultPhoneInputProps } from 'react-phone-inpu
 const DEFAULT_COUNTRY = 'ru'
 const DEFAULT_PLACEHOLDER = '7 (999) 123-4567'
 
-export type PhoneInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style' | 'value' | 'onChange'>
-& Pick<DefaultPhoneInputProps, 'country' | 'placeholder' | 'onChange' | 'value'>
+export type PhoneInputProps = Pick<DefaultPhoneInputProps, 'country' | 'placeholder' | 'onChange' | 'value' | 'onMount' | 'disabled'> & {
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style' | 'value' | 'onChange'>
+}
 
 const Phone: React.FC<PhoneInputProps> = (props) => {
     const { country, placeholder, onChange, disabled = false, ...restProps } = props

diff --git a/packages/ui/src/components/Input/style.less b/packages/ui/src/components/Input/style.less
@@ -11,6 +11,12 @@
   .condo-typography-text-large();
 }
 
+.condo-input-with-prefix.condo-input-affix-wrapper {
+  & > .condo-input-prefix {
+    color: @condo-global-color-gray-7;
+  }
+}
+
 .condo-input-with-suffix.condo-input-affix-wrapper {
   padding-right: @condo-global-spacing-4;
 

diff --git a/packages/ui/src/components/Select/select.tsx b/packages/ui/src/components/Select/select.tsx
@@ -74,17 +74,34 @@ export type SelectProps<ValueType = SelectValueTypeBase> = Pick<DefaultSelectPro
     type?: typeof SELECT_TYPES[number]
     onChange?: OnChangeType
     notFoundContentLabel?: string
+    ellipsis?: 'end' | 'start'
 } & CustomSelectProps<ValueType>
 
 // TODO(DOMA-8757): default props autoClearSearchValue = false. Multi select search should not reset after selection
 const Select = <ValueType extends SelectValueTypeBase>(props: SelectProps<ValueType>): React.ReactElement => {
-    const { mode, options, displayMode = 'fill-parent', type, onChange, id, notFoundContentLabel, value,  ...rest } = props
+    const {
+        mode,
+        options,
+        displayMode = 'fill-parent',
+        type,
+        onChange,
+        id,
+        notFoundContentLabel,
+        value,
+        ellipsis = 'suffix',
+        ...rest
+    } = props
 
     const children = useItems(options)
 
     const className = classNames({
         [`${SELECT_CLASS_PREFIX}-${displayMode}`]: displayMode,
         [`${SELECT_CLASS_PREFIX}-${type}`]: !mode && type,
+        [`${SELECT_CLASS_PREFIX}-ellipsis-${ellipsis}`]: ellipsis,
+    })
+
+    const dropDownClassName = classNames({
+        [`${SELECT_CLASS_PREFIX}-dropdown-ellipsis-${ellipsis}`]: ellipsis,
     })
 
     const handleChange = useCallback<OnChangeType>((value, option) => {
@@ -115,6 +132,7 @@ const Select = <ValueType extends SelectValueTypeBase>(props: SelectProps<ValueT
             mode={mode}
             prefixCls={SELECT_CLASS_PREFIX}
             className={className}
+            popupClassName={dropDownClassName}
             suffixIcon={<ChevronDown size='small' />}
             onChange={handleChange}
             removeIcon={<Close size='small' />}

diff --git a/packages/ui/src/components/Select/style.less b/packages/ui/src/components/Select/style.less
@@ -328,4 +328,11 @@
   .condo-select-item-option-content {
     .condo-typography-text-medium();
   }
+
+  &.condo-select-dropdown-ellipsis-start {
+    .condo-select-item-option-content {
+      direction: rtl;
+      text-align: left;
+    }
+  }
 }
diff --git a/packages/ui/src/stories/Input/Input.stories.tsx b/packages/ui/src/stories/Input/Input.stories.tsx
@@ -11,6 +11,7 @@ export default {
         disabled: false,
         allowClear: false,
         suffix: '',
+        prefix: '',
     },
 } as ComponentMeta<typeof Component>
 

diff --git a/yarn.lock b/yarn.lock
@@ -2029,6 +2029,7 @@ __metadata:
     apollo-upload-client: ^17
     apollo3-cache-persist: ^0.15.0
     classnames: ^2.3.2
+    cookies-next: ^4.2.1
     deepmerge: ^4.3.1
     graphql: ^16.8.1
     http-proxy: ^1.18.1
@@ -16302,6 +16303,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@types/cookie@npm:0.6.0"
+  checksum: 5edce7995775b0b196b142883e4d4f71fd93c294eaec973670f1fa2540b70ea7390408ed513ddefef5fcb12a578100c76596e8f2a714b0c2ae9f70ee773f4510
+  languageName: node
+  linkType: hard
+
 "@types/cookies@npm:*":
   version: 0.7.7
   resolution: "@types/cookies@npm:0.7.7"
@@ -23250,6 +23258,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "cookie@npm:0.6.0"
+  checksum: f56a7d32a07db5458e79c726b77e3c2eff655c36792f2b6c58d351fb5f61531e5b1ab7f46987150136e366c65213cbe31729e02a3eaed630c3bf7334635fb410
+  languageName: node
+  linkType: hard
+
 "cookiejar@npm:^2.1.3":
   version: 2.1.3
   resolution: "cookiejar@npm:2.1.3"
@@ -23268,6 +23283,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookies-next@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "cookies-next@npm:4.2.1"
+  dependencies:
+    "@types/cookie": ^0.6.0
+    cookie: ^0.6.0
+  checksum: e78e9871a516b5ac0c4f02d871ef8c37ef93a2fea9ce781ea88a16a10cc0b16928993dd90786dc8ab43259cffb5822cc4d218d79ed085b8a98b8c2ed3ae004ac
+  languageName: node
+  linkType: hard
+
 "cookies@npm:~0.9.0":
   version: 0.9.1
   resolution: "cookies@npm:0.9.1"