antd#SelectProps TypeScript Examples

EntitySelectField = observer((props: EntitySelectFieldProps) => {
  const {optionsContainer, associationOptions, ...rest} = props;

  let options: Array<HasId & MayHaveInstanceName> | undefined;

  if (associationOptions != null) {
    options = associationOptions;
  } else if (optionsContainer != null) {
    options = optionsContainer
      .items
      .filter((e: MayHaveId & MayHaveInstanceName) => e.id != null)
      .map((e: MayHaveId & MayHaveInstanceName) => ({id: e.id!, instanceName: e._instanceName}));
  }

  // in case when value==null we need to reset value to 'undefined', otherwise `Select` component behaves
  // as if it is filled (item is set, clear button appears), but really it doesn't
  const value = (rest as SelectProps<any>).value == null ? undefined : (rest as SelectProps<any>).value;
  return (
    <Select {...rest} value={value} loading={optionsContainer && optionsContainer.status === "LOADING"}>
      {options && options.map(option =>
        <Select.Option value={getStringId(option.id)} key={getStringId(option.id)}>
          {option._instanceName ?? option.id}
        </Select.Option>)
      }
    </Select>);
})

getItem = ({ attr, type, inputNode }: {
  attr?: Partial<ItemChildAttr<any, any>>;
  type?: ItemChildType;
  inputNode?: ((...arg: any[]) => React.ReactNode) | React.ReactNode;
}) => {
  let renderItem = undefined;
  if (type === 'Input') {
    const inputAttr = attr as InputProps;
    renderItem = <Input {...inputAttr} />;
  } else if (type === 'TextArea') {
    const inputAttr = attr as TextAreaProps;
    renderItem = <Input.TextArea {...inputAttr} />;
  } else if (type === 'InputNumber') {
    const inputAttr = attr as InputNumberProps;
    renderItem = <InputNumber {...inputAttr} />;
  } else if (type === 'AutoComplete') {
    const inputAttr = attr as AutoCompleteProps;
    renderItem = <AutoComplete {...inputAttr} />;
  } else if (type === 'Cascader') {
    const inputAttr = attr as CascaderProps;
    renderItem = <Cascader {...inputAttr} />;
  } else if (type === 'DatePicker') {
    const inputAttr = attr as DatePickerProps;
    renderItem = <DatePicker {...inputAttr} />;
  } else if (type === 'Rate') {
    const inputAttr = attr as RateProps;
    renderItem = <Rate {...inputAttr} />;
  } else if (type === 'Slider') {
    const inputAttr = attr as SliderSingleProps;
    renderItem = <Slider {...inputAttr} />;
  } else if (type === 'TreeSelect') {
    const inputAttr = attr as TreeSelectProps<any>;
    renderItem = <TreeSelect {...inputAttr} />;
  } else if (type === 'Select') {
    const inputAttr = attr as SelectProps<any>;
    renderItem = <Select {...inputAttr} />;
  } else if (type === 'Checkbox') {
    const inputAttr = attr as CheckboxGroupProps;
    renderItem = <Checkbox.Group {...inputAttr} />;
  } else if (type === 'Mentions') {
    const inputAttr = attr as MentionProps;
    renderItem = <Mentions {...inputAttr} />;
  } else if (type === 'Radio') {
    const inputAttr = attr as RadioProps;
    renderItem = <Radio.Group {...inputAttr} />;
  } else if (type === 'Switch') {
    const inputAttr = attr as SwitchProps;
    renderItem = <Switch {...inputAttr} />;
  } else if (type === 'TimePicker') {
    const inputAttr = attr as TimePickerProps;
    renderItem = <TimePicker {...inputAttr} />;
  } else if (type === 'Upload') {
    const inputAttr = attr as UploadProps;
    renderItem = <Upload {...inputAttr} />;
  } else if (type === 'RangePicker') {
    const inputAttr = attr as RangePickerProps;
    renderItem = <RangePicker {...inputAttr} />;
  } else if (type === 'Custom') {
    renderItem = inputNode;
  }
  return renderItem;
}

getCheck = (item: any, value: TablesProps["value"], mode: any, labelInValue: boolean, fieldNames: SelectProps<any>["fieldNames"]) => {
  const valueField = fieldNames && fieldNames.value || "value"

  if (["tags", "multiple"].includes(mode) && Array.isArray(value)) {
    const fig = value.find(it => {
      if (labelInValue && it) {
        return it[valueField] === item[valueField]
      }
      return it === value
    })
    if (fig) {
      return true
    }
  } else {
    if (labelInValue && value) {
      return value[valueField] === item[valueField]
    } else {
      return value === item
    }
  }
  return false
}

ORGANIZATION_SELECT_SHOW_ACTIONS: SelectProps<string>['showAction'] = ['focus', 'click']

DashboardSelect = (props: SelectProps<any>) => (
  <AntSelect
    suffixIcon={<Icon className="select-icon" icon="#iconnav-foldTriangle" />}
    className="dashboard-select"
    {...props}
  />
)

export function CorrelationConfig(): JSX.Element {
    const { updateCurrentTeam } = useActions(teamLogic)
    const { currentTeam, funnelCorrelationConfig } = useValues(teamLogic)

    const handleChange = (
        excludedProperties?: string[],
        excludedEvents?: string[],
        excludedEventProperties?: string[]
    ): void => {
        if (currentTeam) {
            const updatedConfig = { ...funnelCorrelationConfig }
            if (excludedProperties !== undefined) {
                updatedConfig.excluded_person_property_names = excludedProperties
            }
            if (excludedEventProperties !== undefined) {
                updatedConfig.excluded_event_property_names = excludedEventProperties
            }
            if (excludedEvents !== undefined) {
                updatedConfig.excluded_event_names = excludedEvents
            }
            if (updatedConfig && JSON.stringify(updatedConfig) !== JSON.stringify(funnelCorrelationConfig)) {
                updateCurrentTeam({ correlation_config: updatedConfig })
            }
        }
    }

    const tagRender: SelectProps<any>['tagRender'] = (props) => {
        const { label, onClose } = props
        return (
            <Tag
                closable={true}
                onClose={onClose}
                style={{
                    margin: '0.25rem',
                    padding: '0.25rem 0.5em',
                    background: '#D9D9D9',
                    border: '1px solid #D9D9D9',
                    borderRadius: '40px',
                }}
            >
                {label}
            </Tag>
        )
    }

    return (
        <>
            <h2 className="subtitle" id="internal-users-filtering">
                Correlation analysis exclusions{' '}
                <LemonTag type="warning" style={{ marginLeft: 8 }}>
                    Beta
                </LemonTag>
            </h2>
            <p>Globally exclude events or properties that do not provide relevant signals for your conversions.</p>

            <InfoMessage>
                Correlation analysis can automatically surface relevant signals for conversion, and help you understand
                why your users dropped off and what makes them convert.
            </InfoMessage>
            <Divider />
            {currentTeam && (
                <>
                    <h3 style={{ display: 'flex', alignItems: 'center', color: 'var(--muted-alt)' }}>
                        <IconSelectProperties style={{ marginRight: 4, fontSize: '1.2em' }} />
                        Excluded person properties
                    </h3>
                    <PersonPropertySelect
                        onChange={(properties) => handleChange(properties)}
                        selectedProperties={currentTeam.correlation_config.excluded_person_property_names || []}
                    />
                    <h3 style={{ display: 'flex', alignItems: 'center', color: 'var(--muted-alt)' }}>
                        <IconSelectEvents style={{ marginRight: 4, fontSize: '1.2em' }} />
                        Excluded events
                    </h3>
                    <EventSelect
                        onChange={(excludedEvents) => handleChange(undefined, excludedEvents)}
                        selectedEvents={currentTeam.correlation_config.excluded_event_names || []}
                        addElement={
                            <Button type="link" className="new-prop-filter" icon={<PlusCircleOutlined />}>
                                Add exclusion
                            </Button>
                        }
                    />
                    <h3 style={{ display: 'flex', alignItems: 'center', color: 'var(--muted-alt)' }}>
                        <IconSelectEvents style={{ marginRight: 4, fontSize: '1.2em' }} />
                        Excluded event properties
                    </h3>
                    <div style={{ marginBottom: 8 }}>
                        <Select
                            mode="tags"
                            style={{ width: '100%' }}
                            allowClear
                            tagRender={tagRender}
                            onChange={(properties) => handleChange(undefined, undefined, properties)}
                            value={currentTeam.correlation_config.excluded_event_property_names || []}
                            tokenSeparators={[',']}
                        />
                    </div>
                </>
            )}
        </>
    )
}

SelectPro = (props: CP_SELECT_PRO.Props) => {
  const [selectVal, setSelectVal] = React.useState('');
  const { props: configProps, state: propsState = {}, data, operations, execOperation } = props;
  const { renderType } = configProps || {};
  const { wait = 200 } = operations.onSearch || {};

  React.useEffect(() => {
    setSelectVal(propsState?.value);
  }, [propsState]);

  const handleChange = (val: any) => {
    const { confirm } = operations.onChange || {};
    if (confirm) {
      Modal.confirm({
        title: confirm?.title,
        content: confirm?.subTitle,
        onOk: () => {
          setSelectVal(val);
          execOperation(operations?.onChange, val ?? null);
        },
      });
    } else {
      setSelectVal(val);
      execOperation(operations?.onChange, val ?? null);
    }
  };

  const renderOption = React.useCallback(
    (item) => {
      let option: React.ReactNode = null;
      switch (renderType) {
        case 'apiProto':
          {
            const { id, method, assetName, version, operationID, path } = item;
            const tips = [assetName, version, operationID].filter((t) => !!t);
            option = (
              <Option value={id} key={id} label={`${method} ${path}`}>
                <div className="text-sub nowrap">{tips.join(' / ')}</div>
                <div className="text-normal">
                  {method} {path}
                </div>
              </Option>
            );
          }
          break;
        default:
          option = (
            <Option value={item.id} key={item.id}>
              {item.name}
            </Option>
          );
      }
      return option;
    },
    [renderType],
  );

  const content = React.useMemo(() => {
    return map(data?.list || [], renderOption);
  }, [data, renderOption]);

  const handleSearch = React.useCallback(
    debounce((val: string) => {
      execOperation(operations?.onSearch, val);
    }, wait),
    [wait],
  );

  const restProps = React.useMemo(() => {
    const obj: SelectProps<any> = omit(configProps, customizeProps);
    if (configProps.showSearch) {
      obj.onSearch = handleSearch;
    }
    return obj;
  }, [configProps, handleSearch]);

  return (
    <>
      <Select filterOption={false} {...restProps} value={selectVal} onChange={handleChange}>
        {content}
      </Select>
    </>
  );
}