packages/pass/components/Form/Field/VaultPickerField.tsx

   1 import { type FC, useMemo } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { c } from 'ttag';
   5
   6 import { Icon, Option } from '@proton/components';
   7 import type { VaultIconName } from '@proton/pass/components/Vault/VaultIcon';
   8 import { VaultIcon } from '@proton/pass/components/Vault/VaultIcon';
   9 import type { ShareItem } from '@proton/pass/store/reducers';
  10 import { selectWritableVaults } from '@proton/pass/store/selectors';
  11 import type { Maybe, ShareType } from '@proton/pass/types';
  12 import { VaultColor } from '@proton/pass/types/protobuf/vault-v1';
  13 import clsx from '@proton/utils/clsx';
  14
  15 import { VAULT_COLOR_MAP } from '../../Vault/constants';
  16 import { SelectField, type SelectFieldProps } from './SelectField';
  17
  18 import './VaultPickerField.scss';
  19
  20 type VaultPickerSelection = { title: string; icon?: VaultIconName; color?: VaultColor };
  21 type VaultPickerFieldProps = Omit<SelectFieldProps, 'children'> & { legacy?: boolean };
  22 type VaultPickerProps = VaultPickerFieldProps & { vaults: ShareItem<ShareType.Vault>[] };
  23
  24 export const VaultPicker: FC<VaultPickerProps> = ({ legacy, vaults, ...props }) => {
  25     const selectedId = props.field.value;
  26
  27     const selectedVault = useMemo<Maybe<VaultPickerSelection>>(() => {
  28         const vaultMatch = vaults.find(({ shareId }) => shareId === selectedId);
  29
  30         if (vaultMatch) {
  31             return {
  32                 title: vaultMatch?.content.name,
  33                 icon: vaultMatch?.content.display.icon,
  34                 color: vaultMatch?.content.display.color,
  35             };
  36         }
  37     }, [selectedId, vaults]);
  38
  39     return (
  40         <div style={{ '--vault-item-color': VAULT_COLOR_MAP[selectedVault?.color ?? VaultColor.COLOR1] }}>
  41             <SelectField
  42                 {...props}
  43                 unstyled={!legacy}
  44                 className={clsx('pass-vault-picker', legacy && 'pass-vault-picker--legacy', props.className)}
  45                 selectClassName={clsx(!legacy && 'button button-pill button-medium button-solid-norm')}
  46                 renderSelected={() => (
  47                     <div className="flex flex-nowrap gap-2 justify-items-center items-center">
  48                         <VaultIcon
  49                             icon={selectedVault?.icon}
  50                             color={selectedVault?.color ?? VaultColor.COLOR1}
  51                             size={3.5}
  52                             className="shrink-0"
  53                         />
  54                         <span className="text-sm text-ellipsis">
  55                             {selectedVault?.title ?? c('Placeholder').t`Pick a vault`}
  56                         </span>
  57                     </div>
  58                 )}
  59             >
  60                 {vaults.map(({ content, shared, shareId }: ShareItem<ShareType.Vault>) => {
  61                     const selected = selectedId === shareId;
  62
  63                     return (
  64                         <Option key={shareId} value={shareId} title={content.name}>
  65                             <div className="flex gap-x-3 items-center">
  66                                 <VaultIcon
  67                                     icon={content.display.icon}
  68                                     color={content.display.color}
  69                                     size={3.5}
  70                                     highlighted={selected}
  71                                 />
  72                                 <span className="flex-1 text-ellipsis">{content.name}</span>
  73                                 {shared && (
  74                                     <Icon
  75                                         name="users"
  76                                         color={`var(${selected ? '--interaction-norm-contrast' : '--text-weak'})`}
  77                                         size={3.5}
  78                                     />
  79                                 )}
  80                             </div>
  81                         </Option>
  82                     );
  83                 })}
  84             </SelectField>
  85         </div>
  86     );
  87 };
  88
  89 export const VaultPickerField: FC<VaultPickerFieldProps> = (props) => {
  90     const vaults = useSelector(selectWritableVaults);
  91     return <VaultPicker vaults={vaults} {...props} />;
  92 };